Web console: Improve data loader styling, enforce stricter TS types (a…

…pache#8001) * add assets to auth exclude path * add frame to tile page * better empty filter state * strict TS * fix segments go to sql * add unavailable segments * factor out sugestable input * fix tests * update datasources sql * no depricated extend * add index spec to tuning configs * fix scss lint
himanshug · Jul 1, 2019 · f16f13c · f16f13c
1 parent 2831944
commit f16f13c
Show file tree

Hide file tree

Showing 114 changed files with 1,010 additions and 1,096 deletions.
diff --git a/services/src/main/java/org/apache/druid/cli/RouterJettyServerInitializer.java b/services/src/main/java/org/apache/druid/cli/RouterJettyServerInitializer.java
@@ -65,6 +65,7 @@ public class RouterJettyServerInitializer implements JettyServerInitializer
   protected static final List<String> UNSECURED_PATHS_FOR_UI = ImmutableList.of(
       "/",
       "/coordinator-console/*",
+      "/assets/*",
       "/public/*",
       "/old-console/*",
       "/pages/*",

diff --git a/web-console/package.json b/web-console/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web-console",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "A web console for Apache Druid",
   "author": "Imply Data Inc.",
   "license": "Apache-2.0",
@@ -37,7 +37,7 @@
     "compile": "./script/build",
     "pretest": "./script/build",
     "run": "./script/run",
-    "test": "npm run tslint && jest --silent 2>&1",
+    "test": "npm run tslint && npm run stylelint && jest --silent 2>&1",
     "coverage": "jest --coverage",
     "update-snapshots": "jest -u",
     "tslint": "./node_modules/.bin/tslint -c tslint.json --project tsconfig.json --formatters-dir ./node_modules/awesome-code-style/formatter 'src/**/*.ts?(x)'",

diff --git a/web-console/script/mkcomp b/web-console/script/mkcomp
@@ -85,7 +85,7 @@ import React from 'react';
 
 import './${name}.scss';
 
-export interface ${camelName}Props extends React.Props<any> {
+export interface ${camelName}Props {
 }
 
 export interface ${camelName}State {
@@ -100,7 +100,7 @@ export class ${camelName} extends React.PureComponent<${camelName}Props, ${camel
 
   render() {
     return <div className="${name}">
-    
+      Stuff...
     </div>;
   }
 }

diff --git a/web-console/src/bootstrap/react-table-custom-pagination.tsx b/web-console/src/bootstrap/react-table-custom-pagination.tsx
@@ -21,7 +21,7 @@ import React from 'react';
 
 import './react-table-custom-pagination.scss';
 
-interface ReactTableCustomPaginationProps extends React.Props<any> {
+interface ReactTableCustomPaginationProps {
   pages: number;
   page: number;
   showPageSizeOptions: boolean;

diff --git a/web-console/src/bootstrap/react-table-defaults.tsx b/web-console/src/bootstrap/react-table-defaults.tsx
@@ -38,7 +38,7 @@ class NoData extends React.PureComponent {
 
 Object.assign(ReactTableDefaults, {
   className: '-striped -highlight',
-  defaultFilterMethod: (filter: Filter, row: any, column: any) => {
+  defaultFilterMethod: (filter: Filter, row: any) => {
     const id = filter.pivotId || filter.id;
     return booleanCustomTableFilter(filter, row[id]);
   },

diff --git a/web-console/src/components/action-cell/action-cell.tsx b/web-console/src/components/action-cell/action-cell.tsx
@@ -25,7 +25,7 @@ import { ActionIcon } from '../action-icon/action-icon';
 
 import './action-cell.scss';
 
-export interface ActionCellProps extends React.Props<any> {
+export interface ActionCellProps {
   onDetail?: () => void;
   actions?: BasicAction[];
 }

diff --git a/web-console/src/components/action-icon/action-icon.tsx b/web-console/src/components/action-icon/action-icon.tsx
@@ -22,7 +22,7 @@ import React from 'react';
 
 import './action-icon.scss';
 
-export interface ActionIconProps extends React.Props<any> {
+export interface ActionIconProps {
   className?: string;
   icon: IconName;
   onClick?: () => void;

diff --git a/web-console/src/components/auto-form/__snapshots__/auto-form.spec.tsx.snap b/web-console/src/components/auto-form/__snapshots__/auto-form.spec.tsx.snap
@@ -190,7 +190,7 @@ exports[`auto-form snapshot matches snapshot 1`] = `
       class="bp3-form-content"
     >
       <div
-        class="bp3-input-group"
+        class="bp3-input-group suggestible-input"
       >
         <input
           class="bp3-input"

diff --git a/web-console/src/components/auto-form/auto-form.spec.tsx b/web-console/src/components/auto-form/auto-form.spec.tsx
@@ -35,7 +35,7 @@ describe('auto-form snapshot', () => {
           { name: 'testSeven', type: 'json' },
         ]}
         model={String}
-        onChange={(newModel: Record<string, any>) => {}}
+        onChange={() => {}}
       />
     );
     const { container } = render(autoForm);

diff --git a/web-console/src/components/auto-form/auto-form.tsx b/web-console/src/components/auto-form/auto-form.tsx
@@ -16,32 +16,17 @@
  * limitations under the License.
  */
 
-import {
-  Button,
-  FormGroup,
-  HTMLSelect,
-  Icon,
-  InputGroup,
-  Menu,
-  MenuItem,
-  NumericInput,
-  Popover,
-  Position,
-} from '@blueprintjs/core';
+import { FormGroup, HTMLSelect, Icon, NumericInput, Popover } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import React from 'react';
 
 import { deepDelete, deepGet, deepSet } from '../../utils/object-change';
 import { ArrayInput } from '../array-input/array-input';
 import { JSONInput } from '../json-input/json-input';
+import { SuggestibleInput, SuggestionGroup } from '../suggestible-input/suggestible-input';
 
 import './auto-form.scss';
 
-export interface SuggestionGroup {
-  group: string;
-  suggestions: string[];
-}
-
 export interface Field<T> {
   name: string;
   label?: string;
@@ -55,7 +40,7 @@ export interface Field<T> {
   min?: number;
 }
 
-export interface AutoFormProps<T> extends React.Props<any> {
+export interface AutoFormProps<T> {
   fields: Field<T>[];
   model: T | null;
   onChange: (newModel: T) => void;
@@ -64,13 +49,13 @@ export interface AutoFormProps<T> extends React.Props<any> {
   large?: boolean;
 }
 
-export interface AutoFormState<T> {
+export interface AutoFormState {
   jsonInputsValidity: any;
 }
 
 export class AutoForm<T extends Record<string, any>> extends React.PureComponent<
   AutoFormProps<T>,
-  AutoFormState<T>
+  AutoFormState
 > {
   static makeLabelName(label: string): string {
     let newLabel = label
@@ -159,56 +144,19 @@ export class AutoForm<T extends Record<string, any>> extends React.PureComponent
   private renderStringInput(field: Field<T>, sanitize?: (str: string) => string): JSX.Element {
     const { model, large } = this.props;
 
-    const suggestionsMenu = field.suggestions ? (
-      <Menu>
-        {field.suggestions.map(suggestion => {
-          if (typeof suggestion === 'string') {
-            return (
-              <MenuItem
-                key={suggestion}
-                text={suggestion}
-                onClick={() => this.fieldChange(field, suggestion)}
-              />
-            );
-          } else {
-            return (
-              <MenuItem key={suggestion.group} text={suggestion.group}>
-                {suggestion.suggestions.map(suggestion => (
-                  <MenuItem
-                    key={suggestion}
-                    text={suggestion}
-                    onClick={() => this.fieldChange(field, suggestion)}
-                  />
-                ))}
-              </MenuItem>
-            );
-          }
-        })}
-      </Menu>
-    ) : (
-      undefined
-    );
-
     const modalValue = deepGet(model as any, field.name);
     return (
-      <InputGroup
+      <SuggestibleInput
         value={modalValue != null ? modalValue : field.defaultValue || ''}
-        onChange={(e: any) => {
-          let v = e.target.value;
+        onValueChange={v => {
           if (sanitize) v = sanitize(v);
           this.fieldChange(field, v);
         }}
         onBlur={() => {
           if (modalValue === '') this.fieldChange(field, undefined);
         }}
         placeholder={field.placeholder}
-        rightElement={
-          suggestionsMenu && (
-            <Popover content={suggestionsMenu} position={Position.BOTTOM_RIGHT} autoFocus={false}>
-              <Button icon={IconNames.CARET_DOWN} minimal />
-            </Popover>
-          )
-        }
+        suggestions={field.suggestions}
         large={large}
         disabled={field.disabled}
       />

diff --git a/web-console/src/components/center-message/center-message.tsx b/web-console/src/components/center-message/center-message.tsx
@@ -20,7 +20,7 @@ import React from 'react';
 
 import './center-message.scss';
 
-export interface CenterMessageProps extends React.Props<any> {}
+export interface CenterMessageProps {}
 
 export class CenterMessage extends React.PureComponent<CenterMessageProps> {
   render() {

diff --git a/web-console/src/components/clearable-input/__snapshots__/clearable-input.spec.tsx.snap b/web-console/src/components/clearable-input/__snapshots__/clearable-input.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`decribe clearable-input matches snapshot 1`] = `
+exports[`clearable-input matches snapshot 1`] = `
 <div
   class="bp3-input-group clearable-input testClassName"
 >

diff --git a/web-console/src/components/clearable-input/clearable-input.spec.tsx b/web-console/src/components/clearable-input/clearable-input.spec.tsx
@@ -21,16 +21,16 @@ import { render } from 'react-testing-library';
 
 import { ClearableInput } from './clearable-input';
 
-describe('decribe clearable-input', () => {
+describe('clearable-input', () => {
   it('matches snapshot', () => {
     const centerMessage = (
       <ClearableInput
         className={'testClassName'}
         value={'testValue'}
         placeholder={'testPlaceholder'}
-        onChange={(value: string) => null}
+        onChange={() => null}
       >
-        ;<div>Hello World</div>
+        <div>Hello World</div>
       </ClearableInput>
     );
 

diff --git a/web-console/src/components/clearable-input/clearable-input.tsx b/web-console/src/components/clearable-input/clearable-input.tsx
@@ -21,7 +21,7 @@ import { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import React from 'react';
 
-export interface ClearableInputProps extends React.Props<any> {
+export interface ClearableInputProps {
   className?: string;
   value: string;
   onChange: (value: string) => void;

diff --git a/web-console/src/components/external-link/external-link.tsx b/web-console/src/components/external-link/external-link.tsx
@@ -18,7 +18,7 @@
 
 import React from 'react';
 
-export interface ExternalLinkProps extends React.Props<any> {
+export interface ExternalLinkProps {
   href: string;
 }
 

diff --git a/web-console/src/components/header-bar/header-bar.tsx b/web-console/src/components/header-bar/header-bar.tsx
@@ -22,7 +22,6 @@ import {
   Button,
   Intent,
   Menu,
-  MenuDivider,
   MenuItem,
   Navbar,
   NavbarDivider,
@@ -34,8 +33,8 @@ import { IconNames } from '@blueprintjs/icons';
 import React from 'react';
 
 import { AboutDialog } from '../../dialogs/about-dialog/about-dialog';
-import { CoordinatorDynamicConfigDialog } from '../../dialogs/coordinator-dynamic-config/coordinator-dynamic-config';
-import { OverlordDynamicConfigDialog } from '../../dialogs/overlord-dynamic-config/overlord-dynamic-config';
+import { CoordinatorDynamicConfigDialog } from '../../dialogs/coordinator-dynamic-config-dialog/coordinator-dynamic-config-dialog';
+import { OverlordDynamicConfigDialog } from '../../dialogs/overlord-dynamic-config-dialog/overlord-dynamic-config-dialog';
 import {
   DRUID_DOCS,
   DRUID_GITHUB,
@@ -56,7 +55,7 @@ export type HeaderActiveTab =
   | 'servers'
   | 'lookups';
 
-export interface HeaderBarProps extends React.Props<any> {
+export interface HeaderBarProps {
   active: HeaderActiveTab;
   hideLegacy: boolean;
 }

diff --git a/web-console/src/components/json-collapse/json-collapse.tsx b/web-console/src/components/json-collapse/json-collapse.tsx
@@ -17,10 +17,9 @@
  */
 
 import { Button, Collapse, TextArea } from '@blueprintjs/core';
-import classNames from 'classnames';
 import React from 'react';
 
-interface JSONCollapseProps extends React.Props<any> {
+interface JSONCollapseProps {
   stringValue: string;
   buttonText: string;
 }

diff --git a/web-console/src/components/json-input/json-input.spec.tsx b/web-console/src/components/json-input/json-input.spec.tsx
@@ -23,7 +23,7 @@ import { JSONInput } from './json-input';
 
 describe('json input', () => {
   it('matches snapshot', () => {
-    const jsonCollapse = <JSONInput onChange={(newJSONValue: any) => {}} value={'test'} />;
+    const jsonCollapse = <JSONInput onChange={() => {}} value={'test'} />;
     const { container } = render(jsonCollapse);
     expect(container.firstChild).toMatchSnapshot();
   });

diff --git a/web-console/src/components/json-input/json-input.tsx b/web-console/src/components/json-input/json-input.tsx
@@ -21,7 +21,7 @@ import AceEditor from 'react-ace';
 
 import { parseStringToJSON, stringifyJSON, validJson } from '../../utils';
 
-interface JSONInputProps extends React.Props<any> {
+interface JSONInputProps {
   onChange: (newJSONValue: any) => void;
   value: any;
   updateInputValidity?: (valueValid: boolean) => void;

diff --git a/web-console/src/components/loader/loader.tsx b/web-console/src/components/loader/loader.tsx
@@ -20,7 +20,7 @@ import React from 'react';
 
 import './loader.scss';
 
-export interface LoaderProps extends React.Props<any> {
+export interface LoaderProps {
   loadingText?: string;
   loading?: boolean; // This is needed so that this component can be used as a LoadingComponent in react table
 }

diff --git a/web-console/src/components/refresh-button/refresh-button.tsx b/web-console/src/components/refresh-button/refresh-button.tsx
@@ -21,7 +21,7 @@ import React from 'react';
 import { LocalStorageKeys } from '../../utils';
 import { TimedButton } from '../timed-button/timed-button';
 
-export interface RefreshButtonProps extends React.Props<any> {
+export interface RefreshButtonProps {
   onRefresh: (auto: boolean) => void;
   localStorageKey?: LocalStorageKeys;
 }
@@ -45,10 +45,10 @@ export class RefreshButton extends React.PureComponent<RefreshButtonProps> {
     return (
       <TimedButton
         defaultValue={30000}
-        label={'Auto refresh every:'}
+        label="Auto refresh every:"
         intervals={intervals}
         icon={IconNames.REFRESH}
-        text={'Refresh'}
+        text="Refresh"
         onRefresh={onRefresh}
         localStorageKey={localStorageKey}
       />

diff --git a/web-console/src/components/rule-editor/rule-editor.spec.tsx b/web-console/src/components/rule-editor/rule-editor.spec.tsx
@@ -19,15 +19,15 @@
 import React from 'react';
 import { render } from 'react-testing-library';
 
-import { Rule, RuleEditor } from './rule-editor';
+import { RuleEditor } from './rule-editor';
 
 describe('rule editor', () => {
   it('matches snapshot', () => {
     const ruleEditor = (
       <RuleEditor
         rule={{ type: 'loadForever' }}
         tiers={['test', 'test', 'test']}
-        onChange={(newRule: Rule) => null}
+        onChange={() => null}
         onDelete={() => null}
         moveUp={null}
         moveDown={null}