smart status sparkline tooltips

awx/ui/static/js/controllers/Jobs.js

@@ -234,7 +234,7 @@ export function JobsListController ($rootScope, $log, $scope, $compile, $routePa
             page_row = Math.max($('.page-row:eq(0)').outerHeight(), 33);
             header = Math.max($('#completed_jobs_table thead').height(), 24);
             height = Math.floor(available_height / 2) - header - page_row - search_row - 30;
-            row_height = (docw < 1350) ? 47 : 27;
+            row_height = (docw < 1350) ? 47 : 44; //27; // JET march 6: changing this from 27 to 44 due to new icon font sizes/increased row height. 
             max_rows = Math.floor(height / row_height);
             max_rows = (max_rows < 5) ? 5 : max_rows;
         }

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

@@ -29,15 +29,7 @@ export default
               searchable: false,
               nosort: true,
               ngClick: "null",
-              iconOnly: true,
-              excludeModal: true,
-              smartStatus: [{
-                  icon: "{{ 'icon-cloud-' + inventory.syncStatus }}",
-                  awToolTip: "{{ inventory.syncTip }}",
-                  awTipPlacement: "top",
-                  ngClick: "showGroupSummary($event, inventory.id)",
-                  ngClass: "inventory.launch_class"
-              }]
+              smartStatus: true
             },
             name: {
                 key: true,

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

@@ -4,7 +4,8 @@ export default ['$scope', function ($scope) {
     recentJobs = $scope.job_template.summary_fields.recent_jobs;
     $scope[str] = {
         id: $scope.job_template.id,
-        sparkArray: []
+        sparkArray: [],
+        jobIds: {}
     };
     for(var i=0; i<recentJobs.length; i++){
         if(recentJobs[i].status==='successful'){
@@ -16,6 +17,7 @@ export default ['$scope', function ($scope) {
         if(recentJobs[i].status==='queued'){
             $scope[str].sparkArray[i] = 0;
         }
+        $scope[str].jobIds[i] = recentJobs[i].id;
     }
 }];
 

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

@@ -4,24 +4,27 @@ export default [ function() {
         restrict: 'E',
         link: function (scope){ //}, element ){ //}, attr) {
             var str = scope.job_template.id+'_spark';
-            // formatter: function(sparklines, options, point, recentJobs){
-            //   if(point.x <= options.mergedOptions.CurrentTimeGroup)
-            //     return "<div class=\"\"><span style=\"color: " + point.color + "\">&#9679;</span>" + options.get("tooltipValueLookups").names[point.x] + " - " + point.y + options.get("tooltipSuffix") + "</div>";
-            //   else
-            //     return "<div class=\"\"><span style=\"color: " + point.color + "\">&#9679;</span>" + options.get("tooltipValueLookups").names[point.x] + "</div>";
-            // };
+            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>";
+            };
 
             $('aw-smart-status:eq('+scope.$index+')').sparkline(scope[str].sparkArray, {
                 type: 'tristate',
-                // tooltipFormatter: scope[str].formatter,
-                tooltipFormat: '{{value:levels}}',
+                width: '4em',
+                height: '2em',
+                barWidth: 5,
+                barSpacing: 2,
+                tooltipFormatter: scope[str].formatter,
+                tooltipFormat: '{{value:jobs}}',
                 tooltipValueLookups: {
-                    levels: $.range_map({
-                        '1': 'Success',
-                        '-1': 'Failed',
-                        '0' : 'Queued'
-                        // '7:': 'High'
-                    })
+                    jobs: scope[str].jobIds
+                    // $.range_map({
+                    //     '1': 'Success',
+                    //     '-1': 'Failed',
+                    //     '0' : 'Queued'
+                    //     // '7:': 'High'
+                    // })
                 }
             });
         },

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

@@ -172,8 +172,7 @@ a:focus {
 /* List Actions column */
 .actions {
   a {
-    font-size: 14px;
-    margin-right: 12px;
+    font-size: 18px;
   }
   a:last-child {
     margin-right: 0;
@@ -186,6 +185,13 @@ a:focus {
   }
 }
 
+.smart-status-tooltip{
+    font-size: 20px;
+    span {
+      padding: 20px;
+    }
+}
+
 #configure-schedules-tab {
     position: relative;
     top: 0;
@@ -1032,8 +1038,20 @@ input[type="checkbox"].checkbox-no-label {
 /* Less padding on .table-condensed */
 .table-condensed>tbody>tr>td,
 .table-condensed>thead>tr>th {
-    padding-top: 3px;
-    padding-bottom: 3px;
+    // padding-top: 3px;
+    // padding-bottom: 3px
+    padding: 0.5em 0.6em;
+}
+
+.table > tbody > tr > td{
+  padding: 0.5em 0.6em;
+  &.actions{
+    padding: 0px;
+    > a {
+      padding: 0.5em 0.6em;
+      display: inline-block;
+    }
+  }
 }
 
 /* Table info rows */
@@ -1862,6 +1880,7 @@ tr td button i {
 }
 
 
+
 /* Landscape phone to portrait tablet */
 
 @media (max-width: 767px) {