Переглянути джерело

[impala] New dashboard wizard

Enrico Berti 11 роки тому
батько
коміт
e585373

+ 14 - 15
apps/impala/src/impala/templates/dashboard.mako

@@ -94,28 +94,27 @@ ${ commonheader(None, "impala", user) | n,unicode }
     % endif
     % endif
   </div>
   </div>
 
 
-
-  <form class="form-search" style="margin: 0" data-bind="submit: search">
-    <strong>${_("Search")}</strong>
-    <span data-bind="text: $root.dashboard.properties()[0].database"></span>.<span data-bind="text: $root.dashboard.properties()[0].table"></span>
-
+  <form class="form-search" style="margin: 0" data-bind="visible: $root.isEditing() && columns().length == 0">
+    ${ _('Select a database and a table') }
+    <!-- ko if: columns().length == 0 -->
     <select data-bind="options: $root.dashboard.dropdownDbs, value: $root.dashboard.selectedDropdownDb" class="input-medium chosen-select chosen-server hide" data-placeholder="${_('Choose a database...')}"></select>
     <select data-bind="options: $root.dashboard.dropdownDbs, value: $root.dashboard.selectedDropdownDb" class="input-medium chosen-select chosen-server hide" data-placeholder="${_('Choose a database...')}"></select>
     <select data-bind="options: $root.dashboard.dropdownTables, value: $root.dashboard.selectedDropdownTable" class="input-medium chosen-select chosen-table hide" data-placeholder="${_('Choose a table...')}"></select>
     <select data-bind="options: $root.dashboard.dropdownTables, value: $root.dashboard.selectedDropdownTable" class="input-medium chosen-select chosen-table hide" data-placeholder="${_('Choose a table...')}"></select>
 
 
     <a title="${_('Manually refresh the dropdowns')}" rel="tooltip" data-placement="bottom" class="pointer" data-bind="click: resetDropdownsCache"><i class="fa fa-refresh"></i></a>
     <a title="${_('Manually refresh the dropdowns')}" rel="tooltip" data-placement="bottom" class="pointer" data-bind="click: resetDropdownsCache"><i class="fa fa-refresh"></i></a>
+    <!-- /ko -->
+  </form>
 
 
-      <div class="input-append">
+  <form class="form-search" style="margin: 0" data-bind="submit: search, visible: columns().length != 0">
+    <strong>${_("Search")}</strong>
+    <!-- ko if: $root.dashboard.properties().length > 0 -->
+    <span data-bind="text: $root.dashboard.properties()[0].database"></span>.<span data-bind="text: $root.dashboard.properties()[0].table"></span>
+    <!-- /ko -->
+    <div class="input-append">
       <span data-bind="foreach: query.qs">
       <span data-bind="foreach: query.qs">
         <input data-bind="clearable: q" maxlength="4096" type="text" class="search-query input-xlarge">
         <input data-bind="clearable: q" maxlength="4096" type="text" class="search-query input-xlarge">
-  ##      <!-- ko if: $index() >= 1 -->
-  ##      <a class="btn" href="javascript:void(0)" data-bind="click: $root.query.removeQ"><i class="fa fa-minus"></i></a>
-  ##      <!-- /ko -->
+        <button type="submit" id="search-btn" class="btn btn-inverse"><i class="fa fa-search"></i></button>
       </span>
       </span>
-
-  ##    <a class="btn" href="javascript:void(0)" data-bind="click: $root.query.addQ"><i class="fa fa-plus"></i></a>
-
-      <button type="submit" id="search-btn" class="btn btn-inverse" style="margin-left:10px"><i class="fa fa-search"></i></button>
-      </div>
+    </div>
   </form>
   </form>
 </div>
 </div>
 
 
@@ -324,7 +323,7 @@ ${ dashboard.import_charts() }
           width: "130px",
           width: "130px",
           no_results_text: "${_('Oops, no table found!')}"
           no_results_text: "${_('Oops, no table found!')}"
           }).change(function () {
           }).change(function () {
-
+            viewModel.dashboard.properties([{'database': viewModel.dashboard.selectedDropdownDb(), 'table': viewModel.dashboard.selectedDropdownTable()}]);
           });
           });
         $(".chosen-select").trigger("chosen:updated");
         $(".chosen-select").trigger("chosen:updated");
       }, 200);
       }, 200);

+ 5 - 10
apps/impala/src/impala/views.py

@@ -127,16 +127,11 @@ def new_search(request):
 
 
   return render('dashboard.mako', request, {
   return render('dashboard.mako', request, {
     'query_json': json.dumps({}),
     'query_json': json.dumps({}),
-    'dashboard_json': json.dumps({'layout': [
-              {"size":2,"rows":[],"drops":["temp"],"klass":"card card-home card-column span2"},
-              {"size":10,"rows":[{"widgets":[
-                  {"size":12,"name":"Grid Results","id":"52f07188-f30f-1296-2450-f77e02e1a5c0","widgetType":"resultset-widget",
-                   "properties":{},"offset":0,"isLoading":True,"klass":"card card-widget span12"}]}],
-              "drops":["temp"],"klass":"card card-home card-column span10"}
-         ],
-        'facets': [],
-        'properties': [{'database': 'default', 'table': 'sample_07'}]
-        }), 
+    'dashboard_json': json.dumps({
+      'layout': [],
+      'facets': [],
+      'properties': []
+      })
   })
   })
 
 
 
 

+ 4 - 0
apps/impala/static/css/impala-dashboard.css

@@ -288,4 +288,8 @@ em {
 
 
 .chosen-container .chosen-results li {
 .chosen-container .chosen-results li {
   text-align: left;
   text-align: left;
+}
+
+#emptyDashboard {
+  right: 70px!important;
 }
 }

+ 11 - 4
apps/impala/static/js/impala-dashboard.ko.js

@@ -117,10 +117,13 @@ var Dashboard = function (vm, dashboard) {
   };
   };
 
 
   self.fields = ko.computed(function () {
   self.fields = ko.computed(function () {
-	return self.properties()[0].fields();
+    if (self.properties() != null && self.properties().length > 0 && self.properties()[0].fields != null){
+	    return self.properties()[0].fields();
+    }
+    return [];
   });
   });
   self.fieldNames = ko.computed(function () {
   self.fieldNames = ko.computed(function () {
-	return $.map(self.fields(), function (field) { return field.name()});
+	  return $.map(self.fields(), function (field) { return field.name()});
   });
   });
 
 
   self.resultsetShowFieldList = ko.observable(true);
   self.resultsetShowFieldList = ko.observable(true);
@@ -177,7 +180,7 @@ var Dashboard = function (vm, dashboard) {
 var ImpalaDashboardViewModel = function (query_json, dashboard_json) {
 var ImpalaDashboardViewModel = function (query_json, dashboard_json) {
     var self = this;
     var self = this;
 
 
-    self.isEditing = ko.observable(true);
+    self.isEditing = ko.observable(false);
     self.toggleEditing = function () {
     self.toggleEditing = function () {
       self.isEditing(! self.isEditing());
       self.isEditing(! self.isEditing());
     };
     };
@@ -194,8 +197,12 @@ var ImpalaDashboardViewModel = function (query_json, dashboard_json) {
     self.results_facet = ko.observableArray([]);
     self.results_facet = ko.observableArray([]);
     self.results_cols = ko.observableArray([]);
     self.results_cols = ko.observableArray([]);
 
 
+    self.inited = ko.observable(self.dashboard.facets().length > 0);
+
     self.init = function(callback) {
     self.init = function(callback) {
-      self.search();
+      if (self.inited()){
+        self.search();
+      }
       callback();
       callback();
     }
     }