Use template for rendering smart status

awx/ui/static/js/lists/JobTemplates.js

@@ -28,8 +28,8 @@ export default
               columnClass: 'col-md-2 col-sm-2 col-xs-2',
               searchable: false,
               nosort: true,
-              ngClick: "null",
-              smartStatus: true
+              ngInclude: "'/static/partials/job-template-smart-status.html'",
+              type: 'template'
             },
             name: {
                 key: true,

awx/ui/static/js/shared/generator-helpers.js

@@ -66,6 +66,11 @@ angular.module('GeneratorHelpers', [systemStatus.name])
                 result += (value) ? 'true' : 'false';
                 result += "\" ";
                 break;
+            case 'columnClass':
+                result = 'class="';
+                result += value;
+                result += '"';
+                break;
             default:
                 result = key + "=\"" + value + "\" ";
             }
@@ -551,8 +556,19 @@ angular.module('GeneratorHelpers', [systemStatus.name])
     };
 }])
 
-.factory('Column', ['Attr', 'Icon', 'DropDown', 'Badge', 'BadgeCount', 'BuildLink',
-    function (Attr, Icon, DropDown, Badge, BadgeCount, BuildLink) {
+.factory('Template', ['Attr', function(Attr) {
+    return function(field) {
+        var ngClass = (field.ngClass) ? Attr(field, 'ngClass') : null;
+        var classList = (field.columnClass) ? Attr(field, 'columnClass') : null;
+        var ngInclude = (field.ngInclude) ? Attr(field, 'ngInclude') : null;
+        var attrs = _.compact([ngClass, classList, ngInclude]);
+
+        return '<td ' + attrs.join(' ') + '></td>';
+    };
+}])
+
+.factory('Column', ['Attr', 'Icon', 'DropDown', 'Badge', 'BadgeCount', 'BuildLink', 'Template',
+    function (Attr, Icon, DropDown, Badge, BadgeCount, BuildLink, Template) {
         return function (params) {
             var list = params.list,
                 fld = params.fld,
@@ -567,6 +583,8 @@ angular.module('GeneratorHelpers', [systemStatus.name])
                 html = BadgeCount(params);
             } else if (field.type === 'badgeOnly') {
                 html = Badge(field);
+            } else if (field.type === 'template') {
+                html = Template(field);
             } else {
                 html += "<td class=\"" + fld + "-column";
                 html += (field['class']) ? " " + field['class'] : "";

awx/ui/static/js/smart-status/smart-status.controller.js

@@ -1,13 +1,6 @@
 export default ['$scope', function ($scope) {
 
-    var str = $scope.job_template.id+'_smart',
-    recentJobs = $scope.job_template.summary_fields.recent_jobs;
-    $scope[str] = {
-        id: $scope.job_template.id,
-        sparkArray: [],
-        jobIds: {},
-        smartStatus: []
-    };
+    var recentJobs = $scope.jobs;
 
     function isFailureState(status) {
         return status === 'failed' || status === 'error' || status === 'canceled';
@@ -32,9 +25,9 @@ export default ['$scope', function ($scope) {
             return data;
         });
 
-    $scope[str].sparkArray = _.pluck(sparkData, 'value');
-    $scope[str].jobIds = _.pluck(sparkData, 'jobId');
-    $scope[str].smartStatus = _.pluck(sparkData, 'smartStatus');
+    $scope.sparkArray = _.pluck(sparkData, 'value');
+    $scope.jobIds = _.pluck(sparkData, 'jobId');
+    $scope.smartStatus = _.pluck(sparkData, 'smartStatus');
 
 }];
 

awx/ui/static/js/smart-status/smart-status.directive.js

@@ -1,11 +1,13 @@
 import smartStatusController from 'tower/smart-status/smart-status.controller.js';
 export default [  function() {
     return {
+        scope: {
+            jobs: '='
+        },
         restrict: 'E',
-        link: function (scope){
-            var str = scope.job_template.id+'_smart';
+        link: function (scope, element){
 
-            scope[str].formatter = function(sparklines, options, point){
+            scope.formatter = function(sparklines, options, point){
                 var status = options.userOptions.tooltipValueLookups.status[point.offset];
                 //capitalize first letter
                 status = status.charAt(0).toUpperCase() + status.slice(1);
@@ -14,7 +16,7 @@ export default [  function() {
                   "<br>Status: <span style=\"color: " + point.color + "\">&#9679;</span>"+status+"</div>" ;
             };
 
-            $('aw-smart-status:eq('+scope.$index+')').sparkline(scope[str].sparkArray, {
+            element.sparkline(scope.sparkArray, {
                 type: 'tristate',
                 width: '4em',
                 height: '2em',
@@ -23,11 +25,11 @@ export default [  function() {
                 zeroBarColor: 'grey',
                 posBarColor: '#00aa00',
                 negBarColor: '#aa0000',
-                tooltipFormatter: scope[str].formatter,
+                tooltipFormatter: scope.formatter,
                 tooltipFormat: '{{value:jobs}}',
                 tooltipValueLookups: {
-                    jobs: scope[str].jobIds,
-                    status: scope[str].smartStatus
+                    jobs: scope.jobIds,
+                    status: scope.smartStatus
                 }
             });
 

awx/ui/static/partials/job-template-smart-status.html

@@ -0,0 +1 @@
+<aw-smart-status jobs="job_template.summary_fields.recent_jobs"></aw-smart-status>