app.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
  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. var AppViewModel = function() {
  17. var self = this;
  18. self.station = ko.observable("");
  19. self.pageTitle = ko.observable("");
  20. self.focusModel = ko.observable();
  21. self.cluster = ko.observable("");
  22. self.cluster.subscribe(function() {
  23. app.views.tabledata.name('');
  24. });
  25. self.clusters = ko.observableArray();
  26. self.clusterNames = ko.computed(function() {
  27. return ko.utils.arrayMap(self.clusters(), function (cluster_config) {
  28. return cluster_config.name;
  29. });
  30. });
  31. self.search = new tagsearch();
  32. self.views = {
  33. tables: new DataTableViewModel({columns:['Table Name', 'Enabled'], el: 'views.tables', reload: function(callback) {
  34. var d_self = this;
  35. d_self.isReLoading(true);
  36. d_self.items.removeAll();
  37. API.queryCluster("getTableList").done(function(data) {
  38. d_self.items.removeAll(); //need to remove again before callback executes
  39. function _isDropped (tableName) {
  40. var _found = false;
  41. d_self.droppedTables.forEach(function(t){
  42. if (t.name == tableName){
  43. _found = true;
  44. }
  45. });
  46. return _found;
  47. }
  48. var _items = [];
  49. for(q=0; q<data.length; q++) {
  50. if (!_isDropped(data[q].name)) {
  51. _items.push(new TableDataRow(data[q]));
  52. }
  53. }
  54. d_self.droppedTables = [];
  55. d_self.items(_items);
  56. d_self._el.find('a[data-row-selector=true]').jHueRowSelector();
  57. if(callback!=null)
  58. callback();
  59. d_self.isReLoading(false);
  60. });
  61. }}),
  62. tabledata: new SmartViewModel({'canWrite': canWrite, el: 'views.tabledata', reload: function(callback) //move inside SmartViewModel class?
  63. {
  64. var t_self = this;
  65. function getColumnFamilies() {
  66. var cols = [];
  67. var cfs = t_self.columnFamilies();
  68. for(var i=0; i<cfs.length; i++) {
  69. if(cfs[i].enabled()) {
  70. cols.push(cfs[i].name);
  71. }
  72. }
  73. return cols;
  74. }
  75. API.queryTable("getRowQuerySet", JSON.stringify(getColumnFamilies()), ko.toJSON(t_self.querySet())).done(function(data) {
  76. if(data.length > 0) {
  77. var keys = Object.keys(data);
  78. var items = [];
  79. for(var i=0; i<keys.length; i++) {
  80. var row = new SmartViewDataRow({'canWrite': canWrite, items: [], row:data[keys[i]].row, reload: function(options) {
  81. var self = this;
  82. options = (options == null) ? {} : options;
  83. options = ko.utils.extend({
  84. callback: function(data){},
  85. columns: getColumnFamilies()
  86. }, options);
  87. API.queryTable("getRow", JSON.stringify(options.columns), prepForTransport(self.row)).done(function(data) {
  88. self.setItems(data.columns);
  89. callback(data);
  90. self.isLoading(false);
  91. });
  92. }});
  93. row.setItems(data[keys[i]].columns);
  94. items.push(row);
  95. }
  96. t_self.items(items);
  97. }
  98. if(typeof(callback) === 'function')
  99. callback();
  100. $('*[data-toggle="tooltip"]').tooltip();
  101. });
  102. }})
  103. };
  104. self.initialize = function() {
  105. return API.query('getClusters').done(function(data) {
  106. app.clusters(data);
  107. });
  108. };
  109. };
  110. var app = new AppViewModel();
  111. ko.applyBindings(app);
  112. //routing
  113. routed = false;
  114. app.initialize().done(function() {
  115. routie({
  116. ':cluster/:table/query': function(cluster, table) {
  117. routie(cluster + '/' + table);
  118. },
  119. ':cluster/:table/query/:query': function(cluster, table, query) {
  120. logGA('query_table');
  121. $.totalStorage('hbase_cluster', cluster);
  122. app.station('table');
  123. app.search.cur_input(query);
  124. Router.setTable(cluster, table);
  125. resetElements();
  126. Views.render('dataview');
  127. app.views.tabledata._reloadcfs(function(){
  128. app.search.evaluate();
  129. app.views.tabledata.searchQuery(query);
  130. });
  131. routed = true;
  132. },
  133. ':cluster/:table': function(cluster, table) {
  134. logGA('view_table');
  135. $.totalStorage('hbase_cluster', cluster);
  136. Router.setTable(cluster, table);
  137. resetSearch();
  138. resetElements();
  139. app.station('table');
  140. Views.render('dataview');
  141. routed = true;
  142. },
  143. ':cluster': function(cluster) {
  144. if ($.inArray(cluster, app.clusterNames()) == -1) {
  145. routie('');
  146. } else {
  147. logGA('view_cluster');
  148. $.totalStorage('hbase_cluster', cluster);
  149. app.station('cluster');
  150. app.cluster(cluster);
  151. app.pageTitle(cluster);
  152. Views.render('clusterview');
  153. resetSearch();
  154. resetElements();
  155. app.views.tabledata.name('');
  156. app.views.tables.reload();
  157. routed = true;
  158. }
  159. resetElements();
  160. routed = true;
  161. },
  162. 'error': function() {
  163. logGA('error');
  164. routed = true;
  165. },
  166. '': function(){
  167. var cluster = $.totalStorage('hbase_cluster');
  168. if (cluster != null && $.inArray(cluster, app.clusterNames()) > -1) {
  169. routie(cluster);
  170. } else {
  171. routie(app.clusterNames()[0]);
  172. }
  173. resetElements();
  174. routed = true;
  175. },
  176. '*': function() {
  177. logGA('');
  178. if(!routed)
  179. history.back();
  180. routed = false;
  181. }
  182. });
  183. });
  184. $.fn.renderElement = function(data){utils.renderElement($(this,data))};
  185. $.fn.showIndicator = function() {
  186. $(this).addClass('isLoading');
  187. }
  188. $.fn.hideIndicator = function() {
  189. $(this).removeClass('isLoading');
  190. }
  191. $.fn.toggleIndicator = function() {
  192. $(this).toggleClass('isLoading');
  193. }
  194. function bindSubmit() {
  195. var self = this;
  196. var data = [];
  197. var hash_cache = {};
  198. if ($(this).attr("id") == "new_table_modal"){
  199. var _cols = [];
  200. $(this).find(".columns li.column").each(function(cnt, column){
  201. var _props = {
  202. name: $(column).find("input[name='table_columns']").val()
  203. };
  204. $(column).find(".columnProperties li").each(function(icnt, property){
  205. if (! $(property).hasClass("columnPropertyEmpty")) {
  206. _props[$(property).find("select").val()] = $(property).find("input[name='table_columns_property_value']").val();
  207. }
  208. });
  209. _cols.push({
  210. properties: _props
  211. });
  212. });
  213. data = [
  214. $(this).find("input[name='cluster']").val(),
  215. $(this).find("input[name='tableName']").val(),
  216. JSON.stringify(_cols)
  217. ]
  218. }
  219. else {
  220. $(this).find('.controls > input, .controls > textarea, .controls > ul input').not('input[type=submit]').each(function() {
  221. if($(this).hasClass('ignore'))
  222. return;
  223. var use_post = $(this).data('use-post');
  224. var submitVal = null;
  225. if($(this).data('subscribe')) {
  226. var target = $($(this).data('subscribe'));
  227. switch(target[0].tagName) {
  228. case "UL":
  229. var serialized = {};
  230. target.find('li').each(function() {
  231. serialized[$(this).find('input')[0].value] = $(this).find('input')[1].value;
  232. });
  233. submitVal = serialized;
  234. use_post = true;
  235. break;
  236. }
  237. }
  238. else if($(this).hasClass('serializeHash')) {
  239. var target = $(this).attr('name');
  240. if(!hash_cache[target])
  241. hash_cache[target] = {};
  242. hash_cache[target][$(this).data(key)] = $(this).val();
  243. }
  244. else {
  245. submitVal = $(this).val();
  246. //change reload next
  247. }
  248. if(submitVal) {
  249. if(use_post) {
  250. submitVal = "hbase-post-key-" + JSON.stringify(submitVal);
  251. } else {
  252. submitVal = prepForTransport(submitVal);
  253. }
  254. data.push(submitVal);
  255. }
  256. });
  257. }
  258. $(this).find('input[type=submit]').addClass('disabled').showIndicator();
  259. var ui = app.focusModel();
  260. if(ui)
  261. ui.isLoading(true);
  262. API.queryArray($(this).attr('action'), data).complete(function() {
  263. $(self).find('input[type=submit]').removeClass('disabled').hideIndicator();
  264. if(ui)
  265. ui.isLoading(false);
  266. }).success(function() {
  267. $(self).modal('hide');
  268. if(ui)
  269. app.focusModel().reload();
  270. });
  271. return false;
  272. }
  273. $('form.ajaxSubmit').submit(bindSubmit).on('hidden', function() {
  274. $(this).trigger('reset');
  275. });
  276. var prepareNewTableForm = function () {
  277. $("#new_table_modal .modal-body ul").empty();
  278. addColumnToNewTableForm();
  279. }
  280. var addColumnToNewTableForm = function() {
  281. var $li = $("<li>").addClass("column").css("marginBottom", "10px").html($("#columnTemplate").html());
  282. $li.find("ul").html($("#columnPropertyEmptyTemplate").html());
  283. $li.appendTo($("#new_table_modal .modal-body ul.columns"));
  284. }
  285. var addColumnPropertyToColumn = function (col){
  286. var $li = $("<li>").addClass("columnProperty").css("marginBottom", "5px").html($("#columnPropertyTemplate").html());
  287. $li.find("select").on("change", function(){
  288. $li.find("[name='table_columns_property_value']").attr("placeholder", $(this).find("option:selected").data("default"));
  289. });
  290. $li.appendTo(col.find("ul"));
  291. }
  292. $(document).on("click", "a.action_addColumn", function() {
  293. addColumnToNewTableForm();
  294. });
  295. $(document).on("click", "a.action_removeColumn", function() {
  296. $(this).parents("li").remove();
  297. });
  298. $(document).on("click", "a.action_addColumnProperty", function() {
  299. addColumnPropertyToColumn($(this).parents(".column"));
  300. $(this).parents(".column").find(".columnPropertyEmpty").remove();
  301. });
  302. $(document).on("click", "a.action_removeColumnProperty", function() {
  303. var _col = $(this).parents(".column");
  304. _col.find(".columnPropertyEmpty").remove();
  305. $(this).parent().remove();
  306. if (_col.find("li").length == 0){
  307. _col.find("ul").html($("#columnPropertyEmptyTemplate").html());
  308. }
  309. });