Add basic component functionality

awx/ui/.eslintignore

@@ -11,3 +11,5 @@ templates
 tests
 client/**/*.js
 
+!client/components/**/*.js
+

awx/ui/.eslintrc.js

@@ -15,8 +15,9 @@ module.exports = {
         jsyaml: true
     },
     rules: {
-        indent: ['error', 4],
+        indent: [0, 4],
-        'comma-dangle': 'off',
+        'comma-dangle': 0,
-        'prefer-const': ['off']
+        'prefer-const': 0,
+        'space-before-function-paren': [2, 'always']
     }
 };

awx/ui/client/components/_index.less

@@ -0,0 +1 @@
+@import '_panel';

awx/ui/client/components/_panel.less

@@ -0,0 +1,9 @@
+.at-Panel {
+    margin: @at-margin-md 0;
+}
+
+// TODO (remove override on cleanup):
+.at-Panel-heading:hover {
+    cursor: default;
+}
+// TODO-end

awx/ui/client/components/index.js

@@ -0,0 +1,8 @@
+import panel from './panel.directive';
+import panelHeading from './panel-heading.directive';
+
+angular
+    .module('at.components', [])
+    .directive('atPanel', panel)
+    .directive('atPanelHeading', panelHeading);
+

awx/ui/client/components/panel-heading.directive.js

@@ -0,0 +1,12 @@
+function atPanelHeading () {
+    return {
+        restrict: 'E',
+        transclude: true,
+        templateUrl: 'static/partials/components/panel-heading.partial.html',
+        scope: {
+            heading: '=config'
+        }
+    };
+}
+
+export default atPanelHeading;

awx/ui/client/components/panel-heading.partial.html

@@ -0,0 +1,13 @@
+<div class="panel-heading at-Panel-heading">
+  <div ng-if="heading" class="at-Title-row">
+    <div ng-if="heading.title" class="at-Title-text">
+      {{ heading.title }}
+    </div>
+    <div ng-if="heading.titleBadge" class="at-Title-badge">
+      {{ heading.titleBadge }}
+    </div>
+  </div>
+  
+  <ng-if="!heading" ng-transclude></ng-transclude>
+</div>
+

awx/ui/client/components/panel.directive.js

@@ -0,0 +1,9 @@
+function atPanel () {
+    return {
+        restrict: 'E',
+        transclude: true,
+        templateUrl: 'static/partials/components/panel.partial.html'
+    };
+}
+
+export default atPanel;

awx/ui/client/components/panel.partial.html

@@ -0,0 +1,3 @@
+<div class="panel panel-default at-Panel">
+  <ng-transclude></ng-transclude>
+</div>

awx/ui/client/src/app.js

@@ -60,7 +60,6 @@ import login from './login/main';
 import activityStream from './activity-stream/main';
 import standardOut from './standard-out/main';
 import Templates from './templates/main';
-import credentials from './credentials/main';
 import jobs from './jobs/main';
 import teams from './teams/main';
 import users from './users/main';
@@ -72,6 +71,9 @@ import footer from './footer/main';
 import scheduler from './scheduler/main';
 import instanceGroups from './instance-groups/main';
 
+import '../components';
+import './credentials';
+
 var tower = angular.module('Tower', [
     // how to add CommonJS / AMD  third-party dependencies:
     // 1. npm install --save package-name
@@ -118,7 +120,6 @@ var tower = angular.module('Tower', [
     standardOut.name,
     Templates.name,
     portalMode.name,
-    credentials.name,
     jobs.name,
     teams.name,
     users.name,
@@ -131,6 +132,8 @@ var tower = angular.module('Tower', [
     'PromptDialog',
     'AWDirectives',
     'features',
+    'at.components',
+    'at.feature.credentials'
 ])
 
     .constant('AngularScheduler.partials', urlPrefix + 'lib/angular-scheduler/lib/')

awx/ui/client/src/credentials/index.controller.js

@@ -0,0 +1,12 @@
+function IndexController () {
+  let vm = this;
+
+  vm.panel = {
+    title: 'Credentials',
+    titleBadge: 5
+  };
+}
+
+// IndexController.$inject = [];
+
+export default IndexController;

awx/ui/client/src/credentials/index.js

@@ -0,0 +1,17 @@
+import IndexController from './index.controller';
+
+function routes ($stateProvider) {
+    $stateProvider.state({
+        name: 'credentials',
+        url: '/credentials',
+        templateUrl: '/static/views/credentials/index.view.html',
+        controller: IndexController,
+        controllerAs: 'vm'
+    });
+}
+
+routes.$inject = [
+  '$stateProvider'
+];
+
+angular.module('at.feature.credentials', []).config(routes);

awx/ui/client/src/credentials/index.view.html

@@ -0,0 +1,6 @@
+<at-panel>
+  <at-panel-heading config="vm.panel">
+  </at-panel-heading>
+  <at-panel-body>
+  </at-panel-body>
+</at-panel>

awx/ui/client/src/credentials/main.js

@@ -1,61 +0,0 @@
-/*************************************************
- * Copyright (c) 2016 Ansible, Inc.
- *
- * All Rights Reserved
- *************************************************/
-
-import ownerList from './ownerList.directive';
-import CredentialsList from './list/credentials-list.controller';
-import CredentialsAdd from './add/credentials-add.controller';
-import CredentialsEdit from './edit/credentials-edit.controller';
-import BecomeMethodChange from './factories/become-method-change.factory';
-import CredentialFormSave from './factories/credential-form-save.factory';
-import KindChange from './factories/kind-change.factory';
-import OwnerChange from './factories/owner-change.factory';
-import CredentialList from './credentials.list';
-import CredentialForm from './credentials.form';
-import { N_ } from '../i18n';
-
-export default
-    angular.module('credentials', [])
-        .directive('ownerList', ownerList)
-        .factory('BecomeMethodChange', BecomeMethodChange)
-        .factory('CredentialFormSave', CredentialFormSave)
-        .factory('KindChange', KindChange)
-        .factory('OwnerChange', OwnerChange)
-        .controller('CredentialsList', CredentialsList)
-        .controller('CredentialsAdd', CredentialsAdd)
-        .controller('CredentialsEdit', CredentialsEdit)
-        .factory('CredentialList', CredentialList)
-        .factory('CredentialForm', CredentialForm)
-        .config(['$stateProvider', 'stateDefinitionsProvider',
-            function($stateProvider, stateDefinitionsProvider) {
-                let stateDefinitions = stateDefinitionsProvider.$get();
-
-                // lazily generate a tree of substates which will replace this node in ui-router's stateRegistry
-                // see: stateDefinition.factory for usage documentation
-                $stateProvider.state({
-                    name: 'credentials',
-                    url: '/credentials',
-                    lazyLoad: () => stateDefinitions.generateTree({
-                        parent: 'credentials',
-                        modes: ['add', 'edit'],
-                        list: 'CredentialList',
-                        form: 'CredentialForm',
-                        controllers: {
-                            list: CredentialsList,
-                            add: CredentialsAdd,
-                            edit: CredentialsEdit
-                        },
-                        data: {
-                            activityStream: true,
-                            activityStreamTarget: 'credential'
-                        },
-                        ncyBreadcrumb: {
-                            parent: 'setup',
-                            label: N_('CREDENTIALS')
-                        }
-                    })
-                });
-            }
-        ]);

awx/ui/client/theme/_common.less

@@ -0,0 +1,22 @@
+.at-Title-row {
+    align-items: center;
+    flex: 1 0 auto;
+    display: flex; 
+}
+
+.at-Title-text {
+    color: @at-gray-dark;
+    font-size: @at-font-md;
+    font-weight: bold;
+    margin-right: @at-margin-sm;
+    text-transform: uppercase;
+}
+
+.at-Title-badge {
+    font-size: @at-font-sm;
+    padding: 0 @at-padding-sm;
+    margin: 0;
+    background-color: @at-gray;
+    color: @at-white;
+    border-radius: @at-border-radius-md;
+}

awx/ui/client/theme/_variables.less

@@ -0,0 +1,16 @@
+@at-white: #ffffff;
+@at-gray: #848992;
+@at-gray-dark: #707070;
+
+@at-font-sm: 12px;
+@at-font-md: 14px;
+
+@at-padding-sm: 10px;
+@at-padding-md: 20px;
+
+@at-margin-sm: 10px;
+@at-margin-md: 20px;
+
+@at-border-radius-md: 5px;
+
+

awx/ui/client/theme/index.less

@@ -0,0 +1,4 @@
+@import '_variables';
+@import '_common';
+
+@import '../components/_index';

awx/ui/grunt-tasks/browserSync.js

@@ -18,6 +18,7 @@ module.exports = {
             },
             keepalive: false,
             watchTask: true,
+            reloadDebounce: 1000,
             // The browser-sync-client lib will write your current scroll position to window.name
             // https://github.com/BrowserSync/browser-sync-client/blob/a2718faa91e11553feca7a3962313bf1ec6ba3e5/dist/index.js#L500
             // This strategy is enabled in the core browser-sync lib, and not externally documented as an option. Yay!

awx/ui/grunt-tasks/concurrent.js

@@ -1,16 +1,16 @@
 module.exports = {
     dev: {
-        tasks: ['copy:vendor', 'copy:assets', 'copy:partials', 'copy:languages', 'copy:config', 'less:dev'],
+        tasks: ['copy:vendor', 'copy:assets', 'copy:partials', 'copy:views', 'copy:languages', 'copy:config', 'less:dev'],
     },
     // This concurrent target is intended for development ui builds that do not require raising browser-sync or filesystem polling
     devNoSync: {
-        tasks: ['copy:vendor', 'copy:assets', 'copy:partials', 'copy:languages', 'copy:config', 'less:dev', 'webpack:dev'],
+        tasks: ['copy:vendor', 'copy:assets', 'copy:partials', 'copy:views', 'copy:languages', 'copy:config', 'less:dev', 'webpack:dev'],
     },
     prod: {
-    	tasks: ['newer:copy:vendor', 'newer:copy:assets', 'newer:copy:partials', 'newer:copy:languages', 'newer:copy:config', 'newer:less:prod']
+    	tasks: ['newer:copy:vendor', 'newer:copy:assets', 'newer:copy:partials', 'newer:copy:views', 'newer:copy:languages', 'newer:copy:config', 'newer:less:prod']
     },
     watch: {
-        tasks: ['watch:css', 'watch:partials', 'watch:assets', ['webpack:dev', 'watch:config']],
+        tasks: ['watch:css', 'watch:partials', 'watch:views', 'watch:assets', ['webpack:dev', 'watch:config']],
         options: {
             logConcurrentOutput: true
         }

awx/ui/grunt-tasks/copy.js

@@ -30,6 +30,14 @@ module.exports = {
             dest: 'static/lib/'
         }]
     },
+    views: {
+        files: [{
+            cwd: 'client/src',
+            expand: true,
+            src: ['**/*.view.html'],
+            dest: 'static/views/'
+        }]
+    },
     partials: {
         files: [{
             cwd: 'client/src',
@@ -41,6 +49,11 @@ module.exports = {
             expand: true,
             src: ['*.html'],
             dest: 'static/partials/'
+        }, {
+            cwd: 'client/components',
+            expand: true,
+            src: ['*.partial.html'],
+            dest: 'static/partials/components/'
         }]
     },
     languages: {

awx/ui/grunt-tasks/less.js

@@ -10,18 +10,19 @@ module.exports = {
             src: [
                 'client/legacy-styles/*.less',
                 'client/src/**/*.less',
+                'client/theme/index.less'
             ]
         }],
         options: {
             sourceMap: true
         }
     },
-
     prod: {
         files: {
             'static/tower.min.css': [
                 'client/legacy-styles/*.less',
                 'client/src/**/*.less',
+                'client/theme/index.less'
             ]
         },
         options: {

awx/ui/grunt-tasks/watch.js

@@ -1,12 +1,19 @@
 module.exports = {
     css: {
         files: 'client/**/*.less',
-        tasks: ['newer:less:dev']
+        tasks: ['less:dev']
     },
     partials: {
-        files: 'client/src/**/*.html',
+        files: [
+            'client/components/*.partial.html',
+            'client/src/**/*.partial.html'
+        ],
         tasks: ['newer:copy:partials']
     },
+    views: {
+        files: 'client/src/**/*.view.html',
+        tasks: ['newer:copy:views']
+    },
     assets: {
         files: 'client/assets',
         tasks: ['newer:copy:assets']