Backport web console fixes [16318, 16359, 16375] to 30.0.0 (#16441)

* Web console: surface more info on the supervisor view (#16318) * add rate and stats * better tabs * detail * add recent errors * update tests * don't let people hide the actions column because why * don't sort on actions * better way to agg * add timeouts * show error only once * fix tests and Explain showing up * only consider active tasks * refresh * fix tests * better formatting * web-console: ACE editor refactoring (#16359) * Move druid-sql completions to dsql mode * Use font-size 12 * Convert ace-modes to typescript * Move aceCompleters to class member * Use namespace imports * Web console: concat data when doing a durable storage download (#16375) * concat data * fix silly console.error --------- Co-authored-by: John Gozde <john@gozde.ca>
apache · May 14, 2024 · fca7ea2 · fca7ea2
1 parent 463fb3e
commit fca7ea2
Show file tree

Hide file tree

Showing 53 changed files with 1,063 additions and 521 deletions.
diff --git a/web-console/lib/sql-docs.d.ts b/web-console/lib/sql-docs.d.ts
@@ -16,5 +16,5 @@
  * limitations under the License.
  */
 
-export const SQL_DATA_TYPES: Record<string, [runtime: string, description: string][]>;
+export const SQL_DATA_TYPES: Record<string, [runtime: string, description: string]>;
 export const SQL_FUNCTIONS: Record<string, [args: string, description: string][]>;
diff --git a/web-console/src/ace-modes/__snapshots__/make-doc-html.spec.ts.snap b/web-console/src/ace-modes/__snapshots__/make-doc-html.spec.ts.snap
@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`makeDocHtml correctly formats helper HTML 1`] = `
+"
+<div class="doc-name">COUNT</div>
+<div class="doc-syntax">COUNT(*)</div>
+<div class="doc-description">Counts the number of things</div>"
+`;
diff --git a/web-console/src/ace-modes/dsql.js → web-console/src/ace-modes/dsql.ts b/web-console/src/ace-modes/dsql.js → web-console/src/ace-modes/dsql.ts
@@ -21,36 +21,42 @@
 // Originally licensed under the MIT license (https://github.com/thlorenz/brace/blob/master/LICENSE)
 // This file was modified to make the list of keywords more closely adhere to what is found in DruidSQL
 
-var druidKeywords = require('../../lib/keywords');
-var druidFunctions = require('../../lib/sql-docs');
+import type { Ace } from 'ace-builds';
+import ace from 'ace-builds/src-noconflict/ace';
+
+import * as druidKeywords from '../../lib/keywords';
+import * as druidFunctions from '../../lib/sql-docs';
+
+import type { ItemDescription } from './make-doc-html';
+import { makeDocHtml } from './make-doc-html';
 
 ace.define(
   'ace/mode/dsql_highlight_rules',
   ['require', 'exports', 'module', 'ace/lib/oop', 'ace/mode/text_highlight_rules'],
-  function (acequire, exports, module) {
+  function (acequire: any, exports: any) {
     'use strict';
 
-    var oop = acequire('../lib/oop');
-    var TextHighlightRules = acequire('./text_highlight_rules').TextHighlightRules;
+    const oop = acequire('../lib/oop');
+    const TextHighlightRules = acequire('./text_highlight_rules').TextHighlightRules;
 
-    var SqlHighlightRules = function () {
+    const SqlHighlightRules = function (this: any) {
       // Stuff like: 'with|select|from|where|and|or|group|by|order|limit|having|as|case|'
-      var keywords = druidKeywords.SQL_KEYWORDS.concat(druidKeywords.SQL_EXPRESSION_PARTS)
+      const keywords = druidKeywords.SQL_KEYWORDS.concat(druidKeywords.SQL_EXPRESSION_PARTS)
         .join('|')
         .replace(/\s/g, '|');
 
       // Stuff like: 'true|false'
-      var builtinConstants = druidKeywords.SQL_CONSTANTS.join('|');
+      const builtinConstants = druidKeywords.SQL_CONSTANTS.join('|');
 
       // Stuff like: 'avg|count|first|last|max|min'
-      var builtinFunctions = druidKeywords.SQL_DYNAMICS.concat(
+      const builtinFunctions = druidKeywords.SQL_DYNAMICS.concat(
         Object.keys(druidFunctions.SQL_FUNCTIONS),
       ).join('|');
 
       // Stuff like: 'int|numeric|decimal|date|varchar|char|bigint|float|double|bit|binary|text|set|timestamp'
-      var dataTypes = Object.keys(druidFunctions.SQL_DATA_TYPES).join('|');
+      const dataTypes = Object.keys(druidFunctions.SQL_DATA_TYPES).join('|');
 
-      var keywordMapper = this.createKeywordMapper(
+      const keywordMapper = this.createKeywordMapper(
         {
           'support.function': builtinFunctions,
           'keyword': keywords,
@@ -122,24 +128,67 @@ ace.define(
 ace.define(
   'ace/mode/dsql',
   ['require', 'exports', 'module', 'ace/lib/oop', 'ace/mode/text', 'ace/mode/dsql_highlight_rules'],
-  function (acequire, exports, module) {
+  function (acequire: any, exports: any) {
     'use strict';
 
-    var oop = acequire('../lib/oop');
-    var TextMode = acequire('./text').Mode;
-    var SqlHighlightRules = acequire('./dsql_highlight_rules').SqlHighlightRules;
-
-    var Mode = function () {
+    const oop = acequire('../lib/oop');
+    const TextMode = acequire('./text').Mode;
+    const SqlHighlightRules = acequire('./dsql_highlight_rules').SqlHighlightRules;
+
+    const completions = ([] as Ace.Completion[]).concat(
+      druidKeywords.SQL_KEYWORDS.map(v => ({ name: v, value: v, score: 0, meta: 'keyword' })),
+      druidKeywords.SQL_EXPRESSION_PARTS.map(v => ({
+        name: v,
+        value: v,
+        score: 0,
+        meta: 'keyword',
+      })),
+      druidKeywords.SQL_CONSTANTS.map(v => ({ name: v, value: v, score: 0, meta: 'constant' })),
+      druidKeywords.SQL_DYNAMICS.map(v => ({ name: v, value: v, score: 0, meta: 'dynamic' })),
+      Object.entries(druidFunctions.SQL_DATA_TYPES).map(([name, [runtime, description]]) => {
+        const item: ItemDescription = {
+          name,
+          description,
+          syntax: `Druid runtime type: ${runtime}`,
+        };
+        return {
+          name,
+          value: name,
+          score: 0,
+          meta: 'type',
+          docHTML: makeDocHtml(item),
+          docText: description,
+        };
+      }),
+      Object.entries(druidFunctions.SQL_FUNCTIONS).flatMap(([name, versions]) => {
+        return versions.map(([args, description]) => {
+          const item = { name, description, syntax: `${name}(${args})` };
+          return {
+            name,
+            value: versions.length > 1 ? `${name}(${args})` : name,
+            score: 1100, // Use a high score to appear over the 'local' suggestions that have a score of 1000
+            meta: 'function',
+            docHTML: makeDocHtml(item),
+            docText: description,
+            completer: {
+              insertMatch: (editor: any, data: any) => {
+                editor.completer.insertMatch({ value: data.name });
+              },
+            },
+          } as Ace.Completion;
+        });
+      }),
+    );
+
+    const Mode = function (this: any) {
       this.HighlightRules = SqlHighlightRules;
       this.$behaviour = this.$defaultBehaviour;
-    };
-    oop.inherits(Mode, TextMode);
+      this.$id = 'ace/mode/dsql';
 
-    (function () {
       this.lineCommentStart = '--';
-
-      this.$id = 'ace/mode/dsql';
-    }).call(Mode.prototype);
+      this.getCompletions = () => completions;
+    };
+    oop.inherits(Mode, TextMode);
 
     exports.Mode = Mode;
   },

diff --git a/web-console/src/ace-modes/hjson.js → web-console/src/ace-modes/hjson.ts b/web-console/src/ace-modes/hjson.js → web-console/src/ace-modes/hjson.ts
@@ -22,16 +22,18 @@
 // This file was modified to remove the folding functionality that did not play nice when loaded along side the
 // sql mode (which does not have any folding function)
 
+import ace from 'ace-builds/src-noconflict/ace';
+
 ace.define(
   'ace/mode/hjson_highlight_rules',
   ['require', 'exports', 'module', 'ace/lib/oop', 'ace/mode/text_highlight_rules'],
-  function (acequire, exports, module) {
+  function (acequire: any, exports: any) {
     'use strict';
 
-    var oop = acequire('../lib/oop');
-    var TextHighlightRules = acequire('./text_highlight_rules').TextHighlightRules;
+    const oop = acequire('../lib/oop');
+    const TextHighlightRules = acequire('./text_highlight_rules').TextHighlightRules;
 
-    var HjsonHighlightRules = function () {
+    const HjsonHighlightRules = function (this: any) {
       this.$rules = {
         'start': [
           {
@@ -107,7 +109,7 @@ ace.define(
         '#keyname': [
           {
             token: 'keyword',
-            regex: /(?:[^,\{\[\}\]\s]+|"(?:[^"\\]|\\.)*")\s*(?=:)/,
+            regex: /(?:[^,{[}\]\s]+|"(?:[^"\\]|\\.)*")\s*(?=:)/,
           },
         ],
         '#mstring': [
@@ -166,7 +168,7 @@ ace.define(
         '#rootObject': [
           {
             token: 'paren',
-            regex: /(?=\s*(?:[^,\{\[\}\]\s]+|"(?:[^"\\]|\\.)*")\s*:)/,
+            regex: /(?=\s*(?:[^,{[}\]\s]+|"(?:[^"\\]|\\.)*")\s*:)/,
             push: [
               {
                 token: 'paren.rparen',
@@ -205,7 +207,7 @@ ace.define(
               },
               {
                 token: 'constant.language.escape',
-                regex: /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/,
+                regex: /\\(?:["\\/bfnrt]|u[0-9a-fA-F]{4})/,
               },
               {
                 token: 'invalid.illegal',
@@ -220,7 +222,7 @@ ace.define(
         '#ustring': [
           {
             token: 'string',
-            regex: /\b[^:,0-9\-\{\[\}\]\s].*$/,
+            regex: /\b[^:,0-9\-{[}\]\s].*$/,
           },
         ],
         '#value': [
@@ -277,19 +279,19 @@ ace.define(
     'ace/mode/text',
     'ace/mode/hjson_highlight_rules',
   ],
-  function (acequire, exports, module) {
+  function (acequire: any, exports: any) {
     'use strict';
 
-    var oop = acequire('../lib/oop');
-    var TextMode = acequire('./text').Mode;
-    var HjsonHighlightRules = acequire('./hjson_highlight_rules').HjsonHighlightRules;
+    const oop = acequire('../lib/oop');
+    const TextMode = acequire('./text').Mode;
+    const HjsonHighlightRules = acequire('./hjson_highlight_rules').HjsonHighlightRules;
 
-    var Mode = function () {
+    const Mode = function (this: any) {
       this.HighlightRules = HjsonHighlightRules;
     };
     oop.inherits(Mode, TextMode);
 
-    (function () {
+    (function (this: any) {
       this.lineCommentStart = '//';
       this.blockComment = { start: '/*', end: '*/' };
       this.$id = 'ace/mode/hjson';

diff --git a/web-console/src/ace-modes/make-doc-html.spec.ts b/web-console/src/ace-modes/make-doc-html.spec.ts
@@ -0,0 +1,31 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF 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.
+ */
+
+import { makeDocHtml } from './make-doc-html';
+
+describe('makeDocHtml', () => {
+  it('correctly formats helper HTML', () => {
+    expect(
+      makeDocHtml({
+        name: 'COUNT',
+        syntax: 'COUNT(*)',
+        description: 'Counts the number of things',
+      }),
+    ).toMatchSnapshot();
+  });
+});
diff --git a/web-console/src/ace-modes/make-doc-html.ts b/web-console/src/ace-modes/make-doc-html.ts
@@ -0,0 +1,32 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF 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.
+ */
+
+import escape from 'lodash.escape';
+
+export interface ItemDescription {
+  name: string;
+  syntax: string;
+  description: string;
+}
+
+export function makeDocHtml(item: ItemDescription) {
+  return `
+<div class="doc-name">${item.name}</div>
+<div class="doc-syntax">${escape(item.syntax)}</div>
+<div class="doc-description">${item.description}</div>`;
+}
diff --git a/web-console/src/components/header-bar/header-bar.scss b/web-console/src/components/header-bar/header-bar.scss
@@ -89,4 +89,9 @@
       }
     }
   }
+
+  .#{$bp-ns}-navbar-group.#{$bp-ns}-align-right {
+    position: absolute;
+    right: 15px;
+  }
 }
diff --git a/web-console/src/components/json-input/__snapshots__/json-input.spec.tsx.snap b/web-console/src/components/json-input/__snapshots__/json-input.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`JsonInput matches snapshot (null) 1`] = `
   class="json-input"
 >
   <div
-    class=" ace_editor ace_hidpi ace-tm"
+    class=" ace_editor ace_hidpi ace-solarized-dark ace_dark"
     id="ace-editor"
     style="width: 100%; height: 8vh; font-size: 12px;"
   >
@@ -104,7 +104,7 @@ exports[`JsonInput matches snapshot (value) 1`] = `
   class="json-input"
 >
   <div
-    class=" ace_editor ace_hidpi ace-tm"
+    class=" ace_editor ace_hidpi ace-solarized-dark ace_dark"
     id="ace-editor"
     style="width: 100%; height: 8vh; font-size: 12px;"
   >

diff --git a/web-console/src/components/table-column-selector/table-column-selector.spec.tsx b/web-console/src/components/table-column-selector/table-column-selector.spec.tsx
@@ -25,7 +25,7 @@ describe('TableColumnSelector', () => {
   it('matches snapshot', () => {
     const tableColumn = (
       <TableColumnSelector
-        columns={['a', 'b', 'c']}
+        columns={['a', 'b', { text: 'c', label: 'c-label' }]}
         onChange={() => {}}
         tableColumnsHidden={['b']}
       />

diff --git a/web-console/src/components/table-column-selector/table-column-selector.tsx b/web-console/src/components/table-column-selector/table-column-selector.tsx
@@ -25,9 +25,15 @@ import { MenuCheckbox } from '../menu-checkbox/menu-checkbox';
 
 import './table-column-selector.scss';
 
+export type TableColumnSelectorColumn = string | { text: string; label: string };
+
+function getColumnName(c: TableColumnSelectorColumn) {
+  return typeof c === 'string' ? c : c.text;
+}
+
 interface TableColumnSelectorProps {
-  columns: string[];
-  onChange: (column: string) => void;
+  columns: TableColumnSelectorColumn[];
+  onChange: (columnName: string) => void;
   onClose?: (added: number) => void;
   tableColumnsHidden: string[];
 }
@@ -38,23 +44,28 @@ export const TableColumnSelector = React.memo(function TableColumnSelector(
   const { columns, onChange, onClose, tableColumnsHidden } = props;
   const [added, setAdded] = useState(0);
 
-  const isColumnShown = (column: string) => !tableColumnsHidden.includes(column);
+  const isColumnShown = (column: TableColumnSelectorColumn) =>
+    !tableColumnsHidden.includes(getColumnName(column));
 
   const checkboxes = (
     <Menu className="table-column-selector-menu">
-      {columns.map(column => (
-        <MenuCheckbox
-          text={column}
-          key={column}
-          checked={isColumnShown(column)}
-          onChange={() => {
-            if (!isColumnShown(column)) {
-              setAdded(added + 1);
-            }
-            onChange(column);
-          }}
-        />
-      ))}
+      {columns.map(column => {
+        const columnName = getColumnName(column);
+        return (
+          <MenuCheckbox
+            text={columnName}
+            label={typeof column === 'string' ? undefined : column.label}
+            key={columnName}
+            checked={isColumnShown(column)}
+            onChange={() => {
+              if (!isColumnShown(column)) {
+                setAdded(added + 1);
+              }
+              onChange(columnName);
+            }}
+          />
+        );
+      })}
     </Menu>
   );