Browse Source

HUE-5853 [oozie] Make SLAs page embeddable

Enrico Berti 8 years ago
parent
commit
e62eda1b0d

+ 33 - 6
apps/jobbrowser/src/jobbrowser/templates/job_browser.mako

@@ -126,8 +126,8 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
           <div class="content-panel-inner">
 
             <div data-bind="template: { name: 'breadcrumbs' }"></div>
-
-            <!-- ko if: ! $root.job() -->
+            <!-- ko if: interface() !== 'slas' -->
+            <!-- ko if: !$root.job() -->
             ${_('Filter')} <input type="text" class="input-xlarge search-query" data-bind="textInput: jobs.textFilter" placeholder="${_('Filter by id, name, user...')}" />
             <div class="btn-group">
               <select data-bind="options: jobs.statesValuesFilter, selectedOptions: jobs.statesFilter, optionsText: 'name', optionsValue: 'value'" size="3" multiple="true"></select>
@@ -212,6 +212,12 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
           <!-- /ko -->
 
           <div data-bind="template: { name: 'pagination', data: $root.jobs }, visible: ! $root.job()"></div>
+          <!-- /ko -->
+
+          <!-- ko if: interface() === 'slas' -->
+            <!-- ko hueSpinner: { spin: !slasLoaded(), center: true, size: 'xlarge' } --><!-- /ko -->
+            <div id="slas"></div>
+          <!-- /ko -->
         </div>
       </div>
 
@@ -304,7 +310,6 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
   <!-- /ko -->
 </script>
 
-
 <script type="text/html" id="job-page">
   <!-- ko if: type() == 'MAPREDUCE' -->
     <div data-bind="template: { name: 'job-mapreduce-page', data: $root.job() }"></div>
@@ -861,7 +866,6 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
 </script>
 
 
-
 <script type="text/javascript">
 
   (function () {
@@ -1334,13 +1338,35 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
       self.isLeftPanelVisible = ko.observable();
       self.apiHelper.withTotalStorage('assist', 'assist_panel_visible', self.isLeftPanelVisible, true);
 
+      self.slasLoaded = ko.observable(false);
+      self.loadSlaPage = function(){
+        if (!self.slasLoaded()) {
+          $.ajax({
+            url: '/oozie/list_oozie_sla/?is_embeddable=true',
+            beforeSend: function (xhr) {
+              xhr.setRequestHeader('X-Requested-With', 'Hue');
+            },
+            dataType: 'html',
+            success: function (response) {
+              self.slasLoaded(true);
+              $('#slas').html(response);
+            }
+          });
+        }
+      }
+
       self.interface = ko.observable('jobs');
       self.selectInterface = function(interface) {
         self.interface(interface);
         self.resetBreadcrumbs();
         hueUtils.changeURL('#!' + interface);
-        self.jobs.fetchJobs();
-        self.job(null);
+        if (interface === 'slas'){
+          self.loadSlaPage();
+        }
+        else {
+          self.jobs.fetchJobs();
+          self.job(null);
+        }
       };
 
       self.jobs = new Jobs(self);
@@ -1398,6 +1424,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
           switch (h) {
             case '':
               break;
+            case 'slas':
             case 'jobs':
             case 'workflows':
             case 'schedules':

+ 61 - 58
apps/oozie/src/oozie/templates/dashboard/list_oozie_sla.mako

@@ -22,8 +22,11 @@
 <%namespace name="layout" file="../navigation-bar.mako" />
 <%namespace name="utils" file="../utils.inc.mako" />
 
+%if not is_embeddable:
 ${ commonheader(_("SLA"), "sla", user, request) | n,unicode }
 ${ layout.menubar(section='sla', dashboard=True) }
+%endif
+
 
 <style type="text/css">
   .label-with-margin {
@@ -55,7 +58,7 @@ ${ layout.menubar(section='sla', dashboard=True) }
 
 </style>
 
-<div class="container-fluid">
+<div id="oozie_slaComponents" class="container-fluid">
   <div class="card card-small">
     % if show_slas_hint:
       <div class="card-body">
@@ -168,46 +171,6 @@ ${ layout.menubar(section='sla', dashboard=True) }
 
 <script type="text/javascript">
 
-  function performSearch(id) {
-    if ((id != null || $("input[name='job_name']").val().trim()) != "" && slaTable) {
-      window.location.hash = (id != null ? id : $("input[name='job_name']").val().trim());
-      $(".results").addClass("hide");
-      $(".loader").removeClass("hide");
-      $(".search-something").addClass("hide");
-      var IN_DATETIME_FORMAT = "MM/DD/YYYY hh:mm A";
-      var OUT_DATETIME_FORMAT = "YYYY-MM-DD[T]HH:mm[Z]";
-      var _postObj = {
-        "job_name": id != null ? id : $("input[name='job_name']").val()
-      };
-
-      if (window.viewModel.useDates()) {
-        _postObj.useDates = true;
-      }
-      if ($("input[name='start_0']").val() != "" && $("input[name='start_1']").val() != "") {
-        _postObj.start = moment($("input[name='start_0']").val() + " " + $("input[name='start_1']").val(), IN_DATETIME_FORMAT).format(OUT_DATETIME_FORMAT);
-      }
-      if ($("input[name='end_0']").val() != "" && $("input[name='end_1']").val() != "") {
-        _postObj.end = moment($("input[name='end_0']").val() + " " + $("input[name='end_1']").val(), IN_DATETIME_FORMAT).format(OUT_DATETIME_FORMAT)
-      }
-
-      $.post("${ url('oozie:list_oozie_sla') }?format=json", _postObj, function (data) {
-        $(".loader").addClass("hide");
-        slaTable.fnClearTable();
-        if (data['oozie_slas'] && data['oozie_slas'].length > 0) {
-          $(".no-results").addClass("hide");
-          $(".results").removeClass("hide");
-          for (var i = 0; i < data['oozie_slas'].length; i++) {
-            slaTable.fnAddData(getSLArow(data['oozie_slas'][i]));
-          }
-        }
-        else {
-          $(".results").addClass("hide");
-          $(".no-results").removeClass("hide");
-        }
-      });
-    }
-  }
-
   var CHART_LABELS = {
     NOMINAL_TIME: "${_('Nominal Time')}",
     EXPECTED_START: "${_('Expected Start')}",
@@ -217,27 +180,65 @@ ${ layout.menubar(section='sla', dashboard=True) }
     TOOLTIP_ADDON: "${_('click for more details')}"
   }
 
-  var slaTable;
+  var slaTable, slaVM;
 
   $(document).ready(function () {
     var ViewModel = function () {
       var self = this;
-
       self.useDates = ko.observable(false);
+      self.performSearch = function(id) {
+        if ((id != null || $("input[name='job_name']").val().trim()) != "" && slaTable) {
+          hueUtils.changeURLParameter('id', (id != null ? id : $("input[name='job_name']").val().trim()))
+          $(".results").addClass("hide");
+          $(".loader").removeClass("hide");
+          $(".search-something").addClass("hide");
+          var IN_DATETIME_FORMAT = "MM/DD/YYYY hh:mm A";
+          var OUT_DATETIME_FORMAT = "YYYY-MM-DD[T]HH:mm[Z]";
+          var _postObj = {
+            "job_name": id != null ? id : $("input[name='job_name']").val()
+          };
+
+          if (self.useDates()) {
+            _postObj.useDates = true;
+          }
+          if ($("input[name='start_0']").val() != "" && $("input[name='start_1']").val() != "") {
+            _postObj.start = moment($("input[name='start_0']").val() + " " + $("input[name='start_1']").val(), IN_DATETIME_FORMAT).format(OUT_DATETIME_FORMAT);
+          }
+          if ($("input[name='end_0']").val() != "" && $("input[name='end_1']").val() != "") {
+            _postObj.end = moment($("input[name='end_0']").val() + " " + $("input[name='end_1']").val(), IN_DATETIME_FORMAT).format(OUT_DATETIME_FORMAT)
+          }
+
+          $.post("${ url('oozie:list_oozie_sla') }?format=json", _postObj, function (data) {
+            $(".loader").addClass("hide");
+            slaTable.fnClearTable();
+            if (data['oozie_slas'] && data['oozie_slas'].length > 0) {
+              $(".no-results").addClass("hide");
+              $(".results").removeClass("hide");
+              for (var i = 0; i < data['oozie_slas'].length; i++) {
+                slaTable.fnAddData(getSLArow(data['oozie_slas'][i]));
+              }
+            }
+            else {
+              $(".results").addClass("hide");
+              $(".no-results").removeClass("hide");
+            }
+          });
+        }
+      }
     };
 
-    window.viewModel = new ViewModel([]);
-    ko.applyBindings(window.viewModel);
+    slaVM = new ViewModel([]);
+    ko.applyBindings(slaVM, $('#oozie_slaComponents')[0]);
 
 
     $("a[data-row-selector='true']").jHueRowSelector();
 
     $("*[rel=tooltip]").tooltip();
 
-    $("input[name='start_0']").val(moment().subtract('days', 7).format("MM/DD/YYYY"));
-    $("input[name='start_1']").val(moment().subtract('days', 7).format("hh:mm A"));
-    $("input[name='end_0']").val(moment().add('days', 1).format("MM/DD/YYYY"));
-    $("input[name='end_1']").val(moment().add('days', 1).format("hh:mm A"));
+    $("input[name='start_0']").val(moment().subtract(7, 'days').format("MM/DD/YYYY"));
+    $("input[name='start_1']").val(moment().subtract(7, 'days').format("hh:mm A"));
+    $("input[name='end_0']").val(moment().add(1, 'days').format("MM/DD/YYYY"));
+    $("input[name='end_1']").val(moment().add(1, 'days').format("hh:mm A"));
 
 
     $.getJSON("${url('oozie:list_oozie_workflows')}?format=json&justsla=true", function (data) {
@@ -248,7 +249,7 @@ ${ layout.menubar(section='sla', dashboard=True) }
       $("input[name='job_name']").typeahead({
         source: _autocomplete,
         updater: function (item) {
-          performSearch(item);
+          slaVM.performSearch(item);
           return item;
         }
       });
@@ -256,7 +257,7 @@ ${ layout.menubar(section='sla', dashboard=True) }
 
     $("input[name='job_name']").on("keydown", function (e) {
       if (e.keyCode == 13) {
-        performSearch();
+        slaVM.performSearch();
       }
     });
 
@@ -288,9 +289,9 @@ ${ layout.menubar(section='sla', dashboard=True) }
       }
     });
 
-    if (window.location.hash != "") {
-      $("input[name='job_name']").val(window.location.hash.substr(1).replace(/(<([^>]+)>)/ig, ""));
-      performSearch(window.location.hash.substr(1));
+    if (window.location.getParameter('id') !== '') {
+      $("input[name='job_name']").val(window.location.getParameter('id').replace(/(<([^>]+)>)/ig, ""));
+      slaVM.performSearch();
     }
   });
 </script>
@@ -300,26 +301,28 @@ ${ utils.decorate_datetime_fields() }
 <script type="text/javascript">
   $(document).ready(function () {
     $("input[name='start_0']").parent().datepicker().on("changeDate", function () {
-      performSearch();
+      slaVM.performSearch();
     });
 
     $("input[name='end_0']").parent().datepicker().on("changeDate", function () {
-      performSearch();
+      slaVM.performSearch();
     });
     $("input[name='start_1']").on("change", function (e) {
       // the timepicker plugin doesn't have a change event handler
       // so we need to wait a bit to handle in with the default field event
       window.setTimeout(function () {
-        performSearch();
+        slaVM.performSearch();
       }, 200);
     });
 
     $("input[name='end_1']").on("change", function () {
       window.setTimeout(function () {
-        performSearch();
+        slaVM.performSearch();
       }, 200);
     });
   });
 </script>
 
+%if not is_embeddable:
 ${ commonfooter(request, messages) | n,unicode }
+%endif

+ 2 - 1
apps/oozie/src/oozie/views/dashboard.py

@@ -655,7 +655,8 @@ def list_oozie_sla(request):
 
   return render('dashboard/list_oozie_sla.mako', request, {
     'oozie_slas': oozie_slas,
-    'show_slas_hint': show_slas_hint
+    'show_slas_hint': show_slas_hint,
+    'is_embeddable': request.GET.get('is_embeddable', False),
   })
 
 

+ 3 - 0
desktop/core/src/desktop/static/desktop/js/hue.utils.js

@@ -196,6 +196,9 @@ if (!('addRule' in CSSStyleSheet.prototype)) {
   }
 
   hueUtils.changeURL = function (newURL) {
+    if (window.location.hash !== '' && newURL.indexOf('#') === -1){
+      newURL = newURL + window.location.hash;
+    }
     window.history.pushState(null, null, newURL);
   }