Эх сурвалжийг харах

HUE-3540 [editor] Prettify the query builder

Enrico Berti 9 жил өмнө
parent
commit
ca94129

+ 34 - 10
apps/beeswax/src/beeswax/templates/execute.mako

@@ -398,7 +398,17 @@ ${ layout.menubar(section='query') }
 
           <div class="tab-pane" id="queryBuilderTab">
             <form onsubmit="generateQuery(); return false;">
-              <table id="queryBuilder"></table>
+              <div id="queryBuilderAlert" style="display: none" class="alert">${ _('There are currently no rules defined. To get started, right click on any table column in the SQL Assist panel.') }</div>
+              <table id="queryBuilder" class="table table-condensed">
+                <thead>
+                  <tr>
+                    <th width="10%">${ _('Table') }</th>
+                    <th>${ _('Column') }</th>
+                    <th width="10%">${ _('Operation') }</th>
+                    <th width="1%">&nbsp;</th>
+                  </tr>
+                </thead>
+              </table>
               <div class="button-panel">
                 <button class="btn btn-primary disable-feedback">${_('Build query')}</button>
               </div>
@@ -773,7 +783,7 @@ ${ layout.menubar(section='query') }
     <p>${_('Query requires a select or an aggregate.')}</p>
   </div>
   <div class="modal-footer">
-    <a class="btn" data-dismiss="modal">${_('Ok')}</a>
+    <a class="btn" data-dismiss="modal">${_('Close')}</a>
   </div>
 </div>
 
@@ -809,19 +819,33 @@ ${ commonshare() | n,unicode }
 <script>
   // query-builder-menu is the class to use
   // Callback will run after each rule add, just focus to the queryBuilder tab
-  QueryBuilder.bindMenu('.query-builder-menu', function() {
+  QueryBuilder.bindMenu('.query-builder-menu', function () {
     $("a[href='#queryBuilderTab']").click();
   });
   function generateQuery() {
-      var result = QueryBuilder.buildHiveQuery();
-      if (result.status == "fail") {
-          $("#invalidQueryBuilder").modal("show");
-      } else {
-          codeMirror.setValue(result.query);
-          codeMirror.focus();
-      }
+    var result = QueryBuilder.buildHiveQuery();
+    if (result.status == "fail") {
+      $("#invalidQueryBuilder").modal("show");
+    } else {
+      replaceAce(result.query);
+    }
   }
+
+  window.setInterval(function(){
+    if ($('#queryBuilder tbody').length > 0 && $('#queryBuilder tbody').find('tr').length > 0){
+      $('.button-panel').show();
+      $('#queryBuilder').show();
+      $('#queryBuilderAlert').hide();
+    }
+    else {
+      $('.button-panel').hide();
+      $('#queryBuilder').hide();
+      $('#queryBuilderAlert').show();
+    }
+  }, 500);
+
 </script>
+
 <!-- End query builder imports -->
 
 <script src="${ static('desktop/ext/js/codemirror-3.11.js') }"></script>

+ 46 - 50
desktop/core/src/desktop/static/desktop/css/queryBuilder.css

@@ -16,66 +16,62 @@
  limitations under the License.
 */
 
-#column li {
-    color: blue;
-    text-decoration: underline;
-    list-style: none;
-}
-#column li:hover {
-    cursor: pointer;
-}
 #queryBuilder {
-    text-align: center;
-    margin-right: auto;
-    margin-left: auto;
+  text-align: center;
 }
-#queryBuilder {} .databaseAndTable {
-    color: #999;
-    min-width: 10em;
+
+#queryBuilder #column li {
+  color: blue;
+  text-decoration: underline;
+  list-style: none;
 }
-#queryBuilder {} .queryBuilderRow {
-    border-collapse: separate;
-    border-spacing-bottom: 10px;
-    cursor: default;
+
+#queryBuilder #column li:hover {
+  cursor: pointer;
 }
-#queryBuilder {} .column {
-    font-family: monospace;
-    padding-left: 0.5em;
+
+#queryBuilder .databaseAndTable {
+  color: #999;
+  min-width: 10em;
 }
-#queryBuilder {} .rule {
-    padding-left: 1em;
+
+#queryBuilder .queryBuilderRow {
+  border-collapse: separate;
+  border-spacing-bottom: 10px;
+  cursor: default;
 }
-#queryBuilder {} .input {
-    padding-left: 1em;
+
+#queryBuilder .column {
+  font-family: monospace;
 }
-#queryBuilder {} .deleteRule {
-    color: #999;
-    padding-left: 1em;
+
+#queryBuilder .deleteRule {
+  color: #999;
+  text-align: right;
 }
+
 .deleteRule:hover {
-    color: #333;
-    cursor: pointer;
+  color: #333;
+  cursor: pointer;
 }
-#queryBuilder {} .container {
-    width: 80%;
-    margin: auto;
-    min-width: 1100px;
-    max-width: 1300px;
-    position: relative;
-}
-#queryBuilder {} .ruleInputPlain {
-    margin-left: 1em;
+
+#queryBuilder .noselect {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
-#queryBuilder {} .noselect {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
+
+#queryBuilder .button-panel {
+  margin: auto;
+  text-align: center;
+  margin-top: 1em;
 }
-#queryBuilder {} .button-panel {
-    margin: auto;
-    text-align: center;
-    margin-top: 1em;
+
+.context-menu-item.context-menu-hover{
+  background-color: #E8F5FE!important;
+  color: #333!important;
 }
+

+ 3 - 2
desktop/core/src/desktop/static/desktop/js/queryBuilder.js

@@ -168,7 +168,7 @@
                        <td class='column' ${visibility}>${column}</td>
                        <td class='rule'>${rule}</td>
                        <td class='input'>${inputField}</td>
-                       <td class='deleteRule' onclick='QueryBuilder.deleteRule($(this).closest("tr"))'></td>
+                       <td class='deleteRule' onclick='QueryBuilder.deleteRule($(this).closest("tr"))'><i class='fa fa-times'></i></td>
                        </tr>`;
 
             // Check if the column is already in the rules
@@ -369,7 +369,8 @@
                         items: {
                             "column-name": {
                                 name: column,
-                                disabled: true
+                                disabled: true,
+                                className: 'muted'
                             },
                             "sep1": "---------",
                             [PROJECT]: {

+ 37 - 15
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -52,17 +52,31 @@ from desktop.views import _ko
 <script>
   // query-builder-menu is the class to use
   // Callback will run after each rule add, just focus to the queryBuilder tab
-  QueryBuilder.bindMenu('.query-builder-menu', function() {
+  QueryBuilder.bindMenu('.query-builder-menu', function () {
     $("a[href='#queryBuilderTab']").click();
   });
   function generateQuery() {
-      var result = QueryBuilder.buildHiveQuery();
-      if (result.status == "fail") {
-          $("#invalidQueryBuilder").modal("show");
-      } else {
-          replaceAce(result.query);
-      }
+    var result = QueryBuilder.buildHiveQuery();
+    if (result.status == "fail") {
+      $("#invalidQueryBuilder").modal("show");
+    } else {
+      replaceAce(result.query);
+    }
   }
+
+  window.setInterval(function(){
+    if ($('#queryBuilder tbody').length > 0 && $('#queryBuilder tbody').find('tr').length > 0){
+      $('.button-panel').show();
+      $('#queryBuilder').show();
+      $('#queryBuilderAlert').hide();
+    }
+    else {
+      $('.button-panel').hide();
+      $('#queryBuilder').hide();
+      $('#queryBuilderAlert').show();
+    }
+  }, 500);
+
 </script>
 <!-- End query builder imports -->
 
@@ -342,7 +356,7 @@ ${ hueIcons.symbols() }
     <p>${_('Query requires a select or an aggregate.')}</p>
   </div>
   <div class="modal-footer">
-    <a class="btn" data-dismiss="modal">${_('Ok')}</a>
+    <a class="btn" data-dismiss="modal">${_('Close')}</a>
   </div>
 </div>
 
@@ -548,13 +562,21 @@ ${ hueIcons.symbols() }
           <!-- /ko -->
         </div>
 
-        <div class="tab-pane" id="queryBuilderTab">
-          <!--form onsubmit="generateQuery(); return false;"-->
-            <table id="queryBuilder"></table>
-            <div class="button-panel">
-              <button class="btn btn-primary disable-feedback" onclick="generateQuery()">${_('Build query')}</button>
-            </div>
-          <!--/form-->
+        <div class="tab-pane margin-top-10" id="queryBuilderTab">
+          <div id="queryBuilderAlert" style="display: none" class="alert">${ _('There are currently no rules defined. To get started, right click on any table column in the SQL Assist panel.') }</div>
+          <table id="queryBuilder" class="table table-condensed">
+            <thead>
+              <tr>
+                <th width="10%">${ _('Table') }</th>
+                <th>${ _('Column') }</th>
+                <th width="10%">${ _('Operation') }</th>
+                <th width="1%">&nbsp;</th>
+              </tr>
+            </thead>
+          </table>
+          <div class="button-panel">
+            <button class="btn btn-primary disable-feedback" data-bind="click: generateQuery">${_('Build query')}</button>
+          </div>
         </div>
       </div>