restyle & modularize Portal Mode, resolves #940 & #939

freeze codebase before separating PortalJobs & PortalJobTemplates into separate views

awx/ui/client/src/app.js

@@ -24,7 +24,7 @@ import {Home, HomeGroups, HomeHosts} from './controllers/Home';
 import {SocketsController} from './controllers/Sockets';
 import {CredentialsAdd, CredentialsEdit, CredentialsList} from './controllers/Credentials';
 import {JobsListController} from './controllers/Jobs';
-import {PortalController} from './controllers/Portal';
+import portalMode from './portal-mode/main';
 import systemTracking from './system-tracking/main';
 import inventories from './inventories/main';
 import inventoryScripts from './inventory-scripts/main';
@@ -109,6 +109,7 @@ var tower = angular.module('Tower', [
     standardOut.name,
     access.name,
     JobTemplates.name,
+    portalMode.name,
     'templates',
     'Utilities',
     'OrganizationFormDefinition',
@@ -291,20 +292,6 @@ var tower = angular.module('Tower', [
                 }
             }).
 
-            state('portal', {
-                url: '/portal',
-                templateUrl: urlPrefix + 'partials/portal.html',
-                controller: PortalController,
-                ncyBreadcrumb: {
-                    label: "PORTAL"
-                },
-                resolve: {
-                    features: ['FeaturesService', function(FeaturesService) {
-                        return FeaturesService.get();
-                    }]
-                }
-            }).
-
             state('projects', {
                 url: '/projects',
                 templateUrl: urlPrefix + 'partials/projects.html',
@@ -828,7 +815,7 @@ var tower = angular.module('Tower', [
                                 $rootScope.$emit('JobStatusChange-jobDetails', data);
                             } else if ($state.is('dashboard')) {
                                 $rootScope.$emit('JobStatusChange-home', data);
-                            } else if ($state.is('portal')) {
+                            } else if ($state.is('portalMode')) {
                                 $rootScope.$emit('JobStatusChange-portal', data);
                             } else if ($state.is('projects')) {
                                 $rootScope.$emit('JobStatusChange-projects', data);

awx/ui/client/src/helpers/Jobs.js

@@ -381,8 +381,7 @@ export default
                 mode: 'edit',
                 id: id,
                 scope: scope,
-                showSearch: false,
+                showSearch: false
-                title: false
             });
 
             SearchInit({

awx/ui/client/src/lists/PortalJobTemplates.js

@@ -13,6 +13,7 @@ export default
         iterator: 'job_template',
         // selectTitle: 'Add Job Template',
         editTitle: 'Job Templates',
+        listTitle: 'Job Templates',
         // selectInstructions: "Click on a row to select it, and click Finished when done. Use the <i class=\"icon-plus\"></i> " +
         //     "button to create a new job template.",
         index: false,
@@ -22,9 +23,9 @@ export default
         fields: {
             name: {
                 key: true,
-                noLink: true,
                 label: 'Name',
-                columnClass: 'col-lg-5 col-md-5 col-sm-9 col-xs-8'
+                columnClass: 'col-lg-5 col-md-5 col-sm-9 col-xs-8',
+                linkTo: '/#/job_templates/{{job_template.id}}'
             },
             description: {
                 label: 'Description',

awx/ui/client/src/lists/PortalJobs.js

@@ -16,6 +16,7 @@ export default
         index: false,
         hover: true,
         well: true,
+        listTitle: 'Jobs',
 
         fields: {
             status: {
@@ -34,39 +35,31 @@ export default
                     { name: "Canceled", value: "canceled" }
                 ]
             },
+            /*
             id: {
                 label: 'ID',
                 key: true,
                 noLink: true, //undocumented: 'key' above will automatically made the fields a link, but 'noLink' will override this setting
                 desc: true,
                 searchType: 'int',
-                columnClass: 'col-lg-1 col-md-1 col-sm-2 col-xs-2 List-staticColumnAdjacent',
+                columnClass: 'col-xs-2 List-staticColumnAdjacent',
             },
+            */
             name: {
                 label: 'Name',
                 columnClass: 'col-lg-4 col-md-4 col-sm-4 col-xs-6',
-                defaultSearchField: true
+                defaultSearchField: true,
+                linkTo: '/#/jobs/{{portal_job.id}}'
             },
             started: {
                 label: 'Started',
                 noLink: true,
                 searchable: false,
                 filter: "longDate",
-                columnClass: "col-lg-4 col-md-4 col-sm-3 xs-hidden"
+                nosort: true,
+                columnClass: "col-lg-4 col-md-4 col-sm-3 hidden-xs"
             }
         },
 
-        actions: { },
+        actions: { }
-
-        fieldActions: {
-
-            columnClass: 'col-lg-3 col-md-4 col-sm-3 col-xs-4',
-
-            job_details: {
-                mode: 'all',
-                ngClick: "viewJobDetails(portal_job)",
-                awToolTip: 'View job details',
-                dataPlacement: 'top'
-            }
-        }
     });

awx/ui/client/src/main-menu/main-menu.partial.html

@@ -58,6 +58,14 @@
                 SETTINGS
             </span>
         </a>
+        <a class="MainMenu-item"
+            id="main_menu_setup_mobile_link"
+            ui-sref="portalMode"
+            ng-class="{'is-currentRoute' : isCurrentRoute('portalMode')}">
+            <span class="MainMenu-itemText">
+                PORTAL MODE
+            </span>
+        </a>
         <a class="MainMenu-item"
             id="main_menu_docs_mobile_link"
             ng-href="http://docs.ansible.com/ansible-tower/"
@@ -127,7 +135,7 @@
     </a>
     <a class="MainMenu-item MainMenu-item--notMobile MainMenu-item--right"
         id="main_menu_setup_link"
-        ng-href="/#/setup"
+        ui-href="/#/setup"
         ng-class="{'is-currentRoute' : isCurrentRoute('setup'), 'is-loggedOut' : !$root.current_user.username}"
         aw-tool-tip="Settings"
         data-placement="bottom"
@@ -137,6 +145,18 @@
             alt="Settings">
         </i>
     </a>
+    <a class="MainMenu-item MainMenu-item--notMobile MainMenu-item--right"
+        id="main_menu_portal_link"
+        ng-href="/#/portal"
+        ng-class="{'is-currentRoute' : isCurrentRoute('portalMode'), 'is-loggedOut' : !$root.current_user.username}"
+        aw-tool-tip="Portal Mode"
+        data-placement="bottom"
+        data-trigger="hover"
+        data-container="body">
+        <i class="MainMenu-itemImage MainMenu-itemImage--settings fa fa-columns"
+            alt="Portal Mode">
+        </i>
+    </a>
     <a class="MainMenu-item MainMenu-item--notMobile MainMenu-item--right"
         id="main_menu_docs_link"
         ng-href="http://docs.ansible.com/ansible-tower/"

awx/ui/client/src/portal-mode/main.js

@@ -0,0 +1,15 @@
+/*************************************************
+ * Copyright (c) 2016 Ansible, Inc.
+ *
+ * All Rights Reserved
+ *************************************************/
+
+import route from './portal-mode.route';
+import {PortalModeController} from './portal-mode.controller';
+
+ export default
+ 	angular.module('portalMode', [])
+ 		.controller('PortalModeController', PortalModeController)
+ 		.run(['$stateExtender', function($stateExtender){
+ 			$stateExtender.addState(route);
+ 		}]);

awx/ui/client/src/portal-mode/portal-mode.block.less

@@ -0,0 +1,19 @@
+@import "awx/ui/client/src/shared/layouts/one-plus-one.less";
+
+.PortalMode-container{
+	.OnePlusOne-container;
+}
+
+.PortalMode-panel--left{
+	.OnePlusOne-panel--left;
+}
+.PortalMode-panel--right{
+	.OnePlusOne-panel--right;
+}
+.PortalMode-panelHeader{
+	.OnePlusOne-panelHeader;
+}
+
+@media(max-width: 767px){
+	table {word-wrap: normal !important};
+}

awx/ui/client/src/portal-mode/portal-mode.controller.js

@@ -19,12 +19,13 @@
  *
  *
 */
-export function PortalController($scope, $compile, $stateParams, $rootScope, $location, $log, Wait, ClearScope, Rest, GetBasePath, ProcessErrors,
+export function PortalModeController($scope, $compile, $stateParams, $rootScope, $location, $log, Wait, ClearScope, Rest, GetBasePath, ProcessErrors,
     PortalJobsWidget, GenerateList, PortalJobTemplateList, SearchInit, PaginateInit, PlaybookRun){
 
         ClearScope('portal');
 
         var jobs_scope,
+        pageSize = 12,
         list = PortalJobTemplateList,
         view= GenerateList,
         defaultUrl = GetBasePath('job_templates'),
@@ -43,6 +44,7 @@ export function PortalController($scope, $compile, $stateParams, $rootScope, $lo
             });
 
             $scope.job_templatePageSize = $scope.getMaxRows();
+            console.log($scope.job_templatePageSize);
 
             SearchInit({
                 scope: $scope,
@@ -54,7 +56,7 @@ export function PortalController($scope, $compile, $stateParams, $rootScope, $lo
                 scope: $scope,
                 list: list,
                 url: defaultUrl,
-                pageSize: $scope.job_templatePageSize
+                pageSize: pageSize
             });
 
             $scope.search(list.iterator);
@@ -137,6 +139,6 @@ export function PortalController($scope, $compile, $stateParams, $rootScope, $lo
 
     }
 
-PortalController.$inject = ['$scope', '$compile', '$stateParams', '$rootScope', '$location', '$log','Wait', 'ClearScope', 'Rest', 'GetBasePath', 'ProcessErrors',
+PortalModeController.$inject = ['$scope', '$compile', '$stateParams', '$rootScope', '$location', '$log','Wait', 'ClearScope', 'Rest', 'GetBasePath', 'ProcessErrors',
     'PortalJobsWidget', 'generateList' , 'PortalJobTemplateList', 'SearchInit', 'PaginateInit', 'PlaybookRun'
 ];

awx/ui/client/src/portal-mode/portal-mode.partial.html

@@ -1,4 +1,4 @@
-<div class="tab-pane" >
+<div class="tab-pane PortalMode" >
         <div ng-cloak id="portal-landing">
                 <div id="refresh-row" class="row">
                         <div class="col-lg-12">
@@ -14,17 +14,15 @@
                                 </div>
                         </div>
                 </div>
-                <div class="row">
+                <div class="PortalMode-container">
-                        <div class="left-side col-sm-6 col-xs-12">
+                        <div class="PortalMode-panel--left">
-                                <div id="portal-container-job-templates" class="portal-container">
+                                <div id="portal-container-job-templates" class="Panel">
-                                        <span class="portal-header">Job Templates</span>
                                         <div id="portal-job-templates" >
                                         </div>
                                 </div>
                         </div>
-                        <div class="right-side col-sm-6 col-xs-12">
+                        <div class="PortalMode-panel--right">
-                                <div id="portal-container-jobs" class="portal-container">
+                                <div id="portal-container-jobs" class="Panel">
-                                        <span class="portal-header">Jobs</span>
                                         <div id="portal-jobs" >
                                         </div>
                                 </div>

awx/ui/client/src/portal-mode/portal-mode.route.js

@@ -0,0 +1,16 @@
+import {templateUrl} from '../shared/template-url/template-url.factory';
+
+export default {
+	name: 'portalMode',
+    url: '/portal',
+    templateUrl: templateUrl('portal-mode/portal-mode'),
+    controller: 'PortalModeController',
+    ncyBreadcrumb: {
+        label: "PORTAL MODE"
+    },
+    resolve: {
+        features: ['FeaturesService', function(FeaturesService) {
+            return FeaturesService.get();
+        }]
+    }
+}

awx/ui/client/src/shared/layouts/one-plus-one.less

@@ -0,0 +1,53 @@
+/*
+* Large resolution 1/2 + 1/2 width panels
+* Small resolution: 100% width panels, stacked
+* Options: static height, custom breakpoint
+*/
+
+@import "awx/ui/client/src/shared/branding/colors.default.less";
+
+
+.OnePlusOne-container(@height: 100%; @breakpoint: 900px){
+	height: @height;
+	display: flex;
+	flex-diration: row;
+	@media screen and(max-width: @breakpoint){
+		flex-direction: column;
+	}
+}
+
+.OnePlusOne-panel--left(@height: 100%; @breakpoint: 900px){
+	flex: 1 1;
+	height: @height;
+	width: 100%;
+	margin-right: 20px;
+	.Panel{
+		height: 100%;
+	}
+	@media screen and (max-width @breakpoint){
+		margin-right: 0px;
+		height: inherit;
+	}
+}
+
+.OnePlusOne-panel--right(@height: 100%; @breakpoint: 900px){
+	flex: 1 1;
+	height: @height;
+	width: 100%;
+	margin-right: 0px;
+	.Panel{
+		height: 100%;
+	}
+	@media screen and (max-width @breakpoint){
+		height: inherit;
+	}
+}
+
+.OnePlusOne-panelHeader{
+    color: @default-interface-txt;
+    font-size: 14px;
+    font-weight: bold;
+    margin-right: 10px;
+    text-transform: uppercase;
+	display: flex;
+}

awx/ui/client/src/widgets/PortalJobs.js

@@ -24,6 +24,7 @@ angular.module('PortalJobsWidget', ['RestServices', 'Utilities'])
             choicesCount = 0,
             listCount = 0,
             jobs_scope = scope.$new(true),
+            pageSize = 12,
             max_rows,
             user,
             html, e,
@@ -56,7 +57,7 @@ angular.module('PortalJobsWidget', ['RestServices', 'Utilities'])
                 list: PortalJobsList,
                 id: 'active-jobs',
                 url: url , //GetBasePath('jobs')+'?created_by='+user,
-                pageSize: max_rows,
+                pageSize: pageSize,
                 spinner: true
             });
 
@@ -71,7 +72,7 @@ angular.module('PortalJobsWidget', ['RestServices', 'Utilities'])
         scope.removeChoicesReady = scope.$on('choicesReady', function() {
             choicesCount++;
             if (choicesCount === 2) {
-                setPortalJobsHeight();
+                //setPortalJobsHeight();
                 scope.$emit('buildJobsList');
             }
         });
@@ -136,6 +137,7 @@ angular.module('PortalJobsWidget', ['RestServices', 'Utilities'])
 
 
      // Set the height of each container and calc max number of rows containers can hold
+     /*
         function setPortalJobsHeight() {
             var docw = $(window).width(),
                 box_height, available_height, search_row, page_row, height, header, row_height;
@@ -191,9 +193,7 @@ angular.module('PortalJobsWidget', ['RestServices', 'Utilities'])
             scope[PortalJobTemplateList.iterator + 'PageSize'] = max_rows;
             scope.changePageSize(PortalJobTemplateList.name, PortalJobTemplateList.iterator, false);
         }
-
+        */
-
-
     };
 }
 ]);