jquery.hdfstree.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275
  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 initialPath is set it pre-populates the path
  19. * if home is specified a home link will appear
  20. * use attached to an element, ie:
  21. * $("#el").jHueHdfsTree({
  22. * initialPath: "/user",
  23. * home: "/user/hue"
  24. * onPathChange: function (path) {
  25. * console.log(path);
  26. * }
  27. * });
  28. */
  29. (function ($, window, document, undefined) {
  30. var pluginName = "jHueHdfsTree",
  31. defaults = {
  32. home: "",
  33. initialPath: "/",
  34. onPathChange: function () {
  35. },
  36. createFolder: true,
  37. labels: {
  38. CREATE_FOLDER: "Create folder",
  39. FOLDER_NAME: "Folder name",
  40. CANCEL: "Cancel",
  41. HOME: "Home"
  42. }
  43. },
  44. STORAGE_PREFIX = "hueFileBrowserLastPathForUser_";
  45. function Plugin(element, options) {
  46. this.element = element;
  47. if (typeof jHueHdfsTreeGlobals != 'undefined') {
  48. var extendedDefaults = $.extend({}, defaults, jHueHdfsTreeGlobals);
  49. extendedDefaults.labels = $.extend({}, defaults.labels, jHueHdfsTreeGlobals.labels);
  50. this.options = $.extend({}, extendedDefaults, options);
  51. if (options != null) {
  52. this.options.labels = $.extend({}, extendedDefaults.labels, options.labels);
  53. }
  54. }
  55. else {
  56. this.options = $.extend({}, defaults, options);
  57. if (options != null) {
  58. this.options.labels = $.extend({}, defaults.labels, options.labels);
  59. }
  60. }
  61. this._defaults = defaults;
  62. this._name = pluginName;
  63. this.lastPath = "";
  64. this.previousPath = "";
  65. this.init();
  66. }
  67. Plugin.prototype.init = function (optionalPath) {
  68. var _this = this;
  69. if (typeof optionalPath != "undefined") {
  70. _this.options.initialPath = optionalPath;
  71. }
  72. var _el = $(_this.element);
  73. _el.empty();
  74. _el.addClass("jHueHdfsTree");
  75. if (_this.options.home != ""){
  76. var _homeLink = $("<a>").html('<i class="fa fa-home"></i> ' + _this.options.labels.HOME).click(function () {
  77. var _path = _this.options.home;
  78. _this.options.onPathChange(_path);
  79. _this.lastPath = _path;
  80. _tree.find("a").removeClass("selected");
  81. var _paths = [];
  82. var _re = /\//g;
  83. while ((match = _re.exec(_path)) != null) {
  84. _paths.push(_path.substr(0, match.index));
  85. }
  86. _paths.push(_path);
  87. showHdfsLeaf({
  88. paths: _paths,
  89. scroll: true
  90. });
  91. });
  92. _homeLink.css({
  93. "cursor": "pointer",
  94. "position": "fixed",
  95. "margin-top": "-10px",
  96. "margin-left": "12px",
  97. "font-size": "16px",
  98. "background-color": "#FFF",
  99. "width": "560px"
  100. })
  101. }
  102. var _tree = $("<ul>").addClass("content unstyled").html('<li><a class="pointer"><i class="fa fa-folder-open-o"></i> /</a></li>');
  103. _tree.css("padding-top", "30px");
  104. if (_this.options.home != ""){
  105. _homeLink.appendTo(_el);
  106. }
  107. _tree.appendTo(_el);
  108. _tree.find("a").on("click", function () {
  109. _this.options.onPathChange("/");
  110. _tree.find("a").removeClass("selected");
  111. _tree.find("a:eq(0)").addClass("selected");
  112. });
  113. var _root = $("<ul>").addClass("content unstyled").attr("data-path", "__JHUEHDFSTREE__ROOT__").attr("data-loaded", "true");
  114. _root.appendTo(_tree.find("li"));
  115. var BASE_PATH = "/filebrowser/view";
  116. var _currentFiles = [];
  117. function showHdfsLeaf(options) {
  118. var autocompleteUrl = BASE_PATH,
  119. currentPath = "";
  120. if (options.paths != null && options.paths.length > 0) {
  121. currentPath = options.paths.shift();
  122. }
  123. else {
  124. currentPath = (options.leaf != null ? options.leaf : "");
  125. }
  126. autocompleteUrl += currentPath;
  127. $.getJSON(autocompleteUrl + "?pagesize=1000&format=json", function (data) {
  128. _currentFiles = [];
  129. if (data.error == null) {
  130. var _dataPathForCurrent = currentPath != "" ? currentPath : "__JHUEHDFSTREE__ROOT__";
  131. _el.find("[data-path='" + _dataPathForCurrent + "']").attr("data-loaded", true);
  132. _el.find("[data-path='" + _dataPathForCurrent + "']").siblings("a").find(".fa-folder-o").removeClass("fa-folder-o").addClass("fa-folder-open-o");
  133. _tree.find("a").removeClass("selected");
  134. _el.find("[data-path='" + _dataPathForCurrent + "']").siblings("a").addClass("selected");
  135. if (options.scroll) {
  136. _el.parent().scrollTop(_el.find("[data-path='" + _dataPathForCurrent + "']").siblings("a").position().top + _el.parent().scrollTop() - 30);
  137. }
  138. $(data.files).each(function (cnt, item) {
  139. if (item.name != "." && item.name != ".." && item.type == "dir") {
  140. var _path = item.path;
  141. if (_el.find("[data-path='" + _path + "']").length == 0){
  142. 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>');
  143. var _destination = _path.substr(0, _path.lastIndexOf("/"));
  144. if (_destination == ""){
  145. _destination = "__JHUEHDFSTREE__ROOT__";
  146. }
  147. _li.appendTo(_el.find("[data-path='" + _destination + "']"));
  148. _li.find("a").on("click", function () {
  149. _this.options.onPathChange(_path);
  150. _this.lastPath = _path;
  151. _tree.find("a").removeClass("selected");
  152. _li.find("a:eq(0)").addClass("selected");
  153. if (_li.find(".content").attr("data-loaded") == "false") {
  154. showHdfsLeaf({
  155. leaf: _path,
  156. scroll: false
  157. });
  158. }
  159. else {
  160. if (_li.find(".content").is(":visible")) {
  161. _li.find(".content").hide();
  162. }
  163. else {
  164. _li.find(".content").show();
  165. }
  166. }
  167. });
  168. }
  169. }
  170. });
  171. if (_this.options.createFolder) {
  172. var _createFolderLi = $("<li>").html('<a class="pointer"><i class="fa fa-plus-square-o"></i> ' + _this.options.labels.CREATE_FOLDER + '</a>');
  173. _createFolderLi.appendTo(_el.find("[data-path='" + currentPath + "']"));
  174. var _createFolderDetails = $("<form>").css("margin-top", "10px").addClass("form-inline");
  175. _createFolderDetails.hide();
  176. var _folderName = $("<input>").attr("type", "text").attr("placeholder", _this.options.labels.FOLDER_NAME).appendTo(_createFolderDetails);
  177. $("<span> </span>").appendTo(_createFolderDetails);
  178. var _folderBtn = $("<input>").attr("type", "button").attr("value", _this.options.labels.CREATE_FOLDER).addClass("btn primary").appendTo(_createFolderDetails);
  179. $("<span> </span>").appendTo(_createFolderDetails);
  180. var _folderCancel = $("<input>").attr("type", "button").attr("value", _this.options.labels.CANCEL).addClass("btn").appendTo(_createFolderDetails);
  181. _folderCancel.click(function () {
  182. _createFolderDetails.slideUp();
  183. });
  184. _folderBtn.click(function () {
  185. $.ajax({
  186. type: "POST",
  187. url: "/filebrowser/mkdir",
  188. data: {
  189. name: _folderName.val(),
  190. path: currentPath
  191. },
  192. beforeSend: function (xhr) {
  193. xhr.setRequestHeader("X-Requested-With", "Hue"); // need to override the default one because otherwise Django returns HTTP 500
  194. },
  195. success: function (xhr, status) {
  196. if (status == "success") {
  197. _createFolderDetails.slideUp();
  198. var _newFolder = currentPath + "/" + _folderName.val();
  199. _this.init(_newFolder);
  200. _this.options.onPathChange(_newFolder);
  201. }
  202. }
  203. });
  204. });
  205. _createFolderDetails.appendTo(_el.find("[data-path='" + currentPath + "']"));
  206. _createFolderLi.find("a").on("click", function () {
  207. _createFolderDetails.slideDown();
  208. });
  209. }
  210. if (options.paths != null && options.paths.length > 0) {
  211. showHdfsLeaf({
  212. paths: options.paths,
  213. scroll: options.scroll
  214. });
  215. }
  216. }
  217. });
  218. }
  219. Plugin.prototype.showHdfsLeaf = showHdfsLeaf;
  220. var _paths = [];
  221. if (_this.options.initialPath != "/") {
  222. var _re = /\//g;
  223. while ((match = _re.exec(_this.options.initialPath)) != null) {
  224. _paths.push(_this.options.initialPath.substr(0, match.index));
  225. }
  226. _paths.push(_this.options.initialPath);
  227. }
  228. showHdfsLeaf({
  229. paths: _paths
  230. });
  231. };
  232. Plugin.prototype.setOptions = function (options) {
  233. this.options = $.extend({}, defaults, options);
  234. };
  235. $.fn[pluginName] = function (options) {
  236. return this.each(function () {
  237. if (!$.data(this, 'plugin_' + pluginName)) {
  238. $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
  239. }
  240. });
  241. }
  242. $[pluginName] = function (options) {
  243. if (typeof console != "undefined") {
  244. console.warn("$(elem).jHueHdfsTree() is a preferred call method.");
  245. }
  246. $(options.element).jHueHdfsTree(options);
  247. };
  248. })(jQuery, window, document);