Web console: Fix order-by-delta in explore view table (#16417) (#16453)

* change to using measure name * Implment order by delta * less paring, stricter types * safeDivide0 * fix no query * new DTQ alows parsing JSON_VALUE(...RETURNING...)
apache · May 15, 2024 · 7313903 · 7313903
1 parent fabf58f
commit 7313903
Show file tree

Hide file tree

Showing 22 changed files with 553 additions and 177 deletions.
diff --git a/licenses.yaml b/licenses.yaml
@@ -5108,7 +5108,7 @@ license_category: binary
 module: web-console
 license_name: Apache License version 2.0
 copyright: Imply Data
-version: 0.22.11
+version: 0.22.13
 
 ---
 

diff --git a/web-console/package-lock.json b/web-console/package-lock.json
diff --git a/web-console/package.json b/web-console/package.json
@@ -68,7 +68,7 @@
     "@blueprintjs/datetime2": "^0.9.35",
     "@blueprintjs/icons": "^4.16.0",
     "@blueprintjs/popover2": "^1.14.9",
-    "@druid-toolkit/query": "^0.22.11",
+    "@druid-toolkit/query": "^0.22.13",
     "@druid-toolkit/visuals-core": "^0.3.3",
     "@druid-toolkit/visuals-react": "^0.3.3",
     "ace-builds": "~1.4.14",

diff --git a/web-console/src/components/record-table-pane/record-table-pane.tsx b/web-console/src/components/record-table-pane/record-table-pane.tsx
@@ -104,7 +104,7 @@ export const RecordTablePane = React.memo(function RecordTablePane(props: Record
   const finalPage =
     hasMoreResults && Math.floor(queryResult.rows.length / pagination.pageSize) === pagination.page; // on the last page
 
-  const numericColumnBraces = getNumericColumnBraces(queryResult, pagination);
+  const numericColumnBraces = getNumericColumnBraces(queryResult, undefined, pagination);
   return (
     <div className={classNames('record-table-pane', { 'more-results': hasMoreResults })}>
       {finalPage ? (

diff --git a/web-console/src/dialogs/async-action-dialog/async-action-dialog.tsx b/web-console/src/dialogs/async-action-dialog/async-action-dialog.tsx
@@ -38,8 +38,8 @@ export interface AsyncActionDialogProps {
   className?: string;
   icon?: IconName;
   intent?: Intent;
-  successText: string;
-  failText: string;
+  successText: ReactNode;
+  failText: ReactNode;
   warningChecks?: ReactNode[];
   children?: ReactNode;
 }

diff --git a/web-console/src/dialogs/kill-datasource-dialog/kill-datasource-dialog.tsx b/web-console/src/dialogs/kill-datasource-dialog/kill-datasource-dialog.tsx
@@ -66,7 +66,12 @@ export const KillDatasourceDialog = function KillDatasourceDialog(
         return resp.data;
       }}
       confirmButtonText="Permanently delete unused segments"
-      successText="Kill task was issued. Unused segments in datasource will be deleted"
+      successText={
+        <>
+          Kill task was issued. Unused segments in datasource <Tag minimal>{datasource}</Tag> will
+          be deleted
+        </>
+      }
       failText="Failed submit kill task"
       intent={Intent.DANGER}
       onClose={onClose}

diff --git a/web-console/src/druid-models/execution/execution.ts b/web-console/src/druid-models/execution/execution.ts
@@ -440,7 +440,10 @@ export class Execution {
     value.queryContext = queryContext;
     const parsedQuery = parseSqlQuery(sqlQuery);
     if (value.result && (parsedQuery || queryContext)) {
-      value.result = value.result.attachQuery({ context: queryContext }, parsedQuery);
+      value.result = value.result.attachQuery(
+        { ...this.nativeQuery, context: queryContext },
+        parsedQuery,
+      );
     }
 
     return new Execution(value);
@@ -463,7 +466,10 @@ export class Execution {
   public changeResult(result: QueryResult): Execution {
     return new Execution({
       ...this.valueOf(),
-      result: result.attachQuery({}, this.sqlQuery ? parseSqlQuery(this.sqlQuery) : undefined),
+      result: result.attachQuery(
+        this.nativeQuery,
+        this.sqlQuery ? parseSqlQuery(this.sqlQuery) : undefined,
+      ),
     });
   }
 

diff --git a/web-console/src/druid-models/workbench-query/workbench-query.ts b/web-console/src/druid-models/workbench-query/workbench-query.ts
@@ -18,6 +18,7 @@
 
 import type {
   QueryParameter,
+  QueryPayload,
   SqlClusteredByClause,
   SqlExpression,
   SqlPartitionedByClause,
@@ -446,7 +447,7 @@ export class WorkbenchQuery {
 
   public getApiQuery(makeQueryId: () => string = uuidv4): {
     engine: DruidEngine;
-    query: Record<string, any>;
+    query: QueryPayload;
     prefixLines: number;
     cancelQueryId?: string;
   } {
@@ -478,7 +479,7 @@ export class WorkbenchQuery {
       };
     }
 
-    let apiQuery: Record<string, any> = {};
+    let apiQuery: QueryPayload;
     if (this.isJsonLike()) {
       try {
         apiQuery = Hjson.parse(queryString);

diff --git a/web-console/src/utils/general.tsx b/web-console/src/utils/general.tsx
@@ -338,6 +338,22 @@ export function pluralIfNeeded(n: NumberLike, singular: string, plural?: string)
 
 // ----------------------------
 
+export function partition<T>(xs: T[], predicate: (x: T, i: number) => boolean): [T[], T[]] {
+  const match: T[] = [];
+  const nonMatch: T[] = [];
+
+  for (let i = 0; i < xs.length; i++) {
+    const x = xs[i];
+    if (predicate(x, i)) {
+      match.push(x);
+    } else {
+      nonMatch.push(x);
+    }
+  }
+
+  return [match, nonMatch];
+}
+
 export function filterMap<T, Q>(xs: readonly T[], f: (x: T, i: number) => Q | undefined): Q[] {
   return xs.map(f).filter((x: Q | undefined) => typeof x !== 'undefined') as Q[];
 }

diff --git a/web-console/src/utils/table-helpers.ts b/web-console/src/utils/table-helpers.ts
@@ -32,9 +32,16 @@ export function changePage(pagination: Pagination, page: number): Pagination {
   return deepSet(pagination, 'page', page);
 }
 
+export interface ColumnHint {
+  displayName?: string;
+  group?: string;
+  formatter?: (x: any) => string;
+}
+
 export function getNumericColumnBraces(
   queryResult: QueryResult,
-  pagination?: Pagination,
+  columnHints: Map<string, ColumnHint> | undefined,
+  pagination: Pagination | undefined,
 ): Record<number, string[]> {
   let rows = queryResult.rows;
 
@@ -47,8 +54,9 @@ export function getNumericColumnBraces(
   if (rows.length) {
     queryResult.header.forEach((column, i) => {
       if (!oneOf(column.nativeType, 'LONG', 'FLOAT', 'DOUBLE')) return;
+      const formatter = columnHints?.get(column.name)?.formatter || formatNumber;
       const brace = filterMap(rows, row =>
-        oneOf(typeof row[i], 'number', 'bigint') ? formatNumber(row[i]) : undefined,
+        oneOf(typeof row[i], 'number', 'bigint') ? formatter(row[i]) : undefined,
       );
       if (rows.length === brace.length) {
         numericColumnBraces[i] = brace;

diff --git a/web-console/src/views/datasources-view/datasources-view.tsx b/web-console/src/views/datasources-view/datasources-view.tsx
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { FormGroup, InputGroup, Intent, MenuItem, Switch } from '@blueprintjs/core';
+import { FormGroup, InputGroup, Intent, MenuItem, Switch, Tag } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { SqlQuery, T } from '@druid-toolkit/query';
 import classNames from 'classnames';
@@ -651,8 +651,18 @@ GROUP BY 1, 2`;
           return resp.data;
         }}
         confirmButtonText="Mark as unused all segments"
-        successText="All segments in datasource have been marked as unused"
-        failText="Failed to mark as unused all segments in datasource"
+        successText={
+          <>
+            All segments in datasource <Tag minimal>{datasourceToMarkAsUnusedAllSegmentsIn}</Tag>{' '}
+            have been marked as unused
+          </>
+        }
+        failText={
+          <>
+            Failed to mark as unused all segments in datasource{' '}
+            <Tag minimal>{datasourceToMarkAsUnusedAllSegmentsIn}</Tag>
+          </>
+        }
         intent={Intent.DANGER}
         onClose={() => {
           this.setState({ datasourceToMarkAsUnusedAllSegmentsIn: undefined });
@@ -684,8 +694,19 @@ GROUP BY 1, 2`;
           return resp.data;
         }}
         confirmButtonText="Mark as used all segments"
-        successText="All non-overshadowed segments in datasource have been marked as used"
-        failText="Failed to mark as used all non-overshadowed segments in datasource"
+        successText={
+          <>
+            All non-overshadowed segments in datasource{' '}
+            <Tag minimal>{datasourceToMarkAllNonOvershadowedSegmentsAsUsedIn}</Tag> have been marked
+            as used
+          </>
+        }
+        failText={
+          <>
+            Failed to mark as used all non-overshadowed segments in datasource{' '}
+            <Tag minimal>{datasourceToMarkAllNonOvershadowedSegmentsAsUsedIn}</Tag>
+          </>
+        }
         intent={Intent.PRIMARY}
         onClose={() => {
           this.setState({ datasourceToMarkAllNonOvershadowedSegmentsAsUsedIn: undefined });

diff --git a/...e/src/views/explore-view/modules/components/generic-output-table/generic-output-table.tsx b/...e/src/views/explore-view/modules/components/generic-output-table/generic-output-table.tsx
@@ -31,7 +31,7 @@ import ReactTable from 'react-table';
 import { BracedText, Deferred, TableCell } from '../../../../../components';
 import { possibleDruidFormatForValues, TIME_COLUMN } from '../../../../../druid-models';
 import { SMALL_TABLE_PAGE_SIZE, SMALL_TABLE_PAGE_SIZE_OPTIONS } from '../../../../../react-table';
-import type { Pagination, QueryAction } from '../../../../../utils';
+import type { ColumnHint, Pagination, QueryAction } from '../../../../../utils';
 import {
   columnToIcon,
   columnToWidth,
@@ -60,30 +60,34 @@ function isComparable(x: unknown): boolean {
   return x !== null && x !== '';
 }
 
-function columnNester(columns: TableColumn[], groupHints: string[] | undefined): TableColumn[] {
-  if (!groupHints) return columns;
+function columnNester(
+  tableColumns: TableColumn[],
+  resultColumns: readonly Column[],
+  columnHints: Map<string, ColumnHint> | undefined,
+): TableColumn[] {
+  if (!columnHints) return tableColumns;
 
   const ret: TableColumn[] = [];
-  let currentGroupHint: string | null = null;
+  let currentGroupName: string | null = null;
   let currentColumnGroup: TableColumn | null = null;
-  for (let i = 0; i < columns.length; i++) {
-    const column = columns[i];
-    const groupHint = groupHints[i];
-    if (groupHint) {
-      if (currentGroupHint === groupHint) {
-        currentColumnGroup!.columns!.push(column);
+  for (let i = 0; i < tableColumns.length; i++) {
+    const tableColumn = tableColumns[i];
+    const group = columnHints.get(resultColumns[i].name)?.group;
+    if (group) {
+      if (currentGroupName === group) {
+        currentColumnGroup!.columns!.push(tableColumn);
       } else {
-        currentGroupHint = groupHint;
+        currentGroupName = group;
         ret.push(
           (currentColumnGroup = {
-            Header: <div className="group-cell">{currentGroupHint}</div>,
-            columns: [column],
+            Header: <div className="group-cell">{currentGroupName}</div>,
+            columns: [tableColumn],
           }),
         );
       }
     } else {
-      ret.push(column);
-      currentGroupHint = null;
+      ret.push(tableColumn);
+      currentGroupName = null;
       currentColumnGroup = null;
     }
   }
@@ -94,12 +98,12 @@ function columnNester(columns: TableColumn[], groupHints: string[] | undefined):
 export interface GenericOutputTableProps {
   queryResult: QueryResult;
   onQueryAction(action: QueryAction): void;
-  onOrderByChange?(columnIndex: number, desc: boolean): void;
+  onOrderByChange?(columnName: string, desc: boolean): void;
   onExport?(): void;
   runeMode: boolean;
   showTypeIcons: boolean;
   initPageSize?: number;
-  groupHints?: string[];
+  columnHints?: Map<string, ColumnHint>;
 }
 
 export const GenericOutputTable = React.memo(function GenericOutputTable(
@@ -113,7 +117,7 @@ export const GenericOutputTable = React.memo(function GenericOutputTable(
     runeMode,
     showTypeIcons,
     initPageSize,
-    groupHints,
+    columnHints,
   } = props;
   const parsedQuery = queryResult.sqlQuery;
   const [pagination, setPagination] = useState<Pagination>({
@@ -159,7 +163,7 @@ export const GenericOutputTable = React.memo(function GenericOutputTable(
               icon={reverseOrderByDirection === 'ASC' ? IconNames.SORT_ASC : IconNames.SORT_DESC}
               text={`Order ${reverseOrderByDirection === 'ASC' ? 'ascending' : 'descending'}`}
               onClick={() => {
-                onOrderByChange(headerIndex, reverseOrderByDirection !== 'ASC');
+                onOrderByChange(header, reverseOrderByDirection !== 'ASC');
               }}
             />,
           );
@@ -170,15 +174,15 @@ export const GenericOutputTable = React.memo(function GenericOutputTable(
               icon={IconNames.SORT_DESC}
               text="Order descending"
               onClick={() => {
-                onOrderByChange(headerIndex, true);
+                onOrderByChange(header, true);
               }}
             />,
             <MenuItem
               key="order_asc"
               icon={IconNames.SORT_ASC}
               text="Order ascending"
               onClick={() => {
-                onOrderByChange(headerIndex, false);
+                onOrderByChange(header, false);
               }}
             />,
           );
@@ -426,7 +430,7 @@ export const GenericOutputTable = React.memo(function GenericOutputTable(
   const finalPage =
     hasMoreResults && Math.floor(queryResult.rows.length / pagination.pageSize) === pagination.page; // on the last page
 
-  const numericColumnBraces = getNumericColumnBraces(queryResult, pagination);
+  const numericColumnBraces = getNumericColumnBraces(queryResult, columnHints, pagination);
   return (
     <div className={classNames('generic-output-table', { 'more-results': hasMoreResults })}>
       {finalPage ? (
@@ -479,7 +483,7 @@ export const GenericOutputTable = React.memo(function GenericOutputTable(
                       <div className="clickable-cell">
                         <div className="output-name">
                           {icon && <Icon className="type-icon" icon={icon} size={12} />}
-                          {h}
+                          {columnHints?.get(h)?.displayName ?? h}
                           {hasFilterOnHeader(h, i) && <Icon icon={IconNames.FILTER} size={14} />}
                         </div>
                       </div>
@@ -490,6 +494,7 @@ export const GenericOutputTable = React.memo(function GenericOutputTable(
                 accessor: String(i),
                 Cell(row) {
                   const value = row.value;
+                  const formatter = columnHints?.get(h)?.formatter || formatNumber;
                   return (
                     <div>
                       <Popover2
@@ -498,7 +503,7 @@ export const GenericOutputTable = React.memo(function GenericOutputTable(
                         {numericColumnBraces[i] ? (
                           <BracedText
                             className="table-padding"
-                            text={formatNumber(value)}
+                            text={formatter(value)}
                             braces={numericColumnBraces[i]}
                             padFractionalPart
                           />
@@ -516,7 +521,8 @@ export const GenericOutputTable = React.memo(function GenericOutputTable(
                     : undefined,
               };
             }),
-            groupHints,
+            queryResult.header,
+            columnHints,
           )}
         />
       )}