From 6bd6cc7fbc55e1e302a70875db8c9ae255fe0f3a Mon Sep 17 00:00:00 2001 From: mabashian Date: Mon, 2 Apr 2018 12:10:48 -0400 Subject: [PATCH] Added running indicator to smart status. Added sockets back to templates list --- .../templates/list-templates.controller.js | 17 +++++++++-- .../src/smart-status/smart-status.block.less | 29 ++++++++++++++++--- .../smart-status/smart-status.controller.js | 26 ++++++----------- .../smart-status/smart-status.partial.html | 14 ++++++--- 4 files changed, 59 insertions(+), 27 deletions(-) diff --git a/awx/ui/client/features/templates/list-templates.controller.js b/awx/ui/client/features/templates/list-templates.controller.js index 321c991011..b2d02ad2b0 100644 --- a/awx/ui/client/features/templates/list-templates.controller.js +++ b/awx/ui/client/features/templates/list-templates.controller.js @@ -20,7 +20,9 @@ function ListTemplatesController( Prompt, resolvedModels, strings, - Wait + Wait, + qs, + GetBasePath ) { const vm = this || {}; const [jobTemplate, workflowTemplate] = resolvedModels; @@ -59,6 +61,15 @@ function ListTemplatesController( $scope[name] = dataset.results; }); + $scope.$on(`ws-jobs`, () => { + let path = GetBasePath('unified_job_templates'); + qs.search(path, $state.params.template_search) + .then(function(searchResponse) { + $scope.template_dataset = searchResponse.data; + $scope.templates = $scope.template_dataset.results; + }); + }); + vm.isInvalid = (template) => { if(isJobTemplate(template)) { return template.project === null || (template.inventory === null && template.ask_inventory_on_launch === false); @@ -319,7 +330,9 @@ ListTemplatesController.$inject = [ 'Prompt', 'resolvedModels', 'TemplatesStrings', - 'Wait' + 'Wait', + 'QuerySet', + 'GetBasePath' ]; export default ListTemplatesController; diff --git a/awx/ui/client/src/smart-status/smart-status.block.less b/awx/ui/client/src/smart-status/smart-status.block.less index 01f9cfee65..8b0b49c0f0 100644 --- a/awx/ui/client/src/smart-status/smart-status.block.less +++ b/awx/ui/client/src/smart-status/smart-status.block.less @@ -13,13 +13,12 @@ .SmartStatus-icon { width: 14px; height: 14px; - } .SmartStatus-iconDirectionPlaceholder { width: 14px; height: 7px; - border: 1px solid #d7d7d7; + border: 1px solid @d7grey; background: #f2f2f2; } @@ -47,11 +46,10 @@ .SmartStatus-iconPlaceholder { height: 14px; width: 14px; - border: 1px solid #d7d7d7; + border: 1px solid @d7grey; background: #f2f2f2; } - .SmartStatus-tooltip--successful, .SmartStatus-tooltip--success{ color: @default-succ; @@ -84,3 +82,26 @@ 1px 1px 0 @default-bg; .pulsate(); } + +.SmartStatus-waiting { + width: 14px; + height: 14px; + border: 1px solid @d7grey; +} + +@keyframes pulse_animation { + 0% { transform: scale(1); } + 50% { transform: scale(0); } + 100% { transform: scale(1); } +} + +.SmartStatus-running { + height: 14px; + width: 14px; + background-color: @default-succ; + animation-name: pulse_animation; + animation-duration: 5000ms; + transform-origin:70% 70%; + animation-iteration-count: infinite; + animation-timing-function: linear; +} diff --git a/awx/ui/client/src/smart-status/smart-status.controller.js b/awx/ui/client/src/smart-status/smart-status.controller.js index 2debca7d7c..8026a4d10c 100644 --- a/awx/ui/client/src/smart-status/smart-status.controller.js +++ b/awx/ui/client/src/smart-status/smart-status.controller.js @@ -33,24 +33,16 @@ export default ['$scope', '$filter', var sparkData = _.sortBy(recentJobs.map(function(job) { - var data = {}; + const finished = $filter('longDate')(job.finished) || job.status+""; - if (job.status === 'successful') { - data.value = 1; - data.smartStatus = " " + job.status.toUpperCase(); - } else if (isFailureState(job.status)) { - data.value = -1; - data.smartStatus = " " + job.status.toUpperCase(); - } else { - data.value = 0; - data.smartStatus = " " + job.status.toUpperCase(); - } - - data.jobId = job.id; - data.sortDate = job.finished || "running" + data.jobId; - data.finished = $filter('longDate')(job.finished) || job.status+""; - data.status_tip = "JOB ID: " + data.jobId + "
STATUS: " + data.smartStatus + "
FINISHED: " + data.finished; - data.detailsUrl = detailsBaseUrl + data.jobId; + const data = { + status: job.status, + jobId: job.id, + sortDate: job.finished || "running" + job.id, + finished: finished, + status_tip: "JOB ID: " + job.id + "
STATUS: " + job.status.toUpperCase() + "
FINISHED: " + finished, + detailsUrl: detailsBaseUrl + job.id + }; // If we've already determined that there are both failed and successful jobs OR if the current job in the loop is // pending/waiting/running then we don't worry about checking for a single job status diff --git a/awx/ui/client/src/smart-status/smart-status.partial.html b/awx/ui/client/src/smart-status/smart-status.partial.html index 1718632bb2..ee3a157eaa 100644 --- a/awx/ui/client/src/smart-status/smart-status.partial.html +++ b/awx/ui/client/src/smart-status/smart-status.partial.html @@ -10,14 +10,20 @@ tooltipInnerClass="SmartStatus-tooltip" title="">
-
+
+
+
+
+ ng-class="{'SmartStatus-iconIndicator--success': job.status === 'successful', + 'SmartStatus-iconIndicator--failed': (job.status === 'failed' || job.status === 'error' || job.status === 'canceled')}">
-