components: whole settings panel componentized

frontend/src/app.js

@@ -52,6 +52,18 b" angular.module('appenlight.components', ["
     'appenlight.components.userAuthTokensView',
     'appenlight.components.userAlertChannelsListView',
     'appenlight.components.userAlertChannelsEmailNewView',
+    'appenlight.components.applicationsListView',
+    'appenlight.components.applicationsPurgeLogsView',
+    'appenlight.components.applicationsUpdateView',
+    'appenlight.components.integrationsListView',
+    'appenlight.components.bitbucketIntegrationConfigView',
+    'appenlight.components.campfireIntegrationConfigView',
+    'appenlight.components.flowdockIntegrationConfigView',
+    'appenlight.components.githubIntegrationConfigView',
+    'appenlight.components.hipchatIntegrationConfigView',
+    'appenlight.components.jiraIntegrationConfigView',
+    'appenlight.components.slackIntegrationConfigView',
+    'appenlight.components.webhooksIntegrationConfigView',
     'appenlight.components.settingsView'
 ]);
 angular.module('appenlight.directives', [

frontend/src/components/views/applications-integrations-view/applications-integrations-view.html

@@ -1,12 +1,12 b''
-<ng-include src="'templates/loader.html'" ng-if="integrations.loading.application && $state.is('applications.integrations')"></ng-include>
+<ng-include src="'templates/loader.html'" ng-if="$ctrl.loading.application && $state.is('applications.integrations')"></ng-include>
 
 <ui-view>
-    <div class="panel panel-default" ng-show="!integrations.loading.application">
-        <div class="panel-heading" ng-include="'templates/applications/breadcrumbs.html'"></div>
+    <div class="panel panel-default" ng-show="!$ctrl.loading.application">
+        <div class="panel-heading" ng-include="'templates/settings_breadcrumbs.html'"></div>
         <div class="panel-body">
 
             <a class="btn btn-default integration"
-               data-ui-sref="applications.integrations.edit({resourceId:integrations.resource.resource_id, integration:'bitbucket'})">
+               data-ui-sref="applications.integrations.edit({resourceId:$ctrl.resource.resource_id, integration:'bitbucket'})">
                 <span class="fa fa-fw fa-bitbucket fa-3x pull-left"></span>
                 <strong>Bitbucket</strong>
 
@@ -14,7 +14,7 b''
             </a>
 
             <a class="btn btn-default integration"
-               data-ui-sref="applications.integrations.edit({resourceId:integrations.resource.resource_id, integration:'campfire'})">
+               data-ui-sref="applications.integrations.edit({resourceId:$ctrl.resource.resource_id, integration:'campfire'})">
                 <span class="fa fa-fw fa-comment fa-3x pull-left"></span>
                 <strong>Campfire</strong>
 
@@ -22,7 +22,7 b''
             </a>
 
             <a class="btn btn-default integration"
-               data-ui-sref="applications.integrations.edit({resourceId:integrations.resource.resource_id, integration:'flowdock'})">
+               data-ui-sref="applications.integrations.edit({resourceId:$ctrl.resource.resource_id, integration:'flowdock'})">
                 <span class="fa fa-fw fa-envelope fa-3x pull-left"></span>
                 <strong>Flowdock</strong>
 
@@ -31,7 +31,7 b''
             </a>
 
             <a class="btn btn-default integration"
-               data-ui-sref="applications.integrations.edit({resourceId:integrations.resource.resource_id, integration:'github'})">
+               data-ui-sref="applications.integrations.edit({resourceId:$ctrl.resource.resource_id, integration:'github'})">
                 <span class="fa fa-fw fa-github fa-3x pull-left"></span>
                 <strong>Github</strong>
 
@@ -39,7 +39,7 b''
             </a>
 
             <a class="btn btn-default integration"
-               data-ui-sref="applications.integrations.edit({resourceId:integrations.resource.resource_id, integration:'hipchat'})">
+               data-ui-sref="applications.integrations.edit({resourceId:$ctrl.resource.resource_id, integration:'hipchat'})">
                 <span class="fa fa-fw fa-comment fa-3x pull-left"></span>
                 <strong>HipChat</strong>
 
@@ -47,7 +47,7 b''
             </a>
 
             <a class="btn btn-default integration"
-               data-ui-sref="applications.integrations.edit({resourceId:integrations.resource.resource_id, integration:'jira'})">
+               data-ui-sref="applications.integrations.edit({resourceId:$ctrl.resource.resource_id, integration:'jira'})">
                 <span class="fa fa-fw fa-ticket fa-3x pull-left"></span>
                 <strong>Jira</strong>
 
@@ -55,7 +55,7 b''
             </a>
 
             <a class="btn btn-default integration"
-               data-ui-sref="applications.integrations.edit({resourceId:integrations.resource.resource_id, integration:'slack'})">
+               data-ui-sref="applications.integrations.edit({resourceId:$ctrl.resource.resource_id, integration:'slack'})">
                 <span class="fa fa-fw fa-comment fa-3x pull-left"></span>
                 <strong>Slack</strong>
 
@@ -63,7 +63,7 b''
             </a>
 
             <a class="btn btn-default integration"
-               data-ui-sref="applications.integrations.edit({resourceId:integrations.resource.resource_id, integration:'webhooks'})">
+               data-ui-sref="applications.integrations.edit({resourceId:$ctrl.resource.resource_id, integration:'webhooks'})">
                 <span class="fa fa-fw fa-cloud-upload fa-3x pull-left"></span>
                 <strong>Webhooks</strong>
 

frontend/src/components/views/applications-integrations-view/applications-integrations-view.js

@@ -17,12 +17,15 b''
 // # services, and proprietary license terms, please see
 // # https://rhodecode.com/licenses/
 
-angular.module('appenlight.controllers')
-    .controller('IntegrationsListController', IntegrationsListController)
+angular.module('appenlight.components.integrationsListView', [])
+    .component('integrationsListView', {
+        templateUrl: 'components/views/applications-integrations-view/applications-integrations-view.html',
+        controller: IntegrationsListViewController
+    });
 
-IntegrationsListController.$inject = ['$state', 'applicationsResource'];
+IntegrationsListViewController.$inject = ['$state', 'applicationsResource'];
 
-function IntegrationsListController($state, applicationsResource) {
+function IntegrationsListViewController($state, applicationsResource) {
     console.debug('IntegrationsListController');
     var vm = this;
     vm.loading = {application: true};

frontend/src/components/views/applications-list-view/applications-list-view.html

@@ -1,14 +1,14 b''
-<ng-include src="'templates/loader.html'" ng-if="applications.loading.applications"></ng-include>
+<ng-include src="'templates/loader.html'" ng-if="$ctrl.loading.applications"></ng-include>
 
-<div class="panel panel-default" ng-show="!applications.loading.applications">
-    <div class="panel-heading" ng-include="'templates/applications/breadcrumbs.html'"></div>
-    <div class="panel-body" ng-if="applications.applications.length === 0 ">
+<div class="panel panel-default" ng-show="!$ctrl.loading.applications">
+    <div class="panel-heading" ng-include="'templates/settings_breadcrumbs.html'"></div>
+    <div class="panel-body" ng-if="$ctrl.applications.length === 0 ">
 
         <p>You have to create a new application first.</p>
 
     </div>
 
-    <table class="table table-striped" ng-if="applications.applications.length > 0">
+    <table class="table table-striped" ng-if="$ctrl.applications.length > 0">
         <thead>
         <tr>
             <th class="resource_name">Resource Name</th>
@@ -17,7 +17,7 b''
         </tr>
         </thead>
         <tbody>
-        <tr class="r{{$index+1}}" ng-repeat="application in applications.applications">
+        <tr class="r{{$index+1}}" ng-repeat="application in $ctrl.applications">
             <td>{{application.resource_name}}</td>
             <td>{{application.domains}}</td>
             <td class="options">

frontend/src/components/views/applications-list-view/applications-list-view.js

@@ -17,14 +17,18 b''
 // # services, and proprietary license terms, please see
 // # https://rhodecode.com/licenses/
 
-angular.module('appenlight.controllers')
-    .controller('ApplicationsListController', ApplicationsListController)
+angular.module('appenlight.components.applicationsListView', [])
+    .component('applicationsListView', {
+        templateUrl: 'components/views/applications-list-view/applications-list-view.html',
+        controller: ApplicationsListViewController
+    });
 
-ApplicationsListController.$inject = ['applicationsResource'];
+ApplicationsListViewController.$inject = ['$state', 'applicationsResource'];
 
-function ApplicationsListController(applicationsResource) {
+function ApplicationsListViewController($state, applicationsResource) {
     console.debug('ApplicationsListController');
     var vm = this;
+    vm.$state = $state;
     vm.loading = {applications: true};
     vm.applications = applicationsResource.query(null, function(){
         vm.loading.applications = false;

frontend/src/components/views/applications-purge-logs-view/applications-purge-logs-view.html

@@ -1,17 +1,17 b''
-<ng-include src="'templates/loader.html'" ng-if="applications_purge.loading.applications"></ng-include>
+<ng-include src="'templates/loader.html'" ng-if="$ctrl.loading.applications"></ng-include>
 
-<div ng-show="!applications_purge.loading.applications">
+<div ng-show="!$ctrl.loading.applications">
     <div class="panel panel-default">
-        <div class="panel-heading" ng-include="'templates/applications/breadcrumbs.html'"></div>
+        <div class="panel-heading" ng-include="'templates/settings_breadcrumbs.html'"></div>
         <div class="panel-body">
 
-            <form method="post" class="form-horizontal" name="applications_purge.form" ng-submit="applications_purge.purgeLogs()">
+            <form method="post" class="form-horizontal" name="$ctrl.form" ng-submit="$ctrl.purgeLogs()">
                 <div class="form-group">
                     <label class="control-label col-sm-3 col-lg-2">Application:</label>
 
                     <div class="col-sm-9 col-lg-10 form-inline">
-                        <select ng-model="applications_purge.selectedResource" ng-change="applications_purge.getCommonKeys()"
-                                ng-options="r.resource_id as r.resource_name for r in applications_purge.applications" class="form-control"></select>
+                        <select ng-model="$ctrl.selectedResource" ng-change="$ctrl.getCommonKeys()"
+                                ng-options="r.resource_id as r.resource_name for r in $ctrl.applications" class="form-control"></select>
                     </div>
                 </div>
 
@@ -19,8 +19,8 b''
                     <label class="control-label col-sm-3 col-lg-2">Namespace:</label>
 
                     <div class="col-sm-9 col-lg-10">
-                        <input type="text" name="namespace" ng-model="applications_purge.namespace"
-                               placeholder="Namespace to filter on" uib-typeahead="ns for ns in applications_purge.commonNamespaces"
+                        <input type="text" name="namespace" ng-model="$ctrl.namespace"
+                               placeholder="Namespace to filter on" uib-typeahead="ns for ns in $ctrl.commonNamespaces"
                                class="form-control">
                     </div>
                 </div>

frontend/src/components/views/applications-purge-logs-view/applications-purge-logs-view.js

@@ -17,14 +17,18 b''
 // # services, and proprietary license terms, please see
 // # https://rhodecode.com/licenses/
 
-angular.module('appenlight.controllers')
-    .controller('ApplicationsPurgeLogsController', ApplicationsPurgeLogsController)
+angular.module('appenlight.components.applicationsPurgeLogsView', [])
+    .component('applicationsPurgeLogsView', {
+        templateUrl: 'components/views/applications-purge-logs-view/applications-purge-logs-view.html',
+        controller: applicationsPurgeLogsViewController
+    });
 
-ApplicationsPurgeLogsController.$inject = ['applicationsResource', 'sectionViewResource', 'logsNoIdResource'];
+applicationsPurgeLogsViewController.$inject = ['$state' ,'applicationsResource', 'sectionViewResource', 'logsNoIdResource'];
 
-function ApplicationsPurgeLogsController(applicationsResource, sectionViewResource, logsNoIdResource) {
-    console.debug('ApplicationsPurgeLogsController');
+function applicationsPurgeLogsViewController($state, applicationsResource, sectionViewResource, logsNoIdResource) {
+    console.debug('applicationsPurgeLogsViewController');
     var vm = this;
+    vm.$state = $state;
     vm.loading = {applications: true};
 
     vm.namespace = null;