ソースを参照

HUE-8441 [report] Add a document and statement picker demi modal

Enrico Berti 7 年 前
コミット
837d9f1b50

ファイルの差分が大きいため隠しています
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue-embedded.css


ファイルの差分が大きいため隠しています
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


ファイルの差分が大きいため隠しています
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 23 - 0
desktop/core/src/desktop/static/desktop/less/components/hue-selectize.less

@@ -443,6 +443,29 @@
   margin-right: 4px;
 }
 
+.selectize-width(@width: 200px) {
+  width: @width;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.selectize-100 {
+  .selectize-width(100px);
+}
+
+.selectize-200 {
+  .selectize-width(200px);
+}
+
+.selectize-300 {
+  .selectize-width(300px);
+}
+
+.selectize-400 {
+  .selectize-width(400px);
+}
+
 .hue-tags .selectize-input {
   padding-top: 6px;
   padding-bottom: 5px;

ファイルの差分が大きいため隠しています
+ 0 - 0
desktop/libs/dashboard/src/dashboard/static/dashboard/css/common_dashboard.css


+ 28 - 0
desktop/libs/dashboard/src/dashboard/static/dashboard/js/search.ko.js

@@ -2019,6 +2019,32 @@ var GEO_TYPES = ['SpatialRecursivePrefixTreeFieldType'];
 
 var RANGE_SELECTABLE_WIDGETS = ['histogram-widget', 'bar-widget', 'line-widget'];
 
+var TempDocument = function () {
+  var self = this;
+
+  self.uuid = ko.observable();
+  self.uuid.subscribe(function (val) {
+    if (val) {
+      ApiHelper.getInstance().fetchDocument({ uuid: val, silenceErrors: false, fetchContents: true }).done(function (data) {
+        if (data && data.data && data.data.snippets.length > 0) {
+          var snippet = data.data.snippets[0];
+          self.parsedStatements(sqlStatementsParser.parse(snippet.statement));
+          self.selectedStatement(self.parsedStatements()[0].statement);
+        }
+      });
+    }
+  });
+
+  self.parsedStatements = ko.observableArray([]);
+  self.selectedStatement = ko.observable();
+
+  self.reset = function () {
+    self.uuid('');
+    self.parsedStatements([]);
+    self.selectedStatement('');
+  }
+}
+
 
 var SearchViewModel = function (collection_json, query_json, initial_json, has_gridster_enabled, has_new_add_method) {
 
@@ -2044,6 +2070,8 @@ var SearchViewModel = function (collection_json, query_json, initial_json, has_g
   });
   self.showPlusButtonHintShownOnce = ko.observable(false);
 
+  self.tempDocument = new TempDocument();
+
 
   self.build = function () {
     self.intervalOptions = ko.observableArray(ko.bindingHandlers.daterangepicker.INTERVAL_OPTIONS);

+ 9 - 0
desktop/libs/dashboard/src/dashboard/static/dashboard/less/common_dashboard.less

@@ -679,4 +679,13 @@
   .draggable-plus-button:hover i:before {
     content: "\f047";
   }
+
+  .demi-modal-label {
+    float: left;
+    font-weight: bold;
+    color: @cui-blue-700;
+    padding-right: 8px;
+    padding-left: 20px;
+    padding-top: 5px;
+  }
 }

+ 34 - 4
desktop/libs/dashboard/src/dashboard/templates/common_search.mako

@@ -2765,6 +2765,25 @@ ${ dashboard.layout_skeleton(suffix='search') }
   <div><a class="pointer demi-modal-chevron" data-dismiss="modal" data-bind="click: addFacetDemiModalFieldCancel"><i class="fa fa-chevron-up"></i></a></div>
 </div>
 
+<div id="addDocumentFacetDemiModal" class="demi-modal fade" data-backdrop="false">
+  <div class="modal-body">
+    <a href="javascript: void(0)" data-dismiss="modal" data-bind="click: addFacetDemiModalFieldCancel" class="pull-right"><i class="fa fa-times"></i></a>
+    <div class="demi-modal-label">${ _('Query') }</div>
+    <div class="selectize-wrapper selectize-400">
+      <select placeholder="${ _('Search your queries...') }" data-bind="documentChooser: { value: $root.tempDocument.uuid, type: 'impala' }"></select>
+    </div>
+    <!-- ko if: $root.tempDocument.parsedStatements && $root.tempDocument.parsedStatements().length > 1 -->
+      <div class="demi-modal-label">${ _('Statement') }</div>
+      <div class="selectize-wrapper selectize-400">
+        <select placeholder="${ _('Available statements') }" data-bind="selectize: $root.tempDocument.parsedStatements, optionsText: 'statement', optionsValue: 'statement', value: $root.tempDocument.selectedStatement"></select>
+      </div>
+    <!-- /ko -->
+    <a class="btn btn-primary disable-feedback" data-bind="publish: 'dashboard.confirm.document'">${ _('Confirm') }</a>
+  </div>
+  <div><a class="pointer demi-modal-chevron" data-dismiss="modal" data-bind="click: addFacetDemiModalFieldCancel"><i class="fa fa-chevron-up"></i></a></div>
+</div>
+
+
 <div id="settingsDemiModal" class="demi-modal fade" data-backdrop="false">
   <a href="javascript: void(0)" data-dismiss="modal" class="pull-right" style="margin: 10px"><i class="fa fa-times"></i></a>
   <div class="modal-body">
@@ -4975,6 +4994,12 @@ $(document).ready(function () {
     }
   }, 'dashboard');
 
+  huePubSub.subscribe('dashboard.confirm.document', function () {
+    $('#addDocumentFacetDemiModal').modal('hide');
+    console.log('Selected document', searchViewModel.tempDocument.uuid(), 'statement', searchViewModel.tempDocument.selectedStatement());
+    searchViewModel.tempDocument.reset();
+  }, 'dashboard');
+
   huePubSub.subscribe('app.dom.unload', function (app) {
     if (app === 'dashboard') {
       $gridster.destroy();
@@ -5224,12 +5249,17 @@ $(document).ready(function () {
 
           selectedWidget = widget;
 
-          if (searchViewModel.collection.template.availableWidgetFields().length == 1 || widget.widgetType() == 'document-widget') {
-            addFacetDemiModalFieldPreview(searchViewModel.collection.template.availableWidgetFields()[0]);
+          if (widget.widgetType() == 'document-widget') {
+            $("#addDocumentFacetDemiModal").modal("show");
           }
           else {
-            $("#addFacetDemiModal").modal("show");
-            $("#addFacetDemiModal input[type='text']").focus();
+            if (searchViewModel.collection.template.availableWidgetFields().length == 1) {
+              addFacetDemiModalFieldPreview(searchViewModel.collection.template.availableWidgetFields()[0]);
+            }
+            else {
+              $("#addFacetDemiModal").modal("show");
+              $("#addFacetDemiModal input[type='text']").focus();
+            }
           }
         }
         else {

この差分においてかなりの量のファイルが変更されているため、一部のファイルを表示していません