This is an automated email from the ASF dual-hosted git repository.

cwylie pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-druid.git


The following commit(s) were added to refs/heads/master by this push:
     new 8924d28  Web-Console: add more side column functions to query view 
(#8283)
8924d28 is described below

commit 8924d285dc39dc548db611aa4429ae5e62d64a44
Author: mcbrewster <37322608+mcbrews...@users.noreply.github.com>
AuthorDate: Thu Aug 15 01:22:25 2019 -0700

    Web-Console: add more side column functions to query view (#8283)
    
    * small fixes
    
    * run jest -u
    
    * add trim
    
    * add to groupby
    
    * save
    
    * add functionality to column tree menu
    
    * remove history dialog
    
    * rename file
    
    * fixes
    
    * add new values to time-menu
    
    * add query dialog
    
    * add more functions to collumn-tree menu
    
    * add menu functions
    
    * remove test
    
    * update tests, fix extra 0s, clear in between time filters
    
    * fixes
    
    * add deffered
    
    * save
    
    * add alias's
    
    * change menu style
    
    * fix substring
    
    * small fixes
    
    * add auto run to run button
    
    * move divider to a reasonable position
    
    * fix auto expland
    
    * run jest -u
    
    * fix auto run
    
    * prevent aggregate cooumn changes
    
    * fix group by bug
    
    * add quertAst to state
    
    * ui fixes
    
    * prevent filter on non existant ast
    
    * add auto run to shows
    
    * use handle run
    
    * handle *
    
    * add alias and tslint fix
---
 web-console/package-lock.json                      |   6 +-
 web-console/package.json                           |   2 +-
 .../deferred/__snapshots__/deferred.spec.tsx.snap  |   3 +
 .../deferred/deferred.spec.tsx}                    |  13 +-
 .../deferred/deferred.tsx}                         |  26 +-
 .../query-plan-history.spec.tsx.snap}              |  35 +-
 .../query-history-dialog.scss}                     |  25 +-
 .../query-history-dialog/query-history-dialog.tsx  |  91 +++++
 .../query-plan-history.spec.tsx}                   |   4 +-
 .../__snapshots__/query-plan-dialog.spec.tsx.snap  |  10 +
 .../query-plan-dialog/query-plan-dialog.spec.tsx   |   7 +-
 .../query-plan-dialog/query-plan-dialog.tsx        |  34 +-
 web-console/src/utils/local-storage-keys.tsx       |   2 +
 .../__snapshots__/query-view.spec.tsx.snap         |  12 +-
 .../__snapshots__/number-menu-items.spec.tsx.snap  |   3 +
 .../number-menu-items/number-menu-items.spec.tsx}  |  21 +-
 .../number-menu-items/number-menu-items.tsx        | 141 ++++++++
 .../__snapshots__/string-menu-items.spec.tsx.snap  |   3 +
 .../string-menu-items/string-menu-items.spec.tsx}  |  21 +-
 .../string-menu-items/string-menu-items.tsx        | 161 +++++++++
 .../__snapshots__/time-menu-items.spec.tsx.snap    |   3 +
 .../time-menu-items/time-menu-items.spec.tsx}      |  22 +-
 .../time-menu-items/time-menu-items.tsx            | 380 +++++++++++++++++++++
 .../query-view/column-tree/column-tree.spec.tsx    |   7 +
 .../views/query-view/column-tree/column-tree.tsx   | 155 ++++++---
 .../query-view/query-output/query-output.spec.tsx  |   1 -
 .../views/query-view/query-output/query-output.tsx | 164 ++++-----
 web-console/src/views/query-view/query-view.tsx    | 347 +++++++++++++++----
 .../query-view/run-button/run-button.spec.tsx      |   3 +
 .../src/views/query-view/run-button/run-button.tsx |  20 +-
 30 files changed, 1451 insertions(+), 271 deletions(-)

diff --git a/web-console/package-lock.json b/web-console/package-lock.json
index fdac733..5c25e00 100644
--- a/web-console/package-lock.json
+++ b/web-console/package-lock.json
@@ -4395,9 +4395,9 @@
       "integrity": 
"sha512-0sYnfUHHMoajaud/i5BHKA12bUxiWEHJ9rxGqVEppFxsEcxef0TZQ5J59lU+UniEBcz/sG5fTESRyS7cOm3tSQ=="
     },
     "druid-query-toolkit": {
-      "version": "0.3.15",
-      "resolved": 
"https://registry.npmjs.org/druid-query-toolkit/-/druid-query-toolkit-0.3.15.tgz";,
-      "integrity": 
"sha512-q7uKfUdBItjOyNF1PlWF/rAhOim1uAjI085fsoKIBDZ2o5O4XRjaCKqXtW49Ovv92ks/22zLoYWNdU51i4PB/w==",
+      "version": "0.3.20",
+      "resolved": 
"https://registry.npmjs.org/druid-query-toolkit/-/druid-query-toolkit-0.3.20.tgz";,
+      "integrity": 
"sha512-jrGNu+o/nD+uhbxAMLXEQrSWNEylCRmkiuFDJSPCMz7cjMNArsdIgyBQHPezNAeTDpReelAt59xJ7pvqXwPIvw==",
       "requires": {
         "tslib": "^1.10.0"
       }
diff --git a/web-console/package.json b/web-console/package.json
index 14ef194..8f3b214 100644
--- a/web-console/package.json
+++ b/web-console/package.json
@@ -61,7 +61,7 @@
     "d3": "^5.9.7",
     "d3-array": "^2.2.0",
     "druid-console": "^0.0.2",
-    "druid-query-toolkit": "^0.3.15",
+    "druid-query-toolkit": "^0.3.20",
     "file-saver": "^2.0.2",
     "has-own-prop": "^2.0.0",
     "hjson": "^3.1.2",
diff --git 
a/web-console/src/components/deferred/__snapshots__/deferred.spec.tsx.snap 
b/web-console/src/components/deferred/__snapshots__/deferred.spec.tsx.snap
new file mode 100644
index 0000000..60bc789
--- /dev/null
+++ b/web-console/src/components/deferred/__snapshots__/deferred.spec.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`deferred matches snapshot 1`] = `<div />`;
diff --git 
a/web-console/src/dialogs/query-plan-dialog/query-plan-dialog.spec.tsx 
b/web-console/src/components/deferred/deferred.spec.tsx
similarity index 75%
copy from web-console/src/dialogs/query-plan-dialog/query-plan-dialog.spec.tsx
copy to web-console/src/components/deferred/deferred.spec.tsx
index 465436d..8125faf 100644
--- a/web-console/src/dialogs/query-plan-dialog/query-plan-dialog.spec.tsx
+++ b/web-console/src/components/deferred/deferred.spec.tsx
@@ -19,14 +19,13 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import { QueryPlanDialog } from './query-plan-dialog';
+import { Deferred } from './deferred';
 
-describe('query plan dialog', () => {
+describe('deferred', () => {
   it('matches snapshot', () => {
-    const queryPlanDialog = (
-      <QueryPlanDialog explainResult={'test'} explainError={undefined} 
onClose={() => {}} />
-    );
-    render(queryPlanDialog);
-    expect(document.body.lastChild).toMatchSnapshot();
+    const deferred = <Deferred content={() => <div />} />;
+
+    const { container } = render(deferred);
+    expect(container.firstChild).toMatchSnapshot();
   });
 });
diff --git 
a/web-console/src/dialogs/query-plan-dialog/query-plan-dialog.spec.tsx 
b/web-console/src/components/deferred/deferred.tsx
similarity index 67%
copy from web-console/src/dialogs/query-plan-dialog/query-plan-dialog.spec.tsx
copy to web-console/src/components/deferred/deferred.tsx
index 465436d..6194979 100644
--- a/web-console/src/dialogs/query-plan-dialog/query-plan-dialog.spec.tsx
+++ b/web-console/src/components/deferred/deferred.tsx
@@ -16,17 +16,21 @@
  * limitations under the License.
  */
 
-import { render } from '@testing-library/react';
 import React from 'react';
 
-import { QueryPlanDialog } from './query-plan-dialog';
+export interface DeferredProps {
+  content: () => JSX.Element;
+}
 
-describe('query plan dialog', () => {
-  it('matches snapshot', () => {
-    const queryPlanDialog = (
-      <QueryPlanDialog explainResult={'test'} explainError={undefined} 
onClose={() => {}} />
-    );
-    render(queryPlanDialog);
-    expect(document.body.lastChild).toMatchSnapshot();
-  });
-});
+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/dialogs/query-plan-dialog/__snapshots__/query-plan-dialog.spec.tsx.snap
 
b/web-console/src/dialogs/query-history-dialog/__snapshots__/query-plan-history.spec.tsx.snap
similarity index 71%
copy from 
web-console/src/dialogs/query-plan-dialog/__snapshots__/query-plan-dialog.spec.tsx.snap
copy to 
web-console/src/dialogs/query-history-dialog/__snapshots__/query-plan-history.spec.tsx.snap
index abd814e..d7efc74 100644
--- 
a/web-console/src/dialogs/query-plan-dialog/__snapshots__/query-plan-dialog.spec.tsx.snap
+++ 
b/web-console/src/dialogs/query-history-dialog/__snapshots__/query-plan-history.spec.tsx.snap
@@ -16,7 +16,7 @@ exports[`query plan dialog matches snapshot 1`] = `
       tabindex="0"
     >
       <div
-        class="bp3-dialog query-plan-dialog"
+        class="bp3-dialog query-history-dialog"
       >
         <div
           class="bp3-dialog-header"
@@ -24,7 +24,7 @@ exports[`query plan dialog matches snapshot 1`] = `
           <h4
             class="bp3-heading"
           >
-            Query plan
+            Query history
           </h4>
           <button
             aria-label="Close"
@@ -55,8 +55,25 @@ exports[`query plan dialog matches snapshot 1`] = `
         <div
           class="bp3-dialog-body"
         >
-          <div>
-            test
+          <div
+            class="bp3-tabs bp3-vertical tab-area"
+          >
+            <div
+              class="bp3-tab-list"
+              role="tablist"
+            >
+              <div
+                class="bp3-tab-indicator-wrapper"
+                style="display: none;"
+              >
+                <div
+                  class="bp3-tab-indicator"
+                />
+              </div>
+              <div
+                class="bp3-flex-expander"
+              />
+            </div>
           </div>
         </div>
         <div
@@ -75,6 +92,16 @@ 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.spec.tsx 
b/web-console/src/dialogs/query-history-dialog/query-history-dialog.scss
similarity index 65%
copy from web-console/src/dialogs/query-plan-dialog/query-plan-dialog.spec.tsx
copy to web-console/src/dialogs/query-history-dialog/query-history-dialog.scss
index 465436d..34bf4b7 100644
--- a/web-console/src/dialogs/query-plan-dialog/query-plan-dialog.spec.tsx
+++ b/web-console/src/dialogs/query-history-dialog/query-history-dialog.scss
@@ -16,17 +16,18 @@
  * limitations under the License.
  */
 
-import { render } from '@testing-library/react';
-import React from 'react';
+.query-history-dialog {
+  &.bp3-dialog {
+    width: 900px;
+  }
 
-import { QueryPlanDialog } from './query-plan-dialog';
+  .panel {
+    width: 100%;
+  }
 
-describe('query plan dialog', () => {
-  it('matches snapshot', () => {
-    const queryPlanDialog = (
-      <QueryPlanDialog explainResult={'test'} explainError={undefined} 
onClose={() => {}} />
-    );
-    render(queryPlanDialog);
-    expect(document.body.lastChild).toMatchSnapshot();
-  });
-});
+  .text-area {
+    width: 100%;
+    height: 500px;
+    resize: none;
+  }
+}
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
new file mode 100644
index 0000000..c17dbc6
--- /dev/null
+++ b/web-console/src/dialogs/query-history-dialog/query-history-dialog.tsx
@@ -0,0 +1,91 @@
+/*
+ * 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 { Button, Classes, Dialog, Intent, Tab, Tabs, TextArea } from 
'@blueprintjs/core';
+import React from 'react';
+
+import './query-history-dialog.scss';
+
+export interface QueryRecord {
+  version: string;
+  queryString: string;
+}
+export interface QueryHistoryDialogProps {
+  setQueryString: (queryString: string) => void;
+  onClose: () => void;
+  queryRecords: QueryRecord[];
+}
+
+export interface QueryHistoryDialogState {
+  activeTab: number;
+}
+
+export class QueryHistoryDialog extends React.PureComponent<
+  QueryHistoryDialogProps,
+  QueryHistoryDialogState
+> {
+  constructor(props: QueryHistoryDialogProps) {
+    super(props);
+    this.state = {
+      activeTab: 0,
+    };
+  }
+
+  render(): JSX.Element {
+    const { onClose, queryRecords, setQueryString } = this.props;
+    const { activeTab } = this.state;
+
+    const versions = queryRecords.map((record, index) => (
+      <Tab
+        id={index}
+        key={index}
+        title={record.version}
+        panel={<TextArea readOnly value={record.queryString} 
className={'text-area'} />}
+        panelClassName={'panel'}
+      />
+    ));
+
+    return (
+      <Dialog className="query-history-dialog" isOpen onClose={onClose} 
title="Query history">
+        <div className={Classes.DIALOG_BODY}>
+          <Tabs
+            animate
+            renderActiveTabPanelOnly
+            vertical
+            className={'tab-area'}
+            selectedTabId={activeTab}
+            onChange={(tab: number) => this.setState({ activeTab: tab })}
+          >
+            {versions}
+            <Tabs.Expander />
+          </Tabs>
+        </div>
+        <div className={Classes.DIALOG_FOOTER}>
+          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+            <Button text="Close" onClick={onClose} />
+            <Button
+              text="Open"
+              intent={Intent.PRIMARY}
+              onClick={() => 
setQueryString(queryRecords[activeTab].queryString)}
+            />
+          </div>
+        </div>
+      </Dialog>
+    );
+  }
+}
diff --git 
a/web-console/src/dialogs/query-plan-dialog/query-plan-dialog.spec.tsx 
b/web-console/src/dialogs/query-history-dialog/query-plan-history.spec.tsx
similarity index 87%
copy from web-console/src/dialogs/query-plan-dialog/query-plan-dialog.spec.tsx
copy to web-console/src/dialogs/query-history-dialog/query-plan-history.spec.tsx
index 465436d..d164c3e 100644
--- a/web-console/src/dialogs/query-plan-dialog/query-plan-dialog.spec.tsx
+++ b/web-console/src/dialogs/query-history-dialog/query-plan-history.spec.tsx
@@ -19,12 +19,12 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import { QueryPlanDialog } from './query-plan-dialog';
+import { QueryHistoryDialog } from './query-history-dialog';
 
 describe('query plan dialog', () => {
   it('matches snapshot', () => {
     const queryPlanDialog = (
-      <QueryPlanDialog explainResult={'test'} explainError={undefined} 
onClose={() => {}} />
+      <QueryHistoryDialog setQueryString={() => null} queryRecords={[]} 
onClose={() => {}} />
     );
     render(queryPlanDialog);
     expect(document.body.lastChild).toMatchSnapshot();
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
index abd814e..e91d4b8 100644
--- 
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
@@ -75,6 +75,16 @@ 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.spec.tsx 
b/web-console/src/dialogs/query-plan-dialog/query-plan-dialog.spec.tsx
index 465436d..de7bc91 100644
--- a/web-console/src/dialogs/query-plan-dialog/query-plan-dialog.spec.tsx
+++ b/web-console/src/dialogs/query-plan-dialog/query-plan-dialog.spec.tsx
@@ -24,7 +24,12 @@ import { QueryPlanDialog } from './query-plan-dialog';
 describe('query plan dialog', () => {
   it('matches snapshot', () => {
     const queryPlanDialog = (
-      <QueryPlanDialog explainResult={'test'} explainError={undefined} 
onClose={() => {}} />
+      <QueryPlanDialog
+        setQueryString={() => null}
+        explainResult={'test'}
+        explainError={undefined}
+        onClose={() => {}}
+      />
     );
     render(queryPlanDialog);
     expect(document.body.lastChild).toMatchSnapshot();
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
index 94bcdf3..000cb9a 100644
--- a/web-console/src/dialogs/query-plan-dialog/query-plan-dialog.tsx
+++ b/web-console/src/dialogs/query-plan-dialog/query-plan-dialog.tsx
@@ -16,7 +16,15 @@
  * limitations under the License.
  */
 
-import { Button, Classes, Dialog, FormGroup, InputGroup, TextArea } from 
'@blueprintjs/core';
+import {
+  Button,
+  Classes,
+  Dialog,
+  FormGroup,
+  InputGroup,
+  Intent,
+  TextArea,
+} from '@blueprintjs/core';
 import React from 'react';
 
 import { BasicQueryExplanation, SemiJoinQueryExplanation } from '../../utils';
@@ -27,6 +35,7 @@ export interface QueryPlanDialogProps {
   explainResult?: BasicQueryExplanation | SemiJoinQueryExplanation | string;
   explainError?: string;
   onClose: () => void;
+  setQueryString: (queryString: string) => void;
 }
 
 export interface QueryPlanDialogState {}
@@ -40,8 +49,10 @@ export class QueryPlanDialog extends React.PureComponent<
     this.state = {};
   }
 
+  private queryString: string = '';
+
   render(): JSX.Element {
-    const { explainResult, explainError, onClose } = this.props;
+    const { explainResult, explainError, onClose, setQueryString } = 
this.props;
 
     let content: JSX.Element;
 
@@ -60,17 +71,15 @@ export class QueryPlanDialog extends React.PureComponent<
         );
       }
 
+      this.queryString = JSON.stringify(
+        (explainResult as BasicQueryExplanation).query[0],
+        undefined,
+        2,
+      );
       content = (
         <div className="one-query">
           <FormGroup label="Query">
-            <TextArea
-              readOnly
-              value={JSON.stringify(
-                (explainResult as BasicQueryExplanation).query[0],
-                undefined,
-                2,
-              )}
-            />
+            <TextArea readOnly value={this.queryString} />
           </FormGroup>
           {signature}
         </div>
@@ -136,6 +145,11 @@ 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)}
+            />
           </div>
         </div>
       </Dialog>
diff --git a/web-console/src/utils/local-storage-keys.tsx 
b/web-console/src/utils/local-storage-keys.tsx
index 0dec7d5..4f116df 100644
--- a/web-console/src/utils/local-storage-keys.tsx
+++ b/web-console/src/utils/local-storage-keys.tsx
@@ -34,6 +34,8 @@ export const LocalStorageKeys = {
   SERVERS_REFRESH_RATE: 'servers-refresh-rate' as 'servers-refresh-rate',
   SUPERVISORS_REFRESH_RATE: 'supervisors-refresh-rate' as 
'supervisors-refresh-rate',
   LOOKUPS_REFRESH_RATE: 'lookups-refresh-rate' as 'lookups-refresh-rate',
+  QUERY_HISTORY: 'query-history' as 'query-history',
+  AUTO_RUN: 'auto-run' as 'auto-run',
 };
 export type LocalStorageKeys = typeof LocalStorageKeys[keyof typeof 
LocalStorageKeys];
 
diff --git 
a/web-console/src/views/query-view/__snapshots__/query-view.spec.tsx.snap 
b/web-console/src/views/query-view/__snapshots__/query-view.spec.tsx.snap
index 4bc32b5..d5139b4 100644
--- a/web-console/src/views/query-view/__snapshots__/query-view.spec.tsx.snap
+++ b/web-console/src/views/query-view/__snapshots__/query-view.spec.tsx.snap
@@ -5,8 +5,16 @@ exports[`sql view matches snapshot 1`] = `
   className="query-view app-view"
 >
   <ColumnTree
+    addAggregateColumn={[Function]}
+    addFunctionToGroupBy={[Function]}
+    addToGroupBy={[Function]}
+    clear={[Function]}
     columnMetadataLoading={true}
+    defaultSchema="druid"
+    filterByRow={[Function]}
+    hasGroupBy={[Function]}
     onQueryStringChange={[Function]}
+    queryAst={[Function]}
   />
   <t
     customClassName=""
@@ -32,17 +40,19 @@ exports[`sql view matches snapshot 1`] = `
         className="control-bar"
       >
         <HotkeysTarget(RunButton)
+          autoRun={true}
           onEditContext={[Function]}
           onExplain={[Function]}
+          onHistory={[Function]}
           onQueryContextChange={[Function]}
           onRun={[Function]}
           queryContext={Object {}}
           runeMode={false}
+          setAutoRun={[Function]}
         />
       </div>
     </div>
     <QueryOutput
-      disabled={true}
       loading={false}
       runeMode={false}
       sqlExcludeColumn={[Function]}
diff --git 
a/web-console/src/views/query-view/column-tree/column-tree-menu/number-menu-items/__snapshots__/number-menu-items.spec.tsx.snap
 
b/web-console/src/views/query-view/column-tree/column-tree-menu/number-menu-items/__snapshots__/number-menu-items.spec.tsx.snap
new file mode 100644
index 0000000..66ec883
--- /dev/null
+++ 
b/web-console/src/views/query-view/column-tree/column-tree-menu/number-menu-items/__snapshots__/number-menu-items.spec.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`number menu matches snapshot 1`] = `null`;
diff --git a/web-console/src/views/query-view/run-button/run-button.spec.tsx 
b/web-console/src/views/query-view/column-tree/column-tree-menu/number-menu-items/number-menu-items.spec.tsx
similarity index 73%
copy from web-console/src/views/query-view/run-button/run-button.spec.tsx
copy to 
web-console/src/views/query-view/column-tree/column-tree-menu/number-menu-items/number-menu-items.spec.tsx
index 1560f7a..2705f67 100644
--- a/web-console/src/views/query-view/run-button/run-button.spec.tsx
+++ 
b/web-console/src/views/query-view/column-tree/column-tree-menu/number-menu-items/number-menu-items.spec.tsx
@@ -19,22 +19,21 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import { RunButton } from './run-button';
+import { NumberMenuItems } from './number-menu-items';
 
-describe('run button', () => {
+describe('number menu', () => {
   it('matches snapshot', () => {
-    const runButton = (
-      <RunButton
-        onEditContext={() => null}
-        runeMode={false}
-        queryContext={{}}
-        onQueryContextChange={() => {}}
-        onRun={() => {}}
-        onExplain={() => {}}
+    const numberMenu = (
+      <NumberMenuItems
+        addFunctionToGroupBy={() => null}
+        addToGroupBy={() => null}
+        addAggregateColumn={() => null}
+        filterByRow={() => null}
+        columnName={'text'}
       />
     );
 
-    const { container } = render(runButton);
+    const { container } = render(numberMenu);
     expect(container.firstChild).toMatchSnapshot();
   });
 });
diff --git 
a/web-console/src/views/query-view/column-tree/column-tree-menu/number-menu-items/number-menu-items.tsx
 
b/web-console/src/views/query-view/column-tree/column-tree-menu/number-menu-items/number-menu-items.tsx
new file mode 100644
index 0000000..5c67910
--- /dev/null
+++ 
b/web-console/src/views/query-view/column-tree/column-tree-menu/number-menu-items/number-menu-items.tsx
@@ -0,0 +1,141 @@
+/*
+ * 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 { MenuItem } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import { Alias, FilterClause, SqlQuery, StringType } from 
'druid-query-toolkit';
+import { aliasFactory } from 'druid-query-toolkit/build/ast/sql-query/helpers';
+import React from 'react';
+
+import { RowFilter } from '../../../query-view';
+
+export interface NumberMenuItemsProps {
+  addFunctionToGroupBy: (
+    functionName: string,
+    spacing: string[],
+    argumentsArray: (StringType | number)[],
+    run: boolean,
+    alias: Alias,
+  ) => void;
+  addToGroupBy: (columnName: string, run: boolean) => void;
+  addAggregateColumn: (
+    columnName: string,
+    functionName: string,
+    run: boolean,
+    alias?: Alias,
+    distinct?: boolean,
+    filter?: FilterClause,
+  ) => void;
+  filterByRow: (filters: RowFilter[], preferablyRun: boolean) => void;
+  queryAst?: SqlQuery;
+  columnName: string;
+}
+
+export class NumberMenuItems extends React.PureComponent<NumberMenuItemsProps> 
{
+  constructor(props: NumberMenuItemsProps, context: any) {
+    super(props, context);
+  }
+
+  renderFilterMenu(): JSX.Element {
+    const { columnName, filterByRow } = this.props;
+
+    return (
+      <MenuItem icon={IconNames.FILTER} text={`Filter`}>
+        <MenuItem
+          text={`"${columnName}" > 100`}
+          onClick={() => filterByRow([{ row: 100, header: columnName, 
operator: '>' }], false)}
+        />
+        <MenuItem
+          text={`"${columnName}" <= 100`}
+          onClick={() => filterByRow([{ row: 100, header: columnName, 
operator: '<=' }], false)}
+        />
+      </MenuItem>
+    );
+  }
+
+  renderGroupByMenu(): JSX.Element {
+    const { columnName, addFunctionToGroupBy, addToGroupBy } = this.props;
+
+    return (
+      <MenuItem icon={IconNames.GROUP_OBJECTS} text={`Group by`}>
+        <MenuItem text={`"${columnName}"`} onClick={() => 
addToGroupBy(columnName, true)} />
+        <MenuItem
+          text={`TRUNCATE("${columnName}", 1) AS "${columnName}_truncated"`}
+          onClick={() =>
+            addFunctionToGroupBy(
+              'TRUNCATE',
+              [' '],
+              [
+                new StringType({
+                  spacing: [],
+                  chars: columnName,
+                  quote: '"',
+                }),
+                1,
+              ],
+              true,
+              aliasFactory(`${columnName}_truncated`),
+            )
+          }
+        />
+      </MenuItem>
+    );
+  }
+
+  renderAggregateMenu(): JSX.Element {
+    const { columnName, addAggregateColumn } = this.props;
+    return (
+      <MenuItem icon={IconNames.FUNCTION} text={`Aggregate`}>
+        <MenuItem
+          text={`SUM(${columnName}) AS "sum_${columnName}"`}
+          onClick={() =>
+            addAggregateColumn(columnName, 'SUM', true, 
aliasFactory(`sum_${columnName}`))
+          }
+        />
+        <MenuItem
+          text={`MAX(${columnName}) AS "max_${columnName}"`}
+          onClick={() =>
+            addAggregateColumn(columnName, 'MAX', true, 
aliasFactory(`max_${columnName}`))
+          }
+        />
+        <MenuItem
+          text={`MIN(${columnName}) AS "min_${columnName}"`}
+          onClick={() =>
+            addAggregateColumn(columnName, 'MIN', true, 
aliasFactory(`min_${columnName}`))
+          }
+        />
+      </MenuItem>
+    );
+  }
+
+  render(): JSX.Element {
+    const { queryAst } = this.props;
+    let hasGroupBy;
+    if (queryAst) {
+      hasGroupBy = queryAst.groupByClause;
+    }
+
+    return (
+      <>
+        {queryAst && this.renderFilterMenu()}
+        {hasGroupBy && this.renderGroupByMenu()}
+        {hasGroupBy && this.renderAggregateMenu()}
+      </>
+    );
+  }
+}
diff --git 
a/web-console/src/views/query-view/column-tree/column-tree-menu/string-menu-items/__snapshots__/string-menu-items.spec.tsx.snap
 
b/web-console/src/views/query-view/column-tree/column-tree-menu/string-menu-items/__snapshots__/string-menu-items.spec.tsx.snap
new file mode 100644
index 0000000..dbd66e4
--- /dev/null
+++ 
b/web-console/src/views/query-view/column-tree/column-tree-menu/string-menu-items/__snapshots__/string-menu-items.spec.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`string menu matches snapshot 1`] = `null`;
diff --git a/web-console/src/views/query-view/run-button/run-button.spec.tsx 
b/web-console/src/views/query-view/column-tree/column-tree-menu/string-menu-items/string-menu-items.spec.tsx
similarity index 73%
copy from web-console/src/views/query-view/run-button/run-button.spec.tsx
copy to 
web-console/src/views/query-view/column-tree/column-tree-menu/string-menu-items/string-menu-items.spec.tsx
index 1560f7a..7573435 100644
--- a/web-console/src/views/query-view/run-button/run-button.spec.tsx
+++ 
b/web-console/src/views/query-view/column-tree/column-tree-menu/string-menu-items/string-menu-items.spec.tsx
@@ -19,22 +19,21 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import { RunButton } from './run-button';
+import { StringMenuItems } from './string-menu-items';
 
-describe('run button', () => {
+describe('string menu', () => {
   it('matches snapshot', () => {
-    const runButton = (
-      <RunButton
-        onEditContext={() => null}
-        runeMode={false}
-        queryContext={{}}
-        onQueryContextChange={() => {}}
-        onRun={() => {}}
-        onExplain={() => {}}
+    const stringMenu = (
+      <StringMenuItems
+        addFunctionToGroupBy={() => null}
+        addToGroupBy={() => null}
+        addAggregateColumn={() => null}
+        filterByRow={() => null}
+        columnName={'text'}
       />
     );
 
-    const { container } = render(runButton);
+    const { container } = render(stringMenu);
     expect(container.firstChild).toMatchSnapshot();
   });
 });
diff --git 
a/web-console/src/views/query-view/column-tree/column-tree-menu/string-menu-items/string-menu-items.tsx
 
b/web-console/src/views/query-view/column-tree/column-tree-menu/string-menu-items/string-menu-items.tsx
new file mode 100644
index 0000000..79dcc49
--- /dev/null
+++ 
b/web-console/src/views/query-view/column-tree/column-tree-menu/string-menu-items/string-menu-items.tsx
@@ -0,0 +1,161 @@
+/*
+ * 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 { MenuItem } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import {
+  Alias,
+  ComparisonExpression,
+  ComparisonExpressionRhs,
+  FilterClause,
+  RefExpression,
+  refExpressionFactory,
+  SqlQuery,
+  StringType,
+  WhereClause,
+} from 'druid-query-toolkit';
+import { aliasFactory, stringFactory } from 
'druid-query-toolkit/build/ast/sql-query/helpers';
+import React from 'react';
+
+import { RowFilter } from '../../../query-view';
+
+export interface StringMenuItemsProps {
+  addFunctionToGroupBy: (
+    functionName: string,
+    spacing: string[],
+    argumentsArray: (StringType | number)[],
+    run: boolean,
+    alias: Alias,
+  ) => void;
+  addToGroupBy: (columnName: string, run: boolean) => void;
+  addAggregateColumn: (
+    columnName: string | RefExpression,
+    functionName: string,
+    run: boolean,
+    alias?: Alias,
+    distinct?: boolean,
+    filter?: FilterClause,
+  ) => void;
+  filterByRow: (filters: RowFilter[], preferablyRun: boolean) => void;
+  queryAst?: SqlQuery;
+  columnName: string;
+}
+
+export class StringMenuItems extends React.PureComponent<StringMenuItemsProps> 
{
+  constructor(props: StringMenuItemsProps, context: any) {
+    super(props, context);
+  }
+
+  renderFilterMenu(): JSX.Element {
+    const { columnName, filterByRow } = this.props;
+
+    return (
+      <MenuItem icon={IconNames.FILTER} text={`Filter`}>
+        <MenuItem
+          text={`"${columnName}" = 'xxx'`}
+          onClick={() => filterByRow([{ row: 'xxx', header: columnName, 
operator: '=' }], false)}
+        />
+        <MenuItem
+          text={`"${columnName}" LIKE '%xxx%'`}
+          onClick={() => filterByRow([{ row: 'xxx', header: columnName, 
operator: 'LIKE' }], false)}
+        />
+      </MenuItem>
+    );
+  }
+
+  renderGroupByMenu(): JSX.Element {
+    const { columnName, addFunctionToGroupBy, addToGroupBy } = this.props;
+
+    return (
+      <MenuItem icon={IconNames.GROUP_OBJECTS} text={`Group by`}>
+        <MenuItem text={`"${columnName}"`} onClick={() => 
addToGroupBy(columnName, true)} />
+        <MenuItem
+          text={`SUBSTRING("${columnName}", 1, 2) AS 
"${columnName}_substring"`}
+          onClick={() =>
+            addFunctionToGroupBy(
+              'SUBSTRING',
+              [' ', ' '],
+              [stringFactory(columnName, `"`), 1, 2],
+              true,
+              aliasFactory(`${columnName}_substring`),
+            )
+          }
+        />
+      </MenuItem>
+    );
+  }
+
+  renderAggregateMenu(): JSX.Element {
+    const { columnName, addAggregateColumn } = this.props;
+    return (
+      <MenuItem icon={IconNames.FUNCTION} text={`Aggregate`}>
+        <MenuItem
+          text={`COUNT(DISTINCT "${columnName}") AS "dist_${columnName}"`}
+          onClick={() =>
+            addAggregateColumn(columnName, 'COUNT', true, 
aliasFactory(`dist_${columnName}`), true)
+          }
+        />
+        <MenuItem
+          text={`COUNT(*) FILTER (WHERE "${columnName}" = 'xxx') AS 
${columnName}_filtered_count `}
+          onClick={() =>
+            addAggregateColumn(
+              refExpressionFactory('*'),
+              'COUNT',
+              false,
+              aliasFactory(`${columnName}_filtered_count`),
+              false,
+              new FilterClause({
+                keyword: 'FILTER',
+                spacing: [' '],
+                ex: new WhereClause({
+                  keyword: 'WHERE',
+                  spacing: [' '],
+                  filter: new ComparisonExpression({
+                    parens: [],
+                    ex: stringFactory(columnName, '"'),
+                    rhs: new ComparisonExpressionRhs({
+                      parens: [],
+                      op: '=',
+                      rhs: stringFactory('xxx', `'`),
+                      spacing: [' ', ' '],
+                    }),
+                  }),
+                }),
+              }),
+            )
+          }
+        />
+      </MenuItem>
+    );
+  }
+
+  render(): JSX.Element {
+    const { queryAst } = this.props;
+    let hasGroupBy;
+    if (queryAst) {
+      hasGroupBy = queryAst.groupByClause;
+    }
+    return (
+      <>
+        {queryAst && this.renderFilterMenu()}
+        {hasGroupBy && this.renderGroupByMenu()}
+        {hasGroupBy && this.renderAggregateMenu()}
+      </>
+    );
+  }
+}
diff --git 
a/web-console/src/views/query-view/column-tree/column-tree-menu/time-menu-items/__snapshots__/time-menu-items.spec.tsx.snap
 
b/web-console/src/views/query-view/column-tree/column-tree-menu/time-menu-items/__snapshots__/time-menu-items.spec.tsx.snap
new file mode 100644
index 0000000..0e6d23e
--- /dev/null
+++ 
b/web-console/src/views/query-view/column-tree/column-tree-menu/time-menu-items/__snapshots__/time-menu-items.spec.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`time menu matches snapshot 1`] = `null`;
diff --git a/web-console/src/views/query-view/run-button/run-button.spec.tsx 
b/web-console/src/views/query-view/column-tree/column-tree-menu/time-menu-items/time-menu-items.spec.tsx
similarity index 72%
copy from web-console/src/views/query-view/run-button/run-button.spec.tsx
copy to 
web-console/src/views/query-view/column-tree/column-tree-menu/time-menu-items/time-menu-items.spec.tsx
index 1560f7a..398ecc0 100644
--- a/web-console/src/views/query-view/run-button/run-button.spec.tsx
+++ 
b/web-console/src/views/query-view/column-tree/column-tree-menu/time-menu-items/time-menu-items.spec.tsx
@@ -19,22 +19,22 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import { RunButton } from './run-button';
+import { TimeMenuItems } from './time-menu-items';
 
-describe('run button', () => {
+describe('time menu', () => {
   it('matches snapshot', () => {
-    const runButton = (
-      <RunButton
-        onEditContext={() => null}
-        runeMode={false}
-        queryContext={{}}
-        onQueryContextChange={() => {}}
-        onRun={() => {}}
-        onExplain={() => {}}
+    const timeMenu = (
+      <TimeMenuItems
+        clear={() => null}
+        addFunctionToGroupBy={() => null}
+        addToGroupBy={() => null}
+        addAggregateColumn={() => null}
+        filterByRow={() => null}
+        columnName={'text'}
       />
     );
 
-    const { container } = render(runButton);
+    const { container } = render(timeMenu);
     expect(container.firstChild).toMatchSnapshot();
   });
 });
diff --git 
a/web-console/src/views/query-view/column-tree/column-tree-menu/time-menu-items/time-menu-items.tsx
 
b/web-console/src/views/query-view/column-tree/column-tree-menu/time-menu-items/time-menu-items.tsx
new file mode 100644
index 0000000..3400ae3
--- /dev/null
+++ 
b/web-console/src/views/query-view/column-tree/column-tree-menu/time-menu-items/time-menu-items.tsx
@@ -0,0 +1,380 @@
+/*
+ * 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 { MenuDivider, MenuItem } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import {
+  AdditiveExpression,
+  Alias,
+  FilterClause,
+  SqlQuery,
+  StringType,
+  timestampFactory,
+} from 'druid-query-toolkit';
+import {
+  aliasFactory,
+  intervalFactory,
+  refExpressionFactory,
+  stringFactory,
+} from 'druid-query-toolkit/build/ast/sql-query/helpers';
+import React from 'react';
+
+import { RowFilter } from '../../../query-view';
+
+export interface TimeMenuItemsProps {
+  addFunctionToGroupBy: (
+    functionName: string,
+    spacing: string[],
+    argumentsArray: (StringType | number)[],
+    run: boolean,
+    alias: Alias,
+  ) => void;
+  addToGroupBy: (columnName: string, run: boolean) => void;
+  addAggregateColumn: (
+    columnName: string,
+    functionName: string,
+    run: boolean,
+    alias?: Alias,
+    distinct?: boolean,
+    filter?: FilterClause,
+  ) => void;
+  filterByRow: (filters: RowFilter[], preferablyRun: boolean) => void;
+  queryAst?: SqlQuery;
+  columnName: string;
+  clear: () => void;
+}
+
+export class TimeMenuItems extends React.PureComponent<TimeMenuItemsProps> {
+  constructor(props: TimeMenuItemsProps, context: any) {
+    super(props, context);
+  }
+
+  formatTime(timePart: number): string {
+    if (timePart % 10 > 0) {
+      return String(timePart);
+    } else return '0' + String(timePart);
+  }
+
+  getNextMonth(month: number, year: number): { month: string; year: number } {
+    if (month === 12) {
+      return { month: '01', year: year + 1 };
+    }
+    return { month: this.formatTime(month + 1), year: year };
+  }
+
+  getNextDay(
+    day: number,
+    month: number,
+    year: number,
+  ): { day: string; month: string; year: number } {
+    if (
+      month === 1 ||
+      month === 3 ||
+      month === 5 ||
+      month === 7 ||
+      month === 8 ||
+      month === 10 ||
+      month === 12
+    ) {
+      if (day === 31) {
+        const next = this.getNextMonth(month, year);
+        return { day: '01', month: next.month, year: next.year };
+      }
+    } else if (month === 4 || month === 6 || month === 9 || month === 11) {
+      if (day === 30) {
+        const next = this.getNextMonth(month, year);
+        return { day: '01', month: next.month, year: next.year };
+      }
+    } else if (month === 2) {
+      if ((day === 29 && year % 4 === 0) || (day === 28 && year % 4)) {
+        const next = this.getNextMonth(month, year);
+        return { day: '01', month: next.month, year: next.year };
+      }
+    }
+    return { day: this.formatTime(day + 1), month: this.formatTime(month), 
year: year };
+  }
+
+  getNextHour(
+    hour: number,
+    day: number,
+    month: number,
+    year: number,
+  ): { hour: string; day: string; month: string; year: number } {
+    if (hour === 23) {
+      const next = this.getNextDay(day, month, year);
+      return { hour: '00', day: next.day, month: next.month, year: next.year };
+    }
+    return {
+      hour: this.formatTime(hour + 1),
+      day: this.formatTime(day),
+      month: this.formatTime(month),
+      year: year,
+    };
+  }
+
+  renderFilterMenu(): JSX.Element {
+    const { columnName, filterByRow, clear } = this.props;
+    const date = new Date();
+    const year = date.getFullYear();
+    const month = date.getMonth();
+    const day = date.getDay();
+    const hour = date.getHours();
+
+    return (
+      <MenuItem icon={IconNames.FILTER} text={`Filter`}>
+        <MenuItem
+          text={`Latest hour`}
+          onClick={() => {
+            const additiveExpression = new AdditiveExpression({
+              parens: [],
+              op: ['-'],
+              ex: [refExpressionFactory('CURRENT_TIMESTAMP'), 
intervalFactory('HOUR', '1')],
+              spacing: [' ', ' '],
+            });
+            clear();
+            filterByRow([{ row: additiveExpression, header: columnName, 
operator: '>=' }], true);
+          }}
+        />
+        <MenuItem
+          text={`Latest day`}
+          onClick={() => {
+            const additiveExpression = new AdditiveExpression({
+              parens: [],
+              op: ['-'],
+              ex: [refExpressionFactory('CURRENT_TIMESTAMP'), 
intervalFactory('DAY', '1')],
+              spacing: [' ', ' '],
+            });
+            clear();
+            filterByRow([{ row: additiveExpression, header: columnName, 
operator: '>=' }], true);
+          }}
+        />
+        <MenuItem
+          text={`Latest week`}
+          onClick={() => {
+            const additiveExpression = new AdditiveExpression({
+              parens: [],
+              op: ['-'],
+              ex: [refExpressionFactory('CURRENT_TIMESTAMP'), 
intervalFactory('DAY', '7')],
+              spacing: [' ', ' '],
+            });
+            clear();
+            filterByRow([{ row: additiveExpression, header: columnName, 
operator: '>=' }], true);
+          }}
+        />
+        <MenuItem
+          text={`Latest month`}
+          onClick={() => {
+            const additiveExpression = new AdditiveExpression({
+              parens: [],
+              op: ['-'],
+              ex: [refExpressionFactory('CURRENT_TIMESTAMP'), 
intervalFactory('MONTH', '1')],
+              spacing: [' ', ' '],
+            });
+            clear();
+            filterByRow([{ row: additiveExpression, header: columnName, 
operator: '>=' }], true);
+          }}
+        />
+        <MenuItem
+          text={`Latest year`}
+          onClick={() => {
+            const additiveExpression = new AdditiveExpression({
+              parens: [],
+              op: ['-'],
+              ex: [refExpressionFactory('CURRENT_TIMESTAMP'), 
intervalFactory('YEAR', '1')],
+              spacing: [' ', ' '],
+            });
+            clear();
+            filterByRow([{ row: additiveExpression, header: columnName, 
operator: '>=' }], true);
+          }}
+        />
+        <MenuDivider />
+        <MenuItem
+          text={`Current hour`}
+          onClick={() => {
+            const next = this.getNextHour(hour, day, month, year);
+            clear();
+            filterByRow(
+              [
+                {
+                  row: stringFactory(columnName, `"`),
+                  header: timestampFactory(
+                    `${year}-${month}-${day} ${this.formatTime(hour)}:00:00`,
+                  ),
+                  operator: '<=',
+                },
+                {
+                  row: timestampFactory(
+                    `${next.year}-${next.month}-${next.day} 
${next.hour}:00:00`,
+                  ),
+                  header: columnName,
+                  operator: '<',
+                },
+              ],
+              true,
+            );
+          }}
+        />
+        <MenuItem
+          text={`Current day`}
+          onClick={() => {
+            const next = this.getNextDay(day, month, year);
+            clear();
+            filterByRow(
+              [
+                {
+                  row: stringFactory(columnName, `"`),
+                  header: timestampFactory(`${year}-${month}-${day} 00:00:00`),
+                  operator: '<=',
+                },
+                {
+                  row: 
timestampFactory(`${next.year}-${next.month}-${next.day} 00:00:00`),
+                  header: columnName,
+                  operator: '<',
+                },
+              ],
+              true,
+            );
+          }}
+        />
+        <MenuItem
+          text={`Current month`}
+          onClick={() => {
+            const next = this.getNextMonth(month, year);
+            clear();
+            filterByRow(
+              [
+                {
+                  row: stringFactory(columnName, `"`),
+                  header: timestampFactory(`${year}-${month}-01 00:00:00`),
+                  operator: '<=',
+                },
+                {
+                  row: timestampFactory(`${next.year}-${next.month}-01 
00:00:00`),
+                  header: columnName,
+                  operator: '<',
+                },
+              ],
+              true,
+            );
+          }}
+        />
+        <MenuItem
+          text={`Current year`}
+          onClick={() => {
+            clear();
+            filterByRow(
+              [
+                {
+                  row: stringFactory(columnName, `"`),
+                  header: timestampFactory(`${year}-01-01 00:00:00`),
+                  operator: '<=',
+                },
+                {
+                  row: timestampFactory(`${Number(year) + 1}-01-01 00:00:00`),
+                  header: columnName,
+                  operator: '<',
+                },
+              ],
+              true,
+            );
+          }}
+        />
+      </MenuItem>
+    );
+  }
+
+  renderGroupByMenu(): JSX.Element {
+    const { columnName, addFunctionToGroupBy } = this.props;
+
+    return (
+      <MenuItem icon={IconNames.GROUP_OBJECTS} text={`Group by`}>
+        <MenuItem
+          text={`TIME_FLOOR("${columnName}", 'PT1H') AS 
"${columnName}_time_floor"`}
+          onClick={() =>
+            addFunctionToGroupBy(
+              'TIME_FLOOR',
+              [' '],
+              [stringFactory(columnName, `"`), stringFactory('PT1H', `'`)],
+              true,
+              aliasFactory(`${columnName}_time_floor`),
+            )
+          }
+        />
+        <MenuItem
+          text={`TIME_FLOOR("${columnName}", 'P1D') AS 
"${columnName}_time_floor"`}
+          onClick={() =>
+            addFunctionToGroupBy(
+              'TIME_FLOOR',
+              [' '],
+              [stringFactory(columnName, `"`), stringFactory('P1D', `'`)],
+              true,
+              aliasFactory(`${columnName}_time_floor`),
+            )
+          }
+        />
+        <MenuItem
+          text={`TIME_FLOOR("${columnName}", 'P7D') AS 
"${columnName}_time_floor"`}
+          onClick={() =>
+            addFunctionToGroupBy(
+              'TIME_FLOOR',
+              [' '],
+              [stringFactory(columnName, `"`), stringFactory('P7D', `'`)],
+              true,
+              aliasFactory(`${columnName}_time_floor`),
+            )
+          }
+        />
+      </MenuItem>
+    );
+  }
+
+  renderAggregateMenu(): JSX.Element {
+    const { columnName, addAggregateColumn } = this.props;
+    return (
+      <MenuItem icon={IconNames.FUNCTION} text={`Aggregate`}>
+        <MenuItem
+          text={`MAX("${columnName}") AS "max_${columnName}"`}
+          onClick={() =>
+            addAggregateColumn(columnName, 'MAX', true, 
aliasFactory(`max_${columnName}`))
+          }
+        />
+        <MenuItem
+          text={`MIN("${columnName}") AS "min_${columnName}"`}
+          onClick={() =>
+            addAggregateColumn(columnName, 'MIN', true, 
aliasFactory(`min_${columnName}`))
+          }
+        />
+      </MenuItem>
+    );
+  }
+
+  render(): JSX.Element {
+    const { queryAst } = this.props;
+    let hasGroupBy;
+    if (queryAst) {
+      hasGroupBy = queryAst.groupByClause;
+    }
+    return (
+      <>
+        {queryAst && this.renderFilterMenu()}
+        {hasGroupBy && this.renderGroupByMenu()}
+        {hasGroupBy && this.renderAggregateMenu()}
+      </>
+    );
+  }
+}
diff --git a/web-console/src/views/query-view/column-tree/column-tree.spec.tsx 
b/web-console/src/views/query-view/column-tree/column-tree.spec.tsx
index e8ca98d..d210eb2 100644
--- a/web-console/src/views/query-view/column-tree/column-tree.spec.tsx
+++ b/web-console/src/views/query-view/column-tree/column-tree.spec.tsx
@@ -27,6 +27,13 @@ describe('column tree', () => {
   it('matches snapshot', () => {
     const columnTree = (
       <ColumnTree
+        queryAst={() => undefined}
+        hasGroupBy={() => false}
+        clear={() => null}
+        addFunctionToGroupBy={() => null}
+        filterByRow={() => null}
+        addAggregateColumn={() => null}
+        addToGroupBy={() => null}
         columnMetadataLoading={false}
         columnMetadata={
           [
diff --git a/web-console/src/views/query-view/column-tree/column-tree.tsx 
b/web-console/src/views/query-view/column-tree/column-tree.tsx
index ea62f20..0a491b0 100644
--- a/web-console/src/views/query-view/column-tree/column-tree.tsx
+++ b/web-console/src/views/query-view/column-tree/column-tree.tsx
@@ -16,14 +16,29 @@
  * limitations under the License.
  */
 
-import { HTMLSelect, IconName, ITreeNode, Menu, MenuItem, Position, Tree } 
from '@blueprintjs/core';
-import { Popover } from '@blueprintjs/core/lib/cjs';
+import {
+  HTMLSelect,
+  IconName,
+  ITreeNode,
+  Menu,
+  MenuItem,
+  Popover,
+  Position,
+  Tree,
+} from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import { Alias, FilterClause, RefExpression, SqlQuery, StringType } from 
'druid-query-toolkit';
 import React, { ChangeEvent } from 'react';
 
 import { Loader } from '../../../components';
+import { Deferred } from '../../../components/deferred/deferred';
 import { copyAndAlert, escapeSqlIdentifier, groupBy } from '../../../utils';
 import { ColumnMetadata } from '../../../utils/column-metadata';
+import { RowFilter } from '../query-view';
+
+import { NumberMenuItems } from 
'./column-tree-menu/number-menu-items/number-menu-items';
+import { StringMenuItems } from 
'./column-tree-menu/string-menu-items/string-menu-items';
+import { TimeMenuItems } from 
'./column-tree-menu/time-menu-items/time-menu-items';
 
 import './column-tree.scss';
 
@@ -88,10 +103,31 @@ export interface ColumnTreeProps {
   onQueryStringChange: (queryString: string) => void;
   defaultSchema?: string;
   defaultTable?: string;
+  addFunctionToGroupBy: (
+    functionName: string,
+    spacing: string[],
+    argumentsArray: (StringType | number)[],
+    run: boolean,
+    alias: Alias,
+  ) => void;
+  addToGroupBy: (columnName: string, run: boolean) => void;
+  addAggregateColumn: (
+    columnName: string | RefExpression,
+    functionName: string,
+    run: boolean,
+    alias?: Alias,
+    distinct?: boolean,
+    filter?: FilterClause,
+  ) => void;
+  filterByRow: (filters: RowFilter[], preferablyRun: boolean) => void;
+  hasGroupBy: () => boolean;
+  queryAst: () => SqlQuery | undefined;
+  clear: () => void;
 }
 
 export interface ColumnTreeState {
   prevColumnMetadata?: ColumnMetadata[];
+  prevGroupByStatus?: boolean;
   columnTree?: ITreeNode[];
   selectedTreeIndex: number;
   expandedNode: number;
@@ -100,7 +136,6 @@ export interface ColumnTreeState {
 export class ColumnTree extends React.PureComponent<ColumnTreeProps, 
ColumnTreeState> {
   static getDerivedStateFromProps(props: ColumnTreeProps, state: 
ColumnTreeState) {
     const { columnMetadata, defaultSchema, defaultTable } = props;
-
     if (columnMetadata && columnMetadata !== state.prevColumnMetadata) {
       const columnTree = groupBy(
         columnMetadata,
@@ -122,7 +157,7 @@ export class ColumnTree extends 
React.PureComponent<ColumnTreeProps, ColumnTreeS
                     <Menu>
                       <MenuItem
                         icon={IconNames.FULLSCREEN}
-                        text={`Show: ${table}`}
+                        text={`Select ... from ${table}`}
                         onClick={() => {
                           handleTableClick(
                             schema,
@@ -160,35 +195,72 @@ export class ColumnTree extends 
React.PureComponent<ColumnTreeProps, ColumnTreeS
                   <Popover
                     boundary={'window'}
                     position={Position.RIGHT}
+                    autoFocus={false}
+                    targetClassName={'bp3-popover-open'}
                     content={
-                      <Menu>
-                        <MenuItem
-                          icon={IconNames.FULLSCREEN}
-                          text={`Show: ${columnData.COLUMN_NAME}`}
-                          onClick={() => {
-                            handleColumnClick(
-                              schema,
-                              table,
-                              {
-                                id: columnData.COLUMN_NAME,
-                                icon: 
ColumnTree.dataTypeToIcon(columnData.DATA_TYPE),
-                                label: columnData.COLUMN_NAME,
-                              },
-                              props.onQueryStringChange,
-                            );
-                          }}
-                        />
-                        <MenuItem
-                          icon={IconNames.CLIPBOARD}
-                          text={`Copy: ${columnData.COLUMN_NAME}`}
-                          onClick={() => {
-                            copyAndAlert(
-                              columnData.COLUMN_NAME,
-                              `${columnData.COLUMN_NAME} query copied to 
clipboard`,
-                            );
-                          }}
-                        />
-                      </Menu>
+                      <Deferred
+                        content={() => (
+                          <Menu>
+                            <MenuItem
+                              icon={IconNames.FULLSCREEN}
+                              text={`Show: ${columnData.COLUMN_NAME}`}
+                              onClick={() => {
+                                handleColumnClick(
+                                  schema,
+                                  table,
+                                  {
+                                    id: columnData.COLUMN_NAME,
+                                    icon: 
ColumnTree.dataTypeToIcon(columnData.DATA_TYPE),
+                                    label: columnData.COLUMN_NAME,
+                                  },
+                                  props.onQueryStringChange,
+                                );
+                              }}
+                            />
+                            {columnData.DATA_TYPE === 'BIGINT' && (
+                              <NumberMenuItems
+                                
addFunctionToGroupBy={props.addFunctionToGroupBy}
+                                addToGroupBy={props.addToGroupBy}
+                                addAggregateColumn={props.addAggregateColumn}
+                                filterByRow={props.filterByRow}
+                                columnName={columnData.COLUMN_NAME}
+                                queryAst={props.queryAst()}
+                              />
+                            )}
+                            {columnData.DATA_TYPE === 'VARCHAR' && (
+                              <StringMenuItems
+                                
addFunctionToGroupBy={props.addFunctionToGroupBy}
+                                addToGroupBy={props.addToGroupBy}
+                                addAggregateColumn={props.addAggregateColumn}
+                                filterByRow={props.filterByRow}
+                                columnName={columnData.COLUMN_NAME}
+                                queryAst={props.queryAst()}
+                              />
+                            )}
+                            {columnData.DATA_TYPE === 'TIMESTAMP' && (
+                              <TimeMenuItems
+                                clear={props.clear}
+                                
addFunctionToGroupBy={props.addFunctionToGroupBy}
+                                addToGroupBy={props.addToGroupBy}
+                                addAggregateColumn={props.addAggregateColumn}
+                                filterByRow={props.filterByRow}
+                                columnName={columnData.COLUMN_NAME}
+                                queryAst={props.queryAst()}
+                              />
+                            )}
+                            <MenuItem
+                              icon={IconNames.CLIPBOARD}
+                              text={`Copy: ${columnData.COLUMN_NAME}`}
+                              onClick={() => {
+                                copyAndAlert(
+                                  columnData.COLUMN_NAME,
+                                  `${columnData.COLUMN_NAME} query copied to 
clipboard`,
+                                );
+                              }}
+                            />
+                          </Menu>
+                        )}
+                      />
                     }
                   >
                     <div>{columnData.COLUMN_NAME}</div>
@@ -203,29 +275,28 @@ export class ColumnTree extends 
React.PureComponent<ColumnTreeProps, ColumnTreeS
       let selectedTreeIndex = -1;
       let expandedNode = -1;
       if (defaultSchema && columnTree) {
-        selectedTreeIndex = columnTree
-          .map(function(x) {
-            return x.id;
-          })
-          .indexOf(defaultSchema);
+        selectedTreeIndex = columnTree.findIndex(x => {
+          return x.id === defaultSchema;
+        });
       }
+
       if (selectedTreeIndex > -1) {
         const treeNodes = columnTree[selectedTreeIndex].childNodes;
         if (treeNodes) {
           if (defaultTable) {
-            expandedNode = treeNodes
-              .map(node => {
-                return node.id;
-              })
-              .indexOf(defaultTable);
+            expandedNode = treeNodes.findIndex(node => {
+              return node.id === defaultTable;
+            });
           }
         }
       }
+
       return {
         prevColumnMetadata: columnMetadata,
         columnTree,
         selectedTreeIndex,
         expandedNode,
+        prevGroupByStatus: props.hasGroupBy,
       };
     }
     return null;
diff --git 
a/web-console/src/views/query-view/query-output/query-output.spec.tsx 
b/web-console/src/views/query-view/query-output/query-output.spec.tsx
index e56b1d1..3cfb424 100644
--- a/web-console/src/views/query-view/query-output/query-output.spec.tsx
+++ b/web-console/src/views/query-view/query-output/query-output.spec.tsx
@@ -29,7 +29,6 @@ describe('query output', () => {
         sqlOrderBy={() => null}
         sqlFilterRow={() => null}
         sqlExcludeColumn={() => null}
-        disabled={false}
         loading={false}
         error="lol"
       />
diff --git a/web-console/src/views/query-view/query-output/query-output.tsx 
b/web-console/src/views/query-view/query-output/query-output.tsx
index 9a3f4ea..ad89e4e 100644
--- a/web-console/src/views/query-view/query-output/query-output.tsx
+++ b/web-console/src/views/query-view/query-output/query-output.tsx
@@ -18,7 +18,7 @@
 
 import { Menu, MenuItem, Popover } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { HeaderRows } from 'druid-query-toolkit';
+import { HeaderRows, SqlQuery } from 'druid-query-toolkit';
 import {
   basicIdentifierEscape,
   basicLiteralEscape,
@@ -28,34 +28,40 @@ import ReactTable from 'react-table';
 
 import { copyAndAlert } from '../../../utils';
 import { BasicAction, basicActionsToMenu } from '../../../utils/basic-action';
+import { RowFilter } from '../query-view';
 
 import './query-output.scss';
 
 export interface QueryOutputProps {
-  aggregateColumns?: string[];
-  disabled: boolean;
   loading: boolean;
-  sqlFilterRow: (row: string, header: string, operator: '=' | '!=') => void;
-  sqlExcludeColumn: (header: string) => void;
-  sqlOrderBy: (header: string, direction: 'ASC' | 'DESC') => void;
-  sorted?: { id: string; desc: boolean }[];
-  result?: HeaderRows;
+  sqlFilterRow: (filters: RowFilter[], run: boolean) => void;
+  sqlExcludeColumn: (header: string, run: boolean) => void;
+  sqlOrderBy: (header: string, direction: 'ASC' | 'DESC', run: boolean) => 
void;
+  queryResult?: HeaderRows;
+  parsedQuery?: SqlQuery;
   error?: string;
   runeMode: boolean;
 }
 
 export class QueryOutput extends React.PureComponent<QueryOutputProps> {
   render(): JSX.Element {
-    const { result, loading, error } = this.props;
+    const { queryResult, parsedQuery, loading, error } = this.props;
+
+    let aggregateColumns: string[] | undefined;
+    if (parsedQuery) {
+      aggregateColumns = parsedQuery.getAggregateColumns();
+    }
 
     return (
       <div className="query-output">
         <ReactTable
-          data={result ? result.rows : []}
+          data={queryResult ? queryResult.rows : []}
           loading={loading}
-          noDataText={!loading && result && !result.rows.length ? 'No results' 
: error || ''}
+          noDataText={
+            !loading && queryResult && !queryResult.rows.length ? 'No 
queryResults' : error || ''
+          }
           sortable={false}
-          columns={(result ? result.header : []).map((h: any, i) => {
+          columns={(queryResult ? queryResult.header : []).map((h: any, i) => {
             return {
               Header: () => {
                 return (
@@ -80,11 +86,8 @@ export class QueryOutput extends 
React.PureComponent<QueryOutputProps> {
                 }
                 return value;
               },
-              className: this.props.aggregateColumns
-                ? this.props.aggregateColumns.indexOf(h) > -1
-                  ? 'aggregate-column'
-                  : undefined
-                : undefined,
+              className:
+                aggregateColumns && aggregateColumns.includes(h) ? 
'aggregate-column' : undefined,
             };
           })}
         />
@@ -92,9 +95,45 @@ export class QueryOutput extends 
React.PureComponent<QueryOutputProps> {
     );
   }
   getHeaderActions(h: string) {
-    const { disabled, sqlExcludeColumn, sqlOrderBy, runeMode } = this.props;
+    const { parsedQuery, sqlExcludeColumn, sqlOrderBy, runeMode } = this.props;
+
     let actionsMenu;
-    if (disabled) {
+    if (parsedQuery) {
+      const sorted = parsedQuery.getSorted();
+
+      const basicActions: BasicAction[] = [];
+      if (sorted) {
+        sorted.map(sorted => {
+          if (sorted.id === h) {
+            basicActions.push({
+              icon: sorted.desc ? IconNames.SORT_ASC : IconNames.SORT_DESC,
+              title: `Order by: ${h} ${sorted.desc ? 'ASC' : 'DESC'}`,
+              onAction: () => sqlOrderBy(h, sorted.desc ? 'ASC' : 'DESC', 
true),
+            });
+          }
+        });
+      }
+      if (!basicActions.length) {
+        basicActions.push(
+          {
+            icon: IconNames.SORT_ASC,
+            title: `Order by: ${h} ASC`,
+            onAction: () => sqlOrderBy(h, 'ASC', true),
+          },
+          {
+            icon: IconNames.SORT_DESC,
+            title: `Order by: ${h} DESC`,
+            onAction: () => sqlOrderBy(h, 'DESC', true),
+          },
+        );
+      }
+      basicActions.push({
+        icon: IconNames.CROSS,
+        title: `Remove: ${h}`,
+        onAction: () => sqlExcludeColumn(h, true),
+      });
+      actionsMenu = basicActionsToMenu(basicActions);
+    } else {
       actionsMenu = (
         <Menu>
           <MenuItem
@@ -130,48 +169,28 @@ export class QueryOutput extends 
React.PureComponent<QueryOutputProps> {
           )}
         </Menu>
       );
-    } else {
-      const { sorted } = this.props;
-      const basicActions: BasicAction[] = [];
-      if (sorted) {
-        sorted.map(sorted => {
-          if (sorted.id === h) {
-            basicActions.push({
-              icon: sorted.desc ? IconNames.SORT_ASC : IconNames.SORT_DESC,
-              title: `Order by: ${h} ${sorted.desc ? 'ASC' : 'DESC'}`,
-              onAction: () => sqlOrderBy(h, sorted.desc ? 'ASC' : 'DESC'),
-            });
-          }
-        });
-      }
-      if (!basicActions.length) {
-        basicActions.push(
-          {
-            icon: IconNames.SORT_ASC,
-            title: `Order by: ${h} ASC`,
-            onAction: () => sqlOrderBy(h, 'ASC'),
-          },
-          {
-            icon: IconNames.SORT_DESC,
-            title: `Order by: ${h} DESC`,
-            onAction: () => sqlOrderBy(h, 'DESC'),
-          },
-        );
-      }
-      basicActions.push({
-        icon: IconNames.CROSS,
-        title: `Remove: ${h}`,
-        onAction: () => sqlExcludeColumn(h),
-      });
-      actionsMenu = basicActionsToMenu(basicActions);
     }
     return actionsMenu ? actionsMenu : undefined;
   }
 
   getRowActions(row: string, header: string) {
-    const { disabled, sqlFilterRow, runeMode } = this.props;
+    const { parsedQuery, sqlFilterRow, runeMode } = this.props;
+
     let actionsMenu;
-    if (disabled) {
+    if (parsedQuery) {
+      actionsMenu = basicActionsToMenu([
+        {
+          icon: IconNames.FILTER_KEEP,
+          title: `Filter by: ${header} = ${row}`,
+          onAction: () => sqlFilterRow([{ row, header, operator: '=' }], true),
+        },
+        {
+          icon: IconNames.FILTER_REMOVE,
+          title: `Filter by: ${header} != ${row}`,
+          onAction: () => sqlFilterRow([{ row, header, operator: '!=' }], 
true),
+        },
+      ]);
+    } else {
       actionsMenu = (
         <Menu>
           <MenuItem
@@ -209,38 +228,29 @@ export class QueryOutput extends 
React.PureComponent<QueryOutputProps> {
           )}
         </Menu>
       );
-    } else {
-      actionsMenu = basicActionsToMenu([
-        {
-          icon: IconNames.FILTER_KEEP,
-          title: `Filter by: ${header} = ${row}`,
-          onAction: () => sqlFilterRow(row, header, '='),
-        },
-        {
-          icon: IconNames.FILTER_REMOVE,
-          title: `Filter by: ${header} != ${row}`,
-          onAction: () => sqlFilterRow(row, header, '!='),
-        },
-      ]);
     }
     return actionsMenu ? actionsMenu : undefined;
   }
 
   getHeaderClassName(h: string) {
-    const { sorted, aggregateColumns } = this.props;
+    const { parsedQuery } = this.props;
+
     const className = [];
-    className.push(
-      sorted
-        ? sorted.map(sorted => {
+    if (parsedQuery) {
+      const sorted = parsedQuery.getSorted();
+      if (sorted) {
+        className.push(
+          sorted.map(sorted => {
             if (sorted.id === h) {
               return sorted.desc ? '-sort-desc' : '-sort-asc';
             }
             return '';
-          })[0]
-        : undefined,
-    );
-    if (aggregateColumns) {
-      if (aggregateColumns.includes(h)) {
+          })[0],
+        );
+      }
+
+      const aggregateColumns = parsedQuery.getAggregateColumns();
+      if (aggregateColumns && aggregateColumns.includes(h)) {
         className.push('aggregate-header');
       }
     }
diff --git a/web-console/src/views/query-view/query-view.tsx 
b/web-console/src/views/query-view/query-view.tsx
index 68aa550..0694994 100644
--- a/web-console/src/views/query-view/query-view.tsx
+++ b/web-console/src/views/query-view/query-view.tsx
@@ -20,20 +20,31 @@ import { Intent } from '@blueprintjs/core';
 import axios from 'axios';
 import classNames from 'classnames';
 import {
+  AdditiveExpression,
+  Alias,
+  FilterClause,
   HeaderRows,
   isFirstRowHeader,
   normalizeQueryResult,
+  RefExpression,
   shouldIncludeTimestamp,
   sqlParserFactory,
   SqlQuery,
+  StringType,
+  Timestamp,
 } from 'druid-query-toolkit';
 import Hjson from 'hjson';
+import memoizeOne from 'memoize-one';
 import React from 'react';
 import SplitterLayout from 'react-splitter-layout';
 
 import { SQL_FUNCTIONS, SyntaxDescription } from 
'../../../lib/sql-function-doc';
 import { QueryPlanDialog } from '../../dialogs';
 import { EditContextDialog } from 
'../../dialogs/edit-context-dialog/edit-context-dialog';
+import {
+  QueryHistoryDialog,
+  QueryRecord,
+} from '../../dialogs/query-history-dialog/query-history-dialog';
 import { AppToaster } from '../../singletons/toaster';
 import {
   BasicQueryExplanation,
@@ -58,12 +69,20 @@ import { RunButton } from './run-button/run-button';
 
 import './query-view.scss';
 
-const parser = sqlParserFactory(
+const parserRaw = sqlParserFactory(
   SQL_FUNCTIONS.map((sql_function: SyntaxDescription) => {
     return sql_function.syntax.substr(0, sql_function.syntax.indexOf('('));
   }),
 );
 
+const parser = memoizeOne((sql: string) => {
+  try {
+    return parserRaw(sql);
+  } catch {
+    return;
+  }
+});
+
 interface QueryWithContext {
   queryString: string;
   queryContext: QueryContext;
@@ -74,8 +93,15 @@ export interface QueryViewProps {
   initQuery: string | undefined;
 }
 
+export interface RowFilter {
+  row: string | number | AdditiveExpression | Timestamp | StringType;
+  header: string | Timestamp | StringType;
+  operator: '!=' | '=' | '>' | '<' | 'like' | '>=' | '<=' | 'LIKE';
+}
+
 export interface QueryViewState {
   queryString: string;
+  queryAst: SqlQuery;
   queryContext: QueryContext;
 
   columnMetadataLoading: boolean;
@@ -83,8 +109,7 @@ export interface QueryViewState {
   columnMetadataError?: string;
 
   loading: boolean;
-  result?: HeaderRows;
-  queryExtraInfo?: QueryExtraInfoData;
+  result?: QueryResult;
   error?: string;
 
   explainDialogOpen: boolean;
@@ -94,9 +119,12 @@ export interface QueryViewState {
 
   defaultSchema?: string;
   defaultTable?: string;
-  ast?: SqlQuery;
 
   editContextDialogOpen: boolean;
+  historyDialogOpen: boolean;
+  queryHistory: QueryRecord[];
+
+  autoRun: boolean;
 }
 
 interface QueryResult {
@@ -149,8 +177,18 @@ export class QueryView extends 
React.PureComponent<QueryViewProps, QueryViewStat
 
   constructor(props: QueryViewProps, context: any) {
     super(props, context);
+
+    let queryString: string | undefined;
+    if (props.initQuery) {
+      queryString = props.initQuery;
+    } else if (localStorageGet(LocalStorageKeys.QUERY_KEY)) {
+      queryString = localStorageGet(LocalStorageKeys.QUERY_KEY);
+    }
+    const queryAst = queryString ? parser(queryString) : undefined;
+
     this.state = {
-      queryString: props.initQuery || 
localStorageGet(LocalStorageKeys.QUERY_KEY) || '',
+      queryString: queryString ? queryString : '',
+      queryAst,
       queryContext: {},
 
       columnMetadataLoading: false,
@@ -161,8 +199,11 @@ export class QueryView extends 
React.PureComponent<QueryViewProps, QueryViewStat
       loadingExplain: false,
 
       editContextDialogOpen: false,
-    };
+      historyDialogOpen: false,
+      queryHistory: [],
 
+      autoRun: true,
+    };
     this.metadataQueryManager = new QueryManager({
       processQuery: async () => {
         return await queryDruidSql<ColumnMetadata>({
@@ -199,7 +240,6 @@ export class QueryView extends 
React.PureComponent<QueryViewProps, QueryViewStat
         if (!(ast instanceof SqlQuery)) {
           ast = undefined;
         }
-
         if (QueryView.isJsonLike(queryString)) {
           jsonQuery = Hjson.parse(queryString);
         } else {
@@ -250,7 +290,6 @@ export class QueryView extends 
React.PureComponent<QueryViewProps, QueryViewStat
           shouldIncludeTimestamp(jsonQuery),
           isFirstRowHeader(jsonQuery),
         );
-
         return {
           queryResult,
           queryExtraInfo: {
@@ -266,11 +305,9 @@ export class QueryView extends 
React.PureComponent<QueryViewProps, QueryViewStat
       },
       onStateChange: ({ result, loading, error }) => {
         this.setState({
-          result: result ? result.queryResult : undefined,
-          queryExtraInfo: result ? result.queryExtraInfo : undefined,
+          result,
           loading,
           error,
-          ast: result ? result.parsedQuery : undefined,
         });
       },
     });
@@ -300,6 +337,28 @@ export class QueryView extends 
React.PureComponent<QueryViewProps, QueryViewStat
 
   componentDidMount(): void {
     this.metadataQueryManager.runQuery(null);
+
+    const localStorageQueryHistoy = 
localStorageGet(LocalStorageKeys.QUERY_HISTORY);
+    let queryHistory;
+    if (localStorageQueryHistoy) {
+      try {
+        queryHistory = JSON.parse(localStorageQueryHistoy);
+      } catch {}
+      if (queryHistory) {
+        this.setState({ queryHistory });
+      }
+    }
+
+    const localStorageAutoRun = localStorageGet(LocalStorageKeys.AUTO_RUN);
+    let autoRun;
+    if (localStorageAutoRun) {
+      try {
+        autoRun = JSON.parse(localStorageAutoRun);
+      } catch {}
+      if (typeof autoRun === 'boolean') {
+        this.setState({ autoRun });
+      }
+    }
   }
 
   componentWillUnmount(): void {
@@ -311,21 +370,23 @@ export class QueryView extends 
React.PureComponent<QueryViewProps, QueryViewStat
   handleDownload = (filename: string, format: string) => {
     const { result } = this.state;
     if (!result) return;
+    const { queryResult } = result;
+
     let lines: string[] = [];
     let separator: string = '';
 
     if (format === 'csv' || format === 'tsv') {
       separator = format === 'csv' ? ',' : '\t';
-      lines.push(result.header.map(str => QueryView.formatStr(str, 
format)).join(separator));
+      lines.push(queryResult.header.map(str => QueryView.formatStr(str, 
format)).join(separator));
       lines = lines.concat(
-        result.rows.map(r => r.map(cell => QueryView.formatStr(cell, 
format)).join(separator)),
+        queryResult.rows.map(r => r.map(cell => QueryView.formatStr(cell, 
format)).join(separator)),
       );
     } else {
       // json
-      lines = result.rows.map(r => {
+      lines = queryResult.rows.map(r => {
         const outputObject: Record<string, any> = {};
         for (let k = 0; k < r.length; k++) {
-          const newName = result.header[k];
+          const newName = queryResult.header[k];
           if (newName) {
             outputObject[newName] = r[k];
           }
@@ -347,6 +408,24 @@ export class QueryView extends 
React.PureComponent<QueryViewProps, QueryViewStat
         explainResult={explainResult}
         explainError={explainError}
         onClose={() => this.setState({ explainDialogOpen: false })}
+        setQueryString={(queryString: string) =>
+          this.setState({ queryString, explainDialogOpen: false, queryAst: 
parser(queryString) })
+        }
+      />
+    );
+  }
+
+  renderHistoryDialog() {
+    const { historyDialogOpen, queryHistory } = this.state;
+    if (!historyDialogOpen) return;
+
+    return (
+      <QueryHistoryDialog
+        queryRecords={queryHistory}
+        setQueryString={queryString =>
+          this.setState({ queryString, queryAst: parser(queryString), 
historyDialogOpen: false })
+        }
+        onClose={() => this.setState({ historyDialogOpen: false })}
       />
     );
   }
@@ -372,13 +451,11 @@ export class QueryView extends 
React.PureComponent<QueryViewProps, QueryViewStat
       queryContext,
       loading,
       result,
-      queryExtraInfo,
       error,
       columnMetadata,
-      ast,
+      autoRun,
     } = this.state;
     const runeMode = QueryView.isJsonLike(queryString);
-
     return (
       <SplitterLayout
         vertical
@@ -399,77 +476,194 @@ export class QueryView extends 
React.PureComponent<QueryViewProps, QueryViewStat
           />
           <div className="control-bar">
             <RunButton
+              autoRun={autoRun}
+              setAutoRun={(autoRun: boolean) => this.setAutoRun(autoRun)}
               onEditContext={() => this.setState({ editContextDialogOpen: true 
})}
               runeMode={runeMode}
               queryContext={queryContext}
               onQueryContextChange={this.handleQueryContextChange}
               onRun={this.handleRun}
               onExplain={this.handleExplain}
+              onHistory={() => this.setState({ historyDialogOpen: true })}
             />
-            {queryExtraInfo && (
-              <QueryExtraInfo queryExtraInfo={queryExtraInfo} 
onDownload={this.handleDownload} />
+            {result && (
+              <QueryExtraInfo
+                queryExtraInfo={result.queryExtraInfo}
+                onDownload={this.handleDownload}
+              />
             )}
           </div>
         </div>
         <QueryOutput
-          aggregateColumns={ast ? ast.getAggregateColumns() : undefined}
-          disabled={!ast}
-          sorted={ast ? ast.getSorted() : undefined}
           sqlExcludeColumn={this.sqlExcludeColumn}
           sqlFilterRow={this.sqlFilterRow}
           sqlOrderBy={this.sqlOrderBy}
           runeMode={runeMode}
           loading={loading}
-          result={result}
+          queryResult={result ? result.queryResult : undefined}
+          parsedQuery={result ? result.parsedQuery : undefined}
           error={error}
         />
       </SplitterLayout>
     );
   }
 
-  private sqlOrderBy = (header: string, direction: 'ASC' | 'DESC'): void => {
-    let { ast } = this.state;
-    if (!ast) return;
-    ast = ast.orderBy(header, direction);
+  private addFunctionToGroupBy = (
+    functionName: string,
+    spacing: string[],
+    argumentsArray: (StringType | number)[],
+    preferablyRun: boolean,
+    alias: Alias,
+  ): void => {
+    const { autoRun, queryAst } = this.state;
+    if (!queryAst) return;
+    const groupedAst = queryAst.addFunctionToGroupBy(functionName, spacing, 
argumentsArray, alias);
+    const queryString = groupedAst.toString();
+    this.setState({
+      queryString,
+      queryAst: parser(queryString),
+    });
+    if (autoRun && preferablyRun) {
+      this.handleRun(true, queryString);
+    }
+  };
+
+  private addToGroupBy = (columnName: string, preferablyRun: boolean): void => 
{
+    const { autoRun, queryAst } = this.state;
+    if (!queryAst) return;
+    const groupedAst = queryAst.addToGroupBy(columnName);
+    const queryString = groupedAst.toString();
+    this.setState({
+      queryString,
+      queryAst: parser(queryString),
+    });
+    if (autoRun && preferablyRun) {
+      this.handleRun(true, queryString);
+    }
+  };
+
+  private addAggregateColumn = (
+    columnName: string | RefExpression,
+    functionName: string,
+    preferablyRun: boolean,
+    alias?: Alias,
+    distinct?: boolean,
+    filter?: FilterClause,
+  ): void => {
+    const { autoRun, queryAst } = this.state;
+    if (!queryAst) return;
+    const modifiedAst = queryAst.addAggregateColumn(
+      columnName,
+      functionName,
+      alias,
+      distinct,
+      filter,
+    );
+    const queryString = modifiedAst.toString();
+    this.setState({
+      queryString,
+      queryAst: parser(queryString),
+    });
+    if (autoRun && preferablyRun) {
+      this.handleRun(true, queryString);
+    }
+  };
+
+  private sqlOrderBy = (
+    header: string,
+    direction: 'ASC' | 'DESC',
+    preferablyRun: boolean,
+  ): void => {
+    const { autoRun, queryAst } = this.state;
+    if (!queryAst) return;
+    const modifiedAst = queryAst.orderBy(header, direction);
+    const queryString = modifiedAst.toString();
     this.setState({
-      queryString: ast.toString(),
+      queryString,
+      queryAst: parser(queryString),
     });
-    this.handleRun(true, ast.toString());
+    if (autoRun && preferablyRun) {
+      this.handleRun(true, queryString);
+    }
   };
 
-  private sqlExcludeColumn = (header: string): void => {
-    let { ast } = this.state;
-    if (!ast) return;
-    ast = ast.excludeColumn(header);
+  private sqlExcludeColumn = (header: string, preferablyRun: boolean): void => 
{
+    const { autoRun, queryAst } = this.state;
+    if (!queryAst) return;
+    const modifiedAst = queryAst.excludeColumn(header);
+    const queryString = modifiedAst.toString();
     this.setState({
-      queryString: ast.toString(),
+      queryString,
+      queryAst: parser(queryString),
     });
-    this.handleRun(true, ast.toString());
+    if (autoRun && preferablyRun) {
+      this.handleRun(true, queryString);
+    }
   };
 
-  private sqlFilterRow = (row: string, header: string, operator: '!=' | '='): 
void => {
-    let { ast } = this.state;
-    if (!ast) return;
-    ast = ast.filterRow(header, row, operator);
+  private sqlFilterRow = (filters: RowFilter[], preferablyRun: boolean): void 
=> {
+    const { autoRun, queryAst } = this.state;
+    if (!queryAst) return;
+
+    let modifiedAst: SqlQuery = queryAst;
+    if (queryAst) {
+      for (const filter of filters) {
+        modifiedAst = modifiedAst.filterRow(filter.header, filter.row, 
filter.operator);
+      }
+    }
+    const queryString = modifiedAst.toString();
     this.setState({
-      queryString: ast.toString(),
+      queryString,
+      queryAst: parser(queryString),
     });
-    this.handleRun(true, ast.toString());
+    if (autoRun && preferablyRun) {
+      this.handleRun(true, queryString);
+    }
+  };
+
+  private sqlClearWhere = (): void => {
+    const { queryAst } = this.state;
+
+    if (!queryAst) return;
+    if (queryAst.whereClause) {
+      queryAst.whereClause = undefined;
+    }
   };
 
   private handleQueryStringChange = (queryString: string): void => {
-    this.setState({ queryString });
+    this.setState({ queryString, queryAst: parser(queryString) });
   };
 
   private handleQueryContextChange = (queryContext: QueryContext) => {
     this.setState({ queryContext });
   };
 
+  private setAutoRun = (autoRun: boolean) => {
+    this.setState({ autoRun });
+    localStorageSet(LocalStorageKeys.AUTO_RUN, String(autoRun));
+  };
+
   private handleRun = (wrapQuery: boolean, customQueryString?: string) => {
-    const { queryString, queryContext } = this.state;
+    const { queryString, queryContext, queryHistory } = this.state;
     if (!customQueryString) {
       customQueryString = queryString;
     }
+
+    while (queryHistory.length > 9) {
+      queryHistory.pop();
+    }
+    queryHistory.unshift({
+      version: `${new Date().toISOString()}`,
+      queryString: customQueryString,
+    });
+    let queryHistoryString;
+    try {
+      queryHistoryString = JSON.stringify(queryHistory);
+    } catch {}
+    if (queryHistoryString) {
+      localStorageSet(LocalStorageKeys.QUERY_HISTORY, queryHistoryString);
+    }
+
     if (QueryView.isJsonLike(customQueryString) && 
!QueryView.validRune(customQueryString)) return;
 
     localStorageSet(LocalStorageKeys.QUERY_KEY, customQueryString);
@@ -486,32 +680,47 @@ export class QueryView extends 
React.PureComponent<QueryViewProps, QueryViewStat
     localStorageSet(LocalStorageKeys.QUERY_VIEW_PANE_SIZE, 
String(secondaryPaneSize));
   };
 
-  render(): JSX.Element {
-    const {
-      columnMetadata,
-      columnMetadataLoading,
-      columnMetadataError,
-      ast,
-      queryString,
-    } = this.state;
-
+  private getGroupBySetting = () => {
+    const { queryString, queryAst } = this.state;
+    const ast = queryAst;
     let tempAst: SqlQuery | undefined;
     if (!ast) {
-      try {
-        tempAst = parser(queryString);
-      } catch {}
+      tempAst = parser(queryString);
     }
-    let defaultSchema;
+
+    let hasGroupBy = false;
     if (ast && ast instanceof SqlQuery) {
-      defaultSchema = ast.getSchema();
+      hasGroupBy = !!ast.groupByClause;
     } else if (tempAst && tempAst instanceof SqlQuery) {
-      defaultSchema = tempAst.getSchema();
+      hasGroupBy = !!tempAst.groupByClause;
+    }
+    return hasGroupBy;
+  };
+
+  private getQueryAst = () => {
+    const { queryAst } = this.state;
+    return queryAst;
+  };
+
+  private onQueryStringChange = (queryString: string) => {
+    const { autoRun } = this.state;
+
+    this.handleQueryStringChange(queryString);
+    if (autoRun) {
+      this.handleRun(true, queryString);
+    }
+  };
+
+  render(): JSX.Element {
+    const { columnMetadata, columnMetadataLoading, columnMetadataError, 
queryAst } = this.state;
+
+    let defaultSchema;
+    if (queryAst && queryAst instanceof SqlQuery) {
+      defaultSchema = queryAst.getSchema();
     }
     let defaultTable;
-    if (ast && ast instanceof SqlQuery) {
-      defaultTable = ast.getTableName();
-    } else if (tempAst && tempAst instanceof SqlQuery) {
-      defaultTable = tempAst.getTableName();
+    if (queryAst && queryAst instanceof SqlQuery) {
+      defaultTable = queryAst.getTableName();
     }
 
     return (
@@ -520,15 +729,23 @@ export class QueryView extends 
React.PureComponent<QueryViewProps, QueryViewStat
       >
         {!columnMetadataError && (
           <ColumnTree
+            clear={this.sqlClearWhere}
+            filterByRow={this.sqlFilterRow}
+            addFunctionToGroupBy={this.addFunctionToGroupBy}
+            addAggregateColumn={this.addAggregateColumn}
+            addToGroupBy={this.addToGroupBy}
+            hasGroupBy={this.getGroupBySetting}
+            queryAst={this.getQueryAst}
             columnMetadataLoading={columnMetadataLoading}
             columnMetadata={columnMetadata}
-            onQueryStringChange={this.handleQueryStringChange}
-            defaultSchema={defaultSchema}
+            onQueryStringChange={this.onQueryStringChange}
+            defaultSchema={defaultSchema ? defaultSchema : 'druid'}
             defaultTable={defaultTable}
           />
         )}
         {this.renderMainArea()}
         {this.renderExplainDialog()}
+        {this.renderHistoryDialog()}
         {this.renderEditContextDialog()}
       </div>
     );
diff --git a/web-console/src/views/query-view/run-button/run-button.spec.tsx 
b/web-console/src/views/query-view/run-button/run-button.spec.tsx
index 1560f7a..d61e5f7 100644
--- a/web-console/src/views/query-view/run-button/run-button.spec.tsx
+++ b/web-console/src/views/query-view/run-button/run-button.spec.tsx
@@ -25,6 +25,9 @@ describe('run button', () => {
   it('matches snapshot', () => {
     const runButton = (
       <RunButton
+        autoRun
+        setAutoRun={() => null}
+        onHistory={() => null}
         onEditContext={() => null}
         runeMode={false}
         queryContext={{}}
diff --git a/web-console/src/views/query-view/run-button/run-button.tsx 
b/web-console/src/views/query-view/run-button/run-button.tsx
index 037f4b3..276288b 100644
--- a/web-console/src/views/query-view/run-button/run-button.tsx
+++ b/web-console/src/views/query-view/run-button/run-button.tsx
@@ -45,11 +45,14 @@ import { DRUID_DOCS_RUNE, DRUID_DOCS_SQL } from 
'../../../variables';
 
 export interface RunButtonProps {
   runeMode: boolean;
+  autoRun: boolean;
   queryContext: QueryContext;
   onQueryContextChange: (newQueryContext: QueryContext) => void;
   onRun: (wrapQuery: boolean) => void;
   onExplain: () => void;
   onEditContext: () => void;
+  onHistory: () => void;
+  setAutoRun: (autoRun: boolean) => void;
 }
 
 interface RunButtonState {
@@ -86,7 +89,16 @@ export class RunButton extends 
React.PureComponent<RunButtonProps, RunButtonStat
   };
 
   renderExtraMenu() {
-    const { runeMode, onExplain, queryContext, onQueryContextChange, 
onEditContext } = this.props;
+    const {
+      runeMode,
+      onExplain,
+      queryContext,
+      onQueryContextChange,
+      onEditContext,
+      onHistory,
+      setAutoRun,
+      autoRun,
+    } = this.props;
     const { wrapQuery } = this.state;
 
     const useCache = getUseCache(queryContext);
@@ -104,12 +116,18 @@ export class RunButton extends 
React.PureComponent<RunButtonProps, RunButtonStat
         {!runeMode && (
           <>
             <MenuItem icon={IconNames.CLEAN} text="Explain" 
onClick={onExplain} />
+            <MenuItem icon={IconNames.HISTORY} text="History" 
onClick={onHistory} />
             <MenuCheckbox
               checked={wrapQuery}
               label="Wrap query with limit"
               onChange={() => this.setState({ wrapQuery: !wrapQuery })}
             />
             <MenuCheckbox
+              checked={autoRun}
+              label="Auto run queries"
+              onChange={() => setAutoRun(!autoRun)}
+            />
+            <MenuCheckbox
               checked={useApproximateCountDistinct}
               label="Use approximate COUNT(DISTINCT)"
               onChange={() => {


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@druid.apache.org
For additional commands, e-mail: commits-h...@druid.apache.org

Reply via email to