浏览代码

HUE-6077 [frontend] Fixes query builder on Hue 3 and port the styles to common

Enrico Berti 8 年之前
父节点
当前提交
ca54d94

+ 1 - 1
apps/beeswax/src/beeswax/templates/execute.mako

@@ -417,6 +417,7 @@ ${ layout.menubar(section='query') }
                   <th width="10%">${ _('Table') }</th>
                   <th>${ _('Column') }</th>
                   <th width="10%">${ _('Operation') }</th>
+                  <th width="5%">&nbsp;</th>
                   <th width="1%">&nbsp;</th>
                 </tr>
               </thead>
@@ -822,7 +823,6 @@ ${ assist.assistJSModels() }
 %if ENABLE_QUERY_BUILDER.get():
 <!-- For query builder -->
 <link rel="stylesheet" href="${ static('desktop/ext/css/jquery.contextMenu.min.css') }">
-<link rel="stylesheet" href="${ static('desktop/css/queryBuilder.css') }">
 <script src="${ static('desktop/ext/js/jquery/plugins/jquery.contextMenu.min.js') }"></script>
 <script src="${ static('desktop/ext/js/jquery/plugins/jquery.ui.position.min.js') }"></script>
 <script src="${ static('desktop/js/queryBuilder.js') }"></script>

文件差异内容过多而无法显示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


文件差异内容过多而无法显示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 0 - 77
desktop/core/src/desktop/static/desktop/css/queryBuilder.css

@@ -1,77 +0,0 @@
-/*
- Licensed to Cloudera, Inc. under one
- or more contributor license agreements.  See the NOTICE file
- distributed with this work for additional information
- regarding copyright ownership.  Cloudera, Inc. licenses this file
- to you under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance
- with the License.  You may obtain a copy of the License at
-
-     http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
-*/
-
-#queryBuilder {
-  text-align: center;
-}
-
-#queryBuilder #column li {
-  color: blue;
-  text-decoration: underline;
-  list-style: none;
-}
-
-#queryBuilder #column li:hover {
-  cursor: pointer;
-}
-
-#queryBuilder .databaseAndTable {
-  color: #999;
-  min-width: 10em;
-}
-
-#queryBuilder .queryBuilderRow {
-  border-collapse: separate;
-  border-spacing-bottom: 10px;
-  cursor: default;
-}
-
-#queryBuilder .column {
-  font-family: monospace;
-}
-
-#queryBuilder .deleteRule {
-  color: #999;
-  text-align: right;
-}
-
-.deleteRule:hover {
-  color: #333;
-  cursor: pointer;
-}
-
-#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;
-}
-
-.context-menu-item.context-menu-hover{
-  background-color: #E8F5FE!important;
-  color: #333!important;
-}
-

+ 20 - 14
desktop/core/src/desktop/static/desktop/js/queryBuilder.js

@@ -66,7 +66,7 @@
      * @return {Object} Query rule row
      */
     QueryBuilder.getRule = function (database, table, column, rule) {
-      return $('.queryBuilderRow[database=\'' + database + '\'][table=\'' + table + '\'][column=\'' + column + '\'][rule=\'' + rule + '\']');
+      return $('.queryBuilderRow[database="' + database + '"][table="' + table + '"][column="' + column + '"][rule="' + rule + '"]');
     };
 
     /**
@@ -78,7 +78,7 @@
      * @return {number} Number of matching rows
      */
     QueryBuilder.countRulesByCategory = function (database, table, column, category) {
-      return $('.queryBuilderRow[database=\'' + database + '\'][table=\'' + table + '\'][column=\'' + column + '\'][category=\'' + category + '\']').length;
+      return $('.queryBuilderRow[database="' + database + '"][table="' + table + '"][column="' + column + '"][category="' + category + '"]').length;
     };
 
     /**
@@ -89,7 +89,7 @@
      * @return {Object} Query row
      */
     QueryBuilder.getFirstMatchingRow = function (database, table, column) {
-      return $('.queryBuilderRow[database=\'' + database + '\'][table=\'' + table + '\'][column=\'' + column + '\']').first();
+      return $('.queryBuilderRow[database="' + database + '"][table="' + table + '"][column="' + column + '"]').first();
     };
 
     /**
@@ -100,7 +100,7 @@
      * @return {number} Number of matching rules
      */
     QueryBuilder.countMatchingRows = function (database, table, column) {
-      return $('.queryBuilderRow[database=\'' + database + '\'][table=\'' + table + '\'][column=\'' + column + '\']').length;
+      return $('.queryBuilderRow[database="' + database + '"][table="' + table + '"][column="' + column + '"]').length;
     };
 
     /**
@@ -152,22 +152,28 @@
       // Should we hide databaseAndTable and column?
       var visibility = '';
       if (numOfMatchingRows) {
-        visibility = 'style=\'visibility:hidden\'';
+        visibility = 'style="visibility:hidden"';
       }
 
       // Should we have an input field?
       var inputField = '';
       if (hasInput) {
-        inputField = '<input type=\'text\' placeholder=\'Add here\' required>';
+        inputField = '<input type="text" placeholder="' + QueryBuilderGlobals.i18n.INSERT_VALUE_HERE + '" required>';
       }
 
       // Used to store new rule
-      var row = '<tr class=\'queryBuilderRow\' database=\'' + database + '\' table=\'' + table + '\' column=\'' + column + '\' rule=\'' + rule + '\' category=\'' + category + '\' template=\'' + template + '\'>\n                       <td class=\'databaseAndTable\' ' + visibility + '>' + database + '.' + table + '</td>\n                       <td class=\'column\' ' + visibility + '>' + column + '</td>\n                       <td class=\'rule\'>' + rule + '</td>\n                       <td class=\'input\'>' + inputField + '</td>\n                       <td class=\'deleteRule\' onclick=\'QueryBuilder.deleteRule($(this).closest("tr"))\'><i class=\'fa fa-times\'></i></td>\n                       </tr>';
+      var row = '<tr class="queryBuilderRow" database="' + database + '" table="' + table + '" column="' + column + '" rule="' + rule + '" category="' + category + '" template="' + template + '">' +
+        '<td class="databaseAndTable" ' + visibility + '>' + database + '.' + table + '</td>' +
+        '<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"))"><i class="fa fa-times"></i></td>' +
+        '</tr>';
 
       // Check if the column is already in the rules
       if (numOfMatchingRows) {
         // Add after the last rule for this column
-        $('.queryBuilderRow[database=\'' + database + '\'][table=\'' + table + '\'][column=\'' + column + '\']').last().after(row);
+        $('.queryBuilderRow[database="' + database + '"][table="' + table + '"][column="' + column + '"]').last().after(row);
       } else {
         // Add at end of rules
         $('#queryBuilder').append(row);
@@ -212,22 +218,22 @@
       var query = (_query = {}, _query[PROJECT] = [], _query[AGGREGATE] = [], _query[FILTER] = [], _query[ORDER] = [], _query[FROM] = {}, _query);
 
       // Populate project
-      $('.queryBuilderRow[category=\'' + PROJECT + '\']').each(function () {
+      $('.queryBuilderRow[category="' + PROJECT + '"]').each(function () {
         QueryBuilder.addRuleToQuery(PROJECT, query, $(this));
       });
 
       // Populate aggregate
-      $('.queryBuilderRow[category=\'' + AGGREGATE + '\']').each(function () {
+      $('.queryBuilderRow[category="' + AGGREGATE + '"]').each(function () {
         QueryBuilder.addRuleToQuery(AGGREGATE, query, $(this));
       });
 
       // Populate filter
-      $('.queryBuilderRow[category=\'' + FILTER + '\']').each(function () {
+      $('.queryBuilderRow[category="' + FILTER + '"]').each(function () {
         QueryBuilder.addRuleToQuery(FILTER, query, $(this));
       });
 
       // Populate order
-      $('.queryBuilderRow[category=\'' + ORDER + '\']').each(function () {
+      $('.queryBuilderRow[category="' + ORDER + '"]').each(function () {
         QueryBuilder.addRuleToQuery(ORDER, query, $(this));
       });
 
@@ -250,7 +256,7 @@
       if (rules[PROJECT].length < 1 && rules[AGGREGATE].length < 1) {
         return {
           "status": "fail",
-          "message": "Query requires a select or aggregate."
+          "message": QueryBuilderGlobals.i18n.QUERY_REQUIRE
         };
       }
 
@@ -259,7 +265,7 @@
       // Indent for select
       var selectIndent;
       // Check if using SELECT DISTINCT
-      if ($('.queryBuilderRow[rule=\'' + SELECT_DISTINCT + '\']').length > 0) {
+      if ($('.queryBuilderRow[rule="' + SELECT_DISTINCT + '"]').length > 0) {
         finalQuery = 'SELECT DISTINCT ';
         selectIndent = '                ';
       } else {

+ 69 - 0
desktop/core/src/desktop/static/desktop/less/components/hue-query-builder.less

@@ -0,0 +1,69 @@
+/*
+ Licensed to Cloudera, Inc. under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  Cloudera, Inc. licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License.  You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+#queryBuilder {
+  text-align: center;
+  td {
+    vertical-align: middle;
+  }
+  input {
+    margin-bottom: 0;
+  }
+  #column li {
+    color: blue;
+    text-decoration: underline;
+    list-style: none;
+  }
+  #column li:hover {
+    cursor: pointer;
+  }
+  .databaseAndTable {
+    color: @cui-gray-700;
+    min-width: 10em;
+  }
+  .queryBuilderRow {
+    border-collapse: separate;
+    border-spacing-bottom: 10px;
+    cursor: default;
+  }
+  .column {
+    font-family: monospace;
+  }
+  .deleteRule {
+    color: @cui-gray-700;
+    text-align: right;
+  }
+  .deleteRule:hover {
+    color: @cui-gray-800;
+    cursor: pointer;
+  }
+  .noselect {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+  .button-panel {
+    margin: auto;
+    text-align: center;
+    margin-top: 1em;
+  }
+}
+

+ 1 - 0
desktop/core/src/desktop/static/desktop/less/hue-cross-version.less

@@ -30,6 +30,7 @@
 @import "components/hue-spinner.less";
 @import "components/hue-tour.less";
 @import "components/hue-scrollbar.less";
+@import "components/hue-query-builder.less";
 @import "hue-helpers.less";
 
 .app-header {

+ 1 - 1
desktop/core/src/desktop/templates/common_header.mako

@@ -169,7 +169,7 @@ if USE_NEW_EDITOR.get():
       var appName = '';
       if ('${ 'metastore' in apps }' === 'True' && location.href.indexOf('${"metastore" in apps and apps["metastore"].display_name}') !== -1) {
         appName = 'metastore';
-      } else if (location.href.indexOf('${ url('notebook:editor') }') !== -1) {
+      } else if (location.href.indexOf('editor') !== -1) {
         appName = 'editor'
       }
       huePubSub.publish('set.current.app.name', appName);

+ 7 - 0
desktop/core/src/desktop/templates/common_header_footer_components.mako

@@ -175,6 +175,13 @@ from metadata.conf import has_optimizer, OPTIMIZER
         }
       }
     };
+
+    QueryBuilderGlobals = {
+      i18n: {
+        INSERT_VALUE_HERE: "${ _('Insert value here') }",
+        QUERY_REQUIRE: "${ _('Query requires a select or aggregate.') }"
+      }
+    }
   </script>
 
   <!--[if lt IE 9]>

+ 1 - 1
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -79,7 +79,6 @@ from notebook.conf import ENABLE_QUERY_BUILDER, ENABLE_QUERY_SCHEDULING, ENABLE_
 %if ENABLE_QUERY_BUILDER.get():
 <!-- For query builder -->
 <link rel="stylesheet" href="${ static('desktop/ext/css/jquery.contextMenu.min.css') }">
-<link rel="stylesheet" href="${ static('desktop/css/queryBuilder.css') }">
 <script src="${ static('desktop/ext/js/jquery/plugins/jquery.contextMenu.min.js') }"></script>
 <script src="${ static('desktop/ext/js/jquery/plugins/jquery.ui.position.min.js') }"></script>
 <script src="${ static('desktop/js/queryBuilder.js') }"></script>
@@ -853,6 +852,7 @@ from notebook.conf import ENABLE_QUERY_BUILDER, ENABLE_QUERY_SCHEDULING, ENABLE_
                 <th width="10%">${ _('Table') }</th>
                 <th>${ _('Column') }</th>
                 <th width="10%">${ _('Operation') }</th>
+                <th width="5%">&nbsp;</th>
                 <th width="1%">&nbsp;</th>
               </tr>
             </thead>

部分文件因为文件数量过多而无法显示