浏览代码

HUE-1484 [hbase] Grid layout option

Kevin Wang 12 年之前
父节点
当前提交
347d01e

+ 2 - 1
apps/hbase/src/hbase/templates/app.mako

@@ -55,7 +55,7 @@ ${ commonheader(None, "hbase", user) | n,unicode }
 </%def>
 
 <%def name="smartview(datasource)">
-  <div class="smartview" data-bind="foreach: ${datasource}.items()">
+  <div class="smartview" data-bind="foreach: ${datasource}.items(), css: { 'gridView': ${datasource}.showGrid() }">
     <div class="smartview-row" data-bind="css:{selected:$data.isSelected()}, visible: $data.items().length > 0 || $data.isLoading()">
       <h5 data-bind="click: lockClickOrigin($data.select, $element)"><code class="row_key" data-bind="text: $data.row.slice(0, 100) + ($data.row.length > 100 ? '...' : '')"></code> <i class="icon-check-sign" data-bind="visible:$data.isSelected()"></i> <img data-bind="visible: $data.isLoading()" src="/static/art/spinner.gif" />
         <span class="smartview-row-controls controls-hover-bottom">
@@ -221,6 +221,7 @@ ${ commonheader(None, "hbase", user) | n,unicode }
             <!-- /ko -->
            </span>
             <span class="pull-right">
+              <button class="btn" data-bind="click: function(){views.tabledata.showGrid(!views.tabledata.showGrid());}, clickBubble: false" data-toggle="tooltip" title="${_('Toggle Grid')}"><i class="icon-table"></i></button>
               <input type="text" placeholder="Filter Columns/Families" style="margin-left: 5px;" data-bind="value: app.views.tabledata.columnQuery, clickBubble: false"/>
               <button class="btn" data-bind="click: views.tabledata.toggleSelectAll" style="margin-left: 5px;" data-toggle="tooltip" title="${_('Toggle Select All Rows')}"><i class="icon-check-sign"></i> ${_('All')}</button>
               ${sortBtn('views.tabledata.sortDropDown')}

+ 4 - 0
apps/hbase/static/css/hbase.css

@@ -135,6 +135,10 @@ ul#hbase-breadcrumbs li a {
     border-top:0px;
 }
 
+.smartview.gridView ul.smartview-cells > li {
+	width: 200px;
+}
+
 .smartview ul.smartview-cells > li > div {
 	position: relative;
 	margin-bottom: 10px;

+ 38 - 0
apps/hbase/static/js/controls.js

@@ -318,6 +318,44 @@ var SmartViewModel = function(options) {
     });
   };
 
+  self.showGrid = ko.observable(false);
+  self.showGrid.subscribe(function(val) {
+    if(val) {
+      var rows = self.items();
+      var columns = {};
+      //build full lookup hash of columns
+      for(var i=0; i<rows.length; i++) {
+        var cols = rows[i].items();
+        for(var q=0; q<cols.length; q++) {
+          if(!columns[cols[q].name])
+            columns[cols[q].name] = "";
+        }
+      }
+
+      for(var i=0; i<rows.length; i++) {
+        //clone blank template from hash
+        var new_row = $.extend({}, columns);
+        var cols = rows[i].items();
+        var col_list = [];
+        //set existing values
+        for(var q=0; q<cols.length; q++) {
+          new_row[cols[q].name] = cols[q];
+        }
+        //build actual row from hash
+        var keys = Object.keys(new_row);
+        for(var r=0; r<keys.length; r++) {
+          if(!new_row[keys[r]]) new_row[keys[r]] = new ColumnRow({ name: keys[r], value: '', parent: rows[i] });
+          col_list.push(new_row[keys[r]]);
+        }
+        //set and sort
+        rows[i].items(col_list);
+        rows[i].sortDropDown.sort();
+      }
+    } else {
+      self.reload();
+    }
+  });
+
   self.truncateLimit = ko.observable(1500);
 
   self.reachedLimit = ko.computed(function() {

+ 1 - 0
apps/hbase/static/js/utils.js

@@ -223,6 +223,7 @@ function resetElements() {
       }
     });
   });
+  app.views.tabledata.showGrid(false);
   resetSearch();
 };