Added running indicator to smart status. Added sockets back to templates list

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;

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;
+}

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') {
+                const data = {
-                    data.value = 1;
+                    status: job.status,
-                    data.smartStatus = "<i class=\"fa DashboardList-status SmartStatus-tooltip--success\"></i>  " + job.status.toUpperCase();
+                    jobId: job.id,
-                } else if (isFailureState(job.status)) {
+                    sortDate: job.finished || "running" + job.id,
-                    data.value = -1;
+                    finished: finished,
-                    data.smartStatus = "<i class=\"fa DashboardList-status SmartStatus-tooltip--failed\"></i>  " + job.status.toUpperCase();
+                    status_tip: "JOB ID: " + job.id + "<br>STATUS: " + job.status.toUpperCase() + "<br>FINISHED: " + finished,
-                } else {
+                    detailsUrl: detailsBaseUrl + job.id
-                    data.value = 0;
+                };
-                    data.smartStatus = "<i class=\"fa DashboardList-status SmartStatus-tooltip--running\"></i>  " + 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 + "<br>STATUS: " + data.smartStatus + "<br>FINISHED: " + data.finished;
-                data.detailsUrl = detailsBaseUrl + data.jobId;
 
                 // 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

awx/ui/client/src/smart-status/smart-status.partial.html

@@ -10,14 +10,20 @@
              tooltipInnerClass="SmartStatus-tooltip"
              title="">
                 <div class="SmartStatus-icon">
-                    <div ng-show="job.value === -1"
+                    <div ng-show="job.status === 'new' || job.status === 'pending' || job.status === 'waiting'"
+                        class="SmartStatus-waiting">
+                    </div>
+                    <div ng-show="job.status === 'running'"
+                        class="SmartStatus-running">
+                    </div>
+                    <div ng-show="job.status === 'failed' || job.status === 'error' || job.status === 'canceled'"
                         class="SmartStatus-iconDirectionPlaceholder SmartStatus-iconDirectionPlaceholder--bottom">
                     </div>
                     <div class="SmartStatus-iconIndicator"
-                        ng-class="{'SmartStatus-iconIndicator--success': job.value === 1,
+                        ng-class="{'SmartStatus-iconIndicator--success': job.status === 'successful',
-                            'SmartStatus-iconIndicator--failed': job.value === -1}">
+                            'SmartStatus-iconIndicator--failed': (job.status === 'failed' || job.status === 'error' || job.status === 'canceled')}">
                     </div>
-                    <div ng-show="job.value === 1"
+                    <div ng-show="job.status === 'successful'"
                         class="SmartStatus-iconDirectionPlaceholder SmartStatus-iconDirectionPlaceholder--top">
                     </div>
                 </div>