Web console, adding Apache Kafka and AWS Kinesis to the data loader

web-console/src/components/array-input.tsx

@@ -17,7 +17,7 @@
  */
 
 
-import { InputGroup, ITagInputProps } from '@blueprintjs/core';
+import { ITagInputProps, TextArea } from '@blueprintjs/core';
 import * as React from 'react';
 
 export interface ArrayInputProps extends ITagInputProps {
@@ -46,13 +46,14 @@ export class ArrayInput extends React.Component<ArrayInputProps, { stringValue:
   render() {
     const { className, placeholder, large, disabled } = this.props;
     const { stringValue } = this.state;
-    return <InputGroup
+    return <TextArea
       className={className}
       value={stringValue}
       onChange={this.handleChange}
       placeholder={placeholder}
       large={large}
       disabled={disabled}
+      fill
     />;
   }
 }

web-console/src/components/auto-form.tsx

@@ -47,7 +47,7 @@ export interface Field<T> {
   name: string;
   label?: string;
   info?: React.ReactNode;
-  type: 'number' | 'size-bytes' | 'string' | 'boolean' | 'string-array' | 'json';
+  type: 'number' | 'size-bytes' | 'string' | 'duration' | 'boolean' | 'string-array' | 'json';
   defaultValue?: any;
   isDefined?: (model: T) => boolean;
   disabled?: boolean;
@@ -140,7 +140,7 @@ export class AutoForm<T extends Record<string, any>> extends React.Component<Aut
     />;
   }
 
-  private renderStringInput(field: Field<T>): JSX.Element {
+  private renderStringInput(field: Field<T>, sanitize?: (str: string) => string): JSX.Element {
     const { model, large } = this.props;
 
     const suggestionsMenu = field.suggestions ?
@@ -178,7 +178,7 @@ export class AutoForm<T extends Record<string, any>> extends React.Component<Aut
       value={deepGet(model as any, field.name) || field.defaultValue || ''}
       onChange={(e: any) => {
         const v = e.target.value;
-        this.fieldChange(field, v === '' ? undefined : v);
+        this.fieldChange(field, v === '' ? undefined : (sanitize ? sanitize(v) : v));
       }}
       placeholder={field.placeholder}
       rightElement={
@@ -252,6 +252,7 @@ export class AutoForm<T extends Record<string, any>> extends React.Component<Aut
       case 'number': return this.renderNumberInput(field);
       case 'size-bytes': return this.renderSizeBytesInput(field);
       case 'string': return this.renderStringInput(field);
+      case 'duration': return this.renderStringInput(field, (str: string) => str.toUpperCase().replace(/[^0-9PYMDTHS.,]/g, ''));
       case 'boolean': return this.renderBooleanInput(field);
       case 'string-array': return this.renderStringArrayInput(field);
       case 'json': return this.renderJSONInput(field);

web-console/src/components/header-bar.tsx

@@ -44,7 +44,6 @@ import {
   LEGACY_COORDINATOR_CONSOLE,
   LEGACY_OVERLORD_CONSOLE
 } from '../variables';
-import { LoadDataViewSeed } from '../views/load-data-view';
 
 import './header-bar.scss';
 
@@ -53,7 +52,7 @@ export type HeaderActiveTab = null | 'load-data' | 'query' | 'datasources' | 'se
 export interface HeaderBarProps extends React.Props<any> {
   active: HeaderActiveTab;
   hideLegacy: boolean;
-  goToLoadDataView: (loadDataViewSeed: LoadDataViewSeed) => void;
+  goToLoadDataView: () => void;
 }
 
 export interface HeaderBarState {
@@ -160,15 +159,15 @@ export class HeaderBar extends React.Component<HeaderBarProps, HeaderBarState> {
           minimal={!loadDataPrimary}
           intent={loadDataPrimary ? Intent.PRIMARY : Intent.NONE}
         />
-        <AnchorButton minimal active={active === 'query'} icon={IconNames.APPLICATION} text="Query" href="#query" />
 
         <NavbarDivider/>
         <AnchorButton minimal active={active === 'datasources'} icon={IconNames.MULTI_SELECT} text="Datasources" href="#datasources" />
         <AnchorButton minimal active={active === 'segments'} icon={IconNames.STACKED_CHART} text="Segments" href="#segments" />
         <AnchorButton minimal active={active === 'tasks'} icon={IconNames.GANTT_CHART} text="Tasks" href="#tasks" />
+        <AnchorButton minimal active={active === 'servers'} icon={IconNames.DATABASE} text="Data servers" href="#servers" />
 
         <NavbarDivider/>
-        <AnchorButton minimal active={active === 'servers'} icon={IconNames.DATABASE} text="Data servers" href="#servers" />
+        <AnchorButton minimal active={active === 'query'} icon={IconNames.APPLICATION} text="Query" href="#query" />
 
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>

web-console/src/console-application.tsx

@@ -32,7 +32,7 @@ import { QueryManager } from './utils';
 import { DRUID_DOCS_API, DRUID_DOCS_SQL } from './variables';
 import { DatasourcesView } from './views/datasource-view';
 import { HomeView } from './views/home-view';
-import { LoadDataView, LoadDataViewSeed } from './views/load-data-view';
+import { LoadDataView } from './views/load-data-view';
 import { LookupsView } from './views/lookups-view';
 import { SegmentsView } from './views/segments-view';
 import { ServersView } from './views/servers-view';
@@ -100,8 +100,9 @@ export class ConsoleApplication extends React.Component<ConsoleApplicationProps,
     });
   }
 
-  private loadDataViewSeed: LoadDataViewSeed | null;
+  private initSpec: any | null;
   private taskId: string | null;
+  private openDialog: string | null;
   private datasource: string | null;
   private onlyUnavailable: boolean | null;
   private initSql: string | null;
@@ -150,23 +151,25 @@ export class ConsoleApplication extends React.Component<ConsoleApplicationProps,
 
   private resetInitialsWithDelay() {
     setTimeout(() => {
-      this.loadDataViewSeed = null;
+      this.initSpec = null;
       this.taskId = null;
+      this.openDialog = null;
       this.datasource = null;
       this.onlyUnavailable = null;
       this.initSql = null;
       this.middleManager = null;
     }, 50);
   }
 
-  private goToLoadDataView = (loadDataViewSeed?: LoadDataViewSeed) => {
-    if (loadDataViewSeed) this.loadDataViewSeed = loadDataViewSeed;
+  private goToLoadDataView = (initSpec?: any) => {
+    if (initSpec) this.initSpec = initSpec;
     window.location.hash = 'load-data';
     this.resetInitialsWithDelay();
   }
 
-  private goToTask = (taskId: string | null) => {
+  private goToTask = (taskId: string | null, openDialog?: string) => {
     this.taskId = taskId;
+    if (openDialog) this.openDialog = openDialog;
     window.location.hash = 'tasks';
     this.resetInitialsWithDelay();
   }
@@ -205,7 +208,7 @@ export class ConsoleApplication extends React.Component<ConsoleApplicationProps,
   }
 
   private wrappedLoadDataView = () => {
-    return this.wrapInViewContainer('load-data', <LoadDataView seed={this.loadDataViewSeed} goToTask={this.goToTask}/>, 'narrow-pad');
+    return this.wrapInViewContainer('load-data', <LoadDataView initSpec={this.initSpec} goToTask={this.goToTask}/>, 'narrow-pad');
   }
 
   private wrappedSqlView = () => {
@@ -224,7 +227,7 @@ export class ConsoleApplication extends React.Component<ConsoleApplicationProps,
 
   private wrappedTasksView = () => {
     const { noSqlMode } = this.state;
-    return this.wrapInViewContainer('tasks', <TasksView taskId={this.taskId} goToSql={this.goToSql} goToMiddleManager={this.goToMiddleManager} goToLoadDataView={this.goToLoadDataView} noSqlMode={noSqlMode}/>, 'scrollable');
+    return this.wrapInViewContainer('tasks', <TasksView taskId={this.taskId} openDialog={this.openDialog} goToSql={this.goToSql} goToMiddleManager={this.goToMiddleManager} goToLoadDataView={this.goToLoadDataView} noSqlMode={noSqlMode}/>, 'scrollable');
   }
 
   private wrappedServersView = () => {

web-console/src/utils/druid-query.ts

@@ -27,6 +27,7 @@ export function parseHtmlError(htmlStr: string): string | null {
   return htmlStr
     .substring(startIndex + 10, endIndex)
     .replace(/"/g, '"')
+    .replace(/'/g, `'`)
     .replace(/>/g, '>');
 }
 

web-console/src/utils/general.tsx

@@ -207,6 +207,10 @@ export function parseStringToJSON(s: string): JSON | null {
   }
 }
 
+export function selectDefined<T, Q>(xs: (Q | null | undefined)[]): Q[] {
+  return xs.filter(Boolean) as any;
+}
+
 export function filterMap<T, Q>(xs: T[], f: (x: T, i?: number) => Q | null | undefined): Q[] {
   return (xs.map(f) as any).filter(Boolean);
 }