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 { + + render() { + return
  • + +
  • ; + } +} diff --git a/web-console/src/components/sql-control.scss b/web-console/src/components/sql-control.scss index d5e894d25da9..2fe40363ca54 100644 --- a/web-console/src/components/sql-control.scss +++ b/web-console/src/components/sql-control.scss @@ -42,23 +42,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; @@ -71,7 +54,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 6b4de1d56c76..1aa908963c87 100644 --- a/web-console/src/components/sql-control.tsx +++ b/web-console/src/components/sql-control.tsx @@ -16,7 +16,15 @@ * limitations under the License. */ -import { Button, Checkbox, Classes, FormGroup, Intent, Menu, Popover, Position } from '@blueprintjs/core'; +import { + Button, + ButtonGroup, + Intent, + Menu, + MenuItem, + Popover, + Position +} from '@blueprintjs/core'; import { IconNames } from '@blueprintjs/icons'; import axios from 'axios'; import * as ace from 'brace'; @@ -25,6 +33,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'; @@ -32,21 +41,34 @@ 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) { + try { + Hjson.parse(query); + return true; + } catch { + return false; + } +} + const langTools = ace.acequire('ace/ext/language_tools'); export interface SqlControlProps extends React.Props { initSql: string | null; - onRun: (query: string) => void; - onExplain: (query: string) => void; + onRun: (query: string, bypassCache: boolean, wrapQuery: boolean) => void; + onExplain: (sqlQuery: string) => void; queryElapsed: number | null; } export interface SqlControlState { query: string; - autoCompleteOn: boolean; + autoComplete: boolean; autoCompleteLoading: boolean; + bypassCache: boolean; + wrapQuery: boolean; } export class SqlControl extends React.Component { @@ -54,8 +76,10 @@ export class SqlControl extends React.Component { + const { onRun } = this.props; + const { query, bypassCache, wrapQuery } = this.state; + onRun(query, bypassCache, wrapQuery); + } - const isRune = query.trim().startsWith('{'); + renderExtraMenu(isRune: boolean) { + const { onExplain } = this.props; + const { query, autoComplete, bypassCache, wrapQuery } = this.state; - const SqlControlPopover = - - {!isRune && SqlControlPopover} + +