diff --git a/web-console/package-lock.json b/web-console/package-lock.json index 8c5035ac60d..5c60be7d6be 100644 --- a/web-console/package-lock.json +++ b/web-console/package-lock.json @@ -944,6 +944,65 @@ "is-buffer": "^1.1.5" } }, + "babel-code-frame": { + "version": "6.26.0", + "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz", + "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=", + "dev": true, + "requires": { + "chalk": "^1.1.3", + "esutils": "^2.0.2", + "js-tokens": "^3.0.2" + }, + "dependencies": { + "ansi-regex": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", + "dev": true + }, + "ansi-styles": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", + "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", + "dev": true + }, + "chalk": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", + "dev": true, + "requires": { + "ansi-styles": "^2.2.1", + "escape-string-regexp": "^1.0.2", + "has-ansi": "^2.0.0", + "strip-ansi": "^3.0.0", + "supports-color": "^2.0.0" + } + }, + "js-tokens": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", + "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=", + "dev": true + }, + "strip-ansi": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", + "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", + "dev": true, + "requires": { + "ansi-regex": "^2.0.0" + } + }, + "supports-color": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", + "dev": true + } + } + }, "babel-jest": { "version": "24.1.0", "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-24.1.0.tgz", @@ -1372,6 +1431,12 @@ "integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=", "dev": true }, + "builtin-modules": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz", + "integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=", + "dev": true + }, "builtin-status-codes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz", @@ -9636,6 +9701,58 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz", "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==" }, + "tslint": { + "version": "5.14.0", + "resolved": "https://registry.npmjs.org/tslint/-/tslint-5.14.0.tgz", + "integrity": "sha512-IUla/ieHVnB8Le7LdQFRGlVJid2T/gaJe5VkjzRVSRR6pA2ODYrnfR1hmxi+5+au9l50jBwpbBL34txgv4NnTQ==", + "dev": true, + "requires": { + "babel-code-frame": "^6.22.0", + "builtin-modules": "^1.1.1", + "chalk": "^2.3.0", + "commander": "^2.12.1", + "diff": "^3.2.0", + "glob": "^7.1.1", + "js-yaml": "^3.7.0", + "minimatch": "^3.0.4", + "mkdirp": "^0.5.1", + "resolve": "^1.3.2", + "semver": "^5.3.0", + "tslib": "^1.8.0", + "tsutils": "^2.29.0" + } + }, + "tslint-loader": { + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/tslint-loader/-/tslint-loader-3.5.4.tgz", + "integrity": "sha512-jBHNNppXut6SgZ7CsTBh+6oMwVum9n8azbmcYSeMlsABhWWoHwjq631vIFXef3VSd75cCdX3rc6kstsB7rSVVw==", + "dev": true, + "requires": { + "loader-utils": "^1.0.2", + "mkdirp": "^0.5.1", + "object-assign": "^4.1.1", + "rimraf": "^2.4.4", + "semver": "^5.3.0" + } + }, + "tslint-react": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/tslint-react/-/tslint-react-3.6.0.tgz", + "integrity": "sha512-AIv1QcsSnj7e9pFir6cJ6vIncTqxfqeFF3Lzh8SuuBljueYzEAtByuB6zMaD27BL0xhMEqsZ9s5eHuCONydjBw==", + "dev": true, + "requires": { + "tsutils": "^2.13.1" + } + }, + "tsutils": { + "version": "2.29.0", + "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz", + "integrity": "sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==", + "dev": true, + "requires": { + "tslib": "^1.8.1" + } + }, "tty-browserify": { "version": "0.0.0", "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz", diff --git a/web-console/package.json b/web-console/package.json index 201100c9c12..fcde0ad05d5 100644 --- a/web-console/package.json +++ b/web-console/package.json @@ -70,6 +70,9 @@ "ts-jest": "^23.10.5", "ts-loader": "^5.3.3", "ts-node": "^8.0.2", + "tslint": "^5.14.0", + "tslint-loader": "^3.5.4", + "tslint-react": "^3.6.0", "typescript": "^3.2.4", "webpack": "^4.29.0", "webpack-cli": "^3.2.1", diff --git a/web-console/script/create-sql-function-doc b/web-console/script/create-sql-function-doc index 146a39e147a..01421781f72 100755 --- a/web-console/script/create-sql-function-doc +++ b/web-console/script/create-sql-function-doc @@ -21,8 +21,35 @@ writefile='lib/sql-function-doc.ts' > "$writefile" -echo -e "// This file is auto generated and should not be modified\n" > "$writefile" -echo -e 'export const SQLFunctionDoc: any[] = [' >> "$writefile" +cat > "$writefile" <<- EOM +/* + * 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. + */ + +// This file is auto generated and should not be modified + +export interface FunctionDescription { + syntax: string; + description: string; +} + +/* tslint:disable */ +export const SQLFunctionDoc: FunctionDescription[] = [ +EOM isFunction=false @@ -39,12 +66,12 @@ while read -r line; do description=$(echo $line | grep -o '`|.*.|') description=${description//\"/\'} description=${description:2:${#description}-4} - echo -e " {" >> "$writefile" - echo -e " syntax: \"$syntax\"," >> "$writefile" - echo -e " description: \"$description\"" >> "$writefile" - echo -e " }," >> "$writefile" + echo -e " {" >> "$writefile" + echo -e " syntax: \"$syntax\"," >> "$writefile" + echo -e " description: \"$description\"" >> "$writefile" + echo -e " }," >> "$writefile" fi fi done < "$readfile" -echo -e ']' >> "$writefile" \ No newline at end of file +echo -e '];' >> "$writefile" diff --git a/web-console/src/bootstrap/a-shim-for-react-props.ts b/web-console/src/bootstrap/a-shim-for-react-props.ts new file mode 100644 index 00000000000..844e0f3fa54 --- /dev/null +++ b/web-console/src/bootstrap/a-shim-for-react-props.ts @@ -0,0 +1,25 @@ +/* + * 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. + */ + +// Trick blueprint 1.0.1 into accepting React 16 as React 15. +// This is broken into its own file to make linting and import sorting easy +// This file "a" to make sure it is imported before console-application in entry.ts + +// tslint:disable +import * as React from 'react'; +(React as any).PropTypes = require('prop-types'); diff --git a/web-console/src/singletons/react-table-defaults.tsx b/web-console/src/bootstrap/react-table-defaults.tsx similarity index 100% rename from web-console/src/singletons/react-table-defaults.tsx rename to web-console/src/bootstrap/react-table-defaults.tsx index 86cfd6d51e9..edb776c17a7 100644 --- a/web-console/src/singletons/react-table-defaults.tsx +++ b/web-console/src/bootstrap/react-table-defaults.tsx @@ -16,10 +16,10 @@ * limitations under the License. */ - +import { Button } from "@blueprintjs/core"; import * as React from 'react'; import { Filter, ReactTableDefaults } from "react-table"; -import { Button } from "@blueprintjs/core"; + import { Loader } from '../components/loader'; import { countBy, makeTextFilter } from '../utils'; diff --git a/web-console/src/components/auto-form.tsx b/web-console/src/components/auto-form.tsx index 39e8baa55ce..6f86a4141c0 100644 --- a/web-console/src/components/auto-form.tsx +++ b/web-console/src/components/auto-form.tsx @@ -16,11 +16,10 @@ * limitations under the License. */ -import { resolveSrv } from 'dns'; -import * as React from 'react'; -import axios from 'axios'; import { InputGroup } from "@blueprintjs/core"; -import { HTMLSelect, FormGroup, NumericInput, TagInput } from "../components/filler"; +import * as React from 'react'; + +import { FormGroup, HTMLSelect, NumericInput, TagInput } from "../components/filler"; interface Field { name: string; @@ -31,8 +30,8 @@ interface Field { export interface AutoFormProps extends React.Props { fields: Field[]; - model: T | null, - onChange: (newValue: T) => void + model: T | null; + onChange: (newValue: T) => void; } export interface AutoFormState { @@ -48,7 +47,7 @@ export class AutoForm extends React.Component, AutoFormState constructor(props: AutoFormProps) { super(props); this.state = { - } + }; } private renderNumberInput(field: Field): JSX.Element { @@ -97,7 +96,7 @@ export class AutoForm extends React.Component, AutoFormState > - + ; } private renderStringArrayInput(field: Field): JSX.Element { @@ -127,7 +126,7 @@ export class AutoForm extends React.Component, AutoFormState const label = field.label || AutoForm.makeLabelName(field.name); return {this.renderFieldInput(field)} - + ; } render() { @@ -135,6 +134,6 @@ export class AutoForm extends React.Component, AutoFormState return
{model && fields.map(field => this.renderField(field))} -
+ ; } } diff --git a/web-console/src/components/filler.tsx b/web-console/src/components/filler.tsx index a0685f60d52..e20cd777753 100644 --- a/web-console/src/components/filler.tsx +++ b/web-console/src/components/filler.tsx @@ -17,10 +17,10 @@ */ import { Button } from '@blueprintjs/core'; -import * as React from 'react'; import classNames from 'classnames'; -import './filler.scss'; +import * as React from 'react'; +import './filler.scss'; export const IconNames = { ERROR: "error" as "error", @@ -103,16 +103,15 @@ export class FormGroup extends React.Component<{ className?: string, label?: str render() { const { className, label, children } = this.props; return
- { label ? : null } + {label ? : null} {children}
; } } - export const Alignment = { LEFT: "left" as "left", - RIGHT: "right" as "right", + RIGHT: "right" as "right" }; export type Alignment = typeof Alignment[keyof typeof Alignment]; @@ -166,7 +165,7 @@ export interface NumericInputProps { min?: number; max?: number; stepSize?: number; - majorStepSize?: number + majorStepSize?: number; } export class NumericInput extends React.Component { @@ -174,20 +173,20 @@ export class NumericInput extends React.Component { @@ -236,13 +235,13 @@ export class TagInput extends React.Component { - let stringValue = e.target.value; - let newValues = stringValue.split(',').map((v: string) => v.trim()); - let newValuesFiltered = newValues.filter(Boolean); + const stringValue = e.target.value; + const newValues = stringValue.split(',').map((v: string) => v.trim()); + const newValuesFiltered = newValues.filter(Boolean); this.setState({ stringValue: newValues.length === newValuesFiltered.length ? newValues.join(', ') : stringValue }); diff --git a/web-console/src/components/header-bar.tsx b/web-console/src/components/header-bar.tsx index b4e4dad2bbf..9eea252d49a 100644 --- a/web-console/src/components/header-bar.tsx +++ b/web-console/src/components/header-bar.tsx @@ -16,13 +16,13 @@ * limitations under the License. */ -import * as React from 'react'; +import { AnchorButton, Button, Classes, Menu, MenuItem, Popover, Position } from "@blueprintjs/core"; import classNames from 'classnames'; -import { Button, Classes, AnchorButton, Popover, Position, Menu, MenuItem } from "@blueprintjs/core"; -import { IconNames, NavbarGroup, Alignment, NavbarDivider, Navbar } from "../components/filler"; +import * as React from 'react'; + +import { Alignment, IconNames, Navbar, NavbarDivider, NavbarGroup } from "../components/filler"; import { AboutDialog } from "../dialogs/about-dialog"; import { CoordinatorDynamicConfigDialog } from '../dialogs/coordinator-dynamic-config'; -import "./header-bar.scss"; import { DRUID_DOCS, DRUID_GITHUB, @@ -31,6 +31,8 @@ import { LEGACY_OVERLORD_CONSOLE } from '../variables'; +import "./header-bar.scss"; + export type HeaderActiveTab = null | 'datasources' | 'segments' | 'tasks' | 'servers' | 'sql' | 'lookups'; export interface HeaderBarProps extends React.Props { @@ -54,30 +56,48 @@ export class HeaderBar extends React.Component { renderLogo() { return
- - + - + - + - + - + + c0-0.7,0.6-1.3,1.3-1.3h6.3c0.7,0,1.3,0.6,1.3,1.3C70.5,57.4,69.9,58,69.2,58z" + />
; } diff --git a/web-console/src/components/loader.tsx b/web-console/src/components/loader.tsx index cb9ef816c03..3a122b9df3b 100644 --- a/web-console/src/components/loader.tsx +++ b/web-console/src/components/loader.tsx @@ -17,6 +17,7 @@ */ import * as React from 'react'; + import './loader.scss'; export interface LoaderProps extends React.Props { @@ -31,23 +32,35 @@ export class Loader extends React.Component { render() { const { loadingText, loading } = this.props; - if (loading === false) return null; + if (!loading) return null; return
- - + - - + C63.5,58,59.9,59.5,55.7,59.5z" + /> + + {loadingText ?
{loadingText}
: null}
-
+ ; } } diff --git a/web-console/src/components/rule-editor.tsx b/web-console/src/components/rule-editor.tsx index a431ce68759..f13f046d6a6 100644 --- a/web-console/src/components/rule-editor.tsx +++ b/web-console/src/components/rule-editor.tsx @@ -16,10 +16,12 @@ * limitations under the License. */ -import * as React from 'react'; +import { Button, Collapse, InputGroup } from "@blueprintjs/core"; import axios from 'axios'; -import { Button, InputGroup, Collapse } from "@blueprintjs/core"; -import { IconNames, FormGroup, HTMLSelect, Card, ControlGroup, NumericInput, TagInput } from "../components/filler"; +import * as React from 'react'; + +import { Card, ControlGroup, FormGroup, HTMLSelect, IconNames, NumericInput, TagInput } from "../components/filler"; + import './rule-editor.scss'; export interface Rule { @@ -107,7 +109,7 @@ export class RuleEditor extends React.Component { @@ -126,9 +128,9 @@ export class RuleEditor extends React.Component onChange(RuleEditor.changeTier(rule, tier, e.target.value))} > @@ -194,7 +196,7 @@ export class RuleEditor extends React.Component onChange(RuleEditor.changeColocatedDataSources(rule, v)) } + onChange={(v: any) => onChange(RuleEditor.changeColocatedDataSources(rule, v))} fill /> ; @@ -240,21 +242,21 @@ export class RuleEditor extends React.Componentby period - { ruleTimeType === 'ByPeriod' && onChange(RuleEditor.changePeriod(rule, e.target.value as any))}/>} - { ruleTimeType === 'ByInterval' && onChange(RuleEditor.changeInterval(rule, e.target.value as any))}/>} + {ruleTimeType === 'ByPeriod' && onChange(RuleEditor.changePeriod(rule, e.target.value as any))}/>} + {ruleTimeType === 'ByInterval' && onChange(RuleEditor.changeInterval(rule, e.target.value as any))}/>} { ruleLoadType === 'load' && - { this.renderTiers() } - { this.renderTierAdder() } + {this.renderTiers()} + {this.renderTierAdder()} } { ruleLoadType === 'broadcast' && - { this.renderColocatedDataSources() } + {this.renderColocatedDataSources()} } diff --git a/web-console/src/components/sql-control.tsx b/web-console/src/components/sql-control.tsx index a2d21b57767..c63b880744a 100644 --- a/web-console/src/components/sql-control.tsx +++ b/web-console/src/components/sql-control.tsx @@ -16,21 +16,24 @@ * limitations under the License. */ -import * as React from 'react'; -import * as ReactDOMServer from 'react-dom/server'; +import { Button, Checkbox, Classes, Intent, Popover, Position } from "@blueprintjs/core"; import axios from "axios"; -import * as classNames from 'classnames'; -import * as ace from 'brace' -import AceEditor from "react-ace"; -import 'brace/mode/sql'; -import 'brace/mode/hjson'; -import 'brace/theme/solarized_dark'; +import * as ace from 'brace'; import 'brace/ext/language_tools'; -import {Intent, Button, Popover, Checkbox, Classes, Position} from "@blueprintjs/core"; +import 'brace/mode/hjson'; +import 'brace/mode/sql'; +import 'brace/theme/solarized_dark'; +import * as classNames from 'classnames'; +import * as React from 'react'; +import AceEditor from "react-ace"; +import * as ReactDOMServer from 'react-dom/server'; + import { SQLFunctionDoc } from "../../lib/sql-function-doc"; +import { AppToaster } from "../singletons/toaster"; + import { IconNames } from './filler'; -import './sql-control.scss' -import {AppToaster} from "../singletons/toaster"; + +import './sql-control.scss'; const langTools = ace.acequire('ace/ext/language_tools'); @@ -55,9 +58,8 @@ export class SqlControl extends React.Component =>{ - const datasourceResp = await axios.post("/druid/v2/sql", { query: `SELECT datasource FROM sys.segments GROUP BY 1`}) + private addDatasourceAutoCompleter = async (): Promise => { + const datasourceResp = await axios.post("/druid/v2/sql", { query: `SELECT datasource FROM sys.segments GROUP BY 1`}); const datasourceList: any[] = datasourceResp.data.map((d: any) => { const datasourceName: string = d.datasource; return { @@ -68,7 +70,7 @@ export class SqlControl extends React.Component { + getCompletions: (editor: any, session: any, pos: any, prefix: any, callback: any) => { callback(null, datasourceList); } }; @@ -77,7 +79,7 @@ export class SqlControl extends React.Component => { - const columnNameResp = await axios.post("/druid/v2/sql", {query: `SELECT COLUMN_NAME FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_SCHEMA = 'druid'`}) + const columnNameResp = await axios.post("/druid/v2/sql", {query: `SELECT COLUMN_NAME FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_SCHEMA = 'druid'`}); const columnNameList: any[] = columnNameResp.data.map((d: any) => { const columnName: string = d.COLUMN_NAME; return { @@ -88,7 +90,7 @@ export class SqlControl extends React.Component { + getCompletions: (editor: any, session: any, pos: any, prefix: any, callback: any) => { callback(null, columnNameList); } }; @@ -97,9 +99,9 @@ export class SqlControl extends React.Component { - const functionList: any[]= SQLFunctionDoc.map((entry: any) => { - let funcName: string = entry.syntax.replace(/\(.*\)/,"()"); - if (!funcName.includes("(")) funcName = funcName.substr(0,10); + const functionList: any[] = SQLFunctionDoc.map((entry: any) => { + let funcName: string = entry.syntax.replace(/\(.*\)/, "()"); + if (!funcName.includes("(")) funcName = funcName.substr(0, 10); return { value: funcName, score: 80, @@ -107,22 +109,22 @@ export class SqlControl extends React.Component { + insertMatch: (editor: any, data: any) => { editor.completer.insertMatch({value: data.caption}); const pos = editor.getCursorPosition(); - editor.gotoLine(pos.row+1, pos.column-1); + editor.gotoLine(pos.row + 1, pos.column - 1); } } }; }); const completer = { - getCompletions: (editor:any , session: any, pos: any, prefix: any, callback: any) => { + getCompletions: (editor: any, session: any, pos: any, prefix: any, callback: any) => { callback(null, functionList); }, getDocTooltip: (item: any) => { if (item.meta === "function") { - const functionName = item.caption.slice(0,-2); + const functionName = item.caption.slice(0, -2); item.docHTML = ReactDOMServer.renderToStaticMarkup((
{functionName}
@@ -133,7 +135,7 @@ export class SqlControl extends React.ComponentDescription:
{item.description}
- )) + )); } } }; @@ -160,7 +162,7 @@ export class SqlControl extends React.Component { this.setState({ query: newValue - }) + }); } render() { @@ -186,7 +188,7 @@ export class SqlControl extends React.Component
@@ -213,4 +215,3 @@ export class SqlControl extends React.Component; } } - diff --git a/web-console/src/console-application.tsx b/web-console/src/console-application.tsx index 9b610526a91..332783f3725 100644 --- a/web-console/src/console-application.tsx +++ b/web-console/src/console-application.tsx @@ -16,22 +16,23 @@ * limitations under the License. */ -import axios from 'axios'; -import * as React from 'react'; -import * as classNames from 'classnames'; -import { HashRouter, Route, Switch } from "react-router-dom"; import { Intent } from "@blueprintjs/core"; +import axios from 'axios'; +import * as classNames from 'classnames'; +import * as React from 'react'; +import { HashRouter, Route, Switch } from "react-router-dom"; + +import { HeaderActiveTab, HeaderBar } from './components/header-bar'; import { AppToaster } from './singletons/toaster'; -import { HeaderBar, HeaderActiveTab } from './components/header-bar'; -import { localStorageGet, localStorageSet } from './utils'; import { DRUID_DOCS_SQL, LEGACY_COORDINATOR_CONSOLE, LEGACY_OVERLORD_CONSOLE } from './variables'; -import { HomeView } from './views/home-view'; import { DatasourcesView } from './views/datasource-view'; +import { HomeView } from './views/home-view'; +import { LookupsView } from "./views/lookups-view"; import { SegmentsView } from './views/segments-view'; import { ServersView } from './views/servers-view'; -import { TasksView } from './views/tasks-view'; import { SqlView } from './views/sql-view'; -import { LookupsView } from "./views/lookups-view"; +import { TasksView } from './views/tasks-view'; + import "./console-application.scss"; export interface ConsoleApplicationProps extends React.Props { @@ -63,14 +64,16 @@ export class ConsoleApplication extends React.Component It appears that the SQL endpoint is disabled. Either enable the SQL endpoint or use the old coordinator and overlord consoles that do not rely on the SQL endpoint. + /* tslint:enable:jsx-alignment */ }); - return false + return false; } return true; } @@ -142,30 +145,49 @@ export class ConsoleApplication extends React.Component
- { - return wrapInViewContainer('datasources', ); - }} /> - { - return wrapInViewContainer('segments', ); - }} /> - { - return wrapInViewContainer('tasks', , true); - }} /> - { - return wrapInViewContainer('servers', , true); - }} /> - { - return wrapInViewContainer('sql', ); - }} /> - { - return wrapInViewContainer('lookups', ); - }} /> - { - return wrapInViewContainer(null, ) - }} /> + { + return wrapInViewContainer('datasources', ); + }} + /> + { + return wrapInViewContainer('segments', ); + }} + /> + { + return wrapInViewContainer('tasks', , true); + }} + /> + { + return wrapInViewContainer('servers', , true); + }} + /> + { + return wrapInViewContainer('sql', ); + }} + /> + { + return wrapInViewContainer('lookups', ); + }} + /> + { + return wrapInViewContainer(null, ); + }} + />
; } } - diff --git a/web-console/src/dialogs/about-dialog.tsx b/web-console/src/dialogs/about-dialog.tsx index ee1fe0b1646..570fc13a579 100644 --- a/web-console/src/dialogs/about-dialog.tsx +++ b/web-console/src/dialogs/about-dialog.tsx @@ -16,13 +16,14 @@ * limitations under the License. */ +import { AnchorButton, Button, Classes, Dialog, Intent } from "@blueprintjs/core"; import * as React from 'react'; -import { Button, Dialog, Classes, AnchorButton, Intent } from "@blueprintjs/core"; + import { IconNames } from "../components/filler"; import { DRUID_COMMUNITY, DRUID_DEVELOPER_GROUP, DRUID_USER_GROUP, DRUID_WEBSITE } from '../variables'; export interface AboutDialogProps extends React.Props { - onClose: () => void + onClose: () => void; } export interface AboutDialogState { @@ -37,6 +38,7 @@ export class AboutDialog extends React.Component
; + /* tslint:enable:jsx-alignment */ } } diff --git a/web-console/src/dialogs/async-action-dialog.tsx b/web-console/src/dialogs/async-action-dialog.tsx index 0dc5af1dae3..bbab05ce2be 100644 --- a/web-console/src/dialogs/async-action-dialog.tsx +++ b/web-console/src/dialogs/async-action-dialog.tsx @@ -16,25 +16,25 @@ * limitations under the License. */ -import classNames from 'classnames'; -import * as React from 'react'; import { Button, - InputGroup, - Dialog, Classes, + Dialog, Intent, ProgressBar } from "@blueprintjs/core"; -import { Icon, FormGroup, ButtonGroup, NumericInput, TagInput } from '../components/filler'; +import classNames from 'classnames'; +import * as React from 'react'; + +import { ButtonGroup, FormGroup, Icon, NumericInput, TagInput } from '../components/filler'; import { AppToaster } from '../singletons/toaster'; export interface AsyncAlertDialogProps extends React.Props { - action: null | (() => Promise), - onClose: (success: boolean) => void, + action: null | (() => Promise); + onClose: (success: boolean) => void; confirmButtonText: string; cancelButtonText?: string; - className?: string, + className?: string; icon?: string; intent?: Intent; successText: string; @@ -42,7 +42,7 @@ export interface AsyncAlertDialogProps extends React.Props { } export interface AsyncAlertDialogState { - working: boolean + working: boolean; } export class AsyncActionDialog extends React.Component { @@ -59,7 +59,7 @@ export class AsyncActionDialog extends React.Component
- { icon && } - { !working &&
{children}
} + {icon && } + {!working &&
{children}
}
{ working ? @@ -103,6 +103,6 @@ export class AsyncActionDialog extends React.Component } - + ; } } diff --git a/web-console/src/dialogs/coordinator-dynamic-config.tsx b/web-console/src/dialogs/coordinator-dynamic-config.tsx index 474b0e2cda8..59ee1658aa3 100644 --- a/web-console/src/dialogs/coordinator-dynamic-config.tsx +++ b/web-console/src/dialogs/coordinator-dynamic-config.tsx @@ -17,17 +17,20 @@ */ import { Intent } from '@blueprintjs/core'; -import * as React from 'react'; import axios from 'axios'; -import { AppToaster } from '../singletons/toaster'; -import { IconNames } from '../components/filler'; +import * as React from 'react'; + import { AutoForm } from '../components/auto-form'; +import { IconNames } from '../components/filler'; +import { AppToaster } from '../singletons/toaster'; import { getDruidErrorMessage } from '../utils'; + import { SnitchDialog } from './snitch-dialog'; + import './coordinator-dynamic-config.scss'; export interface CoordinatorDynamicConfigDialogProps extends React.Props { - onClose: () => void + onClose: () => void; } export interface CoordinatorDynamicConfigDialogState { @@ -39,7 +42,7 @@ export class CoordinatorDynamicConfigDialog extends React.Component | null = null; try { const configResp = await axios.get("/druid/coordinator/v1/config"); - config = configResp.data + config = configResp.data; } catch (e) { AppToaster.show({ iconName: IconNames.ERROR, @@ -66,7 +69,7 @@ export class CoordinatorDynamicConfigDialog extends React.Component { const { onClose } = this.props; - let newState: any = this.state.dynamicConfig; + const newState: any = this.state.dynamicConfig; try { await axios.post("/druid/coordinator/v1/config", newState, { headers: { @@ -158,6 +161,6 @@ export class CoordinatorDynamicConfigDialog extends React.Component this.setState({ dynamicConfig: m })} /> - + ; } } diff --git a/web-console/src/dialogs/lookup-edit-dialog.tsx b/web-console/src/dialogs/lookup-edit-dialog.tsx index 3375b943fd4..e32ec5af25c 100644 --- a/web-console/src/dialogs/lookup-edit-dialog.tsx +++ b/web-console/src/dialogs/lookup-edit-dialog.tsx @@ -16,24 +16,26 @@ * limitations under the License. */ +import { Button, Classes, Dialog, InputGroup, Intent } from "@blueprintjs/core"; import * as React from "react"; -import {Button, Classes, Dialog, Intent, InputGroup } from "@blueprintjs/core"; -import "./lookup-edit-dialog.scss" -import {validJson} from "../utils"; import AceEditor from "react-ace"; -import {FormGroup} from "../components/filler"; + +import { FormGroup } from "../components/filler"; +import { validJson } from "../utils"; + +import "./lookup-edit-dialog.scss"; export interface LookupEditDialogProps extends React.Props { - isOpen: boolean, - onClose: () => void, - onSubmit: () => void, - onChange: (field: string, value: string) => void - lookupName: string, - lookupTier: string, - lookupVersion: string, - lookupSpec: string, - isEdit: boolean, - allLookupTiers: string[] + isOpen: boolean; + onClose: () => void; + onSubmit: () => void; + onChange: (field: string, value: string) => void; + lookupName: string; + lookupTier: string; + lookupVersion: string; + lookupSpec: string; + isEdit: boolean; + allLookupTiers: string[]; } export interface LookupEditDialogState { @@ -45,7 +47,7 @@ export class LookupEditDialog extends React.Component { @@ -62,21 +64,21 @@ export class LookupEditDialog extends React.Component onChange("lookupEditTier", e.target.value)} - disabled={true} + disabled /> - + ; } else { return
- onChange("lookupEditTier", e.target.value)}> { allLookupTiers.map(tier => { - return + return ; }) }
- + ; } } @@ -101,7 +103,7 @@ export class LookupEditDialog extends React.Component - { this.renderTierInput() } + {this.renderTierInput()} @@ -151,4 +153,4 @@ export class LookupEditDialog extends React.Component ; } -} \ No newline at end of file +} diff --git a/web-console/src/dialogs/retention-dialog.tsx b/web-console/src/dialogs/retention-dialog.tsx index a6e02af28ef..10d85f289b6 100644 --- a/web-console/src/dialogs/retention-dialog.tsx +++ b/web-console/src/dialogs/retention-dialog.tsx @@ -16,17 +16,19 @@ * limitations under the License. */ -import * as React from 'react'; -import axios from 'axios'; import { Button } from "@blueprintjs/core"; +import axios from 'axios'; +import * as React from 'react'; + import { FormGroup, IconNames } from '../components/filler'; -import { RuleEditor, Rule } from '../components/rule-editor'; +import { Rule, RuleEditor } from '../components/rule-editor'; + import { SnitchDialog } from './snitch-dialog'; import './retention-dialog.scss'; export function reorderArray(items: T[], oldIndex: number, newIndex: number): T[] { - let newItems = items.concat(); + const newItems = items.concat(); if (newIndex > oldIndex) newIndex--; @@ -111,7 +113,7 @@ export class RetentionDialog extends React.Component this.onDeleteRule(index)} moveUp={index > 0 ? () => this.moveRule(index, -1) : null} moveDown={index < (currentRules || []).length - 1 ? () => this.moveRule(index, 2) : null} - /> + />; } reset = () => { diff --git a/web-console/src/dialogs/snitch-dialog.tsx b/web-console/src/dialogs/snitch-dialog.tsx index d20971ea526..c01913ede03 100644 --- a/web-console/src/dialogs/snitch-dialog.tsx +++ b/web-console/src/dialogs/snitch-dialog.tsx @@ -16,17 +16,17 @@ * limitations under the License. */ -import * as React from 'react'; import { Button, - InputGroup, + Classes, Dialog, IDialogProps, - Classes, - Intent, + InputGroup, + Intent } from "@blueprintjs/core"; -import { IconNames, FormGroup } from '../components/filler'; +import * as React from 'react'; +import { FormGroup, IconNames } from '../components/filler'; export interface SnitchDialogProps extends IDialogProps { onSave: (author: string, comment: string) => void; @@ -50,7 +50,7 @@ export class SnitchDialog extends React.Component { @@ -136,7 +136,7 @@ export class SnitchDialog extends React.Component :