Răsfoiți Sursa

HUE-1898 [oozie] SLA graph easier to understand or manipulate

Fixed X axis label color and added click handler
Added padding to Y axis
Enrico Berti 11 ani în urmă
părinte
comite
5b15f0f

+ 4 - 8
apps/oozie/src/oozie/templates/dashboard/list_oozie_coordinator.mako

@@ -283,8 +283,8 @@ ${ layout.menubar(section='coordinators', dashboard=True) }
       </div>
 
       % if oozie_coordinator.has_sla:
-      <div class="tab-pane" id="sla">
-        <div id="yAxisLabel" class="hide">${_('Time since Nominal Time')}</div>
+      <div class="tab-pane" id="sla" style="padding-left: 20px">
+        <div id="yAxisLabel" class="hide">${_('Time since Nominal Time in min')}</div>
         <div id="slaChart"></div>
         <table id="slaTable" class="table table-striped table-condensed hide">
           <thead>
@@ -372,8 +372,8 @@ ${ layout.menubar(section='coordinators', dashboard=True) }
     -moz-transform: rotate(270deg);
     -o-transform: rotate(270deg);
     writing-mode: lr-tb;
-    margin-left: -82px;
-    margin-top: 120px;
+    margin-left: -110px;
+    margin-top: 130px;
     position: absolute;
   }
 
@@ -452,10 +452,6 @@ ${ layout.menubar(section='coordinators', dashboard=True) }
       }
     });
 
-    $(".slaStatus").each(function () {
-      $(this).html(getSLAStatusLabel($(this).text()));
-    });
-
     $(".dataTables_wrapper").css("min-height", "0");
     $(".dataTables_filter").hide();
     % endif

+ 4 - 4
apps/oozie/src/oozie/templates/dashboard/list_oozie_sla.mako

@@ -48,8 +48,8 @@ ${ layout.menubar(section='sla', dashboard=True) }
     -moz-transform: rotate(270deg);
     -o-transform: rotate(270deg);
     writing-mode: lr-tb;
-    margin-left: -82px;
-    margin-top: 120px;
+    margin-left: -110px;
+    margin-top: 130px;
     position: absolute;
   }
 
@@ -140,8 +140,8 @@ ${ layout.menubar(section='sla', dashboard=True) }
 
             </div>
 
-            <div class="tab-pane" id="chartTab">
-              <div id="yAxisLabel" class="hide">${_('Time since Nominal Time')}</div>
+            <div class="tab-pane" id="chartTab" style="padding-left: 20px">
+              <div id="yAxisLabel" class="hide">${_('Time since Nominal Time in min')}</div>
               <div id="slaChart"></div>
             </div>
           </div>

+ 4 - 8
apps/oozie/src/oozie/templates/dashboard/list_oozie_workflow.mako

@@ -287,8 +287,8 @@ ${ layout.menubar(section='workflows', dashboard=True) }
         </div>
 
         % if oozie_workflow.has_sla:
-        <div class="tab-pane" id="sla">
-          <div id="yAxisLabel" class="hide">${_('Time since Nominal Time')}</div>
+        <div class="tab-pane" id="sla" style="padding-left: 20px">
+          <div id="yAxisLabel" class="hide">${_('Time since Nominal Time in min')}</div>
           <div id="slaChart"></div>
           <table id="slaTable" class="table table-striped table-condensed hide">
             <thead>
@@ -377,8 +377,8 @@ ${ layout.menubar(section='workflows', dashboard=True) }
     -moz-transform: rotate(270deg);
     -o-transform: rotate(270deg);
     writing-mode: lr-tb;
-    margin-left: -82px;
-    margin-top: 120px;
+    margin-left: -110px;
+    margin-top: 130px;
     position: absolute;
   }
 
@@ -470,10 +470,6 @@ ${ layout.menubar(section='workflows', dashboard=True) }
       }
     });
 
-    $(".slaStatus").each(function () {
-      $(this).html(getSLAStatusLabel($(this).text()));
-    });
-
     $(".dataTables_wrapper").css("min-height", "0");
     $(".dataTables_filter").hide();
     % endif

+ 22 - 2
apps/oozie/static/js/sla.utils.js

@@ -25,7 +25,19 @@ function getSLAStatusLabel(status) {
   else {
     klass = "label-important";
   }
-  return '<span class="label ' + klass + '">' + status + '</span>'
+  return '<span class="slaStatus label ' + klass + '">' + status + '</span>'
+}
+
+function getXAxisColor(status) {
+  if (['MET'].indexOf(status.toUpperCase()) > -1) {
+    return $.jHueBlueprint.COLORS.GREEN;
+  }
+  else if (['NOT_STARTED', 'IN_PROCESS'].indexOf(status.toUpperCase()) > -1) {
+    return $.jHueBlueprint.COLORS.ORANGE;
+  }
+  else {
+    return $.jHueBlueprint.COLORS.RED;
+  }
 }
 
 function getSLArow(row) {
@@ -75,7 +87,7 @@ function updateSLAChart(slaTable, labels, limit) {
         type: $.jHueBlueprint.TYPES.POINTCHART,
         color: color,
         isDateTime: true,
-        timeFormat: "<span style='color:" + ($(rows[i]).find("td:eq(4)").text().toUpperCase() == "MET" ? $.jHueBlueprint.COLORS.GREEN : $.jHueBlueprint.COLORS.RED) + "'>%Y-%m-%d %H:%M:%S</span>",
+        timeFormat: "<span data-link='"+ $(rows[i]).find("a").attr("href") +"' style='color:" + getXAxisColor($(rows[i]).find(".slaStatus").text()) + "'>%Y-%m-%d %H:%M:%S</span>",
         fill: false,
         height: 300,
         tooltipAddon: labels.TOOLTIP_ADDON,
@@ -83,6 +95,13 @@ function updateSLAChart(slaTable, labels, limit) {
           return msToTime(val);
         },
         onItemClick: function (pos, item) {
+          if (!item) { // detect if it's a label click
+            $(".flot-x-axis .tickLabel").each(function(cnt, label){
+              if (pos.pageX >= $(label).offset().left && pos.pageX <= $(label).offset().left + $(label).width() && pos.pageY >= $(label).offset().top && pos.pageY <= $(label).offset().top + $(label).height()){
+                location.href = $(label).find("span").data("link");
+              }
+            });
+          }
           if (item && $(slaTable.fnGetNodes()[item.dataIndex]).find("a").length > 0) {
             location.href = $(slaTable.fnGetNodes()[item.dataIndex]).find("a").attr("href");
           }
@@ -109,5 +128,6 @@ function updateSLAChart(slaTable, labels, limit) {
       $("#slaChart").jHueBlueprint("add", getOptions($(rows[i]).find("span.actualEnd").html(), (i == 0 ? labels.ACTUAL_END : null), $.jHueBlueprint.COLORS.TURQUOISE));
     }
     $("#yAxisLabel").removeClass("hide");
+
   }
 }