Web console: Save query context also (apache#8395)

* tidy up menus * fix query output API * save context also * pull out auto run into a switch * better copy * add group_id * support FLOAT also * use built in time logic * fix trunc direction * add skipCache * add manifest url * remove depricated props
himanshug · Aug 25, 2019 · 9254dc8 · 9254dc8
1 parent 496dfa3
commit 9254dc8
Show file tree

Hide file tree

Showing 43 changed files with 926 additions and 864 deletions.
diff --git a/web-console/console-config.js b/web-console/console-config.js
@@ -16,4 +16,7 @@
  * limitations under the License.
  */
 
-window.consoleConfig = { /* future configs may go here */ };
+window.consoleConfig = {
+  "exampleManifestsUrl": "https://druid.apache.org/data/example-manifests.tsv"
+  /* future configs may go here */
+};
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
@@ -61,7 +61,7 @@
     "d3": "^5.10.1",
     "d3-array": "^2.3.1",
     "druid-console": "0.0.2",
-    "druid-query-toolkit": "^0.3.24",
+    "druid-query-toolkit": "^0.3.26",
     "file-saver": "^2.0.2",
     "has-own-prop": "^2.0.0",
     "hjson": "^3.1.2",

diff --git a/web-console/src/components/action-cell/action-cell.tsx b/web-console/src/components/action-cell/action-cell.tsx
@@ -35,10 +35,6 @@ export class ActionCell extends React.PureComponent<ActionCellProps> {
   static COLUMN_LABEL = 'Actions';
   static COLUMN_WIDTH = 70;
 
-  constructor(props: ActionCellProps, context: any) {
-    super(props, context);
-  }
-
   render(): JSX.Element {
     const { onDetail, actions } = this.props;
     const actionsMenu = actions ? basicActionsToMenu(actions) : null;

diff --git a/web-console/src/components/deferred/deferred.tsx b/web-console/src/components/deferred/deferred.tsx
@@ -25,10 +25,6 @@ export interface DeferredProps {
 export interface DeferredState {}
 
 export class Deferred extends React.PureComponent<DeferredProps, DeferredState> {
-  constructor(props: DeferredProps, context: any) {
-    super(props, context);
-  }
-
   render(): JSX.Element {
     const { content } = this.props;
     return content();

diff --git a/web-console/src/components/refresh-button/refresh-button.tsx b/web-console/src/components/refresh-button/refresh-button.tsx
@@ -15,6 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { IconNames } from '@blueprintjs/icons';
 import React from 'react';
 
@@ -27,10 +28,6 @@ export interface RefreshButtonProps {
 }
 
 export class RefreshButton extends React.PureComponent<RefreshButtonProps> {
-  constructor(props: RefreshButtonProps, context: any) {
-    super(props, context);
-  }
-
   render(): JSX.Element {
     const { onRefresh, localStorageKey } = this.props;
     const intervals = [

diff --git a/web-console/src/components/segment-timeline/segment-timeline.tsx b/web-console/src/components/segment-timeline/segment-timeline.tsx
@@ -27,7 +27,7 @@ import { Loader } from '../loader/loader';
 
 import './segment-timeline.scss';
 
-interface SegmentTimelineProps extends React.Props<any> {
+interface SegmentTimelineProps {
   chartHeight: number;
   chartWidth: number;
 }
@@ -71,9 +71,7 @@ export interface BarChartMargin {
 }
 
 export class SegmentTimeline extends React.Component<SegmentTimelineProps, SegmentTimelineState> {
-  private dataQueryManager: QueryManager<null, any>;
-  private datasourceQueryManager: QueryManager<null, any>;
-  private colors = [
+  static COLORS = [
     '#b33040',
     '#d25c4d',
     '#f2b447',
@@ -91,6 +89,13 @@ export class SegmentTimeline extends React.Component<SegmentTimelineProps, Segme
     '#915412',
     '#87606c',
   ];
+
+  static getColor(index: number): string {
+    return SegmentTimeline.COLORS[index % SegmentTimeline.COLORS.length];
+  }
+
+  private dataQueryManager: QueryManager<null, any>;
+  private datasourceQueryManager: QueryManager<null, any>;
   private chartMargin = { top: 20, right: 10, bottom: 20, left: 10 };
 
   constructor(props: SegmentTimelineProps) {
@@ -249,7 +254,7 @@ export class SegmentTimeline extends React.Component<SegmentTimelineProps, Segme
             y: d[datasource] === undefined ? 0 : d[datasource],
             y0,
             datasource,
-            color: this.colors[i],
+            color: SegmentTimeline.getColor(i),
           };
           y0 += d[datasource] === undefined ? 0 : d[datasource];
           return barUnitData;
@@ -279,7 +284,7 @@ export class SegmentTimeline extends React.Component<SegmentTimelineProps, Segme
             x: d.day,
             y,
             datasource,
-            color: this.colors[i],
+            color: SegmentTimeline.getColor(i),
           };
         });
         if (!dataResult.every((d: any) => d.y === 0)) {

diff --git a/web-console/src/components/show-value/show-value.tsx b/web-console/src/components/show-value/show-value.tsx
@@ -31,10 +31,6 @@ export interface ShowValueProps {
 }
 
 export class ShowValue extends React.PureComponent<ShowValueProps> {
-  constructor(props: ShowValueProps, context: any) {
-    super(props, context);
-  }
-
   render(): JSX.Element {
     const { endpoint, downloadFilename, jsonValue } = this.props;
     return (

diff --git a/web-console/src/dialogs/edit-context-dialog/edit-context-dialog.tsx b/web-console/src/dialogs/edit-context-dialog/edit-context-dialog.tsx
@@ -15,6 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { Button, Callout, Classes, Dialog, Intent, TextArea } from '@blueprintjs/core';
 import Hjson from 'hjson';
 import React from 'react';
@@ -42,6 +43,7 @@ export class EditContextDialog extends React.PureComponent<
   constructor(props: EditContextDialogProps) {
     super(props);
     this.state = {
+      queryContext: props.queryContext,
       queryContextString: Object.keys(props.queryContext).length
         ? JSON.stringify(props.queryContext, undefined, 2)
         : '{\n\n}',
@@ -72,10 +74,12 @@ export class EditContextDialog extends React.PureComponent<
   };
 
   private handleSave = () => {
-    const { onQueryContextChange } = this.props;
+    const { onQueryContextChange, onClose } = this.props;
     const { queryContext } = this.state;
     if (!queryContext) return;
+
     onQueryContextChange(queryContext);
+    onClose();
   };
 
   render(): JSX.Element {
@@ -94,9 +98,9 @@ export class EditContextDialog extends React.PureComponent<
           <div className={'edit-context-dialog-buttons'}>
             <Button text={'Close'} onClick={onClose} />
             <Button
-              disabled={Boolean(error)}
               text={'Save'}
               intent={Intent.PRIMARY}
+              disabled={Boolean(error)}
               onClick={this.handleSave}
             />
           </div>

diff --git a/web-console/src/dialogs/index.ts b/web-console/src/dialogs/index.ts
@@ -15,6 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 export * from './about-dialog/about-dialog';
 export * from './async-action-dialog/async-action-dialog';
 export * from './compaction-dialog/compaction-dialog';

diff --git a/web-console/src/dialogs/query-history-dialog/query-history-dialog.tsx b/web-console/src/dialogs/query-history-dialog/query-history-dialog.tsx
@@ -26,9 +26,10 @@ import './query-history-dialog.scss';
 export interface QueryRecord {
   version: string;
   queryString: string;
+  queryContext?: Record<string, any>;
 }
 export interface QueryHistoryDialogProps {
-  setQueryString: (queryString: string) => void;
+  setQueryString: (queryString: string, queryContext: Record<string, any>) => void;
   onClose: () => void;
   queryRecords: readonly QueryRecord[];
 }
@@ -51,17 +52,23 @@ export class QueryHistoryDialog extends React.PureComponent<
   static addQueryToHistory(
     queryHistory: readonly QueryRecord[],
     queryString: string,
+    queryContext: Record<string, any>,
   ): readonly QueryRecord[] {
-    // Do not add to history if already the same as the last element
-    if (queryHistory.length && queryHistory[0].queryString === queryString) {
+    // Do not add to history if already the same as the last element in query and context
+    if (
+      queryHistory.length &&
+      queryHistory[0].queryString === queryString &&
+      JSON.stringify(queryHistory[0].queryContext) === JSON.stringify(queryContext)
+    ) {
       return queryHistory;
     }
 
     return [
       {
         version: QueryHistoryDialog.getHistoryVersion(),
         queryString,
-      },
+        queryContext,
+      } as QueryRecord,
     ]
       .concat(queryHistory)
       .slice(0, 10);
@@ -77,8 +84,9 @@ export class QueryHistoryDialog extends React.PureComponent<
   private handleSelect = () => {
     const { queryRecords, setQueryString, onClose } = this.props;
     const { activeTab } = this.state;
+    const queryRecord = queryRecords[activeTab];
 
-    setQueryString(queryRecords[activeTab].queryString);
+    setQueryString(queryRecord.queryString, queryRecord.queryContext || {});
     onClose();
   };
 

diff --git a/web-console/src/dialogs/query-plan-dialog/__snapshots__/query-plan-dialog.spec.tsx.snap b/web-console/src/dialogs/query-plan-dialog/__snapshots__/query-plan-dialog.spec.tsx.snap
@@ -55,7 +55,9 @@ exports[`query plan dialog matches snapshot 1`] = `
         <div
           class="bp3-dialog-body"
         >
-          <div>
+          <div
+            class="generic-result"
+          >
             test
           </div>
         </div>
@@ -75,16 +77,6 @@ exports[`query plan dialog matches snapshot 1`] = `
                 Close
               </span>
             </button>
-            <button
-              class="bp3-button bp3-intent-primary"
-              type="button"
-            >
-              <span
-                class="bp3-button-text"
-              >
-                Open
-              </span>
-            </button>
           </div>
         </div>
       </div>

diff --git a/web-console/src/dialogs/query-plan-dialog/query-plan-dialog.scss b/web-console/src/dialogs/query-plan-dialog/query-plan-dialog.scss
@@ -36,4 +36,8 @@
       height: 25vh !important;
     }
   }
+
+  .generic-result {
+    overflow: scroll;
+  }
 }
diff --git a/web-console/src/dialogs/query-plan-dialog/query-plan-dialog.tsx b/web-console/src/dialogs/query-plan-dialog/query-plan-dialog.tsx
@@ -38,23 +38,16 @@ export interface QueryPlanDialogProps {
   setQueryString: (queryString: string) => void;
 }
 
-export interface QueryPlanDialogState {}
-
-export class QueryPlanDialog extends React.PureComponent<
-  QueryPlanDialogProps,
-  QueryPlanDialogState
-> {
+export class QueryPlanDialog extends React.PureComponent<QueryPlanDialogProps> {
   constructor(props: QueryPlanDialogProps) {
     super(props);
-    this.state = {};
   }
 
-  private queryString: string = '';
-
   render(): JSX.Element {
     const { explainResult, explainError, onClose, setQueryString } = this.props;
 
     let content: JSX.Element;
+    let queryString: string | undefined;
 
     if (explainError) {
       content = <div>{explainError}</div>;
@@ -71,15 +64,11 @@ export class QueryPlanDialog extends React.PureComponent<
         );
       }
 
-      this.queryString = JSON.stringify(
-        (explainResult as BasicQueryExplanation).query[0],
-        undefined,
-        2,
-      );
+      queryString = JSON.stringify((explainResult as BasicQueryExplanation).query[0], undefined, 2);
       content = (
         <div className="one-query">
           <FormGroup label="Query">
-            <TextArea readOnly value={this.queryString} />
+            <TextArea readOnly value={queryString} />
           </FormGroup>
           {signature}
         </div>
@@ -136,7 +125,7 @@ export class QueryPlanDialog extends React.PureComponent<
         </div>
       );
     } else {
-      content = <div>{explainResult}</div>;
+      content = <div className="generic-result">{explainResult}</div>;
     }
 
     return (
@@ -145,14 +134,16 @@ export class QueryPlanDialog extends React.PureComponent<
         <div className={Classes.DIALOG_FOOTER}>
           <div className={Classes.DIALOG_FOOTER_ACTIONS}>
             <Button text="Close" onClick={onClose} />
-            <Button
-              text="Open"
-              intent={Intent.PRIMARY}
-              onClick={() => {
-                setQueryString(this.queryString);
-                onClose();
-              }}
-            />
+            {queryString && (
+              <Button
+                text="Open query"
+                intent={Intent.PRIMARY}
+                onClick={() => {
+                  if (queryString) setQueryString(queryString);
+                  onClose();
+                }}
+              />
+            )}
           </div>
         </div>
       </Dialog>

diff --git a/web-console/src/dialogs/show-value-dialog/show-value-dialog.tsx b/web-console/src/dialogs/show-value-dialog/show-value-dialog.tsx
@@ -15,6 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { Button, Classes, Dialog, Intent, TextArea } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import copy from 'copy-to-clipboard';

diff --git a/web-console/src/utils/local-storage-keys.tsx b/web-console/src/utils/local-storage-keys.tsx
@@ -26,6 +26,7 @@ export const LocalStorageKeys = {
   SERVER_TABLE_COLUMN_SELECTION: 'historical-table-column-selection' as 'historical-table-column-selection',
   LOOKUP_TABLE_COLUMN_SELECTION: 'lookup-table-column-selection' as 'lookup-table-column-selection',
   QUERY_KEY: 'druid-console-query' as 'druid-console-query',
+  QUERY_CONTEXT: 'query-context' as 'query-context',
   TASKS_VIEW_PANE_SIZE: 'tasks-view-pane-size' as 'tasks-view-pane-size',
   QUERY_VIEW_PANE_SIZE: 'query-view-pane-size' as 'query-view-pane-size',
   TASKS_REFRESH_RATE: 'task-refresh-rate' as 'task-refresh-rate',
@@ -46,7 +47,21 @@ export function localStorageSet(key: LocalStorageKeys, value: string): void {
   localStorage.setItem(key, value);
 }
 
+export function localStorageSetJson(key: LocalStorageKeys, value: any): void {
+  localStorageSet(key, JSON.stringify(value));
+}
+
 export function localStorageGet(key: LocalStorageKeys): string | undefined {
   if (typeof localStorage === 'undefined') return;
   return localStorage.getItem(key) || undefined;
 }
+
+export function localStorageGetJson(key: LocalStorageKeys): any {
+  const value = localStorageGet(key);
+  if (!value) return;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return;
+  }
+}
diff --git a/web-console/src/utils/query-context.tsx b/web-console/src/utils/query-context.tsx
@@ -23,6 +23,7 @@ export interface QueryContext {
   populateCache?: boolean | undefined;
   useApproximateCountDistinct?: boolean | undefined;
   useApproximateTopN?: boolean | undefined;
+  [key: string]: any;
 }
 
 export function isEmptyContext(context: QueryContext): boolean {