Merge pull request #2486 from mabashian/refresh-button-audit

Tweaked refresh buttons on the dashboard/job page/portal mode

awx/ui/client/legacy-styles/forms.less

@@ -102,6 +102,11 @@
     min-height: 30px;
 }
 
+.Form-tabs {
+    flex: 1 0 auto;
+    display: flex;
+}
+
 .Form-tab {
     color: @btn-txt;
     background-color: @btn-bg;
@@ -163,6 +168,10 @@
     display: block;
 }
 
+.Form-tabActions {
+    display: flex;
+}
+
 .Form-formGroup {
     flex: 1 0 auto;
     margin-bottom: 20px;

awx/ui/client/src/app.js

@@ -241,7 +241,8 @@ var tower = angular.module('Tower', [
                 controller: Home,
                 params: {licenseMissing: null},
                 data: {
-                    activityStream: true
+                    activityStream: true,
+                    refreshButton: true
                 },
                 ncyBreadcrumb: {
                     label: "DASHBOARD"

awx/ui/client/src/bread-crumb/bread-crumb.block.less

@@ -18,9 +18,12 @@
 .BreadCrumb.is-loggedOut {
     opacity: 0;
 }
+.BreadCrumb-menuLinkHolder {
+    display: flex;
+    margin-left: auto;
+}
 .BreadCrumb-menuLink {
     width: 58px;
-    margin-left: auto;
     color: @bc-link-icon;
     flex: initial;
     display: flex;

awx/ui/client/src/bread-crumb/bread-crumb.directive.js

@@ -9,8 +9,13 @@ export default
                 var streamConfig = {};
 
                 scope.showActivityStreamButton = false;
+                scope.showRefreshButton = false;
                 scope.loadingLicense = true;
 
+                scope.refresh = function() {
+                    $state.go($state.current, {}, {reload: true});
+                };
+
                 scope.toggleActivityStream = function() {
 
                         // If the user is not already on the activity stream then they want to navigate to it
@@ -79,6 +84,8 @@ export default
                         scope.showActivityStreamButton = false;
 
                     }
+
+                    scope.showRefreshButton = (streamConfig && streamConfig.refreshButton) ? true : false;
                 });
 
                 // scope.$on('featuresLoaded', function(){

awx/ui/client/src/bread-crumb/bread-crumb.partial.html

@@ -1,18 +1,33 @@
 <div id="bread_crumb" class="BreadCrumb" ng-class="{'is-loggedOut' : !current_user || !current_user.username}">
     <div ng-hide="licenseMissing" ncy-breadcrumb></div>
-    <div class="BreadCrumb-menuLink"
-        id="bread_crumb_activity_stream"
-        aw-tool-tip="{{activityStreamTooltip}}"
-        data-tip-watch="activityStreamTooltip"
-        data-placement="left"
-        data-trigger="hover"
-        data-container="body"
-        ng-class="{'BreadCrumb-menuLinkActive' : activityStreamActive}"
-        ng-if="showActivityStreamButton"
-        ng-hide= "loadingLicense || licenseMissing"
-        ng-click="toggleActivityStream()">
-        <i class="BreadCrumb-menuLinkImage icon-activity-stream"
-            alt="Activity Stream">
-        </i>
+    <div class="BreadCrumb-menuLinkHolder">
+        <div class="BreadCrumb-menuLink"
+            id="bread_crumb_refresh"
+            aw-tool-tip="Refresh the page"
+            data-placement="left"
+            data-trigger="hover"
+            data-container="body"
+            ng-hide= "loadingLicense || licenseMissing"
+            ng-if="socketStatus === 'error' && showRefreshButton"
+            ng-click="refresh()">
+            <i class="BreadCrumb-menuLinkImage fa fa-refresh"
+                alt="Refresh the page">
+            </i>
+        </div>
+        <div class="BreadCrumb-menuLink"
+            id="bread_crumb_activity_stream"
+            aw-tool-tip="{{activityStreamTooltip}}"
+            data-tip-watch="activityStreamTooltip"
+            data-placement="left"
+            data-trigger="hover"
+            data-container="body"
+            ng-class="{'BreadCrumb-menuLinkActive' : activityStreamActive}"
+            ng-if="showActivityStreamButton"
+            ng-hide= "loadingLicense || licenseMissing"
+            ng-click="toggleActivityStream()">
+            <i class="BreadCrumb-menuLinkImage icon-activity-stream"
+                alt="Activity Stream">
+            </i>
+        </div>
     </div>
 </div>

awx/ui/client/src/dashboard/dashboard.block.less

@@ -6,6 +6,7 @@
     flex-wrap: wrap;
     justify-content: space-between;
     width: 100%;
+    margin-top: 20px;
 }
 
 .Dashboard-counts {

awx/ui/client/src/partials/home.html

@@ -1,25 +1,6 @@
 
 <div class="tab-pane" id="home">
     <div ng-cloak id="htmlTemplate">
-        <div id="refresh-row" class="row">
-            <div class="col-lg-12">
-                <div id="home-list-actions" class="list-actions pull-right">
-                    <button
-                        toolbar-button
-                        mode="all"
-                        aw-tool-tip="Refresh the page"
-                        ng-click="refresh()"
-                        ng-show="socketStatus == 'error'"
-                        icon-name="refresh"
-                        toolbar="true">
-                    </button>
-                </div>
-            </div>
-        </div>
-
         <dashboard></dashboard>
     </div>
 <div>
-<!--
-<div ng-include="'/static/partials/logviewer.html'"></div>
--->

awx/ui/client/src/partials/jobs.html

@@ -1,26 +1,24 @@
 <div class="tab-pane" id="jobs-page">
     <div ng-cloak id="htmlTemplate" class="Panel">
 
-        <div id="refresh-row" class="row" ng-show="socketStatus == 'error'">
-            <div class="col-lg-12">
-                <div id="home-list-actions" class="list-actions pull-right">
-                    <button type="button" class="btn btn-xs btn-primary" ng-click="refreshJobs()" id="refresh_btn" aw-tool-tip="Refresh the page" data-placement="top"
-                        data-original-title="" title=""><i class="fa fa-refresh fa-lg"></i></button>
-                </div>
-            </div>
-        </div>
-
         <div>
             <div id="jobs_tabs" class="Form-tabHolder">
-                <div class= "Form-tab is-selected" id="active_jobs_link"
-                    ng-class="{'is-selected': jobsSelected }"
-                    ng-click="toggleTab('jobs')">
-                    Jobs
+                <div class="Form-tabs">
+                    <div class= "Form-tab is-selected" id="active_jobs_link"
+                        ng-class="{'is-selected': jobsSelected }"
+                        ng-click="toggleTab('jobs')">
+                        Jobs
+                    </div>
+                    <div id="scheduled_jobs_link" class="Form-tab"
+                        ng-class="{'is-selected': schedulesSelected }"
+                        ng-click="toggleTab('scheduled')">
+                        Schedules
+                    </div>
                 </div>
-                <div id="scheduled_jobs_link" class="Form-tab"
-                    ng-class="{'is-selected': schedulesSelected }"
-                    ng-click="toggleTab('scheduled')">
-                    Schedules
+                <div class="Form-tabActions">
+                    <button id="refresh_btn" ng-show="socketStatus === 'error'" aw-tool-tip="Refresh the page" data-placement="top" class="btn List-buttonDefault" ng-click="refreshJobs()" toolbar="true">
+                            <span>REFRESH</span>
+                    </button>
                 </div>
             </div>
             <div  id="jobs-tab-content" class="Form-tabSection"

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

@@ -63,6 +63,10 @@ export function PortalModeJobsController($scope, $rootScope, GetBasePath, Genera
         init();
     };
 
+    $scope.refresh = function(){
+        $scope.search(list.iterator);
+    };
+
     init();
 }
 

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

@@ -1,11 +1,18 @@
 <div id="portal-container-jobs" class="Panel">
-	<div class="btn-group PortalMode-filter">
-	    <button ng-class="{'btn-primary ': activeFilter == 'user',
-	    'btn-default' : activeFilter != 'user' }" 
-	    ng-click='filterUser()' class="btn btn-xs">My Jobs</button>
-	    <button ng-class="{'btn-primary' : activeFilter == 'all',
-	    'btn-default' : activeFilter != 'all'}" ng-click='filterAll()' class="btn btn-xs btn-default">All Jobs</button>
+	<div class="PortalMode-filterHolder">
+		<div class="btn-group PortalMode-filter">
+		    <button ng-class="{'btn-primary ': activeFilter == 'user',
+		    'btn-default' : activeFilter != 'user' }"
+		    ng-click='filterUser()' class="btn btn-xs">My Jobs</button>
+		    <button ng-class="{'btn-primary' : activeFilter == 'all',
+		    'btn-default' : activeFilter != 'all'}" ng-click='filterAll()' class="btn btn-xs btn-default">All Jobs</button>
+		</div>
+		<div class="PortalMode-refresh">
+			<button id="refresh_btn" aw-tool-tip="Refresh the page" data-placement="top" class="btn List-buttonDefault" ng-click="refresh()" ng-show="socketStatus == 'error'">
+					<span>REFRESH</span>
+			</button>
+		</div>
 	</div>
-        <div id="portal-jobs" >
-        </div>
-</div>
+    <div id="portal-jobs">
+    </div>
+</div>

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

@@ -1,19 +1,5 @@
 <div class="tab-pane PortalMode" >
         <div ng-cloak id="portal-landing">
-                <div id="refresh-row" class="row">
-                        <div class="col-lg-12">
-                                <div id="portal-list-actions" class="list-actions pull-right">
-                                    <button
-                                        toolbar-button
-                                        icon-name="refresh"
-                                        ng-click="refresh()"
-                                        ng-show="socketStatus == 'error'"
-                                        aw-tool-tip="Refresh the page"
-                                        toolbar="true">
-                                    </button>
-                                </div>
-                        </div>
-                </div>
                 <div class="PortalMode-container">
                         <div ui-view="job-templates" class="PortalMode-panel--left">
                         </div>

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

@@ -16,11 +16,17 @@
 .PortalMode-panelHeader{
 	.OnePlusOne-panelHeader;
 }
-.PortalMode-filter{
+.PortalMode-filterHolder {
 	position: absolute;
 	right: 35px;
+	display: flex;
+	align-items: center;
+  	justify-content: center;
 
     .btn.btn-xs {
         padding: 1px 10px;
     }
 }
+.PortalMode-refresh {
+	margin-left: 10px;
+}