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

2026-01-13 11:00:03 -03:30 · 2016-06-16 17:32:25 -04:00 · 2016-06-16 17:32:25 -04:00 · 5f4da1023e
commit 5f4da1023e
parent d50cd9882d
12 changed files with 94 additions and 76 deletions
--- 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;
--- 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"
--- 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;
--- 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(){
--- 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>
--- 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 {
--- 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>
-->
--- 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"
--- 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();
 }

--- 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>
+    <div id="portal-jobs">
+    </div>
+</div>
--- 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>
--- 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;
+}