Jelajahi Sumber

HUE-3294 [oozie] Converted to documentChooser binding

Enrico Berti 9 tahun lalu
induk
melakukan
e60903f079

+ 9 - 11
apps/oozie/src/oozie/static/oozie/js/workflow-editor.ko.js

@@ -84,17 +84,13 @@ var Node = function (node, vm) {
   self.properties = ko.mapping.fromJS(typeof node.properties != "undefined" && node.properties != null ? node.properties : {});
   self.children = ko.mapping.fromJS(typeof node.children != "undefined" && node.children != null ? node.children : []);
 
+  self.associatedDocumentLoading = ko.observable(true);
   self.associatedDocument = ko.observable();
 
-  if (node.properties.uuid){
-    vm.documentChooser.setAssociatedDocument(node.properties.uuid, self.associatedDocument);
-  }
-
-  if (self.properties.uuid){
-    self.properties.uuid.subscribe(function(val){
-      vm.documentChooser.setAssociatedDocument(val, self.associatedDocument);
-    });
-  }
+  self.associatedDocumentUuid = ko.observable(typeof node.properties.uuid != "undefined" && node.properties.uuid != null ? node.properties.uuid : null);
+  self.associatedDocumentUuid.subscribe(function(val){
+    self.properties.uuid(val);
+  });
 
   self.actionParameters = ko.observableArray([]);
   self.actionParametersUI = ko.computed(function () {
@@ -197,7 +193,9 @@ var Workflow = function (vm, workflow) {
 
   self.tracker = new ChangeTracker(self, ko, {
     ignore: [
-      "associatedDocument"
+      "associatedDocument",
+      "associatedDocumentUuid",
+      "associatedDocumentLoading"
     ]
   }); // from ko.common-dashboard.js
 
@@ -522,7 +520,7 @@ var WorkflowEditorViewModel = function (layout_json, workflow_json, credentials_
     self.workflow.loadNodes(workflow_json);
   };
 
-  self.documentChooser = new DocumentChooser();
+  self.tempDocument = ko.observable();
 
   self.addActionProperties = ko.observableArray([]);
   self.addActionPropertiesFilledOut = ko.computed(function () {

+ 10 - 19
apps/oozie/src/oozie/templates/editor2/common_workflow.mako

@@ -30,7 +30,8 @@
 
 
 <%def name="render()">
-<script src="${ static('desktop/js/document/documentChooser.js') }"></script>
+<link rel="stylesheet" href="${ static('desktop/ext/css/selectize.css') }">
+<script src="${ static('desktop/ext/js/selectize.min.js') }"></script>
 
 <script type="text/html" id="doc-search-autocomp-item">
   <a>
@@ -618,8 +619,11 @@
 <script type="text/html" id="common-document-widget">
   <div data-bind="visible: ! $root.isEditing()">
       <span data-bind="template: { name: 'logs-icon' }"></span>
+      <!-- ko if: associatedDocumentLoading -->
+        <i class="fa fa-spinner fa-spin muted"></i>
+      <!-- /ko -->
       <!-- ko with: associatedDocument -->
-        <a data-bind="attr: { href: absoluteUrl() }" target="_blank"><span data-bind='text: name'></span></a>
+        <a data-bind="attr: { href: absoluteUrl }" target="_blank"><span data-bind='text: name'></span></a>
         <br/>
         <span data-bind='text: description' class="muted"></span>
       <!-- /ko -->
@@ -627,24 +631,11 @@
 
     <div data-bind="visible: $root.isEditing">
       <div data-bind="visible: ! $parent.ooziePropertiesExpanded()" class="nowrap">
+        <div class="selectize-wrapper" style="width: 300px;">
+          <select placeholder="${ _('Search your documents...') }" data-bind="documentChooser: { loading: associatedDocumentLoading, value: associatedDocumentUuid, document: associatedDocument }"></select>
+        </div>
         <!-- ko if: associatedDocument -->
-          <div class="select-like">
-          <input placeholder="${ _('Search your documents...') }" type="text" data-bind="autocomplete: {
-              source: $root.documentChooser.documentsAutocompleteSource,
-              showOnFocus: true,
-              blurOnEnter: true,
-              type: associatedDocument().type,
-              create: function (event, ui) { this.value = ko.dataFor(event.target).associatedDocument().name(); return false;},
-              select: function (event, ui) { ko.dataFor(event.target).properties.uuid(ui.item.value); this.value = ui.item.label; return false;},
-              focus: function (event, ui) { this.value = ui.item.label; return false;},
-              change: function (event, ui) { this.value = ko.dataFor(event.target).associatedDocument().name(); return false;},
-              itemTemplate: 'doc-search-autocomp-item'
-            }, valueUpdate: 'afterkeydown'">
-            <span class="inactive-action">
-              <i class="fa fa-sort"></i>
-            </span>
-          </div>
-          <a href="#" data-bind="attr: { href: associatedDocument().absoluteUrl() }" target="_blank" title="${ _('Open') }">
+          <a href="#" data-bind="attr: { href: associatedDocument().absoluteUrl }" target="_blank" title="${ _('Open') }">
             <i class="fa fa-external-link-square"></i>
           </a>
           <div data-bind='text: associatedDocument().description' style="padding: 3px; margin-top: 2px" class="muted"></div>

+ 5 - 20
apps/oozie/src/oozie/templates/editor2/workflow_editor.mako

@@ -334,30 +334,15 @@ ${ workflow.render() }
           <select data-bind="options: $root.subworkflows, optionsText: 'name', optionsValue: 'value', value: value"></select>
           <!-- /ko -->
           <!-- ko if: ['hive', 'java', 'spark', 'pig', 'sqoop', 'distcp-doc', 'shell-doc', 'mapreduce-doc'].indexOf(type()) != -1 -->
-          <div class="select-like">
-            <input placeholder="${ _('Search your documents...') }" type="text" data-bind="autocomplete: {
-              source: $root.documentChooser.documentsAutocompleteSource,
-              minLength: 0,
-              showOnFocus: true,
-              blurOnEnter: true,
-              type: type,
-              select: function (event, ui) { ko.dataFor(event.target).value(ui.item.value); this.value = ui.item.label; $(event.target).data('prevLabel', ui.item.label); return false;},
-              focus: function (event, ui) { this.value = ui.item.label; return false;},
-              change: function (event, ui) { if(!ui.item){ ko.dataFor(event.target).value() != '' ? this.value = $(event.target).data('prevLabel') : this.value = ''; }},
-              itemTemplate: 'doc-search-autocomp-item'
-            }, valueUpdate: 'afterkeydown'">
-              <span class="inactive-action">
-                <i class="fa fa-sort"></i>
-              </span>
-          </div>
-          <!-- ko if: $root.documentChooser.getDocumentById(type(), value()) -->
-            <!-- ko with: $root.documentChooser.getDocumentById(type(), value()) -->
-              <a href="#" data-bind="attr: { href: $data.absoluteUrl() }" target="_blank" title="${ _('Open') }">
+            <div class="selectize-wrapper" style="width: 300px;">
+              <select placeholder="${ _('Search your documents...') }" data-bind="documentChooser: { value: value, document: $root.tempDocument, type: type }"></select>
+            </div>
+            <!-- ko if: $root.tempDocument -->
+              <a href="#" data-bind="attr: { href: $root.tempDocument().absoluteUrl }" target="_blank" title="${ _('Open') }">
                 <i class="fa fa-external-link-square"></i>
               </a>
             <!-- /ko -->
           <!-- /ko -->
-          <!-- /ko -->
 
           <!-- ko if: type() == 'distcp' -->
           <ul class="unstyled">

+ 1 - 1
desktop/core/src/desktop/models.py

@@ -909,7 +909,7 @@ class Document2QueryMixin(object):
       documents = documents.filter(type__in=types)
 
     if search_text:
-      documents = documents.filter(Q(name__icontains=search_text) | Q(description__icontains=search_text) |
+      documents = documents.filter(Q(uuid__icontains=search_text) | Q(name__icontains=search_text) | Q(description__icontains=search_text) |
                                    Q(search__icontains=search_text))
 
     if order_by:  # TODO: Validate that order_by is a valid sort parameter

+ 15 - 0
desktop/core/src/desktop/static/desktop/css/hue3.css

@@ -3302,4 +3302,19 @@ input[type='password']::-ms-reveal {
 
 .search-container > a > i {
   margin-left: 8px;
+}
+
+.selectize-wrapper {
+  display: inline-block;
+  float:left;
+  margin-right: 4px;
+}
+
+.selectize-input {
+  padding-top: 6px !important;
+  padding-bottom: 5px !important;
+}
+
+.selectize-dropdown {
+  z-index: 10000!important;
 }

+ 0 - 90
desktop/core/src/desktop/static/desktop/js/document/documentChooser.js

@@ -1,90 +0,0 @@
-// 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.
-
-var DocumentChooser = (function () {
-
-  function DocumentChooser (options) {
-    var self = this;
-
-    self.documentStore = {};
-    self.documentsAutocompleteSource = function (request, callback) {
-      var TYPE_MAP = {
-        'hive': 'query-hive',
-        'impala': 'query-impala',
-        'java': 'query-java',
-        'spark': 'query-spark2',
-        'pig': 'query-pig',
-        'sqoop': 'query-sqoop1',
-        'distcp-doc': 'query-distcp',
-        'mapreduce-doc': 'query-mapreduce'
-      }
-      var type = 'query-hive';
-      if (this.options && typeof this.options.type === 'function') {
-        type = TYPE_MAP[this.options.type()] ? TYPE_MAP[this.options.type()] : this.options.type();
-      }
-      // Todo: multi types
-
-      $.get('/desktop/api2/docs/', {
-        type: type,
-        text: request.term,
-        include_trashed: false,
-        limit: 100
-      }, function (data) {
-        if (data && data.documents) {
-          var docs = [];
-          if (data.documents.length > 0) {
-            $.each(data.documents, function (index, doc) {
-              docs.push({
-                data: {name: doc.name, type: doc.type, description: doc.description},
-                value: doc.uuid,
-                label: doc.name
-              });
-              self.documentStore[doc.uuid] = ko.mapping.fromJS(doc);
-            });
-          } else {
-            docs.push({
-              data: {name: 'No matches found', description: ''},
-              label: 'No matches found',
-              value: ''
-            });
-          }
-          callback(docs);
-        }
-      });
-    };
-    
-    self.getDocumentById = function (type, uuid) {
-      return self.documentStore[uuid];
-    };
-    
-    self.setAssociatedDocument = function (uuid, associatedDocument) {
-      if (self.documentStore[uuid]){
-        associatedDocument(self.documentStore[uuid]);
-      }
-
-      $.get('/desktop/api2/doc/', {
-        uuid: uuid
-      }, function(data){
-        if (data && data.document){
-          associatedDocument(ko.mapping.fromJS(data.document));
-          self.documentStore[uuid] = associatedDocument();
-        }
-      });
-    }
-  }
-
-  return DocumentChooser;
-})();

+ 21 - 1
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -4795,6 +4795,21 @@
   ko.bindingHandlers.documentChooser = {
     init: function (element, valueAccessor) {
       var options = valueAccessor();
+      var TYPE_MAP = {
+        'hive': 'query-hive',
+        'impala': 'query-impala',
+        'java': 'query-java',
+        'spark': 'query-spark2',
+        'pig': 'query-pig',
+        'sqoop': 'query-sqoop1',
+        'distcp-doc': 'query-distcp',
+        'mapreduce-doc': 'query-mapreduce'
+      }
+      var type = 'query-hive';
+      if (options.type) {
+        type = TYPE_MAP[options.type()] ? TYPE_MAP[options.type()] : options.type();
+      }
+      var firstLoad = false;
       $(element).selectize({
         valueField: 'uuid',
         labelField: 'name',
@@ -4802,6 +4817,7 @@
         options: [],
         create: false,
         preload: true,
+        dropdownParent: 'body',
         render: {
           option: function (item, escape) {
             return '<div>' +
@@ -4811,10 +4827,13 @@
           }
         },
         load: function (query, callback) {
+          if (query === '' && options.value && !firstLoad){
+            firstLoad = true;
+          }
           $.ajax({
             url: '/desktop/api2/docs/',
             data: {
-              type: 'query-hive',
+              type: type,
               text: query,
               include_trashed: false,
               limit: 100
@@ -4846,6 +4865,7 @@
         },
       });
     },
+
     update: function (element, valueAccessor) {
       var options = valueAccessor();
       if (options.value) {

+ 0 - 11
desktop/core/src/desktop/templates/config_ko_components.mako

@@ -63,17 +63,6 @@ from desktop.views import _ko
       color: #888;
     }
 
-    .selectize-wrapper {
-      display: inline-block;
-      float:left;
-      margin-right: 4px;
-    }
-
-    .selectize-input {
-      padding-top: 6px !important;
-      padding-bottom: 5px !important;
-    }
-
     .config-actions {
       display: inline-block;
       font-size: 13px;