event browser: turn into component

frontend/src/app.js

@@ -1,202 +1,203 b''
 // # Copyright (C) 2010-2016  RhodeCode GmbH
 // #
 // # This program is free software: you can redistribute it and/or modify
 // # it under the terms of the GNU Affero General Public License, version 3
 // # (only), as published by the Free Software Foundation.
 // #
 // # This program is distributed in the hope that it will be useful,
 // # but WITHOUT ANY WARRANTY; without even the implied warranty of
 // # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // # GNU General Public License for more details.
 // #
 // # You should have received a copy of the GNU Affero General Public License
 // # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // #
 // # This program is dual-licensed. If you wish to learn more about the
 // # AppEnlight Enterprise Edition, including its added features, Support
 // # services, and proprietary license terms, please see
 // # https://rhodecode.com/licenses/
 
 'use strict';
 
 // Declare app level module which depends on filters, and services
 angular.module('appenlight.base', [
     'ngRoute',
     'ui.router',
     'ui.router.router',
     'underscore',
     'ui.bootstrap',
     'ngResource',
     'ngAnimate',
     'ngCookies',
     'smart-table',
     'angular-toArrayFilter',
     'mentio'
 ]);
 
 angular.module('appenlight.filters', []);
 angular.module('appenlight.templates', []);
 angular.module('appenlight.controllers', [
     'appenlight.base'
 ]);
 angular.module('appenlight.components', [
     'appenlight.components.channelstream',
     'appenlight.components.appenlightApp',
     'appenlight.components.appenlightHeader',
     'appenlight.components.indexDashboardView',
     'appenlight.components.logsBrowserView',
+    'appenlight.components.eventBrowserView'
 ]);
 angular.module('appenlight.directives', [
     'appenlight.directives.c3chart',
     'appenlight.directives.confirmValidate',
     'appenlight.directives.focus',
     'appenlight.directives.formErrors',
     'appenlight.directives.humanFormat',
     'appenlight.directives.isoToRelativeTime',
     'appenlight.directives.permissionsForm',
     'appenlight.directives.smallReportGroupList',
     'appenlight.directives.smallReportList',
     'appenlight.directives.pluginConfig',
     'appenlight.directives.recursive',
     'appenlight.directives.reportAlertAction',
     'appenlight.directives.postProcessAction',
     'appenlight.directives.rule',
     'appenlight.directives.ruleReadOnly'
 ]);
 angular.module('appenlight.services', [
     'appenlight.services.chartResultParser',
     'appenlight.services.resources',
     'appenlight.services.stateHolder',
     'appenlight.services.typeAheadTagHelper',
     'appenlight.services.UUIDProvider'
 ]).value('version', '0.1');
 
 
 var pluginsToLoad = _.map(decodeEncodedJSON(window.AE.plugins),
     function(item){
         return item.config.angular_module
     });
 console.log(pluginsToLoad);
 angular.module('appenlight.plugins', pluginsToLoad);
 
 var app = angular.module('appenlight', [
     'appenlight.base',
     'appenlight.config',
     'appenlight.templates',
     'appenlight.filters',
     'appenlight.services',
     'appenlight.directives',
     'appenlight.controllers',
     'appenlight.components',
     'appenlight.plugins'
 ]);
 
 // needs manual execution because of plugin files
 function kickstartAE(initialUserData) {
     app.config(['$httpProvider', '$uibTooltipProvider', '$locationProvider', function ($httpProvider, $uibTooltipProvider, $locationProvider) {
         $locationProvider.html5Mode(true);
         $httpProvider.interceptors.push(['$q', '$rootScope', '$timeout', 'stateHolder', function ($q, $rootScope, $timeout, stateHolder) {
             return {
                 'response': function (response) {
                     var flashMessages = angular.fromJson(response.headers('x-flash-messages'));
                     if (flashMessages && flashMessages.length > 0) {
                         stateHolder.flashMessages.extend(flashMessages);
                     }
                     return response;
                 },
                 'responseError': function (rejection) {
                     if (rejection.status > 299 && rejection.status !== 422) {
                         stateHolder.flashMessages.extend([{
                             msg: 'Response status code: ' + rejection.status + ', "' + rejection.statusText + '", url: ' + rejection.config.url,
                             type: 'error'
                         }]);
                     }
                     if (rejection.status == 0) {
                         stateHolder.flashMessages.extend([{
                             msg: 'Response timeout',
                             type: 'error'
                         }]);
                     }
                     var flashMessages = angular.fromJson(rejection.headers('x-flash-messages'));
                     if (flashMessages && flashMessages.length > 0) {
                         stateHolder.flashMessages.extend(flashMessages);
                     }
 
                     return $q.reject(rejection);
                 }
             }
         }]);
 
         $uibTooltipProvider.options({appendToBody: true});
 
     }]);
 
 
     app.config(function ($provide) {
         $provide.decorator("$exceptionHandler", function ($delegate) {
             return function (exception, cause) {
                 $delegate(exception, cause);
                 if (typeof AppEnlight !== 'undefined') {
                     AppEnlight.grabError(exception);
                 }
             };
         });
     });
 
     app.run(['$rootScope', '$timeout', 'stateHolder', '$state', '$location', '$transitions', '$window', 'AeConfig',
         function ($rootScope, $timeout, stateHolder, $state, $location, $transitions, $window, AeConfig) {
             if (initialUserData){
                 stateHolder.AeUser.update(initialUserData);
             }
             $rootScope.$state = $state;
             $rootScope.stateHolder = stateHolder;
             $rootScope.flash = stateHolder.flashMessages.list;
             $rootScope.closeAlert = stateHolder.flashMessages.closeAlert;
             $rootScope.AeConfig = AeConfig;
 
             var transitionApp = function($transition$, $state) {
                 // redirect user to /register unless its one of open views
                 var isGuestState = [
                         'report.view_detail',
                         'report.view_group',
                         'dashboard.view'
                     ].indexOf($transition$.to().name) !== -1;
 
                 var path = $window.location.pathname;
                 // strip trailing slash
                 if (path.substr(path.length - 1) === '/') {
                     path = path.substr(0, path.length - 1);
                 }
                 var isOpenView = false;
                 var openViews = [
                     AeConfig.urls.otherRoutes.lostPassword,
                     AeConfig.urls.otherRoutes.lostPasswordGenerate
                 ];
                 console.log('$transitions.onBefore', path, $transition$.to().name, $state);
                 _.each(openViews, function (url) {
                     var url = '/' + url.split('/').slice(3).join('/');
                     if (url === path) {
                         isOpenView = true;
                     }
                 });
                 if (stateHolder.AeUser.id === null && !isGuestState && !isOpenView) {
                     if (window.location.toString().indexOf(AeConfig.urls.otherRoutes.register) === -1) {
                         console.log('redirect to register');
                         var newLocation = AeConfig.urls.otherRoutes.register + '?came_from=' + encodeURIComponent(window.location);
                         // fix infinite digest here
                         $rootScope.$on('$locationChangeStart',
                             function(event, toState, toParams, fromState, fromParams, options){
                                 event.preventDefault();
                                 $window.location = newLocation;
                             });
                         $window.location = newLocation;
                         return false;
                     }
                     return false;
                 }
                 return true;
             };
             $transitions.onBefore({}, transitionApp);
 
         }]);
 }

frontend/src/components/views/event-browser/event-browser.html

@@ -1,43 +1,43 b''
 <div class="panel panel-default">
     <div class="panel-body">
 
         <h1>Event history</h1>
 
         <table class="table table-striped event-table">
-            <tr ng-repeat="event in events.events track by event.id">
+            <tr ng-repeat="event in $ctrl.events track by event.id">
                 <td class="text-center icons">
                     <span ng-if="event.event_type === 1" class="fa fa-exclamation-triangle fa-2x" style="color:orangered"></span>
                     <span ng-if="event.event_type === 3" class="fa fa-clock-o fa-2x" style="color:darkorange"></span>
                     <span ng-if="event.event_type === 7" class="fa fa-question-circle fa-2x" style="color:dimgrey"></span>
                     <span ng-if="event.event_type === 9" class="fa fa-line-chart fa-2x" style="color:green"></span>
                 </td>
                 <td>
                     <p>For <strong>{{ event.resource_name }}</strong></p>
 
                     <p>{{ event.text }}</p>
                     <small class="date" data-uib-tooltip="{{event.start_date}}"> created:
                         <iso-to-relative-time time="{{event.start_date}}"/>
                     </small>
                     <small class="date" ng-show="event.end_date" data-uib-tooltip="{{event.end_date}}"> | closed:
                         <iso-to-relative-time time="{{event.end_date}}"/>
                     </small>
                 </td>
                 <td class="options">
 
                     <span class="dropdown pull-right" ng-if="event.status === 1" data-uib-dropdown on-toggle="toggled(open)">
                       <a class="dropdown-toggle btn btn-danger" data-uib-dropdown-toggle>
                           <span class="fa fa-exclamation-circle"></span>
                       </a>
                       <ul class="dropdown-menu">
                           <li>
-                              <a ng-click="events.closeEvent(event)">Close event</a>
+                              <a ng-click="$ctrl.closeEvent(event)">Close event</a>
                               <a>Do nothing</a>
                           </li>
                       </ul>
                     </span>
 
                 </td>
             </tr>
         </table>
     </div>
 </div>

frontend/src/components/views/event-browser/event-browser.js

@@ -1,44 +1,48 b''
 // # Copyright (C) 2010-2016  RhodeCode GmbH
 // #
 // # This program is free software: you can redistribute it and/or modify
 // # it under the terms of the GNU Affero General Public License, version 3
 // # (only), as published by the Free Software Foundation.
 // #
 // # This program is distributed in the hope that it will be useful,
 // # but WITHOUT ANY WARRANTY; without even the implied warranty of
 // # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // # GNU General Public License for more details.
 // #
 // # You should have received a copy of the GNU Affero General Public License
 // # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // #
 // # This program is dual-licensed. If you wish to learn more about the
 // # AppEnlight Enterprise Edition, including its added features, Support
 // # services, and proprietary license terms, please see
 // # https://rhodecode.com/licenses/
 
-angular.module('appenlight.controllers').controller('EventsController', EventsController);
+angular.module('appenlight.components.eventBrowserView', [])
+    .component('eventBrowserView', {
+        templateUrl: 'components/views/event-browser/event-browser.html',
+        controller: EventBrowserController
+    });
 
-EventsController.$inject = ['eventsNoIdResource', 'eventsResource'];
+EventBrowserController.$inject = ['eventsNoIdResource', 'eventsResource'];
 
-function EventsController(eventsNoIdResource, eventsResource) {
-    console.info('EventsController');
+function EventBrowserController(eventsNoIdResource, eventsResource) {
+    console.info('EventBrowserController');
     var vm = this;
 
     vm.loading = {events: true};
 
     vm.events = eventsNoIdResource.query(
         {key: 'events'},
         function (data) {
             vm.loading.events = false;
         });
 
 
     vm.closeEvent = function (event) {
         console.log('closeEvent');
         eventsResource.update({eventId: event.id}, {status: 0}, function (data) {
             event.status = 0;
         });
     }
 
 }

frontend/src/routes.js

@@ -1,248 +1,247 b''
 // # Copyright (C) 2010-2016  RhodeCode GmbH
 // #
 // # This program is free software: you can redistribute it and/or modify
 // # it under the terms of the GNU Affero General Public License, version 3
 // # (only), as published by the Free Software Foundation.
 // #
 // # This program is distributed in the hope that it will be useful,
 // # but WITHOUT ANY WARRANTY; without even the implied warranty of
 // # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // # GNU General Public License for more details.
 // #
 // # You should have received a copy of the GNU Affero General Public License
 // # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 // #
 // # This program is dual-licensed. If you wish to learn more about the
 // # AppEnlight Enterprise Edition, including its added features, Support
 // # services, and proprietary license terms, please see
 // # https://rhodecode.com/licenses/
 
 angular.module('appenlight').config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
 
     $urlRouterProvider.otherwise('/ui');
 
     $stateProvider.state('logs', {
         url: '/ui/logs?resource',
         component: 'logsBrowserView'
     });
 
     $stateProvider.state('front_dashboard', {
         url: '/ui',
         component: 'indexDashboardView'
     });
     
     $stateProvider.state('report', {
         abstract: true,
         url: '/ui/report',
         templateUrl: 'templates/reports/parent_view.html'
     });
 
     $stateProvider.state('report.list', {
         url: '?start_date&min_duration&max_duration&{view_name:any}&{server_name:any}&resource',
         templateUrl: 'templates/reports/list.html',
         controller: 'ReportsListController as reports_list'
     });
 
     $stateProvider.state('report.list_slow', {
         url: '/list_slow?start_date&min_duration&max_duration&{view_name:any}&{server_name:any}&resource',
         templateUrl: 'templates/reports/list_slow.html',
         controller: 'ReportsListSlowController as reports_list'
     });
 
     $stateProvider.state('report.view_detail', {
         url: '/:groupId/:reportId',
         templateUrl: 'templates/reports/view.html',
         controller: 'ReportsViewController as report'
     });
     $stateProvider.state('report.view_group', {
         url: '/:groupId',
         templateUrl: 'templates/reports/view.html',
         controller: 'ReportsViewController as report'
     });
     $stateProvider.state('events', {
         url: '/ui/events',
-        templateUrl: 'templates/events.html',
-        controller: 'EventsController as events'
+        component: 'eventBrowserView'
     });
     $stateProvider.state('admin', {
         url: '/ui/admin',
         templateUrl: 'templates/admin/parent_view.html'
     });
     $stateProvider.state('admin.user', {
         abstract: true,
         url: '/user',
         templateUrl: 'templates/admin/users/parent_view.html'
     });
     $stateProvider.state('admin.user.list', {
         url: '/list',
         templateUrl: 'templates/admin/users/users_list.html',
         controller: 'AdminUsersController as users'
     });
     $stateProvider.state('admin.user.create', {
         url: '/create',
         templateUrl: 'templates/admin/users/users_create.html',
         controller: 'AdminUsersCreateController as user'
     });
     $stateProvider.state('admin.user.update', {
         url: '/{userId}/update',
         templateUrl: 'templates/admin/users/users_create.html',
         controller: 'AdminUsersCreateController as user'
     });
 
 
     $stateProvider.state('admin.group', {
         abstract: true,
         url: '/group',
         templateUrl: 'templates/admin/groups/parent_view.html'
     });
     $stateProvider.state('admin.group.list', {
         url: '/list',
         templateUrl: 'templates/admin/groups/groups_list.html',
         controller: 'AdminGroupsController as groups'
     });
     $stateProvider.state('admin.group.create', {
         url: '/create',
         templateUrl: 'templates/admin/groups/groups_create.html',
         controller: 'AdminGroupsCreateController as group'
     });
     $stateProvider.state('admin.group.update', {
         url: '/{groupId}/update',
         templateUrl: 'templates/admin/groups/groups_create.html',
         controller: 'AdminGroupsCreateController as group'
     });
 
     $stateProvider.state('admin.application', {
         abstract: true,
         url: '/application',
         templateUrl: 'templates/admin/users/parent_view.html'
     });
 
     $stateProvider.state('admin.application.list', {
         url: '/list',
         templateUrl: 'templates/admin/applications/applications_list.html',
         controller: 'AdminApplicationsListController as applications'
     });
 
     $stateProvider.state('admin.partitions', {
         url: '/partitions',
         templateUrl: 'templates/admin/partitions.html',
         controller: 'AdminPartitionsController as partitions'
     });
     $stateProvider.state('admin.system', {
         url: '/system',
         templateUrl: 'templates/admin/system.html',
         controller: 'AdminSystemController as system'
     });
 
     $stateProvider.state('admin.configs', {
         abstract: true,
         url: '/configs',
         templateUrl: 'templates/admin/configs/parent_view.html'
     });
 
     $stateProvider.state('admin.configs.list', {
         url: '',
         templateUrl: 'templates/admin/configs/edit.html',
         controller: 'ConfigsListController as configs'
     });
 
     $stateProvider.state('user', {
         url: '/ui/user',
         templateUrl: 'templates/user/parent_view.html'
     });
 
     $stateProvider.state('user.profile', {
         abstract: true,
         url: '/profile',
         templateUrl: 'templates/user/profile.html'
     });
     $stateProvider.state('user.profile.edit', {
         url: '',
         templateUrl: 'templates/user/profile_edit.html',
         controller: 'UserProfileController as profile'
     });
 
 
     $stateProvider.state('user.profile.password', {
         url: '/password',
         templateUrl: 'templates/user/profile_password.html',
         controller: 'UserPasswordController as password'
     });
 
     $stateProvider.state('user.profile.identities', {
         url: '/identities',
         templateUrl: 'templates/user/profile_identities.html',
         controller: 'UserIdentitiesController as identities'
     });
 
     $stateProvider.state('user.profile.auth_tokens', {
         url: '/auth_tokens',
         templateUrl: 'templates/user/auth_tokens.html',
         controller: 'UserAuthTokensController as auth_tokens'
     });
 
     $stateProvider.state('user.alert_channels', {
         abstract: true,
         url: '/alert_channels',
         templateUrl: 'templates/user/alert_channels.html'
     });
 
     $stateProvider.state('user.alert_channels.list', {
         url: '',
         templateUrl: 'templates/user/alert_channels_list.html',
         controller: 'AlertChannelsController as channels'
     });
 
     $stateProvider.state('user.alert_channels.email', {
         url: '/email',
         templateUrl: 'templates/user/alert_channels_email.html',
         controller: 'AlertChannelsEmailController as email'
     });
 
     $stateProvider.state('applications', {
         abstract: true,
         url: '/ui/applications',
         templateUrl: 'templates/applications/parent_view.html'
     });
 
     $stateProvider.state('applications.list', {
         url: '',
         templateUrl: 'templates/applications/list.html',
         controller: 'ApplicationsListController as applications'
     });
     $stateProvider.state('applications.update', {
         url: '/{resourceId}/update',
         templateUrl: 'templates/applications/applications_update.html',
         controller: 'ApplicationsUpdateController as application'
     });
 
     $stateProvider.state('applications.integrations', {
         url: '/{resourceId}/integrations',
         templateUrl: 'templates/applications/integrations.html',
         controller: 'IntegrationsListController as integrations',
         data: {
             resource: null
         }
     });
 
     $stateProvider.state('applications.purge_logs', {
         url: '/purge_logs',
         templateUrl: 'templates/applications/applications_purge_logs.html',
         controller: 'ApplicationsPurgeLogsController as applications_purge'
     });
 
     $stateProvider.state('applications.integrations.edit', {
         url: '/{integration}',
         templateUrl: function ($stateParams) {
             return 'templates/applications/integrations/' + $stateParams.integration + '.html'
         },
         controller: 'IntegrationController as integration'
     });
 
     $stateProvider.state('tests', {
         url: '/ui/tests',
         templateUrl: 'templates/user/alert_channels_test.html',
         controller: 'AlertChannelsTestController as test_action'
     });
 
 }]);