From 5f4da1023eb3a708eb1b085e8de196e73d2fa176 Mon Sep 17 00:00:00 2001
From: Michael Abashian <mabashian@ansible.com>
Date: Thu, 16 Jun 2016 17:32:25 -0400
Subject: [PATCH] Tweaked refresh buttons on the dashboard/job page/portal mode

---
 awx/ui/client/legacy-styles/forms.less        |  9 ++++
 awx/ui/client/src/app.js                      |  3 +-
 .../src/bread-crumb/bread-crumb.block.less    |  5 ++-
 .../src/bread-crumb/bread-crumb.directive.js  |  7 +++
 .../src/bread-crumb/bread-crumb.partial.html  | 43 +++++++++++++------
 .../client/src/dashboard/dashboard.block.less |  1 +
 awx/ui/client/src/partials/home.html          | 19 --------
 awx/ui/client/src/partials/jobs.html          | 32 +++++++-------
 .../portal-mode-jobs.controller.js            |  4 ++
 .../portal-mode/portal-mode-jobs.partial.html | 25 +++++++----
 .../portal-mode-layout.partial.html           | 14 ------
 .../src/portal-mode/portal-mode.block.less    |  8 +++-
 12 files changed, 94 insertions(+), 76 deletions(-)

diff --git a/awx/ui/client/legacy-styles/forms.less b/awx/ui/client/legacy-styles/forms.less
index 5e383a6c0f..28c98651b8 100644
--- a/awx/ui/client/legacy-styles/forms.less
+++ b/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;
diff --git a/awx/ui/client/src/app.js b/awx/ui/client/src/app.js
index b1933e4198..3d1b74e8b1 100644
--- a/awx/ui/client/src/app.js
+++ b/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"
diff --git a/awx/ui/client/src/bread-crumb/bread-crumb.block.less b/awx/ui/client/src/bread-crumb/bread-crumb.block.less
index 58aa900c65..08abee34a7 100644
--- a/awx/ui/client/src/bread-crumb/bread-crumb.block.less
+++ b/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;
diff --git a/awx/ui/client/src/bread-crumb/bread-crumb.directive.js b/awx/ui/client/src/bread-crumb/bread-crumb.directive.js
index 3331a10736..1cf035550a 100644
--- a/awx/ui/client/src/bread-crumb/bread-crumb.directive.js
+++ b/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(){
diff --git a/awx/ui/client/src/bread-crumb/bread-crumb.partial.html b/awx/ui/client/src/bread-crumb/bread-crumb.partial.html
index 8b9ef46bc7..8e661904ba 100644
--- a/awx/ui/client/src/bread-crumb/bread-crumb.partial.html
+++ b/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>
diff --git a/awx/ui/client/src/dashboard/dashboard.block.less b/awx/ui/client/src/dashboard/dashboard.block.less
index 75d9525040..40bcd84002 100644
--- a/awx/ui/client/src/dashboard/dashboard.block.less
+++ b/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 {
diff --git a/awx/ui/client/src/partials/home.html b/awx/ui/client/src/partials/home.html
index 849917cac6..4069ec9c7b 100644
--- a/awx/ui/client/src/partials/home.html
+++ b/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>
--->
diff --git a/awx/ui/client/src/partials/jobs.html b/awx/ui/client/src/partials/jobs.html
index 1c006274fb..a36b785d33 100644
--- a/awx/ui/client/src/partials/jobs.html
+++ b/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"
diff --git a/awx/ui/client/src/portal-mode/portal-mode-jobs.controller.js b/awx/ui/client/src/portal-mode/portal-mode-jobs.controller.js
index d4d6373319..ce890153a7 100644
--- a/awx/ui/client/src/portal-mode/portal-mode-jobs.controller.js
+++ b/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();
 }
 
diff --git a/awx/ui/client/src/portal-mode/portal-mode-jobs.partial.html b/awx/ui/client/src/portal-mode/portal-mode-jobs.partial.html
index 41e2f3dd49..22bf88e899 100644
--- a/awx/ui/client/src/portal-mode/portal-mode-jobs.partial.html
+++ b/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>
\ No newline at end of file
+    <div id="portal-jobs">
+    </div>
+</div>
diff --git a/awx/ui/client/src/portal-mode/portal-mode-layout.partial.html b/awx/ui/client/src/portal-mode/portal-mode-layout.partial.html
index a92bc1ad22..4f9673cc3e 100644
--- a/awx/ui/client/src/portal-mode/portal-mode-layout.partial.html
+++ b/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>
diff --git a/awx/ui/client/src/portal-mode/portal-mode.block.less b/awx/ui/client/src/portal-mode/portal-mode.block.less
index 0f4ce481a6..4284434cfd 100644
--- a/awx/ui/client/src/portal-mode/portal-mode.block.less
+++ b/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;
+}