From 65859fa4465092102d237e26375f28ab76682a0e Mon Sep 17 00:00:00 2001 From: Chris Houseknecht Date: Fri, 25 Apr 2014 11:55:49 +0000 Subject: [PATCH] Started fixing/finishing input group delete. Started moving socket status to header. --- awx/ui/static/js/app.js | 13 ++++-- awx/ui/static/js/helpers/Groups.js | 2 +- awx/ui/static/js/lists/Projects.js | 11 ++--- awx/ui/static/less/ansible-ui.less | 25 +++++------ awx/ui/static/lib/ansible/InventoryTree.js | 28 +++++++------ awx/ui/static/lib/ansible/Socket.js | 49 ++++++++++++---------- awx/ui/static/lib/ansible/directives.js | 2 +- awx/ui/static/partials/inventory-edit.html | 18 ++++---- awx/ui/templates/ui/index.html | 1 + 9 files changed, 82 insertions(+), 67 deletions(-) diff --git a/awx/ui/static/js/app.js b/awx/ui/static/js/app.js index 73a40e680c..69f8bb00a7 100644 --- a/awx/ui/static/js/app.js +++ b/awx/ui/static/js/app.js @@ -408,12 +408,12 @@ angular.module('Tower', [ }); } ]) - .run(['$cookieStore', '$rootScope', 'CheckLicense', '$location', 'Authorization', 'LoadBasePaths', 'ViewLicense', + .run(['$compile', '$cookieStore', '$rootScope', '$log', 'CheckLicense', '$location', 'Authorization', 'LoadBasePaths', 'ViewLicense', 'Timer', 'ClearScope', 'HideStream', 'Socket', - function ($cookieStore, $rootScope, CheckLicense, $location, Authorization, LoadBasePaths, ViewLicense, + function ($compile, $cookieStore, $rootScope, $log, CheckLicense, $location, Authorization, LoadBasePaths, ViewLicense, Timer, ClearScope, HideStream, Socket) { - var base, sock; + var base, e, html, sock; LoadBasePaths(); @@ -496,6 +496,12 @@ angular.module('Tower', [ $('#' + tabs + ' #' + tab).tab('show'); }; + html = ""; + e = angular.element(document.getElementById('socket-beacon')); + e.empty().append(html); + $compile(e)($rootScope); + // Listen for job changes and issue callbacks to initiate // DOM updates function openSocket() { @@ -505,6 +511,7 @@ angular.module('Tower', [ $rootScope.$apply(function() { sock.checkStatus(); $rootScope.$emit('SocketErrorEncountered'); + $log.debug('socket status: ' + $rootScope.socketStatus); }); }); sock.on("status_changed", function(data) { diff --git a/awx/ui/static/js/helpers/Groups.js b/awx/ui/static/js/helpers/Groups.js index c4fc8ae201..cd1ea2a6ea 100644 --- a/awx/ui/static/js/helpers/Groups.js +++ b/awx/ui/static/js/helpers/Groups.js @@ -1299,7 +1299,7 @@ function($compile, SchedulerInit, Rest, Wait, SetSchedulesInnerDialogSize, Sched "class": "btn btn-default", "id": "group-delete-cancel-button" },{ - label: "Continue", + label: "Delete", onClick: function() { scope.performDelete(); }, diff --git a/awx/ui/static/js/lists/Projects.js b/awx/ui/static/js/lists/Projects.js index b4ce808403..2fd27b9cb5 100644 --- a/awx/ui/static/js/lists/Projects.js +++ b/awx/ui/static/js/lists/Projects.js @@ -76,18 +76,19 @@ angular.module('ProjectsListDefinition', []) awToolTip: 'Click for help', awTipPlacement: 'top' },*/ - /*refresh: { + refresh: { mode: 'all', awToolTip: "Refresh the page", - ngClick: "refresh()" - },*/ - socket: { + ngClick: "refresh()", + ngShow: "socketStatus == 'error'" + }, + /*socket: { mode: 'all', iconClass: "{{ 'fa fa-power-off fa-lg socket-' + socketStatus }}", awToolTip: "{{ socketTip }}", dataTipWatch: "socketTip", ngClick: "socketToggle()", - }, + },*/ stream: { ngClick: "showActivity()", awToolTip: "View Activity Stream", diff --git a/awx/ui/static/less/ansible-ui.less b/awx/ui/static/less/ansible-ui.less index a2bdf96101..d6927ddaa4 100644 --- a/awx/ui/static/less/ansible-ui.less +++ b/awx/ui/static/less/ansible-ui.less @@ -1066,6 +1066,19 @@ input[type="checkbox"].checkbox-no-label { content: "\f04b"; } + .icon-socket-ok:before { + content: "\f111"; + color: @green; + } + .icon-socket-error:before { + content: "\f111"; + color: @red; + } + .icon-socket-connecting:before { + content: "\f042"; + color: @warning; + } + .badge { padding: 2px 3px 3px 4px; font-size: 10px; @@ -1203,18 +1216,6 @@ input[type="checkbox"].checkbox-no-label { } /* end */ -/* Socket icon */ - .socket-ok { - color: @green; - } - .socket-error { - color: @red; - } - .socket-connecting { - color: @warning - } -/* end */ - .field-success { color: #5bb75b; } diff --git a/awx/ui/static/lib/ansible/InventoryTree.js b/awx/ui/static/lib/ansible/InventoryTree.js index 3bd1674f32..8ea9b739b7 100644 --- a/awx/ui/static/lib/ansible/InventoryTree.js +++ b/awx/ui/static/lib/ansible/InventoryTree.js @@ -89,7 +89,7 @@ angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper', 'P } function getShowState(key) { - var result = true; + var result = null; local_child_store.every(function(child) { if (child.key === key) { result = (child.show !== undefined) ? child.show : true; @@ -129,6 +129,20 @@ angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper', 'P expand = (sorted[i].children.length > 0) ? getExpandState(sorted[i].id) : false; show = getShowState(sorted[i].id); + if (show === null) { + // this is a node we haven't seen before, so check the parent expand/collapse state + // If parent is not expanded, then child should be hidden. + show = true; + if (parent > 0) { + groups.every(function(g) { + if (g.id === parent) { + show = getExpandState(g.key); + return false; + } + return true; + }); + } + } group = { name: sorted[i].name, @@ -173,18 +187,6 @@ angular.module('InventoryTree', ['Utilities', 'RestServices', 'GroupsHelper', 'P group.ngicon = 'fa fa-square-o node-no-toggle'; } if (new_group_id && group.group_id === new_group_id) { - // For new group - // Find parent's expand state and set the show property accordingly. - // If parent is not expanded, then child should be hidden. - if (parent > 0) { - scope.groups.every(function(g) { - if (g.id === group.parent) { - group.show = getExpandState(g.key); - return false; - } - return true; - }); - } scope.selected_tree_id = id; scope.selected_group_id = group.group_id; } diff --git a/awx/ui/static/lib/ansible/Socket.js b/awx/ui/static/lib/ansible/Socket.js index ae248bb831..3d84c3946e 100644 --- a/awx/ui/static/lib/ansible/Socket.js +++ b/awx/ui/static/lib/ansible/Socket.js @@ -12,7 +12,7 @@ angular.module('SocketIO', ['AuthService', 'Utilities']) - .factory('Socket', ['$rootScope', '$location', '$log', 'Authorization', 'Alert', function ($rootScope, $location, $log, Authorization, Alert) { + .factory('Socket', ['$rootScope', '$location', '$log', 'Authorization', function ($rootScope, $location, $log, Authorization) { return function(params) { var scope = params.scope, host = $location.host(), @@ -23,17 +23,23 @@ angular.module('SocketIO', ['AuthService', 'Utilities']) if (scope.removeSocketErrorEncountered) { scope.removeSocketErrorEncountered(); } - scope.removeSocketErrorEncountered = scope.$on('SocketErrorEncountered', function(e, reason) { - if (reason === 'Session expired') { - // encountered expired token, ask user to log in again - $rootScope.sessionTimer.expireSession(); - $location.url('/login'); + scope.removeSocketErrorEncountered = scope.$on('socketStatusChange', function() { + switch(scope.socketStatus) { + case 'error': + scope.socketTip = "There was an error connecting to the websocket server. Click for troubleshooting help."; + break; + case 'connecting': + scope.socketTip = "Attempting to connect to the websocket server. Click for troubleshooting help."; + break; + case "ok": + scope.socketTip = "Connected to the websocket server. Pages containing job status information for playbook runs, SCM updates and inventory " + + "sync processes will automatically update in real-time."; } - else if (scope.socketStatus === 'error') { + /*else if (scope.socketStatus === 'error') { Alert("Connection Error", "Error encountered while attempting to connect to the websocket server. Confirm the server " + "is up. Use the button found on the Inventories, Projects and Jobs pages to reconnect.", "alert-danger"); - } + }*/ }); return { @@ -61,14 +67,14 @@ angular.module('SocketIO', ['AuthService', 'Utilities']) $log.debug('Socket connecting...'); self.scope.$apply(function () { self.scope.socketStatus = 'connecting'; - self.scope.socketTip = 'Connecting. Click to cancel.'; + self.scope.$emit('socketStatusChange'); }); }); self.socket.on('connect', function() { $log.debug('Socket connection established'); self.scope.$apply(function () { self.scope.socketStatus = 'ok'; - self.scope.socketTip = 'Connected. Click to close.'; + self.scope.$emit('socketStatusChange'); }); }); self.socket.on('connect_failed', function(reason) { @@ -76,8 +82,7 @@ angular.module('SocketIO', ['AuthService', 'Utilities']) $log.error('Socket connection failed: ' + r); self.scope.$apply(function () { self.scope.socketStatus = 'error'; - self.scope.socketTip = 'Connection failed. Click to retry.'; - self.scope.$emit('SocketErrorEncountered'); + self.scope.$emit('socketStatusChange'); }); }); @@ -85,8 +90,7 @@ angular.module('SocketIO', ['AuthService', 'Utilities']) $log.debug('Socket disconnected'); self.scope.$apply(function() { self.socketStatus = 'error'; - self.socketTip = 'Disconnected. Click to connect.'; - self.scope.$emit('SocketErrorEncountered'); + self.scope.$emit('socketStatusChange'); }); }); self.socket.on('error', function(reason) { @@ -94,36 +98,35 @@ angular.module('SocketIO', ['AuthService', 'Utilities']) $log.debug('Socket error: ' + r); self.scope.$apply(function() { self.scope.socketStatus = 'error'; - self.scope.socketTip = 'Connection error encountered. Click to retry.'; - self.scope.$emit('SocketErrorEncountered'); + self.scope.$emit('socketStatusChange'); }); }); self.socket.on('reconnecting', function() { $log.debug('Socket attempting reconnect...'); self.scope.$apply(function() { self.scope.socketStatus = 'connecting'; - self.scope.socketTip = 'Connecting. Click to cancel.'; + self.scope.$emit('socketStatusChange'); }); }); self.socket.on('reconnect', function() { $log.debug('Socket reconnected'); self.scope.$apply(function() { self.scope.socketStatus = 'ok'; - self.scope.socketTip = 'Connected. Click to close.'; + self.scope.$emit('socketStatusChange'); }); }); self.socket.on('reconnect_failed', function(reason) { $log.error('Socket reconnect failed: ' + reason); self.scope.$apply(function() { self.scope.socketStatus = 'error'; - self.scope.socketTip = 'Connection failed. Click to retry.'; - self.scope.$emit('SocketErrorEncountered'); - }); + self.scope.$emit('socketStatusChange'); + }); }); } else { - // Encountered expired token - self.scope.$emit('SocketErrorEncountered', 'Session expired'); + // encountered expired token, redirect to login page + $rootScope.sessionTimer.expireSession(); + $location.url('/login'); } }, checkStatus: function() { diff --git a/awx/ui/static/lib/ansible/directives.js b/awx/ui/static/lib/ansible/directives.js index da121dc44e..1234d40ad6 100644 --- a/awx/ui/static/lib/ansible/directives.js +++ b/awx/ui/static/lib/ansible/directives.js @@ -285,7 +285,7 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Job .directive('awPopOver', ['$compile', function($compile) { return function(scope, element, attrs) { var placement = (attrs.placement !== undefined && attrs.placement !== null) ? attrs.placement : 'left', - title = (attrs.title !== undefined && attrs.title !== null) ? attrs.title : 'Help', + title = (attrs.title) ? attrs.title : (attrs.popoverTitle) ? attrs.popoverTitle : 'Help', container = (attrs.container !== undefined) ? attrs.container : false, trigger = (attrs.trigger !== undefined) ? attrs.trigger : 'manual'; if (attrs.awPopOverWatch) { diff --git a/awx/ui/static/partials/inventory-edit.html b/awx/ui/static/partials/inventory-edit.html index 54549261ba..c6da7cbdc1 100644 --- a/awx/ui/static/partials/inventory-edit.html +++ b/awx/ui/static/partials/inventory-edit.html @@ -54,42 +54,42 @@

Deleting group {{ group_name }}. - This group has {{ groupsCount }} child groups and {{ hostsCount }} child hosts. - This group has {{ hostsCount }} child hosts. - This group has {{ groupsCount }} child groups. + This group contains {{ groupsCount }} groups and {{ hostsCount }} hosts. + This group contains {{ hostsCount }} hosts. + This group contains {{ groupsCount }} groups. Delete or preserve the group's children?

diff --git a/awx/ui/templates/ui/index.html b/awx/ui/templates/ui/index.html index d982ceeeb8..34ac9d3d22 100644 --- a/awx/ui/templates/ui/index.html +++ b/awx/ui/templates/ui/index.html @@ -179,6 +179,7 @@