Browse Source

[oozie] Added filechooser binding to files

Enrico Berti 11 years ago
parent
commit
0bbcd46

+ 16 - 1
apps/oozie/src/oozie/templates/editor/workflow_editor.mako

@@ -578,7 +578,7 @@ ${ commonheader(_("Workflow Editor"), "Oozie", user, "40px") | n,unicode }
   <h6><a class="pointer" data-bind="click: function(){ properties.files.push({'value': ''});$(document).trigger('drawArrows') }">${ _('Files') } <i class="fa fa-plus"></i></a></h6>
   <ul class="unstyled" data-bind="foreach: properties.files">
     <li style="margin-bottom: 3px">
-      <input type="text" class="span11" data-bind="value: value"/>
+      <input type="text" class="span9" data-bind="filechooser: value"/>
       <a href="#" data-bind="click: function(){ $parent.properties.files.remove(this);$(document).trigger('drawArrows') }">
         <i class="fa fa-minus"></i>
       </a>
@@ -1522,6 +1522,21 @@ ${ commonheader(_("Workflow Editor"), "Oozie", user, "40px") | n,unicode }
 
 <div id="submit-wf-modal" class="modal hide"></div>
 
+<div id="chooseFile" class="modal hide fade">
+  <div class="modal-header">
+      <a href="#" class="close" data-dismiss="modal">&times;</a>
+      <h3>${_('Choose a file')}</h3>
+  </div>
+  <div class="modal-body">
+      <div id="filechooser">
+      </div>
+  </div>
+  <div class="modal-footer">
+  </div>
+</div>
+
+
+
 <div id="exposeOverlay"></div>
 
 <link rel="stylesheet" href="/static/ext/css/hue-filetypes.css">

+ 1 - 1
apps/security/src/security/templates/hdfs.mako

@@ -292,7 +292,7 @@ ${ tree.import_templates(itemClick='$root.assist.setPath', iconClick='$root.assi
 <script src="/static/ext/js/knockout-min.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/ext/js/knockout.mapping-2.3.2.js" type="text/javascript" charset="utf-8"></script>
 
-<script src="/security/static/js/common.ko.js" type="text/javascript" charset="utf-8"></script>
+<script src="/static/js/ko.hue-bindings.js" type="text/javascript" charset="utf-8"></script>
 <script src="/security/static/js/hdfs.ko.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/js/jquery.hdfsautocomplete.js" type="text/javascript" charset="utf-8"></script>
 

+ 1 - 1
apps/security/src/security/templates/hive.mako

@@ -532,7 +532,7 @@ ${ tree.import_templates(itemClick='$root.assist.setPath', iconClick='$root.assi
 <script src="/static/ext/js/knockout.mapping-2.3.2.js" type="text/javascript" charset="utf-8"></script>
 <script src="/static/ext/js/routie-0.3.0.min.js" type="text/javascript" charset="utf-8"></script>
 
-<script src="/security/static/js/common.ko.js" type="text/javascript" charset="utf-8"></script>
+<script src="/static/js/ko.hue-bindings.js" type="text/javascript" charset="utf-8"></script>
 <script src="/security/static/js/hive.ko.js" type="text/javascript" charset="utf-8"></script>
 
 <script src="/static/ext/js/moment.min.js" type="text/javascript" charset="utf-8"></script>

+ 0 - 217
apps/security/static/js/common.ko.js

@@ -1,217 +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.
-
-ko.bindingHandlers.select2 = {
-  init: function (element, valueAccessor, allBindingsAccessor, vm) {
-    var options = ko.toJS(valueAccessor()) || {};
-
-    if (typeof valueAccessor().update != "undefined") {
-      if (options.type == "user" && viewModel.selectableHadoopUsers().indexOf(options.update) == -1) {
-        viewModel.availableHadoopUsers.push({
-          username: options.update
-        });
-      }
-      if (options.type == "group") {
-        if (options.update instanceof Array) {
-          options.update.forEach(function(opt){
-            if (viewModel.selectableHadoopGroups().indexOf(opt) == -1){
-              viewModel.availableHadoopGroups.push({
-                name: opt
-              });
-            }
-          });
-        }
-        else if (viewModel.selectableHadoopGroups().indexOf(options.update) == -1){
-          viewModel.availableHadoopGroups.push({
-            name: options.update
-          });
-        }
-      }
-      if (options.type == "action" && viewModel.availableActions().indexOf(options.update) == -1) {
-        viewModel.availableActions.push(options.update);
-      }
-      if (options.type == "scope" && viewModel.availablePrivileges().indexOf(options.update) == -1) {
-        viewModel.availablePrivileges.push(options.update);
-      }
-    }
-    $(element)
-        .select2(options)
-        .on("change", function (e) {
-          if (typeof e.val != "undefined" && typeof valueAccessor().update != "undefined") {
-            valueAccessor().update(e.val);
-          }
-        })
-        .on("select2-focus", function(e) {
-          if (typeof options.onFocus != "undefined"){
-            options.onFocus();
-          }
-        })
-        .on("select2-blur", function(e) {
-          if (typeof options.onBlur != "undefined"){
-            options.onBlur();
-          }
-        })
-        .on("select2-open", function () {
-          $(".select2-input").off("keyup").data("type", options.type).on("keyup", function (e) {
-            if (e.keyCode === 13) {
-              var _isArray = options.update instanceof Array;
-              var _newVal = $(this).val();
-              var _type = $(this).data("type");
-              if ($.trim(_newVal) != "") {
-                if (_type == "user") {
-                  viewModel.availableHadoopUsers.push({
-                    username: _newVal
-                  });
-                }
-                if (_type == "group") {
-                  viewModel.availableHadoopGroups.push({
-                    name: _newVal
-                  });
-                }
-                if (_type == "action") {
-                  viewModel.availableActions.push(_newVal);
-                }
-                if (_type == "scope") {
-                  viewModel.availablePrivileges.push(_newVal);
-                }
-                if (_type == "role") {
-                  var _r = new Role(viewModel, { name: _newVal });
-                  viewModel.tempRoles.push(_r);
-                  viewModel.roles.push(_r);
-                }
-                if (_isArray){
-                  var _vals = $(element).select2("val");
-                  _vals.push(_newVal);
-                  $(element).select2("val", _vals, true);
-                }
-                else {
-                  $(element).select2("val", _newVal, true);
-                }
-                $(element).select2("close");
-              }
-            }
-          });
-        })
-  },
-  update: function (element, valueAccessor, allBindingsAccessor, vm) {
-    if (typeof valueAccessor().update != "undefined") {
-      $(element).select2("val", valueAccessor().update());
-    }
-    if (typeof valueAccessor().readonly != "undefined") {
-      $(element).select2("readonly", valueAccessor().readonly);
-      if (typeof valueAccessor().readonlySetTo != "undefined") {
-        valueAccessor().readonlySetTo();
-      }
-    }
-  }
-};
-
-ko.bindingHandlers.hivechooser = {
-  init: function(element, valueAccessor, allBindingsAccessor, vm) {
-    var self = $(element);
-    self.val(valueAccessor()());
-
-    function setPathFromAutocomplete(path){
-      self.val(path);
-      valueAccessor()(path);
-      self.blur();
-    }
-
-    self.on("blur", function () {
-      valueAccessor()(self.val());
-    });
-
-    self.jHueHiveAutocomplete({
-      skipColumns: true,
-      showOnFocus: true,
-      home: "/",
-      onPathChange: function (path) {
-        setPathFromAutocomplete(path);
-      },
-      onEnter: function (el) {
-        setPathFromAutocomplete(el.val());
-      },
-      onBlur: function () {
-        if (self.val().lastIndexOf(".") == self.val().length - 1){
-          self.val(self.val().substr(0, self.val().length - 1));
-        }
-        valueAccessor()(self.val());
-      }
-    });
-  }
-}
-
-ko.bindingHandlers.filechooser = {
-  init: function(element, valueAccessor, allBindingsAccessor, vm) {
-    var self = $(element);
-    self.val(valueAccessor()());
-
-    self.on("blur", function () {
-      valueAccessor()(self.val());
-    });
-
-    self.after(getFileBrowseButton(self, true, valueAccessor));
-  }
-};
-
-function getFileBrowseButton(inputElement, selectFolder, valueAccessor) {
-  return $("<button>").addClass("btn").addClass("fileChooserBtn").text("..").click(function (e) {
-    e.preventDefault();
-    // check if it's a relative path
-    callFileChooser();
-
-    function callFileChooser() {
-      var _initialPath = $.trim(inputElement.val()) != "" ? inputElement.val() : "/";
-      if (_initialPath.indexOf("hdfs://") > -1){
-        _initialPath = _initialPath.substring(7);
-      }
-      $("#filechooser").jHueFileChooser({
-        suppressErrors: true,
-        selectFolder: (selectFolder) ? true : false,
-        onFolderChoose: function (filePath) {
-          handleChoice(filePath);
-          if (selectFolder) {
-            $("#chooseFile").modal("hide");
-          }
-        },
-        onFileChoose: function (filePath) {
-          handleChoice(filePath);
-          $("#chooseFile").modal("hide");
-        },
-        createFolder: false,
-        uploadFile: false,
-        initialPath: _initialPath,
-        errorRedirectPath: "",
-        forceRefresh: true
-      });
-      $("#chooseFile").modal("show");
-    }
-
-    function handleChoice(filePath) {
-      inputElement.val("hdfs://" + filePath);
-      inputElement.change();
-      valueAccessor()(inputElement.val());
-    }
-  });
-}
-
-ko.bindingHandlers.tooltip = {
-  update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
-    var options = ko.utils.unwrapObservable(valueAccessor());
-    var self = $(element);
-    self.tooltip(options);
-  }
-};

+ 241 - 25
desktop/core/static/js/ko.hue-bindings.js

@@ -383,7 +383,7 @@ ko.bindingHandlers.daterangepicker = {
       rangeHandler(true);
     });
 
-    _tmpl.find(".start-date").on("change", function(){
+    _tmpl.find(".start-date").on("change", function () {
       rangeHandler(true);
     });
 
@@ -400,7 +400,7 @@ ko.bindingHandlers.daterangepicker = {
       rangeHandler(false);
     });
 
-    _tmpl.find(".end-date").on("change", function(){
+    _tmpl.find(".end-date").on("change", function () {
       rangeHandler(true);
     });
 
@@ -460,7 +460,7 @@ ko.bindingHandlers.daterangepicker = {
 
     function matchIntervals() {
       _tmpl.find(".interval-select").val(_options.gap());
-      if (_tmpl.find(".interval-select").val() == null){
+      if (_tmpl.find(".interval-select").val() == null) {
         _tmpl.find(".interval-select").val(_tmpl.find(".interval-select option:first").val());
         _options.gap(_tmpl.find(".interval-select").val());
         _tmpl.find(".interval-custom").val(_options.gap());
@@ -594,26 +594,26 @@ ko.bindingHandlers.clearable = {
 
     _el.addClass("clearable");
     _el
-      .on("input", function () {
-        _el[tog(this.value)]("x");
-      })
-      .on("change", function () {
-        valueAccessor()(_el.val());
-      })
-      .on("blur", function () {
-        valueAccessor()(_el.val());
-      })
-      .on("mousemove", function (e) {
-        _el[tog(this.offsetWidth - 18 < e.clientX - this.getBoundingClientRect().left)]("onX");
-      })
-      .on("click", function (e) {
-        if (this.offsetWidth - 18 < e.clientX - this.getBoundingClientRect().left) {
-          _el.removeClass("x onX").val("");
-          valueAccessor()("");
-        }
-      });
+        .on("input", function () {
+          _el[tog(this.value)]("x");
+        })
+        .on("change", function () {
+          valueAccessor()(_el.val());
+        })
+        .on("blur", function () {
+          valueAccessor()(_el.val());
+        })
+        .on("mousemove", function (e) {
+          _el[tog(this.offsetWidth - 18 < e.clientX - this.getBoundingClientRect().left)]("onX");
+        })
+        .on("click", function (e) {
+          if (this.offsetWidth - 18 < e.clientX - this.getBoundingClientRect().left) {
+            _el.removeClass("x onX").val("");
+            valueAccessor()("");
+          }
+        });
 
-    if (allBindingsAccessor().valueUpdate != null && allBindingsAccessor().valueUpdate == "afterkeydown"){
+    if (allBindingsAccessor().valueUpdate != null && allBindingsAccessor().valueUpdate == "afterkeydown") {
       _el.on("keyup", function () {
         valueAccessor()(_el.val());
       });
@@ -710,7 +710,7 @@ ko.bindingHandlers.chosen = {
 ko.bindingHandlers.tooltip = {
   init: function (element, valueAccessor) {
     var local = ko.utils.unwrapObservable(valueAccessor()),
-      options = {};
+        options = {};
 
     ko.utils.extend(options, local);
 
@@ -800,8 +800,8 @@ ko.bindingHandlers.typeahead = {
 
     elem.typeahead(_options);
 
-    if (valueAccessor.triggerOnFocus){
-      elem.on('focus', function(){
+    if (valueAccessor.triggerOnFocus) {
+      elem.on('focus', function () {
         elem.trigger("keyup");
       });
     }
@@ -815,4 +815,220 @@ ko.bindingHandlers.typeahead = {
     var value = valueAccessor();
     elem.val(value.target());
   }
+};
+
+
+ko.bindingHandlers.select2 = {
+  init: function (element, valueAccessor, allBindingsAccessor, vm) {
+    var options = ko.toJS(valueAccessor()) || {};
+
+    if (typeof valueAccessor().update != "undefined") {
+      if (options.type == "user" && viewModel.selectableHadoopUsers().indexOf(options.update) == -1) {
+        viewModel.availableHadoopUsers.push({
+          username: options.update
+        });
+      }
+      if (options.type == "group") {
+        if (options.update instanceof Array) {
+          options.update.forEach(function (opt) {
+            if (viewModel.selectableHadoopGroups().indexOf(opt) == -1) {
+              viewModel.availableHadoopGroups.push({
+                name: opt
+              });
+            }
+          });
+        }
+        else if (viewModel.selectableHadoopGroups().indexOf(options.update) == -1) {
+          viewModel.availableHadoopGroups.push({
+            name: options.update
+          });
+        }
+      }
+      if (options.type == "action" && viewModel.availableActions().indexOf(options.update) == -1) {
+        viewModel.availableActions.push(options.update);
+      }
+      if (options.type == "scope" && viewModel.availablePrivileges().indexOf(options.update) == -1) {
+        viewModel.availablePrivileges.push(options.update);
+      }
+    }
+    $(element)
+        .select2(options)
+        .on("change", function (e) {
+          if (typeof e.val != "undefined" && typeof valueAccessor().update != "undefined") {
+            valueAccessor().update(e.val);
+          }
+        })
+        .on("select2-focus", function (e) {
+          if (typeof options.onFocus != "undefined") {
+            options.onFocus();
+          }
+        })
+        .on("select2-blur", function (e) {
+          if (typeof options.onBlur != "undefined") {
+            options.onBlur();
+          }
+        })
+        .on("select2-open", function () {
+          $(".select2-input").off("keyup").data("type", options.type).on("keyup", function (e) {
+            if (e.keyCode === 13) {
+              var _isArray = options.update instanceof Array;
+              var _newVal = $(this).val();
+              var _type = $(this).data("type");
+              if ($.trim(_newVal) != "") {
+                if (_type == "user") {
+                  viewModel.availableHadoopUsers.push({
+                    username: _newVal
+                  });
+                }
+                if (_type == "group") {
+                  viewModel.availableHadoopGroups.push({
+                    name: _newVal
+                  });
+                }
+                if (_type == "action") {
+                  viewModel.availableActions.push(_newVal);
+                }
+                if (_type == "scope") {
+                  viewModel.availablePrivileges.push(_newVal);
+                }
+                if (_type == "role") {
+                  var _r = new Role(viewModel, { name: _newVal });
+                  viewModel.tempRoles.push(_r);
+                  viewModel.roles.push(_r);
+                }
+                if (_isArray) {
+                  var _vals = $(element).select2("val");
+                  _vals.push(_newVal);
+                  $(element).select2("val", _vals, true);
+                }
+                else {
+                  $(element).select2("val", _newVal, true);
+                }
+                $(element).select2("close");
+              }
+            }
+          });
+        })
+  },
+  update: function (element, valueAccessor, allBindingsAccessor, vm) {
+    if (typeof valueAccessor().update != "undefined") {
+      $(element).select2("val", valueAccessor().update());
+    }
+    if (typeof valueAccessor().readonly != "undefined") {
+      $(element).select2("readonly", valueAccessor().readonly);
+      if (typeof valueAccessor().readonlySetTo != "undefined") {
+        valueAccessor().readonlySetTo();
+      }
+    }
+  }
+};
+
+ko.bindingHandlers.hivechooser = {
+  init: function (element, valueAccessor, allBindingsAccessor, vm) {
+    var self = $(element);
+    self.val(valueAccessor()());
+
+    function setPathFromAutocomplete(path) {
+      self.val(path);
+      valueAccessor()(path);
+      self.blur();
+    }
+
+    self.on("blur", function () {
+      valueAccessor()(self.val());
+    });
+
+    self.jHueHiveAutocomplete({
+      skipColumns: true,
+      showOnFocus: true,
+      home: "/",
+      onPathChange: function (path) {
+        setPathFromAutocomplete(path);
+      },
+      onEnter: function (el) {
+        setPathFromAutocomplete(el.val());
+      },
+      onBlur: function () {
+        if (self.val().lastIndexOf(".") == self.val().length - 1) {
+          self.val(self.val().substr(0, self.val().length - 1));
+        }
+        valueAccessor()(self.val());
+      }
+    });
+  }
+}
+
+ko.bindingHandlers.filechooser = {
+  init: function (element, valueAccessor, allBindingsAccessor, vm) {
+    var self = $(element);
+    if (typeof valueAccessor() == "function") {
+      self.val(valueAccessor()());
+      self.on("blur", function () {
+        valueAccessor()(self.val());
+      });
+    }
+    else {
+      self.val(valueAccessor());
+      self.on("blur", function () {
+        valueAccessor(self.val());
+      });
+    }
+
+
+    self.after(getFileBrowseButton(self, true, valueAccessor));
+  }
+};
+
+function getFileBrowseButton(inputElement, selectFolder, valueAccessor) {
+  return $("<button>").addClass("btn").addClass("fileChooserBtn").text("..").click(function (e) {
+    e.preventDefault();
+    // check if it's a relative path
+    callFileChooser();
+
+    function callFileChooser() {
+      var _initialPath = $.trim(inputElement.val()) != "" ? inputElement.val() : "/";
+      if (_initialPath.indexOf("hdfs://") > -1) {
+        _initialPath = _initialPath.substring(7);
+      }
+      $("#filechooser").jHueFileChooser({
+        suppressErrors: true,
+        selectFolder: (selectFolder) ? true : false,
+        onFolderChoose: function (filePath) {
+          handleChoice(filePath);
+          if (selectFolder) {
+            $("#chooseFile").modal("hide");
+          }
+        },
+        onFileChoose: function (filePath) {
+          handleChoice(filePath);
+          $("#chooseFile").modal("hide");
+        },
+        createFolder: false,
+        uploadFile: false,
+        initialPath: _initialPath,
+        errorRedirectPath: "",
+        forceRefresh: true
+      });
+      $("#chooseFile").modal("show");
+    }
+
+    function handleChoice(filePath) {
+      inputElement.val("hdfs://" + filePath);
+      inputElement.change();
+      if (typeof valueAccessor() == "function") {
+        valueAccessor()(inputElement.val());
+      }
+      else {
+        valueAccessor(inputElement.val());
+      }
+    }
+  });
+}
+
+ko.bindingHandlers.tooltip = {
+  update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
+    var options = ko.utils.unwrapObservable(valueAccessor());
+    var self = $(element);
+    self.tooltip(options);
+  }
 };