From b9e6f28bd6da53d75211c7a71252f2443e348e82 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadimon@gmail.com>
Date: Wed, 10 Apr 2019 22:33:08 -0700
Subject: [PATCH 1/2] wrap with limit

---
 web-console/src/components/sql-control.scss   |  19 +--
 web-console/src/components/sql-control.tsx    | 113 +++++++++++++-----
 .../src/components/table-column-selection.tsx |   8 +-
 web-console/src/entry.scss                    |  11 ++
 web-console/src/views/sql-view.tsx            |  50 ++++++--
 5 files changed, 139 insertions(+), 62 deletions(-)

diff --git a/web-console/src/components/sql-control.scss b/web-console/src/components/sql-control.scss
index 468e91a33108..ed3bcf891984 100644
--- a/web-console/src/components/sql-control.scss
+++ b/web-console/src/components/sql-control.scss
@@ -37,23 +37,6 @@
 
 }
 
-.sql-control-popover {
-  padding:10px;
-  min-width: 120px;
-
-  .bp3-form-group {
-    margin-bottom: 0;
-  }
-
-  button {
-    span {
-      position: relative;
-      left: -7px;
-    }
-    padding-right: 35px;
-  }
-}
-
 .ace_tooltip {
   padding: 10px;
   background-color: #333D47;
@@ -66,7 +49,7 @@
   hr {
     margin: 10px 0;
   }
-  
+
   .function-doc-name {
     font-size: 18px;
   }
diff --git a/web-console/src/components/sql-control.tsx b/web-console/src/components/sql-control.tsx
index 99c7c4397e20..e45f14e2be7e 100644
--- a/web-console/src/components/sql-control.tsx
+++ b/web-console/src/components/sql-control.tsx
@@ -16,7 +16,16 @@
  * limitations under the License.
  */
 
-import { Button, Checkbox, Classes, FormGroup, Intent, Menu, Popover, Position } from '@blueprintjs/core';
+import {
+  Button,
+  Checkbox,
+  ControlGroup,
+  Intent,
+  Menu,
+  MenuItem,
+  Popover,
+  Position
+} from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import axios from 'axios';
 import * as ace from 'brace';
@@ -25,6 +34,7 @@ import 'brace/mode/hjson';
 import 'brace/mode/sql';
 import 'brace/theme/solarized_dark';
 import * as classNames from 'classnames';
+import * as Hjson from 'hjson';
 import * as React from 'react';
 import AceEditor from 'react-ace';
 import * as ReactDOMServer from 'react-dom/server';
@@ -34,18 +44,29 @@ import { AppToaster } from '../singletons/toaster';
 
 import './sql-control.scss';
 
+function validHjson(query: string) {
+  try {
+    Hjson.parse(query);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
 const langTools = ace.acequire('ace/ext/language_tools');
 
 export interface SqlControlProps extends React.Props<any> {
   initSql: string | null;
-  onRun: (query: string) => void;
-  onExplain: (query: string) => void;
+  onRun: (query: string, bypassCache: boolean, wrapQuery: boolean) => void;
+  onExplain: (sqlQuery: string) => void;
 }
 
 export interface SqlControlState {
   query: string;
-  autoCompleteOn: boolean;
+  autoComplete: boolean;
   autoCompleteLoading: boolean;
+  bypassCache: boolean;
+  wrapQuery: boolean;
 }
 
 export class SqlControl extends React.Component<SqlControlProps, SqlControlState> {
@@ -53,8 +74,10 @@ export class SqlControl extends React.Component<SqlControlProps, SqlControlState
     super(props, context);
     this.state = {
       query: props.initSql || '',
-      autoCompleteOn: true,
-      autoCompleteLoading: false
+      autoComplete: true,
+      autoCompleteLoading: false,
+      bypassCache: false,
+      wrapQuery: true
     };
   }
 
@@ -165,29 +188,54 @@ export class SqlControl extends React.Component<SqlControlProps, SqlControlState
     });
   }
 
-  render() {
-    const { onRun, onExplain } = this.props;
-    const { query, autoCompleteOn } = this.state;
+  private onRunClick = () => {
+    const { onRun } = this.props;
+    const { query, bypassCache, wrapQuery } = this.state;
+    onRun(query, bypassCache, wrapQuery);
+  }
 
-    const isRune = query.trim().startsWith('{');
+  renderExtraMenu(isRune: boolean) {
+    const { onRun, onExplain } = this.props;
+    const { query, autoComplete, bypassCache, wrapQuery } = this.state;
 
-    const SqlControlPopover = <Popover position={Position.BOTTOM_LEFT}>
-        <Button minimal icon={IconNames.MORE}/>
-        <div className="sql-control-popover">
-          <Checkbox
-            checked={isRune ? false : autoCompleteOn}
-            label="Auto complete"
-            onChange={() => this.setState({autoCompleteOn: !autoCompleteOn})}
-          />
-          <Button
+    return <Menu>
+      {
+        !isRune &&
+        <>
+          <MenuItem
             icon={IconNames.CLEAN}
-            className={Classes.POPOVER_DISMISS}
             text="Explain"
             onClick={() => onExplain(query)}
-            minimal
           />
-        </div>
-      </Popover>;
+          <li className="checkbox-menu-item">
+            <Checkbox
+              checked={autoComplete}
+              label="Auto complete"
+              onChange={() => this.setState({autoComplete: !autoComplete})}
+            />
+          </li>
+          <li className="checkbox-menu-item">
+            <Checkbox
+              checked={wrapQuery}
+              label="Wrap query with limit"
+              onChange={() => this.setState({wrapQuery: !wrapQuery})}
+            />
+          </li>
+        </>
+      }
+      <li className="checkbox-menu-item">
+        <Checkbox
+          checked={bypassCache}
+          label="Bypass cache"
+          onChange={() => this.setState({bypassCache: !bypassCache})}
+        />
+      </li>
+    </Menu>;
+  }
+
+  render() {
+    const { query, autoComplete } = this.state;
+    const isRune = query.trim().startsWith('{');
 
     // Set the key in the AceEditor to force a rebind and prevent an error that happens otherwise
     return <div className="sql-control">
@@ -207,17 +255,24 @@ export class SqlControl extends React.Component<SqlControlProps, SqlControlState
           $blockScrolling: Infinity
         }}
         setOptions={{
-          enableBasicAutocompletion: isRune ? false : autoCompleteOn,
-          enableLiveAutocompletion: isRune ? false : autoCompleteOn,
+          enableBasicAutocompletion: isRune ? false : autoComplete,
+          enableLiveAutocompletion: isRune ? false : autoComplete,
           showLineNumbers: true,
           tabSize: 2
         }}
       />
       <div className="buttons">
-        <Button rightIcon={IconNames.CARET_RIGHT} onClick={() => onRun(query)}>
-          {isRune ? 'Rune' : 'Run'}
-        </Button>
-        {!isRune ? SqlControlPopover : null}
+        <ControlGroup>
+          <Button
+            rightIcon={IconNames.CARET_RIGHT}
+            onClick={this.onRunClick}
+            text={isRune ? 'Rune' : 'Run'}
+            disabled={isRune && !validHjson(query)}
+          />
+          <Popover position={Position.BOTTOM_LEFT} content={this.renderExtraMenu(isRune)}>
+            <Button icon={IconNames.MORE}/>
+          </Popover>
+        </ControlGroup>
       </div>
     </div>;
   }
diff --git a/web-console/src/components/table-column-selection.tsx b/web-console/src/components/table-column-selection.tsx
index 641f3bb48b41..682c6d44f773 100644
--- a/web-console/src/components/table-column-selection.tsx
+++ b/web-console/src/components/table-column-selection.tsx
@@ -44,16 +44,16 @@ export class TableColumnSelection extends React.Component<TableColumnSelectionPr
   render() {
     const { columns, onChange, tableColumnsHidden } = this.props;
     const checkboxes = <Menu className="table-column-selection-menu">
-      <FormGroup>
-        {columns.map(column => (
+      {columns.map(column => (
+        <li className="checkbox-menu-item">
           <Checkbox
             label={column}
             key={column}
             checked={!tableColumnsHidden.includes(column)}
             onChange={() => onChange(column)}
           />
-        ))}
-      </FormGroup>
+        </li>
+      ))}
     </Menu>;
 
     return <Popover
diff --git a/web-console/src/entry.scss b/web-console/src/entry.scss
index 8505642759e0..0ef9aba4ae63 100644
--- a/web-console/src/entry.scss
+++ b/web-console/src/entry.scss
@@ -50,3 +50,14 @@ svg {
   height: 100%;
   width: 100%;
 }
+
+.bp3-menu {
+  li.checkbox-menu-item {
+    height: 30px;
+    padding: 7px 4px;
+
+    label {
+      margin: 0;
+    }
+  }
+}
diff --git a/web-console/src/views/sql-view.tsx b/web-console/src/views/sql-view.tsx
index e8f90d72c3ed..48035d9e09c2 100644
--- a/web-console/src/views/sql-view.tsx
+++ b/web-console/src/views/sql-view.tsx
@@ -34,6 +34,12 @@ import {
 
 import './sql-view.scss';
 
+interface QueryWithFlags {
+  queryString: string;
+  bypassCache?: boolean;
+  wrapQuery?: boolean;
+}
+
 export interface SqlViewProps extends React.Props<any> {
   initSql: string | null;
 }
@@ -50,7 +56,7 @@ export interface SqlViewState {
 
 export class SqlView extends React.Component<SqlViewProps, SqlViewState> {
 
-  private sqlQueryManager: QueryManager<string, HeaderRows>;
+  private sqlQueryManager: QueryManager<QueryWithFlags, HeaderRows>;
   private explainQueryManager: QueryManager<string, any>;
 
   constructor(props: SqlViewProps, context: any) {
@@ -68,18 +74,40 @@ export class SqlView extends React.Component<SqlViewProps, SqlViewState> {
 
   componentDidMount(): void {
     this.sqlQueryManager = new QueryManager({
-      processQuery: async (query: string) => {
-        if (query.trim().startsWith('{')) {
+      processQuery: async (queryWithFlags: QueryWithFlags) => {
+        const { queryString, bypassCache, wrapQuery } = queryWithFlags;
+
+        if (queryString.trim().startsWith('{')) {
           // Secret way to issue a native JSON "rune" query
-          const runeQuery = Hjson.parse(query);
+          const runeQuery = Hjson.parse(queryString);
+
+          if (bypassCache) {
+            runeQuery.context = runeQuery.context || {};
+            runeQuery.context.useCache = false;
+            runeQuery.context.populateCache = false;
+          }
+
           return decodeRune(runeQuery, await queryDruidRune(runeQuery));
 
         } else {
-          const result = await queryDruidSql({
-            query,
+          const actualQuery = wrapQuery ?
+            `SELECT * FROM (${queryString.trim().replace(/;+$/, '')}) LIMIT 5000` :
+            queryString;
+
+          const queryPayload: Record<string, any> = {
+            query: actualQuery,
             resultFormat: 'array',
             header: true
-          });
+          };
+
+          if (wrapQuery) {
+            queryPayload.context = {
+              useCache: false,
+              populateCache: false
+            };
+          }
+
+          const result = await queryDruidSql(queryPayload);
 
           return {
             header: (result && result.length) ? result[0] : [],
@@ -162,11 +190,11 @@ export class SqlView extends React.Component<SqlViewProps, SqlViewState> {
     return <div className="sql-view app-view">
       <SqlControl
         initSql={initSql || localStorageGet(LocalStorageKeys.QUERY_KEY)}
-        onRun={q => {
-          localStorageSet(LocalStorageKeys.QUERY_KEY, q);
-          this.sqlQueryManager.runQuery(q);
+        onRun={(queryString, bypassCache, wrapQuery) => {
+          localStorageSet(LocalStorageKeys.QUERY_KEY, queryString);
+          this.sqlQueryManager.runQuery({ queryString, bypassCache, wrapQuery });
         }}
-        onExplain={(q: string) => this.getExplain(q)}
+        onExplain={this.getExplain}
       />
       {this.renderResultTable()}
       {this.renderExplainDialog()}

From 0524c6010c480498b88569ccca7dc7fb04e4631e Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadimon@gmail.com>
Date: Thu, 11 Apr 2019 11:20:35 -0700
Subject: [PATCH 2/2] make actual menu checkbox component

---
 web-console/src/components/menu-checkbox.scss | 26 +++++++++++++
 web-console/src/components/menu-checkbox.tsx  | 31 +++++++++++++++
 web-console/src/components/sql-control.tsx    | 38 +++++++++----------
 .../src/components/table-column-selection.tsx | 16 ++++----
 web-console/src/entry.scss                    | 11 ------
 5 files changed, 82 insertions(+), 40 deletions(-)
 create mode 100644 web-console/src/components/menu-checkbox.scss
 create mode 100644 web-console/src/components/menu-checkbox.tsx

diff --git a/web-console/src/components/menu-checkbox.scss b/web-console/src/components/menu-checkbox.scss
new file mode 100644
index 000000000000..8d4963a0cf3d
--- /dev/null
+++ b/web-console/src/components/menu-checkbox.scss
@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+.menu-checkbox {
+  height: 30px;
+  padding: 7px 4px;
+
+  label {
+    margin: 0;
+  }
+}
diff --git a/web-console/src/components/menu-checkbox.tsx b/web-console/src/components/menu-checkbox.tsx
new file mode 100644
index 000000000000..21b438b8a3c2
--- /dev/null
+++ b/web-console/src/components/menu-checkbox.tsx
@@ -0,0 +1,31 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Checkbox, ICheckboxProps } from '@blueprintjs/core';
+import * as React from 'react';
+
+import './menu-checkbox.scss';
+
+export class MenuCheckbox extends React.Component<ICheckboxProps, {}> {
+
+  render() {
+    return <li className="menu-checkbox">
+      <Checkbox {...this.props}/>
+    </li>;
+  }
+}
diff --git a/web-console/src/components/sql-control.tsx b/web-console/src/components/sql-control.tsx
index e45f14e2be7e..e721d77b49cf 100644
--- a/web-console/src/components/sql-control.tsx
+++ b/web-console/src/components/sql-control.tsx
@@ -42,6 +42,8 @@ import * as ReactDOMServer from 'react-dom/server';
 import { SQLFunctionDoc } from '../../lib/sql-function-doc';
 import { AppToaster } from '../singletons/toaster';
 
+import { MenuCheckbox } from './menu-checkbox';
+
 import './sql-control.scss';
 
 function validHjson(query: string) {
@@ -207,29 +209,23 @@ export class SqlControl extends React.Component<SqlControlProps, SqlControlState
             text="Explain"
             onClick={() => onExplain(query)}
           />
-          <li className="checkbox-menu-item">
-            <Checkbox
-              checked={autoComplete}
-              label="Auto complete"
-              onChange={() => this.setState({autoComplete: !autoComplete})}
-            />
-          </li>
-          <li className="checkbox-menu-item">
-            <Checkbox
-              checked={wrapQuery}
-              label="Wrap query with limit"
-              onChange={() => this.setState({wrapQuery: !wrapQuery})}
-            />
-          </li>
+          <MenuCheckbox
+            checked={autoComplete}
+            label="Auto complete"
+            onChange={() => this.setState({autoComplete: !autoComplete})}
+          />
+          <MenuCheckbox
+            checked={wrapQuery}
+            label="Wrap query with limit"
+            onChange={() => this.setState({wrapQuery: !wrapQuery})}
+          />
         </>
       }
-      <li className="checkbox-menu-item">
-        <Checkbox
-          checked={bypassCache}
-          label="Bypass cache"
-          onChange={() => this.setState({bypassCache: !bypassCache})}
-        />
-      </li>
+      <MenuCheckbox
+        checked={bypassCache}
+        label="Bypass cache"
+        onChange={() => this.setState({bypassCache: !bypassCache})}
+      />
     </Menu>;
   }
 
diff --git a/web-console/src/components/table-column-selection.tsx b/web-console/src/components/table-column-selection.tsx
index 682c6d44f773..3635d51b98e4 100644
--- a/web-console/src/components/table-column-selection.tsx
+++ b/web-console/src/components/table-column-selection.tsx
@@ -20,6 +20,8 @@ import { Button, Checkbox, FormGroup, Menu, Popover, Position } from '@blueprint
 import { IconNames } from '@blueprintjs/icons';
 import * as React from 'react';
 
+import { MenuCheckbox } from './menu-checkbox';
+
 import './table-column-selection.scss';
 
 interface TableColumnSelectionProps extends React.Props<any> {
@@ -45,14 +47,12 @@ export class TableColumnSelection extends React.Component<TableColumnSelectionPr
     const { columns, onChange, tableColumnsHidden } = this.props;
     const checkboxes = <Menu className="table-column-selection-menu">
       {columns.map(column => (
-        <li className="checkbox-menu-item">
-          <Checkbox
-            label={column}
-            key={column}
-            checked={!tableColumnsHidden.includes(column)}
-            onChange={() => onChange(column)}
-          />
-        </li>
+        <MenuCheckbox
+          label={column}
+          key={column}
+          checked={!tableColumnsHidden.includes(column)}
+          onChange={() => onChange(column)}
+        />
       ))}
     </Menu>;
 
diff --git a/web-console/src/entry.scss b/web-console/src/entry.scss
index 0ef9aba4ae63..8505642759e0 100644
--- a/web-console/src/entry.scss
+++ b/web-console/src/entry.scss
@@ -50,14 +50,3 @@ svg {
   height: 100%;
   width: 100%;
 }
-
-.bp3-menu {
-  li.checkbox-menu-item {
-    height: 30px;
-    padding: 7px 4px;
-
-    label {
-      margin: 0;
-    }
-  }
-}