jquery.hdfstree.js 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. // Licensed to Cloudera, Inc. under one
  2. // or more contributor license agreements. See the NOTICE file
  3. // distributed with this work for additional information
  4. // regarding copyright ownership. Cloudera, Inc. licenses this file
  5. // to you under the Apache License, Version 2.0 (the
  6. // "License"); you may not use this file except in compliance
  7. // with the License. You may obtain a copy of the License at
  8. //
  9. // http://www.apache.org/licenses/LICENSE-2.0
  10. //
  11. // Unless required by applicable law or agreed to in writing, software
  12. // distributed under the License is distributed on an "AS IS" BASIS,
  13. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14. // See the License for the specific language governing permissions and
  15. // limitations under the License.
  16. /*
  17. * jHue HDFS tree plugin
  18. * shows a tree HDFS picker, if home is set it pre-populates the path
  19. * use attached to an element, ie:
  20. * $("#el").jHueHdfsTree({
  21. * home: "/user",
  22. * onPathChange: function (path) {
  23. * console.log(path);
  24. * }
  25. * });
  26. */
  27. (function ($, window, document, undefined) {
  28. var pluginName = "jHueHdfsTree",
  29. defaults = {
  30. home: "/",
  31. onPathChange: function () {
  32. },
  33. createFolder: true,
  34. labels: {
  35. CREATE_FOLDER: "Create folder",
  36. FOLDER_NAME: "Folder name",
  37. CANCEL: "Cancel"
  38. }
  39. },
  40. STORAGE_PREFIX = "hueFileBrowserLastPathForUser_";
  41. function Plugin(element, options) {
  42. this.element = element;
  43. if (typeof jHueHdfsTreeGlobals != 'undefined') {
  44. var extendedDefaults = $.extend({}, defaults, jHueHdfsTreeGlobals);
  45. extendedDefaults.labels = $.extend({}, defaults.labels, jHueHdfsTreeGlobals.labels);
  46. this.options = $.extend({}, extendedDefaults, options);
  47. if (options != null) {
  48. this.options.labels = $.extend({}, extendedDefaults.labels, options.labels);
  49. }
  50. }
  51. else {
  52. this.options = $.extend({}, defaults, options);
  53. if (options != null) {
  54. this.options.labels = $.extend({}, defaults.labels, options.labels);
  55. }
  56. }
  57. this._defaults = defaults;
  58. this._name = pluginName;
  59. this.lastPath = "";
  60. this.previousPath = "";
  61. this.init();
  62. }
  63. Plugin.prototype.init = function (optionalPath) {
  64. var _this = this;
  65. if (typeof optionalPath != "undefined") {
  66. _this.options.home = optionalPath;
  67. }
  68. var _el = $(_this.element);
  69. _el.empty();
  70. _el.addClass("jHueHdfsTree");
  71. var _tree = $("<ul>").addClass("content unstyled").html('<li><a class="pointer"><i class="fa fa-folder-open-o"></i> /</a></li>');
  72. _tree.appendTo(_el);
  73. _tree.find("a").on("click", function () {
  74. _this.options.onPathChange("/");
  75. _tree.find("a").removeClass("selected");
  76. _tree.find("a:eq(0)").addClass("selected");
  77. });
  78. var _root = $("<ul>").addClass("content unstyled").attr("data-path", "").attr("data-loaded", "true");
  79. _root.appendTo(_tree.find("li"));
  80. var BASE_PATH = "/filebrowser/view";
  81. var _currentFiles = [];
  82. function showHdfsLeaf(options) {
  83. var autocompleteUrl = BASE_PATH,
  84. currentPath = "";
  85. if (options.paths != null && options.paths.length > 0) {
  86. currentPath = options.paths.shift();
  87. }
  88. else {
  89. currentPath = (options.leaf != null ? options.leaf : "");
  90. }
  91. autocompleteUrl += currentPath;
  92. $.getJSON(autocompleteUrl + "?pagesize=1000&format=json", function (data) {
  93. _currentFiles = [];
  94. if (data.error == null) {
  95. _el.find("[data-path='" + currentPath + "']").attr("data-loaded", true);
  96. _el.find("[data-path='" + currentPath + "']").siblings("a").find(".fa-folder-o").removeClass("fa-folder-o").addClass("fa-folder-open-o");
  97. $(data.files).each(function (cnt, item) {
  98. if (item.name != "." && item.name != ".." && item.type == "dir") {
  99. var _path = item.path;
  100. var _li = $("<li>").html('<a class="pointer"><i class="fa fa-folder-o"></i> ' + item.name + '</a><ul class="content unstyled" data-path="' + _path + '" data-loaded="false"></ul>');
  101. var _destination = _path.substr(0, _path.lastIndexOf("/"));
  102. _li.appendTo(_el.find("[data-path='" + _destination + "']"));
  103. _li.find("a").on("click", function () {
  104. _this.options.onPathChange(_path);
  105. _this.lastPath = _path;
  106. _tree.find("a").removeClass("selected");
  107. _li.find("a:eq(0)").addClass("selected");
  108. if (_li.find(".content").attr("data-loaded") == "false") {
  109. showHdfsLeaf({
  110. leaf: _path
  111. });
  112. }
  113. else {
  114. if (_li.find(".content").is(":visible")) {
  115. _li.find(".content").hide();
  116. }
  117. else {
  118. _li.find(".content").show();
  119. }
  120. }
  121. });
  122. }
  123. });
  124. if (_this.options.createFolder) {
  125. var _createFolderLi = $("<li>").html('<a class="pointer"><i class="fa fa-plus-square-o"></i> ' + _this.options.labels.CREATE_FOLDER + '</a>');
  126. _createFolderLi.appendTo(_el.find("[data-path='" + currentPath + "']"));
  127. var _createFolderDetails = $("<form>").css("margin-top", "10px").addClass("form-inline");
  128. _createFolderDetails.hide();
  129. var _folderName = $("<input>").attr("type", "text").attr("placeholder", _this.options.labels.FOLDER_NAME).appendTo(_createFolderDetails);
  130. $("<span> </span>").appendTo(_createFolderDetails);
  131. var _folderBtn = $("<input>").attr("type", "button").attr("value", _this.options.labels.CREATE_FOLDER).addClass("btn primary").appendTo(_createFolderDetails);
  132. $("<span> </span>").appendTo(_createFolderDetails);
  133. var _folderCancel = $("<input>").attr("type", "button").attr("value", _this.options.labels.CANCEL).addClass("btn").appendTo(_createFolderDetails);
  134. _folderCancel.click(function () {
  135. _createFolderDetails.slideUp();
  136. });
  137. _folderBtn.click(function () {
  138. $.ajax({
  139. type: "POST",
  140. url: "/filebrowser/mkdir",
  141. data: {
  142. name: _folderName.val(),
  143. path: currentPath
  144. },
  145. beforeSend: function (xhr) {
  146. xhr.setRequestHeader("X-Requested-With", "Hue"); // need to override the default one because otherwise Django returns HTTP 500
  147. },
  148. success: function (xhr, status) {
  149. if (status == "success") {
  150. _createFolderDetails.slideUp();
  151. var _newFolder = currentPath + "/" + _folderName.val();
  152. _this.init(_newFolder);
  153. _this.options.onPathChange(_newFolder);
  154. }
  155. }
  156. });
  157. });
  158. _createFolderDetails.appendTo(_el.find("[data-path='" + currentPath + "']"));
  159. _createFolderLi.find("a").on("click", function () {
  160. _createFolderDetails.slideDown();
  161. });
  162. }
  163. if (options.paths != null && options.paths.length > 0) {
  164. showHdfsLeaf({
  165. paths: options.paths
  166. });
  167. }
  168. }
  169. });
  170. }
  171. var _paths = [];
  172. if (_this.options.home != "/") {
  173. var _re = /\//g;
  174. while ((match = _re.exec(_this.options.home)) != null) {
  175. _paths.push(_this.options.home.substr(0, match.index));
  176. }
  177. _paths.push(_this.options.home);
  178. }
  179. showHdfsLeaf({
  180. paths: _paths
  181. });
  182. };
  183. Plugin.prototype.setOptions = function (options) {
  184. this.options = $.extend({}, defaults, options);
  185. };
  186. $.fn[pluginName] = function (options) {
  187. return this.each(function () {
  188. if (!$.data(this, 'plugin_' + pluginName)) {
  189. $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
  190. }
  191. });
  192. }
  193. $[pluginName] = function (options) {
  194. if (typeof console != "undefined") {
  195. console.warn("$(elem).jHueHdfsTree() is a preferred call method.");
  196. }
  197. $(options.element).jHueHdfsTree(options);
  198. };
  199. })(jQuery, window, document);