add tests to dialogs, compnents and views. Add index files to components and dialogs. add nested file structure (#7669)

pom.xml

@@ -1563,6 +1563,7 @@
                                 <exclude>git.version</exclude>
                                 <exclude>node_modules/**</exclude>
                                 <exclude>coordinator-console/**</exclude>
+                                <exclude>src/**/*.snap</exclude>
                             </excludes>
                         </configuration>
                     </plugin>

web-console/.gitignore

@@ -3,6 +3,7 @@ node_modules/
 resources/
 public/
 lib/*.css
+coverage/
 
 coordinator-console/
 pages/

web-console/package.json

@@ -12,10 +12,16 @@
     "preset": "ts-jest",
     "testEnvironment": "jsdom",
     "moduleNameMapper": {
-      "\\.scss$": "identity-obj-proxy"
+      "\\.s?css$": "identity-obj-proxy"
     },
     "testMatch": [
       "**/?(*.)+(spec).ts?(x)"
+    ],
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ],
+    "setupFilesAfterEnv": [
+      "<rootDir>src/setup-tests.ts"
     ]
   },
   "scripts": {
@@ -24,6 +30,8 @@
     "pretest": "./script/build",
     "run": "./script/run",
     "test": "jest --silent 2>&1",
+    "coverage": "jest --coverage",
+    "update": "jest -u",
     "tslint": "./node_modules/.bin/tslint -c tslint.json --project tsconfig.json --formatters-dir ./node_modules/awesome-code-style/formatter 'src/**/*.ts?(x)'",
     "tslint-fix": "npm run tslint -- --fix",
     "tslint-changed-only": "git diff --diff-filter=ACMR --cached --name-only | grep -E \\.tsx\\?$ | xargs ./node_modules/.bin/tslint -c tslint.json --project tsconfig.json --formatters-dir ./node_modules/awesome-code-style/formatter",
@@ -58,12 +66,15 @@
   "devDependencies": {
     "@types/classnames": "^2.2.7",
     "@types/d3-array": "^2.0.0",
+    "@types/enzyme": "^3.9.1",
+    "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/file-saver": "^2.0.0",
     "@types/hjson": "^2.4.1",
     "@types/jest": "^24.0.11",
     "@types/lodash.debounce": "^4.0.6",
     "@types/node": "^11.13.4",
     "@types/numeral": "^0.0.25",
+    "@types/react": "^16.8.16",
     "@types/react-copy-to-clipboard": "^4.2.6",
     "@types/react-dom": "^16.8.4",
     "@types/react-router-dom": "^4.3.2",
@@ -71,15 +82,20 @@
     "autoprefixer": "^9.5.1",
     "awesome-code-style": "^1.2.2",
     "css-loader": "^2.1.1",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.12.1",
+    "enzyme-to-json": "^3.3.5",
+    "fs-extra": "^8.0.1",
     "identity-obj-proxy": "^3.0.0",
     "ignore-styles": "^5.0.1",
-    "jest": "^24.7.1",
+    "jest": "^24.8.0",
     "license-checker": "^25.0.1",
     "node-sass": "^4.11.0",
     "node-sass-chokidar": "^1.3.4",
     "postcss-cli": "^6.1.2",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.6.0",
+    "react-testing-library": "^7.0.0",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
     "stylelint": "^9.10.1",

web-console/src/bootstrap/react-table-defaults.tsx

@@ -19,7 +19,7 @@
 import * as React from 'react';
 import { Filter, ReactTableDefaults } from 'react-table';
 
-import { Loader } from '../components/loader';
+import { Loader } from '../components/loader/loader';
 import { booleanCustomTableFilter, countBy, makeTextFilter } from '../utils';
 
 import { ReactTableCustomPagination } from './react-table-custom-pagination';

web-console/src/components/action-cell/__snapshots__/action-cell.spec.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`describe action cell action cell snapshot 1`] = `
+<div
+  class="action-cell"
+>
+  <div>
+    hello world
+  </div>
+</div>
+`;

web-console/src/components/action-cell/action-cell.spec.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 { render } from 'react-testing-library';
+
+import { ActionCell} from './action-cell';
+
+describe('describe action cell', () => {
+  it('action cell snapshot', () => {
+    const actionCell =
+      <ActionCell >
+        <div>hello world</div>
+      </ActionCell>;
+    const { container, getByText } = render(actionCell);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

web-console/src/components/array-input/__snapshots__/array-input.spec.tsx.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`describe array input array input snapshot 1`] = `
+<textarea
+  class="bp3-input bp3-fill test"
+  placeholder="test"
+>
+  apple, banana, pear
+</textarea>
+`;

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

@@ -0,0 +1,39 @@
+/*
+ * 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 { render } from 'react-testing-library';
+
+import {MenuCheckbox} from '../menu-checkbox/menu-checkbox';
+
+import {ArrayInput} from './array-input';
+
+describe('describe array input', () => {
+  it('array input snapshot', () => {
+    const arrayInput =
+      <ArrayInput
+        values={['apple', 'banana', 'pear']}
+        className={'test'}
+        placeholder={'test'}
+        onChange={() => null}
+      />;
+    const { container, getByText } = render(arrayInput);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

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

@@ -20,8 +20,13 @@
 import { ITagInputProps, TextArea } from '@blueprintjs/core';
 import * as React from 'react';
 
-export interface ArrayInputProps extends ITagInputProps {
+export interface ArrayInputProps {
-
+  className?: string;
+  values: string[];
+  onChange: (newValues: string[]) => void;
+  placeholder?: string;
+  large?: boolean;
+  disabled?: boolean;
 }
 
 export class ArrayInput extends React.Component<ArrayInputProps, { stringValue: string }> {

web-console/src/components/auto-form/__snapshots__/auto-form.spec.tsx.snap

@@ -0,0 +1,489 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`describe auto-form snapshot auto-form snapshot 1`] = `
+<div
+  class="auto-form"
+>
+  <div
+    class="bp3-form-group"
+  >
+    <label
+      class="bp3-label"
+    >
+      Test one
+       
+      <span
+        class="bp3-text-muted"
+      />
+    </label>
+    <div
+      class="bp3-form-content"
+    >
+      <div
+        class="bp3-control-group bp3-fill bp3-numeric-input"
+      >
+        <div
+          class="bp3-input-group"
+        >
+          <input
+            autocomplete="off"
+            class="bp3-input"
+            min="0"
+            style="padding-right: 10px;"
+            type="text"
+            value=""
+          />
+        </div>
+        <div
+          class="bp3-button-group bp3-vertical bp3-fixed"
+        >
+          <button
+            class="bp3-button"
+            type="button"
+          >
+            <span
+              class="bp3-icon bp3-icon-chevron-up"
+              icon="chevron-up"
+            >
+              <svg
+                data-icon="chevron-up"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <desc>
+                  chevron-up
+                </desc>
+                <path
+                  d="M12.71 9.29l-4-4C8.53 5.11 8.28 5 8 5s-.53.11-.71.29l-4 4a1.003 1.003 0 0 0 1.42 1.42L8 7.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 0 0 .71-1.71z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+          </button>
+          <button
+            class="bp3-button"
+            type="button"
+          >
+            <span
+              class="bp3-icon bp3-icon-chevron-down"
+              icon="chevron-down"
+            >
+              <svg
+                data-icon="chevron-down"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <desc>
+                  chevron-down
+                </desc>
+                <path
+                  d="M12 5c-.28 0-.53.11-.71.29L8 8.59l-3.29-3.3a1.003 1.003 0 0 0-1.42 1.42l4 4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0 0 12 5z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="bp3-form-group"
+  >
+    <label
+      class="bp3-label"
+    >
+      Test two
+       
+      <span
+        class="bp3-text-muted"
+      />
+    </label>
+    <div
+      class="bp3-form-content"
+    >
+      <div
+        class="bp3-control-group bp3-numeric-input"
+      >
+        <div
+          class="bp3-input-group"
+        >
+          <input
+            autocomplete="off"
+            class="bp3-input"
+            min="0"
+            style="padding-right: 10px;"
+            type="text"
+            value=""
+          />
+        </div>
+        <div
+          class="bp3-button-group bp3-vertical bp3-fixed"
+        >
+          <button
+            class="bp3-button"
+            type="button"
+          >
+            <span
+              class="bp3-icon bp3-icon-chevron-up"
+              icon="chevron-up"
+            >
+              <svg
+                data-icon="chevron-up"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <desc>
+                  chevron-up
+                </desc>
+                <path
+                  d="M12.71 9.29l-4-4C8.53 5.11 8.28 5 8 5s-.53.11-.71.29l-4 4a1.003 1.003 0 0 0 1.42 1.42L8 7.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 0 0 .71-1.71z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+          </button>
+          <button
+            class="bp3-button"
+            type="button"
+          >
+            <span
+              class="bp3-icon bp3-icon-chevron-down"
+              icon="chevron-down"
+            >
+              <svg
+                data-icon="chevron-down"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <desc>
+                  chevron-down
+                </desc>
+                <path
+                  d="M12 5c-.28 0-.53.11-.71.29L8 8.59l-3.29-3.3a1.003 1.003 0 0 0-1.42 1.42l4 4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0 0 12 5z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="bp3-form-group"
+  >
+    <label
+      class="bp3-label"
+    >
+      Test three
+       
+      <span
+        class="bp3-text-muted"
+      />
+    </label>
+    <div
+      class="bp3-form-content"
+    >
+      <div
+        class="bp3-input-group"
+      >
+        <input
+          class="bp3-input"
+          style="padding-right: 10px;"
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="bp3-form-group"
+  >
+    <label
+      class="bp3-label"
+    >
+      Test four
+       
+      <span
+        class="bp3-text-muted"
+      />
+    </label>
+    <div
+      class="bp3-form-content"
+    >
+      <div
+        class="bp3-html-select"
+      >
+        <select>
+          <option
+            value="True"
+          >
+            True
+          </option>
+          <option
+            value="False"
+          >
+            False
+          </option>
+        </select>
+        <span
+          class="bp3-icon bp3-icon-double-caret-vertical"
+          icon="double-caret-vertical"
+        >
+          <svg
+            data-icon="double-caret-vertical"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <desc>
+              double-caret-vertical
+            </desc>
+            <path
+              d="M5 7h6a1.003 1.003 0 0 0 .71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 0 0 5 7zm6 2H5a1.003 1.003 0 0 0-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0 0 11 9z"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    class="bp3-form-group"
+  >
+    <label
+      class="bp3-label"
+    >
+      Test five
+       
+      <span
+        class="bp3-text-muted"
+      />
+    </label>
+    <div
+      class="bp3-form-content"
+    >
+      <textarea
+        class="bp3-input bp3-fill"
+      />
+    </div>
+  </div>
+  <div
+    class="bp3-form-group"
+  >
+    <label
+      class="bp3-label"
+    >
+      Test six
+       
+      <span
+        class="bp3-text-muted"
+      />
+    </label>
+    <div
+      class="bp3-form-content"
+    >
+      <div
+        class=" ace_editor ace-tm"
+        id="ace-editor"
+        style="width: 100%; height: 8vh;"
+      >
+        <textarea
+          autocapitalize="off"
+          autocorrect="off"
+          class="ace_text-input"
+          spellcheck="false"
+          style="opacity: 0;"
+          wrap="off"
+        />
+        <div
+          aria-hidden="true"
+          class="ace_gutter"
+          style="display: none;"
+        >
+          <div
+            class="ace_layer ace_gutter-layer ace_folding-enabled"
+          />
+          <div
+            class="ace_gutter-active-line"
+          />
+        </div>
+        <div
+          class="ace_scroller"
+        >
+          <div
+            class="ace_content"
+          >
+            <div
+              class="ace_layer ace_print-margin-layer"
+            >
+              <div
+                class="ace_print-margin"
+                style="left: 4px; visibility: hidden;"
+              />
+            </div>
+            <div
+              class="ace_layer ace_marker-layer"
+            />
+            <div
+              class="ace_layer ace_text-layer"
+              style="padding: 0px 4px;"
+            />
+            <div
+              class="ace_layer ace_marker-layer"
+            />
+            <div
+              class="ace_layer ace_cursor-layer ace_hidden-cursors"
+            >
+              <div
+                class="ace_cursor"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          class="ace_scrollbar ace_scrollbar-v"
+          style="display: none; width: 20px;"
+        >
+          <div
+            class="ace_scrollbar-inner"
+            style="width: 20px;"
+          />
+        </div>
+        <div
+          class="ace_scrollbar ace_scrollbar-h"
+          style="display: none; height: 20px;"
+        >
+          <div
+            class="ace_scrollbar-inner"
+            style="height: 20px;"
+          />
+        </div>
+        <div
+          style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+        >
+          <div
+            style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+          />
+          <div
+            style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+          >
+            XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="bp3-form-group"
+  >
+    <label
+      class="bp3-label"
+    >
+      Test seven
+       
+      <span
+        class="bp3-text-muted"
+      />
+    </label>
+    <div
+      class="bp3-form-content"
+    >
+      <div
+        class=" ace_editor ace-tm"
+        id="ace-editor"
+        style="width: 100%; height: 8vh;"
+      >
+        <textarea
+          autocapitalize="off"
+          autocorrect="off"
+          class="ace_text-input"
+          spellcheck="false"
+          style="opacity: 0;"
+          wrap="off"
+        />
+        <div
+          aria-hidden="true"
+          class="ace_gutter"
+          style="display: none;"
+        >
+          <div
+            class="ace_layer ace_gutter-layer ace_folding-enabled"
+          />
+          <div
+            class="ace_gutter-active-line"
+          />
+        </div>
+        <div
+          class="ace_scroller"
+        >
+          <div
+            class="ace_content"
+          >
+            <div
+              class="ace_layer ace_print-margin-layer"
+            >
+              <div
+                class="ace_print-margin"
+                style="left: 4px; visibility: hidden;"
+              />
+            </div>
+            <div
+              class="ace_layer ace_marker-layer"
+            />
+            <div
+              class="ace_layer ace_text-layer"
+              style="padding: 0px 4px;"
+            />
+            <div
+              class="ace_layer ace_marker-layer"
+            />
+            <div
+              class="ace_layer ace_cursor-layer ace_hidden-cursors"
+            >
+              <div
+                class="ace_cursor"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          class="ace_scrollbar ace_scrollbar-v"
+          style="display: none; width: 20px;"
+        >
+          <div
+            class="ace_scrollbar-inner"
+            style="width: 20px;"
+          />
+        </div>
+        <div
+          class="ace_scrollbar ace_scrollbar-h"
+          style="display: none; height: 20px;"
+        >
+          <div
+            class="ace_scrollbar-inner"
+            style="height: 20px;"
+          />
+        </div>
+        <div
+          style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+        >
+          <div
+            style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+          />
+          <div
+            style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+          >
+            XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,42 @@
+/*
+ * 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 { render } from 'react-testing-library';
+
+import {AutoForm} from './auto-form';
+
+
+describe('describe auto-form snapshot', () => {
+  it('auto-form snapshot', () => {
+    const autoForm =
+      <AutoForm
+        fields={[{name: 'testOne', type: 'number'},
+          {name: 'testTwo', type: 'size-bytes'},
+          {name: 'testThree', type: 'string'},
+          {name: 'testFour', type: 'boolean'},
+          {name: 'testFive', type: 'string-array'},
+          {name: 'testSix', type: 'json'},
+          {name: 'testSeven', type: 'json'}]}
+        model={String}
+        onChange={(newModel: Record<string, any>) => {}}
+      />;
+    const { container, getByText } = render(autoForm);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

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

@@ -31,10 +31,9 @@ import {
 import { IconNames } from '@blueprintjs/icons';
 import * as React from 'react';
 
-import { deepDelete, deepGet, deepSet } from '../utils/object-change';
+import { deepDelete, deepGet, deepSet } from '../../utils/object-change';
-
+import { ArrayInput } from '../array-input/array-input';
-import { ArrayInput } from './array-input';
+import { JSONInput } from '../json-input/json-input';
-import { JSONInput } from './json-input';
 
 import './auto-form.scss';
 
@@ -240,8 +239,6 @@ export class AutoForm<T extends Record<string, any>> extends React.Component<Aut
         this.fieldChange(field, v);
       }}
       placeholder={field.placeholder}
-      addOnBlur
-      fill
       large={large}
       disabled={field.disabled}
     />;

web-console/src/components/center-message/__snapshots__/center-message.spec.tsx.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`decribe center-message center-message snapshot 1`] = `
+<div
+  class="center-message bp3-input"
+>
+  <div
+    class="center-message-inner"
+  >
+    <div>
+      Hello World
+    </div>
+  </div>
+</div>
+`;

web-console/src/components/center-message/center-message.spec.tsx

@@ -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.
+ */
+
+import * as React from 'react';
+import { render } from 'react-testing-library';
+
+import { CenterMessage } from './center-message';
+
+describe('decribe center-message', () => {
+  it('center-message snapshot', () => {
+    const centerMessage =
+      <CenterMessage>
+        <div>Hello World</div>
+      </CenterMessage>;
+
+    const { container, getByText } = render(centerMessage);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

web-console/src/components/clearable-input/__snapshots__/clearable-input.spec.tsx.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`decribe clearable-input clearable-input snapshot 1`] = `
+<div
+  class="bp3-input-group clearable-input testClassName"
+>
+  <input
+    class="bp3-input"
+    placeholder="testPlaceholder"
+    style="padding-right: 0px;"
+    type="text"
+    value="testValue"
+  />
+  <span
+    class="bp3-input-action"
+  >
+    <button
+      class="bp3-button bp3-minimal"
+      type="button"
+    >
+      <span
+        class="bp3-icon bp3-icon-cross"
+        icon="cross"
+      >
+        <svg
+          data-icon="cross"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <desc>
+            cross
+          </desc>
+          <path
+            d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 0 0-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 0 0-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 0 0 .71-1.71L9.41 8z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </button>
+  </span>
+</div>
+`;

web-console/src/components/clearable-input/clearable-input.spec.tsx

@@ -0,0 +1,40 @@
+/*
+ * 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 { render } from 'react-testing-library';
+
+import {ClearableInput} from './clearable-input';
+
+
+describe('decribe clearable-input', () => {
+  it('clearable-input snapshot', () => {
+    const centerMessage =
+      <ClearableInput
+        className={'testClassName'}
+        value={'testValue'}
+        placeholder={'testPlaceholder'}
+        onChange={(value: string) => null}
+      >;
+        <div>Hello World</div>
+      </ClearableInput>;
+
+    const { container, getByText } = render(centerMessage);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

web-console/src/components/external-link/__snapshots__/external-link.spec.tsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`describe external link external link snapshot 1`] = `
+<a
+  href="http://test/"
+  target="_blank"
+>
+  <div>
+    hello world
+  </div>
+</a>
+`;

web-console/src/components/external-link/external-link.spec.tsx

@@ -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.
+ */
+
+import * as React from 'react';
+import { render } from 'react-testing-library';
+
+import {ExternalLink} from './external-link';
+
+describe('describe external link', () => {
+  it('external link snapshot', () => {
+    const externalLink =
+      <ExternalLink href={'http://test/'}>
+        <div>hello world</div>
+      </ExternalLink>;
+
+    const { container, getByText } = render(externalLink);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap

@@ -0,0 +1,290 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`describe header bar header bar snapshot 1`] = `
+<Blueprint3.Navbar
+  className="header-bar"
+>
+  <Blueprint3.NavbarGroup
+    align="left"
+  >
+    <a
+      href="#"
+    >
+      <div
+        className="logo"
+      >
+        <svg
+          version="1.1"
+          viewBox="0 0 288 134"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M136.7,67.5c0.5-6.1,5-10.4,10.6-10.4c3.9,0,6.5,2,7.4,4.3l1.1-12.4c0-0.1,0.3-0.2,0.7-0.2
+                c0.7,0,1.3,0.4,1.2,2l-2.3,25.9c-0.1,0.7-0.5,1-1,1h-0.2c-0.6,0-0.9-0.3-0.8-1l0.3-3.2c-1.7,2.7-4.5,4.5-8.3,4.5
+                C139.9,77.9,136.2,73.7,136.7,67.5z M154,68.9l0.4-4.7c-0.9-3.3-3.3-5.4-7.2-5.4c-4.5,0-8.1,3.6-8.5,8.6
+                c-0.4,5.1,2.5,8.7,6.9,8.7C150,76.1,153.7,72.9,154,68.9z"
+            fill="#FFFFFF"
+          />
+          <path
+            d="M161.2,76.6l1.7-19.1c0,0,0.3-0.2,0.7-0.2c0.7,0,1.3,0.4,1.1,2l-0.2,2.5c1.1-3.3,3.3-4.8,6-4.8
+                c1.6,0,2.7,0.7,2.6,1.7c-0.1,0.8-0.6,1.1-0.7,1.1c-0.5-0.5-1.3-0.8-2.3-0.8c-3.6,0-5.6,3.6-6.1,9l-0.8,8.7c-0.1,0.7-0.5,1-1,1
+                h-0.2C161.5,77.6,161.2,77.4,161.2,76.6z"
+            fill="#FFFFFF"
+          />
+          <path
+            d="M175.6,69l0.9-10.7c0.1-0.8,0.5-1,1-1h0.3c0.5,0,0.9,0.2,0.8,1l-0.9,10.5c-0.4,4.4,1.5,7.2,5.5,7.2
+                c3.3,0,6-1.9,7.5-4.7l1.1-13c0.1-0.8,0.5-1,1-1h0.3c0.5,0,0.9,0.2,0.8,1l-1.7,19.1c0,0-0.4,0.2-0.7,0.2c-0.7,0-1.2-0.4-1.1-2
+                l0.2-1.8c-1.6,2.4-4.2,4.1-7.6,4.1C177.6,77.9,175.2,74.4,175.6,69z"
+            fill="#FFFFFF"
+          />
+          <path
+            d="M200.1,50.7c0.1-1,0.6-1.4,1.6-1.4c0.9,0,1.4,0.5,1.3,1.4c-0.1,0.9-0.6,1.4-1.6,1.4
+                C200.5,52.1,200,51.6,200.1,50.7z M198.2,76.6l1.6-18.3c0.1-0.8,0.5-1,1-1h0.3c0.5,0,0.9,0.2,0.8,1l-1.6,18.3
+                c-0.1,0.8-0.5,1-1,1H199C198.5,77.6,198.2,77.4,198.2,76.6z"
+            fill="#FFFFFF"
+          />
+          <path
+            d="M205.8,67.5c0.5-6.1,5-10.4,10.6-10.4c3.9,0,6.5,2,7.4,4.3l1.1-12.4c0-0.1,0.3-0.2,0.7-0.2
+                c0.7,0,1.3,0.4,1.2,2l-2.3,25.9c-0.1,0.7-0.5,1-1,1h-0.2c-0.5,0-0.9-0.3-0.8-1l0.3-3.2c-1.7,2.7-4.5,4.5-8.3,4.5
+                C209,77.9,205.2,73.7,205.8,67.5z M223.1,68.9l0.4-4.7c-0.9-3.3-3.3-5.4-7.2-5.4c-4.5,0-8.1,3.6-8.5,8.6
+                c-0.4,5.1,2.5,8.7,6.9,8.7C219,76.1,222.7,72.9,223.1,68.9z"
+            fill="#FFFFFF"
+          />
+          <path
+            d="M96.2,89.8h-2.7c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3h2.7c11.5,0,23.8-7.4,23.8-23.7
+                c0-9.1-6.9-15.8-16.4-15.8H80c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3h23.6c5.3,0,10.1,1.9,13.6,5.3
+                c3.5,3.4,5.4,8,5.4,13.1c0,6.6-2.3,13-6.3,17.7C111.5,86.8,104.5,89.8,96.2,89.8z M87.1,89.8h-5.8c-0.7,0-1.3-0.6-1.3-1.3
+                c0-0.7,0.6-1.3,1.3-1.3h5.8c0.7,0,1.3,0.6,1.3,1.3C88.4,89.2,87.8,89.8,87.1,89.8z M97.7,79.5h-26c-0.7,0-1.3-0.6-1.3-1.3
+                c0-0.7,0.6-1.3,1.3-1.3h26c7.5,0,11.5-5.8,11.5-11.5c0-4.2-3.2-7.3-7.7-7.3h-26c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3
+                h26c5.9,0,10.3,4.3,10.3,9.9c0,3.7-1.3,7.2-3.7,9.8C105.5,78,101.9,79.5,97.7,79.5z M69.2,58h-6.3c-0.7,0-1.3-0.6-1.3-1.3
+                c0-0.7,0.6-1.3,1.3-1.3h6.3c0.7,0,1.3,0.6,1.3,1.3C70.5,57.4,69.9,58,69.2,58z"
+            fill="#2CEEFB"
+          />
+        </svg>
+      </div>
+    </a>
+    <Blueprint3.NavbarDivider />
+    <Blueprint3.AnchorButton
+      active={true}
+      href="#load-data"
+      icon="cloud-upload"
+      intent="none"
+      minimal={true}
+      text="Load data"
+    />
+    <Blueprint3.NavbarDivider />
+    <Blueprint3.AnchorButton
+      active={false}
+      href="#datasources"
+      icon="multi-select"
+      minimal={true}
+      text="Datasources"
+    />
+    <Blueprint3.AnchorButton
+      active={false}
+      href="#segments"
+      icon="stacked-chart"
+      minimal={true}
+      text="Segments"
+    />
+    <Blueprint3.AnchorButton
+      active={false}
+      href="#tasks"
+      icon="gantt-chart"
+      minimal={true}
+      text="Tasks"
+    />
+    <Blueprint3.AnchorButton
+      active={false}
+      href="#servers"
+      icon="database"
+      minimal={true}
+      text="Data servers"
+    />
+    <Blueprint3.NavbarDivider />
+    <Blueprint3.AnchorButton
+      active={false}
+      href="#query"
+      icon="application"
+      minimal={true}
+      text="Query"
+    />
+  </Blueprint3.NavbarGroup>
+  <Blueprint3.NavbarGroup
+    align="right"
+  >
+    <Blueprint3.Popover
+      boundary="scrollParent"
+      captureDismiss={false}
+      content={
+        <Blueprint3.Menu>
+          <Blueprint3.MenuItem
+            disabled={false}
+            href="/index.html"
+            icon="graph"
+            multiline={false}
+            popoverProps={Object {}}
+            shouldDismissPopover={true}
+            target="_blank"
+            text="Legacy coordinator console"
+          />
+          <Blueprint3.MenuItem
+            disabled={false}
+            href="/console.html"
+            icon="map"
+            multiline={false}
+            popoverProps={Object {}}
+            shouldDismissPopover={true}
+            target="_blank"
+            text="Legacy overlord console"
+          />
+        </Blueprint3.Menu>
+      }
+      defaultIsOpen={false}
+      disabled={false}
+      hasBackdrop={false}
+      hoverCloseDelay={300}
+      hoverOpenDelay={150}
+      inheritDarkTheme={true}
+      interactionKind="click"
+      minimal={false}
+      modifiers={Object {}}
+      openOnTargetFocus={true}
+      position="bottom-right"
+      targetTagName="span"
+      transitionDuration={300}
+      usePortal={true}
+      wrapperTagName="span"
+    >
+      <Blueprint3.Button
+        icon="share"
+        minimal={true}
+        text="Legacy"
+      />
+    </Blueprint3.Popover>
+    <Blueprint3.Popover
+      boundary="scrollParent"
+      captureDismiss={false}
+      content={
+        <Blueprint3.Menu>
+          <Blueprint3.MenuItem
+            disabled={false}
+            icon="settings"
+            multiline={false}
+            onClick={[Function]}
+            popoverProps={Object {}}
+            shouldDismissPopover={true}
+            text="Coordinator dynamic config"
+          />
+          <Blueprint3.MenuItem
+            disabled={false}
+            icon="wrench"
+            multiline={false}
+            onClick={[Function]}
+            popoverProps={Object {}}
+            shouldDismissPopover={true}
+            text="Overlord dynamic config"
+          />
+          <Blueprint3.MenuItem
+            active={false}
+            disabled={false}
+            href="#lookups"
+            icon="properties"
+            multiline={false}
+            popoverProps={Object {}}
+            shouldDismissPopover={true}
+            text="Lookups"
+          />
+        </Blueprint3.Menu>
+      }
+      defaultIsOpen={false}
+      disabled={false}
+      hasBackdrop={false}
+      hoverCloseDelay={300}
+      hoverOpenDelay={150}
+      inheritDarkTheme={true}
+      interactionKind="click"
+      minimal={false}
+      modifiers={Object {}}
+      openOnTargetFocus={true}
+      position="bottom-right"
+      targetTagName="span"
+      transitionDuration={300}
+      usePortal={true}
+      wrapperTagName="span"
+    >
+      <Blueprint3.Button
+        icon="cog"
+        minimal={true}
+      />
+    </Blueprint3.Popover>
+    <Blueprint3.Popover
+      boundary="scrollParent"
+      captureDismiss={false}
+      content={
+        <Blueprint3.Menu>
+          <Blueprint3.MenuItem
+            disabled={false}
+            icon="graph"
+            multiline={false}
+            onClick={[Function]}
+            popoverProps={Object {}}
+            shouldDismissPopover={true}
+            text="About"
+          />
+          <Blueprint3.MenuItem
+            disabled={false}
+            href="http://druid.io/docs/latest"
+            icon="th"
+            multiline={false}
+            popoverProps={Object {}}
+            shouldDismissPopover={true}
+            target="_blank"
+            text="Docs"
+          />
+          <Blueprint3.MenuItem
+            disabled={false}
+            href="https://groups.google.com/forum/#!forum/druid-user"
+            icon="user"
+            multiline={false}
+            popoverProps={Object {}}
+            shouldDismissPopover={true}
+            target="_blank"
+            text="User group"
+          />
+          <Blueprint3.MenuItem
+            disabled={false}
+            href="https://github.com/apache/druid"
+            icon="git-branch"
+            multiline={false}
+            popoverProps={Object {}}
+            shouldDismissPopover={true}
+            target="_blank"
+            text="GitHub"
+          />
+        </Blueprint3.Menu>
+      }
+      defaultIsOpen={false}
+      disabled={false}
+      hasBackdrop={false}
+      hoverCloseDelay={300}
+      hoverOpenDelay={150}
+      inheritDarkTheme={true}
+      interactionKind="click"
+      minimal={false}
+      modifiers={Object {}}
+      openOnTargetFocus={true}
+      position="bottom-right"
+      targetTagName="span"
+      transitionDuration={300}
+      usePortal={true}
+      wrapperTagName="span"
+    >
+      <Blueprint3.Button
+        icon="help"
+        minimal={true}
+      />
+    </Blueprint3.Popover>
+  </Blueprint3.NavbarGroup>
+</Blueprint3.Navbar>
+`;

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

@@ -0,0 +1,35 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import * as React from 'react';
+
+import {HeaderBar} from './header-bar';
+
+describe('describe header bar', () => {
+  it('header bar snapshot', () => {
+    const headerBar = shallow(
+      <HeaderBar
+        active={'load-data'}
+        hideLegacy={false}
+        goToLoadDataView={() => {}}
+      />);
+    expect(headerBar).toMatchSnapshot();
+  });
+});
+

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

@@ -33,17 +33,17 @@ import { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import * as React from 'react';
 
-import { AboutDialog } from '../dialogs/about-dialog';
+import { AboutDialog } from '../../dialogs/about-dialog/about-dialog';
-import { CoordinatorDynamicConfigDialog } from '../dialogs/coordinator-dynamic-config';
+import { CoordinatorDynamicConfigDialog } from '../../dialogs/coordinator-dynamic-config/coordinator-dynamic-config';
-import { OverlordDynamicConfigDialog } from '../dialogs/overlord-dynamic-config';
+import { OverlordDynamicConfigDialog } from '../../dialogs/overlord-dynamic-config/overlord-dynamic-config';
-import { getWikipediaSpec } from '../utils/example-ingestion-spec';
+import { getWikipediaSpec } from '../../utils/example-ingestion-spec';
 import {
   DRUID_DOCS,
   DRUID_GITHUB,
   DRUID_USER_GROUP,
   LEGACY_COORDINATOR_CONSOLE,
   LEGACY_OVERLORD_CONSOLE
-} from '../variables';
+} from '../../variables';
 
 import './header-bar.scss';
 

web-console/src/components/index.ts

@@ -0,0 +1,36 @@
+/*
+ * 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.
+ */
+
+export * from './action-cell/action-cell';
+export * from './array-input/array-input';
+export * from './auto-form/auto-form';
+export * from './center-message/center-message';
+export * from './external-link/external-link';
+export * from './header-bar/header-bar';
+export * from './json-collapse/json-collapse';
+export * from './json-input/json-input';
+export * from './loader/loader';
+export * from './menu-checkbox/menu-checkbox';
+export * from './null-table-cell/null-table-cell';
+export * from './rule-editor/rule-editor';
+export * from './show-json/show-json';
+export * from './show-log/show-log';
+export * from './sql-control/sql-control';
+export * from './table-column/table-column-selection';
+export * from './view-control-bar/view-control-bar';
+export * from './clearable-input/clearable-input';

web-console/src/components/json-collapse/__snapshots__/json-collapse.spec.tsx.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`describe json collapse  json collapse snapshot 1`] = `
+<div
+  class="json-collapse"
+>
+  <button
+    class="bp3-button bp3-minimal"
+    type="button"
+  >
+    <span
+      class="bp3-button-text"
+    >
+      test
+    </span>
+  </button>
+  <div>
+    <div
+      class="bp3-collapse"
+    >
+      <div
+        aria-hidden="false"
+        class="bp3-collapse-body"
+        style="transform: translateY(-0px);"
+      />
+    </div>
+  </div>
+</div>
+`;

web-console/src/components/json-collapse/json-collapse.spec.tsx

@@ -0,0 +1,36 @@
+/*
+ * 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 {nullableTypeAnnotation} from '@babel/types';
+import * as React from 'react';
+import { render } from 'react-testing-library';
+
+import {JSONCollapse} from './json-collapse';
+
+
+describe('describe json collapse ', () => {
+  it('json collapse snapshot', () => {
+    const jsonCollapse =
+    <JSONCollapse
+      buttonText={'test'}
+      stringValue={JSON.stringify({ name : 'test' })}
+    />;
+    const { container, getByText } = render(jsonCollapse);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

web-console/src/components/json-input/__snapshots__/json-collapse.spec.tsx.snap

@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`describe json input json input snapshot 1`] = `
+<div
+  class=" ace_editor ace-tm"
+  id="ace-editor"
+  style="width: 100%; height: 8vh;"
+>
+  <textarea
+    autocapitalize="off"
+    autocorrect="off"
+    class="ace_text-input"
+    spellcheck="false"
+    style="opacity: 0;"
+    wrap="off"
+  />
+  <div
+    aria-hidden="true"
+    class="ace_gutter"
+    style="display: none;"
+  >
+    <div
+      class="ace_layer ace_gutter-layer ace_folding-enabled"
+    />
+    <div
+      class="ace_gutter-active-line"
+    />
+  </div>
+  <div
+    class="ace_scroller"
+  >
+    <div
+      class="ace_content"
+    >
+      <div
+        class="ace_layer ace_print-margin-layer"
+      >
+        <div
+          class="ace_print-margin"
+          style="left: 4px; visibility: hidden;"
+        />
+      </div>
+      <div
+        class="ace_layer ace_marker-layer"
+      />
+      <div
+        class="ace_layer ace_text-layer"
+        style="padding: 0px 4px;"
+      />
+      <div
+        class="ace_layer ace_marker-layer"
+      />
+      <div
+        class="ace_layer ace_cursor-layer ace_hidden-cursors"
+      >
+        <div
+          class="ace_cursor"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="ace_scrollbar ace_scrollbar-v"
+    style="display: none; width: 20px;"
+  >
+    <div
+      class="ace_scrollbar-inner"
+      style="width: 20px;"
+    />
+  </div>
+  <div
+    class="ace_scrollbar ace_scrollbar-h"
+    style="display: none; height: 20px;"
+  >
+    <div
+      class="ace_scrollbar-inner"
+      style="height: 20px;"
+    />
+  </div>
+  <div
+    style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+  >
+    <div
+      style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+    />
+    <div
+      style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+    >
+      XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+    </div>
+  </div>
+</div>
+`;

web-console/src/components/json-input/json-collapse.spec.tsx

@@ -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.
+ */
+
+import * as React from 'react';
+import { render } from 'react-testing-library';
+
+import {JSONInput} from './json-input';
+
+describe('describe json input', () => {
+  it('json input snapshot', () => {
+    const jsonCollapse =
+    <JSONInput
+      onChange={(newJSONValue: any) => {}}
+      value={'test'}
+    />;
+    const { container, getByText } = render(jsonCollapse);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

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

@@ -19,7 +19,7 @@
 import * as React from 'react';
 import AceEditor from 'react-ace';
 
-import { parseStringToJSON, stringifyJSON, validJson } from '../utils';
+import { parseStringToJSON, stringifyJSON, validJson } from '../../utils';
 
 interface JSONInputProps extends React.Props<any> {
   onChange: (newJSONValue: any) => void;

web-console/src/components/loader/__snapshots__/loader.spec.tsx.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`describe loader loader snapshot 1`] = `
+<div
+  class="loader"
+>
+  <div
+    class="loader-logo"
+  >
+    <svg
+      viewBox="0 0 100 100"
+    >
+      <path
+        class="one"
+        d="M54.2,69.8h-2.7c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3h2.7c11.5,0,23.8-7.4,23.8-23.7
+          c0-9.1-6.9-15.8-16.4-15.8H38c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3h23.6c5.3,0,10.1,1.9,13.6,5.3c3.5,3.4,5.4,8,5.4,13.1
+          c0,6.6-2.3,13-6.3,17.7C69.5,66.8,62.5,69.8,54.2,69.8z"
+      />
+      <path
+        class="two"
+        d="M55.7,59.5h-26c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3h26c7.5,0,11.5-5.8,11.5-11.5
+            c0-4.2-3.2-7.3-7.7-7.3h-26c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3h26c5.9,0,10.3,4.3,10.3,9.9c0,3.7-1.3,7.2-3.7,9.8
+            C63.5,58,59.9,59.5,55.7,59.5z"
+      />
+      <path
+        class="three"
+        d="M27.2,38h-6.3c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3h6.3c0.7,0,1.3,0.6,1.3,1.3S27.9,38,27.2,38z"
+      />
+      <path
+        class="four"
+        d="M45.1,69.8h-5.8c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3h5.8c0.7,0,1.3,0.6,1.3,1.3
+            C46.4,69.2,45.8,69.8,45.1,69.8z"
+      />
+    </svg>
+    <div
+      class="label"
+    >
+      test
+    </div>
+  </div>
+</div>
+`;

web-console/src/components/loader/loader.spec.tsx

@@ -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.
+ */
+
+import * as React from 'react';
+import { render } from 'react-testing-library';
+
+import { Loader} from './loader';
+
+describe('describe loader', () => {
+  it('loader snapshot', () => {
+    const loader =
+    <Loader
+      loading={true}
+      loadingText={'test'}
+    />;
+    const { container, getByText } = render(loader);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

web-console/src/components/menu-checkbox/__snapshots__/menu-checkbox.spec.tsx.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`describe menuCheckBox  menuCheckbox snapshot 1`] = `
+<li
+  class="menu-checkbox"
+>
+  <label
+    class="bp3-control bp3-checkbox"
+  >
+    <input
+      type="checkbox"
+    />
+    <span
+      class="bp3-control-indicator"
+    />
+  </label>
+</li>
+`;

web-console/src/components/menu-checkbox/menu-checkbox.spec.tsx

@@ -0,0 +1,31 @@
+/*
+ * 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 { render } from 'react-testing-library';
+
+import {MenuCheckbox} from './menu-checkbox';
+
+describe('describe menuCheckBox ', () => {
+  it('menuCheckbox snapshot', () => {
+    const menuCheckbox =
+    <MenuCheckbox/>;
+    const { container, getByText } = render(menuCheckbox);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

web-console/src/components/null-table-cell/__snapshots__/null-table-cell.spec.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`describe nullTable nullTable snapshot 1`] = `test`;

web-console/src/components/null-table-cell/null-table-cell.spec.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 { render } from 'react-testing-library';
+
+import {NullTableCell} from './null-table-cell';
+
+describe('describe nullTable', () => {
+  it('nullTable snapshot', () => {
+    const nullTableCell =
+    <NullTableCell
+      value={'test'}
+      unparseable={false}
+      timestamp={false}
+    />
+    const { container, getByText } = render(nullTableCell);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

web-console/src/components/null-table-cell/null-table-cell.tsx

@@ -1,3 +1,4 @@
+
 /*
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file

web-console/src/components/rule-editor/__snapshots__/rule-editor.spec.tsx.snap

@@ -0,0 +1,220 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`describe rule editor rule editor snapshot 1`] = `
+<div
+  class="rule-editor"
+>
+  <div
+    class="title"
+  >
+    <button
+      class="bp3-button bp3-minimal left"
+      type="button"
+    >
+      <span
+        class="bp3-button-text"
+      >
+        loadForever
+      </span>
+      <span
+        class="bp3-icon bp3-icon-caret-down"
+        icon="caret-down"
+      >
+        <svg
+          data-icon="caret-down"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <desc>
+            caret-down
+          </desc>
+          <path
+            d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 0 0-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </button>
+    <div
+      class="spacer"
+    />
+    <button
+      class="bp3-button bp3-minimal"
+      type="button"
+    >
+      <span
+        class="bp3-icon bp3-icon-trash"
+        icon="trash"
+      >
+        <svg
+          data-icon="trash"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <desc>
+            trash
+          </desc>
+          <path
+            d="M14.49 3.99h-13c-.28 0-.5.22-.5.5s.22.5.5.5h.5v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1v-10h.5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5zm-8.5 9c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm3 0c0 .55-.45 1-1 1s-1-.45-1-1v-6c0-.55.45-1 1-1s1 .45 1 1v6zm2-12h-4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1h-4c-.55 0-1 .45-1 1v1h14v-1c0-.55-.45-1-1-1z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+  <div
+    class="bp3-collapse"
+    style="height: auto; overflow-y: visible; transition: none;"
+  >
+    <div
+      aria-hidden="false"
+      class="bp3-collapse-body"
+      style="transform: translateY(0); transition: none;"
+    >
+      <div
+        class="bp3-card bp3-elevation-0"
+      >
+        <div
+          class="bp3-form-group"
+        >
+          <div
+            class="bp3-form-content"
+          >
+            <div
+              class="bp3-control-group"
+            >
+              <div
+                class="bp3-html-select"
+              >
+                <select>
+                  <option
+                    value="load"
+                  >
+                    Load
+                  </option>
+                  <option
+                    value="drop"
+                  >
+                    Drop
+                  </option>
+                  <option
+                    value="broadcast"
+                  >
+                    Broadcast
+                  </option>
+                </select>
+                <span
+                  class="bp3-icon bp3-icon-double-caret-vertical"
+                  icon="double-caret-vertical"
+                >
+                  <svg
+                    data-icon="double-caret-vertical"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <desc>
+                      double-caret-vertical
+                    </desc>
+                    <path
+                      d="M5 7h6a1.003 1.003 0 0 0 .71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 0 0 5 7zm6 2H5a1.003 1.003 0 0 0-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0 0 11 9z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+              </div>
+              <div
+                class="bp3-html-select"
+              >
+                <select>
+                  <option
+                    value="Forever"
+                  >
+                    forever
+                  </option>
+                  <option
+                    value="ByPeriod"
+                  >
+                    by period
+                  </option>
+                  <option
+                    value="ByInterval"
+                  >
+                    by interval
+                  </option>
+                </select>
+                <span
+                  class="bp3-icon bp3-icon-double-caret-vertical"
+                  icon="double-caret-vertical"
+                >
+                  <svg
+                    data-icon="double-caret-vertical"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <desc>
+                      double-caret-vertical
+                    </desc>
+                    <path
+                      d="M5 7h6a1.003 1.003 0 0 0 .71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 0 0 5 7zm6 2H5a1.003 1.003 0 0 0-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0 0 11 9z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="bp3-form-group"
+        >
+          <div
+            class="bp3-form-content"
+          >
+            <div
+              class="bp3-form-group right"
+            >
+              <div
+                class="bp3-form-content"
+              >
+                <button
+                  class="bp3-button bp3-minimal"
+                  type="button"
+                >
+                  <span
+                    class="bp3-icon bp3-icon-plus"
+                    icon="plus"
+                  >
+                    <svg
+                      data-icon="plus"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      width="16"
+                    >
+                      <desc>
+                        plus
+                      </desc>
+                      <path
+                        d="M13 7H9V3c0-.55-.45-1-1-1s-1 .45-1 1v4H3c-.55 0-1 .45-1 1s.45 1 1 1h4v4c0 .55.45 1 1 1s1-.45 1-1V9h4c.55 0 1-.45 1-1s-.45-1-1-1z"
+                        fill-rule="evenodd"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    class="bp3-button-text"
+                  >
+                    Add a tier
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

web-console/src/components/rule-editor/rule-editor.spec.tsx

@@ -0,0 +1,38 @@
+/*
+ * 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 { render } from 'react-testing-library';
+
+import {Rule, RuleEditor} from './rule-editor';
+
+describe('describe rule editor', () => {
+  it('rule editor snapshot', () => {
+    const ruleEditor =
+    <RuleEditor
+      rule={{type: 'loadForever' }}
+      tiers={['test', 'test', 'test']}
+      onChange={(newRule: Rule) => null}
+      onDelete={() => null}
+      moveUp={null}
+      moveDown={null}
+    />;
+    const { container, getByText } = render(ruleEditor);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

web-console/src/components/show-json/__snapshots__/show-json.spec.tsx.snap

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`describe rule editor rule editor snapshot 1`] = `
+<div
+  class="show-json"
+>
+  <div
+    class="top-actions"
+  >
+    <div
+      class="bp3-button-group right-buttons"
+    >
+      <button
+        class="bp3-button bp3-minimal"
+        type="button"
+      >
+        <span
+          class="bp3-button-text"
+        >
+          Save
+        </span>
+      </button>
+      <button
+        class="bp3-button bp3-minimal"
+        type="button"
+      >
+        <span
+          class="bp3-button-text"
+        >
+          Copy
+        </span>
+      </button>
+      <button
+        class="bp3-button bp3-minimal"
+        type="button"
+      >
+        <span
+          class="bp3-button-text"
+        >
+          View raw
+        </span>
+      </button>
+    </div>
+  </div>
+  <div
+    class="main-area"
+  >
+    <textarea
+      class="bp3-input"
+      readonly=""
+    />
+  </div>
+</div>
+`;

web-console/src/components/show-json/show-json.spec.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 { render } from 'react-testing-library';
+
+import {ShowJson} from './show-json';
+
+
+describe('describe rule editor', () => {
+  it('rule editor snapshot', () => {
+    const showJson =
+      <ShowJson
+        endpoint={'test'}
+        downloadFilename={'test'}
+      />;
+    const { container, getByText } = render(showJson);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

web-console/src/components/show-json/show-json.tsx

@@ -21,9 +21,9 @@ import axios from 'axios';
 import * as React from 'react';
 import * as CopyToClipboard from 'react-copy-to-clipboard';
 
-import { AppToaster } from '../singletons/toaster';
+import { AppToaster } from '../../singletons/toaster';
-import { UrlBaser } from '../singletons/url-baser';
+import { UrlBaser } from '../../singletons/url-baser';
-import { downloadFile } from '../utils';
+import { downloadFile } from '../../utils';
 
 import './show-json.scss';
 

web-console/src/components/show-log/__snapshots__/show-log.spec.tsx.snap

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`describe show log describe show log 1`] = `
+<div
+  class="show-log"
+>
+  <div
+    class="top-actions"
+  >
+    <div
+      class="bp3-button-group right-buttons"
+    >
+      <button
+        class="bp3-button bp3-minimal"
+        type="button"
+      >
+        <span
+          class="bp3-button-text"
+        >
+          Save
+        </span>
+      </button>
+      <button
+        class="bp3-button bp3-minimal"
+        type="button"
+      >
+        <span
+          class="bp3-button-text"
+        >
+          Copy
+        </span>
+      </button>
+      <button
+        class="bp3-button bp3-minimal"
+        type="button"
+      >
+        <span
+          class="bp3-button-text"
+        >
+          View full log
+        </span>
+      </button>
+    </div>
+  </div>
+  <div
+    class="main-area"
+  >
+    <textarea
+      class="bp3-input"
+      readonly=""
+    />
+  </div>
+</div>
+`;

web-console/src/components/show-log/show-log.spec.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 { render } from 'react-testing-library';
+
+import {ShowLog} from './show-log';
+
+
+describe('describe show log', () => {
+  it('describe show log', () => {
+    const showLog =
+      <ShowLog
+        endpoint={'test'}
+        downloadFilename={'test'}
+      />;
+    const { container, getByText } = render(showLog);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

web-console/src/components/show-log/show-log.tsx

@@ -21,9 +21,9 @@ import axios from 'axios';
 import * as React from 'react';
 import * as CopyToClipboard from 'react-copy-to-clipboard';
 
-import { AppToaster } from '../singletons/toaster';
+import { AppToaster } from '../../singletons/toaster';
-import { UrlBaser } from '../singletons/url-baser';
+import { UrlBaser } from '../../singletons/url-baser';
-import { downloadFile } from '../utils';
+import { downloadFile } from '../../utils';
 
 import './show-log.scss';
 

web-console/src/components/sql-control/__snapshots__/sql-control.spec.tsx.snap

@@ -0,0 +1,172 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`describe sql control sql control snapshot 1`] = `
+<div
+  class="sql-control"
+>
+  <div
+    class=" ace_editor ace-solarized-dark ace_dark ace_focus"
+    id="ace-editor"
+    style="width: 100%; height: 30vh; font-size: 14px;"
+  >
+    <textarea
+      autocapitalize="off"
+      autocorrect="off"
+      class="ace_text-input"
+      spellcheck="false"
+      style="opacity: 0; position: fixed; top: 0px;"
+      wrap="off"
+    />
+    <div
+      aria-hidden="true"
+      class="ace_gutter"
+    >
+      <div
+        class="ace_layer ace_gutter-layer ace_folding-enabled"
+      />
+      <div
+        class="ace_gutter-active-line"
+      />
+    </div>
+    <div
+      class="ace_scroller"
+    >
+      <div
+        class="ace_content"
+      >
+        <div
+          class="ace_layer ace_print-margin-layer"
+        >
+          <div
+            class="ace_print-margin"
+            style="left: 4px; visibility: hidden;"
+          />
+        </div>
+        <div
+          class="ace_layer ace_marker-layer"
+        />
+        <div
+          class="ace_layer ace_text-layer"
+          style="padding: 0px 4px;"
+        />
+        <div
+          class="ace_layer ace_marker-layer"
+        />
+        <div
+          class="ace_layer ace_cursor-layer"
+        >
+          <div
+            class="ace_cursor"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="ace_scrollbar ace_scrollbar-v"
+      style="display: none; width: 20px;"
+    >
+      <div
+        class="ace_scrollbar-inner"
+        style="width: 20px;"
+      />
+    </div>
+    <div
+      class="ace_scrollbar ace_scrollbar-h"
+      style="display: none; height: 20px;"
+    >
+      <div
+        class="ace_scrollbar-inner"
+        style="height: 20px;"
+      />
+    </div>
+    <div
+      style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+    >
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+      />
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+      >
+        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+      </div>
+    </div>
+  </div>
+  <div
+    class="buttons"
+  >
+    <div
+      class="bp3-button-group"
+    >
+      <button
+        class="bp3-button"
+        type="button"
+      >
+        <span
+          class="bp3-icon bp3-icon-caret-right"
+          icon="caret-right"
+        >
+          <svg
+            data-icon="caret-right"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <desc>
+              caret-right
+            </desc>
+            <path
+              d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 0 0 6 4.5v7a.495.495 0 0 0 .83.37l4-3.5c.1-.09.17-.22.17-.37z"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </span>
+        <span
+          class="bp3-button-text"
+        >
+          Run with limit
+        </span>
+      </button>
+      <span
+        class="bp3-popover-wrapper"
+      >
+        <span
+          class="bp3-popover-target"
+        >
+          <button
+            class="bp3-button"
+            type="button"
+          >
+            <span
+              class="bp3-icon bp3-icon-more"
+              icon="more"
+            >
+              <svg
+                data-icon="more"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <desc>
+                  more
+                </desc>
+                <path
+                  d="M2 6.03a2 2 0 1 0 0 4 2 2 0 1 0 0-4zM14 6.03a2 2 0 1 0 0 4 2 2 0 1 0 0-4zM8 6.03a2 2 0 1 0 0 4 2 2 0 1 0 0-4z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+          </button>
+        </span>
+      </span>
+    </div>
+    <span
+      class="query-elapsed"
+    >
+       Last query took 
+      0.00
+       seconds
+    </span>
+  </div>
+</div>
+`;

web-console/src/components/sql-control/sql-control.spec.tsx

@@ -0,0 +1,37 @@
+/*
+ * 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 { render } from 'react-testing-library';
+
+import {SqlControl} from './sql-control';
+
+
+describe('describe sql control', () => {
+  it('sql control snapshot', () => {
+    const sqlControl =
+      <SqlControl
+        initSql={'test'}
+        onRun={(query: string, bypassCache: boolean, wrapQuery: boolean) => {}}
+        onExplain={(sqlQuery: string) => {}}
+        queryElapsed={2}
+      />
+    const { container, getByText } = render(sqlControl);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

web-console/src/components/sql-control/sql-control.tsx

@@ -38,14 +38,15 @@ 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 { SQLFunctionDoc } from '../../../lib/sql-function-doc';
-import { AppToaster } from '../singletons/toaster';
+import { AppToaster } from '../../singletons/toaster';
-import { DRUID_DOCS_RUNE, DRUID_DOCS_SQL } from '../variables';
+import { DRUID_DOCS_RUNE, DRUID_DOCS_SQL } from '../../variables';
 
-import { MenuCheckbox } from './menu-checkbox';
+import { MenuCheckbox } from './../menu-checkbox/menu-checkbox';
 
 import './sql-control.scss';
 
+
 function validHjson(query: string) {
   try {
     Hjson.parse(query);

web-console/src/components/table-column/__snapshots__/table-column-selection.spec.tsx.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`describe table column table column snapshot 1`] = `
+<span
+  class="bp3-popover-wrapper table-column-selection"
+>
+  <span
+    class="bp3-popover-target"
+  >
+    <button
+      class="bp3-button"
+      type="button"
+    >
+      <span
+        class="bp3-button-text"
+      >
+        Columns
+      </span>
+      <span
+        class="bp3-icon bp3-icon-caret-down"
+        icon="caret-down"
+      >
+        <svg
+          data-icon="caret-down"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <desc>
+            caret-down
+          </desc>
+          <path
+            d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 0 0-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </button>
+  </span>
+</span>
+`;

web-console/src/components/table-column/table-column-selection.spec.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 { render } from 'react-testing-library';
+
+import {TableColumnSelection} from './table-column-selection';
+
+describe('describe table column', () => {
+  it('table column snapshot', () => {
+    const tableColumn =
+      <TableColumnSelection
+        columns={['a', 'b', 'c']}
+        onChange={(column: string) => {}}
+        tableColumnsHidden={['a', 'b', 'c']}
+      />;
+    const { container, getByText } = render(tableColumn);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

web-console/src/components/table-column/table-column-selection.tsx

@@ -20,7 +20,7 @@ import { Button, Checkbox, FormGroup, Menu, Popover, Position } from '@blueprint
 import { IconNames } from '@blueprintjs/icons';
 import * as React from 'react';
 
-import { MenuCheckbox } from './menu-checkbox';
+import { MenuCheckbox } from '../menu-checkbox/menu-checkbox';
 
 import './table-column-selection.scss';
 

web-console/src/components/view-control-bar/__snapshots__/view-control-bar.spec.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`describe view control bar snapshot view control bar snapshot snapshot 1`] = `
+<div
+  class="view-control-bar"
+>
+  <div
+    class="control-label"
+  >
+    A label
+  </div>
+  <div>
+    Hello world
+  </div>
+</div>
+`;

web-console/src/components/view-control-bar/view-control-bar.spec.tsx

@@ -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.
+ */
+
+import * as React from 'react';
+import { render } from 'react-testing-library';
+
+import { ViewControlBar } from './view-control-bar';
+
+describe('describe view control bar snapshot', () => {
+  it('view control bar snapshot snapshot', () => {
+    const viewControlBar =
+      <ViewControlBar label="A label">
+        <div>Hello world</div>
+      </ViewControlBar>;
+
+    const { container, getByText } = render(viewControlBar);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

web-console/src/console-application.tsx

@@ -23,21 +23,21 @@ import * as classNames from 'classnames';
 import * as React from 'react';
 import { HashRouter, Route, Switch } from 'react-router-dom';
 
-import { ExternalLink } from './components/external-link';
+import { ExternalLink } from './components/external-link/external-link';
-import { HeaderActiveTab, HeaderBar } from './components/header-bar';
+import { HeaderActiveTab, HeaderBar } from './components/header-bar/header-bar';
-import { Loader } from './components/loader';
+import { Loader } from './components/loader/loader';
 import { AppToaster } from './singletons/toaster';
 import { UrlBaser } from './singletons/url-baser';
 import { QueryManager } from './utils';
 import { DRUID_DOCS_API, DRUID_DOCS_SQL } from './variables';
-import { DatasourcesView } from './views/datasource-view';
+import { DatasourcesView } from './views/datasource-view/datasource-view';
-import { HomeView } from './views/home-view';
+import { HomeView } from './views/home-view/home-view';
-import { LoadDataView } from './views/load-data-view';
+import { LoadDataView } from './views/load-data-view/load-data-view';
-import { LookupsView } from './views/lookups-view';
+import { LookupsView } from './views/lookups-view/lookups-view';
-import { SegmentsView } from './views/segments-view';
+import { SegmentsView } from './views/segments-view/segments-view';
-import { ServersView } from './views/servers-view';
+import { ServersView } from './views/servers-view/servers-view';
-import { SqlView } from './views/sql-view';
+import { SqlView } from './views/sql-view/sql-view';
-import { TasksView } from './views/tasks-view';
+import { TasksView } from './views/task-view/tasks-view';
 
 import './console-application.scss';
 

web-console/src/dialogs/about-dialog/__snapshots__/about-dialog.spec.tsx.snap

@@ -0,0 +1,145 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`describe about dialog about dialog snapshot 1`] = `
+<div
+  class="bp3-portal"
+>
+  <div
+    class="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container"
+  >
+    <div
+      class="bp3-overlay-backdrop bp3-overlay-appear bp3-overlay-appear-active"
+      tabindex="0"
+    />
+    <div
+      class="bp3-dialog-container bp3-overlay-content bp3-overlay-appear bp3-overlay-appear-active"
+      tabindex="0"
+    >
+      <div
+        class="bp3-dialog"
+      >
+        <div
+          class="bp3-dialog-header"
+        >
+          <span
+            class="bp3-icon bp3-icon-graph"
+            icon="graph"
+          >
+            <svg
+              data-icon="graph"
+              height="20"
+              viewBox="0 0 20 20"
+              width="20"
+            >
+              <desc>
+                graph
+              </desc>
+              <path
+                d="M17.5 4A2.5 2.5 0 0 0 15 6.5c0 .06.01.12.02.18l-1.9.84C12.38 6.6 11.27 6 10 6c-.83 0-1.59.25-2.23.68L4.91 4.14c.05-.21.09-.42.09-.64a2.5 2.5 0 0 0-5 0A2.5 2.5 0 0 0 2.5 6c.42 0 .81-.11 1.16-.3l2.79 2.48C6.17 8.73 6 9.34 6 10c0 1.41.73 2.64 1.83 3.35l-.56 1.67A2.498 2.498 0 0 0 5 17.5a2.5 2.5 0 0 0 5 0c0-.74-.32-1.39-.83-1.85l.56-1.68c.09.01.18.03.27.03 2.21 0 4-1.79 4-4 0-.22-.03-.44-.07-.65l2.02-.9c.43.34.96.55 1.55.55a2.5 2.5 0 0 0 0-5z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </span>
+          <h4
+            class="bp3-heading"
+          >
+            Apache Druid
+          </h4>
+          <button
+            aria-label="Close"
+            class="bp3-button bp3-minimal bp3-dialog-close-button"
+            type="button"
+          >
+            <span
+              class="bp3-icon bp3-icon-small-cross"
+              icon="small-cross"
+            >
+              <svg
+                data-icon="small-cross"
+                height="20"
+                viewBox="0 0 20 20"
+                width="20"
+              >
+                <desc>
+                  small-cross
+                </desc>
+                <path
+                  d="M11.41 10l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 0 0-1.71-.71L10 8.59l-3.29-3.3a1.003 1.003 0 0 0-1.42 1.42L8.59 10 5.3 13.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71l3.29-3.3 3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 0 0 .71-1.71L11.41 10z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+        <div
+          class="bp3-dialog-body"
+        >
+          <p>
+            <strong>
+              Apache Druid (incubating) is a high performance real-time analytics database.
+            </strong>
+          </p>
+          <p>
+            For help and support with Druid, please refer to the 
+            <a
+              href="http://druid.io/community/"
+              target="_blank"
+            >
+              community page
+            </a>
+             and the 
+            <a
+              href="https://groups.google.com/forum/#!forum/druid-user"
+              target="_blank"
+            >
+              user groups
+            </a>
+            .
+          </p>
+          <p>
+            Druid is made with ❤️ by a community of passionate developers. To contribute, join in the discussion on the 
+            <a
+              href="https://lists.apache.org/list.html?dev@druid.apache.org"
+              target="_blank"
+            >
+              developer group
+            </a>
+            .
+          </p>
+        </div>
+        <div
+          class="bp3-dialog-footer"
+        >
+          <div
+            class="bp3-dialog-footer-actions"
+          >
+            <button
+              class="bp3-button"
+              type="button"
+            >
+              <span
+                class="bp3-button-text"
+              >
+                Close
+              </span>
+            </button>
+            <a
+              class="bp3-button bp3-intent-primary"
+              href="http://druid.io"
+              role="button"
+              tabindex="0"
+              target="_blank"
+            >
+              <span
+                class="bp3-button-text"
+              >
+                Visit Druid
+              </span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

web-console/src/dialogs/about-dialog/about-dialog.spec.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 { render } from 'react-testing-library';
+
+import {AboutDialog} from './about-dialog';
+
+
+describe('describe about dialog', () => {
+  it('about dialog snapshot', () => {
+    const aboutDialog =
+     <AboutDialog
+       onClose={() => null}
+     />;
+    const { container, getByText } = render(aboutDialog, { container: document.body });
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

web-console/src/dialogs/about-dialog/about-dialog.tsx

@@ -20,8 +20,8 @@ import { AnchorButton, Button, Classes, Dialog, Intent } from '@blueprintjs/core
 import { IconNames } from '@blueprintjs/icons';
 import * as React from 'react';
 
-import { ExternalLink } from '../components/external-link';
+import { ExternalLink } from '../../components/external-link/external-link';
-import { DRUID_COMMUNITY, DRUID_DEVELOPER_GROUP, DRUID_USER_GROUP, DRUID_WEBSITE } from '../variables';
+import { DRUID_COMMUNITY, DRUID_DEVELOPER_GROUP, DRUID_USER_GROUP, DRUID_WEBSITE } from '../../variables';
 
 export interface AboutDialogProps extends React.Props<any> {
   onClose: () => void;

web-console/src/dialogs/async-action-dialog/__snapshots__/async-action-dialog.spec.tsx.snap

@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`describe async action dialog async action dialog snapshot 1`] = `
+<div
+  class="bp3-portal"
+>
+  <div
+    class="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container"
+  >
+    <div
+      class="bp3-overlay-backdrop bp3-overlay-appear bp3-overlay-appear-active"
+      tabindex="0"
+    />
+    <div
+      class="bp3-dialog-container bp3-overlay-content bp3-overlay-appear bp3-overlay-appear-active"
+      tabindex="0"
+    >
+      <div
+        class="bp3-dialog bp3-alert async-alert-dialog"
+      >
+        <div
+          class="bp3-alert-body"
+        >
+          <div
+            class="bp3-alert-contents"
+          />
+        </div>
+        <div
+          class="bp3-alert-footer"
+        >
+          <button
+            class="bp3-button"
+            type="button"
+          >
+            <span
+              class="bp3-button-text"
+            >
+              test
+            </span>
+          </button>
+          <button
+            class="bp3-button"
+            type="button"
+          >
+            <span
+              class="bp3-button-text"
+            >
+              Cancel
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

web-console/src/dialogs/async-action-dialog/async-action-dialog.spec.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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 { render } from 'react-testing-library';
+
+import {AsyncActionDialog} from './async-action-dialog';
+
+
+describe('describe async action dialog', () => {
+  it('async action dialog snapshot', () => {
+    const asyncActionDialog =
+      <AsyncActionDialog
+        action={() => {return  Promise.resolve(); }}
+        onClose={(success: boolean) => null}
+        confirmButtonText={'test'}
+        successText={'test'}
+        failText={'test'}
+      />
+    const { container, getByText } = render(asyncActionDialog, { container: document.body });
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

web-console/src/dialogs/async-action-dialog/async-action-dialog.tsx

@@ -28,7 +28,7 @@ import { IconName } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import * as React from 'react';
 
-import { AppToaster } from '../singletons/toaster';
+import { AppToaster } from '../../singletons/toaster';
 
 export interface AsyncAlertDialogProps extends React.Props<any> {
   action: null | (() => Promise<void>);

web-console/src/dialogs/compaction-dialog/__snapshots__/compaction-dialog.spec.tsx.snap

@@ -0,0 +1,731 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`describe compaction dialog compaction dialog snapshot 1`] = `
+<div
+  class="bp3-portal"
+>
+  <div
+    class="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container"
+  >
+    <div
+      class="bp3-overlay-backdrop bp3-overlay-appear bp3-overlay-appear-active"
+    />
+    <div
+      class="bp3-dialog-container bp3-overlay-content bp3-overlay-appear bp3-overlay-appear-active"
+      tabindex="0"
+    >
+      <div
+        class="bp3-dialog compaction-dialog"
+      >
+        <div
+          class="bp3-dialog-header"
+        >
+          <h4
+            class="bp3-heading"
+          >
+            Compaction config: test
+          </h4>
+          <button
+            aria-label="Close"
+            class="bp3-button bp3-minimal bp3-dialog-close-button"
+            type="button"
+          >
+            <span
+              class="bp3-icon bp3-icon-small-cross"
+              icon="small-cross"
+            >
+              <svg
+                data-icon="small-cross"
+                height="20"
+                viewBox="0 0 20 20"
+                width="20"
+              >
+                <desc>
+                  small-cross
+                </desc>
+                <path
+                  d="M11.41 10l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 0 0-1.71-.71L10 8.59l-3.29-3.3a1.003 1.003 0 0 0-1.42 1.42L8.59 10 5.3 13.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71l3.29-3.3 3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 0 0 .71-1.71L11.41 10z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+        <div
+          class="auto-form"
+        >
+          <div
+            class="bp3-form-group"
+          >
+            <label
+              class="bp3-label"
+            >
+              Input segment size bytes
+               
+              <span
+                class="bp3-text-muted"
+              />
+            </label>
+            <div
+              class="bp3-form-content"
+            >
+              <div
+                class="bp3-control-group bp3-fill bp3-numeric-input"
+              >
+                <div
+                  class="bp3-input-group"
+                >
+                  <input
+                    autocomplete="off"
+                    class="bp3-input"
+                    min="0"
+                    style="padding-right: 10px;"
+                    type="text"
+                    value=""
+                  />
+                </div>
+                <div
+                  class="bp3-button-group bp3-vertical bp3-fixed"
+                >
+                  <button
+                    class="bp3-button"
+                    type="button"
+                  >
+                    <span
+                      class="bp3-icon bp3-icon-chevron-up"
+                      icon="chevron-up"
+                    >
+                      <svg
+                        data-icon="chevron-up"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        width="16"
+                      >
+                        <desc>
+                          chevron-up
+                        </desc>
+                        <path
+                          d="M12.71 9.29l-4-4C8.53 5.11 8.28 5 8 5s-.53.11-.71.29l-4 4a1.003 1.003 0 0 0 1.42 1.42L8 7.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 0 0 .71-1.71z"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                  <button
+                    class="bp3-button"
+                    type="button"
+                  >
+                    <span
+                      class="bp3-icon bp3-icon-chevron-down"
+                      icon="chevron-down"
+                    >
+                      <svg
+                        data-icon="chevron-down"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        width="16"
+                      >
+                        <desc>
+                          chevron-down
+                        </desc>
+                        <path
+                          d="M12 5c-.28 0-.53.11-.71.29L8 8.59l-3.29-3.3a1.003 1.003 0 0 0-1.42 1.42l4 4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0 0 12 5z"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="bp3-form-group"
+          >
+            <label
+              class="bp3-label"
+            >
+              Keep segment granularity
+               
+              <span
+                class="bp3-text-muted"
+              />
+            </label>
+            <div
+              class="bp3-form-content"
+            >
+              <div
+                class="bp3-html-select"
+              >
+                <select>
+                  <option
+                    value="True"
+                  >
+                    True
+                  </option>
+                  <option
+                    value="False"
+                  >
+                    False
+                  </option>
+                </select>
+                <span
+                  class="bp3-icon bp3-icon-double-caret-vertical"
+                  icon="double-caret-vertical"
+                >
+                  <svg
+                    data-icon="double-caret-vertical"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <desc>
+                      double-caret-vertical
+                    </desc>
+                    <path
+                      d="M5 7h6a1.003 1.003 0 0 0 .71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 0 0 5 7zm6 2H5a1.003 1.003 0 0 0-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0 0 11 9z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+              </div>
+            </div>
+          </div>
+          <div
+            class="bp3-form-group"
+          >
+            <label
+              class="bp3-label"
+            >
+              Max num segments to compact
+               
+              <span
+                class="bp3-text-muted"
+              />
+            </label>
+            <div
+              class="bp3-form-content"
+            >
+              <div
+                class="bp3-control-group bp3-fill bp3-numeric-input"
+              >
+                <div
+                  class="bp3-input-group"
+                >
+                  <input
+                    autocomplete="off"
+                    class="bp3-input"
+                    min="0"
+                    style="padding-right: 10px;"
+                    type="text"
+                    value=""
+                  />
+                </div>
+                <div
+                  class="bp3-button-group bp3-vertical bp3-fixed"
+                >
+                  <button
+                    class="bp3-button"
+                    type="button"
+                  >
+                    <span
+                      class="bp3-icon bp3-icon-chevron-up"
+                      icon="chevron-up"
+                    >
+                      <svg
+                        data-icon="chevron-up"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        width="16"
+                      >
+                        <desc>
+                          chevron-up
+                        </desc>
+                        <path
+                          d="M12.71 9.29l-4-4C8.53 5.11 8.28 5 8 5s-.53.11-.71.29l-4 4a1.003 1.003 0 0 0 1.42 1.42L8 7.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 0 0 .71-1.71z"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                  <button
+                    class="bp3-button"
+                    type="button"
+                  >
+                    <span
+                      class="bp3-icon bp3-icon-chevron-down"
+                      icon="chevron-down"
+                    >
+                      <svg
+                        data-icon="chevron-down"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        width="16"
+                      >
+                        <desc>
+                          chevron-down
+                        </desc>
+                        <path
+                          d="M12 5c-.28 0-.53.11-.71.29L8 8.59l-3.29-3.3a1.003 1.003 0 0 0-1.42 1.42l4 4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0 0 12 5z"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="bp3-form-group"
+          >
+            <label
+              class="bp3-label"
+            >
+              Skip offset from latest
+               
+              <span
+                class="bp3-text-muted"
+              />
+            </label>
+            <div
+              class="bp3-form-content"
+            >
+              <div
+                class="bp3-input-group"
+              >
+                <input
+                  class="bp3-input"
+                  style="padding-right: 10px;"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="bp3-form-group"
+          >
+            <label
+              class="bp3-label"
+            >
+              Target compaction size bytes
+               
+              <span
+                class="bp3-text-muted"
+              />
+            </label>
+            <div
+              class="bp3-form-content"
+            >
+              <div
+                class="bp3-control-group bp3-fill bp3-numeric-input"
+              >
+                <div
+                  class="bp3-input-group"
+                >
+                  <input
+                    autocomplete="off"
+                    class="bp3-input"
+                    min="0"
+                    style="padding-right: 10px;"
+                    type="text"
+                    value=""
+                  />
+                </div>
+                <div
+                  class="bp3-button-group bp3-vertical bp3-fixed"
+                >
+                  <button
+                    class="bp3-button"
+                    type="button"
+                  >
+                    <span
+                      class="bp3-icon bp3-icon-chevron-up"
+                      icon="chevron-up"
+                    >
+                      <svg
+                        data-icon="chevron-up"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        width="16"
+                      >
+                        <desc>
+                          chevron-up
+                        </desc>
+                        <path
+                          d="M12.71 9.29l-4-4C8.53 5.11 8.28 5 8 5s-.53.11-.71.29l-4 4a1.003 1.003 0 0 0 1.42 1.42L8 7.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 0 0 .71-1.71z"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                  <button
+                    class="bp3-button"
+                    type="button"
+                  >
+                    <span
+                      class="bp3-icon bp3-icon-chevron-down"
+                      icon="chevron-down"
+                    >
+                      <svg
+                        data-icon="chevron-down"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        width="16"
+                      >
+                        <desc>
+                          chevron-down
+                        </desc>
+                        <path
+                          d="M12 5c-.28 0-.53.11-.71.29L8 8.59l-3.29-3.3a1.003 1.003 0 0 0-1.42 1.42l4 4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0 0 12 5z"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="bp3-form-group"
+          >
+            <label
+              class="bp3-label"
+            >
+              Task context
+               
+              <span
+                class="bp3-text-muted"
+              />
+            </label>
+            <div
+              class="bp3-form-content"
+            >
+              <div
+                class=" ace_editor ace-tm"
+                id="ace-editor"
+                style="width: 100%; height: 8vh;"
+              >
+                <textarea
+                  autocapitalize="off"
+                  autocorrect="off"
+                  class="ace_text-input"
+                  spellcheck="false"
+                  style="opacity: 0;"
+                  wrap="off"
+                />
+                <div
+                  aria-hidden="true"
+                  class="ace_gutter"
+                  style="display: none;"
+                >
+                  <div
+                    class="ace_layer ace_gutter-layer ace_folding-enabled"
+                  />
+                  <div
+                    class="ace_gutter-active-line"
+                  />
+                </div>
+                <div
+                  class="ace_scroller"
+                >
+                  <div
+                    class="ace_content"
+                  >
+                    <div
+                      class="ace_layer ace_print-margin-layer"
+                    >
+                      <div
+                        class="ace_print-margin"
+                        style="left: 4px; visibility: hidden;"
+                      />
+                    </div>
+                    <div
+                      class="ace_layer ace_marker-layer"
+                    />
+                    <div
+                      class="ace_layer ace_text-layer"
+                      style="padding: 0px 4px;"
+                    />
+                    <div
+                      class="ace_layer ace_marker-layer"
+                    />
+                    <div
+                      class="ace_layer ace_cursor-layer ace_hidden-cursors"
+                    >
+                      <div
+                        class="ace_cursor"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="ace_scrollbar ace_scrollbar-v"
+                  style="display: none; width: 20px;"
+                >
+                  <div
+                    class="ace_scrollbar-inner"
+                    style="width: 20px;"
+                  />
+                </div>
+                <div
+                  class="ace_scrollbar ace_scrollbar-h"
+                  style="display: none; height: 20px;"
+                >
+                  <div
+                    class="ace_scrollbar-inner"
+                    style="height: 20px;"
+                  />
+                </div>
+                <div
+                  style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+                >
+                  <div
+                    style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+                  />
+                  <div
+                    style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+                  >
+                    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="bp3-form-group"
+          >
+            <label
+              class="bp3-label"
+            >
+              Task priority
+               
+              <span
+                class="bp3-text-muted"
+              />
+            </label>
+            <div
+              class="bp3-form-content"
+            >
+              <div
+                class="bp3-control-group bp3-fill bp3-numeric-input"
+              >
+                <div
+                  class="bp3-input-group"
+                >
+                  <input
+                    autocomplete="off"
+                    class="bp3-input"
+                    min="0"
+                    style="padding-right: 10px;"
+                    type="text"
+                    value=""
+                  />
+                </div>
+                <div
+                  class="bp3-button-group bp3-vertical bp3-fixed"
+                >
+                  <button
+                    class="bp3-button"
+                    type="button"
+                  >
+                    <span
+                      class="bp3-icon bp3-icon-chevron-up"
+                      icon="chevron-up"
+                    >
+                      <svg
+                        data-icon="chevron-up"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        width="16"
+                      >
+                        <desc>
+                          chevron-up
+                        </desc>
+                        <path
+                          d="M12.71 9.29l-4-4C8.53 5.11 8.28 5 8 5s-.53.11-.71.29l-4 4a1.003 1.003 0 0 0 1.42 1.42L8 7.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 0 0 .71-1.71z"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                  <button
+                    class="bp3-button"
+                    type="button"
+                  >
+                    <span
+                      class="bp3-icon bp3-icon-chevron-down"
+                      icon="chevron-down"
+                    >
+                      <svg
+                        data-icon="chevron-down"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        width="16"
+                      >
+                        <desc>
+                          chevron-down
+                        </desc>
+                        <path
+                          d="M12 5c-.28 0-.53.11-.71.29L8 8.59l-3.29-3.3a1.003 1.003 0 0 0-1.42 1.42l4 4c.18.18.43.29.71.29s.53-.11.71-.29l4-4A1.003 1.003 0 0 0 12 5z"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="bp3-form-group"
+          >
+            <label
+              class="bp3-label"
+            >
+              Tuning config
+               
+              <span
+                class="bp3-text-muted"
+              />
+            </label>
+            <div
+              class="bp3-form-content"
+            >
+              <div
+                class=" ace_editor ace-tm"
+                id="ace-editor"
+                style="width: 100%; height: 8vh;"
+              >
+                <textarea
+                  autocapitalize="off"
+                  autocorrect="off"
+                  class="ace_text-input"
+                  spellcheck="false"
+                  style="opacity: 0;"
+                  wrap="off"
+                />
+                <div
+                  aria-hidden="true"
+                  class="ace_gutter"
+                  style="display: none;"
+                >
+                  <div
+                    class="ace_layer ace_gutter-layer ace_folding-enabled"
+                  />
+                  <div
+                    class="ace_gutter-active-line"
+                  />
+                </div>
+                <div
+                  class="ace_scroller"
+                >
+                  <div
+                    class="ace_content"
+                  >
+                    <div
+                      class="ace_layer ace_print-margin-layer"
+                    >
+                      <div
+                        class="ace_print-margin"
+                        style="left: 4px; visibility: hidden;"
+                      />
+                    </div>
+                    <div
+                      class="ace_layer ace_marker-layer"
+                    />
+                    <div
+                      class="ace_layer ace_text-layer"
+                      style="padding: 0px 4px;"
+                    />
+                    <div
+                      class="ace_layer ace_marker-layer"
+                    />
+                    <div
+                      class="ace_layer ace_cursor-layer ace_hidden-cursors"
+                    >
+                      <div
+                        class="ace_cursor"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="ace_scrollbar ace_scrollbar-v"
+                  style="display: none; width: 20px;"
+                >
+                  <div
+                    class="ace_scrollbar-inner"
+                    style="width: 20px;"
+                  />
+                </div>
+                <div
+                  class="ace_scrollbar ace_scrollbar-h"
+                  style="display: none; height: 20px;"
+                >
+                  <div
+                    class="ace_scrollbar-inner"
+                    style="height: 20px;"
+                  />
+                </div>
+                <div
+                  style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+                >
+                  <div
+                    style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+                  />
+                  <div
+                    style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+                  >
+                    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="bp3-dialog-footer"
+        >
+          <div
+            class="bp3-dialog-footer-actions"
+          >
+            <button
+              class="bp3-button bp3-intent-danger"
+              type="button"
+            >
+              <span
+                class="bp3-button-text"
+              >
+                Delete
+              </span>
+            </button>
+            <button
+              class="bp3-button"
+              type="button"
+            >
+              <span
+                class="bp3-button-text"
+              >
+                Close
+              </span>
+            </button>
+            <button
+              class="bp3-button bp3-intent-primary"
+              type="button"
+            >
+              <span
+                class="bp3-button-text"
+              >
+                Submit
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

web-console/src/dialogs/compaction-dialog/compaction-dialog.spec.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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 { render } from 'react-testing-library';
+
+import {CompactionDialog} from './compaction-dialog';
+
+
+describe('describe compaction dialog', () => {
+  it('compaction dialog snapshot', () => {
+    const compactionDialog =
+      <CompactionDialog
+        onClose={() => null}
+        onSave={(config: any) => null}
+        onDelete={() => null}
+        datasource={'test'}
+        configData={'test'}
+      />;
+    const { container, getByText } = render(compactionDialog, { container: document.body });
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

web-console/src/dialogs/compaction-dialog/compaction-dialog.tsx

@@ -19,7 +19,7 @@
 import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
 import * as React from 'react';
 
-import { AutoForm } from '../components/auto-form';
+import { AutoForm } from '../../components/auto-form/auto-form';
 
 import './compaction-dialog.scss';
 

web-console/src/dialogs/coordinator-dynamic-config/__snapshots__/coordinator-dynamic-config.spec.tsx.snap

@@ -0,0 +1,123 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`describe coordinator dynamic config coordinator dynamic config snapshot 1`] = `
+<div
+  class="bp3-portal"
+>
+  <div
+    class="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container"
+  >
+    <div
+      class="bp3-overlay-backdrop bp3-overlay-appear bp3-overlay-appear-active"
+      tabindex="0"
+    />
+    <div
+      class="bp3-dialog-container bp3-overlay-content bp3-overlay-appear bp3-overlay-appear-active"
+      tabindex="0"
+    >
+      <div
+        class="bp3-dialog snitch-dialog coordinator-dynamic-config"
+      >
+        <div
+          class="bp3-dialog-header"
+        >
+          <h4
+            class="bp3-heading"
+          >
+            Coordinator dynamic config
+          </h4>
+          <button
+            aria-label="Close"
+            class="bp3-button bp3-minimal bp3-dialog-close-button"
+            type="button"
+          >
+            <span
+              class="bp3-icon bp3-icon-small-cross"
+              icon="small-cross"
+            >
+              <svg
+                data-icon="small-cross"
+                height="20"
+                viewBox="0 0 20 20"
+                width="20"
+              >
+                <desc>
+                  small-cross
+                </desc>
+                <path
+                  d="M11.41 10l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 0 0-1.71-.71L10 8.59l-3.29-3.3a1.003 1.003 0 0 0-1.42 1.42L8.59 10 5.3 13.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71l3.29-3.3 3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 0 0 .71-1.71L11.41 10z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+        <div
+          class="bp3-dialog-body"
+        >
+          <p>
+            Edit the coordinator dynamic configuration on the fly. For more information please refer to the 
+            <a
+              href="http://druid.io/docs/latest/configuration/index.html#dynamic-configuration"
+              target="_blank"
+            >
+              documentation
+            </a>
+            .
+          </p>
+          <div
+            class="auto-form"
+          />
+        </div>
+        <div
+          class="bp3-dialog-footer"
+        >
+          <div
+            class="bp3-dialog-footer-actions"
+          >
+            <button
+              class="bp3-button bp3-minimal left-align-button"
+              type="button"
+            >
+              <span
+                class="bp3-button-text"
+              >
+                History
+              </span>
+            </button>
+            <button
+              class="bp3-button bp3-intent-primary"
+              type="button"
+            >
+              <span
+                class="bp3-button-text"
+              >
+                Next
+              </span>
+              <span
+                class="bp3-icon bp3-icon-arrow-right"
+                icon="arrow-right"
+              >
+                <svg
+                  data-icon="arrow-right"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                >
+                  <desc>
+                    arrow-right
+                  </desc>
+                  <path
+                    d="M14.7 7.29l-5-5a.965.965 0 0 0-.71-.3 1.003 1.003 0 0 0-.71 1.71l3.29 3.29H1.99c-.55 0-1 .45-1 1s.45 1 1 1h9.59l-3.29 3.29a1.003 1.003 0 0 0 1.42 1.42l5-5c.18-.18.29-.43.29-.71s-.12-.52-.3-.7z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

web-console/src/dialogs/coordinator-dynamic-config/coordinator-dynamic-config.spec.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 { render } from 'react-testing-library';
+
+import {CoordinatorDynamicConfigDialog} from './coordinator-dynamic-config';
+
+
+describe('describe coordinator dynamic config', () => {
+  it('coordinator dynamic config snapshot', () => {
+    const coordinatorDynamicConfig =
+      <CoordinatorDynamicConfigDialog
+        onClose={() => null}
+      />;
+    const { container, getByText } = render(coordinatorDynamicConfig, { container: document.body });
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

web-console/src/dialogs/coordinator-dynamic-config/coordinator-dynamic-config.tsx

@@ -21,12 +21,11 @@ import { IconNames } from '@blueprintjs/icons';
 import axios from 'axios';
 import * as React from 'react';
 
-import { AutoForm } from '../components/auto-form';
+import { AutoForm } from '../../components/auto-form/auto-form';
-import { ExternalLink } from '../components/external-link';
+import { ExternalLink } from '../../components/external-link/external-link';
-import { AppToaster } from '../singletons/toaster';
+import { AppToaster } from '../../singletons/toaster';
-import { getDruidErrorMessage, QueryManager } from '../utils';
+import { getDruidErrorMessage, QueryManager } from '../../utils';
-
+import { SnitchDialog } from '../snitch-dialog/snitch-dialog';
-import { SnitchDialog } from './snitch-dialog';
 
 import './coordinator-dynamic-config.scss';
 

web-console/src/dialogs/history-dialog/__snapshots__/history-dialog.spec.tsx.snap

@@ -0,0 +1,132 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`describe history dialog history dialog snapshot 1`] = `
+<div
+  class="bp3-portal"
+>
+  <div
+    class="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container"
+  >
+    <div
+      class="bp3-overlay-backdrop bp3-overlay-appear bp3-overlay-appear-active"
+      tabindex="0"
+    />
+    <div
+      class="bp3-dialog-container bp3-overlay-content bp3-overlay-appear bp3-overlay-appear-active"
+      tabindex="0"
+    >
+      <div
+        class="bp3-dialog"
+      >
+        <div
+          class="history-record-container"
+        >
+          <span
+            class="history-dialog-title"
+          >
+            History
+          </span>
+          <div
+            class="history-record-entries"
+          >
+            <div
+              class="history-record-entry"
+            >
+              <div
+                class="bp3-card bp3-elevation-0"
+              >
+                <div
+                  class="history-record-title"
+                >
+                  <span
+                    class="history-record-title-change"
+                  >
+                    Change
+                  </span>
+                  <span />
+                </div>
+                <div
+                  class="bp3-divider"
+                />
+                <p />
+                <div
+                  class="json-collapse"
+                >
+                  <button
+                    class="bp3-button bp3-minimal"
+                    type="button"
+                  >
+                    <span
+                      class="bp3-button-text"
+                    >
+                      Payload
+                    </span>
+                  </button>
+                  <div>
+                    <div
+                      class="bp3-collapse"
+                    >
+                      <div
+                        aria-hidden="false"
+                        class="bp3-collapse-body"
+                        style="transform: translateY(-0px);"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="history-record-entry"
+            >
+              <div
+                class="bp3-card bp3-elevation-0"
+              >
+                <div
+                  class="history-record-title"
+                >
+                  <span
+                    class="history-record-title-change"
+                  >
+                    Change
+                  </span>
+                  <span />
+                </div>
+                <div
+                  class="bp3-divider"
+                />
+                <p />
+                <div
+                  class="json-collapse"
+                >
+                  <button
+                    class="bp3-button bp3-minimal"
+                    type="button"
+                  >
+                    <span
+                      class="bp3-button-text"
+                    >
+                      Payload
+                    </span>
+                  </button>
+                  <div>
+                    <div
+                      class="bp3-collapse"
+                    >
+                      <div
+                        aria-hidden="false"
+                        class="bp3-collapse-body"
+                        style="transform: translateY(-0px);"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

web-console/src/dialogs/history-dialog/history-dialog.spec.tsx

@@ -0,0 +1,36 @@
+/*
+ * 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 { render } from 'react-testing-library';
+
+import {HistoryDialog} from './history-dialog';
+
+
+describe('describe history dialog', () => {
+  it('history dialog snapshot', () => {
+    const historyDialog =
+      <HistoryDialog
+        historyRecords={[{auditTime: 'test', auditInfo: 'test', payload: JSON.stringify({ name : 'test' })}, {auditTime: 'test', auditInfo: 'test',  payload: JSON.stringify({ name : 'test' })}]}
+        isOpen={true}
+      />;
+    const { container, getByText } = render(historyDialog, { container: document.body });
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

web-console/src/dialogs/history-dialog/history-dialog.tsx

@@ -19,7 +19,7 @@
 import {Card, Dialog, Divider, IDialogProps} from '@blueprintjs/core';
 import * as React from 'react';
 
-import { JSONCollapse } from '../components/json-collapse';
+import { JSONCollapse } from '../../components/json-collapse/json-collapse';
 
 import './history-dialog.scss';
 

web-console/src/dialogs/index.ts

@@ -0,0 +1,31 @@
+/*
+ * 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.
+ */
+export * from './about-dialog/about-dialog';
+export * from './async-action-dialog/async-action-dialog';
+export * from './compaction-dialog/compaction-dialog';
+export * from './coordinator-dynamic-config/coordinator-dynamic-config';
+export * from './history-dialog/history-dialog';
+export * from './lookup-edit-dialog/lookup-edit-dialog';
+export * from './overlord-dynamic-config/overlord-dynamic-config';
+export * from './query-plan-dialog/query-plan-dialog';
+export * from './retention-dialog/retention-dialog';
+export * from './snitch-dialog/snitch-dialog';
+export * from './spec-dialog/spec-dialog';
+export * from './supervisor-table-action-dialog/supervisor-table-action-dialog';
+export * from './table-action-dialog/table-action-dialog';
+export * from './task-table-action-dialog/task-table-action-dialog';

web-console/src/dialogs/lookup-edit-dialog/__snapshots__/lookup-edit-dialog.spec.tsx.snap

@@ -0,0 +1,356 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`describe lookup edit dialog lookup edit dialog snapshot 1`] = `
+<div
+  class="bp3-portal"
+>
+  <div
+    class="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container"
+  >
+    <div
+      class="bp3-overlay-backdrop bp3-overlay-appear bp3-overlay-appear-active"
+      tabindex="0"
+    />
+    <div
+      class="bp3-dialog-container bp3-overlay-content bp3-overlay-appear bp3-overlay-appear-active"
+      tabindex="0"
+    >
+      <div
+        class="bp3-dialog lookup-edit-dialog"
+      >
+        <div
+          class="bp3-dialog-header"
+        >
+          <h4
+            class="bp3-heading"
+          >
+            Add lookup
+          </h4>
+          <button
+            aria-label="Close"
+            class="bp3-button bp3-minimal bp3-dialog-close-button"
+            type="button"
+          >
+            <span
+              class="bp3-icon bp3-icon-small-cross"
+              icon="small-cross"
+            >
+              <svg
+                data-icon="small-cross"
+                height="20"
+                viewBox="0 0 20 20"
+                width="20"
+              >
+                <desc>
+                  small-cross
+                </desc>
+                <path
+                  d="M11.41 10l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 0 0-1.71-.71L10 8.59l-3.29-3.3a1.003 1.003 0 0 0-1.42 1.42L8.59 10 5.3 13.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71l3.29-3.3 3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 0 0 .71-1.71L11.41 10z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+        <div
+          class="bp3-form-group lookup-label"
+        >
+          <label
+            class="bp3-label"
+          >
+            Name: 
+             
+            <span
+              class="bp3-text-muted"
+            />
+          </label>
+          <div
+            class="bp3-form-content"
+          >
+            <div
+              class="bp3-input-group"
+            >
+              <input
+                class="bp3-input"
+                placeholder="Enter the lookup name"
+                style="padding-right: 10px;"
+                type="text"
+                value="test"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          class="bp3-form-group lookup-label"
+        >
+          <label
+            class="bp3-label"
+          >
+            Tier:
+             
+            <span
+              class="bp3-text-muted"
+            />
+          </label>
+          <div
+            class="bp3-form-content"
+          >
+            <div
+              class="bp3-html-select"
+            >
+              <select>
+                <option
+                  value="a"
+                >
+                  a
+                </option>
+                <option
+                  value="b"
+                >
+                  b
+                </option>
+                <option
+                  value="c"
+                >
+                  c
+                </option>
+                <option
+                  value="d"
+                >
+                  d
+                </option>
+                <option
+                  value="e"
+                >
+                  e
+                </option>
+                <option
+                  value="f"
+                >
+                  f
+                </option>
+                <option
+                  value="g"
+                >
+                  g
+                </option>
+                <option
+                  value="h"
+                >
+                  h
+                </option>
+                <option
+                  value="i"
+                >
+                  i
+                </option>
+                <option
+                  value="j"
+                >
+                  j
+                </option>
+              </select>
+              <span
+                class="bp3-icon bp3-icon-double-caret-vertical"
+                icon="double-caret-vertical"
+              >
+                <svg
+                  data-icon="double-caret-vertical"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                >
+                  <desc>
+                    double-caret-vertical
+                  </desc>
+                  <path
+                    d="M5 7h6a1.003 1.003 0 0 0 .71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 0 0 5 7zm6 2H5a1.003 1.003 0 0 0-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0 0 11 9z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </div>
+          </div>
+        </div>
+        <div
+          class="bp3-form-group lookup-label"
+        >
+          <label
+            class="bp3-label"
+          >
+            Version:
+             
+            <span
+              class="bp3-text-muted"
+            />
+          </label>
+          <div
+            class="bp3-form-content"
+          >
+            <div
+              class="bp3-input-group"
+            >
+              <input
+                class="bp3-input"
+                placeholder="Enter the lookup version"
+                style="padding-right: 0px;"
+                type="text"
+                value="test"
+              />
+              <span
+                class="bp3-input-action"
+              >
+                <button
+                  class="bp3-button bp3-minimal"
+                  type="button"
+                >
+                  <span
+                    class="bp3-button-text"
+                  >
+                    Use ISO as version
+                  </span>
+                </button>
+              </span>
+            </div>
+          </div>
+        </div>
+        <div
+          class="bp3-form-group lookup-label"
+        >
+          <label
+            class="bp3-label"
+          >
+            Spec:
+             
+            <span
+              class="bp3-text-muted"
+            />
+          </label>
+          <div
+            class="bp3-form-content"
+          />
+        </div>
+        <div
+          class=" ace_editor ace-tm lookup-edit-dialog-textarea"
+          id="brace-editor"
+          style="width: auto; height: 40vh;"
+        >
+          <textarea
+            autocapitalize="off"
+            autocorrect="off"
+            class="ace_text-input"
+            spellcheck="false"
+            style="opacity: 0;"
+            wrap="off"
+          />
+          <div
+            aria-hidden="true"
+            class="ace_gutter"
+            style="display: none;"
+          >
+            <div
+              class="ace_layer ace_gutter-layer ace_folding-enabled"
+            />
+            <div
+              class="ace_gutter-active-line"
+            />
+          </div>
+          <div
+            class="ace_scroller"
+          >
+            <div
+              class="ace_content"
+            >
+              <div
+                class="ace_layer ace_print-margin-layer"
+              >
+                <div
+                  class="ace_print-margin"
+                  style="left: 4px; visibility: hidden;"
+                />
+              </div>
+              <div
+                class="ace_layer ace_marker-layer"
+              />
+              <div
+                class="ace_layer ace_text-layer"
+                style="padding: 0px 4px;"
+              />
+              <div
+                class="ace_layer ace_marker-layer"
+              />
+              <div
+                class="ace_layer ace_cursor-layer ace_hidden-cursors"
+              >
+                <div
+                  class="ace_cursor"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="ace_scrollbar ace_scrollbar-v"
+            style="display: none; width: 20px;"
+          >
+            <div
+              class="ace_scrollbar-inner"
+              style="width: 20px;"
+            />
+          </div>
+          <div
+            class="ace_scrollbar ace_scrollbar-h"
+            style="display: none; height: 20px;"
+          >
+            <div
+              class="ace_scrollbar-inner"
+              style="height: 20px;"
+            />
+          </div>
+          <div
+            style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+          >
+            <div
+              style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+            />
+            <div
+              style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+            >
+              XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+            </div>
+          </div>
+        </div>
+        <div
+          class="bp3-dialog-footer"
+        >
+          <div
+            class="bp3-dialog-footer-actions"
+          >
+            <button
+              class="bp3-button"
+              type="button"
+            >
+              <span
+                class="bp3-button-text"
+              >
+                Close
+              </span>
+            </button>
+            <button
+              class="bp3-button bp3-disabled bp3-intent-primary"
+              disabled=""
+              tabindex="-1"
+              type="button"
+            >
+              <span
+                class="bp3-button-text"
+              >
+                Submit
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,44 @@
+/*
+ * 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 { render } from 'react-testing-library';
+
+import {LookupEditDialog} from './lookup-edit-dialog';
+
+
+describe('describe lookup edit dialog', () => {
+  it('lookup edit dialog snapshot', () => {
+    const lookupEditDialog =
+      <LookupEditDialog
+        isOpen={true}
+        onClose={() => null}
+        onSubmit={() => null}
+        onChange={() => null}
+        lookupName={'test'}
+        lookupTier={'test'}
+        lookupVersion={'test'}
+        lookupSpec={'test'}
+        isEdit={false}
+        allLookupTiers={['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']}
+      />
+    const { container, getByText } = render(lookupEditDialog, { container: document.body });
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

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

@@ -20,7 +20,7 @@ import { Button, Classes, Dialog, FormGroup, HTMLSelect, InputGroup, Intent } fr
 import * as React from 'react';
 import AceEditor from 'react-ace';
 
-import { validJson } from '../utils';
+import { validJson } from '../../utils';
 
 import './lookup-edit-dialog.scss';
 

web-console/src/dialogs/overlord-dynamic-config/__snapshots__/overload-dynamic-config.spec.tsx.snap

@@ -0,0 +1,356 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`describe overload dynamic config overload dynamic config snapshot 1`] = `
+<div
+  class="bp3-portal"
+>
+  <div
+    class="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container"
+  >
+    <div
+      class="bp3-overlay-backdrop bp3-overlay-appear bp3-overlay-appear-active"
+      tabindex="0"
+    />
+    <div
+      class="bp3-dialog-container bp3-overlay-content bp3-overlay-appear bp3-overlay-appear-active"
+      tabindex="0"
+    >
+      <div
+        class="bp3-dialog lookup-edit-dialog"
+      >
+        <div
+          class="bp3-dialog-header"
+        >
+          <h4
+            class="bp3-heading"
+          >
+            Add lookup
+          </h4>
+          <button
+            aria-label="Close"
+            class="bp3-button bp3-minimal bp3-dialog-close-button"
+            type="button"
+          >
+            <span
+              class="bp3-icon bp3-icon-small-cross"
+              icon="small-cross"
+            >
+              <svg
+                data-icon="small-cross"
+                height="20"
+                viewBox="0 0 20 20"
+                width="20"
+              >
+                <desc>
+                  small-cross
+                </desc>
+                <path
+                  d="M11.41 10l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 0 0-1.71-.71L10 8.59l-3.29-3.3a1.003 1.003 0 0 0-1.42 1.42L8.59 10 5.3 13.29c-.19.18-.3.43-.3.71a1.003 1.003 0 0 0 1.71.71l3.29-3.3 3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 0 0 .71-1.71L11.41 10z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+        <div
+          class="bp3-form-group lookup-label"
+        >
+          <label
+            class="bp3-label"
+          >
+            Name: 
+             
+            <span
+              class="bp3-text-muted"
+            />
+          </label>
+          <div
+            class="bp3-form-content"
+          >
+            <div
+              class="bp3-input-group"
+            >
+              <input
+                class="bp3-input"
+                placeholder="Enter the lookup name"
+                style="padding-right: 10px;"
+                type="text"
+                value="test"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          class="bp3-form-group lookup-label"
+        >
+          <label
+            class="bp3-label"
+          >
+            Tier:
+             
+            <span
+              class="bp3-text-muted"
+            />
+          </label>
+          <div
+            class="bp3-form-content"
+          >
+            <div
+              class="bp3-html-select"
+            >
+              <select>
+                <option
+                  value="a"
+                >
+                  a
+                </option>
+                <option
+                  value="b"
+                >
+                  b
+                </option>
+                <option
+                  value="c"
+                >
+                  c
+                </option>
+                <option
+                  value="d"
+                >
+                  d
+                </option>
+                <option
+                  value="e"
+                >
+                  e
+                </option>
+                <option
+                  value="f"
+                >
+                  f
+                </option>
+                <option
+                  value="g"
+                >
+                  g
+                </option>
+                <option
+                  value="h"
+                >
+                  h
+                </option>
+                <option
+                  value="i"
+                >
+                  i
+                </option>
+                <option
+                  value="j"
+                >
+                  j
+                </option>
+              </select>
+              <span
+                class="bp3-icon bp3-icon-double-caret-vertical"
+                icon="double-caret-vertical"
+              >
+                <svg
+                  data-icon="double-caret-vertical"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                >
+                  <desc>
+                    double-caret-vertical
+                  </desc>
+                  <path
+                    d="M5 7h6a1.003 1.003 0 0 0 .71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 0 0 5 7zm6 2H5a1.003 1.003 0 0 0-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0 0 11 9z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </div>
+          </div>
+        </div>
+        <div
+          class="bp3-form-group lookup-label"
+        >
+          <label
+            class="bp3-label"
+          >
+            Version:
+             
+            <span
+              class="bp3-text-muted"
+            />
+          </label>
+          <div
+            class="bp3-form-content"
+          >
+            <div
+              class="bp3-input-group"
+            >
+              <input
+                class="bp3-input"
+                placeholder="Enter the lookup version"
+                style="padding-right: 0px;"
+                type="text"
+                value="test"
+              />
+              <span
+                class="bp3-input-action"
+              >
+                <button
+                  class="bp3-button bp3-minimal"
+                  type="button"
+                >
+                  <span
+                    class="bp3-button-text"
+                  >
+                    Use ISO as version
+                  </span>
+                </button>
+              </span>
+            </div>
+          </div>
+        </div>
+        <div
+          class="bp3-form-group lookup-label"
+        >
+          <label
+            class="bp3-label"
+          >
+            Spec:
+             
+            <span
+              class="bp3-text-muted"
+            />
+          </label>
+          <div
+            class="bp3-form-content"
+          />
+        </div>
+        <div
+          class=" ace_editor ace-tm lookup-edit-dialog-textarea"
+          id="brace-editor"
+          style="width: auto; height: 40vh;"
+        >
+          <textarea
+            autocapitalize="off"
+            autocorrect="off"
+            class="ace_text-input"
+            spellcheck="false"
+            style="opacity: 0;"
+            wrap="off"
+          />
+          <div
+            aria-hidden="true"
+            class="ace_gutter"
+            style="display: none;"
+          >
+            <div
+              class="ace_layer ace_gutter-layer ace_folding-enabled"
+            />
+            <div
+              class="ace_gutter-active-line"
+            />
+          </div>
+          <div
+            class="ace_scroller"
+          >
+            <div
+              class="ace_content"
+            >
+              <div
+                class="ace_layer ace_print-margin-layer"
+              >
+                <div
+                  class="ace_print-margin"
+                  style="left: 4px; visibility: hidden;"
+                />
+              </div>
+              <div
+                class="ace_layer ace_marker-layer"
+              />
+              <div
+                class="ace_layer ace_text-layer"
+                style="padding: 0px 4px;"
+              />
+              <div
+                class="ace_layer ace_marker-layer"
+              />
+              <div
+                class="ace_layer ace_cursor-layer ace_hidden-cursors"
+              >
+                <div
+                  class="ace_cursor"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="ace_scrollbar ace_scrollbar-v"
+            style="display: none; width: 20px;"
+          >
+            <div
+              class="ace_scrollbar-inner"
+              style="width: 20px;"
+            />
+          </div>
+          <div
+            class="ace_scrollbar ace_scrollbar-h"
+            style="display: none; height: 20px;"
+          >
+            <div
+              class="ace_scrollbar-inner"
+              style="height: 20px;"
+            />
+          </div>
+          <div
+            style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+          >
+            <div
+              style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+            />
+            <div
+              style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+            >
+              XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+            </div>
+          </div>
+        </div>
+        <div
+          class="bp3-dialog-footer"
+        >
+          <div
+            class="bp3-dialog-footer-actions"
+          >
+            <button
+              class="bp3-button"
+              type="button"
+            >
+              <span
+                class="bp3-button-text"
+              >
+                Close
+              </span>
+            </button>
+            <button
+              class="bp3-button bp3-disabled bp3-intent-primary"
+              disabled=""
+              tabindex="-1"
+              type="button"
+            >
+              <span
+                class="bp3-button-text"
+              >
+                Submit
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

web-console/src/dialogs/overlord-dynamic-config/overload-dynamic-config.spec.tsx

@@ -0,0 +1,43 @@
+/*
+ * 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 { render } from 'react-testing-library';
+
+import {LookupEditDialog} from '..';
+
+describe('describe overload dynamic config', () => {
+  it('overload dynamic config snapshot', () => {
+    const lookupEditDialog =
+      <LookupEditDialog
+        isOpen={true}
+        onClose={() => null}
+        onSubmit={() => null}
+        onChange={() => null}
+        lookupName={'test'}
+        lookupTier={'test'}
+        lookupVersion={'test'}
+        lookupSpec={'test'}
+        isEdit={false}
+        allLookupTiers={['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']}
+      />;
+    const { container, getByText } = render(lookupEditDialog, { container: document.body });
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});