adding click event for spark lines

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

@@ -1,20 +1,24 @@
 import smartStatusController from 'tower/smart-status/smart-status.controller.js';
-export default [ function() {
+export default [ '$location', function($location) {
     return {
         restrict: 'E',
-        link: function (scope){ //}, element ){ //}, attr) {
+        link: function (scope){
             var str = scope.job_template.id+'_spark';
             scope[str].formatter = function(sparklines, options, point){
                 return "<div class=\"smart-status-tooltip\"><span style=\"color: " + point.color + "\">&#9679;</span>" +
-                  options.userOptions.tooltipValueLookups.jobs[point.offset] + "</div>";
+                  "Job id: " +
+                  options.userOptions.tooltipValueLookups.jobs[point.offset] + "</div>" ;
             };
 
             $('aw-smart-status:eq('+scope.$index+')').sparkline(scope[str].sparkArray, {
                 type: 'tristate',
                 width: '4em',
                 height: '2em',
-                barWidth: 5,
+                barWidth: 7,
                 barSpacing: 2,
+                zeroBarColor: 'grey',
+                posBarColor: '#00aa00', //@green on ansible-ui
+                negBarColor: '#aa0000', //@red
                 tooltipFormatter: scope[str].formatter,
                 tooltipFormat: '{{value:jobs}}',
                 tooltipValueLookups: {
@@ -27,8 +31,16 @@ export default [ function() {
                     // })
                 }
             });
+
+            $('aw-smart-status:eq('+scope.$index+')').bind('sparklineClick', function(ev) {
+                var sparkline = ev.sparklines[0],
+                    job = sparkline.getCurrentRegionFields(),
+                    id;
+                id = sparkline.options.userOptions.tooltipValueLookups.jobs[job.offset];
+                location.href = '/#/jobs/' + id;
+            });
+
         },
-        // templateUrl: 'static/js/smart-status/smart-status.partial.html',
         controller: smartStatusController
     };
 }];

awx/ui/static/less/ansible-ui.less

@@ -186,9 +186,10 @@ a:focus {
 }
 
 .smart-status-tooltip{
-    font-size: 20px;
+    font-size: 14px;
+    background-color: black; 
     span {
-      padding: 20px;
+      padding: 14px;
     }
 }