Add lookups view to allow adding/editing/deleting of druid lookups

web-console/src/components/filler.tsx

@@ -49,6 +49,8 @@ export const IconNames = {
   CARET_DOWN: "caret-down" as "caret-down",
   ARROW_UP: "arrow-up" as "arrow-up",
   ARROW_DOWN: "arrow-down" as "arrow-down",
+  PROPERTIES: "properties" as "properties",
+  BUILD: "build" as "build"
 };
 export type IconNames = typeof IconNames[keyof typeof IconNames];
 

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

@@ -31,7 +31,7 @@ import {
   LEGACY_OVERLORD_CONSOLE
 } from '../variables';
 
-export type HeaderActiveTab = null | 'datasources' | 'segments' | 'tasks' | 'servers' | 'sql';
+export type HeaderActiveTab = null | 'datasources' | 'segments' | 'tasks' | 'servers' | 'sql' | 'lookups';
 
 export interface HeaderBarProps extends React.Props<any> {
   active: HeaderActiveTab;
@@ -100,6 +100,7 @@ export class HeaderBar extends React.Component<HeaderBarProps, HeaderBarState> {
 
     const configMenu = <Menu>
       <MenuItem iconName={IconNames.COG} text="Coordinator dynamic config" onClick={() => this.setState({ coordinatorDynamicConfigDialogOpen: true })}/>
+      <MenuItem iconName={IconNames.PROPERTIES} className={classNames(Classes.MINIMAL, { 'pt-active': active === 'lookups' })} text="Lookups" href="#lookups"/>
     </Menu>;
 
     return <Navbar className="header-bar">

web-console/src/console-application.tsx

@@ -31,6 +31,7 @@ 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 "./console-application.scss";
 
 export interface ConsoleApplicationProps extends React.Props<any> {
@@ -156,6 +157,9 @@ export class ConsoleApplication extends React.Component<ConsoleApplicationProps,
           <Route path="/sql" component={() => {
             return wrapInViewContainer('sql', <SqlView initSql={this.initSql}/>);
           }} />
+          <Route path="/lookups" component={() => {
+            return wrapInViewContainer('lookups', <LookupsView />);
+          }} />
           <Route component={() => {
             return wrapInViewContainer(null, <HomeView/>)
           }} />

web-console/src/dialogs/lookup-edit-dialog.scss

@@ -0,0 +1,41 @@
+/*
+ * 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.
+ */
+
+.lookup-edit-dialog {
+  top: 10vh;
+
+  width: 600px;
+
+  .ace_editor{
+    margin: 0px 20px 10px;
+  }
+
+  .lookup-label {
+    padding: 0 20px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+  }
+
+  .ace_scroller {
+    background-color: #232C35;
+  }
+
+  .ace_gutter-layer {
+    background-color: #27313c;
+  }
+}

web-console/src/dialogs/lookup-edit-dialog.tsx

@@ -0,0 +1,154 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * 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";
+
+export interface LookupEditDialogProps extends React.Props<any> {
+  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 {
+}
+
+export class LookupEditDialog extends React.Component<LookupEditDialogProps, LookupEditDialogState> {
+
+  constructor(props: LookupEditDialogProps) {
+    super(props);
+    this.state = {
+
+    }
+  }
+
+  private addISOVersion = () => {
+    const {onChange} = this.props;
+    const currentDate = new Date();
+    const ISOString = currentDate.toISOString();
+    onChange("lookupEditVersion", ISOString);
+  }
+
+  private renderTierInput() {
+    const { isEdit, lookupTier, allLookupTiers, onChange } = this.props;
+    if (isEdit) {
+      return <FormGroup className={"lookup-label"} label={"Tier: "}>
+        <InputGroup
+          value={lookupTier}
+          onChange={(e: any) => onChange("lookupEditTier", e.target.value)}
+          disabled={true}
+        />
+      </FormGroup>
+    } else {
+      return <FormGroup className={"lookup-label"} label={"Tier:"}>
+        <div className="pt-select">
+          <select disabled={isEdit} value={lookupTier} onChange={(e:any) => onChange("lookupEditTier", e.target.value)}>
+            {
+              allLookupTiers.map(tier => {
+                return <option key={tier} value={tier}>{tier}</option>
+              })
+            }
+          </select>
+        </div>
+      </FormGroup>
+    }
+  }
+
+  render() {
+    const { isOpen, onClose, onSubmit, lookupSpec, lookupTier, lookupName, lookupVersion, onChange, isEdit, allLookupTiers } = this.props;
+
+    const disableSubmit = lookupName === "" || lookupVersion === "" ||
+      lookupTier === "" || !validJson(lookupSpec);
+
+    return <Dialog
+      className={"lookup-edit-dialog"}
+      isOpen={isOpen}
+      onClose={onClose}
+      title={isEdit ? "Edit lookup" : "Add lookup"}
+    >
+      <FormGroup className={"lookup-label"} label={"Name: "}>
+        <InputGroup
+          value={lookupName}
+          onChange={(e: any) => onChange("lookupEditName", e.target.value)}
+          disabled={isEdit}
+          placeholder={"Enter the lookup name"}
+        />
+      </FormGroup>
+
+      { this.renderTierInput() }
+
+      <FormGroup className={"lookup-label"} label={"Version:"}>
+        <InputGroup
+          value={lookupVersion}
+          onChange={(e: any) => onChange("lookupEditVersion", e.target.value)}
+          placeholder={"Enter the lookup version"}
+          rightElement={<Button className={"pt-minimal"} text={"Use ISO as version"} onClick={() => this.addISOVersion()} />}
+        />
+      </FormGroup>
+
+      <FormGroup className={"lookup-label"} label={"Spec:"}/>
+
+      <AceEditor
+        className={"lookup-edit-dialog-textarea"}
+        mode="sql"
+        theme="solarized_dark"
+        onChange={
+          (e: any) => onChange("lookupEditSpec", e)
+        }
+        fontSize={12}
+        height={"40vh"}
+        width={"auto"}
+        showPrintMargin={false}
+        showGutter={false}
+        value={lookupSpec}
+        editorProps={{$blockScrolling: Infinity}}
+        setOptions={{
+          enableBasicAutocompletion: false,
+          enableLiveAutocompletion: false,
+          tabSize: 2,
+        }}
+      />
+
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button
+            text="Close"
+            onClick={onClose}
+          />
+          <Button
+            text="Submit"
+            intent={Intent.PRIMARY}
+            onClick={() => onSubmit()}
+            disabled={disableSubmit}
+          />
+        </div>
+      </div>
+    </Dialog>;
+  }
+}

web-console/src/utils/general.tsx

@@ -137,3 +137,14 @@ export function localStorageGet(key: string): string | null {
   if (typeof localStorage === 'undefined') return null;
   return localStorage.getItem(key);
 }
+
+// ----------------------------
+
+export function validJson(json: string): boolean {
+  try {
+    JSON.parse(json);
+    return true;
+  } catch (e) {
+    return false;
+  }
+}

web-console/src/views/lookups-view.scss

@@ -0,0 +1,34 @@
+/*
+ * 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.
+ */
+
+.lookups-view {
+  height: 100%;
+  width: 100%;
+
+  .ReactTable {
+    position: absolute;
+    top: 60px;
+    bottom: 0;
+    width: 100%;
+  }
+
+  .init-div {
+    text-align: center;
+    margin-top: 35vh;
+  }
+}