From 376d59dfcc43ce796ce301470eae3e27fdd8373f Mon Sep 17 00:00:00 2001 From: Chris Houseknecht Date: Thu, 21 Nov 2013 17:02:40 +0000 Subject: [PATCH] AC-681 simulating a disabled button for project update and inventory update. Button appears disabled, but tooltips work. On *disabled* buttons tooltip explains why it is disabled. Button is clickable, but nothing happens- just like a real disable dbutton. --- awx/ui/static/js/controllers/Projects.js | 15 +++++++- awx/ui/static/js/helpers/Groups.js | 37 ++++++++++++++++--- awx/ui/static/js/lists/InventorySummary.js | 6 ++- awx/ui/static/js/lists/Projects.js | 3 +- awx/ui/static/less/ansible-ui.less | 9 +++++ .../static/lib/ansible/generator-helpers.js | 2 + 6 files changed, 62 insertions(+), 10 deletions(-) diff --git a/awx/ui/static/js/controllers/Projects.js b/awx/ui/static/js/controllers/Projects.js index 62da023138..0fa33fd134 100644 --- a/awx/ui/static/js/controllers/Projects.js +++ b/awx/ui/static/js/controllers/Projects.js @@ -66,6 +66,14 @@ function ProjectsList ($scope, $rootScope, $location, $log, $routeParams, Rest, for (var j=0; j < scope.project_scm_type_options.length; j++) { if (scope.project_scm_type_options[j].value == scope.projects[i].scm_type) { scope.projects[i].scm_type = scope.project_scm_type_options[j].label + if (scope.projects[i].scm_type == 'Manual') { + scope.projects[i].scm_update_tooltip = 'Manaul projects do not require an SCM update'; + scope.projects[i].scm_type_class = 'btn-disabled'; + } + else { + scope.projects[i].scm_update_tooltip = "Start an SCM update"; + scope.projects[i].scm_type_class = ""; + } break; } } @@ -265,8 +273,11 @@ function ProjectsList ($scope, $rootScope, $location, $log, $routeParams, Rest, scope.SCMUpdate = function(project_id) { for (var i=0; i < scope.projects.length; i++) { if (scope.projects[i].id == project_id) { - if (scope.projects[i].scm_type == "" || scope.projects[i].scm_type == null ) { - Alert('Missing SCM Setup', 'Before running an SCM update, edit the project and provide the SCM access information.', 'alert-info'); + if (scope.projects[i].scm_type == "Manual" || scope.projects[i].scm_type == "" || scope.projects[i].scm_type == null ) { + // Do not respond. Button appears greyed out as if it is disabled. Not disabled though, because we need mouse over event + // to work. So user can click, but we just won't do anything. + //Alert('Missing SCM Setup', 'Before running an SCM update, edit the project and provide the SCM access information.', 'alert-info'); + break; } else if (scope.projects[i].status == 'updating') { Alert('Update in Progress', 'The SCM update process is running. Use the Refresh button to monitor the status.', 'alert-info'); diff --git a/awx/ui/static/js/helpers/Groups.js b/awx/ui/static/js/helpers/Groups.js index 9f47b9a373..377789cbdb 100644 --- a/awx/ui/static/js/helpers/Groups.js +++ b/awx/ui/static/js/helpers/Groups.js @@ -373,6 +373,28 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', ' scope.groups[i].last_updated = last_update; scope.groups[i].status_badge_class = update_status['class']; scope.groups[i].status_badge_tooltip = update_status['tooltip']; + + // Set cancel button attributes + if (scope.groups[i].summary_fields.inventory_source.status == 'updating' || + scope.groups[i].summary_fields.inventory_source.status == 'updating') { + scope.groups[i].cancel_tooltip = "Cancel the update process"; + scope.groups[i].cancel_class = ""; + } + else { + scope.groups[i].cancel_tooltip = "Update process is not running"; + scope.groups[i].cancel_class = "btn-disabled"; + } + + // Set update button attributes + if (scope.groups[i].summary_fields.inventory_source.source == "" || + scope.groups[i].summary_fields.inventory_source.source == null) { + scope.groups[i].update_tooltip = "No external source. Does not require an update."; + scope.groups[i].update_class = "btn-disabled"; + } + else { + scope.groups[i].update_tooltip = "Start the inventory update process"; + scope.groups[i].update_class = ""; + } } if (scope.groups.length == 0) { @@ -485,7 +507,8 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', ' if (group.summary_fields.inventory_source.source !== '' && group.summary_fields.inventory_source.source !== null) { // the group has a source - if (group.summary_fields.inventory_source.status == 'updating') { + if (group.summary_fields.inventory_source.status == 'updating' || + group.summary_fields.inventory_source.status == 'pending') { // there is an update currently running Rest.setUrl(group.related.inventory_source); Rest.get() @@ -497,7 +520,9 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', ' { hdr: 'Error!', msg: 'Call to ' + group.related.inventory_source + ' failed. GET status: ' + status }); }); } - else { + } + // The button appears disabled, so act like it is and do not respond to a click. + /* else { Alert('Update Not Found', 'An Inventory update does not appear to be running for group: ' + group.name + '. Click the Refresh ' + 'button to view the latet status.', 'alert-info'); } @@ -505,7 +530,8 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', ' else { Alert('Missing Configuration', 'The selected group is not configured for updates. You must first edit the group and provide external Source settings ' + 'before attempting an update.', 'alert-info'); - } + }*/ + } // Respond to refresh button @@ -526,8 +552,9 @@ angular.module('GroupsHelper', [ 'RestServices', 'Utilities', 'ListGenerator', ' for (var i=0; i < scope.groups.length; i++) { if (scope.groups[i].id == id) { if (scope.groups[i].summary_fields.inventory_source.source == "" || scope.groups[i].summary_fields.inventory_source.source == null) { - Alert('Missing Configuration', 'The selected group is not configured for updates. You must first edit the group and provide ' + - 'external Source settings before attempting an update.', 'alert-info'); + //Alert('Missing Configuration', 'The selected group is not configured for updates. You must first edit the group and provide ' + + // 'external Source settings before attempting an update.', 'alert-info'); + // Do nothing. Act as though button is disabled. } else if (scope.groups[i].summary_fields.inventory_source.status == 'updating') { Alert('Update in Progress', 'The inventory update process is currently running for group ' + diff --git a/awx/ui/static/js/lists/InventorySummary.js b/awx/ui/static/js/lists/InventorySummary.js index 55b1794644..78c70ecb0a 100644 --- a/awx/ui/static/js/lists/InventorySummary.js +++ b/awx/ui/static/js/lists/InventorySummary.js @@ -163,14 +163,16 @@ angular.module('InventorySummaryDefinition', []) icon: 'icon-cloud-download', "class": 'btn-xs btn-success', ngClick: 'updateGroup(\{\{ group.id \}\})', - awToolTip: 'Perform an update on this group' + awToolTip: "\{\{ group.update_tooltip \}\}", + ngClass: "group.update_class" }, cancel: { label: 'Cancel', icon: 'icon-minus-sign', ngClick: "cancelUpdate(\{\{ group.id \}\}, '\{\{ group.name \}\}')", "class": 'btn-danger btn-xs delete-btn', - awToolTip: 'Cancel a running update process' + awToolTip: "\{\{ group.cancel_tooltip \}\}", + ngClass: "group.cancel_class" } } }); diff --git a/awx/ui/static/js/lists/Projects.js b/awx/ui/static/js/lists/Projects.js index 6a660e04a9..89d65a09f4 100644 --- a/awx/ui/static/js/lists/Projects.js +++ b/awx/ui/static/js/lists/Projects.js @@ -122,7 +122,8 @@ angular.module('ProjectsListDefinition', []) icon: 'icon-cloud-download', "class": 'btn-xs btn-success', ngClick: 'SCMUpdate(\{\{ project.id \}\})', - awToolTip: 'Perform an SCM update on this project' + awToolTip: "\{\{ project.scm_update_tooltip \}\}", + ngClass: "project.scm_type_class" }, cancel: { label: 'Cancel', diff --git a/awx/ui/static/less/ansible-ui.less b/awx/ui/static/less/ansible-ui.less index 50a14a85c8..6444e60efe 100644 --- a/awx/ui/static/less/ansible-ui.less +++ b/awx/ui/static/less/ansible-ui.less @@ -117,6 +117,15 @@ textarea { margin-bottom: 15px; } +/* Make button appear to be disabled, but allow mouse events */ + .btn-disabled { + opacity: 0.65; + filter: alpha(opacity=65); + -webkit-box-shadow: none; + box-shadow: none; + } + + hr { border-color: #e3e3e3; } diff --git a/awx/ui/static/lib/ansible/generator-helpers.js b/awx/ui/static/lib/ansible/generator-helpers.js index 6e4aa32a76..10f5578da5 100644 --- a/awx/ui/static/lib/ansible/generator-helpers.js +++ b/awx/ui/static/lib/ansible/generator-helpers.js @@ -137,6 +137,8 @@ angular.module('GeneratorHelpers', ['GeneratorHelpers']) html += (btn.dataTitle) ? Attr(btn, 'dataTitle') : ""; html += (btn.ngShow) ? Attr(btn, 'ngShow') : ""; html += (btn.ngHide) ? Attr(btn, 'ngHide') : ""; + html += (btn.ngDisabled) ? Attr(btn, 'ngHide') : ""; + html += (btn.ngClass) ? Attr(btn, 'ngClass') : ""; html += " >"; html += (btn['img']) ? "" : ""; html += (btn['icon']) ? Attr(btn,'icon') : "";