Эх сурвалжийг харах

HUE-4116 [editor] Extracted running coordinator model

Enrico Berti 9 жил өмнө
parent
commit
456a554

+ 206 - 0
apps/oozie/src/oozie/static/oozie/js/list-oozie-coordinator.ko.js

@@ -0,0 +1,206 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+(function (root, factory) {
+  if (typeof define === "function" && define.amd) {
+    define([
+      'knockout',
+      'knockout-mapping',
+      'ko.charts'
+    ], factory);
+  } else {
+    root.RunningCoordinatorModel = factory(ko);
+  }
+}(this, function (ko) {
+
+  var RunningCoordinatorModel = function (actions) {
+    var self = this;
+
+    self.Action = function (action) {
+      return {
+        id: action.id,
+        url: action.url,
+        number: action.number,
+        type: action.type,
+        status: action.status,
+        statusClass: "label " + getStatusClass(action.status),
+        externalId: action.externalId,
+        externalIdUrl: action.externalIdUrl,
+        title: action.title,
+        nominalTime: action.nominalTime,
+        createdTime: action.createdTime,
+        lastModifiedTime: action.lastModifiedTime,
+        errorMessage: action.errorMessage,
+        errorCode: action.errorCode,
+        missingDependencies: action.missingDependencies,
+        selected: ko.observable(false),
+        handleSelect: function (row, e) {
+          e.stopPropagation();
+          this.selected(!this.selected());
+          self.allSelected(false);
+        }
+      };
+    };
+
+    self.isLoading = ko.observable(true);
+
+    self.actions = ko.observableArray(ko.utils.arrayMap(actions), function (action) {
+      return new self.Action(action);
+    });
+
+    self.allSelected = ko.observable(false);
+
+    self.filter = ko.observableArray([]);
+
+    self.searchFilter = ko.observable("");
+
+    self.isRefreshingLogs = ko.observable(false);
+    self.logFilterRecentHours = ko.observable("");
+    self.logFilterRecentMinutes = ko.observable("");
+    self.logFilterRecent = ko.computed(function () {
+      var _h = self.logFilterRecentHours();
+      var _m = self.logFilterRecentMinutes();
+      return (_h != "" ? _h + "h" : "") + (_h != "" && _m != "" ? ":" : "") + (_m != "" ? _m + "m" : "");
+    }).extend({throttle: 500});
+
+    self.logFilterLimit = ko.observable("5000").extend({throttle: 500});
+
+    self.logFilterText = ko.observable("").extend({throttle: 500});
+
+    self.logFilterRecent.subscribe(function () {
+      refreshLogs();
+    });
+
+    self.logFilterLimit.subscribe(function () {
+      refreshLogs();
+    });
+
+    self.logFilterText.subscribe(function () {
+      refreshLogs();
+    });
+
+    self.isLogFilterVisible = ko.observable(false);
+
+    self.toggleLogFilterVisible = function () {
+      self.isLogFilterVisible(!self.isLogFilterVisible());
+    };
+
+    self.select = function (filter) {
+      ko.utils.arrayFilter(self.actions(), function (action) {
+        if (action.status.toLowerCase() === filter) {
+          action.selected(true);
+        }
+      });
+    };
+
+    self.clearAllSelections = function () {
+      ko.utils.arrayFilter(self.actions(), function (action) {
+        action.selected(false);
+      });
+      self.allSelected(false);
+    };
+
+    self.clearSelections = function (filter) {
+      ko.utils.arrayFilter(self.actions(), function (action) {
+        if (action.status.toLowerCase() === filter) {
+          action.selected(false);
+        }
+      });
+      self.allSelected(false);
+    };
+
+    self.selectAll = function () {
+      var regexp;
+
+      if (!Array.isArray(self.filter())) {
+        ko.utils.arrayForEach(self.actions(), function (action) {
+          regexp = new RegExp(self.filter());
+
+          self.allSelected(!self.allSelected());
+
+          if (regexp.test(action.title.toLowerCase())) {
+            action.selected(!action.selected());
+          }
+        });
+        return true;
+      }
+
+      self.allSelected(!self.allSelected());
+
+      ko.utils.arrayForEach(self.actions(), function (action) {
+        if (action.id) {
+          action.selected(self.allSelected());
+        }
+      });
+      return true;
+    };
+
+    self.selectedActions = ko.computed(function () {
+      var actionlist = [];
+
+      ko.utils.arrayFilter(self.actions(), function (action) {
+        if (action.selected()) {
+          actionlist.push(action.number.toString());
+        }
+      });
+      return actionlist;
+    });
+
+    self.searchFilter.subscribe(function () {
+      if (self.searchFilter().length === 0) {
+        self.filter([]);
+      } else {
+        self.filter(self.searchFilter().toLowerCase());
+      }
+
+      if (self.selectedActions().length === self.actions().length) {
+        self.allSelected(true);
+      } else {
+        self.allSelected(false);
+      }
+    });
+
+    self.filteredActions = ko.pureComputed(function () {
+      var filter = self.filter(),
+        actions = [],
+        regexp,
+        data;
+
+      if (self.filter().length === 0) {
+        return self.actions();
+      }
+
+      ko.utils.arrayFilter(self.actions(), function (action) {
+        if ($.inArray(filter.toString(), ['succeeded', 'running', 'failed']) === -1) {
+          regexp = new RegExp(filter);
+          if (regexp.test(action.title.toLowerCase())) {
+            actions.push(action);
+          }
+        }
+      });
+
+      if (Array.isArray(self.filter())) {
+        data = self.actions()
+      } else {
+        data = actions;
+      }
+
+      return data;
+    });
+  };
+
+  return RunningCoordinatorModel;
+}));

+ 2 - 177
apps/oozie/src/oozie/templates/dashboard/list_oozie_coordinator.mako

@@ -498,6 +498,7 @@ ${ layout.menubar(section='coordinators', dashboard=True) }
 <script src="${ static('desktop/js/bootstrap-slider.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/js/ko.hue-bindings.js') }" type="text/javascript" charset="utf-8"></script>
 
+<script src="${ static('oozie/js/list-oozie-coordinator.ko.js') }" type="text/javascript" charset="utf-8"></script>
 
 <script>
 
@@ -505,182 +506,6 @@ ${ layout.menubar(section='coordinators', dashboard=True) }
     $("a[data-row-selector='true']").jHueRowSelector();
   }
 
-  var Action = function (action) {
-    return {
-      id: action.id,
-      url: action.url,
-      number: action.number,
-      type: action.type,
-      status: action.status,
-      statusClass: "label " + getStatusClass(action.status),
-      externalId: action.externalId,
-      externalIdUrl: action.externalIdUrl,
-      title: action.title,
-      nominalTime: action.nominalTime,
-      createdTime: action.createdTime,
-      lastModifiedTime: action.lastModifiedTime,
-      errorMessage: action.errorMessage,
-      errorCode: action.errorCode,
-      missingDependencies: action.missingDependencies,
-      selected: ko.observable(false),
-      handleSelect: function (row, e) {
-        e.stopPropagation();
-        this.selected(! this.selected());
-        viewModel.allSelected(false);
-      }
-    };
-  };
-
-  var RunningCoordinatorModel = function (actions) {
-    var self = this;
-
-    self.isLoading = ko.observable(true);
-
-    self.actions = ko.observableArray(ko.utils.arrayMap(actions), function (action) {
-      return new Action(action);
-    });
-
-    self.allSelected = ko.observable(false);
-
-    self.filter = ko.observableArray([]);
-
-    self.searchFilter = ko.observable("");
-
-    self.isRefreshingLogs = ko.observable(false);
-    self.logFilterRecentHours = ko.observable("");
-    self.logFilterRecentMinutes = ko.observable("");
-    self.logFilterRecent = ko.computed(function () {
-      var _h = self.logFilterRecentHours();
-      var _m = self.logFilterRecentMinutes();
-      return (_h != "" ? _h + "h" : "") + (_h != "" && _m != "" ? ":" : "") +  (_m != "" ? _m + "m" : "");
-    }).extend({ throttle: 500 });
-
-    self.logFilterLimit = ko.observable("5000").extend({ throttle: 500 });
-
-    self.logFilterText = ko.observable("").extend({ throttle: 500 });
-
-    self.logFilterRecent.subscribe(function(){
-      refreshLogs();
-    });
-
-    self.logFilterLimit.subscribe(function(){
-      refreshLogs();
-    });
-
-    self.logFilterText.subscribe(function(){
-      refreshLogs();
-    });
-
-    self.isLogFilterVisible = ko.observable(false);
-
-    self.toggleLogFilterVisible = function () {
-      self.isLogFilterVisible(!self.isLogFilterVisible());
-    };
-
-    self.select = function (filter) {
-      ko.utils.arrayFilter(self.actions(), function (action) {
-        if (action.status.toLowerCase() === filter) {
-          action.selected(true);
-        }
-      });
-    };
-
-    self.clearAllSelections = function () {
-      ko.utils.arrayFilter(self.actions(), function (action) {
-        action.selected(false);
-      });
-      self.allSelected(false);
-    };
-
-    self.clearSelections = function (filter) {
-      ko.utils.arrayFilter(self.actions(), function (action) {
-        if (action.status.toLowerCase() === filter) {
-          action.selected(false);
-        }
-      });
-      self.allSelected(false);
-    };
-
-    self.selectAll = function () {
-      var regexp;
-
-      if (!Array.isArray(self.filter())) {
-        ko.utils.arrayForEach(self.actions(), function (action) {
-          regexp = new RegExp(self.filter());
-
-          self.allSelected(!self.allSelected());
-
-          if (regexp.test(action.title.toLowerCase())) {
-            action.selected(!action.selected());
-          }
-        });
-        return true;
-      }
-
-      self.allSelected(!self.allSelected());
-
-      ko.utils.arrayForEach(self.actions(), function (action) {
-        if (action.id) {
-          action.selected(self.allSelected());
-        }
-      });
-      return true;
-    };
-
-    self.selectedActions = ko.computed(function () {
-      var actionlist = [];
-
-      ko.utils.arrayFilter(self.actions(), function (action) {
-        if (action.selected()) {
-          actionlist.push(action.number.toString());
-        }
-      });
-      return actionlist;
-    });
-
-    self.searchFilter.subscribe(function () {
-      if (self.searchFilter().length === 0) {
-        self.filter([]);
-      } else {
-        self.filter(self.searchFilter().toLowerCase());
-      }
-
-      if (self.selectedActions().length === self.actions().length) {
-        self.allSelected(true);
-      } else {
-        self.allSelected(false);
-      }
-    });
-
-    self.filteredActions = ko.computed(function () {
-      var filter = self.filter(),
-          actions = [],
-          regexp,
-          data;
-
-      if (self.filter().length === 0) {
-        return self.actions();
-      }
-
-      ko.utils.arrayFilter(self.actions(), function (action) {
-        if ($.inArray(filter.toString(), ['succeeded', 'running', 'failed']) === -1) {
-          regexp = new RegExp(filter);
-          if (regexp.test(action.title.toLowerCase())) {
-            actions.push(action);
-          }
-        }
-      });
-
-      if (Array.isArray(self.filter())) {
-        data = self.actions()
-      } else {
-        data = actions;
-      }
-
-      return data;
-    });
-  };
-
   var viewModel = new RunningCoordinatorModel([]);
   ko.applyBindings(viewModel);
 
@@ -987,7 +812,7 @@ ${ layout.menubar(section='coordinators', dashboard=True) }
         if (data != null && data.actions){
           var prevActions = viewModel.actions();
           $(data.actions).each(function (iAction, action) {
-            var actionItem = new Action(action);
+            var actionItem = new viewModel.Action(action);
             $(prevActions).each(function (iPrev, prev) {
               if (prev.id == actionItem.id) {
                 actionItem.selected(prev.selected());

+ 10 - 5
desktop/libs/notebook/src/notebook/static/notebook/js/notebook.ko.js

@@ -21,13 +21,14 @@
       'desktop/js/apiHelper',
       'desktop/js/autocompleter',
       'oozie/js/coordinator-editor.ko',
+      'oozie/js/list-oozie-coordinator.ko',
       'knockout-mapping',
       'ko.charts'
     ], factory);
   } else {
     root.EditorViewModel = factory(ko, ApiHelper, Autocompleter);
   }
-}(this, function (ko, ApiHelper, Autocompleter, CoordinatorEditorViewModel) {
+}(this, function (ko, ApiHelper, Autocompleter, CoordinatorEditorViewModel, RunningCoordinatorModel) {
 
   var NOTEBOOK_MAPPING = {
     ignore: [
@@ -1620,19 +1621,23 @@
     };
 
 
-    self.viewSchedulerId = ko.observable('0000000-160519110441280-oozie-oozi-C');
+    self.viewSchedulerId = ko.observable('0000025-160525025600562-oozie-oozi-C');
+    self.loadingScheduler = ko.observable(false);
     self.viewScheduler = function() {
       logGA('schedule/view');
+      self.loadingScheduler(true);
       $.get("/oozie/list_oozie_coordinator/" + self.viewSchedulerId(), {
         format: 'json'
       }, function (data) {
         $("#schedulerViewer").text(ko.mapping.toJSON(data));
 
-        //var viewModel = new RunningCoordinatorModel(data.actions);
-        //ko.cleanNode($("#schedulerViewer")[0]);
-        //ko.applyBindings(viewModel, $("#schedulerViewer")[0]);
+        // var viewModel = new RunningCoordinatorModel(data.actions);
+        // ko.cleanNode($("#schedulerViewer")[0]);
+        // ko.applyBindings(viewModel, $("#schedulerViewer")[0]);
       }).fail(function (xhr) {
         $(document).trigger("error", xhr.responseText);
+      }).always(function(){
+        self.loadingScheduler(false);
       });
     };
 

+ 7 - 2
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -1049,7 +1049,7 @@ ${ hueIcons.symbols() }
       <!-- ko with: $root.selectedNotebook() -->
         <!-- ko if: $root.selectedNotebook().isSaved() -->
           <a data-bind="click: showSubmitPopup">Submit</a></br>
-          <a href="#scheduledJobsTab" data-toggle="tab">${_('View')}</a>
+          <a class="pointer" data-bind="click: function(){ $('a[href=\'#scheduledJobsTab\']').click(); }">${_('View')}</a>
 
           <div id="schedulerEditor">
           </div>
@@ -1066,8 +1066,13 @@ ${ hueIcons.symbols() }
     <div class="tab-pane" id="scheduledJobsTab">
       <!-- ko if: $root.selectedNotebook() -->
       <!-- ko with: $root.selectedNotebook() -->    
-        <input type="text" data-bind="value: viewSchedulerId, click: viewScheduler"></input>
+        <input type="text" data-bind="value: viewSchedulerId" /> <a class="pointer" data-bind="click: viewScheduler">load</a>
 
+        <!-- ko if: loadingScheduler -->
+        <div style="padding: 20px">
+          <i class="fa fa-spinner fa-spin muted"></i>
+        </div>
+        <!-- /ko -->
         <div id="schedulerViewer">
         </div>
       <!-- /ko -->