From 1c9a9f05ccead3e3d030bc5b81872bf52d8f6d79 Mon Sep 17 00:00:00 2001 From: Vadim Ogievetsky Date: Sat, 16 Mar 2019 00:29:43 -0700 Subject: [PATCH 1/4] added tslint to web console --- web-console/package-lock.json | 108 ++++++++++++++++++ web-console/package.json | 2 + web-console/script/create-sql-function-doc | 3 +- web-console/src/components/auto-form.tsx | 12 +- web-console/src/components/filler.tsx | 20 ++-- web-console/src/components/loader.tsx | 2 +- web-console/src/components/rule-editor.tsx | 8 +- web-console/src/components/sql-control.tsx | 36 +++--- web-console/src/console-application.tsx | 5 +- web-console/src/dialogs/about-dialog.tsx | 2 +- .../src/dialogs/async-action-dialog.tsx | 12 +- .../dialogs/coordinator-dynamic-config.tsx | 10 +- .../src/dialogs/lookup-edit-dialog.tsx | 36 +++--- web-console/src/dialogs/retention-dialog.tsx | 4 +- web-console/src/dialogs/snitch-dialog.tsx | 7 +- web-console/src/dialogs/spec-dialog.tsx | 10 +- web-console/src/entry.ts | 1 + .../src/singletons/react-table-defaults.tsx | 1 - web-console/src/singletons/toaster.ts | 2 +- web-console/src/utils/general.tsx | 11 +- web-console/src/utils/query-manager.tsx | 6 +- web-console/src/utils/rune-decoder.tsx | 7 +- web-console/src/views/datasource-view.tsx | 19 ++- web-console/src/views/home-view.tsx | 7 +- web-console/src/views/lookups-view.tsx | 70 ++++++------ web-console/src/views/segments-view.tsx | 16 +-- web-console/src/views/servers-view.tsx | 21 ++-- web-console/src/views/sql-view.tsx | 5 +- web-console/src/views/tasks-view.tsx | 13 +-- web-console/tslint.json | 90 +++++++++++++++ web-console/webpack.config.js | 14 +++ 31 files changed, 383 insertions(+), 177 deletions(-) create mode 100644 web-console/tslint.json diff --git a/web-console/package-lock.json b/web-console/package-lock.json index 8c5035ac60de..90232f7de503 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,49 @@ "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" + } + }, + "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 201100c9c124..a8db36766423 100644 --- a/web-console/package.json +++ b/web-console/package.json @@ -70,6 +70,8 @@ "ts-jest": "^23.10.5", "ts-loader": "^5.3.3", "ts-node": "^8.0.2", + "tslint": "^5.14.0", + "tslint-loader": "^3.5.4", "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 146a39e147a3..ba62b96979f0 100755 --- a/web-console/script/create-sql-function-doc +++ b/web-console/script/create-sql-function-doc @@ -22,6 +22,7 @@ writefile='lib/sql-function-doc.ts' > "$writefile" echo -e "// This file is auto generated and should not be modified\n" > "$writefile" +echo -e "/* tslint:disable */\n" >> "$writefile" echo -e 'export const SQLFunctionDoc: any[] = [' >> "$writefile" isFunction=false @@ -47,4 +48,4 @@ while read -r line; do fi done < "$readfile" -echo -e ']' >> "$writefile" \ No newline at end of file +echo -e '];' >> "$writefile" diff --git a/web-console/src/components/auto-form.tsx b/web-console/src/components/auto-form.tsx index 39e8baa55ced..46a11a4e0e29 100644 --- a/web-console/src/components/auto-form.tsx +++ b/web-console/src/components/auto-form.tsx @@ -31,8 +31,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 +48,7 @@ export class AutoForm extends React.Component, AutoFormState constructor(props: AutoFormProps) { super(props); this.state = { - } + }; } private renderNumberInput(field: Field): JSX.Element { @@ -97,7 +97,7 @@ export class AutoForm extends React.Component, AutoFormState > - + ; } private renderStringArrayInput(field: Field): JSX.Element { @@ -127,7 +127,7 @@ export class AutoForm extends React.Component, AutoFormState const label = field.label || AutoForm.makeLabelName(field.name); return {this.renderFieldInput(field)} - + ; } render() { @@ -135,6 +135,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 a0685f60d528..6196065cfacf 100644 --- a/web-console/src/components/filler.tsx +++ b/web-console/src/components/filler.tsx @@ -21,7 +21,6 @@ import * as React from 'react'; import classNames from 'classnames'; import './filler.scss'; - export const IconNames = { ERROR: "error" as "error", PLUS: "plus" as "plus", @@ -109,10 +108,9 @@ export class FormGroup extends React.Component<{ className?: string, label?: str } } - 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 +164,7 @@ export interface NumericInputProps { min?: number; max?: number; stepSize?: number; - majorStepSize?: number + majorStepSize?: number; } export class NumericInput extends React.Component { @@ -174,20 +172,20 @@ export class NumericInput extends React.Component { @@ -236,13 +234,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/loader.tsx b/web-console/src/components/loader.tsx index cb9ef816c03b..fd06f0bd4703 100644 --- a/web-console/src/components/loader.tsx +++ b/web-console/src/components/loader.tsx @@ -48,6 +48,6 @@ export class Loader extends React.Component { {loadingText ?
{loadingText}
: null} - + ; } } diff --git a/web-console/src/components/rule-editor.tsx b/web-console/src/components/rule-editor.tsx index a431ce687597..609c756e8f76 100644 --- a/web-console/src/components/rule-editor.tsx +++ b/web-console/src/components/rule-editor.tsx @@ -107,7 +107,7 @@ export class RuleEditor extends React.Component { @@ -126,9 +126,9 @@ export class RuleEditor 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 +67,7 @@ export class SqlControl extends React.Component { + getCompletions: (editor: any, session: any, pos: any, prefix: any, callback: any) => { callback(null, datasourceList); } }; @@ -77,7 +76,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 +87,7 @@ export class SqlControl extends React.Component { + getCompletions: (editor: any, session: any, pos: any, prefix: any, callback: any) => { callback(null, columnNameList); } }; @@ -97,9 +96,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 +106,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 +132,7 @@ export class SqlControl extends React.ComponentDescription:
{item.description}
- )) + )); } } }; @@ -160,7 +159,7 @@ export class SqlControl extends React.Component { this.setState({ query: newValue - }) + }); } render() { @@ -199,7 +198,7 @@ export class SqlControl extends React.Component
@@ -213,4 +212,3 @@ export class SqlControl extends React.Component; } } - diff --git a/web-console/src/console-application.tsx b/web-console/src/console-application.tsx index 9b610526a916..952d0b4fe2e2 100644 --- a/web-console/src/console-application.tsx +++ b/web-console/src/console-application.tsx @@ -70,7 +70,7 @@ export class ConsoleApplication extends React.Componentoverlord consoles that do not rely on the SQL endpoint. }); - return false + return false; } return true; } @@ -161,11 +161,10 @@ export class ConsoleApplication extends React.Component); }} /> { - return wrapInViewContainer(null, ) + return wrapInViewContainer(null, ); }} />
; } } - diff --git a/web-console/src/dialogs/about-dialog.tsx b/web-console/src/dialogs/about-dialog.tsx index ee1fe0b1646e..40001b7ee2c7 100644 --- a/web-console/src/dialogs/about-dialog.tsx +++ b/web-console/src/dialogs/about-dialog.tsx @@ -22,7 +22,7 @@ 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 { diff --git a/web-console/src/dialogs/async-action-dialog.tsx b/web-console/src/dialogs/async-action-dialog.tsx index 0dc5af1dae35..4c1e9e7e57af 100644 --- a/web-console/src/dialogs/async-action-dialog.tsx +++ b/web-console/src/dialogs/async-action-dialog.tsx @@ -30,11 +30,11 @@ import { Icon, FormGroup, ButtonGroup, NumericInput, TagInput } from '../compone 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 } - + ; } } diff --git a/web-console/src/dialogs/coordinator-dynamic-config.tsx b/web-console/src/dialogs/coordinator-dynamic-config.tsx index 474b0e2cda8b..9278d8613260 100644 --- a/web-console/src/dialogs/coordinator-dynamic-config.tsx +++ b/web-console/src/dialogs/coordinator-dynamic-config.tsx @@ -27,7 +27,7 @@ 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 +39,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 +66,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 +158,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 3375b943fd4d..e69635a1df6f 100644 --- a/web-console/src/dialogs/lookup-edit-dialog.tsx +++ b/web-console/src/dialogs/lookup-edit-dialog.tsx @@ -18,22 +18,22 @@ import * as React from "react"; import {Button, Classes, Dialog, Intent, InputGroup } from "@blueprintjs/core"; -import "./lookup-edit-dialog.scss" +import "./lookup-edit-dialog.scss"; import {validJson} from "../utils"; import AceEditor from "react-ace"; import {FormGroup} from "../components/filler"; 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 +45,7 @@ export class LookupEditDialog extends React.Component { @@ -64,19 +64,19 @@ export class LookupEditDialog extends React.Component onChange("lookupEditTier", e.target.value)} disabled={true} /> - + ; } else { return
- onChange("lookupEditTier", e.target.value)}> { allLookupTiers.map(tier => { - return + return ; }) }
- + ; } } @@ -131,7 +131,7 @@ export class LookupEditDialog extends React.Component @@ -151,4 +151,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 a6e02af28ef7..6355aee3c925 100644 --- a/web-console/src/dialogs/retention-dialog.tsx +++ b/web-console/src/dialogs/retention-dialog.tsx @@ -26,7 +26,7 @@ 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 +111,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 d20971ea5264..c4c11b384fa3 100644 --- a/web-console/src/dialogs/snitch-dialog.tsx +++ b/web-console/src/dialogs/snitch-dialog.tsx @@ -23,11 +23,10 @@ import { Dialog, IDialogProps, Classes, - Intent, + Intent } from "@blueprintjs/core"; import { IconNames, FormGroup } from '../components/filler'; - export interface SnitchDialogProps extends IDialogProps { onSave: (author: string, comment: string) => void; saveDisabled?: boolean; @@ -50,7 +49,7 @@ export class SnitchDialog extends React.Component { @@ -136,7 +135,7 @@ export class SnitchDialog extends React.Component : onChange(RuleEditor.changeTier(rule, tier, e.target.value))} > @@ -194,7 +194,7 @@ export class RuleEditor extends React.Component onChange(RuleEditor.changeColocatedDataSources(rule, v)) } + onChange={(v: any) => onChange(RuleEditor.changeColocatedDataSources(rule, v))} fill /> ; @@ -240,21 +240,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 59fa88a4695f..360ccbb68166 100644 --- a/web-console/src/components/sql-control.tsx +++ b/web-console/src/components/sql-control.tsx @@ -26,11 +26,11 @@ import 'brace/mode/sql'; import 'brace/mode/hjson'; import 'brace/theme/solarized_dark'; import 'brace/ext/language_tools'; -import {Intent, Button, Popover, Checkbox, Classes, Position} from "@blueprintjs/core"; +import { Intent, Button, Popover, Checkbox, Classes, Position } from "@blueprintjs/core"; import { SQLFunctionDoc } from "../../lib/sql-function-doc"; import { IconNames } from './filler'; import './sql-control.scss'; -import {AppToaster} from "../singletons/toaster"; +import { AppToaster } from "../singletons/toaster"; const langTools = ace.acequire('ace/ext/language_tools'); @@ -185,7 +185,7 @@ export class SqlControl 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; } @@ -142,27 +144,47 @@ 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 40001b7ee2c7..fe85b31ec011 100644 --- a/web-console/src/dialogs/about-dialog.tsx +++ b/web-console/src/dialogs/about-dialog.tsx @@ -37,6 +37,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 4c1e9e7e57af..38302d0b9d00 100644 --- a/web-console/src/dialogs/async-action-dialog.tsx +++ b/web-console/src/dialogs/async-action-dialog.tsx @@ -92,8 +92,8 @@ export class AsyncActionDialog extends React.Component
- { icon && } - { !working &&
{children}
} + {icon && } + {!working &&
{children}
}
{ working ? diff --git a/web-console/src/dialogs/lookup-edit-dialog.tsx b/web-console/src/dialogs/lookup-edit-dialog.tsx index e69635a1df6f..e0bae884d3a1 100644 --- a/web-console/src/dialogs/lookup-edit-dialog.tsx +++ b/web-console/src/dialogs/lookup-edit-dialog.tsx @@ -17,11 +17,11 @@ */ import * as React from "react"; -import {Button, Classes, Dialog, Intent, InputGroup } from "@blueprintjs/core"; +import { Button, Classes, Dialog, Intent, InputGroup } from "@blueprintjs/core"; import "./lookup-edit-dialog.scss"; -import {validJson} from "../utils"; +import { validJson } from "../utils"; import AceEditor from "react-ace"; -import {FormGroup} from "../components/filler"; +import { FormGroup } from "../components/filler"; export interface LookupEditDialogProps extends React.Props { isOpen: boolean; @@ -62,7 +62,7 @@ export class LookupEditDialog extends React.Component onChange("lookupEditTier", e.target.value)} - disabled={true} + disabled /> ; } else { @@ -101,7 +101,7 @@ export class LookupEditDialog extends React.Component - { this.renderTierInput() } + {this.renderTierInput()} { this.setState({ spec: e }); }} fontSize={12} showPrintMargin={false} - showGutter={true} - highlightActiveLine={true} + showGutter + highlightActiveLine value={spec} width={"100%"} setOptions={{ diff --git a/web-console/src/utils/general.tsx b/web-console/src/utils/general.tsx index 5eb6826dcb8c..d111e5c4c6cc 100644 --- a/web-console/src/utils/general.tsx +++ b/web-console/src/utils/general.tsx @@ -56,7 +56,7 @@ export function makeBooleanFilter(): FilterRender { style={{ width: '100%' }} onChange={(event: any) => onChange(event.target.value)} value={filterValue || "all"} - fill={true} + fill > diff --git a/web-console/src/views/datasource-view.tsx b/web-console/src/views/datasource-view.tsx index f5a354b035c6..a056d03f3fdb 100644 --- a/web-console/src/views/datasource-view.tsx +++ b/web-console/src/views/datasource-view.tsx @@ -299,7 +299,7 @@ GROUP BY 1`); data={data} loading={datasourcesLoading} noDataText={!datasourcesLoading && datasources && !datasources.length ? 'No datasources' : (datasourcesError || '')} - filterable={true} + filterable filtered={datasourcesFilter} onFilteredChange={(filtered, column) => { this.setState({ datasourcesFilter: filtered }); diff --git a/web-console/src/views/home-view.tsx b/web-console/src/views/home-view.tsx index 111b8ddc7231..53f697d31089 100644 --- a/web-console/src/views/home-view.tsx +++ b/web-console/src/views/home-view.tsx @@ -254,7 +254,7 @@ GROUP BY 1`); renderCard(cardOptions: CardOptions): JSX.Element { return - +
 {cardOptions.title}
{cardOptions.loading ?

Loading...

: (cardOptions.error ? `Error: ${cardOptions.error}` : cardOptions.content)} @@ -298,11 +298,11 @@ GROUP BY 1`); title: "Tasks", loading: state.taskCountLoading, content: <> - { Boolean(state.runningTaskCount) &&

{pluralIfNeeded(state.runningTaskCount, 'running task')}

} - { Boolean(state.pendingTaskCount) &&

{pluralIfNeeded(state.pendingTaskCount, 'pending task')}

} - { Boolean(state.successTaskCount) &&

{pluralIfNeeded(state.successTaskCount, 'successful task')}

} - { Boolean(state.waitingTaskCount) &&

{pluralIfNeeded(state.waitingTaskCount, 'waiting task')}

} - { Boolean(state.failedTaskCount) &&

{pluralIfNeeded(state.failedTaskCount, 'failed task')}

} + {Boolean(state.runningTaskCount) &&

{pluralIfNeeded(state.runningTaskCount, 'running task')}

} + {Boolean(state.pendingTaskCount) &&

{pluralIfNeeded(state.pendingTaskCount, 'pending task')}

} + {Boolean(state.successTaskCount) &&

{pluralIfNeeded(state.successTaskCount, 'successful task')}

} + {Boolean(state.waitingTaskCount) &&

{pluralIfNeeded(state.waitingTaskCount, 'waiting task')}

} + {Boolean(state.failedTaskCount) &&

{pluralIfNeeded(state.failedTaskCount, 'failed task')}

} { !(state.runningTaskCount + state.pendingTaskCount + state.successTaskCount + state.waitingTaskCount + state.failedTaskCount) &&

There are no tasks

} diff --git a/web-console/src/views/lookups-view.tsx b/web-console/src/views/lookups-view.tsx index 6bce43ea4e11..f1a2cb30ce86 100644 --- a/web-console/src/views/lookups-view.tsx +++ b/web-console/src/views/lookups-view.tsx @@ -22,8 +22,8 @@ import * as classNames from 'classnames'; import ReactTable from "react-table"; import { Filter } from "react-table"; import { Button, Intent } from "@blueprintjs/core"; -import {getDruidErrorMessage, QueryManager} from "../utils"; -import {LookupEditDialog} from "../dialogs/lookup-edit-dialog"; +import { getDruidErrorMessage, QueryManager } from "../utils"; +import { LookupEditDialog } from "../dialogs/lookup-edit-dialog"; import { AppToaster } from "../singletons/toaster"; import "./lookups-view.scss"; @@ -218,7 +218,7 @@ export class LookupsView extends React.Component this.setState({ lookupEditDialogOpen: false })} onSubmit={() => this.submitLookupEdit()} onChange={(field: string, value: string) => this.changeLookup(field, value)} - lookupSpec= {lookupEditSpec} + lookupSpec={lookupEditSpec} lookupName={lookupEditName} lookupTier={lookupEditTier} - lookupVersion = {lookupEditVersion} + lookupVersion={lookupEditVersion} isEdit={isEdit} allLookupTiers={allLookupTiers} />; diff --git a/web-console/src/views/servers-view.tsx b/web-console/src/views/servers-view.tsx index 346a4b370c19..df04593a10c4 100644 --- a/web-console/src/views/servers-view.tsx +++ b/web-console/src/views/servers-view.tsx @@ -143,7 +143,7 @@ WHERE "server_type" = 'historical'`); data={servers || []} loading={serversLoading} noDataText={!serversLoading && servers && !servers.length ? 'No historicals' : (serversError || '')} - filterable={true} + filterable filtered={serverFilter} onFilteredChange={(filtered, column) => { this.setState({ serverFilter: filtered }); @@ -270,7 +270,7 @@ WHERE "server_type" = 'historical'`); data={middleManagers || []} loading={middleManagersLoading} noDataText={!middleManagersLoading && middleManagers && !middleManagers.length ? 'No MiddleManagers' : (middleManagersError || '')} - filterable={true} + filterable filtered={middleManagerFilter} onFilteredChange={(filtered, column) => { this.setState({ middleManagerFilter: filtered }); @@ -317,7 +317,7 @@ WHERE "server_type" = 'historical'`); runningTasks.length ? <> Running tasks: - + : No running tasks } diff --git a/web-console/src/views/tasks-view.tsx b/web-console/src/views/tasks-view.tsx index 9df35a722cca..e960198b4c27 100644 --- a/web-console/src/views/tasks-view.tsx +++ b/web-console/src/views/tasks-view.tsx @@ -299,7 +299,7 @@ ORDER BY "rank" DESC, "created_time" DESC`); data={supervisors || []} loading={supervisorsLoading} noDataText={!supervisorsLoading && supervisors && !supervisors.length ? 'No supervisors' : (supervisorsError || '')} - filterable={true} + filterable columns={[ { Header: "Datasource", @@ -338,7 +338,9 @@ ORDER BY "rank" DESC, "created_time" DESC`); return ●  + > + ●  + {value} ; } @@ -413,7 +415,7 @@ ORDER BY "rank" DESC, "created_time" DESC`); data={tasks || []} loading={tasksLoading} noDataText={!tasksLoading && tasks && !tasks.length ? 'No tasks' : (tasksError || '')} - filterable={true} + filterable filtered={taskFilter} onFilteredChange={(filtered, column) => { this.setState({ taskFilter: filtered }); @@ -462,10 +464,12 @@ ORDER BY "rank" DESC, "created_time" DESC`); return ●  - { status } - { location && goToMiddleManager(locationHostname)} title={`Go to: ${locationHostname}`}> ➚ } - { errorMsg && this.setState({ alertErrorMsg: errorMsg })} title={errorMsg}> ? } + > + ●  + + {status} + {location && goToMiddleManager(locationHostname)} title={`Go to: ${locationHostname}`}> ➚} + {errorMsg && this.setState({ alertErrorMsg: errorMsg })} title={errorMsg}> ?} ; }, PivotValue: (opt) => { @@ -503,7 +507,7 @@ ORDER BY "rank" DESC, "created_time" DESC`); Reports    Log (all)    Log (last 8kb)    - { (status === 'RUNNING' || status === 'WAITING' || status === 'PENDING') && this.setState({ killTaskId: id })}>Kill } + {(status === 'RUNNING' || status === 'WAITING' || status === 'PENDING') && this.setState({ killTaskId: id })}>Kill} ; }, Aggregated: row => '' diff --git a/web-console/tslint.json b/web-console/tslint.json index 5ca2c3072a25..9c3bb097197e 100644 --- a/web-console/tslint.json +++ b/web-console/tslint.json @@ -1,5 +1,8 @@ { - "extends": "tslint:recommended", + "extends": [ + "tslint:recommended", + "tslint-react" + ], "rules": { "align": true, "array-type": [true, "array"], @@ -13,8 +16,9 @@ "check-space" ], "curly": [true, "ignore-same-line"], + "file-header": [true, "Licensed to the Apache Software Foundation \\(ASF\\).+"], "forin": false, - "indent": [true, 2], + "indent": [true, "spaces", 2], "interface-name": [true, "never-prefix"], "jsdoc-format": true, "label-position": true, @@ -22,7 +26,15 @@ "max-classes-per-file": false, "member-access": false, "member-ordering": [true, - "static-before-instance" + { + "order": [ + "static-field", + "static-method", + "instance-field", + "constructor", + "instance-method" + ] + } ], "no-any": false, "no-arg": true, @@ -83,8 +95,19 @@ "check-branch", "check-decl", "check-operator", + "check-module", "check-separator", - "check-type" - ] + "check-type", + "check-type-operator" + ], + "jsx-alignment": true, + "jsx-boolean-value": [true, "never"], + "jsx-curly-spacing": [true, "never"], + "jsx-no-lambda": false, + "jsx-no-multiline-js": false, + "jsx-no-string-ref": true, + "jsx-self-close": true, + "jsx-space-before-trailing-slash": false, + "jsx-wrap-multiline": false } } From c1ffb0cd8a3ab9b27f2a5398944eae77848206d0 Mon Sep 17 00:00:00 2001 From: Vadim Ogievetsky Date: Sat, 16 Mar 2019 23:03:55 -0700 Subject: [PATCH 3/4] order imports --- .../src/bootstrap/a-shim-for-react-props.ts | 25 +++++++++++++++++++ .../react-table-defaults.tsx | 3 ++- web-console/src/components/auto-form.tsx | 7 +++--- web-console/src/components/filler.tsx | 3 ++- web-console/src/components/header-bar.tsx | 10 +++++--- web-console/src/components/loader.tsx | 1 + web-console/src/components/rule-editor.tsx | 8 +++--- web-console/src/components/sql-control.tsx | 19 ++++++++------ web-console/src/console-application.tsx | 15 +++++------ web-console/src/dialogs/about-dialog.tsx | 3 ++- .../src/dialogs/async-action-dialog.tsx | 10 ++++---- .../dialogs/coordinator-dynamic-config.tsx | 9 ++++--- .../src/dialogs/lookup-edit-dialog.tsx | 8 +++--- web-console/src/dialogs/retention-dialog.tsx | 8 +++--- web-console/src/dialogs/snitch-dialog.tsx | 9 ++++--- web-console/src/dialogs/spec-dialog.tsx | 9 ++++--- web-console/src/entry.ts | 8 +++--- web-console/src/utils/general.tsx | 3 ++- web-console/src/views/datasource-view.tsx | 15 +++++------ web-console/src/views/home-view.tsx | 8 +++--- web-console/src/views/lookups-view.tsx | 8 +++--- web-console/src/views/segments-view.tsx | 12 +++++---- web-console/src/views/servers-view.tsx | 10 +++++--- web-console/src/views/sql-view.tsx | 14 ++++++----- web-console/src/views/tasks-view.tsx | 10 +++++--- web-console/tslint.json | 14 ++++++++++- 26 files changed, 160 insertions(+), 89 deletions(-) create mode 100644 web-console/src/bootstrap/a-shim-for-react-props.ts rename web-console/src/{singletons => bootstrap}/react-table-defaults.tsx (99%) 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 000000000000..844e0f3fa547 --- /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 99% rename from web-console/src/singletons/react-table-defaults.tsx rename to web-console/src/bootstrap/react-table-defaults.tsx index 53e1728927ad..edb776c17a78 100644 --- a/web-console/src/singletons/react-table-defaults.tsx +++ b/web-console/src/bootstrap/react-table-defaults.tsx @@ -16,9 +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 46a11a4e0e29..6f86a4141c09 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; diff --git a/web-console/src/components/filler.tsx b/web-console/src/components/filler.tsx index d9a8f8b87d8d..e20cd7777539 100644 --- a/web-console/src/components/filler.tsx +++ b/web-console/src/components/filler.tsx @@ -17,8 +17,9 @@ */ import { Button } from '@blueprintjs/core'; -import * as React from 'react'; import classNames from 'classnames'; +import * as React from 'react'; + import './filler.scss'; export const IconNames = { diff --git a/web-console/src/components/header-bar.tsx b/web-console/src/components/header-bar.tsx index 7a0fe6e87b45..9eea252d49a6 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 { diff --git a/web-console/src/components/loader.tsx b/web-console/src/components/loader.tsx index 8eabc5293c99..3a122b9df3b9 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 { diff --git a/web-console/src/components/rule-editor.tsx b/web-console/src/components/rule-editor.tsx index fd60a4be911b..f13f046d6a68 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 { diff --git a/web-console/src/components/sql-control.tsx b/web-console/src/components/sql-control.tsx index 360ccbb68166..c63b880744a2 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/ext/language_tools'; import 'brace/mode/hjson'; +import 'brace/mode/sql'; import 'brace/theme/solarized_dark'; -import 'brace/ext/language_tools'; -import { Intent, Button, Popover, Checkbox, Classes, Position } from "@blueprintjs/core"; +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"; const langTools = ace.acequire('ace/ext/language_tools'); diff --git a/web-console/src/console-application.tsx b/web-console/src/console-application.tsx index c7a30f3b8aed..332783f37257 100644 --- a/web-console/src/console-application.tsx +++ b/web-console/src/console-application.tsx @@ -16,22 +16,23 @@ * limitations under the License. */ +import { Intent } from "@blueprintjs/core"; import axios from 'axios'; -import * as React from 'react'; import * as classNames from 'classnames'; +import * as React from 'react'; import { HashRouter, Route, Switch } from "react-router-dom"; -import { Intent } from "@blueprintjs/core"; + +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 { diff --git a/web-console/src/dialogs/about-dialog.tsx b/web-console/src/dialogs/about-dialog.tsx index fe85b31ec011..570fc13a5799 100644 --- a/web-console/src/dialogs/about-dialog.tsx +++ b/web-console/src/dialogs/about-dialog.tsx @@ -16,8 +16,9 @@ * 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'; diff --git a/web-console/src/dialogs/async-action-dialog.tsx b/web-console/src/dialogs/async-action-dialog.tsx index 38302d0b9d00..bbab05ce2bee 100644 --- a/web-console/src/dialogs/async-action-dialog.tsx +++ b/web-console/src/dialogs/async-action-dialog.tsx @@ -16,17 +16,17 @@ * 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 { diff --git a/web-console/src/dialogs/coordinator-dynamic-config.tsx b/web-console/src/dialogs/coordinator-dynamic-config.tsx index 9278d8613260..59ee1658aa30 100644 --- a/web-console/src/dialogs/coordinator-dynamic-config.tsx +++ b/web-console/src/dialogs/coordinator-dynamic-config.tsx @@ -17,13 +17,16 @@ */ 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 { diff --git a/web-console/src/dialogs/lookup-edit-dialog.tsx b/web-console/src/dialogs/lookup-edit-dialog.tsx index e0bae884d3a1..e32ec5af25c6 100644 --- a/web-console/src/dialogs/lookup-edit-dialog.tsx +++ b/web-console/src/dialogs/lookup-edit-dialog.tsx @@ -16,12 +16,14 @@ * 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 { validJson } from "../utils"; + +import "./lookup-edit-dialog.scss"; export interface LookupEditDialogProps extends React.Props { isOpen: boolean; diff --git a/web-console/src/dialogs/retention-dialog.tsx b/web-console/src/dialogs/retention-dialog.tsx index 6355aee3c925..10d85f289b64 100644 --- a/web-console/src/dialogs/retention-dialog.tsx +++ b/web-console/src/dialogs/retention-dialog.tsx @@ -16,11 +16,13 @@ * 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'; diff --git a/web-console/src/dialogs/snitch-dialog.tsx b/web-console/src/dialogs/snitch-dialog.tsx index c4c11b384fa3..c01913ede039 100644 --- a/web-console/src/dialogs/snitch-dialog.tsx +++ b/web-console/src/dialogs/snitch-dialog.tsx @@ -16,16 +16,17 @@ * limitations under the License. */ -import * as React from 'react'; import { Button, - InputGroup, + Classes, Dialog, IDialogProps, - Classes, + 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; diff --git a/web-console/src/dialogs/spec-dialog.tsx b/web-console/src/dialogs/spec-dialog.tsx index 474763549b12..9b65901b97a5 100644 --- a/web-console/src/dialogs/spec-dialog.tsx +++ b/web-console/src/dialogs/spec-dialog.tsx @@ -16,12 +16,13 @@ * limitations under the License. */ -import * as React from "react"; import { Button, Classes, Dialog, Intent } from "@blueprintjs/core"; -import "./spec-dialog.scss"; -import AceEditor from "react-ace"; -import "brace/theme/solarized_dark"; import "brace/mode/json"; +import "brace/theme/solarized_dark"; +import * as React from "react"; +import AceEditor from "react-ace"; + +import "./spec-dialog.scss"; export interface SpecDialogProps extends React.Props { onSubmit: (spec: JSON) => void; diff --git a/web-console/src/entry.ts b/web-console/src/entry.ts index ecc747b92ea2..9597d709e30b 100644 --- a/web-console/src/entry.ts +++ b/web-console/src/entry.ts @@ -19,14 +19,14 @@ import 'es6-shim/es6-shim'; import 'es7-shim'; // Webpack with automatically pick browser.js which does the shim() import * as React from 'react'; -// tslint:disable-next-line -(React as any).PropTypes = require('prop-types'); // Trick blueprint 1.0.1 into accepting React 16 as React 15. import * as ReactDOM from 'react-dom'; -import "./singletons/react-table-defaults"; -import "./entry.scss"; +import "./bootstrap/a-shim-for-react-props"; +import "./bootstrap/react-table-defaults"; import { ConsoleApplication } from './console-application'; +import "./entry.scss"; + const container = document.getElementsByClassName('app-container')[0]; if (!container) throw new Error('container not found'); diff --git a/web-console/src/utils/general.tsx b/web-console/src/utils/general.tsx index d111e5c4c6cc..7fce2791abaa 100644 --- a/web-console/src/utils/general.tsx +++ b/web-console/src/utils/general.tsx @@ -17,11 +17,12 @@ */ import { Button, InputGroup, Intent } from '@blueprintjs/core'; -import { IconNames, HTMLSelect } from "../components/filler"; import * as numeral from "numeral"; import * as React from 'react'; import { Filter, FilterRender } from 'react-table'; +import { HTMLSelect, IconNames } from "../components/filler"; + export function addFilter(filters: Filter[], id: string, value: string): Filter[] { const currentFilter = filters.find(f => f.id === id); if (currentFilter) { diff --git a/web-console/src/views/datasource-view.tsx b/web-console/src/views/datasource-view.tsx index a056d03f3fdb..1deae85fcc64 100644 --- a/web-console/src/views/datasource-view.tsx +++ b/web-console/src/views/datasource-view.tsx @@ -16,25 +16,26 @@ * limitations under the License. */ +import { Button, Intent, Switch } from "@blueprintjs/core"; import axios from 'axios'; -import * as React from 'react'; import * as classNames from 'classnames'; +import * as React from 'react'; import ReactTable from "react-table"; import { Filter } from "react-table"; -import { Button, Intent, Switch } from "@blueprintjs/core"; + import { IconNames } from "../components/filler"; -import { AppToaster } from '../singletons/toaster'; import { RuleEditor } from '../components/rule-editor'; import { AsyncActionDialog } from '../dialogs/async-action-dialog'; import { RetentionDialog } from '../dialogs/retention-dialog'; +import { AppToaster } from '../singletons/toaster'; import { addFilter, - formatNumber, - formatBytes, countBy, + formatBytes, + formatNumber, + getDruidErrorMessage, lookupBy, - QueryManager, - pluralIfNeeded, queryDruidSql, getDruidErrorMessage + pluralIfNeeded, queryDruidSql, QueryManager } from "../utils"; import "./datasource-view.scss"; diff --git a/web-console/src/views/home-view.tsx b/web-console/src/views/home-view.tsx index 53f697d31089..b435bba3edd0 100644 --- a/web-console/src/views/home-view.tsx +++ b/web-console/src/views/home-view.tsx @@ -17,10 +17,12 @@ */ import axios from 'axios'; -import * as React from 'react'; import * as classNames from 'classnames'; -import { H5, Card, Icon, IconNames } from "../components/filler"; -import { QueryManager, pluralIfNeeded, queryDruidSql, getHeadProp } from '../utils'; +import * as React from 'react'; + +import { Card, H5, Icon, IconNames } from "../components/filler"; +import { getHeadProp, pluralIfNeeded, queryDruidSql, QueryManager } from '../utils'; + import './home-view.scss'; export interface CardOptions { diff --git a/web-console/src/views/lookups-view.tsx b/web-console/src/views/lookups-view.tsx index f1a2cb30ce86..02a6d0e1c0bb 100644 --- a/web-console/src/views/lookups-view.tsx +++ b/web-console/src/views/lookups-view.tsx @@ -16,15 +16,17 @@ * limitations under the License. */ +import { Button, Intent } from "@blueprintjs/core"; import axios from 'axios'; -import * as React from 'react'; import * as classNames from 'classnames'; +import * as React from 'react'; import ReactTable from "react-table"; import { Filter } from "react-table"; -import { Button, Intent } from "@blueprintjs/core"; -import { getDruidErrorMessage, QueryManager } from "../utils"; + import { LookupEditDialog } from "../dialogs/lookup-edit-dialog"; import { AppToaster } from "../singletons/toaster"; +import { getDruidErrorMessage, QueryManager } from "../utils"; + import "./lookups-view.scss"; export interface LookupsViewProps extends React.Props { diff --git a/web-console/src/views/segments-view.tsx b/web-console/src/views/segments-view.tsx index 3b1f7fcccbcc..8320f0565bf8 100644 --- a/web-console/src/views/segments-view.tsx +++ b/web-console/src/views/segments-view.tsx @@ -16,22 +16,24 @@ * limitations under the License. */ +import { Button } from "@blueprintjs/core"; import axios from 'axios'; -import * as React from 'react'; import * as classNames from 'classnames'; +import * as React from 'react'; import ReactTable from "react-table"; import { Filter } from "react-table"; -import { Button } from "@blueprintjs/core"; + import { H5, IconNames } from "../components/filler"; import { addFilter, - makeBooleanFilter, - QueryManager, formatBytes, formatNumber, + makeBooleanFilter, parseList, - queryDruidSql + queryDruidSql, + QueryManager } from "../utils"; + import "./segments-view.scss"; export interface SegmentsViewProps extends React.Props { diff --git a/web-console/src/views/servers-view.tsx b/web-console/src/views/servers-view.tsx index df04593a10c4..e8598be5e67e 100644 --- a/web-console/src/views/servers-view.tsx +++ b/web-console/src/views/servers-view.tsx @@ -16,15 +16,17 @@ * limitations under the License. */ +import { Button, Switch } from "@blueprintjs/core"; import axios from 'axios'; -import * as React from 'react'; import * as classNames from 'classnames'; +import { sum } from "d3-array"; +import * as React from 'react'; import ReactTable from "react-table"; import { Filter } from "react-table"; -import { sum } from "d3-array"; -import { Button, Switch } from "@blueprintjs/core"; + import { IconNames } from '../components/filler'; -import { addFilter, formatBytes, formatBytesCompact, QueryManager, queryDruidSql } from "../utils"; +import { addFilter, formatBytes, formatBytesCompact, queryDruidSql, QueryManager } from "../utils"; + import "./servers-view.scss"; function formatQueues(segmentsToLoad: number, segmentsToLoadSize: number, segmentsToDrop: number, segmentsToDropSize: number): string { diff --git a/web-console/src/views/sql-view.tsx b/web-console/src/views/sql-view.tsx index df5fd30c65c6..cde181e1ae39 100644 --- a/web-console/src/views/sql-view.tsx +++ b/web-console/src/views/sql-view.tsx @@ -17,19 +17,21 @@ */ import axios from 'axios'; -import * as React from 'react'; import * as classNames from 'classnames'; -import ReactTable from "react-table"; import * as Hjson from "hjson"; +import * as React from 'react'; +import ReactTable from "react-table"; + import { SqlControl } from '../components/sql-control'; import { - QueryManager, - localStorageSet, - localStorageGet, decodeRune, HeaderRows, - queryDruidRune, queryDruidSql + localStorageGet, + localStorageSet, + queryDruidRune, + queryDruidSql, QueryManager } from '../utils'; + import "./sql-view.scss"; export interface SqlViewProps extends React.Props { diff --git a/web-console/src/views/tasks-view.tsx b/web-console/src/views/tasks-view.tsx index e960198b4c27..0816c4c05c48 100644 --- a/web-console/src/views/tasks-view.tsx +++ b/web-console/src/views/tasks-view.tsx @@ -16,17 +16,19 @@ * limitations under the License. */ +import { Alert, Button, Intent } from "@blueprintjs/core"; import axios from 'axios'; -import * as React from 'react'; import * as classNames from 'classnames'; +import * as React from 'react'; import ReactTable from "react-table"; import { Filter } from "react-table"; -import { Button, Intent, Alert } from "@blueprintjs/core"; -import { ButtonGroup, Label, IconNames } from "../components/filler"; -import { addFilter, QueryManager, getDruidErrorMessage, countBy, formatDuration, queryDruidSql } from "../utils"; + +import { ButtonGroup, IconNames, Label } from "../components/filler"; import { AsyncActionDialog } from "../dialogs/async-action-dialog"; import { SpecDialog } from "../dialogs/spec-dialog"; import { AppToaster } from '../singletons/toaster'; +import { addFilter, countBy, formatDuration, getDruidErrorMessage, queryDruidSql, QueryManager } from "../utils"; + import "./tasks-view.scss"; export interface TasksViewProps extends React.Props { diff --git a/web-console/tslint.json b/web-console/tslint.json index 9c3bb097197e..daed15b9d92d 100644 --- a/web-console/tslint.json +++ b/web-console/tslint.json @@ -66,7 +66,19 @@ "check-open-brace", "check-whitespace" ], - "ordered-imports": false, + "ordered-imports": [ + true, + { + "import-sources-order": "case-insensitive", + "grouped-imports": true, + "groups": [ + { "name": "parent directories", "match": "^\\.\\.", "order": 20 }, + { "name": "styles", "match": ".scss$", "order": 40 }, + { "name": "current directory", "match": "^\\.", "order": 30 }, + { "name": "libraries", "match": ".*", "order": 10 } + ] + } + ], "prefer-const": [true, {"destructuring": "all"}], "quotemark": [false, "double", "jsx-double", "avoid-escape"], "semicolon": true, From 5e67dbb76db77e4f532853109af6199f8882431c Mon Sep 17 00:00:00 2001 From: Vadim Ogievetsky Date: Sat, 16 Mar 2019 23:05:25 -0700 Subject: [PATCH 4/4] update package-lock --- web-console/package-lock.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/web-console/package-lock.json b/web-console/package-lock.json index 0f3430276fe3..5c60be7d6be7 100644 --- a/web-console/package-lock.json +++ b/web-console/package-lock.json @@ -9739,6 +9739,7 @@ "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" } @@ -9747,6 +9748,7 @@ "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" }