diff --git a/licenses.yaml b/licenses.yaml
index 226062861c16..6c226d224255 100644
--- a/licenses.yaml
+++ b/licenses.yaml
@@ -5317,7 +5317,7 @@ license_category: binary
 module: web-console
 license_name: MIT License
 copyright: Matt Zabriskie
-version: 0.21.4
+version: 0.26.1
 license_file_path: licenses/bin/axios.MIT
 
 ---
@@ -5666,7 +5666,7 @@ license_category: binary
 module: web-console
 license_name: Apache License version 2.0
 copyright: Imply Data
-version: 0.14.10
+version: 0.14.24
 
 ---
 
@@ -6536,4 +6536,14 @@ license_name: ISC License
 copyright: Eemeli Aro
 version: 1.10.2
 license_file_path: licenses/bin/yaml.ISC
+
+---
+
+name: "zustand"
+license_category: binary
+module: web-console
+license_name: MIT License
+copyright: Paul Henschel
+version: 3.7.2
+license_file_path: licenses/bin/zustand.MIT
 # Web console modules end
diff --git a/licenses/bin/zustand.MIT b/licenses/bin/zustand.MIT
new file mode 100644
index 000000000000..a2c2649deec2
--- /dev/null
+++ b/licenses/bin/zustand.MIT
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Paul Henschel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/web-console/e2e-tests/component/datasources/overview.ts b/web-console/e2e-tests/component/datasources/overview.ts
index fb525811122e..1fa83c3672f7 100644
--- a/web-console/e2e-tests/component/datasources/overview.ts
+++ b/web-console/e2e-tests/component/datasources/overview.ts
@@ -141,7 +141,7 @@ export class DatasourcesOverview {
   }
 
   private async clickMoreButton(options: any): Promise<void> {
-    await this.page.click('//button[span[@icon="more"]]', options);
+    await this.page.click('.more-button button', options);
     await this.waitForPopupMenu();
   }
 }
diff --git a/web-console/e2e-tests/component/ingestion/overview.ts b/web-console/e2e-tests/component/ingestion/overview.ts
index 7c3b8cb3d7a6..3d1a7f2997b0 100644
--- a/web-console/e2e-tests/component/ingestion/overview.ts
+++ b/web-console/e2e-tests/component/ingestion/overview.ts
@@ -30,10 +30,10 @@ enum TaskColumn {
   GROUP_ID,
   TYPE,
   DATASOURCE,
-  LOCATION,
-  CREATED_TIME,
   STATUS,
+  CREATED_TIME,
   DURATION,
+  LOCATION,
 }
 
 /**
diff --git a/web-console/e2e-tests/component/load-data/data-loader.ts b/web-console/e2e-tests/component/load-data/data-loader.ts
index 7bc1837f6103..37586a22bb7f 100644
--- a/web-console/e2e-tests/component/load-data/data-loader.ts
+++ b/web-console/e2e-tests/component/load-data/data-loader.ts
@@ -34,7 +34,7 @@ export class DataLoader {
 
   constructor(props: DataLoaderProps) {
     Object.assign(this, props);
-    this.baseUrl = props.unifiedConsoleUrl + '#load-data';
+    this.baseUrl = props.unifiedConsoleUrl + '#data-loader';
   }
 
   /**
diff --git a/web-console/e2e-tests/component/query/overview.ts b/web-console/e2e-tests/component/query/overview.ts
index 6feeebfa9c05..b12909c81527 100644
--- a/web-console/e2e-tests/component/query/overview.ts
+++ b/web-console/e2e-tests/component/query/overview.ts
@@ -18,7 +18,7 @@
 
 import * as playwright from 'playwright-chromium';
 
-import { clickButton, clickText, setInput } from '../../util/playwright';
+import { clickButton, clickText } from '../../util/playwright';
 import { extractTable } from '../../util/table';
 
 /**
@@ -37,8 +37,9 @@ export class QueryOverview {
     await this.page.goto(this.baseUrl);
     await this.page.reload({ waitUntil: 'networkidle' });
 
-    const input = await this.page.$('div.query-input textarea');
-    await setInput(input!, query);
+    const input = await this.page.waitForSelector('div.query-input textarea');
+    await input.fill(query);
+
     await clickButton(this.page, 'Run');
     await this.page.waitForSelector('div.query-info');
 
@@ -49,10 +50,8 @@ export class QueryOverview {
     await this.page.goto(this.baseUrl);
     await this.page.reload({ waitUntil: 'networkidle' });
 
-    await this.page.waitForSelector('div.query-input textarea');
-    const input = await this.page.$('div.query-input textarea');
-
-    await setInput(input!, query);
+    const input = await this.page.waitForSelector('div.query-input textarea');
+    await input.fill(query);
 
     await Promise.all([
       this.page.waitForRequest(
diff --git a/web-console/e2e-tests/component/workbench/overview.ts b/web-console/e2e-tests/component/workbench/overview.ts
new file mode 100644
index 000000000000..5447daf8f8f2
--- /dev/null
+++ b/web-console/e2e-tests/component/workbench/overview.ts
@@ -0,0 +1,47 @@
+/*
+ * 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 playwright from 'playwright-chromium';
+
+import { clickButton } from '../../util/playwright';
+import { extractTable } from '../../util/table';
+
+/**
+ * Represents the workbench tab.
+ */
+export class WorkbenchOverview {
+  private readonly page: playwright.Page;
+  private readonly baseUrl: string;
+
+  constructor(page: playwright.Page, unifiedConsoleUrl: string) {
+    this.page = page;
+    this.baseUrl = unifiedConsoleUrl + '#workbench';
+  }
+
+  async runQuery(query: string): Promise<string[][]> {
+    await this.page.goto(this.baseUrl);
+    await this.page.reload({ waitUntil: 'networkidle' });
+
+    const input = await this.page.waitForSelector('div.flexible-query-input textarea');
+    await input.fill(query);
+    await clickButton(this.page, 'Run');
+    await this.page.waitForSelector('div.result-table-pane', { timeout: 120000 });
+
+    return await extractTable(this.page, 'div.result-table-pane div.rt-tr-group', 'div.rt-td');
+  }
+}
diff --git a/web-console/e2e-tests/multi-stage-query.spec.ts b/web-console/e2e-tests/multi-stage-query.spec.ts
new file mode 100644
index 000000000000..2766c5c8ffe2
--- /dev/null
+++ b/web-console/e2e-tests/multi-stage-query.spec.ts
@@ -0,0 +1,72 @@
+/*
+ * 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 playwright from 'playwright-chromium';
+
+import { WorkbenchOverview } from './component/workbench/overview';
+import { saveScreenshotIfError } from './util/debug';
+import { DRUID_EXAMPLES_QUICKSTART_TUTORIAL_DIR, UNIFIED_CONSOLE_URL } from './util/druid';
+import { createBrowser, createPage } from './util/playwright';
+import { waitTillWebConsoleReady } from './util/setup';
+
+jest.setTimeout(5 * 60 * 1000);
+
+describe('Multi-stage query', () => {
+  let browser: playwright.Browser;
+  let page: playwright.Page;
+
+  beforeAll(async () => {
+    await waitTillWebConsoleReady();
+    browser = await createBrowser();
+  });
+
+  beforeEach(async () => {
+    page = await createPage(browser);
+  });
+
+  afterAll(async () => {
+    await browser.close();
+  });
+
+  it('runs a query that reads external data', async () => {
+    await saveScreenshotIfError('multi-stage-query', page, async () => {
+      const workbench = new WorkbenchOverview(page, UNIFIED_CONSOLE_URL);
+      const results = await workbench.runQuery(`WITH ext AS (SELECT *
+FROM TABLE(
+  EXTERN(
+    '{"type":"local","filter":"wikiticker-2015-09-12-sampled.json.gz","baseDir":${JSON.stringify(
+      DRUID_EXAMPLES_QUICKSTART_TUTORIAL_DIR,
+    )}}',
+    '{"type":"json"}',
+    '[{"name":"channel","type":"string"}]'
+  )
+))
+SELECT
+  channel,
+  CAST(COUNT(*) AS VARCHAR) AS "CountString"
+FROM ext
+GROUP BY 1
+ORDER BY COUNT(*) DESC
+LIMIT 10`);
+      expect(results).toBeDefined();
+      expect(results.length).toBe(10);
+      expect(results[0]).toStrictEqual(['#en.wikipedia', '11549']);
+      expect(results[1]).toStrictEqual(['#vi.wikipedia', '9747']);
+    });
+  });
+});
diff --git a/web-console/lib/keywords.js b/web-console/lib/keywords.js
index accae44e4cf2..bf30e3578efd 100644
--- a/web-console/lib/keywords.js
+++ b/web-console/lib/keywords.js
@@ -54,6 +54,12 @@ exports.SQL_KEYWORDS = [
   'ROWS',
   'ONLY',
   'VALUES',
+  'PARTITIONED BY',
+  'CLUSTERED BY',
+  'TIME',
+  'INSERT INTO',
+  'REPLACE INTO',
+  'OVERWRITE',
 ];
 
 exports.SQL_EXPRESSION_PARTS = [
diff --git a/web-console/lib/sql-docs.d.ts b/web-console/lib/sql-docs.d.ts
index ce9105cde503..a5af23211d70 100644
--- a/web-console/lib/sql-docs.d.ts
+++ b/web-console/lib/sql-docs.d.ts
@@ -16,5 +16,5 @@
  * limitations under the License.
  */
 
-export const SQL_DATA_TYPES: [name: string, runtime: string, description: string][];
+export const SQL_DATA_TYPES: Record<string, [runtime: string, description: string][]>;
 export const SQL_FUNCTIONS: Record<string, [args: string, description: string][]>;
diff --git a/web-console/package-lock.json b/web-console/package-lock.json
index aa9e9e8d3924..649906dc25eb 100644
--- a/web-console/package-lock.json
+++ b/web-console/package-lock.json
@@ -5262,16 +5262,6 @@
       "integrity": "sha512-wBlsw+8n21e6eTd4yVv8YD/E3xq0O6nNnJIquutAsFGE7EyMKz7W6RNT6BRu1SmdgmlCZ9tb0X+j+D6HGr8pZw==",
       "dev": true
     },
-    "@types/yauzl": {
-      "version": "2.9.2",
-      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.9.2.tgz",
-      "integrity": "sha512-8uALY5LTvSuHgloDVUvWP3pIauILm+8/0pDMokuDYIoNsOkSwd5AiHBTSEJjKTDcZr5z8UpgOWZkxBF4iJftoA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "@types/node": "*"
-      }
-    },
     "@typescript-eslint/eslint-plugin": {
       "version": "5.11.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.11.0.tgz",
@@ -6465,11 +6455,18 @@
       "dev": true
     },
     "axios": {
-      "version": "0.21.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
-      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "version": "0.26.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz",
+      "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==",
       "requires": {
-        "follow-redirects": "^1.14.0"
+        "follow-redirects": "^1.14.8"
+      },
+      "dependencies": {
+        "follow-redirects": {
+          "version": "1.15.1",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz",
+          "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA=="
+        }
       }
     },
     "babel-jest": {
@@ -7003,12 +7000,6 @@
         "node-int64": "^0.4.0"
       }
     },
-    "buffer-crc32": {
-      "version": "0.2.13",
-      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
-      "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=",
-      "dev": true
-    },
     "buffer-from": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
@@ -8469,11 +8460,11 @@
       }
     },
     "druid-query-toolkit": {
-      "version": "0.14.10",
-      "resolved": "https://registry.npmjs.org/druid-query-toolkit/-/druid-query-toolkit-0.14.10.tgz",
-      "integrity": "sha512-Y720YxnT3EmqtE/x1QkrkEiomn5TdVArxI3+gdLRH8FYMRedpSPe2nkQVNYma9b7Lww/rzk4Q+a8mNWQ1YH9oQ==",
+      "version": "0.14.24",
+      "resolved": "https://registry.npmjs.org/druid-query-toolkit/-/druid-query-toolkit-0.14.24.tgz",
+      "integrity": "sha512-NBV9prXllZiiYLCfD/k5UmJZg7EU7aqsQPIfTYiYgl9XY4QheY4IO8c5mD7lW8qPpS2qEr4mM9CXjGPPZTQrmw==",
       "requires": {
-        "tslib": "^2.2.0"
+        "tslib": "^2.3.1"
       }
     },
     "duplexer": {
@@ -10121,44 +10112,6 @@
         }
       }
     },
-    "extract-zip": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
-      "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
-      "dev": true,
-      "requires": {
-        "@types/yauzl": "^2.9.1",
-        "debug": "^4.1.1",
-        "get-stream": "^5.1.0",
-        "yauzl": "^2.10.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "4.3.3",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
-          "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
-          "dev": true,
-          "requires": {
-            "ms": "2.1.2"
-          }
-        },
-        "get-stream": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
-          "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
-          "dev": true,
-          "requires": {
-            "pump": "^3.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
-        }
-      }
-    },
     "extsprintf": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
@@ -10290,15 +10243,6 @@
         "bser": "2.1.1"
       }
     },
-    "fd-slicer": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
-      "integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=",
-      "dev": true,
-      "requires": {
-        "pend": "~1.2.0"
-      }
-    },
     "file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -14986,12 +14930,6 @@
         }
       }
     },
-    "jpeg-js": {
-      "version": "0.4.3",
-      "resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.4.3.tgz",
-      "integrity": "sha512-ru1HWKek8octvUHFHvE5ZzQ1yAsJmIvRdGWvSoKV52XKyuyYA437QWDttXT8eZXDSbuMpHlLzPDZUPd6idIz+Q==",
-      "dev": true
-    },
     "js-base64": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.2.tgz",
@@ -17004,12 +16942,6 @@
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
     },
-    "pend": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
-      "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
-      "dev": true
-    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -17095,67 +17027,19 @@
       }
     },
     "playwright-chromium": {
-      "version": "1.18.1",
-      "resolved": "https://registry.npmjs.org/playwright-chromium/-/playwright-chromium-1.18.1.tgz",
-      "integrity": "sha512-DHAOdzZhhu4pMe9yg2zL49JSGXLHTO+DL76duukoy807o+ccu1tEbqyUId46ogLYk7rOjblVK6o7YG/vyVCasQ==",
+      "version": "1.25.0",
+      "resolved": "https://registry.npmjs.org/playwright-chromium/-/playwright-chromium-1.25.0.tgz",
+      "integrity": "sha512-FH9ho3noAWVStCJx4XW78+D8QW0A99WDp53DDkYeVdEpJqCmAIKHCSE6dl5XtaDKrZPYC1ZG5hGXQh1K5H/p+g==",
       "dev": true,
       "requires": {
-        "playwright-core": "=1.18.1"
+        "playwright-core": "1.25.0"
       },
       "dependencies": {
-        "commander": {
-          "version": "8.3.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
-          "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
-          "dev": true
-        },
-        "debug": {
-          "version": "4.3.3",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
-          "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
-          "dev": true,
-          "requires": {
-            "ms": "2.1.2"
-          }
-        },
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
-        },
         "playwright-core": {
-          "version": "1.18.1",
-          "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.18.1.tgz",
-          "integrity": "sha512-NALGl8R1GHzGLlhUApmpmfh6M1rrrPcDTygWvhTbprxwGB9qd/j9DRwyn4HTQcUB6o0/VOpo46fH9ez3+D/Rog==",
-          "dev": true,
-          "requires": {
-            "commander": "^8.2.0",
-            "debug": "^4.1.1",
-            "extract-zip": "^2.0.1",
-            "https-proxy-agent": "^5.0.0",
-            "jpeg-js": "^0.4.2",
-            "mime": "^2.4.6",
-            "pngjs": "^5.0.0",
-            "progress": "^2.0.3",
-            "proper-lockfile": "^4.1.1",
-            "proxy-from-env": "^1.1.0",
-            "rimraf": "^3.0.2",
-            "socks-proxy-agent": "^6.1.0",
-            "stack-utils": "^2.0.3",
-            "ws": "^7.4.6",
-            "yauzl": "^2.10.0",
-            "yazl": "^2.5.1"
-          }
-        },
-        "rimraf": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-          "dev": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
+          "version": "1.25.0",
+          "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.25.0.tgz",
+          "integrity": "sha512-kZ3Jwaf3wlu0GgU0nB8UMQ+mXFTqBIFz9h1svTlNduNKjnbPXFxw7mJanLVjqxHJRn62uBfmgBj93YHidk2N5Q==",
+          "dev": true
         }
       }
     },
@@ -17165,12 +17049,6 @@
       "integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==",
       "dev": true
     },
-    "pngjs": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
-      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
-      "dev": true
-    },
     "popper.js": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
@@ -18791,12 +18669,6 @@
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
       "dev": true
     },
-    "progress": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
-      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
-      "dev": true
-    },
     "prompts": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
@@ -18828,25 +18700,6 @@
         "reflect.ownkeys": "^0.2.0"
       }
     },
-    "proper-lockfile": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/proper-lockfile/-/proper-lockfile-4.1.2.tgz",
-      "integrity": "sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.2.4",
-        "retry": "^0.12.0",
-        "signal-exit": "^3.0.2"
-      },
-      "dependencies": {
-        "graceful-fs": {
-          "version": "4.2.9",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.9.tgz",
-          "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==",
-          "dev": true
-        }
-      }
-    },
     "proxy-addr": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -18857,12 +18710,6 @@
         "ipaddr.js": "1.9.1"
       }
     },
-    "proxy-from-env": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-      "dev": true
-    },
     "prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
@@ -19500,6 +19347,160 @@
         "is-finite": "^1.0.0"
       }
     },
+    "replace": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/replace/-/replace-1.2.1.tgz",
+      "integrity": "sha512-KZCBe/tPanwBlbjSMQby4l+zjSiFi3CLEP/6VLClnRYgJ46DZ5u9tmA6ceWeFS8coaUnU4ZdGNb/puUGMHNSRg==",
+      "dev": true,
+      "requires": {
+        "chalk": "2.4.2",
+        "minimatch": "3.0.4",
+        "yargs": "^15.3.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "cliui": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+          "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+          "dev": true,
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.0",
+            "wrap-ansi": "^6.2.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "find-up": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^5.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+          "dev": true
+        },
+        "locate-path": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^4.1.0"
+          }
+        },
+        "p-locate": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.2.0"
+          }
+        },
+        "path-exists": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+          "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.1"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        },
+        "wrap-ansi": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+          "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "yargs": {
+          "version": "15.4.1",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+          "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+          "dev": true,
+          "requires": {
+            "cliui": "^6.0.0",
+            "decamelize": "^1.2.0",
+            "find-up": "^4.1.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^4.2.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^18.1.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "18.1.3",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+          "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+          "dev": true,
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
     "request": {
       "version": "2.88.2",
       "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
@@ -20086,12 +20087,6 @@
       "integrity": "sha1-VusCfWW00tzmyy4tMsTUr8nh1wc=",
       "dev": true
     },
-    "smart-buffer": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
-      "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
-      "dev": true
-    },
     "snake-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
@@ -20279,44 +20274,6 @@
         }
       }
     },
-    "socks": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/socks/-/socks-2.6.2.tgz",
-      "integrity": "sha512-zDZhHhZRY9PxRruRMR7kMhnf3I8hDs4S3f9RecfnGxvcBHQcKcIH/oUcEWffsfl1XxdYlA7nnlGbbTvPz9D8gA==",
-      "dev": true,
-      "requires": {
-        "ip": "^1.1.5",
-        "smart-buffer": "^4.2.0"
-      }
-    },
-    "socks-proxy-agent": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-6.1.1.tgz",
-      "integrity": "sha512-t8J0kG3csjA4g6FTbsMOWws+7R7vuRC8aQ/wy3/1OWmsgwA68zs/+cExQ0koSitUDXqhufF/YJr9wtNMZHw5Ew==",
-      "dev": true,
-      "requires": {
-        "agent-base": "^6.0.2",
-        "debug": "^4.3.1",
-        "socks": "^2.6.1"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "4.3.3",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
-          "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==",
-          "dev": true,
-          "requires": {
-            "ms": "2.1.2"
-          }
-        },
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
-        }
-      }
-    },
     "source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -23529,25 +23486,6 @@
         "decamelize": "^1.2.0"
       }
     },
-    "yauzl": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
-      "integrity": "sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=",
-      "dev": true,
-      "requires": {
-        "buffer-crc32": "~0.2.3",
-        "fd-slicer": "~1.1.0"
-      }
-    },
-    "yazl": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/yazl/-/yazl-2.5.1.tgz",
-      "integrity": "sha512-phENi2PLiHnHb6QBVot+dJnaAZ0xosj7p3fWl+znIjBDlnMI2PsZCJZ306BPTFOaHf5qdDEI8x5qFrSOBN5vrw==",
-      "dev": true,
-      "requires": {
-        "buffer-crc32": "~0.2.3"
-      }
-    },
     "yn": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
@@ -23560,6 +23498,11 @@
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
       "dev": true
     },
+    "zustand": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-3.7.2.tgz",
+      "integrity": "sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA=="
+    },
     "zwitch": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz",
diff --git a/web-console/package.json b/web-console/package.json
index a57f669226d4..e62d6e7e82d0 100644
--- a/web-console/package.json
+++ b/web-console/package.json
@@ -71,7 +71,7 @@
     "@blueprintjs/icons": "^4.1.1",
     "@blueprintjs/popover2": "^1.0.3",
     "ace-builds": "^1.4.13",
-    "axios": "^0.21.4",
+    "axios": "^0.26.1",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",
     "core-js": "^3.10.1",
@@ -79,7 +79,7 @@
     "d3-axis": "^1.0.12",
     "d3-scale": "^3.2.0",
     "d3-selection": "^1.4.0",
-    "druid-query-toolkit": "^0.14.10",
+    "druid-query-toolkit": "^0.14.24",
     "file-saver": "^2.0.2",
     "follow-redirects": "^1.14.7",
     "fontsource-open-sans": "^3.0.9",
@@ -100,7 +100,8 @@
     "react-splitter-layout": "^4.0.0",
     "react-table": "~6.10.3",
     "regenerator-runtime": "^0.13.7",
-    "tslib": "^2.3.1"
+    "tslib": "^2.3.1",
+    "zustand": "^3.6.5"
   },
   "devDependencies": {
     "@awesome-code-style/eslint-config": "^4.0.0",
@@ -154,11 +155,12 @@
     "jest": "^27.5.0",
     "license-checker": "^25.0.1",
     "node-sass": "^5.0.0",
-    "playwright-chromium": "^1.18.1",
+    "playwright-chromium": "^1.24.1",
     "postcss": "^8.3.0",
     "postcss-loader": "^5.3.0",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.5.1",
+    "replace": "^1.2.1",
     "sass-loader": "^11.0.1",
     "snarkdown": "^2.0.0",
     "style-loader": "^2.0.0",
diff --git a/web-console/script/create-sql-docs.js b/web-console/script/create-sql-docs.js
index 57fba5b81fb7..4258a0e99e4d 100755
--- a/web-console/script/create-sql-docs.js
+++ b/web-console/script/create-sql-docs.js
@@ -70,7 +70,7 @@ const readDoc = async () => {
   const lines = data.split('\n');
 
   const functionDocs = {};
-  const dataTypeDocs = [];
+  const dataTypeDocs = {};
   for (let line of lines) {
     const functionMatch = line.match(/^\|\s*`(\w+)\(([^|]*)\)`\s*\|([^|]+)\|(?:([^|]+)\|)?$/);
     if (functionMatch) {
@@ -84,11 +84,7 @@ const readDoc = async () => {
 
     const dataTypeMatch = line.match(/^\|([A-Z]+)\|([A-Z]+)\|([^|]*)\|([^|]*)\|$/);
     if (dataTypeMatch) {
-      dataTypeDocs.push([
-        dataTypeMatch[1],
-        dataTypeMatch[2],
-        convertMarkdownToHtml(dataTypeMatch[4]),
-      ]);
+      dataTypeDocs[dataTypeMatch[1]] = [dataTypeMatch[2], convertMarkdownToHtml(dataTypeMatch[4])];
     }
   }
 
diff --git a/web-console/script/druid b/web-console/script/druid
index 9f54949b96cd..67651c66a2dc 100755
--- a/web-console/script/druid
+++ b/web-console/script/druid
@@ -61,7 +61,7 @@ function _build_distribution() {
     && tar xzf "apache-druid-$(_get_druid_version)-bin.tar.gz" \
     && cd apache-druid-$(_get_druid_version) \
     && bin/run-java -classpath "lib/*" org.apache.druid.cli.Main tools pull-deps -c org.apache.druid.extensions:druid-testing-tools \
-    && echo -e "\n\ndruid.extensions.loadList=[\"druid-hdfs-storage\", \"druid-kafka-indexing-service\", \"druid-datasketches\", \"druid-testing-tools\"]" >> conf/druid/single-server/micro-quickstart/_common/common.runtime.properties \
+    && echo -e "\n\ndruid.extensions.loadList=[\"druid-hdfs-storage\", \"druid-kafka-indexing-service\", \"druid-datasketches\", \"druid-multi-stage-query\", \"druid-testing-tools\"]" >> conf/druid/single-server/micro-quickstart/_common/common.runtime.properties \
     && echo -e "\n\ndruid.server.http.allowedHttpMethods=[\"HEAD\"]" >> conf/druid/single-server/micro-quickstart/_common/common.runtime.properties \
   )
 }
diff --git a/web-console/script/mv b/web-console/script/mv
new file mode 100755
index 000000000000..c5bf8231d1b0
--- /dev/null
+++ b/web-console/script/mv
@@ -0,0 +1,75 @@
+#!/usr/bin/env node
+/*
+ * 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.
+ */
+
+const fs = require('fs-extra');
+const replace = require('replace');
+
+if (process.argv.length !== 5) {
+  console.log('Usage: mv <src-location> <old-component-name> <new-component-name>');
+  process.exit();
+}
+
+const location = process.argv[2];
+const oldName = process.argv[3];
+const newName = process.argv[4];
+
+if (!/^([a-z0-9-])+$/.test(oldName)) {
+  console.log('must be a hyphen case old name');
+  process.exit();
+}
+
+if (!/^([a-z0-9-])+$/.test(newName)) {
+  console.log('must be a hyphen case new name');
+  process.exit();
+}
+
+const oldPath = './src/' + location + '/' + oldName + '/';
+const newPath = './src/' + location + '/' + newName + '/';
+
+const camelOldName = oldName.replace(/(^|-)[a-z]/g, s => s.replace('-', '').toUpperCase());
+const camelNewName = newName.replace(/(^|-)[a-z]/g, s => s.replace('-', '').toUpperCase());
+
+console.log('Making path:', newPath);
+
+fs.moveSync(oldPath, newPath);
+fs.renameSync(newPath + oldName + '.tsx', newPath + newName + '.tsx');
+try {
+  fs.renameSync(newPath + oldName + '.scss', newPath + newName + '.scss');
+} catch {}
+try {
+  fs.renameSync(newPath + oldName + '.spec.tsx', newPath + newName + '.spec.tsx');
+} catch {}
+
+const replacePath = './src/';
+
+replace({
+  regex: oldName,
+  replacement: newName,
+  paths: [replacePath],
+  recursive: true,
+  silent: true,
+});
+
+replace({
+  regex: camelOldName,
+  replacement: camelNewName,
+  paths: [replacePath],
+  recursive: true,
+  silent: true,
+});
diff --git a/web-console/src/ace-modes/dsql.js b/web-console/src/ace-modes/dsql.js
index 61ff90f26d3b..c54970b17c67 100644
--- a/web-console/src/ace-modes/dsql.js
+++ b/web-console/src/ace-modes/dsql.js
@@ -48,9 +48,7 @@ ace.define(
       ).join('|');
 
       // Stuff like: 'int|numeric|decimal|date|varchar|char|bigint|float|double|bit|binary|text|set|timestamp'
-      var dataTypes = druidFunctions.SQL_DATA_TYPES.map(function (f) {
-        return f[0];
-      }).join('|');
+      var dataTypes = Object.keys(druidFunctions.SQL_DATA_TYPES).join('|');
 
       var keywordMapper = this.createKeywordMapper(
         {
diff --git a/web-console/src/bootstrap/react-table-defaults.tsx b/web-console/src/bootstrap/react-table-defaults.tsx
index 9058b95839d0..4c31928064cd 100644
--- a/web-console/src/bootstrap/react-table-defaults.tsx
+++ b/web-console/src/bootstrap/react-table-defaults.tsx
@@ -28,7 +28,7 @@ import {
 } from '../react-table';
 import { countBy } from '../utils';
 
-const NoData = React.memo(function NoData(props) {
+const NoData = React.memo(function NoData(props: { children?: React.ReactNode }) {
   const { children } = props;
   if (!children) return null;
   return <div className="rt-noData">{children}</div>;
diff --git a/web-console/src/components/braced-text/braced-text.scss b/web-console/src/components/braced-text/braced-text.scss
index 56f649397e49..e9d390c12c9a 100644
--- a/web-console/src/components/braced-text/braced-text.scss
+++ b/web-console/src/components/braced-text/braced-text.scss
@@ -26,6 +26,7 @@
     top: -50000px; // Send it into the stratosphere (get it out of the parent container to prevent the browser from adding '...')
     opacity: 0;
     pointer-events: none;
+    user-select: none;
   }
 
   .real-text {
diff --git a/web-console/src/components/click-to-copy/__snapshots__/click-to-copy.spec.tsx.snap b/web-console/src/components/click-to-copy/__snapshots__/click-to-copy.spec.tsx.snap
new file mode 100644
index 000000000000..a53da72f6d18
--- /dev/null
+++ b/web-console/src/components/click-to-copy/__snapshots__/click-to-copy.spec.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ClickToCopy matches snapshot 1`] = `
+<a
+  class="click-to-copy"
+  title="Click to copy:
+Hello world"
+>
+  Hello world
+</a>
+`;
diff --git a/web-console/src/components/click-to-copy/click-to-copy.spec.tsx b/web-console/src/components/click-to-copy/click-to-copy.spec.tsx
new file mode 100644
index 000000000000..d554d392febf
--- /dev/null
+++ b/web-console/src/components/click-to-copy/click-to-copy.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 { render } from '@testing-library/react';
+import React from 'react';
+
+import { ClickToCopy } from './click-to-copy';
+
+describe('ClickToCopy', () => {
+  it('matches snapshot', () => {
+    const arrayInput = <ClickToCopy text="Hello world" />;
+
+    const { container } = render(arrayInput);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/web-console/src/components/click-to-copy/click-to-copy.tsx b/web-console/src/components/click-to-copy/click-to-copy.tsx
new file mode 100644
index 000000000000..5d1d2a8cf471
--- /dev/null
+++ b/web-console/src/components/click-to-copy/click-to-copy.tsx
@@ -0,0 +1,46 @@
+/*
+ * 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 { Intent } from '@blueprintjs/core';
+import copy from 'copy-to-clipboard';
+import React from 'react';
+
+import { AppToaster } from '../../singletons';
+
+export interface ClickToCopyProps {
+  text: string;
+}
+
+export const ClickToCopy = React.memo(function ClickToCopy(props: ClickToCopyProps) {
+  const { text } = props;
+
+  return (
+    <a
+      className="click-to-copy"
+      title={`Click to copy:\n${text}`}
+      onClick={() => {
+        copy(text, { format: 'text/plain' });
+        AppToaster.show({
+          message: `'${text}' copied to clipboard`,
+          intent: Intent.SUCCESS,
+        });
+      }}
+    >
+      {text}
+    </a>
+  );
+});
diff --git a/web-console/src/components/datasource-columns-table/__snapshots__/datasource-columns-table.spec.tsx.snap b/web-console/src/components/datasource-columns-table/__snapshots__/datasource-columns-table.spec.tsx.snap
deleted file mode 100644
index dca59389af97..000000000000
--- a/web-console/src/components/datasource-columns-table/__snapshots__/datasource-columns-table.spec.tsx.snap
+++ /dev/null
@@ -1,668 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DatasourceColumnsTable matches snapshot on error 1`] = `
-<div
-  className="datasource-columns-table"
->
-  <div
-    className="main-area"
-  >
-    <ReactTable
-      AggregatedComponent={[Function]}
-      ExpanderComponent={[Function]}
-      FilterComponent={[Function]}
-      LoadingComponent={[Function]}
-      NoDataComponent={[Function]}
-      PadRowComponent={[Function]}
-      PaginationComponent={[Function]}
-      PivotValueComponent={[Function]}
-      ResizerComponent={[Function]}
-      TableComponent={[Function]}
-      TbodyComponent={[Function]}
-      TdComponent={[Function]}
-      TfootComponent={[Function]}
-      ThComponent={[Function]}
-      TheadComponent={[Function]}
-      TrComponent={[Function]}
-      TrGroupComponent={[Function]}
-      aggregatedKey="_aggregated"
-      className=""
-      collapseOnDataChange={true}
-      collapseOnPageChange={true}
-      collapseOnSortingChange={true}
-      column={
-        Object {
-          "Aggregated": undefined,
-          "Cell": undefined,
-          "Expander": undefined,
-          "Filter": undefined,
-          "Footer": undefined,
-          "Header": undefined,
-          "Pivot": undefined,
-          "PivotValue": undefined,
-          "Placeholder": undefined,
-          "aggregate": undefined,
-          "className": "",
-          "filterAll": false,
-          "filterMethod": undefined,
-          "filterable": undefined,
-          "footerClassName": "",
-          "footerStyle": Object {},
-          "getFooterProps": [Function],
-          "getHeaderProps": [Function],
-          "getProps": [Function],
-          "headerClassName": "",
-          "headerStyle": Object {},
-          "minResizeWidth": 11,
-          "minWidth": 100,
-          "resizable": undefined,
-          "show": true,
-          "sortMethod": undefined,
-          "sortable": undefined,
-          "style": Object {},
-        }
-      }
-      columns={
-        Array [
-          Object {
-            "Header": "Column name",
-            "accessor": "COLUMN_NAME",
-            "className": "padded",
-            "width": 300,
-          },
-          Object {
-            "Header": "Data type",
-            "accessor": "DATA_TYPE",
-            "className": "padded",
-            "width": 200,
-          },
-        ]
-      }
-      data={Array []}
-      defaultExpanded={Object {}}
-      defaultFilterMethod={[Function]}
-      defaultFiltered={Array []}
-      defaultPage={0}
-      defaultPageSize={25}
-      defaultResized={Array []}
-      defaultSortDesc={false}
-      defaultSortMethod={[Function]}
-      defaultSorted={Array []}
-      expanderDefaults={
-        Object {
-          "filterable": false,
-          "resizable": false,
-          "sortable": false,
-          "width": 35,
-        }
-      }
-      filterable={true}
-      freezeWhenExpanded={false}
-      getLoadingProps={[Function]}
-      getNoDataProps={[Function]}
-      getPaginationProps={[Function]}
-      getProps={[Function]}
-      getResizerProps={[Function]}
-      getTableProps={[Function]}
-      getTbodyProps={[Function]}
-      getTdProps={[Function]}
-      getTfootProps={[Function]}
-      getTfootTdProps={[Function]}
-      getTfootTrProps={[Function]}
-      getTheadFilterProps={[Function]}
-      getTheadFilterThProps={[Function]}
-      getTheadFilterTrProps={[Function]}
-      getTheadGroupProps={[Function]}
-      getTheadGroupThProps={[Function]}
-      getTheadGroupTrProps={[Function]}
-      getTheadProps={[Function]}
-      getTheadThProps={[Function]}
-      getTheadTrProps={[Function]}
-      getTrGroupProps={[Function]}
-      getTrProps={[Function]}
-      groupedByPivotKey="_groupedByPivot"
-      indexKey="_index"
-      loading={false}
-      loadingText="Loading..."
-      multiSort={true}
-      nestingLevelKey="_nestingLevel"
-      nextText="Next"
-      noDataText="test error"
-      ofText="of"
-      onFetchData={[Function]}
-      originalKey="_original"
-      pageJumpText="jump to page"
-      pageSizeOptions={
-        Array [
-          25,
-          50,
-          100,
-        ]
-      }
-      pageText="Page"
-      pivotDefaults={Object {}}
-      pivotIDKey="_pivotID"
-      pivotValKey="_pivotVal"
-      previousText="Previous"
-      resizable={true}
-      resolveData={[Function]}
-      rowsSelectorText="rows per page"
-      rowsText="rows"
-      showPageJump={true}
-      showPageSizeOptions={true}
-      showPagination={false}
-      showPaginationBottom={true}
-      showPaginationTop={false}
-      sortable={true}
-      style={Object {}}
-      subRowsKey="_subRows"
-    />
-  </div>
-</div>
-`;
-
-exports[`DatasourceColumnsTable matches snapshot on init 1`] = `
-<div
-  className="datasource-columns-table"
->
-  <div
-    className="main-area"
-  >
-    <ReactTable
-      AggregatedComponent={[Function]}
-      ExpanderComponent={[Function]}
-      FilterComponent={[Function]}
-      LoadingComponent={[Function]}
-      NoDataComponent={[Function]}
-      PadRowComponent={[Function]}
-      PaginationComponent={[Function]}
-      PivotValueComponent={[Function]}
-      ResizerComponent={[Function]}
-      TableComponent={[Function]}
-      TbodyComponent={[Function]}
-      TdComponent={[Function]}
-      TfootComponent={[Function]}
-      ThComponent={[Function]}
-      TheadComponent={[Function]}
-      TrComponent={[Function]}
-      TrGroupComponent={[Function]}
-      aggregatedKey="_aggregated"
-      className=""
-      collapseOnDataChange={true}
-      collapseOnPageChange={true}
-      collapseOnSortingChange={true}
-      column={
-        Object {
-          "Aggregated": undefined,
-          "Cell": undefined,
-          "Expander": undefined,
-          "Filter": undefined,
-          "Footer": undefined,
-          "Header": undefined,
-          "Pivot": undefined,
-          "PivotValue": undefined,
-          "Placeholder": undefined,
-          "aggregate": undefined,
-          "className": "",
-          "filterAll": false,
-          "filterMethod": undefined,
-          "filterable": undefined,
-          "footerClassName": "",
-          "footerStyle": Object {},
-          "getFooterProps": [Function],
-          "getHeaderProps": [Function],
-          "getProps": [Function],
-          "headerClassName": "",
-          "headerStyle": Object {},
-          "minResizeWidth": 11,
-          "minWidth": 100,
-          "resizable": undefined,
-          "show": true,
-          "sortMethod": undefined,
-          "sortable": undefined,
-          "style": Object {},
-        }
-      }
-      columns={
-        Array [
-          Object {
-            "Header": "Column name",
-            "accessor": "COLUMN_NAME",
-            "className": "padded",
-            "width": 300,
-          },
-          Object {
-            "Header": "Data type",
-            "accessor": "DATA_TYPE",
-            "className": "padded",
-            "width": 200,
-          },
-        ]
-      }
-      data={Array []}
-      defaultExpanded={Object {}}
-      defaultFilterMethod={[Function]}
-      defaultFiltered={Array []}
-      defaultPage={0}
-      defaultPageSize={25}
-      defaultResized={Array []}
-      defaultSortDesc={false}
-      defaultSortMethod={[Function]}
-      defaultSorted={Array []}
-      expanderDefaults={
-        Object {
-          "filterable": false,
-          "resizable": false,
-          "sortable": false,
-          "width": 35,
-        }
-      }
-      filterable={true}
-      freezeWhenExpanded={false}
-      getLoadingProps={[Function]}
-      getNoDataProps={[Function]}
-      getPaginationProps={[Function]}
-      getProps={[Function]}
-      getResizerProps={[Function]}
-      getTableProps={[Function]}
-      getTbodyProps={[Function]}
-      getTdProps={[Function]}
-      getTfootProps={[Function]}
-      getTfootTdProps={[Function]}
-      getTfootTrProps={[Function]}
-      getTheadFilterProps={[Function]}
-      getTheadFilterThProps={[Function]}
-      getTheadFilterTrProps={[Function]}
-      getTheadGroupProps={[Function]}
-      getTheadGroupThProps={[Function]}
-      getTheadGroupTrProps={[Function]}
-      getTheadProps={[Function]}
-      getTheadThProps={[Function]}
-      getTheadTrProps={[Function]}
-      getTrGroupProps={[Function]}
-      getTrProps={[Function]}
-      groupedByPivotKey="_groupedByPivot"
-      indexKey="_index"
-      loading={false}
-      loadingText="Loading..."
-      multiSort={true}
-      nestingLevelKey="_nestingLevel"
-      nextText="Next"
-      noDataText="No column data found"
-      ofText="of"
-      onFetchData={[Function]}
-      originalKey="_original"
-      pageJumpText="jump to page"
-      pageSizeOptions={
-        Array [
-          25,
-          50,
-          100,
-        ]
-      }
-      pageText="Page"
-      pivotDefaults={Object {}}
-      pivotIDKey="_pivotID"
-      pivotValKey="_pivotVal"
-      previousText="Previous"
-      resizable={true}
-      resolveData={[Function]}
-      rowsSelectorText="rows per page"
-      rowsText="rows"
-      showPageJump={true}
-      showPageSizeOptions={true}
-      showPagination={false}
-      showPaginationBottom={true}
-      showPaginationTop={false}
-      sortable={true}
-      style={Object {}}
-      subRowsKey="_subRows"
-    />
-  </div>
-</div>
-`;
-
-exports[`DatasourceColumnsTable matches snapshot on loading 1`] = `
-<div
-  className="datasource-columns-table"
->
-  <div
-    className="main-area"
-  >
-    <Memo(Loader) />
-  </div>
-</div>
-`;
-
-exports[`DatasourceColumnsTable matches snapshot on no data 1`] = `
-<div
-  className="datasource-columns-table"
->
-  <div
-    className="main-area"
-  >
-    <ReactTable
-      AggregatedComponent={[Function]}
-      ExpanderComponent={[Function]}
-      FilterComponent={[Function]}
-      LoadingComponent={[Function]}
-      NoDataComponent={[Function]}
-      PadRowComponent={[Function]}
-      PaginationComponent={[Function]}
-      PivotValueComponent={[Function]}
-      ResizerComponent={[Function]}
-      TableComponent={[Function]}
-      TbodyComponent={[Function]}
-      TdComponent={[Function]}
-      TfootComponent={[Function]}
-      ThComponent={[Function]}
-      TheadComponent={[Function]}
-      TrComponent={[Function]}
-      TrGroupComponent={[Function]}
-      aggregatedKey="_aggregated"
-      className=""
-      collapseOnDataChange={true}
-      collapseOnPageChange={true}
-      collapseOnSortingChange={true}
-      column={
-        Object {
-          "Aggregated": undefined,
-          "Cell": undefined,
-          "Expander": undefined,
-          "Filter": undefined,
-          "Footer": undefined,
-          "Header": undefined,
-          "Pivot": undefined,
-          "PivotValue": undefined,
-          "Placeholder": undefined,
-          "aggregate": undefined,
-          "className": "",
-          "filterAll": false,
-          "filterMethod": undefined,
-          "filterable": undefined,
-          "footerClassName": "",
-          "footerStyle": Object {},
-          "getFooterProps": [Function],
-          "getHeaderProps": [Function],
-          "getProps": [Function],
-          "headerClassName": "",
-          "headerStyle": Object {},
-          "minResizeWidth": 11,
-          "minWidth": 100,
-          "resizable": undefined,
-          "show": true,
-          "sortMethod": undefined,
-          "sortable": undefined,
-          "style": Object {},
-        }
-      }
-      columns={
-        Array [
-          Object {
-            "Header": "Column name",
-            "accessor": "COLUMN_NAME",
-            "className": "padded",
-            "width": 300,
-          },
-          Object {
-            "Header": "Data type",
-            "accessor": "DATA_TYPE",
-            "className": "padded",
-            "width": 200,
-          },
-        ]
-      }
-      data={Array []}
-      defaultExpanded={Object {}}
-      defaultFilterMethod={[Function]}
-      defaultFiltered={Array []}
-      defaultPage={0}
-      defaultPageSize={25}
-      defaultResized={Array []}
-      defaultSortDesc={false}
-      defaultSortMethod={[Function]}
-      defaultSorted={Array []}
-      expanderDefaults={
-        Object {
-          "filterable": false,
-          "resizable": false,
-          "sortable": false,
-          "width": 35,
-        }
-      }
-      filterable={true}
-      freezeWhenExpanded={false}
-      getLoadingProps={[Function]}
-      getNoDataProps={[Function]}
-      getPaginationProps={[Function]}
-      getProps={[Function]}
-      getResizerProps={[Function]}
-      getTableProps={[Function]}
-      getTbodyProps={[Function]}
-      getTdProps={[Function]}
-      getTfootProps={[Function]}
-      getTfootTdProps={[Function]}
-      getTfootTrProps={[Function]}
-      getTheadFilterProps={[Function]}
-      getTheadFilterThProps={[Function]}
-      getTheadFilterTrProps={[Function]}
-      getTheadGroupProps={[Function]}
-      getTheadGroupThProps={[Function]}
-      getTheadGroupTrProps={[Function]}
-      getTheadProps={[Function]}
-      getTheadThProps={[Function]}
-      getTheadTrProps={[Function]}
-      getTrGroupProps={[Function]}
-      getTrProps={[Function]}
-      groupedByPivotKey="_groupedByPivot"
-      indexKey="_index"
-      loading={false}
-      loadingText="Loading..."
-      multiSort={true}
-      nestingLevelKey="_nestingLevel"
-      nextText="Next"
-      noDataText="No column data found"
-      ofText="of"
-      onFetchData={[Function]}
-      originalKey="_original"
-      pageJumpText="jump to page"
-      pageSizeOptions={
-        Array [
-          25,
-          50,
-          100,
-        ]
-      }
-      pageText="Page"
-      pivotDefaults={Object {}}
-      pivotIDKey="_pivotID"
-      pivotValKey="_pivotVal"
-      previousText="Previous"
-      resizable={true}
-      resolveData={[Function]}
-      rowsSelectorText="rows per page"
-      rowsText="rows"
-      showPageJump={true}
-      showPageSizeOptions={true}
-      showPagination={false}
-      showPaginationBottom={true}
-      showPaginationTop={false}
-      sortable={true}
-      style={Object {}}
-      subRowsKey="_subRows"
-    />
-  </div>
-</div>
-`;
-
-exports[`DatasourceColumnsTable matches snapshot on some data 1`] = `
-<div
-  className="datasource-columns-table"
->
-  <div
-    className="main-area"
-  >
-    <ReactTable
-      AggregatedComponent={[Function]}
-      ExpanderComponent={[Function]}
-      FilterComponent={[Function]}
-      LoadingComponent={[Function]}
-      NoDataComponent={[Function]}
-      PadRowComponent={[Function]}
-      PaginationComponent={[Function]}
-      PivotValueComponent={[Function]}
-      ResizerComponent={[Function]}
-      TableComponent={[Function]}
-      TbodyComponent={[Function]}
-      TdComponent={[Function]}
-      TfootComponent={[Function]}
-      ThComponent={[Function]}
-      TheadComponent={[Function]}
-      TrComponent={[Function]}
-      TrGroupComponent={[Function]}
-      aggregatedKey="_aggregated"
-      className=""
-      collapseOnDataChange={true}
-      collapseOnPageChange={true}
-      collapseOnSortingChange={true}
-      column={
-        Object {
-          "Aggregated": undefined,
-          "Cell": undefined,
-          "Expander": undefined,
-          "Filter": undefined,
-          "Footer": undefined,
-          "Header": undefined,
-          "Pivot": undefined,
-          "PivotValue": undefined,
-          "Placeholder": undefined,
-          "aggregate": undefined,
-          "className": "",
-          "filterAll": false,
-          "filterMethod": undefined,
-          "filterable": undefined,
-          "footerClassName": "",
-          "footerStyle": Object {},
-          "getFooterProps": [Function],
-          "getHeaderProps": [Function],
-          "getProps": [Function],
-          "headerClassName": "",
-          "headerStyle": Object {},
-          "minResizeWidth": 11,
-          "minWidth": 100,
-          "resizable": undefined,
-          "show": true,
-          "sortMethod": undefined,
-          "sortable": undefined,
-          "style": Object {},
-        }
-      }
-      columns={
-        Array [
-          Object {
-            "Header": "Column name",
-            "accessor": "COLUMN_NAME",
-            "className": "padded",
-            "width": 300,
-          },
-          Object {
-            "Header": "Data type",
-            "accessor": "DATA_TYPE",
-            "className": "padded",
-            "width": 200,
-          },
-        ]
-      }
-      data={
-        Array [
-          Object {
-            "COLUMN_NAME": "channel",
-            "DATA_TYPE": "VARCHAR",
-          },
-          Object {
-            "COLUMN_NAME": "page",
-            "DATA_TYPE": "VARCHAR",
-          },
-        ]
-      }
-      defaultExpanded={Object {}}
-      defaultFilterMethod={[Function]}
-      defaultFiltered={Array []}
-      defaultPage={0}
-      defaultPageSize={25}
-      defaultResized={Array []}
-      defaultSortDesc={false}
-      defaultSortMethod={[Function]}
-      defaultSorted={Array []}
-      expanderDefaults={
-        Object {
-          "filterable": false,
-          "resizable": false,
-          "sortable": false,
-          "width": 35,
-        }
-      }
-      filterable={true}
-      freezeWhenExpanded={false}
-      getLoadingProps={[Function]}
-      getNoDataProps={[Function]}
-      getPaginationProps={[Function]}
-      getProps={[Function]}
-      getResizerProps={[Function]}
-      getTableProps={[Function]}
-      getTbodyProps={[Function]}
-      getTdProps={[Function]}
-      getTfootProps={[Function]}
-      getTfootTdProps={[Function]}
-      getTfootTrProps={[Function]}
-      getTheadFilterProps={[Function]}
-      getTheadFilterThProps={[Function]}
-      getTheadFilterTrProps={[Function]}
-      getTheadGroupProps={[Function]}
-      getTheadGroupThProps={[Function]}
-      getTheadGroupTrProps={[Function]}
-      getTheadProps={[Function]}
-      getTheadThProps={[Function]}
-      getTheadTrProps={[Function]}
-      getTrGroupProps={[Function]}
-      getTrProps={[Function]}
-      groupedByPivotKey="_groupedByPivot"
-      indexKey="_index"
-      loading={false}
-      loadingText="Loading..."
-      multiSort={true}
-      nestingLevelKey="_nestingLevel"
-      nextText="Next"
-      noDataText="No column data found"
-      ofText="of"
-      onFetchData={[Function]}
-      originalKey="_original"
-      pageJumpText="jump to page"
-      pageSizeOptions={
-        Array [
-          25,
-          50,
-          100,
-        ]
-      }
-      pageText="Page"
-      pivotDefaults={Object {}}
-      pivotIDKey="_pivotID"
-      pivotValKey="_pivotVal"
-      previousText="Previous"
-      resizable={true}
-      resolveData={[Function]}
-      rowsSelectorText="rows per page"
-      rowsText="rows"
-      showPageJump={true}
-      showPageSizeOptions={true}
-      showPagination={false}
-      showPaginationBottom={true}
-      showPaginationTop={false}
-      sortable={true}
-      style={Object {}}
-      subRowsKey="_subRows"
-    />
-  </div>
-</div>
-`;
diff --git a/web-console/src/components/fancy-tab-pane/fancy-tab-pane.scss b/web-console/src/components/fancy-tab-pane/fancy-tab-pane.scss
new file mode 100644
index 000000000000..a32e2b463aa4
--- /dev/null
+++ b/web-console/src/components/fancy-tab-pane/fancy-tab-pane.scss
@@ -0,0 +1,62 @@
+/*
+ * 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 '../../variables';
+
+$side-bar-width: 120px;
+
+.fancy-tab-pane {
+  .side-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: $side-bar-width;
+    height: 100%;
+    border-right: 1px solid #1f2832;
+
+    .tab-button {
+      width: 100%;
+      height: 10vh;
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      border-radius: 0;
+
+      &.active {
+        background-color: #2c74a8;
+      }
+
+      .#{$bp-ns}-icon {
+        margin-right: 0;
+      }
+
+      .#{$bp-ns}-button-text {
+        margin-top: 5px;
+      }
+    }
+  }
+
+  .main-section {
+    position: absolute;
+    top: 0;
+    left: $side-bar-width;
+    right: 0;
+    height: 100%;
+    padding: 10px 20px 15px 20px;
+  }
+}
diff --git a/web-console/src/components/fancy-tab-pane/fancy-tab-pane.tsx b/web-console/src/components/fancy-tab-pane/fancy-tab-pane.tsx
new file mode 100644
index 000000000000..500c0f24dc74
--- /dev/null
+++ b/web-console/src/components/fancy-tab-pane/fancy-tab-pane.tsx
@@ -0,0 +1,83 @@
+/*
+ * 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.
+ */
+
+/*
+ * 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 { Button, Icon, IconName, Intent } from '@blueprintjs/core';
+import classNames from 'classnames';
+import React, { ReactNode } from 'react';
+
+import { filterMap } from '../../utils';
+
+import './fancy-tab-pane.scss';
+
+export interface FancyTabButton {
+  id: string;
+  icon: IconName;
+  label: string;
+}
+
+interface FancyTabPaneProps {
+  className?: string;
+  tabs: (FancyTabButton | false | undefined)[];
+  activeTab: string;
+  onActivateTab(newActiveTab: string): void;
+  children?: ReactNode;
+}
+
+export const FancyTabPane = React.memo(function FancyTabPane(props: FancyTabPaneProps) {
+  const { className, tabs, activeTab, onActivateTab, children } = props;
+
+  return (
+    <div className={classNames('fancy-tab-pane', className)}>
+      <div className="side-bar">
+        {filterMap(tabs, d => {
+          if (!d) return;
+          return (
+            <Button
+              className="tab-button"
+              icon={<Icon icon={d.icon} size={20} />}
+              key={d.id}
+              text={d.label}
+              intent={activeTab === d.id ? Intent.PRIMARY : Intent.NONE}
+              minimal={activeTab !== d.id}
+              onClick={() => onActivateTab(d.id)}
+            />
+          );
+        })}
+      </div>
+      <div className="main-section">{children}</div>
+    </div>
+  );
+});
diff --git a/web-console/src/components/form-group-with-info/form-group-with-info.tsx b/web-console/src/components/form-group-with-info/form-group-with-info.tsx
index 1130e7fa7e06..a42c4ca61d16 100644
--- a/web-console/src/components/form-group-with-info/form-group-with-info.tsx
+++ b/web-console/src/components/form-group-with-info/form-group-with-info.tsx
@@ -37,7 +37,7 @@ export const FormGroupWithInfo = React.memo(function FormGroupWithInfo(
 
   const popover = (
     <Popover2 className="info-popover" content={info} position="left-bottom">
-      <Icon icon={IconNames.INFO_SIGN} iconSize={14} />
+      <Icon icon={IconNames.INFO_SIGN} size={14} />
     </Popover2>
   );
 
diff --git a/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap b/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap
index b715283ca23c..cc7f53463cc5 100644
--- a/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap
+++ b/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap
@@ -15,32 +15,109 @@ exports[`HeaderBar matches snapshot 1`] = `
     <Blueprint4.NavbarDivider />
     <Blueprint4.AnchorButton
       active={true}
+      className="header-entry"
       disabled={false}
-      href="#load-data"
-      icon="cloud-upload"
-      intent="none"
+      href="#workbench"
+      icon="application"
       minimal={true}
-      text="Load data"
+      onClick={[Function]}
+      text="Query"
     />
+    <Blueprint4.Popover2
+      boundary="clippingParents"
+      captureDismiss={false}
+      content={
+        <Blueprint4.Menu>
+          <Blueprint4.MenuItem
+            active={false}
+            disabled={false}
+            href="#streaming-data-loader"
+            icon="feed"
+            multiline={false}
+            popoverProps={Object {}}
+            selected={false}
+            shouldDismissPopover={true}
+            text="Streaming"
+          />
+          <Blueprint4.MenuItem
+            active={false}
+            disabled={false}
+            href="#sql-data-loader"
+            icon="clean"
+            labelElement={
+              <Blueprint4.Tag
+                minimal={true}
+              >
+                multi-stage-query
+              </Blueprint4.Tag>
+            }
+            multiline={false}
+            popoverProps={Object {}}
+            selected={false}
+            shouldDismissPopover={true}
+            text="Batch - SQL"
+          />
+          <Blueprint4.MenuItem
+            active={false}
+            disabled={false}
+            href="#classic-batch-data-loader"
+            icon="list"
+            multiline={false}
+            popoverProps={Object {}}
+            selected={false}
+            shouldDismissPopover={true}
+            text="Batch - classic"
+          />
+        </Blueprint4.Menu>
+      }
+      defaultIsOpen={false}
+      disabled={false}
+      fill={false}
+      hasBackdrop={false}
+      hoverCloseDelay={300}
+      hoverOpenDelay={150}
+      inheritDarkTheme={true}
+      interactionKind="click"
+      minimal={false}
+      openOnTargetFocus={true}
+      position="bottom-left"
+      positioningStrategy="absolute"
+      shouldReturnFocusOnClose={false}
+      targetTagName="span"
+      transitionDuration={300}
+      usePortal={true}
+    >
+      <Blueprint4.Button
+        active={false}
+        className="header-entry"
+        disabled={false}
+        icon="cloud-upload"
+        minimal={true}
+        text="Load data"
+      />
+    </Blueprint4.Popover2>
     <Blueprint4.NavbarDivider />
     <Blueprint4.AnchorButton
       active={false}
+      className="header-entry"
       disabled={false}
-      href="#ingestion"
-      icon="gantt-chart"
+      href="#datasources"
+      icon="multi-select"
       minimal={true}
-      text="Ingestion"
+      text="Datasources"
     />
     <Blueprint4.AnchorButton
       active={false}
+      className="header-entry"
       disabled={false}
-      href="#datasources"
-      icon="multi-select"
+      href="#ingestion"
+      icon="gantt-chart"
       minimal={true}
-      text="Datasources"
+      text="Ingestion"
     />
     <Blueprint4.AnchorButton
       active={false}
+      className="header-entry"
       disabled={false}
       href="#segments"
       icon="stacked-chart"
@@ -49,21 +126,55 @@ exports[`HeaderBar matches snapshot 1`] = `
     />
     <Blueprint4.AnchorButton
       active={false}
+      className="header-entry"
       disabled={false}
       href="#services"
       icon="database"
       minimal={true}
       text="Services"
     />
-    <Blueprint4.NavbarDivider />
-    <Blueprint4.AnchorButton
-      active={false}
+    <Blueprint4.Popover2
+      boundary="clippingParents"
+      captureDismiss={false}
+      content={
+        <Blueprint4.Menu>
+          <Blueprint4.MenuItem
+            active={false}
+            disabled={false}
+            href="#lookups"
+            icon="properties"
+            multiline={false}
+            popoverProps={Object {}}
+            selected={false}
+            shouldDismissPopover={true}
+            text="Lookups"
+          />
+        </Blueprint4.Menu>
+      }
+      defaultIsOpen={false}
       disabled={false}
-      href="#query"
-      icon="application"
-      minimal={true}
-      text="Query"
-    />
+      fill={false}
+      hasBackdrop={false}
+      hoverCloseDelay={300}
+      hoverOpenDelay={150}
+      inheritDarkTheme={true}
+      interactionKind="click"
+      minimal={false}
+      openOnTargetFocus={true}
+      position="bottom-left"
+      positioningStrategy="absolute"
+      shouldReturnFocusOnClose={false}
+      targetTagName="span"
+      transitionDuration={300}
+      usePortal={true}
+    >
+      <Blueprint4.Button
+        active={false}
+        className="header-entry"
+        icon="more"
+        minimal={true}
+      />
+    </Blueprint4.Popover2>
   </Blueprint4.NavbarGroup>
   <Blueprint4.NavbarGroup
     align="right"
@@ -72,6 +183,7 @@ exports[`HeaderBar matches snapshot 1`] = `
       capabilities={
         Capabilities {
           "coordinator": true,
+          "multiStageQuery": true,
           "overlord": true,
           "queryType": "nativeAndSql",
         }
@@ -116,17 +228,6 @@ exports[`HeaderBar matches snapshot 1`] = `
             shouldDismissPopover={true}
             text="Overlord dynamic config"
           />
-          <Blueprint4.MenuItem
-            active={false}
-            disabled={false}
-            href="#lookups"
-            icon="properties"
-            multiline={false}
-            popoverProps={Object {}}
-            selected={false}
-            shouldDismissPopover={true}
-            text="Lookups"
-          />
           <Blueprint4.MenuDivider />
           <Blueprint4.MenuItem
             active={false}
@@ -201,6 +302,7 @@ exports[`HeaderBar matches snapshot 1`] = `
       usePortal={true}
     >
       <Blueprint4.Button
+        className="header-entry"
         icon="cog"
         minimal={true}
       />
@@ -224,7 +326,7 @@ exports[`HeaderBar matches snapshot 1`] = `
           <Blueprint4.MenuItem
             active={false}
             disabled={false}
-            href="https://druid.apache.org/docs/0.23.0"
+            href="https://druid.apache.org/docs/latest"
             icon="th"
             multiline={false}
             popoverProps={Object {}}
@@ -289,6 +391,7 @@ exports[`HeaderBar matches snapshot 1`] = `
       usePortal={true}
     >
       <Blueprint4.Button
+        className="header-entry"
         icon="help"
         minimal={true}
       />
diff --git a/web-console/src/components/header-bar/header-bar.scss b/web-console/src/components/header-bar/header-bar.scss
index 783b472cb848..062768a22c48 100644
--- a/web-console/src/components/header-bar/header-bar.scss
+++ b/web-console/src/components/header-bar/header-bar.scss
@@ -63,10 +63,7 @@
     margin: 0 11px;
   }
 
-  .#{$bp-ns}-button.#{$bp-ns}-minimal {
-    border-radius: 20px;
-    margin: 0 1px;
-
+  .header-entry {
     .#{$bp-ns}-icon {
       svg {
         fill: $blue3;
@@ -76,6 +73,12 @@
         }
       }
     }
+  }
+
+  .#{$bp-ns}-button.#{$bp-ns}-minimal {
+    border-radius: 20px;
+    margin: 0 1px;
+
     .#{$bp-ns}-dark & {
       &:hover {
         background: rgba($dark-gray5, 0.5);
diff --git a/web-console/src/components/header-bar/header-bar.spec.tsx b/web-console/src/components/header-bar/header-bar.spec.tsx
index 61650aa7aa9c..2e17be7058b8 100644
--- a/web-console/src/components/header-bar/header-bar.spec.tsx
+++ b/web-console/src/components/header-bar/header-bar.spec.tsx
@@ -26,7 +26,7 @@ import { HeaderBar } from './header-bar';
 describe('HeaderBar', () => {
   it('matches snapshot', () => {
     const headerBar = shallow(
-      <HeaderBar active="load-data" capabilities={Capabilities.FULL} onUnrestrict={() => {}} />,
+      <HeaderBar active="workbench" capabilities={Capabilities.FULL} onUnrestrict={() => {}} />,
     );
     expect(headerBar).toMatchSnapshot();
   });
diff --git a/web-console/src/components/header-bar/header-bar.tsx b/web-console/src/components/header-bar/header-bar.tsx
index 53042d91a22d..2d5b56af4d2f 100644
--- a/web-console/src/components/header-bar/header-bar.tsx
+++ b/web-console/src/components/header-bar/header-bar.tsx
@@ -28,6 +28,7 @@ import {
   NavbarDivider,
   NavbarGroup,
   Position,
+  Tag,
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { Popover2 } from '@blueprintjs/popover2';
@@ -46,6 +47,7 @@ import {
   LocalStorageKeys,
   localStorageRemove,
   localStorageSetJson,
+  oneOf,
 } from '../../utils';
 import { ExternalLink } from '../external-link/external-link';
 import { PopoverText } from '../popover-text/popover-text';
@@ -56,12 +58,16 @@ const capabilitiesOverride = localStorageGetJson(LocalStorageKeys.CAPABILITIES_O
 
 export type HeaderActiveTab =
   | null
-  | 'load-data'
+  | 'data-loader'
+  | 'streaming-data-loader'
+  | 'classic-batch-data-loader'
   | 'ingestion'
   | 'datasources'
   | 'segments'
   | 'services'
   | 'query'
+  | 'workbench'
+  | 'sql-data-loader'
   | 'lookups';
 
 const DruidLogo = React.memo(function DruidLogo() {
@@ -233,7 +239,52 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
   const [coordinatorDynamicConfigDialogOpen, setCoordinatorDynamicConfigDialogOpen] =
     useState(false);
   const [overlordDynamicConfigDialogOpen, setOverlordDynamicConfigDialogOpen] = useState(false);
-  const loadDataPrimary = false;
+
+  const showSplitDataLoaderMenu = capabilities.hasMultiStageQuery();
+
+  const loadDataViewsMenuActive = oneOf(
+    active,
+    'data-loader',
+    'streaming-data-loader',
+    'classic-batch-data-loader',
+    'sql-data-loader',
+  );
+  const loadDataViewsMenu = (
+    <Menu>
+      <MenuItem
+        icon={IconNames.FEED}
+        text="Streaming"
+        href="#streaming-data-loader"
+        selected={active === 'streaming-data-loader'}
+      />
+      <MenuItem
+        icon={IconNames.CLEAN}
+        text="Batch - SQL"
+        href="#sql-data-loader"
+        labelElement={<Tag minimal>multi-stage-query</Tag>}
+        selected={active === 'sql-data-loader'}
+      />
+      <MenuItem
+        icon={IconNames.LIST}
+        text="Batch - classic"
+        href="#classic-batch-data-loader"
+        selected={active === 'classic-batch-data-loader'}
+      />
+    </Menu>
+  );
+
+  const moreViewsMenuActive = oneOf(active, 'lookups');
+  const moreViewsMenu = (
+    <Menu>
+      <MenuItem
+        icon={IconNames.PROPERTIES}
+        text="Lookups"
+        href="#lookups"
+        disabled={!capabilities.hasCoordinatorAccess()}
+        selected={active === 'lookups'}
+      />
+    </Menu>
+  );
 
   const helpMenu = (
     <Menu>
@@ -290,13 +341,7 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
         onClick={() => setOverlordDynamicConfigDialogOpen(true)}
         disabled={!capabilities.hasOverlordAccess()}
       />
-      <MenuItem
-        icon={IconNames.PROPERTIES}
-        active={active === 'lookups'}
-        text="Lookups"
-        href="#lookups"
-        disabled={!capabilities.hasCoordinatorAccess()}
-      />
+
       <MenuDivider />
       <MenuItem icon={IconNames.COG} text="Console options">
         {capabilitiesOverride ? (
@@ -339,28 +384,50 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
         <a href="#">
           <DruidLogo />
         </a>
-
-        <NavbarDivider />
-        <AnchorButton
-          icon={IconNames.CLOUD_UPLOAD}
-          text="Load data"
-          active={active === 'load-data'}
-          href="#load-data"
-          minimal={!loadDataPrimary}
-          intent={loadDataPrimary ? Intent.PRIMARY : Intent.NONE}
-          disabled={!capabilities.hasEverything()}
-        />
-
         <NavbarDivider />
         <AnchorButton
+          className="header-entry"
           minimal
-          active={active === 'ingestion'}
-          icon={IconNames.GANTT_CHART}
-          text="Ingestion"
-          href="#ingestion"
-          disabled={!capabilities.hasSqlOrOverlordAccess()}
+          active={oneOf(active, 'workbench', 'query')}
+          icon={IconNames.APPLICATION}
+          text="Query"
+          href="#workbench"
+          disabled={!capabilities.hasQuerying()}
+          onClick={e => {
+            if (!e.altKey) return;
+            e.preventDefault();
+            location.hash = '#query';
+          }}
         />
+        {showSplitDataLoaderMenu ? (
+          <Popover2
+            content={loadDataViewsMenu}
+            disabled={!capabilities.hasEverything()}
+            position={Position.BOTTOM_LEFT}
+          >
+            <Button
+              className="header-entry"
+              icon={IconNames.CLOUD_UPLOAD}
+              text="Load data"
+              minimal
+              active={loadDataViewsMenuActive}
+              disabled={!capabilities.hasEverything()}
+            />
+          </Popover2>
+        ) : (
+          <AnchorButton
+            className="header-entry"
+            icon={IconNames.CLOUD_UPLOAD}
+            text="Load data"
+            href="#data-loader"
+            minimal
+            active={loadDataViewsMenuActive}
+            disabled={!capabilities.hasEverything()}
+          />
+        )}
+        <NavbarDivider />
         <AnchorButton
+          className="header-entry"
           minimal
           active={active === 'datasources'}
           icon={IconNames.MULTI_SELECT}
@@ -369,6 +436,16 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
           disabled={!capabilities.hasSqlOrCoordinatorAccess()}
         />
         <AnchorButton
+          className="header-entry"
+          minimal
+          active={active === 'ingestion'}
+          icon={IconNames.GANTT_CHART}
+          text="Ingestion"
+          href="#ingestion"
+          disabled={!capabilities.hasSqlOrOverlordAccess()}
+        />
+        <AnchorButton
+          className="header-entry"
           minimal
           active={active === 'segments'}
           icon={IconNames.STACKED_CHART}
@@ -377,6 +454,7 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
           disabled={!capabilities.hasSqlOrCoordinatorAccess()}
         />
         <AnchorButton
+          className="header-entry"
           minimal
           active={active === 'services'}
           icon={IconNames.DATABASE}
@@ -384,24 +462,22 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
           href="#services"
           disabled={!capabilities.hasSqlOrCoordinatorAccess()}
         />
-
-        <NavbarDivider />
-        <AnchorButton
-          minimal
-          active={active === 'query'}
-          icon={IconNames.APPLICATION}
-          text="Query"
-          href="#query"
-          disabled={!capabilities.hasQuerying()}
-        />
+        <Popover2 content={moreViewsMenu} position={Position.BOTTOM_LEFT}>
+          <Button
+            className="header-entry"
+            minimal
+            icon={IconNames.MORE}
+            active={moreViewsMenuActive}
+          />
+        </Popover2>
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
         <RestrictedMode capabilities={capabilities} onUnrestrict={onUnrestrict} />
         <Popover2 content={configMenu} position={Position.BOTTOM_RIGHT}>
-          <Button minimal icon={IconNames.COG} />
+          <Button className="header-entry" minimal icon={IconNames.COG} />
         </Popover2>
         <Popover2 content={helpMenu} position={Position.BOTTOM_RIGHT}>
-          <Button minimal icon={IconNames.HELP} />
+          <Button className="header-entry" minimal icon={IconNames.HELP} />
         </Popover2>
       </NavbarGroup>
       {aboutDialogOpen && <AboutDialog onClose={() => setAboutDialogOpen(false)} />}
diff --git a/web-console/src/components/index.ts b/web-console/src/components/index.ts
index d3418fdc718a..56da96759930 100644
--- a/web-console/src/components/index.ts
+++ b/web-console/src/components/index.ts
@@ -23,27 +23,39 @@ export * from './auto-form/auto-form';
 export * from './braced-text/braced-text';
 export * from './center-message/center-message';
 export * from './clearable-input/clearable-input';
+export * from './click-to-copy/click-to-copy';
+export * from './deferred/deferred';
 export * from './deferred/deferred';
 export * from './external-link/external-link';
+export * from './fancy-tab-pane/fancy-tab-pane';
+export * from './form-group-with-info/form-group-with-info';
 export * from './form-json-selector/form-json-selector';
 export * from './formatted-input/formatted-input';
 export * from './header-bar/header-bar';
 export * from './highlight-text/highlight-text';
 export * from './json-collapse/json-collapse';
 export * from './json-input/json-input';
+export * from './learn-more/learn-more';
 export * from './loader/loader';
 export * from './menu-checkbox/menu-checkbox';
+export * from './menu-tristate/menu-tristate';
 export * from './more-button/more-button';
+export * from './plural-pair-if-needed/plural-pair-if-needed';
 export * from './popover-text/popover-text';
+export * from './query-error-pane/query-error-pane';
+export * from './record-table-pane/record-table-pane';
 export * from './refresh-button/refresh-button';
 export * from './rule-editor/rule-editor';
 export * from './segment-timeline/segment-timeline';
 export * from './show-json/show-json';
 export * from './show-log/show-log';
+export * from './show-value/show-value';
 export * from './suggestion-menu/suggestion-menu';
 export * from './table-cell/table-cell';
+export * from './table-cell-unparseable/table-cell-unparseable';
 export * from './table-clickable-cell/table-clickable-cell';
 export * from './table-column-selector/table-column-selector';
 export * from './table-filterable-cell/table-filterable-cell';
 export * from './timed-button/timed-button';
 export * from './view-control-bar/view-control-bar';
+export * from './warning-checklist/warning-checklist';
diff --git a/web-console/src/components/interval-input/interval-input.tsx b/web-console/src/components/interval-input/interval-input.tsx
index 5cc5e26056bc..ccbe212dcc76 100644
--- a/web-console/src/components/interval-input/interval-input.tsx
+++ b/web-console/src/components/interval-input/interval-input.tsx
@@ -60,7 +60,7 @@ export const IntervalInput = React.memo(function IntervalInput(props: IntervalIn
         </div>
       }
       onChange={(e: any) => {
-        const value = e.target.value.replace(/[^\-0-9T:/]/g, '').substring(0, 39);
+        const value = e.target.value.replace(/[^\-\dT:/]/g, '').substring(0, 39);
         onValueChange(value);
       }}
       intent={intent}
diff --git a/web-console/src/views/load-data-view/learn-more/__snapshots__/learn-more.spec.tsx.snap b/web-console/src/components/learn-more/__snapshots__/learn-more.spec.tsx.snap
similarity index 100%
rename from web-console/src/views/load-data-view/learn-more/__snapshots__/learn-more.spec.tsx.snap
rename to web-console/src/components/learn-more/__snapshots__/learn-more.spec.tsx.snap
diff --git a/web-console/src/views/load-data-view/learn-more/learn-more.spec.tsx b/web-console/src/components/learn-more/learn-more.spec.tsx
similarity index 100%
rename from web-console/src/views/load-data-view/learn-more/learn-more.spec.tsx
rename to web-console/src/components/learn-more/learn-more.spec.tsx
diff --git a/web-console/src/views/load-data-view/learn-more/learn-more.tsx b/web-console/src/components/learn-more/learn-more.tsx
similarity index 94%
rename from web-console/src/views/load-data-view/learn-more/learn-more.tsx
rename to web-console/src/components/learn-more/learn-more.tsx
index afbdf9d92f03..2f2e8d3fbede 100644
--- a/web-console/src/views/load-data-view/learn-more/learn-more.tsx
+++ b/web-console/src/components/learn-more/learn-more.tsx
@@ -18,7 +18,7 @@
 
 import React from 'react';
 
-import { ExternalLink } from '../../../components';
+import { ExternalLink } from '../external-link/external-link';
 
 export interface LearnMoreProps {
   href: string;
diff --git a/web-console/src/components/menu-checkbox/menu-checkbox.tsx b/web-console/src/components/menu-checkbox/menu-checkbox.tsx
index 9477c94cc546..33aa72b7d55b 100644
--- a/web-console/src/components/menu-checkbox/menu-checkbox.tsx
+++ b/web-console/src/components/menu-checkbox/menu-checkbox.tsx
@@ -17,10 +17,11 @@
  */
 
 import { MenuItem, MenuItemProps } from '@blueprintjs/core';
-import { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import React from 'react';
 
+import { checkedCircleIcon } from '../../utils';
+
 export interface MenuCheckboxProps extends Omit<MenuItemProps, 'icon' | 'onClick'> {
   checked: boolean;
   onChange: () => void;
@@ -32,7 +33,7 @@ export function MenuCheckbox(props: MenuCheckboxProps) {
   return (
     <MenuItem
       className={classNames('menu-checkbox', className)}
-      icon={checked ? IconNames.TICK_CIRCLE : IconNames.CIRCLE}
+      icon={checkedCircleIcon(checked)}
       onClick={onChange}
       shouldDismissPopover={shouldDismissPopover ?? false}
       {...rest}
diff --git a/web-console/src/components/menu-tristate/__snapshots__/menu-tristate.spec.tsx.snap b/web-console/src/components/menu-tristate/__snapshots__/menu-tristate.spec.tsx.snap
new file mode 100644
index 000000000000..60942ec6a59d
--- /dev/null
+++ b/web-console/src/components/menu-tristate/__snapshots__/menu-tristate.spec.tsx.snap
@@ -0,0 +1,103 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MenuTristate matches snapshot false 1`] = `
+<li
+  class="bp4-submenu"
+>
+  <span
+    class="bp4-popover-wrapper"
+  >
+    <span
+      aria-haspopup="true"
+      class="bp4-popover-target"
+    >
+      <a
+        class="bp4-menu-item menu-tristate"
+        label="false"
+        tabindex="0"
+      >
+        <div
+          class="bp4-fill bp4-text-overflow-ellipsis"
+        >
+          hello
+        </div>
+        <span
+          class="bp4-menu-item-label"
+        >
+          false
+        </span>
+        <span
+          class="bp4-icon bp4-icon-caret-right bp4-submenu-icon"
+          icon="caret-right"
+        >
+          <svg
+            data-icon="caret-right"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <desc>
+              Open sub menu
+            </desc>
+            <path
+              d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </span>
+      </a>
+    </span>
+  </span>
+</li>
+`;
+
+exports[`MenuTristate matches snapshot undefined 1`] = `
+<li
+  class="bp4-submenu"
+>
+  <span
+    class="bp4-popover-wrapper"
+  >
+    <span
+      aria-haspopup="true"
+      class="bp4-popover-target"
+    >
+      <a
+        class="bp4-menu-item menu-tristate"
+        label="auto (true)"
+        tabindex="0"
+      >
+        <div
+          class="bp4-fill bp4-text-overflow-ellipsis"
+        >
+          hello
+        </div>
+        <span
+          class="bp4-menu-item-label"
+        >
+          auto (true)
+        </span>
+        <span
+          class="bp4-icon bp4-icon-caret-right bp4-submenu-icon"
+          icon="caret-right"
+        >
+          <svg
+            data-icon="caret-right"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <desc>
+              Open sub menu
+            </desc>
+            <path
+              d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </span>
+      </a>
+    </span>
+  </span>
+</li>
+`;
diff --git a/web-console/src/components/menu-tristate/menu-tristate.spec.tsx b/web-console/src/components/menu-tristate/menu-tristate.spec.tsx
new file mode 100644
index 000000000000..40fbc54f0db3
--- /dev/null
+++ b/web-console/src/components/menu-tristate/menu-tristate.spec.tsx
@@ -0,0 +1,50 @@
+/*
+ * 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 { render } from '@testing-library/react';
+import React from 'react';
+
+import { MenuTristate } from './menu-tristate';
+
+describe('MenuTristate', () => {
+  it('matches snapshot undefined', () => {
+    const menuCheckbox = (
+      <MenuTristate
+        text="hello"
+        value={undefined}
+        undefinedEffectiveValue
+        onValueChange={() => {}}
+      />
+    );
+    const { container } = render(menuCheckbox);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('matches snapshot false', () => {
+    const menuCheckbox = (
+      <MenuTristate
+        text="hello"
+        value={false}
+        undefinedEffectiveValue={false}
+        onValueChange={() => {}}
+      />
+    );
+    const { container } = render(menuCheckbox);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/web-console/src/components/menu-tristate/menu-tristate.tsx b/web-console/src/components/menu-tristate/menu-tristate.tsx
new file mode 100644
index 000000000000..7f54d1a31949
--- /dev/null
+++ b/web-console/src/components/menu-tristate/menu-tristate.tsx
@@ -0,0 +1,71 @@
+/*
+ * 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 { MenuItem, MenuItemProps } from '@blueprintjs/core';
+import classNames from 'classnames';
+import React from 'react';
+
+import { tickIcon } from '../../utils';
+
+export interface MenuTristateProps extends Omit<MenuItemProps, 'label'> {
+  value: boolean | undefined;
+  onValueChange(value: boolean | undefined): void;
+  undefinedLabel?: string;
+  undefinedEffectiveValue?: boolean;
+}
+
+export function MenuTristate(props: MenuTristateProps) {
+  const {
+    value,
+    onValueChange,
+    undefinedLabel,
+    undefinedEffectiveValue,
+    className,
+    shouldDismissPopover,
+    ...rest
+  } = props;
+  const shouldDismiss = shouldDismissPopover ?? false;
+
+  function formatValue(value: boolean | undefined): string {
+    return String(value ?? undefinedLabel ?? 'auto');
+  }
+
+  return (
+    <MenuItem
+      className={classNames('menu-tristate', className)}
+      shouldDismissPopover={shouldDismiss}
+      label={
+        formatValue(value) +
+        (typeof value === 'undefined' && typeof undefinedEffectiveValue === 'boolean'
+          ? ` (${undefinedEffectiveValue})`
+          : '')
+      }
+      {...rest}
+    >
+      {[undefined, true, false].map((v, i) => (
+        <MenuItem
+          key={i}
+          icon={tickIcon(value === v)}
+          text={formatValue(v)}
+          onClick={() => onValueChange(v)}
+          shouldDismissPopover={shouldDismiss}
+        />
+      ))}
+    </MenuItem>
+  );
+}
diff --git a/web-console/src/components/more-button/__snapshots__/more-button.spec.tsx.snap b/web-console/src/components/more-button/__snapshots__/more-button.spec.tsx.snap
index 119b10c70dd5..21d4875e3f2b 100644
--- a/web-console/src/components/more-button/__snapshots__/more-button.spec.tsx.snap
+++ b/web-console/src/components/more-button/__snapshots__/more-button.spec.tsx.snap
@@ -9,6 +9,7 @@ exports[`MoreButton matches snapshot (empty) 1`] = `
     class="bp4-button bp4-disabled"
     disabled=""
     tabindex="-1"
+    title="More actions"
     type="button"
   >
     <span
@@ -40,6 +41,7 @@ exports[`MoreButton matches snapshot (full) 1`] = `
 >
   <button
     class="bp4-button"
+    title="More actions"
     type="button"
   >
     <span
diff --git a/web-console/src/components/more-button/more-button.tsx b/web-console/src/components/more-button/more-button.tsx
index a7ac38a6c22c..16157b34b87a 100644
--- a/web-console/src/components/more-button/more-button.tsx
+++ b/web-console/src/components/more-button/more-button.tsx
@@ -55,7 +55,7 @@ export const MoreButton = React.memo(function MoreButton(props: MoreButtonProps)
         setOpenState(nextOpenState ? (e.altKey ? 'alt-open' : 'open') : undefined);
       }}
     >
-      <Button icon={IconNames.MORE} disabled={!childCount} />
+      <Button icon={IconNames.MORE} disabled={!childCount} title="More actions" />
     </Popover2>
   );
 });
diff --git a/web-console/src/views/query-view/query-error/__snapshots__/query-error.spec.tsx.snap b/web-console/src/components/query-error-pane/__snapshots__/query-error-pane.spec.tsx.snap
similarity index 56%
rename from web-console/src/views/query-view/query-error/__snapshots__/query-error.spec.tsx.snap
rename to web-console/src/components/query-error-pane/__snapshots__/query-error-pane.spec.tsx.snap
index 763023585266..2402e0dabba7 100644
--- a/web-console/src/views/query-view/query-error/__snapshots__/query-error.spec.tsx.snap
+++ b/web-console/src/components/query-error-pane/__snapshots__/query-error-pane.spec.tsx.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`QueryError matches snapshot 1`] = `
+exports[`QueryErrorPane matches snapshot 1`] = `
 <div
-  className="query-error"
+  className="query-error-pane"
 >
   something went wrong in line 7, column 8.
 </div>
diff --git a/web-console/src/components/query-error-pane/query-error-pane.scss b/web-console/src/components/query-error-pane/query-error-pane.scss
new file mode 100644
index 000000000000..a1c62f2bcba4
--- /dev/null
+++ b/web-console/src/components/query-error-pane/query-error-pane.scss
@@ -0,0 +1,28 @@
+/*
+ * 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 '../../blueprint-overrides/common/colors';
+@import '../../variables';
+
+.query-error-pane {
+  padding: 20px 22px;
+
+  .#{$bp-ns}-dark & {
+    background: $dark-gray3;
+  }
+}
diff --git a/web-console/src/views/query-view/query-error/query-error.spec.tsx b/web-console/src/components/query-error-pane/query-error-pane.spec.tsx
similarity index 90%
rename from web-console/src/views/query-view/query-error/query-error.spec.tsx
rename to web-console/src/components/query-error-pane/query-error-pane.spec.tsx
index 52ece640aa6a..b85c2da6cc07 100644
--- a/web-console/src/views/query-view/query-error/query-error.spec.tsx
+++ b/web-console/src/components/query-error-pane/query-error-pane.spec.tsx
@@ -19,12 +19,12 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 
-import { QueryError } from './query-error';
+import { QueryErrorPane } from './query-error-pane';
 
-describe('QueryError', () => {
+describe('QueryErrorPane', () => {
   it('matches snapshot', () => {
     const queryError = shallow(
-      <QueryError
+      <QueryErrorPane
         error={new Error('something went wrong in line 7, column 8.')}
         moveCursorTo={() => {}}
       />,
diff --git a/web-console/src/views/query-view/query-error/query-error.tsx b/web-console/src/components/query-error-pane/query-error-pane.tsx
similarity index 76%
rename from web-console/src/views/query-view/query-error/query-error.tsx
rename to web-console/src/components/query-error-pane/query-error-pane.tsx
index 2e0c8296bded..f2e23172dd94 100644
--- a/web-console/src/views/query-view/query-error/query-error.tsx
+++ b/web-console/src/components/query-error-pane/query-error-pane.tsx
@@ -18,24 +18,24 @@
 
 import React, { useState } from 'react';
 
-import { HighlightText } from '../../../components';
-import { DruidError, RowColumn } from '../../../utils';
+import { DruidError, RowColumn } from '../../utils';
+import { HighlightText } from '../highlight-text/highlight-text';
 
-import './query-error.scss';
+import './query-error-pane.scss';
 
-export interface QueryErrorProps {
+export interface QueryErrorPaneProps {
   error: DruidError;
   moveCursorTo: (rowColumn: RowColumn) => void;
   queryString?: string;
   onQueryStringChange?: (newQueryString: string, run?: boolean) => void;
 }
 
-export const QueryError = React.memo(function QueryError(props: QueryErrorProps) {
+export const QueryErrorPane = React.memo(function QueryErrorPane(props: QueryErrorPaneProps) {
   const { error, moveCursorTo, queryString, onQueryStringChange } = props;
   const [showMode, setShowMore] = useState(false);
 
   if (!error.errorMessage) {
-    return <div className="query-error">{error.message}</div>;
+    return <div className="query-error-pane">{error.message}</div>;
   }
 
   const { position, suggestion } = error;
@@ -46,21 +46,20 @@ export const QueryError = React.memo(function QueryError(props: QueryErrorProps)
       suggestionElement = (
         <p>
           Suggestion:{' '}
-          <span
-            className="suggestion"
+          <a
             onClick={() => {
               onQueryStringChange(newQuery, true);
             }}
           >
             {suggestion.label}
-          </span>
+          </a>
         </p>
       );
     }
   }
 
   return (
-    <div className="query-error">
+    <div className="query-error-pane">
       {suggestionElement}
       {error.error && <p>{`Error: ${error.error}`}</p>}
       {error.errorMessageWithoutExpectation && (
@@ -70,14 +69,13 @@ export const QueryError = React.memo(function QueryError(props: QueryErrorProps)
               text={error.errorMessageWithoutExpectation}
               find={position.match}
               replace={
-                <span
-                  className="cursor-link"
+                <a
                   onClick={() => {
                     moveCursorTo(position);
                   }}
                 >
                   {position.match}
-                </span>
+                </a>
               }
             />
           ) : (
@@ -86,19 +84,14 @@ export const QueryError = React.memo(function QueryError(props: QueryErrorProps)
           {error.expectation && !showMode && (
             <>
               {' '}
-              <span className="more-or-less" onClick={() => setShowMore(true)}>
-                More...
-              </span>
+              <a onClick={() => setShowMore(true)}>More...</a>
             </>
           )}
         </p>
       )}
       {error.expectation && showMode && (
         <p>
-          {error.expectation}{' '}
-          <span className="more-or-less" onClick={() => setShowMore(false)}>
-            Less...
-          </span>
+          {error.expectation} <a onClick={() => setShowMore(false)}>Less...</a>
         </p>
       )}
       {error.errorClass && <p>{error.errorClass}</p>}
diff --git a/web-console/src/components/record-table-pane/record-table-pane.scss b/web-console/src/components/record-table-pane/record-table-pane.scss
new file mode 100644
index 000000000000..d00a2e3d322f
--- /dev/null
+++ b/web-console/src/components/record-table-pane/record-table-pane.scss
@@ -0,0 +1,113 @@
+/*
+ * 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 '../../variables';
+@import '../../blueprint-overrides/common/colors';
+
+.record-table-pane {
+  position: relative;
+
+  &.more-results .-totalPages {
+    // Hide the total page counter as it can be confusing due to the auto limit
+    display: none;
+  }
+
+  .dead-end {
+    position: absolute;
+    left: 50%;
+    top: 45%;
+    transform: translate(-50%, -50%);
+    width: 350px;
+
+    p {
+      text-align: center;
+    }
+
+    > * {
+      margin-bottom: 10px;
+    }
+  }
+
+  .ReactTable {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    font-feature-settings: tnum;
+    font-variant-numeric: tabular-nums;
+
+    .rt-thead.-header {
+      box-shadow: 0 1px 0 0 rgba(black, 0.2); // This is a hack! this line is sometimes too weak in tables.
+
+      .rt-th {
+        &.aggregate-header {
+          background: rgba($druid-brand, 0.06);
+        }
+
+        .asc {
+          box-shadow: inset 0 3px 0 0 rgba(255, 255, 255, 0.6);
+        }
+
+        .desc {
+          box-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.6);
+        }
+
+        .#{$bp-ns}-icon {
+          margin-left: 3px;
+        }
+
+        .output-name {
+          overflow: hidden;
+          text-overflow: ellipsis;
+
+          > * {
+            display: inline-block;
+            vertical-align: top;
+          }
+
+          .type-icon {
+            margin-top: 3px;
+            margin-right: 5px;
+          }
+        }
+
+        .formula {
+          font-family: monospace;
+          font-size: 11px;
+          margin-top: 4px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+
+    .rt-td {
+      cursor: pointer;
+    }
+  }
+
+  .clickable-cell {
+    padding: $table-cell-v-padding $table-cell-h-padding;
+    cursor: pointer;
+    width: 100%;
+  }
+
+  .#{$bp-ns}-popover2-target {
+    width: 100%;
+  }
+}
diff --git a/web-console/src/components/record-table-pane/record-table-pane.tsx b/web-console/src/components/record-table-pane/record-table-pane.tsx
new file mode 100644
index 000000000000..699a4424d43c
--- /dev/null
+++ b/web-console/src/components/record-table-pane/record-table-pane.tsx
@@ -0,0 +1,282 @@
+/*
+ * 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 { Button, Icon, Menu, MenuItem } from '@blueprintjs/core';
+import { IconName, IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
+import classNames from 'classnames';
+import {
+  Column,
+  QueryResult,
+  SqlExpression,
+  SqlLiteral,
+  SqlRef,
+  trimString,
+} from 'druid-query-toolkit';
+import React, { useEffect, useState } from 'react';
+import ReactTable from 'react-table';
+
+import { ShowValueDialog } from '../../dialogs/show-value-dialog/show-value-dialog';
+import { SMALL_TABLE_PAGE_SIZE, SMALL_TABLE_PAGE_SIZE_OPTIONS } from '../../react-table';
+import {
+  columnToIcon,
+  columnToWidth,
+  copyAndAlert,
+  filterMap,
+  formatNumber,
+  getNumericColumnBraces,
+  Pagination,
+  prettyPrintSql,
+  stringifyValue,
+} from '../../utils';
+import { BracedText } from '../braced-text/braced-text';
+import { Deferred } from '../deferred/deferred';
+import { TableCell } from '../table-cell/table-cell';
+
+import './record-table-pane.scss';
+
+function sqlLiteralForColumnValue(column: Column, value: unknown): SqlLiteral | undefined {
+  if (column.sqlType === 'TIMESTAMP') {
+    const asDate = new Date(value as any);
+    if (!isNaN(asDate.valueOf())) {
+      return SqlLiteral.create(asDate);
+    }
+  }
+
+  return SqlLiteral.maybe(value);
+}
+
+function isComparable(x: unknown): boolean {
+  return x !== null && x !== '';
+}
+
+export interface RecordTablePaneProps {
+  queryResult: QueryResult;
+  initPageSize?: number;
+  addFilter?(filter: string): void;
+}
+
+export const RecordTablePane = React.memo(function RecordTablePane(props: RecordTablePaneProps) {
+  const { queryResult, initPageSize, addFilter } = props;
+  const parsedQuery = queryResult.sqlQuery;
+  const [pagination, setPagination] = useState<Pagination>({
+    page: 0,
+    pageSize: initPageSize || 20,
+  });
+  const [showValue, setShowValue] = useState<string>();
+
+  // Reset page to 0 if number of results changes
+  useEffect(() => {
+    setPagination(pagination => {
+      return pagination.page ? { ...pagination, page: 0 } : pagination;
+    });
+  }, [queryResult.rows.length]);
+
+  function hasFilterOnHeader(header: string, headerIndex: number): boolean {
+    if (!parsedQuery || !parsedQuery.isRealOutputColumnAtSelectIndex(headerIndex)) return false;
+
+    return (
+      parsedQuery.getEffectiveWhereExpression().containsColumn(header) ||
+      parsedQuery.getEffectiveHavingExpression().containsColumn(header)
+    );
+  }
+
+  function filterOnMenuItem(icon: IconName, clause: SqlExpression) {
+    if (!parsedQuery || !addFilter) return;
+
+    return (
+      <MenuItem
+        icon={icon}
+        text={`Filter on: ${prettyPrintSql(clause)}`}
+        onClick={() => {
+          addFilter(clause.toString());
+        }}
+      />
+    );
+  }
+
+  function actionMenuItem(clause: SqlExpression) {
+    if (!addFilter) return;
+    const prettyLabel = prettyPrintSql(clause);
+    return (
+      <MenuItem
+        icon={IconNames.FILTER}
+        text={`Filter: ${prettyLabel}`}
+        onClick={() => addFilter(clause.toString())}
+      />
+    );
+  }
+
+  function getCellMenu(column: Column, headerIndex: number, value: unknown) {
+    const showFullValueMenuItem = (
+      <MenuItem
+        icon={IconNames.EYE_OPEN}
+        text="Show full value"
+        onClick={() => {
+          setShowValue(stringifyValue(value));
+        }}
+      />
+    );
+
+    const val = sqlLiteralForColumnValue(column, value);
+
+    if (parsedQuery) {
+      let ex: SqlExpression | undefined;
+      if (parsedQuery.hasStarInSelect()) {
+        ex = SqlRef.column(column.name);
+      } else {
+        const selectValue = parsedQuery.getSelectExpressionForIndex(headerIndex);
+        if (selectValue) {
+          ex = selectValue.getUnderlyingExpression();
+        }
+      }
+
+      const jsonColumn = column.nativeType === 'COMPLEX<json>';
+      return (
+        <Menu>
+          {ex && val && !jsonColumn && (
+            <>
+              {filterOnMenuItem(IconNames.FILTER, ex.equal(val))}
+              {filterOnMenuItem(IconNames.FILTER, ex.unequal(val))}
+              {isComparable(value) && (
+                <>
+                  {filterOnMenuItem(IconNames.FILTER, ex.greaterThanOrEqual(val))}
+                  {filterOnMenuItem(IconNames.FILTER, ex.lessThanOrEqual(val))}
+                </>
+              )}
+            </>
+          )}
+          {showFullValueMenuItem}
+        </Menu>
+      );
+    } else {
+      const ref = SqlRef.column(column.name);
+      const stringValue = stringifyValue(value);
+      const trimmedValue = trimString(stringValue, 50);
+      return (
+        <Menu>
+          <MenuItem
+            icon={IconNames.CLIPBOARD}
+            text={`Copy: ${trimmedValue}`}
+            onClick={() => copyAndAlert(stringValue, `${trimmedValue} copied to clipboard`)}
+          />
+          {val && (
+            <>
+              {actionMenuItem(ref.equal(val))}
+              {actionMenuItem(ref.unequal(val))}
+            </>
+          )}
+          {showFullValueMenuItem}
+        </Menu>
+      );
+    }
+  }
+
+  function getHeaderClassName(header: string) {
+    if (!parsedQuery) return;
+
+    const className = [];
+
+    const orderBy = parsedQuery.getOrderByForOutputColumn(header);
+    if (orderBy) {
+      className.push(orderBy.getEffectiveDirection() === 'DESC' ? '-sort-desc' : '-sort-asc');
+    }
+
+    return className.join(' ');
+  }
+
+  const outerLimit = queryResult.getSqlOuterLimit();
+  const hasMoreResults = queryResult.rows.length === outerLimit;
+  const finalPage =
+    hasMoreResults && Math.floor(queryResult.rows.length / pagination.pageSize) === pagination.page; // on the last page
+
+  const numericColumnBraces = getNumericColumnBraces(queryResult, pagination);
+  return (
+    <div className={classNames('record-table-pane', { 'more-results': hasMoreResults })}>
+      {finalPage ? (
+        <div className="dead-end">
+          <p>This is the end of the inline results but there are more results in this query.</p>
+          <Button
+            icon={IconNames.ARROW_LEFT}
+            text="Go to previous page"
+            fill
+            onClick={() => setPagination({ ...pagination, page: pagination.page - 1 })}
+          />
+        </div>
+      ) : (
+        <ReactTable
+          className="-striped -highlight"
+          data={queryResult.rows as any[][]}
+          ofText={hasMoreResults ? '' : 'of'}
+          noDataText={queryResult.rows.length ? '' : 'Query returned no data'}
+          page={pagination.page}
+          pageSize={pagination.pageSize}
+          onPageChange={page => setPagination({ ...pagination, page })}
+          onPageSizeChange={(pageSize, page) => setPagination({ page, pageSize })}
+          sortable={false}
+          defaultPageSize={SMALL_TABLE_PAGE_SIZE}
+          pageSizeOptions={SMALL_TABLE_PAGE_SIZE_OPTIONS}
+          showPagination={
+            queryResult.rows.length > Math.min(SMALL_TABLE_PAGE_SIZE, pagination.pageSize)
+          }
+          columns={filterMap(queryResult.header, (column, i) => {
+            const h = column.name;
+            const icon = columnToIcon(column);
+
+            return {
+              Header() {
+                return (
+                  <div className="clickable-cell">
+                    <div className="output-name">
+                      {icon && <Icon className="type-icon" icon={icon} size={12} />}
+                      {h}
+                      {hasFilterOnHeader(h, i) && <Icon icon={IconNames.FILTER} size={14} />}
+                    </div>
+                  </div>
+                );
+              },
+              headerClassName: getHeaderClassName(h),
+              accessor: String(i),
+              Cell(row) {
+                const value = row.value;
+                return (
+                  <div>
+                    <Popover2 content={<Deferred content={() => getCellMenu(column, i, value)} />}>
+                      {numericColumnBraces[i] ? (
+                        <BracedText
+                          className="table-padding"
+                          text={formatNumber(value)}
+                          braces={numericColumnBraces[i]}
+                          padFractionalPart
+                        />
+                      ) : (
+                        <TableCell value={value} unlimited />
+                      )}
+                    </Popover2>
+                  </div>
+                );
+              },
+              width: columnToWidth(column),
+            };
+          })}
+        />
+      )}
+      {showValue && <ShowValueDialog onClose={() => setShowValue(undefined)} str={showValue} />}
+    </div>
+  );
+});
diff --git a/web-console/src/components/show-json/show-json.tsx b/web-console/src/components/show-json/show-json.tsx
index c840c95e24bc..2986febc4a08 100644
--- a/web-console/src/components/show-json/show-json.tsx
+++ b/web-console/src/components/show-json/show-json.tsx
@@ -87,7 +87,7 @@ export const ShowJson = React.memo(function ShowJson(props: ShowJsonProps) {
         ) : (
           <AceEditor
             mode="hjson"
-            theme="tomorrow"
+            theme="solarized_dark"
             readOnly
             fontSize={12}
             width="100%"
diff --git a/web-console/src/components/table-cell-unparseable/table-cell-unparseable.scss b/web-console/src/components/table-cell-unparseable/table-cell-unparseable.scss
index 43efe5085bf8..9819fb4b1f7d 100644
--- a/web-console/src/components/table-cell-unparseable/table-cell-unparseable.scss
+++ b/web-console/src/components/table-cell-unparseable/table-cell-unparseable.scss
@@ -16,6 +16,9 @@
  * limitations under the License.
  */
 
+@import '../../variables';
+
 .table-cell-unparseable {
+  padding: $table-cell-v-padding $table-cell-h-padding;
   color: #9e2b0e;
 }
diff --git a/web-console/src/components/table-clickable-cell/table-clickable-cell.tsx b/web-console/src/components/table-clickable-cell/table-clickable-cell.tsx
index e2e79b1fcdb5..cc8cfd71e56d 100644
--- a/web-console/src/components/table-clickable-cell/table-clickable-cell.tsx
+++ b/web-console/src/components/table-clickable-cell/table-clickable-cell.tsx
@@ -17,23 +17,26 @@
  */
 
 import { Icon, IconName } from '@blueprintjs/core';
+import classNames from 'classnames';
 import React, { MouseEventHandler, ReactNode } from 'react';
 
 import './table-clickable-cell.scss';
 
 export interface TableClickableCellProps {
+  className?: string;
   onClick: MouseEventHandler<any>;
   hoverIcon?: IconName;
+  title?: string;
   children?: ReactNode;
 }
 
 export const TableClickableCell = React.memo(function TableClickableCell(
   props: TableClickableCellProps,
 ) {
-  const { onClick, hoverIcon, children } = props;
+  const { className, onClick, hoverIcon, title, children } = props;
 
   return (
-    <div className="table-clickable-cell" onClick={onClick}>
+    <div className={classNames('table-clickable-cell', className)} title={title} onClick={onClick}>
       {children}
       {hoverIcon && <Icon className="hover-icon" icon={hoverIcon} />}
     </div>
diff --git a/web-console/src/console-application.tsx b/web-console/src/console-application.tsx
index 731002632c03..d5dc61cebc9f 100644
--- a/web-console/src/console-application.tsx
+++ b/web-console/src/console-application.tsx
@@ -20,9 +20,11 @@ import { HotkeysProvider, Intent } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import React from 'react';
+import { RouteComponentProps } from 'react-router';
 import { HashRouter, Route, Switch } from 'react-router-dom';
 
 import { HeaderActiveTab, HeaderBar, Loader } from './components';
+import { DruidEngine, QueryWithContext } from './druid-models';
 import { AppToaster } from './singletons';
 import { Capabilities, QueryManager } from './utils';
 import {
@@ -34,6 +36,8 @@ import {
   QueryView,
   SegmentsView,
   ServicesView,
+  SqlDataLoaderView,
+  WorkbenchView,
 } from './views';
 
 import './console-application.scss';
@@ -75,7 +79,7 @@ export class ConsoleApplication extends React.PureComponent<
   private openDialog?: string;
   private datasource?: string;
   private onlyUnavailable?: boolean;
-  private initQuery?: string;
+  private queryWithContext?: QueryWithContext;
 
   constructor(props: ConsoleApplicationProps, context: any) {
     super(props, context);
@@ -119,14 +123,19 @@ export class ConsoleApplication extends React.PureComponent<
       this.openDialog = undefined;
       this.datasource = undefined;
       this.onlyUnavailable = undefined;
-      this.initQuery = undefined;
+      this.queryWithContext = undefined;
     }, 50);
   }
 
-  private readonly goToLoadData = (supervisorId?: string, taskId?: string) => {
-    if (taskId) this.taskId = taskId;
+  private readonly goToStreamingDataLoader = (supervisorId?: string) => {
     if (supervisorId) this.supervisorId = supervisorId;
-    window.location.hash = 'load-data';
+    window.location.hash = 'streaming-data-loader';
+    this.resetInitialsWithDelay();
+  };
+
+  private readonly goToClassicBatchDataLoader = (taskId?: string) => {
+    if (taskId) this.taskId = taskId;
+    window.location.hash = 'classic-batch-data-loader';
     this.resetInitialsWithDelay();
   };
 
@@ -143,6 +152,12 @@ export class ConsoleApplication extends React.PureComponent<
     this.resetInitialsWithDelay();
   };
 
+  private readonly goToIngestionWithTaskId = (taskId?: string) => {
+    this.taskId = taskId;
+    window.location.hash = 'ingestion';
+    this.resetInitialsWithDelay();
+  };
+
   private readonly goToIngestionWithTaskGroupId = (taskGroupId?: string, openDialog?: string) => {
     this.taskGroupId = taskGroupId;
     if (openDialog) this.openDialog = openDialog;
@@ -157,9 +172,9 @@ export class ConsoleApplication extends React.PureComponent<
     this.resetInitialsWithDelay();
   };
 
-  private readonly goToQuery = (initQuery: string) => {
-    this.initQuery = initQuery;
-    window.location.hash = 'query';
+  private readonly goToQuery = (queryWithContext: QueryWithContext) => {
+    this.queryWithContext = queryWithContext;
+    window.location.hash = 'workbench';
     this.resetInitialsWithDelay();
   };
 
@@ -187,13 +202,41 @@ export class ConsoleApplication extends React.PureComponent<
     return this.wrapInViewContainer(null, <HomeView capabilities={capabilities} />);
   };
 
-  private readonly wrappedLoadDataView = () => {
+  private readonly wrappedDataLoaderView = () => {
     const { exampleManifestsUrl } = this.props;
 
     return this.wrapInViewContainer(
-      'load-data',
+      'data-loader',
+      <LoadDataView
+        mode="all"
+        initTaskId={this.taskId}
+        initSupervisorId={this.supervisorId}
+        exampleManifestsUrl={exampleManifestsUrl}
+        goToIngestion={this.goToIngestionWithTaskGroupId}
+      />,
+      'narrow-pad',
+    );
+  };
+
+  private readonly wrappedStreamingDataLoaderView = () => {
+    return this.wrapInViewContainer(
+      'streaming-data-loader',
       <LoadDataView
+        mode="streaming"
         initSupervisorId={this.supervisorId}
+        goToIngestion={this.goToIngestionWithTaskGroupId}
+      />,
+      'narrow-pad',
+    );
+  };
+
+  private readonly wrappedClassicBatchDataLoaderView = () => {
+    const { exampleManifestsUrl } = this.props;
+
+    return this.wrapInViewContainer(
+      'classic-batch-data-loader',
+      <LoadDataView
+        mode="batch"
         initTaskId={this.taskId}
         exampleManifestsUrl={exampleManifestsUrl}
         goToIngestion={this.goToIngestionWithTaskGroupId}
@@ -208,7 +251,7 @@ export class ConsoleApplication extends React.PureComponent<
     return this.wrapInViewContainer(
       'query',
       <QueryView
-        initQuery={this.initQuery}
+        initQuery={this.queryWithContext?.queryString}
         defaultQueryContext={defaultQueryContext}
         mandatoryQueryContext={mandatoryQueryContext}
       />,
@@ -216,6 +259,43 @@ export class ConsoleApplication extends React.PureComponent<
     );
   };
 
+  private readonly wrappedWorkbenchView = (p: RouteComponentProps<any>) => {
+    const { defaultQueryContext, mandatoryQueryContext } = this.props;
+    const { capabilities } = this.state;
+
+    const queryEngines: DruidEngine[] = ['native'];
+    if (capabilities.hasSql()) {
+      queryEngines.push('sql-native');
+    }
+    if (capabilities.hasMultiStageQuery()) {
+      queryEngines.push('sql-msq-task');
+    }
+
+    return this.wrapInViewContainer(
+      'workbench',
+      <WorkbenchView
+        tabId={p.match.params.tabId}
+        onTabChange={newTabId => {
+          location.hash = `#workbench/${newTabId}`;
+        }}
+        initQueryWithContext={this.queryWithContext}
+        defaultQueryContext={defaultQueryContext}
+        mandatoryQueryContext={mandatoryQueryContext}
+        queryEngines={queryEngines}
+        allowExplain
+        goToIngestion={this.goToIngestionWithTaskId}
+      />,
+      'thin',
+    );
+  };
+
+  private readonly wrappedSqlDataLoaderView = () => {
+    return this.wrapInViewContainer(
+      'sql-data-loader',
+      <SqlDataLoaderView goToQuery={this.goToQuery} goToIngestion={this.goToIngestionWithTaskId} />,
+    );
+  };
+
   private readonly wrappedDatasourcesView = () => {
     const { capabilities } = this.state;
     return this.wrapInViewContainer(
@@ -248,12 +328,14 @@ export class ConsoleApplication extends React.PureComponent<
     return this.wrapInViewContainer(
       'ingestion',
       <IngestionView
+        taskId={this.taskId}
         taskGroupId={this.taskGroupId}
         datasourceId={this.datasource}
         openDialog={this.openDialog}
         goToDatasource={this.goToDatasources}
         goToQuery={this.goToQuery}
-        goToLoadData={this.goToLoadData}
+        goToStreamingDataLoader={this.goToStreamingDataLoader}
+        goToClassicBatchDataLoader={this.goToClassicBatchDataLoader}
         capabilities={capabilities}
       />,
     );
@@ -263,11 +345,7 @@ export class ConsoleApplication extends React.PureComponent<
     const { capabilities } = this.state;
     return this.wrapInViewContainer(
       'services',
-      <ServicesView
-        goToQuery={this.goToQuery}
-        goToTask={this.goToIngestionWithTaskGroupId}
-        capabilities={capabilities}
-      />,
+      <ServicesView goToQuery={this.goToQuery} capabilities={capabilities} />,
     );
   };
 
@@ -291,7 +369,15 @@ export class ConsoleApplication extends React.PureComponent<
         <HashRouter hashType="noslash">
           <div className="console-application">
             <Switch>
-              <Route path="/load-data" component={this.wrappedLoadDataView} />
+              <Route path="/data-loader" component={this.wrappedDataLoaderView} />
+              <Route
+                path="/streaming-data-loader"
+                component={this.wrappedStreamingDataLoaderView}
+              />
+              <Route
+                path="/classic-batch-data-loader"
+                component={this.wrappedClassicBatchDataLoaderView}
+              />
 
               <Route path="/ingestion" component={this.wrappedIngestionView} />
               <Route path="/datasources" component={this.wrappedDatasourcesView} />
@@ -299,6 +385,11 @@ export class ConsoleApplication extends React.PureComponent<
               <Route path="/services" component={this.wrappedServicesView} />
 
               <Route path="/query" component={this.wrappedQueryView} />
+              <Route
+                path={['/workbench/:tabId', '/workbench']}
+                component={this.wrappedWorkbenchView}
+              />
+              <Route path="/sql-data-loader" component={this.wrappedSqlDataLoaderView} />
 
               <Route path="/lookups" component={this.wrappedLookupsView} />
               <Route component={this.wrappedHomeView} />
diff --git a/web-console/src/dialogs/async-action-dialog/async-action-dialog.tsx b/web-console/src/dialogs/async-action-dialog/async-action-dialog.tsx
index ada4620e58f9..f892936bab77 100644
--- a/web-console/src/dialogs/async-action-dialog/async-action-dialog.tsx
+++ b/web-console/src/dialogs/async-action-dialog/async-action-dialog.tsx
@@ -30,7 +30,7 @@ import { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import React, { ReactNode, useState } from 'react';
 
-import { WarningChecklist } from '../../components/warning-checklist/warning-checklist';
+import { WarningChecklist } from '../../components';
 import { AppToaster } from '../../singletons';
 
 import './async-action-dialog.scss';
diff --git a/web-console/src/dialogs/compaction-dialog/__snapshots__/compaction-dialog.spec.tsx.snap b/web-console/src/dialogs/compaction-dialog/__snapshots__/compaction-dialog.spec.tsx.snap
index 888ee17ef3f8..c632071fe596 100644
--- a/web-console/src/dialogs/compaction-dialog/__snapshots__/compaction-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/compaction-dialog/__snapshots__/compaction-dialog.spec.tsx.snap
@@ -280,6 +280,20 @@ exports[`CompactionDialog matches snapshot with compactionConfig (dynamic partit
             "name": "tuningConfig.maxNumConcurrentSubTasks",
             "type": "number",
           },
+          Object {
+            "defaultValue": -1,
+            "info": <React.Fragment>
+              <p>
+                Limit of the number of segments to merge in a single phase when merging segments for publishing. This limit affects the total number of columns present in a set of segments to merge. If the limit is exceeded, segment merging occurs in multiple phases. Druid merges at least 2 segments per phase, regardless of this setting.
+              </p>
+              <p>
+                Default: -1 (unlimited)
+              </p>
+            </React.Fragment>,
+            "min": -1,
+            "name": "tuningConfig.maxColumnsToMerge",
+            "type": "number",
+          },
           Object {
             "defaultValue": 10,
             "defined": [Function],
@@ -642,6 +656,20 @@ exports[`CompactionDialog matches snapshot with compactionConfig (hashed partiti
             "name": "tuningConfig.maxNumConcurrentSubTasks",
             "type": "number",
           },
+          Object {
+            "defaultValue": -1,
+            "info": <React.Fragment>
+              <p>
+                Limit of the number of segments to merge in a single phase when merging segments for publishing. This limit affects the total number of columns present in a set of segments to merge. If the limit is exceeded, segment merging occurs in multiple phases. Druid merges at least 2 segments per phase, regardless of this setting.
+              </p>
+              <p>
+                Default: -1 (unlimited)
+              </p>
+            </React.Fragment>,
+            "min": -1,
+            "name": "tuningConfig.maxColumnsToMerge",
+            "type": "number",
+          },
           Object {
             "defaultValue": 10,
             "defined": [Function],
@@ -1004,6 +1032,20 @@ exports[`CompactionDialog matches snapshot with compactionConfig (range partitio
             "name": "tuningConfig.maxNumConcurrentSubTasks",
             "type": "number",
           },
+          Object {
+            "defaultValue": -1,
+            "info": <React.Fragment>
+              <p>
+                Limit of the number of segments to merge in a single phase when merging segments for publishing. This limit affects the total number of columns present in a set of segments to merge. If the limit is exceeded, segment merging occurs in multiple phases. Druid merges at least 2 segments per phase, regardless of this setting.
+              </p>
+              <p>
+                Default: -1 (unlimited)
+              </p>
+            </React.Fragment>,
+            "min": -1,
+            "name": "tuningConfig.maxColumnsToMerge",
+            "type": "number",
+          },
           Object {
             "defaultValue": 10,
             "defined": [Function],
@@ -1366,6 +1408,20 @@ exports[`CompactionDialog matches snapshot without compactionConfig 1`] = `
             "name": "tuningConfig.maxNumConcurrentSubTasks",
             "type": "number",
           },
+          Object {
+            "defaultValue": -1,
+            "info": <React.Fragment>
+              <p>
+                Limit of the number of segments to merge in a single phase when merging segments for publishing. This limit affects the total number of columns present in a set of segments to merge. If the limit is exceeded, segment merging occurs in multiple phases. Druid merges at least 2 segments per phase, regardless of this setting.
+              </p>
+              <p>
+                Default: -1 (unlimited)
+              </p>
+            </React.Fragment>,
+            "min": -1,
+            "name": "tuningConfig.maxColumnsToMerge",
+            "type": "number",
+          },
           Object {
             "defaultValue": 10,
             "defined": [Function],
diff --git a/web-console/src/dialogs/coordinator-dynamic-config-dialog/__snapshots__/coordinator-dynamic-config-dialog.spec.tsx.snap b/web-console/src/dialogs/coordinator-dynamic-config-dialog/__snapshots__/coordinator-dynamic-config-dialog.spec.tsx.snap
index e889ab8bde1b..3de1970e2ef9 100644
--- a/web-console/src/dialogs/coordinator-dynamic-config-dialog/__snapshots__/coordinator-dynamic-config-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/coordinator-dynamic-config-dialog/__snapshots__/coordinator-dynamic-config-dialog.spec.tsx.snap
@@ -12,7 +12,7 @@ exports[`CoordinatorDynamicConfigDialog matches snapshot 1`] = `
     Edit the coordinator dynamic configuration on the fly. For more information please refer to the
      
     <Memo(ExternalLink)
-      href="https://druid.apache.org/docs/0.23.0/configuration/index.html#dynamic-configuration"
+      href="https://druid.apache.org/docs/latest/configuration/index.html#dynamic-configuration"
     >
       documentation
     </Memo(ExternalLink)>
diff --git a/web-console/src/dialogs/datasource-table-action-dialog/__snapshots__/datasource-table-action-dialog.spec.tsx.snap b/web-console/src/dialogs/datasource-table-action-dialog/__snapshots__/datasource-table-action-dialog.spec.tsx.snap
index 4934b0e7076e..eb5ffe755a13 100644
--- a/web-console/src/dialogs/datasource-table-action-dialog/__snapshots__/datasource-table-action-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/datasource-table-action-dialog/__snapshots__/datasource-table-action-dialog.spec.tsx.snap
@@ -65,6 +65,33 @@ exports[`Datasource table action dialog matches snapshot 1`] = `
             <button
               class="bp4-button bp4-intent-primary tab-button"
               type="button"
+            >
+              <span
+                aria-hidden="true"
+                class="bp4-icon bp4-icon-th"
+                icon="th"
+              >
+                <svg
+                  data-icon="th"
+                  height="20"
+                  viewBox="0 0 20 20"
+                  width="20"
+                >
+                  <path
+                    d="M19 1H1c-.6 0-1 .5-1 1v16c0 .5.4 1 1 1h18c.5 0 1-.5 1-1V2c0-.5-.5-1-1-1zM7 17H2v-3h5v3zm0-4H2v-3h5v3zm0-4H2V6h5v3zm11 8H8v-3h10v3zm0-4H8v-3h10v3zm0-4H8V6h10v3z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+              <span
+                class="bp4-button-text"
+              >
+                Records
+              </span>
+            </button>
+            <button
+              class="bp4-button bp4-minimal tab-button"
+              type="button"
             >
               <span
                 aria-hidden="true"
@@ -94,43 +121,39 @@ exports[`Datasource table action dialog matches snapshot 1`] = `
             class="main-section"
           >
             <div
-              class="datasource-columns-table"
+              class="datasource-preview-pane"
             >
               <div
-                class="main-area"
+                class="loader"
               >
                 <div
-                  class="loader"
+                  class="loader-logo"
                 >
-                  <div
-                    class="loader-logo"
+                  <svg
+                    viewBox="0 0 100 100"
                   >
-                    <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
+                    <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
+                    />
+                    <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
+                    />
+                    <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>
+                    />
+                  </svg>
                 </div>
               </div>
             </div>
diff --git a/web-console/src/dialogs/datasource-table-action-dialog/datasource-columns-table/__snapshots__/datasource-columns-table.spec.tsx.snap b/web-console/src/dialogs/datasource-table-action-dialog/datasource-columns-table/__snapshots__/datasource-columns-table.spec.tsx.snap
new file mode 100644
index 000000000000..4d0c223ece94
--- /dev/null
+++ b/web-console/src/dialogs/datasource-table-action-dialog/datasource-columns-table/__snapshots__/datasource-columns-table.spec.tsx.snap
@@ -0,0 +1,648 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DatasourceColumnsTable matches snapshot on error 1`] = `
+<div
+  className="datasource-columns-table"
+>
+  <ReactTable
+    AggregatedComponent={[Function]}
+    ExpanderComponent={[Function]}
+    FilterComponent={[Function]}
+    LoadingComponent={[Function]}
+    NoDataComponent={[Function]}
+    PadRowComponent={[Function]}
+    PaginationComponent={[Function]}
+    PivotValueComponent={[Function]}
+    ResizerComponent={[Function]}
+    TableComponent={[Function]}
+    TbodyComponent={[Function]}
+    TdComponent={[Function]}
+    TfootComponent={[Function]}
+    ThComponent={[Function]}
+    TheadComponent={[Function]}
+    TrComponent={[Function]}
+    TrGroupComponent={[Function]}
+    aggregatedKey="_aggregated"
+    className=""
+    collapseOnDataChange={true}
+    collapseOnPageChange={true}
+    collapseOnSortingChange={true}
+    column={
+      Object {
+        "Aggregated": undefined,
+        "Cell": undefined,
+        "Expander": undefined,
+        "Filter": undefined,
+        "Footer": undefined,
+        "Header": undefined,
+        "Pivot": undefined,
+        "PivotValue": undefined,
+        "Placeholder": undefined,
+        "aggregate": undefined,
+        "className": "",
+        "filterAll": false,
+        "filterMethod": undefined,
+        "filterable": undefined,
+        "footerClassName": "",
+        "footerStyle": Object {},
+        "getFooterProps": [Function],
+        "getHeaderProps": [Function],
+        "getProps": [Function],
+        "headerClassName": "",
+        "headerStyle": Object {},
+        "minResizeWidth": 11,
+        "minWidth": 100,
+        "resizable": undefined,
+        "show": true,
+        "sortMethod": undefined,
+        "sortable": undefined,
+        "style": Object {},
+      }
+    }
+    columns={
+      Array [
+        Object {
+          "Header": "Column name",
+          "accessor": "COLUMN_NAME",
+          "className": "padded",
+          "width": 300,
+        },
+        Object {
+          "Header": "Data type",
+          "accessor": "DATA_TYPE",
+          "className": "padded",
+          "width": 200,
+        },
+      ]
+    }
+    data={Array []}
+    defaultExpanded={Object {}}
+    defaultFilterMethod={[Function]}
+    defaultFiltered={Array []}
+    defaultPage={0}
+    defaultPageSize={25}
+    defaultResized={Array []}
+    defaultSortDesc={false}
+    defaultSortMethod={[Function]}
+    defaultSorted={Array []}
+    expanderDefaults={
+      Object {
+        "filterable": false,
+        "resizable": false,
+        "sortable": false,
+        "width": 35,
+      }
+    }
+    filterable={true}
+    freezeWhenExpanded={false}
+    getLoadingProps={[Function]}
+    getNoDataProps={[Function]}
+    getPaginationProps={[Function]}
+    getProps={[Function]}
+    getResizerProps={[Function]}
+    getTableProps={[Function]}
+    getTbodyProps={[Function]}
+    getTdProps={[Function]}
+    getTfootProps={[Function]}
+    getTfootTdProps={[Function]}
+    getTfootTrProps={[Function]}
+    getTheadFilterProps={[Function]}
+    getTheadFilterThProps={[Function]}
+    getTheadFilterTrProps={[Function]}
+    getTheadGroupProps={[Function]}
+    getTheadGroupThProps={[Function]}
+    getTheadGroupTrProps={[Function]}
+    getTheadProps={[Function]}
+    getTheadThProps={[Function]}
+    getTheadTrProps={[Function]}
+    getTrGroupProps={[Function]}
+    getTrProps={[Function]}
+    groupedByPivotKey="_groupedByPivot"
+    indexKey="_index"
+    loading={false}
+    loadingText="Loading..."
+    multiSort={true}
+    nestingLevelKey="_nestingLevel"
+    nextText="Next"
+    noDataText="test error"
+    ofText="of"
+    onFetchData={[Function]}
+    originalKey="_original"
+    pageJumpText="jump to page"
+    pageSizeOptions={
+      Array [
+        25,
+        50,
+        100,
+      ]
+    }
+    pageText="Page"
+    pivotDefaults={Object {}}
+    pivotIDKey="_pivotID"
+    pivotValKey="_pivotVal"
+    previousText="Previous"
+    resizable={true}
+    resolveData={[Function]}
+    rowsSelectorText="rows per page"
+    rowsText="rows"
+    showPageJump={true}
+    showPageSizeOptions={true}
+    showPagination={false}
+    showPaginationBottom={true}
+    showPaginationTop={false}
+    sortable={true}
+    style={Object {}}
+    subRowsKey="_subRows"
+  />
+</div>
+`;
+
+exports[`DatasourceColumnsTable matches snapshot on init 1`] = `
+<div
+  className="datasource-columns-table"
+>
+  <ReactTable
+    AggregatedComponent={[Function]}
+    ExpanderComponent={[Function]}
+    FilterComponent={[Function]}
+    LoadingComponent={[Function]}
+    NoDataComponent={[Function]}
+    PadRowComponent={[Function]}
+    PaginationComponent={[Function]}
+    PivotValueComponent={[Function]}
+    ResizerComponent={[Function]}
+    TableComponent={[Function]}
+    TbodyComponent={[Function]}
+    TdComponent={[Function]}
+    TfootComponent={[Function]}
+    ThComponent={[Function]}
+    TheadComponent={[Function]}
+    TrComponent={[Function]}
+    TrGroupComponent={[Function]}
+    aggregatedKey="_aggregated"
+    className=""
+    collapseOnDataChange={true}
+    collapseOnPageChange={true}
+    collapseOnSortingChange={true}
+    column={
+      Object {
+        "Aggregated": undefined,
+        "Cell": undefined,
+        "Expander": undefined,
+        "Filter": undefined,
+        "Footer": undefined,
+        "Header": undefined,
+        "Pivot": undefined,
+        "PivotValue": undefined,
+        "Placeholder": undefined,
+        "aggregate": undefined,
+        "className": "",
+        "filterAll": false,
+        "filterMethod": undefined,
+        "filterable": undefined,
+        "footerClassName": "",
+        "footerStyle": Object {},
+        "getFooterProps": [Function],
+        "getHeaderProps": [Function],
+        "getProps": [Function],
+        "headerClassName": "",
+        "headerStyle": Object {},
+        "minResizeWidth": 11,
+        "minWidth": 100,
+        "resizable": undefined,
+        "show": true,
+        "sortMethod": undefined,
+        "sortable": undefined,
+        "style": Object {},
+      }
+    }
+    columns={
+      Array [
+        Object {
+          "Header": "Column name",
+          "accessor": "COLUMN_NAME",
+          "className": "padded",
+          "width": 300,
+        },
+        Object {
+          "Header": "Data type",
+          "accessor": "DATA_TYPE",
+          "className": "padded",
+          "width": 200,
+        },
+      ]
+    }
+    data={Array []}
+    defaultExpanded={Object {}}
+    defaultFilterMethod={[Function]}
+    defaultFiltered={Array []}
+    defaultPage={0}
+    defaultPageSize={25}
+    defaultResized={Array []}
+    defaultSortDesc={false}
+    defaultSortMethod={[Function]}
+    defaultSorted={Array []}
+    expanderDefaults={
+      Object {
+        "filterable": false,
+        "resizable": false,
+        "sortable": false,
+        "width": 35,
+      }
+    }
+    filterable={true}
+    freezeWhenExpanded={false}
+    getLoadingProps={[Function]}
+    getNoDataProps={[Function]}
+    getPaginationProps={[Function]}
+    getProps={[Function]}
+    getResizerProps={[Function]}
+    getTableProps={[Function]}
+    getTbodyProps={[Function]}
+    getTdProps={[Function]}
+    getTfootProps={[Function]}
+    getTfootTdProps={[Function]}
+    getTfootTrProps={[Function]}
+    getTheadFilterProps={[Function]}
+    getTheadFilterThProps={[Function]}
+    getTheadFilterTrProps={[Function]}
+    getTheadGroupProps={[Function]}
+    getTheadGroupThProps={[Function]}
+    getTheadGroupTrProps={[Function]}
+    getTheadProps={[Function]}
+    getTheadThProps={[Function]}
+    getTheadTrProps={[Function]}
+    getTrGroupProps={[Function]}
+    getTrProps={[Function]}
+    groupedByPivotKey="_groupedByPivot"
+    indexKey="_index"
+    loading={false}
+    loadingText="Loading..."
+    multiSort={true}
+    nestingLevelKey="_nestingLevel"
+    nextText="Next"
+    noDataText="No column data found"
+    ofText="of"
+    onFetchData={[Function]}
+    originalKey="_original"
+    pageJumpText="jump to page"
+    pageSizeOptions={
+      Array [
+        25,
+        50,
+        100,
+      ]
+    }
+    pageText="Page"
+    pivotDefaults={Object {}}
+    pivotIDKey="_pivotID"
+    pivotValKey="_pivotVal"
+    previousText="Previous"
+    resizable={true}
+    resolveData={[Function]}
+    rowsSelectorText="rows per page"
+    rowsText="rows"
+    showPageJump={true}
+    showPageSizeOptions={true}
+    showPagination={false}
+    showPaginationBottom={true}
+    showPaginationTop={false}
+    sortable={true}
+    style={Object {}}
+    subRowsKey="_subRows"
+  />
+</div>
+`;
+
+exports[`DatasourceColumnsTable matches snapshot on loading 1`] = `
+<div
+  className="datasource-columns-table"
+>
+  <Memo(Loader) />
+</div>
+`;
+
+exports[`DatasourceColumnsTable matches snapshot on no data 1`] = `
+<div
+  className="datasource-columns-table"
+>
+  <ReactTable
+    AggregatedComponent={[Function]}
+    ExpanderComponent={[Function]}
+    FilterComponent={[Function]}
+    LoadingComponent={[Function]}
+    NoDataComponent={[Function]}
+    PadRowComponent={[Function]}
+    PaginationComponent={[Function]}
+    PivotValueComponent={[Function]}
+    ResizerComponent={[Function]}
+    TableComponent={[Function]}
+    TbodyComponent={[Function]}
+    TdComponent={[Function]}
+    TfootComponent={[Function]}
+    ThComponent={[Function]}
+    TheadComponent={[Function]}
+    TrComponent={[Function]}
+    TrGroupComponent={[Function]}
+    aggregatedKey="_aggregated"
+    className=""
+    collapseOnDataChange={true}
+    collapseOnPageChange={true}
+    collapseOnSortingChange={true}
+    column={
+      Object {
+        "Aggregated": undefined,
+        "Cell": undefined,
+        "Expander": undefined,
+        "Filter": undefined,
+        "Footer": undefined,
+        "Header": undefined,
+        "Pivot": undefined,
+        "PivotValue": undefined,
+        "Placeholder": undefined,
+        "aggregate": undefined,
+        "className": "",
+        "filterAll": false,
+        "filterMethod": undefined,
+        "filterable": undefined,
+        "footerClassName": "",
+        "footerStyle": Object {},
+        "getFooterProps": [Function],
+        "getHeaderProps": [Function],
+        "getProps": [Function],
+        "headerClassName": "",
+        "headerStyle": Object {},
+        "minResizeWidth": 11,
+        "minWidth": 100,
+        "resizable": undefined,
+        "show": true,
+        "sortMethod": undefined,
+        "sortable": undefined,
+        "style": Object {},
+      }
+    }
+    columns={
+      Array [
+        Object {
+          "Header": "Column name",
+          "accessor": "COLUMN_NAME",
+          "className": "padded",
+          "width": 300,
+        },
+        Object {
+          "Header": "Data type",
+          "accessor": "DATA_TYPE",
+          "className": "padded",
+          "width": 200,
+        },
+      ]
+    }
+    data={Array []}
+    defaultExpanded={Object {}}
+    defaultFilterMethod={[Function]}
+    defaultFiltered={Array []}
+    defaultPage={0}
+    defaultPageSize={25}
+    defaultResized={Array []}
+    defaultSortDesc={false}
+    defaultSortMethod={[Function]}
+    defaultSorted={Array []}
+    expanderDefaults={
+      Object {
+        "filterable": false,
+        "resizable": false,
+        "sortable": false,
+        "width": 35,
+      }
+    }
+    filterable={true}
+    freezeWhenExpanded={false}
+    getLoadingProps={[Function]}
+    getNoDataProps={[Function]}
+    getPaginationProps={[Function]}
+    getProps={[Function]}
+    getResizerProps={[Function]}
+    getTableProps={[Function]}
+    getTbodyProps={[Function]}
+    getTdProps={[Function]}
+    getTfootProps={[Function]}
+    getTfootTdProps={[Function]}
+    getTfootTrProps={[Function]}
+    getTheadFilterProps={[Function]}
+    getTheadFilterThProps={[Function]}
+    getTheadFilterTrProps={[Function]}
+    getTheadGroupProps={[Function]}
+    getTheadGroupThProps={[Function]}
+    getTheadGroupTrProps={[Function]}
+    getTheadProps={[Function]}
+    getTheadThProps={[Function]}
+    getTheadTrProps={[Function]}
+    getTrGroupProps={[Function]}
+    getTrProps={[Function]}
+    groupedByPivotKey="_groupedByPivot"
+    indexKey="_index"
+    loading={false}
+    loadingText="Loading..."
+    multiSort={true}
+    nestingLevelKey="_nestingLevel"
+    nextText="Next"
+    noDataText="No column data found"
+    ofText="of"
+    onFetchData={[Function]}
+    originalKey="_original"
+    pageJumpText="jump to page"
+    pageSizeOptions={
+      Array [
+        25,
+        50,
+        100,
+      ]
+    }
+    pageText="Page"
+    pivotDefaults={Object {}}
+    pivotIDKey="_pivotID"
+    pivotValKey="_pivotVal"
+    previousText="Previous"
+    resizable={true}
+    resolveData={[Function]}
+    rowsSelectorText="rows per page"
+    rowsText="rows"
+    showPageJump={true}
+    showPageSizeOptions={true}
+    showPagination={false}
+    showPaginationBottom={true}
+    showPaginationTop={false}
+    sortable={true}
+    style={Object {}}
+    subRowsKey="_subRows"
+  />
+</div>
+`;
+
+exports[`DatasourceColumnsTable matches snapshot on some data 1`] = `
+<div
+  className="datasource-columns-table"
+>
+  <ReactTable
+    AggregatedComponent={[Function]}
+    ExpanderComponent={[Function]}
+    FilterComponent={[Function]}
+    LoadingComponent={[Function]}
+    NoDataComponent={[Function]}
+    PadRowComponent={[Function]}
+    PaginationComponent={[Function]}
+    PivotValueComponent={[Function]}
+    ResizerComponent={[Function]}
+    TableComponent={[Function]}
+    TbodyComponent={[Function]}
+    TdComponent={[Function]}
+    TfootComponent={[Function]}
+    ThComponent={[Function]}
+    TheadComponent={[Function]}
+    TrComponent={[Function]}
+    TrGroupComponent={[Function]}
+    aggregatedKey="_aggregated"
+    className=""
+    collapseOnDataChange={true}
+    collapseOnPageChange={true}
+    collapseOnSortingChange={true}
+    column={
+      Object {
+        "Aggregated": undefined,
+        "Cell": undefined,
+        "Expander": undefined,
+        "Filter": undefined,
+        "Footer": undefined,
+        "Header": undefined,
+        "Pivot": undefined,
+        "PivotValue": undefined,
+        "Placeholder": undefined,
+        "aggregate": undefined,
+        "className": "",
+        "filterAll": false,
+        "filterMethod": undefined,
+        "filterable": undefined,
+        "footerClassName": "",
+        "footerStyle": Object {},
+        "getFooterProps": [Function],
+        "getHeaderProps": [Function],
+        "getProps": [Function],
+        "headerClassName": "",
+        "headerStyle": Object {},
+        "minResizeWidth": 11,
+        "minWidth": 100,
+        "resizable": undefined,
+        "show": true,
+        "sortMethod": undefined,
+        "sortable": undefined,
+        "style": Object {},
+      }
+    }
+    columns={
+      Array [
+        Object {
+          "Header": "Column name",
+          "accessor": "COLUMN_NAME",
+          "className": "padded",
+          "width": 300,
+        },
+        Object {
+          "Header": "Data type",
+          "accessor": "DATA_TYPE",
+          "className": "padded",
+          "width": 200,
+        },
+      ]
+    }
+    data={
+      Array [
+        Object {
+          "COLUMN_NAME": "channel",
+          "DATA_TYPE": "VARCHAR",
+        },
+        Object {
+          "COLUMN_NAME": "page",
+          "DATA_TYPE": "VARCHAR",
+        },
+      ]
+    }
+    defaultExpanded={Object {}}
+    defaultFilterMethod={[Function]}
+    defaultFiltered={Array []}
+    defaultPage={0}
+    defaultPageSize={25}
+    defaultResized={Array []}
+    defaultSortDesc={false}
+    defaultSortMethod={[Function]}
+    defaultSorted={Array []}
+    expanderDefaults={
+      Object {
+        "filterable": false,
+        "resizable": false,
+        "sortable": false,
+        "width": 35,
+      }
+    }
+    filterable={true}
+    freezeWhenExpanded={false}
+    getLoadingProps={[Function]}
+    getNoDataProps={[Function]}
+    getPaginationProps={[Function]}
+    getProps={[Function]}
+    getResizerProps={[Function]}
+    getTableProps={[Function]}
+    getTbodyProps={[Function]}
+    getTdProps={[Function]}
+    getTfootProps={[Function]}
+    getTfootTdProps={[Function]}
+    getTfootTrProps={[Function]}
+    getTheadFilterProps={[Function]}
+    getTheadFilterThProps={[Function]}
+    getTheadFilterTrProps={[Function]}
+    getTheadGroupProps={[Function]}
+    getTheadGroupThProps={[Function]}
+    getTheadGroupTrProps={[Function]}
+    getTheadProps={[Function]}
+    getTheadThProps={[Function]}
+    getTheadTrProps={[Function]}
+    getTrGroupProps={[Function]}
+    getTrProps={[Function]}
+    groupedByPivotKey="_groupedByPivot"
+    indexKey="_index"
+    loading={false}
+    loadingText="Loading..."
+    multiSort={true}
+    nestingLevelKey="_nestingLevel"
+    nextText="Next"
+    noDataText="No column data found"
+    ofText="of"
+    onFetchData={[Function]}
+    originalKey="_original"
+    pageJumpText="jump to page"
+    pageSizeOptions={
+      Array [
+        25,
+        50,
+        100,
+      ]
+    }
+    pageText="Page"
+    pivotDefaults={Object {}}
+    pivotIDKey="_pivotID"
+    pivotValKey="_pivotVal"
+    previousText="Previous"
+    resizable={true}
+    resolveData={[Function]}
+    rowsSelectorText="rows per page"
+    rowsText="rows"
+    showPageJump={true}
+    showPageSizeOptions={true}
+    showPagination={false}
+    showPaginationBottom={true}
+    showPaginationTop={false}
+    sortable={true}
+    style={Object {}}
+    subRowsKey="_subRows"
+  />
+</div>
+`;
diff --git a/web-console/src/components/datasource-columns-table/datasource-columns-table.scss b/web-console/src/dialogs/datasource-table-action-dialog/datasource-columns-table/datasource-columns-table.scss
similarity index 82%
rename from web-console/src/components/datasource-columns-table/datasource-columns-table.scss
rename to web-console/src/dialogs/datasource-table-action-dialog/datasource-columns-table/datasource-columns-table.scss
index 1d0ba14e2de0..f05ca0b06191 100644
--- a/web-console/src/components/datasource-columns-table/datasource-columns-table.scss
+++ b/web-console/src/dialogs/datasource-table-action-dialog/datasource-columns-table/datasource-columns-table.scss
@@ -29,21 +29,11 @@
     }
   }
 
-  .main-area {
-    height: calc(100% - 5px);
-
-    textarea {
-      height: 100%;
-      width: 100%;
-      resize: none;
-    }
-
-    .loader {
-      position: relative;
-    }
+  .loader {
+    position: relative;
+  }
 
-    .ReactTable {
-      height: 100%;
-    }
+  .ReactTable {
+    height: 100%;
   }
 }
diff --git a/web-console/src/components/datasource-columns-table/datasource-columns-table.spec.tsx b/web-console/src/dialogs/datasource-table-action-dialog/datasource-columns-table/datasource-columns-table.spec.tsx
similarity index 93%
rename from web-console/src/components/datasource-columns-table/datasource-columns-table.spec.tsx
rename to web-console/src/dialogs/datasource-table-action-dialog/datasource-columns-table/datasource-columns-table.spec.tsx
index 06860d95916b..795b274d5948 100644
--- a/web-console/src/components/datasource-columns-table/datasource-columns-table.spec.tsx
+++ b/web-console/src/dialogs/datasource-table-action-dialog/datasource-columns-table/datasource-columns-table.spec.tsx
@@ -19,12 +19,12 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 
-import { QueryState } from '../../utils';
+import { QueryState } from '../../../utils';
 
 import { DatasourceColumnsTable, DatasourceColumnsTableRow } from './datasource-columns-table';
 
 let columnsState: QueryState<DatasourceColumnsTableRow[]> = QueryState.INIT;
-jest.mock('../../hooks', () => {
+jest.mock('../../../hooks', () => {
   return {
     useQueryManager: () => [columnsState],
   };
@@ -32,7 +32,7 @@ jest.mock('../../hooks', () => {
 
 describe('DatasourceColumnsTable', () => {
   function makeDatasourceColumnsTable() {
-    return <DatasourceColumnsTable datasourceId="test" downloadFilename="test" />;
+    return <DatasourceColumnsTable datasource="test" />;
   }
 
   it('matches snapshot on init', () => {
diff --git a/web-console/src/components/datasource-columns-table/datasource-columns-table.tsx b/web-console/src/dialogs/datasource-table-action-dialog/datasource-columns-table/datasource-columns-table.tsx
similarity index 87%
rename from web-console/src/components/datasource-columns-table/datasource-columns-table.tsx
rename to web-console/src/dialogs/datasource-table-action-dialog/datasource-columns-table/datasource-columns-table.tsx
index 007e54919be5..cd56dda85f7c 100644
--- a/web-console/src/components/datasource-columns-table/datasource-columns-table.tsx
+++ b/web-console/src/dialogs/datasource-table-action-dialog/datasource-columns-table/datasource-columns-table.tsx
@@ -20,10 +20,10 @@ import { SqlLiteral } from 'druid-query-toolkit';
 import React from 'react';
 import ReactTable from 'react-table';
 
-import { useQueryManager } from '../../hooks';
-import { SMALL_TABLE_PAGE_SIZE, SMALL_TABLE_PAGE_SIZE_OPTIONS } from '../../react-table';
-import { ColumnMetadata, queryDruidSql } from '../../utils';
-import { Loader } from '../loader/loader';
+import { Loader } from '../../../components';
+import { useQueryManager } from '../../../hooks';
+import { SMALL_TABLE_PAGE_SIZE, SMALL_TABLE_PAGE_SIZE_OPTIONS } from '../../../react-table';
+import { ColumnMetadata, queryDruidSql } from '../../../utils';
 
 import './datasource-columns-table.scss';
 
@@ -33,21 +33,20 @@ export interface DatasourceColumnsTableRow {
 }
 
 export interface DatasourceColumnsTableProps {
-  datasourceId: string;
-  downloadFilename?: string;
+  datasource: string;
 }
 
 export const DatasourceColumnsTable = React.memo(function DatasourceColumnsTable(
   props: DatasourceColumnsTableProps,
 ) {
   const [columnsState] = useQueryManager<string, DatasourceColumnsTableRow[]>({
+    initQuery: props.datasource,
     processQuery: async (datasourceId: string) => {
       return await queryDruidSql<ColumnMetadata>({
         query: `SELECT COLUMN_NAME, DATA_TYPE FROM INFORMATION_SCHEMA.COLUMNS
           WHERE TABLE_SCHEMA = 'druid' AND TABLE_NAME = ${SqlLiteral.create(datasourceId)}`,
       });
     },
-    initQuery: props.datasourceId,
   });
 
   function renderTable() {
@@ -80,7 +79,7 @@ export const DatasourceColumnsTable = React.memo(function DatasourceColumnsTable
 
   return (
     <div className="datasource-columns-table">
-      <div className="main-area">{columnsState.loading ? <Loader /> : renderTable()}</div>
+      {columnsState.loading ? <Loader /> : renderTable()}
     </div>
   );
 });
diff --git a/web-console/src/dialogs/datasource-table-action-dialog/datasource-preview-pane/datasource-preview-pane.scss b/web-console/src/dialogs/datasource-table-action-dialog/datasource-preview-pane/datasource-preview-pane.scss
new file mode 100644
index 000000000000..f47703d05260
--- /dev/null
+++ b/web-console/src/dialogs/datasource-table-action-dialog/datasource-preview-pane/datasource-preview-pane.scss
@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+
+.datasource-preview-pane {
+  position: relative;
+  height: 100%;
+
+  .record-table-pane {
+    height: 100%;
+  }
+  .datasource-preview-error {
+    color: #9e2b0e;
+  }
+}
diff --git a/web-console/src/dialogs/datasource-table-action-dialog/datasource-preview-pane/datasource-preview-pane.tsx b/web-console/src/dialogs/datasource-table-action-dialog/datasource-preview-pane/datasource-preview-pane.tsx
new file mode 100644
index 000000000000..71c20d220263
--- /dev/null
+++ b/web-console/src/dialogs/datasource-table-action-dialog/datasource-preview-pane/datasource-preview-pane.tsx
@@ -0,0 +1,65 @@
+/*
+ * 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 { QueryResult, QueryRunner, SqlTableRef } from 'druid-query-toolkit';
+import React from 'react';
+
+import { Loader, RecordTablePane } from '../../../components';
+import { useQueryManager } from '../../../hooks';
+import { DruidError } from '../../../utils';
+
+import './datasource-preview-pane.scss';
+
+const queryRunner = new QueryRunner({
+  inflateDateStrategy: 'none',
+});
+
+export interface DatasourcePreviewPaneProps {
+  datasource: string;
+}
+
+export const DatasourcePreviewPane = React.memo(function DatasourcePreviewPane(
+  props: DatasourcePreviewPaneProps,
+) {
+  const [recordState] = useQueryManager<string, QueryResult>({
+    initQuery: props.datasource,
+    processQuery: async (datasource, cancelToken) => {
+      let result: QueryResult;
+      try {
+        result = await queryRunner.runQuery({
+          query: `SELECT * FROM ${SqlTableRef.create(datasource)}`,
+          extraQueryContext: { sqlOuterLimit: 100 },
+          cancelToken,
+        });
+      } catch (e) {
+        throw new DruidError(e);
+      }
+      return result;
+    },
+  });
+
+  return (
+    <div className="datasource-preview-pane">
+      {recordState.loading && <Loader />}
+      {recordState.data && <RecordTablePane queryResult={recordState.data} />}
+      {recordState.error && (
+        <div className="datasource-preview-error">{recordState.error.message}</div>
+      )}
+    </div>
+  );
+});
diff --git a/web-console/src/dialogs/datasource-table-action-dialog/datasource-table-action-dialog.spec.tsx b/web-console/src/dialogs/datasource-table-action-dialog/datasource-table-action-dialog.spec.tsx
index 0f6d19ec762c..fc069d941664 100644
--- a/web-console/src/dialogs/datasource-table-action-dialog/datasource-table-action-dialog.spec.tsx
+++ b/web-console/src/dialogs/datasource-table-action-dialog/datasource-table-action-dialog.spec.tsx
@@ -25,7 +25,7 @@ describe('Datasource table action dialog', () => {
   it('matches snapshot', () => {
     const datasourceTableActionDialog = (
       <DatasourceTableActionDialog
-        datasourceId="test"
+        datasource="test"
         actions={[{ title: 'test', onAction: () => null }]}
         onClose={() => {}}
       />
diff --git a/web-console/src/dialogs/datasource-table-action-dialog/datasource-table-action-dialog.tsx b/web-console/src/dialogs/datasource-table-action-dialog/datasource-table-action-dialog.tsx
index 86711a992222..ae1698514b54 100644
--- a/web-console/src/dialogs/datasource-table-action-dialog/datasource-table-action-dialog.tsx
+++ b/web-console/src/dialogs/datasource-table-action-dialog/datasource-table-action-dialog.tsx
@@ -16,27 +16,36 @@
  * limitations under the License.
  */
 
+import { IconNames } from '@blueprintjs/icons';
 import React, { useState } from 'react';
 
-import { DatasourceColumnsTable } from '../../components/datasource-columns-table/datasource-columns-table';
 import { BasicAction } from '../../utils/basic-action';
 import { SideButtonMetaData, TableActionDialog } from '../table-action-dialog/table-action-dialog';
 
+import { DatasourceColumnsTable } from './datasource-columns-table/datasource-columns-table';
+import { DatasourcePreviewPane } from './datasource-preview-pane/datasource-preview-pane';
+
 interface DatasourceTableActionDialogProps {
-  datasourceId?: string;
+  datasource: string;
   actions: BasicAction[];
-  onClose: () => void;
+  onClose(): void;
 }
 
 export const DatasourceTableActionDialog = React.memo(function DatasourceTableActionDialog(
   props: DatasourceTableActionDialogProps,
 ) {
-  const { onClose, datasourceId, actions } = props;
-  const [activeTab, setActiveTab] = useState('columns');
+  const { datasource, actions, onClose } = props;
+  const [activeTab, setActiveTab] = useState<'records' | 'columns'>('records');
 
-  const taskTableSideButtonMetadata: SideButtonMetaData[] = [
+  const sideButtonMetadata: SideButtonMetaData[] = [
+    {
+      icon: IconNames.TH,
+      text: 'Records',
+      active: activeTab === 'records',
+      onClick: () => setActiveTab('records'),
+    },
     {
-      icon: 'list-columns',
+      icon: IconNames.LIST_COLUMNS,
       text: 'Columns',
       active: activeTab === 'columns',
       onClick: () => setActiveTab('columns'),
@@ -45,17 +54,13 @@ export const DatasourceTableActionDialog = React.memo(function DatasourceTableAc
 
   return (
     <TableActionDialog
-      sideButtonMetadata={taskTableSideButtonMetadata}
+      sideButtonMetadata={sideButtonMetadata}
       onClose={onClose}
-      title={`Datasource: ${datasourceId}`}
+      title={`Datasource: ${datasource}`}
       actions={actions}
     >
-      {activeTab === 'columns' && (
-        <DatasourceColumnsTable
-          datasourceId={datasourceId ? datasourceId : ''}
-          downloadFilename={`datasource-dimensions-${datasourceId}.json`}
-        />
-      )}
+      {activeTab === 'records' && <DatasourcePreviewPane datasource={datasource} />}
+      {activeTab === 'columns' && <DatasourceColumnsTable datasource={datasource} />}
     </TableActionDialog>
   );
 });
diff --git a/web-console/src/dialogs/edit-context-dialog/edit-context-dialog.tsx b/web-console/src/dialogs/edit-context-dialog/edit-context-dialog.tsx
index c5fc45e69c52..5eb85d560823 100644
--- a/web-console/src/dialogs/edit-context-dialog/edit-context-dialog.tsx
+++ b/web-console/src/dialogs/edit-context-dialog/edit-context-dialog.tsx
@@ -21,7 +21,7 @@ import Hjson from 'hjson';
 import * as JSONBig from 'json-bigint-native';
 import React, { useState } from 'react';
 
-import { QueryContext } from '../../utils/query-context';
+import { QueryContext } from '../../druid-models';
 
 import './edit-context-dialog.scss';
 
diff --git a/web-console/src/dialogs/history-dialog/history-dialog.tsx b/web-console/src/dialogs/history-dialog/history-dialog.tsx
index 2b0e5315a14d..9267d07d0b3d 100644
--- a/web-console/src/dialogs/history-dialog/history-dialog.tsx
+++ b/web-console/src/dialogs/history-dialog/history-dialog.tsx
@@ -22,7 +22,7 @@ import classNames from 'classnames';
 import * as JSONBig from 'json-bigint-native';
 import React, { useState } from 'react';
 
-import { ShowValue } from '../../components/show-value/show-value';
+import { ShowValue } from '../../components';
 import { DiffDialog } from '../diff-dialog/diff-dialog';
 
 import './history-dialog.scss';
diff --git a/web-console/src/dialogs/index.ts b/web-console/src/dialogs/index.ts
index d0e0e4ba8b55..9509442c8bd2 100644
--- a/web-console/src/dialogs/index.ts
+++ b/web-console/src/dialogs/index.ts
@@ -22,12 +22,15 @@ export * from './compaction-dialog/compaction-dialog';
 export * from './coordinator-dynamic-config-dialog/coordinator-dynamic-config-dialog';
 export * from './diff-dialog/diff-dialog';
 export * from './doctor-dialog/doctor-dialog';
+export * from './edit-context-dialog/edit-context-dialog';
 export * from './history-dialog/history-dialog';
 export * from './lookup-edit-dialog/lookup-edit-dialog';
+export * from './numeric-input-dialog/numeric-input-dialog';
 export * from './overlord-dynamic-config-dialog/overlord-dynamic-config-dialog';
 export * from './retention-dialog/retention-dialog';
 export * from './snitch-dialog/snitch-dialog';
 export * from './spec-dialog/spec-dialog';
+export * from './string-input-dialog/string-input-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';
diff --git a/web-console/src/dialogs/lookup-table-action-dialog/lookup-table-action-dialog.tsx b/web-console/src/dialogs/lookup-table-action-dialog/lookup-table-action-dialog.tsx
index a44b3bd74e5b..e896d31f7ff7 100644
--- a/web-console/src/dialogs/lookup-table-action-dialog/lookup-table-action-dialog.tsx
+++ b/web-console/src/dialogs/lookup-table-action-dialog/lookup-table-action-dialog.tsx
@@ -18,10 +18,11 @@
 
 import React, { useState } from 'react';
 
-import { LookupValuesTable } from '../../components/lookup-values-table/lookup-values-table';
 import { BasicAction } from '../../utils/basic-action';
 import { SideButtonMetaData, TableActionDialog } from '../table-action-dialog/table-action-dialog';
 
+import { LookupValuesTable } from './lookup-values-table/lookup-values-table';
+
 interface LookupTableActionDialogProps {
   lookupId?: string;
   actions: BasicAction[];
diff --git a/web-console/src/components/lookup-values-table/__snapshots__/lookup-values-table.spec.tsx.snap b/web-console/src/dialogs/lookup-table-action-dialog/lookup-values-table/__snapshots__/lookup-values-table.spec.tsx.snap
similarity index 100%
rename from web-console/src/components/lookup-values-table/__snapshots__/lookup-values-table.spec.tsx.snap
rename to web-console/src/dialogs/lookup-table-action-dialog/lookup-values-table/__snapshots__/lookup-values-table.spec.tsx.snap
diff --git a/web-console/src/components/lookup-values-table/lookup-values-table.scss b/web-console/src/dialogs/lookup-table-action-dialog/lookup-values-table/lookup-values-table.scss
similarity index 100%
rename from web-console/src/components/lookup-values-table/lookup-values-table.scss
rename to web-console/src/dialogs/lookup-table-action-dialog/lookup-values-table/lookup-values-table.scss
diff --git a/web-console/src/components/lookup-values-table/lookup-values-table.spec.tsx b/web-console/src/dialogs/lookup-table-action-dialog/lookup-values-table/lookup-values-table.spec.tsx
similarity index 100%
rename from web-console/src/components/lookup-values-table/lookup-values-table.spec.tsx
rename to web-console/src/dialogs/lookup-table-action-dialog/lookup-values-table/lookup-values-table.spec.tsx
diff --git a/web-console/src/components/lookup-values-table/lookup-values-table.tsx b/web-console/src/dialogs/lookup-table-action-dialog/lookup-values-table/lookup-values-table.tsx
similarity index 93%
rename from web-console/src/components/lookup-values-table/lookup-values-table.tsx
rename to web-console/src/dialogs/lookup-table-action-dialog/lookup-values-table/lookup-values-table.tsx
index faa7810fd455..2ffa3ecc2224 100644
--- a/web-console/src/components/lookup-values-table/lookup-values-table.tsx
+++ b/web-console/src/dialogs/lookup-table-action-dialog/lookup-values-table/lookup-values-table.tsx
@@ -20,10 +20,10 @@ import { SqlRef } from 'druid-query-toolkit';
 import React from 'react';
 import ReactTable from 'react-table';
 
-import { useQueryManager } from '../../hooks';
-import { SMALL_TABLE_PAGE_SIZE, SMALL_TABLE_PAGE_SIZE_OPTIONS } from '../../react-table';
-import { queryDruidSql } from '../../utils';
-import { Loader } from '../loader/loader';
+import { Loader } from '../../../components/loader/loader';
+import { useQueryManager } from '../../../hooks';
+import { SMALL_TABLE_PAGE_SIZE, SMALL_TABLE_PAGE_SIZE_OPTIONS } from '../../../react-table';
+import { queryDruidSql } from '../../../utils';
 
 import './lookup-values-table.scss';
 
diff --git a/web-console/src/dialogs/numeric-input-dialog/numeric-input-dialog.tsx b/web-console/src/dialogs/numeric-input-dialog/numeric-input-dialog.tsx
new file mode 100644
index 000000000000..b115e035b807
--- /dev/null
+++ b/web-console/src/dialogs/numeric-input-dialog/numeric-input-dialog.tsx
@@ -0,0 +1,79 @@
+/*
+ * 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 { Button, Classes, Dialog, Intent, NumericInput } from '@blueprintjs/core';
+import React, { useState } from 'react';
+
+const DEFAULT_MIN_VALUE = 1;
+
+interface NumericInputDialogProps {
+  title: string;
+  message?: JSX.Element;
+  minValue?: number;
+  initValue: number;
+  onSubmit(value: number): void;
+  onClose(): void;
+}
+
+export const NumericInputDialog = React.memo(function NumericInputDialog(
+  props: NumericInputDialogProps,
+) {
+  const { title, message, minValue, initValue, onSubmit, onClose } = props;
+
+  const [value, setValue] = useState<number>(initValue);
+
+  return (
+    <Dialog
+      className="numeric-input-dialog"
+      onClose={onClose}
+      isOpen
+      title={title}
+      canOutsideClickClose={false}
+    >
+      <div className={Classes.DIALOG_BODY}>
+        {message}
+        <NumericInput
+          value={value}
+          onValueChange={(v: number) => {
+            if (isNaN(v)) return;
+            setValue(Math.max(v, DEFAULT_MIN_VALUE));
+          }}
+          min={minValue ?? DEFAULT_MIN_VALUE}
+          stepSize={1}
+          minorStepSize={null}
+          majorStepSize={10}
+          fill
+          autoFocus
+        />
+      </div>
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button text="Close" onClick={onClose} />
+          <Button
+            text="OK"
+            intent={Intent.PRIMARY}
+            onClick={() => {
+              onSubmit(value);
+              onClose();
+            }}
+          />
+        </div>
+      </div>
+    </Dialog>
+  );
+});
diff --git a/web-console/src/dialogs/overlord-dynamic-config-dialog/__snapshots__/overload-dynamic-config-dialog.spec.tsx.snap b/web-console/src/dialogs/overlord-dynamic-config-dialog/__snapshots__/overload-dynamic-config-dialog.spec.tsx.snap
index a2f2ce41f2a0..008ba4d10ebf 100644
--- a/web-console/src/dialogs/overlord-dynamic-config-dialog/__snapshots__/overload-dynamic-config-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/overlord-dynamic-config-dialog/__snapshots__/overload-dynamic-config-dialog.spec.tsx.snap
@@ -11,7 +11,7 @@ exports[`OverlordDynamicConfigDialog matches snapshot 1`] = `
     Edit the overlord dynamic configuration on the fly. For more information please refer to the
      
     <Memo(ExternalLink)
-      href="https://druid.apache.org/docs/0.23.0/configuration/index.html#overlord-dynamic-configuration"
+      href="https://druid.apache.org/docs/latest/configuration/index.html#overlord-dynamic-configuration"
     >
       documentation
     </Memo(ExternalLink)>
diff --git a/web-console/src/dialogs/retention-dialog/__snapshots__/retention-dialog.spec.tsx.snap b/web-console/src/dialogs/retention-dialog/__snapshots__/retention-dialog.spec.tsx.snap
index 6aaa2ffbf5a7..de558d39984e 100644
--- a/web-console/src/dialogs/retention-dialog/__snapshots__/retention-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/retention-dialog/__snapshots__/retention-dialog.spec.tsx.snap
@@ -63,7 +63,7 @@ exports[`RetentionDialog matches snapshot 1`] = `
             Druid uses rules to determine what data should be retained in the cluster. The rules are evaluated in order from top to bottom. For more information please refer to the
              
             <a
-              href="https://druid.apache.org/docs/0.23.0/operations/rule-configuration.html"
+              href="https://druid.apache.org/docs/latest/operations/rule-configuration.html"
               rel="noopener noreferrer"
               target="_blank"
             >
diff --git a/web-console/src/dialogs/segments-table-action-dialog/__snapshots__/segment-table-action-dialog.spec.tsx.snap b/web-console/src/dialogs/segments-table-action-dialog/__snapshots__/segment-table-action-dialog.spec.tsx.snap
index f7cd0ea4841f..991b659a34ec 100644
--- a/web-console/src/dialogs/segments-table-action-dialog/__snapshots__/segment-table-action-dialog.spec.tsx.snap
+++ b/web-console/src/dialogs/segments-table-action-dialog/__snapshots__/segment-table-action-dialog.spec.tsx.snap
@@ -89,6 +89,33 @@ exports[`SegmentTableActionDialog matches snapshot 1`] = `
                 Metadata
               </span>
             </button>
+            <button
+              class="bp4-button bp4-minimal tab-button"
+              type="button"
+            >
+              <span
+                aria-hidden="true"
+                class="bp4-icon bp4-icon-th"
+                icon="th"
+              >
+                <svg
+                  data-icon="th"
+                  height="20"
+                  viewBox="0 0 20 20"
+                  width="20"
+                >
+                  <path
+                    d="M19 1H1c-.6 0-1 .5-1 1v16c0 .5.4 1 1 1h18c.5 0 1-.5 1-1V2c0-.5-.5-1-1-1zM7 17H2v-3h5v3zm0-4H2v-3h5v3zm0-4H2V6h5v3zm11 8H8v-3h10v3zm0-4H8v-3h10v3zm0-4H8V6h10v3z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+              <span
+                class="bp4-button-text"
+              >
+                Records
+              </span>
+            </button>
           </div>
           <div
             class="main-section"
diff --git a/web-console/src/dialogs/segments-table-action-dialog/segment-table-action-dialog.tsx b/web-console/src/dialogs/segments-table-action-dialog/segment-table-action-dialog.tsx
index a33c3c3cf909..cd031f3881a6 100644
--- a/web-console/src/dialogs/segments-table-action-dialog/segment-table-action-dialog.tsx
+++ b/web-console/src/dialogs/segments-table-action-dialog/segment-table-action-dialog.tsx
@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import { IconNames } from '@blueprintjs/icons';
 import React, { useState } from 'react';
 
 import { ShowJson } from '../../components';
@@ -23,6 +24,8 @@ import { Api } from '../../singletons';
 import { BasicAction } from '../../utils/basic-action';
 import { SideButtonMetaData, TableActionDialog } from '../table-action-dialog/table-action-dialog';
 
+import { SegmentsPreviewPane } from './segments-preview-pane/segments-preview-pane';
+
 interface SegmentTableActionDialogProps {
   segmentId: string;
   datasourceId: string;
@@ -38,11 +41,17 @@ export const SegmentTableActionDialog = React.memo(function SegmentTableActionDi
 
   const taskTableSideButtonMetadata: SideButtonMetaData[] = [
     {
-      icon: 'manually-entered-data',
+      icon: IconNames.MANUALLY_ENTERED_DATA,
       text: 'Metadata',
       active: activeTab === 'metadata',
       onClick: () => setActiveTab('metadata'),
     },
+    {
+      icon: IconNames.TH,
+      text: 'Records',
+      active: activeTab === 'records',
+      onClick: () => setActiveTab('records'),
+    },
   ];
 
   return (
@@ -60,6 +69,7 @@ export const SegmentTableActionDialog = React.memo(function SegmentTableActionDi
           downloadFilename={`Segment-metadata-${segmentId}.json`}
         />
       )}
+      {activeTab === 'records' && <SegmentsPreviewPane segmentId={segmentId} />}
     </TableActionDialog>
   );
 });
diff --git a/web-console/src/dialogs/segments-table-action-dialog/segments-preview-pane/parse-segement-id.spec.ts b/web-console/src/dialogs/segments-table-action-dialog/segments-preview-pane/parse-segement-id.spec.ts
new file mode 100644
index 000000000000..e5efec03c2ee
--- /dev/null
+++ b/web-console/src/dialogs/segments-table-action-dialog/segments-preview-pane/parse-segement-id.spec.ts
@@ -0,0 +1,65 @@
+/*
+ * 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 { parseSegmentId } from './segments-preview-pane';
+
+describe('parseSegmentId', () => {
+  it('correctly identifies segment ID parts', () => {
+    const segmentId =
+      'kttm_reingest_2019-08-25T23:00:00.000Z_2019-08-26T00:00:00.000Z_2022-08-02T18:58:41.697Z';
+    expect(parseSegmentId(segmentId).datasource).toEqual('kttm_reingest');
+    expect(parseSegmentId(segmentId).interval).toEqual(
+      '2019-08-25T23:00:00.000Z/2019-08-26T00:00:00.000Z',
+    );
+    expect(parseSegmentId(segmentId).version).toEqual('2022-08-02T18:58:41.697Z');
+    expect(parseSegmentId(segmentId).partitionNumber).toEqual(0);
+  });
+
+  it('correctly identifies segment ID parts with partitionNumber', () => {
+    const segmentId =
+      'test_segment_id1_2019-08-25T23:00:00.000Z_2019-08-26T00:00:00.000Z_2022-08-02T18:58:41.697Z_1';
+    expect(parseSegmentId(segmentId).datasource).toEqual('test_segment_id1');
+    expect(parseSegmentId(segmentId).interval).toEqual(
+      '2019-08-25T23:00:00.000Z/2019-08-26T00:00:00.000Z',
+    );
+    expect(parseSegmentId(segmentId).version).toEqual('2022-08-02T18:58:41.697Z');
+    expect(parseSegmentId(segmentId).partitionNumber).toEqual(1);
+  });
+
+  it('correctly identifies segment ID parts with without partition number and _ in name', () => {
+    const segmentId =
+      'test___2019-08-25T23:00:00.000Z_2019-08-26T00:00:00.000Z_2022-08-02T18:58:41.697Z';
+    expect(parseSegmentId(segmentId).datasource).toEqual('test__');
+    expect(parseSegmentId(segmentId).interval).toEqual(
+      '2019-08-25T23:00:00.000Z/2019-08-26T00:00:00.000Z',
+    );
+    expect(parseSegmentId(segmentId).version).toEqual('2022-08-02T18:58:41.697Z');
+    expect(parseSegmentId(segmentId).partitionNumber).toEqual(0);
+  });
+
+  it('correctly identifies segment ID parts with long partition number', () => {
+    const segmentId =
+      'test___2019-08-25T23:00:00.000Z_2019-08-26T00:00:00.000Z_2022-08-02T18:58:41.697Z_1234567';
+    expect(parseSegmentId(segmentId).datasource).toEqual('test__');
+    expect(parseSegmentId(segmentId).interval).toEqual(
+      '2019-08-25T23:00:00.000Z/2019-08-26T00:00:00.000Z',
+    );
+    expect(parseSegmentId(segmentId).version).toEqual('2022-08-02T18:58:41.697Z');
+    expect(parseSegmentId(segmentId).partitionNumber).toEqual(1234567);
+  });
+});
diff --git a/web-console/src/dialogs/segments-table-action-dialog/segments-preview-pane/segments-preview-pane.scss b/web-console/src/dialogs/segments-table-action-dialog/segments-preview-pane/segments-preview-pane.scss
new file mode 100644
index 000000000000..f072371285f2
--- /dev/null
+++ b/web-console/src/dialogs/segments-table-action-dialog/segments-preview-pane/segments-preview-pane.scss
@@ -0,0 +1,30 @@
+/*
+ * 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.
+ */
+
+.segments-preview-pane {
+  position: relative;
+  height: 100%;
+
+  .record-table-pane {
+    height: 100%;
+  }
+  .segments-preview-error {
+    color: #9e2b0e;
+    height: 100%;
+  }
+}
diff --git a/web-console/src/dialogs/segments-table-action-dialog/segments-preview-pane/segments-preview-pane.tsx b/web-console/src/dialogs/segments-table-action-dialog/segments-preview-pane/segments-preview-pane.tsx
new file mode 100644
index 000000000000..6c5ace1c5fa4
--- /dev/null
+++ b/web-console/src/dialogs/segments-table-action-dialog/segments-preview-pane/segments-preview-pane.tsx
@@ -0,0 +1,119 @@
+/*
+ * 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 { QueryResult, QueryRunner } from 'druid-query-toolkit';
+import React from 'react';
+
+import { Loader, RecordTablePane } from '../../../components';
+// import { Loader, RecordTablePane } from '../../../components';
+import { useQueryManager } from '../../../hooks/use-query-manager';
+import { DruidError } from '../../../utils';
+
+import './segments-preview-pane.scss';
+
+const queryRunner = new QueryRunner({
+  inflateDateStrategy: 'none',
+});
+
+interface ParsedSegmentId {
+  datasource: string;
+  interval: string;
+  partitionNumber: number;
+  version: string;
+}
+
+export function parseSegmentId(segmentId: string): ParsedSegmentId {
+  const segmentIdParts = segmentId.split('_');
+  const tail = Number(segmentIdParts[segmentIdParts.length - 1]);
+  let bump = 1;
+  let partitionNumber = 0;
+
+  // Check if segmentId includes a partitionNumber
+  if (!isNaN(tail)) {
+    partitionNumber = tail;
+    bump++;
+  }
+
+  const version = segmentIdParts[segmentIdParts.length - bump];
+  const interval =
+    segmentIdParts[segmentIdParts.length - bump - 2] +
+    '/' +
+    segmentIdParts[segmentIdParts.length - bump - 1];
+  const datasource = segmentIdParts.slice(0, segmentIdParts.length - bump - 2).join('_');
+
+  return {
+    datasource: datasource,
+    version: version,
+    interval: interval,
+    partitionNumber: partitionNumber,
+  };
+}
+
+export interface DatasourcePreviewPaneProps {
+  segmentId: string;
+}
+
+export const SegmentsPreviewPane = React.memo(function DatasourcePreviewPane(
+  props: DatasourcePreviewPaneProps,
+) {
+  const segmentIdParts = parseSegmentId(props.segmentId);
+
+  const [recordState] = useQueryManager<string, QueryResult>({
+    initQuery: segmentIdParts.datasource,
+    processQuery: async (datasource, cancelToken) => {
+      let result: QueryResult;
+      try {
+        result = await queryRunner.runQuery({
+          query: {
+            queryType: 'scan',
+            dataSource: datasource,
+            intervals: {
+              type: 'segments',
+              segments: [
+                {
+                  itvl: segmentIdParts.interval,
+                  ver: segmentIdParts.version,
+                  part: segmentIdParts.partitionNumber,
+                },
+              ],
+            },
+            resultFormat: 'compactedList',
+            limit: 1001,
+            columns: [],
+            granularity: 'all',
+          },
+          extraQueryContext: { sqlOuterLimit: 100 },
+          cancelToken,
+        });
+      } catch (e) {
+        throw new DruidError(e);
+      }
+      return result;
+    },
+  });
+
+  return (
+    <div className="segments-preview-pane">
+      {recordState.loading && <Loader />}
+      {recordState.data && <RecordTablePane queryResult={recordState.data} />}
+      {recordState.error && (
+        <div className="segments-preview-error">{recordState.error.message}</div>
+      )}
+    </div>
+  );
+});
diff --git a/web-console/src/dialogs/status-dialog/status-dialog.spec.tsx b/web-console/src/dialogs/status-dialog/status-dialog.spec.tsx
index 1aa8d9786f54..11b9f617173a 100644
--- a/web-console/src/dialogs/status-dialog/status-dialog.spec.tsx
+++ b/web-console/src/dialogs/status-dialog/status-dialog.spec.tsx
@@ -19,7 +19,7 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import { anywhereMatcher, StatusDialog } from './status-dialog';
+import { StatusDialog } from './status-dialog';
 
 describe('StatusDialog', () => {
   it('matches snapshot', () => {
@@ -27,18 +27,4 @@ describe('StatusDialog', () => {
     render(statusDialog);
     expect(document.body.lastChild).toMatchSnapshot();
   });
-
-  it('filters data that contains input', () => {
-    const row = [
-      'org.apache.druid.common.gcp.GcpModule',
-      'org.apache.druid.common.aws.AWSModule',
-      'org.apache.druid.OtherModule',
-    ];
-
-    expect(anywhereMatcher({ id: '0', value: 'common' }, row)).toEqual(true);
-    expect(anywhereMatcher({ id: '1', value: 'common' }, row)).toEqual(true);
-    expect(anywhereMatcher({ id: '0', value: 'org' }, row)).toEqual(true);
-    expect(anywhereMatcher({ id: '1', value: 'org' }, row)).toEqual(true);
-    expect(anywhereMatcher({ id: '2', value: 'common' }, row)).toEqual(false);
-  });
 });
diff --git a/web-console/src/dialogs/status-dialog/status-dialog.tsx b/web-console/src/dialogs/status-dialog/status-dialog.tsx
index 3ae476d6753e..c7da95e424f6 100644
--- a/web-console/src/dialogs/status-dialog/status-dialog.tsx
+++ b/web-console/src/dialogs/status-dialog/status-dialog.tsx
@@ -17,20 +17,16 @@
  */
 
 import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
-import React from 'react';
+import React, { useState } from 'react';
 import ReactTable, { Filter } from 'react-table';
 
-import { Loader } from '../../components';
+import { Loader, TableFilterableCell } from '../../components';
 import { useQueryManager } from '../../hooks';
 import { SMALL_TABLE_PAGE_SIZE, SMALL_TABLE_PAGE_SIZE_OPTIONS } from '../../react-table';
 import { Api, UrlBaser } from '../../singletons';
 
 import './status-dialog.scss';
 
-export function anywhereMatcher(filter: Filter, row: any): boolean {
-  return String(row[filter.id]).includes(filter.value);
-}
-
 interface StatusModule {
   artifact: string;
   name: string;
@@ -43,64 +39,78 @@ interface StatusResponse {
 }
 
 interface StatusDialogProps {
-  onClose: () => void;
+  onClose(): void;
 }
 
 export const StatusDialog = React.memo(function StatusDialog(props: StatusDialogProps) {
   const { onClose } = props;
+  const [moduleFilter, setModuleFilter] = useState<Filter[]>([]);
+
   const [responseState] = useQueryManager<null, StatusResponse>({
+    initQuery: null,
     processQuery: async () => {
       const resp = await Api.instance.get(`/status`);
       return resp.data;
     },
-    initQuery: null,
   });
 
   function renderContent(): JSX.Element | undefined {
     if (responseState.loading) return <Loader />;
 
     if (responseState.error) {
-      return <span>{`Error while loading status: ${responseState.error}`}</span>;
+      return <div>{`Error while loading status: ${responseState.error}`}</div>;
     }
 
     const response = responseState.data;
     if (!response) return;
 
+    const renderModuleFilterableCell = (field: string) => {
+      return function ModuleFilterableCell(row: { value: any }) {
+        return (
+          <TableFilterableCell
+            field={field}
+            value={row.value}
+            filters={moduleFilter}
+            onFiltersChange={setModuleFilter}
+          >
+            {row.value}
+          </TableFilterableCell>
+        );
+      };
+    };
+
     return (
       <div className="main-container">
         <div className="version">
-          Version:&nbsp;<strong>{response.version}</strong>
+          Version: <strong>{response.version}</strong>
         </div>
         <ReactTable
           data={response.modules}
           loading={responseState.loading}
           filterable
-          defaultFilterMethod={anywhereMatcher}
+          filtered={moduleFilter}
+          onFilteredChange={setModuleFilter}
           defaultPageSize={SMALL_TABLE_PAGE_SIZE}
           pageSizeOptions={SMALL_TABLE_PAGE_SIZE_OPTIONS}
           showPagination={response.modules.length > SMALL_TABLE_PAGE_SIZE}
           columns={[
             {
-              columns: [
-                {
-                  Header: 'Extension name',
-                  accessor: 'artifact',
-                  width: 200,
-                  className: 'padded',
-                },
-                {
-                  Header: 'Version',
-                  accessor: 'version',
-                  width: 200,
-                  className: 'padded',
-                },
-                {
-                  Header: 'Fully qualified name',
-                  accessor: 'name',
-                  width: 500,
-                  className: 'padded',
-                },
-              ],
+              Header: 'Extension name',
+              accessor: 'artifact',
+              width: 200,
+              Cell: renderModuleFilterableCell('artifact'),
+            },
+            {
+              Header: 'Version',
+              accessor: 'version',
+              width: 200,
+              Cell: renderModuleFilterableCell('version'),
+            },
+            {
+              Header: 'Fully qualified name',
+              accessor: 'name',
+              width: 500,
+              Cell: renderModuleFilterableCell('name'),
             },
           ]}
         />
diff --git a/web-console/src/dialogs/string-input-dialog/string-input-dialog.tsx b/web-console/src/dialogs/string-input-dialog/string-input-dialog.tsx
new file mode 100644
index 000000000000..cee116132795
--- /dev/null
+++ b/web-console/src/dialogs/string-input-dialog/string-input-dialog.tsx
@@ -0,0 +1,61 @@
+/*
+ * 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 { Button, Classes, Dialog, InputGroup, Intent } from '@blueprintjs/core';
+import React, { useState } from 'react';
+
+export interface StringInputDialogProps {
+  title: string;
+  initValue?: string;
+  placeholder?: string;
+  maxLength?: number;
+  onSubmit(str: string): void;
+  onClose(): void;
+}
+
+export const StringInputDialog = React.memo(function StringSubmitDialog(
+  props: StringInputDialogProps,
+) {
+  const { title, initValue, placeholder, maxLength, onSubmit, onClose } = props;
+
+  const [value, setValue] = useState(initValue || '');
+
+  function handleSubmit() {
+    onSubmit(value);
+    onClose();
+  }
+
+  return (
+    <Dialog className="string-input-dialog" isOpen onClose={onClose} title={title}>
+      <div className={Classes.DIALOG_BODY}>
+        <InputGroup
+          value={value}
+          onChange={e => setValue(String(e.target.value).substring(0, maxLength || 280))}
+          autoFocus
+          placeholder={placeholder}
+        />
+      </div>
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button text="Close" onClick={onClose} />
+          <Button text="Submit" intent={Intent.PRIMARY} onClick={handleSubmit} />
+        </div>
+      </div>
+    </Dialog>
+  );
+});
diff --git a/web-console/src/components/supervisor-statistics-table/__snapshots__/supervisor-statistics-table.spec.tsx.snap b/web-console/src/dialogs/supervisor-table-action-dialog/supervisor-statistics-table/__snapshots__/supervisor-statistics-table.spec.tsx.snap
similarity index 100%
rename from web-console/src/components/supervisor-statistics-table/__snapshots__/supervisor-statistics-table.spec.tsx.snap
rename to web-console/src/dialogs/supervisor-table-action-dialog/supervisor-statistics-table/__snapshots__/supervisor-statistics-table.spec.tsx.snap
diff --git a/web-console/src/components/supervisor-statistics-table/supervisor-statistics-table.scss b/web-console/src/dialogs/supervisor-table-action-dialog/supervisor-statistics-table/supervisor-statistics-table.scss
similarity index 100%
rename from web-console/src/components/supervisor-statistics-table/supervisor-statistics-table.scss
rename to web-console/src/dialogs/supervisor-table-action-dialog/supervisor-statistics-table/supervisor-statistics-table.scss
diff --git a/web-console/src/components/supervisor-statistics-table/supervisor-statistics-table.spec.tsx b/web-console/src/dialogs/supervisor-table-action-dialog/supervisor-statistics-table/supervisor-statistics-table.spec.tsx
similarity index 97%
rename from web-console/src/components/supervisor-statistics-table/supervisor-statistics-table.spec.tsx
rename to web-console/src/dialogs/supervisor-table-action-dialog/supervisor-statistics-table/supervisor-statistics-table.spec.tsx
index 7a81495a0876..ac71cd5a2c7f 100644
--- a/web-console/src/components/supervisor-statistics-table/supervisor-statistics-table.spec.tsx
+++ b/web-console/src/dialogs/supervisor-table-action-dialog/supervisor-statistics-table/supervisor-statistics-table.spec.tsx
@@ -19,7 +19,7 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 
-import { QueryState } from '../../utils';
+import { QueryState } from '../../../utils';
 
 import {
   normalizeSupervisorStatisticsResults,
@@ -28,7 +28,7 @@ import {
 } from './supervisor-statistics-table';
 
 let supervisorStatisticsState: QueryState<SupervisorStatisticsTableRow[]> = QueryState.INIT;
-jest.mock('../../hooks', () => {
+jest.mock('../../../hooks', () => {
   return {
     useQueryManager: () => [supervisorStatisticsState],
   };
diff --git a/web-console/src/components/supervisor-statistics-table/supervisor-statistics-table.tsx b/web-console/src/dialogs/supervisor-table-action-dialog/supervisor-statistics-table/supervisor-statistics-table.tsx
similarity index 95%
rename from web-console/src/components/supervisor-statistics-table/supervisor-statistics-table.tsx
rename to web-console/src/dialogs/supervisor-table-action-dialog/supervisor-statistics-table/supervisor-statistics-table.tsx
index fe66c4efb675..48c2f3f88a99 100644
--- a/web-console/src/components/supervisor-statistics-table/supervisor-statistics-table.tsx
+++ b/web-console/src/dialogs/supervisor-table-action-dialog/supervisor-statistics-table/supervisor-statistics-table.tsx
@@ -20,11 +20,11 @@ import { Button, ButtonGroup } from '@blueprintjs/core';
 import React from 'react';
 import ReactTable, { CellInfo, Column } from 'react-table';
 
-import { useQueryManager } from '../../hooks';
-import { SMALL_TABLE_PAGE_SIZE, SMALL_TABLE_PAGE_SIZE_OPTIONS } from '../../react-table';
-import { Api, UrlBaser } from '../../singletons';
-import { deepGet } from '../../utils';
-import { Loader } from '../loader/loader';
+import { Loader } from '../../../components/loader/loader';
+import { useQueryManager } from '../../../hooks';
+import { SMALL_TABLE_PAGE_SIZE, SMALL_TABLE_PAGE_SIZE_OPTIONS } from '../../../react-table';
+import { Api, UrlBaser } from '../../../singletons';
+import { deepGet } from '../../../utils';
 
 import './supervisor-statistics-table.scss';
 
diff --git a/web-console/src/dialogs/supervisor-table-action-dialog/supervisor-table-action-dialog.tsx b/web-console/src/dialogs/supervisor-table-action-dialog/supervisor-table-action-dialog.tsx
index 3303f4fa52de..fba476fdced9 100644
--- a/web-console/src/dialogs/supervisor-table-action-dialog/supervisor-table-action-dialog.tsx
+++ b/web-console/src/dialogs/supervisor-table-action-dialog/supervisor-table-action-dialog.tsx
@@ -20,13 +20,14 @@ import React, { useState } from 'react';
 
 import { ShowJson } from '../../components';
 import { ShowHistory } from '../../components/show-history/show-history';
-import { SupervisorStatisticsTable } from '../../components/supervisor-statistics-table/supervisor-statistics-table';
 import { cleanSpec } from '../../druid-models';
 import { Api } from '../../singletons';
 import { deepGet } from '../../utils';
 import { BasicAction } from '../../utils/basic-action';
 import { SideButtonMetaData, TableActionDialog } from '../table-action-dialog/table-action-dialog';
 
+import { SupervisorStatisticsTable } from './supervisor-statistics-table/supervisor-statistics-table';
+
 interface SupervisorTableActionDialogProps {
   supervisorId: string;
   actions: BasicAction[];
diff --git a/web-console/src/dialogs/table-action-dialog/table-action-dialog.tsx b/web-console/src/dialogs/table-action-dialog/table-action-dialog.tsx
index da49bc9e1de1..d66b747afb4a 100644
--- a/web-console/src/dialogs/table-action-dialog/table-action-dialog.tsx
+++ b/web-console/src/dialogs/table-action-dialog/table-action-dialog.tsx
@@ -53,7 +53,7 @@ export const TableActionDialog = React.memo(function TableActionDialog(
           {sideButtonMetadata.map((d, i) => (
             <Button
               className="tab-button"
-              icon={<Icon icon={d.icon} iconSize={20} />}
+              icon={<Icon icon={d.icon} size={20} />}
               key={i}
               text={d.text}
               intent={d.active ? Intent.PRIMARY : Intent.NONE}
diff --git a/web-console/src/dialogs/task-table-action-dialog/task-table-action-dialog.tsx b/web-console/src/dialogs/task-table-action-dialog/task-table-action-dialog.tsx
index ecd8454761ee..fa6e58befbba 100644
--- a/web-console/src/dialogs/task-table-action-dialog/task-table-action-dialog.tsx
+++ b/web-console/src/dialogs/task-table-action-dialog/task-table-action-dialog.tsx
@@ -75,21 +75,21 @@ export const TaskTableActionDialog = React.memo(function TaskTableActionDialog(
       {activeTab === 'status' && (
         <ShowJson
           endpoint={`${taskEndpointBase}/status`}
-          transform={x => deepGet(x, 'status')}
+          transform={x => deepGet(x, 'status') || x}
           downloadFilename={`task-status-${taskId}.json`}
         />
       )}
       {activeTab === 'payload' && (
         <ShowJson
           endpoint={taskEndpointBase}
-          transform={x => deepGet(x, 'payload')}
+          transform={x => deepGet(x, 'payload') || x}
           downloadFilename={`task-payload-${taskId}.json`}
         />
       )}
       {activeTab === 'reports' && (
         <ShowJson
           endpoint={`${taskEndpointBase}/reports`}
-          transform={x => deepGet(x, 'ingestionStatsAndErrors.payload')}
+          transform={x => deepGet(x, 'ingestionStatsAndErrors.payload') || x}
           downloadFilename={`task-reports-${taskId}.json`}
         />
       )}
diff --git a/web-console/src/druid-models/compaction-config.tsx b/web-console/src/druid-models/compaction-config/compaction-config.tsx
similarity index 94%
rename from web-console/src/druid-models/compaction-config.tsx
rename to web-console/src/druid-models/compaction-config/compaction-config.tsx
index 1d5cb1fb58ee..1958f2b263e3 100644
--- a/web-console/src/druid-models/compaction-config.tsx
+++ b/web-console/src/druid-models/compaction-config/compaction-config.tsx
@@ -19,8 +19,8 @@
 import { Code } from '@blueprintjs/core';
 import React from 'react';
 
-import { Field } from '../components';
-import { deepGet, deepSet, oneOf } from '../utils';
+import { Field } from '../../components';
+import { deepGet, deepSet, oneOf } from '../../utils';
 
 export type CompactionConfig = Record<string, any>;
 
@@ -245,6 +245,23 @@ export const COMPACTION_CONFIG_FIELDS: Field<CompactionConfig>[] = [
       </>
     ),
   },
+  {
+    name: 'tuningConfig.maxColumnsToMerge',
+    type: 'number',
+    defaultValue: -1,
+    min: -1,
+    info: (
+      <>
+        <p>
+          Limit of the number of segments to merge in a single phase when merging segments for
+          publishing. This limit affects the total number of columns present in a set of segments to
+          merge. If the limit is exceeded, segment merging occurs in multiple phases. Druid merges
+          at least 2 segments per phase, regardless of this setting.
+        </p>
+        <p>Default: -1 (unlimited)</p>
+      </>
+    ),
+  },
   {
     name: 'tuningConfig.totalNumMergeTasks',
     type: 'number',
diff --git a/web-console/src/druid-models/compaction-status.spec.ts b/web-console/src/druid-models/compaction-status/compaction-status.spec.ts
similarity index 97%
rename from web-console/src/druid-models/compaction-status.spec.ts
rename to web-console/src/druid-models/compaction-status/compaction-status.spec.ts
index 68b4cca339ed..8ed0c5141366 100644
--- a/web-console/src/druid-models/compaction-status.spec.ts
+++ b/web-console/src/druid-models/compaction-status/compaction-status.spec.ts
@@ -16,7 +16,8 @@
  * limitations under the License.
  */
 
-import { CompactionConfig } from './compaction-config';
+import { CompactionConfig } from '../compaction-config/compaction-config';
+
 import {
   CompactionStatus,
   formatCompactionConfigAndStatus,
diff --git a/web-console/src/druid-models/compaction-status.ts b/web-console/src/druid-models/compaction-status/compaction-status.ts
similarity index 96%
rename from web-console/src/druid-models/compaction-status.ts
rename to web-console/src/druid-models/compaction-status/compaction-status.ts
index c637e44b8a27..2982d9b69e17 100644
--- a/web-console/src/druid-models/compaction-status.ts
+++ b/web-console/src/druid-models/compaction-status/compaction-status.ts
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { CompactionConfig } from './compaction-config';
+import { CompactionConfig } from '../compaction-config/compaction-config';
 
 function capitalizeFirst(str: string): string {
   return str.slice(0, 1).toUpperCase() + str.slice(1).toLowerCase();
diff --git a/web-console/src/druid-models/coordinator-dynamic-config.tsx b/web-console/src/druid-models/coordinator-dynamic-config/coordinator-dynamic-config.tsx
similarity index 99%
rename from web-console/src/druid-models/coordinator-dynamic-config.tsx
rename to web-console/src/druid-models/coordinator-dynamic-config/coordinator-dynamic-config.tsx
index f646315a4323..6683a721d14c 100644
--- a/web-console/src/druid-models/coordinator-dynamic-config.tsx
+++ b/web-console/src/druid-models/coordinator-dynamic-config/coordinator-dynamic-config.tsx
@@ -19,7 +19,7 @@
 import { Code } from '@blueprintjs/core';
 import React from 'react';
 
-import { Field } from '../components';
+import { Field } from '../../components';
 
 export interface CoordinatorDynamicConfig {
   maxSegmentsToMove?: number;
diff --git a/web-console/src/druid-models/dimension-spec.spec.ts b/web-console/src/druid-models/dimension-spec/dimension-spec.spec.ts
similarity index 96%
rename from web-console/src/druid-models/dimension-spec.spec.ts
rename to web-console/src/druid-models/dimension-spec/dimension-spec.spec.ts
index 8b6a992f9630..8d68d41df0c0 100644
--- a/web-console/src/druid-models/dimension-spec.spec.ts
+++ b/web-console/src/druid-models/dimension-spec/dimension-spec.spec.ts
@@ -16,8 +16,9 @@
  * limitations under the License.
  */
 
+import { CSV_SAMPLE, JSON_SAMPLE } from '../../utils/sampler.mock';
+
 import { getDimensionSpecs } from './dimension-spec';
-import { CSV_SAMPLE, JSON_SAMPLE } from './test-fixtures';
 
 describe('dimension-spec', () => {
   describe('getDimensionSpecs', () => {
diff --git a/web-console/src/druid-models/dimension-spec.ts b/web-console/src/druid-models/dimension-spec/dimension-spec.ts
similarity index 90%
rename from web-console/src/druid-models/dimension-spec.ts
rename to web-console/src/druid-models/dimension-spec/dimension-spec.ts
index b1b3a5491ecb..04144d545de2 100644
--- a/web-console/src/druid-models/dimension-spec.ts
+++ b/web-console/src/druid-models/dimension-spec/dimension-spec.ts
@@ -16,11 +16,10 @@
  * limitations under the License.
  */
 
-import { Field } from '../components';
-import { filterMap, typeIs } from '../utils';
-import { SampleHeaderAndRows } from '../utils/sampler';
-
-import { guessColumnTypeFromHeaderAndRows } from './ingestion-spec';
+import { Field } from '../../components';
+import { filterMap, typeIs } from '../../utils';
+import { SampleHeaderAndRows } from '../../utils/sampler';
+import { guessColumnTypeFromHeaderAndRows } from '../ingestion-spec/ingestion-spec';
 
 export interface DimensionsSpec {
   readonly dimensions?: (string | DimensionSpec)[];
@@ -46,7 +45,7 @@ export const DIMENSION_SPEC_FIELDS: Field<DimensionSpec>[] = [
     name: 'type',
     type: 'string',
     required: true,
-    suggestions: ['string', 'long', 'float', 'double'],
+    suggestions: ['string', 'long', 'float', 'double', 'json'],
   },
   {
     name: 'createBitmapIndex',
diff --git a/web-console/src/druid-models/druid-engine/druid-engine.ts b/web-console/src/druid-models/druid-engine/druid-engine.ts
new file mode 100644
index 000000000000..f1942e50c543
--- /dev/null
+++ b/web-console/src/druid-models/druid-engine/druid-engine.ts
@@ -0,0 +1,27 @@
+/*
+ * 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 type DruidEngine = 'native' | 'sql-native' | 'sql-msq-task';
+
+export const DRUID_ENGINES: DruidEngine[] = ['native', 'sql-native', 'sql-msq-task'];
+
+export function validDruidEngine(
+  possibleDruidEngine: string | undefined,
+): possibleDruidEngine is DruidEngine {
+  return Boolean(possibleDruidEngine && DRUID_ENGINES.includes(possibleDruidEngine as DruidEngine));
+}
diff --git a/web-console/src/druid-models/execution/execution-ingest-complete.mock.ts b/web-console/src/druid-models/execution/execution-ingest-complete.mock.ts
new file mode 100644
index 000000000000..b40d9ab0ec9c
--- /dev/null
+++ b/web-console/src/druid-models/execution/execution-ingest-complete.mock.ts
@@ -0,0 +1,285 @@
+/*
+ * 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 { Execution } from './execution';
+
+/*
+For query:
+
+REPLACE INTO "kttm_simple" OVERWRITE ALL
+SELECT TIME_PARSE("timestamp") AS "__time", agent_type
+FROM TABLE(
+  EXTERN(
+    '{"type":"http","uris":["https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz"]}',
+    '{"type":"json"}',
+    '[{"name":"timestamp","type":"string"},{"name":"agent_type","type":"string"}]'
+  )
+)
+PARTITIONED BY ALL TIME
+*/
+
+export const EXECUTION_INGEST_COMPLETE = Execution.fromTaskPayloadAndReport(
+  {
+    task: 'query-32ced762-7679-4a25-9220-3915c5976961',
+    payload: {
+      type: 'query_controller',
+      id: 'query-32ced762-7679-4a25-9220-3915c5976961',
+      spec: {
+        query: {
+          queryType: 'scan',
+          dataSource: {
+            type: 'external',
+            inputSource: {
+              type: 'http',
+              uris: ['https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz'],
+              httpAuthenticationUsername: null,
+              httpAuthenticationPassword: null,
+            },
+            inputFormat: {
+              type: 'json',
+              flattenSpec: null,
+              featureSpec: {},
+              keepNullColumns: false,
+            },
+            signature: [
+              { name: 'timestamp', type: 'STRING' },
+              { name: 'agent_type', type: 'STRING' },
+            ],
+          },
+          intervals: {
+            type: 'intervals',
+            intervals: ['-146136543-09-08T08:23:32.096Z/146140482-04-24T15:36:27.903Z'],
+          },
+          virtualColumns: [
+            {
+              type: 'expression',
+              name: 'v0',
+              expression: 'timestamp_parse("timestamp",null,\'UTC\')',
+              outputType: 'LONG',
+            },
+          ],
+          resultFormat: 'compactedList',
+          columns: ['agent_type', 'v0'],
+          legacy: false,
+          context: {
+            finalize: false,
+            finalizeAggregations: false,
+            groupByEnableMultiValueUnnesting: false,
+            scanSignature: '[{"name":"agent_type","type":"STRING"},{"name":"v0","type":"LONG"}]',
+            sqlInsertSegmentGranularity: '{"type":"all"}',
+            sqlQueryId: '32ced762-7679-4a25-9220-3915c5976961',
+            sqlReplaceTimeChunks: 'all',
+          },
+          granularity: { type: 'all' },
+        },
+        columnMappings: [
+          { queryColumn: 'v0', outputColumn: '__time' },
+          { queryColumn: 'agent_type', outputColumn: 'agent_type' },
+        ],
+        destination: {
+          type: 'dataSource',
+          dataSource: 'kttm_simple',
+          segmentGranularity: { type: 'all' },
+          replaceTimeChunks: ['-146136543-09-08T08:23:32.096Z/146140482-04-24T15:36:27.903Z'],
+        },
+        assignmentStrategy: 'max',
+        tuningConfig: { maxNumWorkers: 1, maxRowsInMemory: 100000, rowsPerSegment: 3000000 },
+      },
+      sqlQuery:
+        'REPLACE INTO "kttm_simple" OVERWRITE ALL\nSELECT TIME_PARSE("timestamp") AS "__time", agent_type\nFROM TABLE(\n  EXTERN(\n    \'{"type":"http","uris":["https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz"]}\',\n    \'{"type":"json"}\',\n    \'[{"name":"timestamp","type":"string"},{"name":"agent_type","type":"string"}]\'\n  )\n)\nPARTITIONED BY ALL TIME',
+      sqlQueryContext: {
+        finalizeAggregations: false,
+        groupByEnableMultiValueUnnesting: false,
+        maxParseExceptions: 0,
+        sqlInsertSegmentGranularity: '{"type":"all"}',
+        sqlQueryId: '32ced762-7679-4a25-9220-3915c5976961',
+        sqlReplaceTimeChunks: 'all',
+      },
+      sqlTypeNames: ['TIMESTAMP', 'VARCHAR'],
+      context: { forceTimeChunkLock: true, useLineageBasedSegmentAllocation: true },
+      groupId: 'query-32ced762-7679-4a25-9220-3915c5976961',
+      dataSource: 'kttm_simple',
+      resource: {
+        availabilityGroup: 'query-32ced762-7679-4a25-9220-3915c5976961',
+        requiredCapacity: 1,
+      },
+    },
+  },
+
+  {
+    multiStageQuery: {
+      taskId: 'query-32ced762-7679-4a25-9220-3915c5976961',
+      payload: {
+        status: { status: 'SUCCESS', startTime: '2022-08-22T20:12:51.391Z', durationMs: 25097 },
+        stages: [
+          {
+            stageNumber: 0,
+            definition: {
+              id: '0b353011-6ea1-480a-8ca8-386771621672_0',
+              input: [
+                {
+                  type: 'external',
+                  inputSource: {
+                    type: 'http',
+                    uris: [
+                      'https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz',
+                    ],
+                    httpAuthenticationUsername: null,
+                    httpAuthenticationPassword: null,
+                  },
+                  inputFormat: {
+                    type: 'json',
+                    flattenSpec: null,
+                    featureSpec: {},
+                    keepNullColumns: false,
+                  },
+                  signature: [
+                    { name: 'timestamp', type: 'STRING' },
+                    { name: 'agent_type', type: 'STRING' },
+                  ],
+                },
+              ],
+              processor: {
+                type: 'scan',
+                query: {
+                  queryType: 'scan',
+                  dataSource: { type: 'inputNumber', inputNumber: 0 },
+                  intervals: {
+                    type: 'intervals',
+                    intervals: ['-146136543-09-08T08:23:32.096Z/146140482-04-24T15:36:27.903Z'],
+                  },
+                  virtualColumns: [
+                    {
+                      type: 'expression',
+                      name: 'v0',
+                      expression: 'timestamp_parse("timestamp",null,\'UTC\')',
+                      outputType: 'LONG',
+                    },
+                  ],
+                  resultFormat: 'compactedList',
+                  columns: ['agent_type', 'v0'],
+                  legacy: false,
+                  context: {
+                    __timeColumn: 'v0',
+                    finalize: false,
+                    finalizeAggregations: false,
+                    groupByEnableMultiValueUnnesting: false,
+                    scanSignature:
+                      '[{"name":"agent_type","type":"STRING"},{"name":"v0","type":"LONG"}]',
+                    sqlInsertSegmentGranularity: '{"type":"all"}',
+                    sqlQueryId: '32ced762-7679-4a25-9220-3915c5976961',
+                    sqlReplaceTimeChunks: 'all',
+                  },
+                  granularity: { type: 'all' },
+                },
+              },
+              signature: [
+                { name: '__boost', type: 'LONG' },
+                { name: 'agent_type', type: 'STRING' },
+                { name: 'v0', type: 'LONG' },
+              ],
+              shuffleSpec: {
+                type: 'targetSize',
+                clusterBy: { columns: [{ columnName: '__boost' }] },
+                targetSize: 3000000,
+              },
+              maxWorkerCount: 1,
+              shuffleCheckHasMultipleValues: true,
+            },
+            phase: 'FINISHED',
+            workerCount: 1,
+            partitionCount: 1,
+            startTime: '2022-08-22T20:12:53.790Z',
+            duration: 20229,
+            sort: true,
+          },
+          {
+            stageNumber: 1,
+            definition: {
+              id: '0b353011-6ea1-480a-8ca8-386771621672_1',
+              input: [{ type: 'stage', stage: 0 }],
+              processor: {
+                type: 'segmentGenerator',
+                dataSchema: {
+                  dataSource: 'kttm_simple',
+                  timestampSpec: { column: '__time', format: 'millis', missingValue: null },
+                  dimensionsSpec: {
+                    dimensions: [
+                      {
+                        type: 'string',
+                        name: 'agent_type',
+                        multiValueHandling: 'SORTED_ARRAY',
+                        createBitmapIndex: true,
+                      },
+                    ],
+                    dimensionExclusions: ['__time'],
+                    includeAllDimensions: false,
+                  },
+                  metricsSpec: [],
+                  granularitySpec: {
+                    type: 'arbitrary',
+                    queryGranularity: { type: 'none' },
+                    rollup: false,
+                    intervals: ['-146136543-09-08T08:23:32.096Z/146140482-04-24T15:36:27.903Z'],
+                  },
+                  transformSpec: { filter: null, transforms: [] },
+                },
+                columnMappings: [
+                  { queryColumn: 'v0', outputColumn: '__time' },
+                  { queryColumn: 'agent_type', outputColumn: 'agent_type' },
+                ],
+                tuningConfig: {
+                  maxNumWorkers: 1,
+                  maxRowsInMemory: 100000,
+                  rowsPerSegment: 3000000,
+                },
+              },
+              signature: [],
+              maxWorkerCount: 1,
+            },
+            phase: 'FINISHED',
+            workerCount: 1,
+            partitionCount: 1,
+            startTime: '2022-08-22T20:13:13.991Z',
+            duration: 2497,
+          },
+        ],
+        counters: {
+          '0': {
+            '0': {
+              input0: { type: 'channel', rows: [465346], files: [1], totalFiles: [1] },
+              output: { type: 'channel', rows: [465346], bytes: [25430674], frames: [4] },
+              shuffle: { type: 'channel', rows: [465346], bytes: [23570446], frames: [38] },
+              sortProgress: {
+                type: 'sortProgress',
+                totalMergingLevels: 3,
+                levelToTotalBatches: { '0': 1, '1': 1, '2': 1 },
+                levelToMergedBatches: { '0': 1, '1': 1, '2': 1 },
+                totalMergersForUltimateLevel: 1,
+                progressDigest: 1.0,
+              },
+            },
+          },
+          '1': {
+            '0': { input0: { type: 'channel', rows: [465346], bytes: [23570446], frames: [38] } },
+          },
+        },
+      },
+    },
+  },
+);
diff --git a/web-console/src/druid-models/execution/execution-ingest-error.mock.ts b/web-console/src/druid-models/execution/execution-ingest-error.mock.ts
new file mode 100644
index 000000000000..b19e9f454961
--- /dev/null
+++ b/web-console/src/druid-models/execution/execution-ingest-error.mock.ts
@@ -0,0 +1,290 @@
+/*
+ * 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 { Execution } from './execution';
+
+/*
+For query:
+
+REPLACE INTO "kttm_simple" OVERWRITE ALL
+SELECT TIME_PARSE("timestamp") AS "__time", agent_type
+FROM TABLE(
+  EXTERN(
+    '{"type":"http","uris":["https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz_"]}',
+    '{"type":"json"}',
+    '[{"name":"timestamp","type":"string"},{"name":"agent_type","type":"string"}]'
+  )
+)
+PARTITIONED BY ALL
+*/
+
+export const EXECUTION_INGEST_ERROR = Execution.fromTaskPayloadAndReport(
+  {
+    task: 'query-0cf1a40a-aaef-4d17-bda4-5afa7edf07e7',
+    payload: {
+      type: 'query_controller',
+      id: 'query-0cf1a40a-aaef-4d17-bda4-5afa7edf07e7',
+      spec: {
+        query: {
+          queryType: 'scan',
+          dataSource: {
+            type: 'external',
+            inputSource: {
+              type: 'http',
+              uris: ['https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz_'],
+              httpAuthenticationUsername: null,
+              httpAuthenticationPassword: null,
+            },
+            inputFormat: {
+              type: 'json',
+              flattenSpec: null,
+              featureSpec: {},
+              keepNullColumns: false,
+            },
+            signature: [
+              { name: 'timestamp', type: 'STRING' },
+              { name: 'agent_type', type: 'STRING' },
+            ],
+          },
+          intervals: {
+            type: 'intervals',
+            intervals: ['-146136543-09-08T08:23:32.096Z/146140482-04-24T15:36:27.903Z'],
+          },
+          virtualColumns: [
+            {
+              type: 'expression',
+              name: 'v0',
+              expression: 'timestamp_parse("timestamp",null,\'UTC\')',
+              outputType: 'LONG',
+            },
+          ],
+          resultFormat: 'compactedList',
+          columns: ['agent_type', 'v0'],
+          legacy: false,
+          context: {
+            finalize: false,
+            finalizeAggregations: false,
+            groupByEnableMultiValueUnnesting: false,
+            scanSignature: '[{"name":"agent_type","type":"STRING"},{"name":"v0","type":"LONG"}]',
+            sqlInsertSegmentGranularity: '{"type":"all"}',
+            sqlQueryId: '0cf1a40a-aaef-4d17-bda4-5afa7edf07e7',
+            sqlReplaceTimeChunks: 'all',
+          },
+          granularity: { type: 'all' },
+        },
+        columnMappings: [
+          { queryColumn: 'v0', outputColumn: '__time' },
+          { queryColumn: 'agent_type', outputColumn: 'agent_type' },
+        ],
+        destination: {
+          type: 'dataSource',
+          dataSource: 'kttm_simple',
+          segmentGranularity: { type: 'all' },
+          replaceTimeChunks: ['-146136543-09-08T08:23:32.096Z/146140482-04-24T15:36:27.903Z'],
+        },
+        assignmentStrategy: 'max',
+        tuningConfig: { maxNumWorkers: 1, maxRowsInMemory: 100000, rowsPerSegment: 3000000 },
+      },
+      sqlQuery:
+        'REPLACE INTO "kttm_simple" OVERWRITE ALL\nSELECT TIME_PARSE("timestamp") AS "__time", agent_type\nFROM TABLE(\n  EXTERN(\n    \'{"type":"http","uris":["https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz_"]}\',\n    \'{"type":"json"}\',\n    \'[{"name":"timestamp","type":"string"},{"name":"agent_type","type":"string"}]\'\n  )\n)\nPARTITIONED BY ALL',
+      sqlQueryContext: {
+        finalizeAggregations: false,
+        groupByEnableMultiValueUnnesting: false,
+        maxParseExceptions: 0,
+        sqlInsertSegmentGranularity: '{"type":"all"}',
+        sqlQueryId: '0cf1a40a-aaef-4d17-bda4-5afa7edf07e7',
+        sqlReplaceTimeChunks: 'all',
+      },
+      sqlTypeNames: ['TIMESTAMP', 'VARCHAR'],
+      context: { forceTimeChunkLock: true, useLineageBasedSegmentAllocation: true },
+      groupId: 'query-0cf1a40a-aaef-4d17-bda4-5afa7edf07e7',
+      dataSource: 'kttm_simple',
+      resource: {
+        availabilityGroup: 'query-0cf1a40a-aaef-4d17-bda4-5afa7edf07e7',
+        requiredCapacity: 1,
+      },
+    },
+  },
+
+  {
+    multiStageQuery: {
+      taskId: 'query-0cf1a40a-aaef-4d17-bda4-5afa7edf07e7',
+      payload: {
+        status: {
+          status: 'FAILED',
+          errorReport: {
+            taskId: 'query-0cf1a40a-aaef-4d17-bda4-5afa7edf07e7-worker0',
+            host: 'localhost:8101',
+            stageNumber: 0,
+            error: {
+              errorCode: 'UnknownError',
+              message:
+                'java.lang.RuntimeException: java.lang.RuntimeException: Error occured while trying to read uri: https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz_',
+              errorMessage:
+                'java.lang.RuntimeException: java.lang.RuntimeException: Error occured while trying to read uri: https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz_',
+            },
+            exceptionStackTrace:
+              'java.lang.RuntimeException: java.lang.RuntimeException: Error occured while trying to read uri: https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz_\n\tat org.apache.druid.java.util.common.Either.valueOrThrow(Either.java:91)\n\tat org.apache.druid.frame.processor.FrameProcessorExecutor$1ExecutorRunnable.runProcessorNow(FrameProcessorExecutor.java:258)\n\tat org.apache.druid.frame.processor.FrameProcessorExecutor$1ExecutorRunnable.run(FrameProcessorExecutor.java:137)\n\tat org.apache.druid.msq.exec.WorkerImpl$1$2.run(WorkerImpl.java:634)\n\tat java.base/java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:515)\n\tat java.base/java.util.concurrent.FutureTask.run(FutureTask.java:264)\n\tat org.apache.druid.query.PrioritizedListenableFutureTask.run(PrioritizedExecutorService.java:251)\n\tat java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1128)\n\tat java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:628)\n\tat java.base/java.lang.Thread.run(Thread.java:829)\nCaused by: java.lang.RuntimeException: Error occured while trying to read uri: https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz_\n\tat org.apache.druid.data.input.impl.InputEntityIteratingReader.lambda$read$0(InputEntityIteratingReader.java:83)\n\tat org.apache.druid.java.util.common.parsers.CloseableIterator$2.findNextIteratorIfNecessary(CloseableIterator.java:84)\n\tat org.apache.druid.java.util.common.parsers.CloseableIterator$2.<init>(CloseableIterator.java:69)\n\tat org.apache.druid.java.util.common.parsers.CloseableIterator.flatMap(CloseableIterator.java:67)\n\tat org.apache.druid.data.input.impl.InputEntityIteratingReader.createIterator(InputEntityIteratingReader.java:105)\n\tat org.apache.druid.data.input.impl.InputEntityIteratingReader.read(InputEntityIteratingReader.java:74)\n\tat org.apache.druid.msq.indexing.CountableInputSourceReader.read(CountableInputSourceReader.java:47)\n\tat org.apache.druid.msq.input.external.ExternalInputSliceReader$1.make(ExternalInputSliceReader.java:162)\n\tat org.apache.druid.msq.input.external.ExternalInputSliceReader$1.make(ExternalInputSliceReader.java:157)\n\tat org.apache.druid.java.util.common.guava.BaseSequence.toYielder(BaseSequence.java:66)\n\tat org.apache.druid.java.util.common.guava.Yielders.each(Yielders.java:32)\n\tat org.apache.druid.segment.RowWalker.<init>(RowWalker.java:48)\n\tat org.apache.druid.segment.RowBasedStorageAdapter.makeCursors(RowBasedStorageAdapter.java:175)\n\tat org.apache.druid.msq.querykit.scan.ScanQueryFrameProcessor.makeCursors(ScanQueryFrameProcessor.java:307)\n\tat org.apache.druid.msq.querykit.scan.ScanQueryFrameProcessor.runWithSegment(ScanQueryFrameProcessor.java:166)\n\tat org.apache.druid.msq.querykit.BaseLeafFrameProcessor.runIncrementally(BaseLeafFrameProcessor.java:111)\n\tat org.apache.druid.msq.querykit.scan.ScanQueryFrameProcessor.runIncrementally(ScanQueryFrameProcessor.java:148)\n\tat org.apache.druid.frame.processor.FrameProcessors$1FrameProcessorWithBaggage.runIncrementally(FrameProcessors.java:70)\n\tat org.apache.druid.frame.processor.FrameProcessorExecutor$1ExecutorRunnable.runProcessorNow(FrameProcessorExecutor.java:229)\n\t... 8 more\nCaused by: java.io.IOException: Server returned HTTP response code: 403 for URL: https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz_\n\tat java.base/jdk.internal.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)\n\tat java.base/jdk.internal.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:62)\n\tat java.base/jdk.internal.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)\n\tat java.base/java.lang.reflect.Constructor.newInstance(Constructor.java:490)\n\tat java.base/sun.net.www.protocol.http.HttpURLConnection$10.run(HttpURLConnection.java:1974)\n\tat java.base/sun.net.www.protocol.http.HttpURLConnection$10.run(HttpURLConnection.java:1969)\n\tat java.base/java.security.AccessController.doPrivileged(Native Method)\n\tat java.base/sun.net.www.protocol.http.HttpURLConnection.getChainedException(HttpURLConnection.java:1968)\n\tat java.base/sun.net.www.protocol.http.HttpURLConnection.getInputStream0(HttpURLConnection.java:1536)\n\tat java.base/sun.net.www.protocol.http.HttpURLConnection.getInputStream(HttpURLConnection.java:1520)\n\tat java.base/sun.net.www.protocol.https.HttpsURLConnectionImpl.getInputStream(HttpsURLConnectionImpl.java:250)\n\tat org.apache.druid.data.input.impl.HttpEntity.openInputStream(HttpEntity.java:108)\n\tat org.apache.druid.data.input.impl.HttpEntity.readFrom(HttpEntity.java:68)\n\tat org.apache.druid.data.input.RetryingInputEntity.readFromStart(RetryingInputEntity.java:60)\n\tat org.apache.druid.data.input.RetryingInputEntity$RetryingInputEntityOpenFunction.open(RetryingInputEntity.java:84)\n\tat org.apache.druid.data.input.RetryingInputEntity$RetryingInputEntityOpenFunction.open(RetryingInputEntity.java:79)\n\tat org.apache.druid.data.input.impl.RetryingInputStream.<init>(RetryingInputStream.java:78)\n\tat org.apache.druid.data.input.RetryingInputEntity.open(RetryingInputEntity.java:43)\n\tat org.apache.druid.data.input.TextReader.intermediateRowIteratorWithMetadata(TextReader.java:59)\n\tat org.apache.druid.data.input.IntermediateRowParsingReader.read(IntermediateRowParsingReader.java:49)\n\tat org.apache.druid.data.input.impl.InputEntityIteratingReader.lambda$read$0(InputEntityIteratingReader.java:78)\n\t... 26 more\nCaused by: java.io.IOException: Server returned HTTP response code: 403 for URL: https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz_\n\tat java.base/sun.net.www.protocol.http.HttpURLConnection.getInputStream0(HttpURLConnection.java:1924)\n\tat java.base/sun.net.www.protocol.http.HttpURLConnection.getInputStream(HttpURLConnection.java:1520)\n\tat java.base/sun.net.www.protocol.http.HttpURLConnection.getHeaderField(HttpURLConnection.java:3099)\n\tat java.base/sun.net.www.protocol.https.HttpsURLConnectionImpl.getHeaderField(HttpsURLConnectionImpl.java:287)\n\tat org.apache.druid.data.input.impl.HttpEntity.openInputStream(HttpEntity.java:96)\n\t... 35 more\n',
+          },
+          startTime: '2022-08-22T20:15:04.783Z',
+          durationMs: 18297,
+        },
+        stages: [
+          {
+            stageNumber: 0,
+            definition: {
+              id: '36d4ec93-9367-419f-91c5-68aeaaab2397_0',
+              input: [
+                {
+                  type: 'external',
+                  inputSource: {
+                    type: 'http',
+                    uris: [
+                      'https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz_',
+                    ],
+                    httpAuthenticationUsername: null,
+                    httpAuthenticationPassword: null,
+                  },
+                  inputFormat: {
+                    type: 'json',
+                    flattenSpec: null,
+                    featureSpec: {},
+                    keepNullColumns: false,
+                  },
+                  signature: [
+                    { name: 'timestamp', type: 'STRING' },
+                    { name: 'agent_type', type: 'STRING' },
+                  ],
+                },
+              ],
+              processor: {
+                type: 'scan',
+                query: {
+                  queryType: 'scan',
+                  dataSource: { type: 'inputNumber', inputNumber: 0 },
+                  intervals: {
+                    type: 'intervals',
+                    intervals: ['-146136543-09-08T08:23:32.096Z/146140482-04-24T15:36:27.903Z'],
+                  },
+                  virtualColumns: [
+                    {
+                      type: 'expression',
+                      name: 'v0',
+                      expression: 'timestamp_parse("timestamp",null,\'UTC\')',
+                      outputType: 'LONG',
+                    },
+                  ],
+                  resultFormat: 'compactedList',
+                  columns: ['agent_type', 'v0'],
+                  legacy: false,
+                  context: {
+                    __timeColumn: 'v0',
+                    finalize: false,
+                    finalizeAggregations: false,
+                    groupByEnableMultiValueUnnesting: false,
+                    scanSignature:
+                      '[{"name":"agent_type","type":"STRING"},{"name":"v0","type":"LONG"}]',
+                    sqlInsertSegmentGranularity: '{"type":"all"}',
+                    sqlQueryId: '0cf1a40a-aaef-4d17-bda4-5afa7edf07e7',
+                    sqlReplaceTimeChunks: 'all',
+                  },
+                  granularity: { type: 'all' },
+                },
+              },
+              signature: [
+                { name: '__boost', type: 'LONG' },
+                { name: 'agent_type', type: 'STRING' },
+                { name: 'v0', type: 'LONG' },
+              ],
+              shuffleSpec: {
+                type: 'targetSize',
+                clusterBy: { columns: [{ columnName: '__boost' }] },
+                targetSize: 3000000,
+              },
+              maxWorkerCount: 1,
+              shuffleCheckHasMultipleValues: true,
+            },
+            workerCount: 1,
+            startTime: '2022-08-22T20:15:07.190Z',
+            duration: 15890,
+            sort: true,
+          },
+          {
+            stageNumber: 1,
+            definition: {
+              id: '36d4ec93-9367-419f-91c5-68aeaaab2397_1',
+              input: [{ type: 'stage', stage: 0 }],
+              processor: {
+                type: 'segmentGenerator',
+                dataSchema: {
+                  dataSource: 'kttm_simple',
+                  timestampSpec: { column: '__time', format: 'millis', missingValue: null },
+                  dimensionsSpec: {
+                    dimensions: [
+                      {
+                        type: 'string',
+                        name: 'agent_type',
+                        multiValueHandling: 'SORTED_ARRAY',
+                        createBitmapIndex: true,
+                      },
+                    ],
+                    dimensionExclusions: ['__time'],
+                    includeAllDimensions: false,
+                  },
+                  metricsSpec: [],
+                  granularitySpec: {
+                    type: 'arbitrary',
+                    queryGranularity: { type: 'none' },
+                    rollup: false,
+                    intervals: ['-146136543-09-08T08:23:32.096Z/146140482-04-24T15:36:27.903Z'],
+                  },
+                  transformSpec: { filter: null, transforms: [] },
+                },
+                columnMappings: [
+                  { queryColumn: 'v0', outputColumn: '__time' },
+                  { queryColumn: 'agent_type', outputColumn: 'agent_type' },
+                ],
+                tuningConfig: {
+                  maxNumWorkers: 1,
+                  maxRowsInMemory: 100000,
+                  rowsPerSegment: 3000000,
+                },
+              },
+              signature: [],
+              maxWorkerCount: 1,
+            },
+          },
+        ],
+        counters: {
+          '0': {
+            '0': {
+              input0: { type: 'channel', totalFiles: [1] },
+              sortProgress: {
+                type: 'sortProgress',
+                totalMergingLevels: -1,
+                levelToTotalBatches: {},
+                levelToMergedBatches: {},
+                totalMergersForUltimateLevel: -1,
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+);
diff --git a/web-console/src/druid-models/execution/execution.spec.ts b/web-console/src/druid-models/execution/execution.spec.ts
new file mode 100644
index 000000000000..31ec5af457a6
--- /dev/null
+++ b/web-console/src/druid-models/execution/execution.spec.ts
@@ -0,0 +1,530 @@
+/*
+ * 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 { Execution } from './execution';
+import { EXECUTION_INGEST_COMPLETE } from './execution-ingest-complete.mock';
+
+describe('Execution', () => {
+  describe('.fromTaskDetail', () => {
+    it('fails for bad status (error: null)', () => {
+      expect(() =>
+        Execution.fromTaskPayloadAndReport(
+          {} as any,
+          {
+            asyncResultId: 'multi-stage-query-sql-1392d806-c17f-4937-94ee-8fa0a3ce1566',
+            error: null,
+          } as any,
+        ),
+      ).toThrowError('Invalid payload');
+    });
+
+    it('works in a general case', () => {
+      expect(EXECUTION_INGEST_COMPLETE).toMatchInlineSnapshot(`
+        Execution {
+          "_payload": Object {
+            "payload": Object {
+              "context": Object {
+                "forceTimeChunkLock": true,
+                "useLineageBasedSegmentAllocation": true,
+              },
+              "dataSource": "kttm_simple",
+              "groupId": "query-32ced762-7679-4a25-9220-3915c5976961",
+              "id": "query-32ced762-7679-4a25-9220-3915c5976961",
+              "resource": Object {
+                "availabilityGroup": "query-32ced762-7679-4a25-9220-3915c5976961",
+                "requiredCapacity": 1,
+              },
+              "spec": Object {
+                "assignmentStrategy": "max",
+                "columnMappings": Array [
+                  Object {
+                    "outputColumn": "__time",
+                    "queryColumn": "v0",
+                  },
+                  Object {
+                    "outputColumn": "agent_type",
+                    "queryColumn": "agent_type",
+                  },
+                ],
+                "destination": Object {
+                  "dataSource": "kttm_simple",
+                  "replaceTimeChunks": Array [
+                    "-146136543-09-08T08:23:32.096Z/146140482-04-24T15:36:27.903Z",
+                  ],
+                  "segmentGranularity": Object {
+                    "type": "all",
+                  },
+                  "type": "dataSource",
+                },
+                "query": Object {
+                  "columns": Array [
+                    "agent_type",
+                    "v0",
+                  ],
+                  "context": Object {
+                    "finalize": false,
+                    "finalizeAggregations": false,
+                    "groupByEnableMultiValueUnnesting": false,
+                    "scanSignature": "[{\\"name\\":\\"agent_type\\",\\"type\\":\\"STRING\\"},{\\"name\\":\\"v0\\",\\"type\\":\\"LONG\\"}]",
+                    "sqlInsertSegmentGranularity": "{\\"type\\":\\"all\\"}",
+                    "sqlQueryId": "32ced762-7679-4a25-9220-3915c5976961",
+                    "sqlReplaceTimeChunks": "all",
+                  },
+                  "dataSource": Object {
+                    "inputFormat": Object {
+                      "featureSpec": Object {},
+                      "flattenSpec": null,
+                      "keepNullColumns": false,
+                      "type": "json",
+                    },
+                    "inputSource": Object {
+                      "httpAuthenticationPassword": null,
+                      "httpAuthenticationUsername": null,
+                      "type": "http",
+                      "uris": Array [
+                        "https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz",
+                      ],
+                    },
+                    "signature": Array [
+                      Object {
+                        "name": "timestamp",
+                        "type": "STRING",
+                      },
+                      Object {
+                        "name": "agent_type",
+                        "type": "STRING",
+                      },
+                    ],
+                    "type": "external",
+                  },
+                  "granularity": Object {
+                    "type": "all",
+                  },
+                  "intervals": Object {
+                    "intervals": Array [
+                      "-146136543-09-08T08:23:32.096Z/146140482-04-24T15:36:27.903Z",
+                    ],
+                    "type": "intervals",
+                  },
+                  "legacy": false,
+                  "queryType": "scan",
+                  "resultFormat": "compactedList",
+                  "virtualColumns": Array [
+                    Object {
+                      "expression": "timestamp_parse(\\"timestamp\\",null,'UTC')",
+                      "name": "v0",
+                      "outputType": "LONG",
+                      "type": "expression",
+                    },
+                  ],
+                },
+                "tuningConfig": Object {
+                  "maxNumWorkers": 1,
+                  "maxRowsInMemory": 100000,
+                  "rowsPerSegment": 3000000,
+                },
+              },
+              "sqlQuery": "REPLACE INTO \\"kttm_simple\\" OVERWRITE ALL
+        SELECT TIME_PARSE(\\"timestamp\\") AS \\"__time\\", agent_type
+        FROM TABLE(
+          EXTERN(
+            '{\\"type\\":\\"http\\",\\"uris\\":[\\"https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz\\"]}',
+            '{\\"type\\":\\"json\\"}',
+            '[{\\"name\\":\\"timestamp\\",\\"type\\":\\"string\\"},{\\"name\\":\\"agent_type\\",\\"type\\":\\"string\\"}]'
+          )
+        )
+        PARTITIONED BY ALL TIME",
+              "sqlQueryContext": Object {
+                "finalizeAggregations": false,
+                "groupByEnableMultiValueUnnesting": false,
+                "maxParseExceptions": 0,
+                "sqlInsertSegmentGranularity": "{\\"type\\":\\"all\\"}",
+                "sqlQueryId": "32ced762-7679-4a25-9220-3915c5976961",
+                "sqlReplaceTimeChunks": "all",
+              },
+              "sqlTypeNames": Array [
+                "TIMESTAMP",
+                "VARCHAR",
+              ],
+              "type": "query_controller",
+            },
+            "task": "query-32ced762-7679-4a25-9220-3915c5976961",
+          },
+          "destination": Object {
+            "dataSource": "kttm_simple",
+            "replaceTimeChunks": Array [
+              "-146136543-09-08T08:23:32.096Z/146140482-04-24T15:36:27.903Z",
+            ],
+            "segmentGranularity": Object {
+              "type": "all",
+            },
+            "type": "dataSource",
+          },
+          "duration": 25097,
+          "engine": "sql-msq-task",
+          "error": undefined,
+          "id": "query-32ced762-7679-4a25-9220-3915c5976961",
+          "nativeQuery": Object {
+            "columns": Array [
+              "agent_type",
+              "v0",
+            ],
+            "context": Object {
+              "finalize": false,
+              "finalizeAggregations": false,
+              "groupByEnableMultiValueUnnesting": false,
+              "scanSignature": "[{\\"name\\":\\"agent_type\\",\\"type\\":\\"STRING\\"},{\\"name\\":\\"v0\\",\\"type\\":\\"LONG\\"}]",
+              "sqlInsertSegmentGranularity": "{\\"type\\":\\"all\\"}",
+              "sqlQueryId": "32ced762-7679-4a25-9220-3915c5976961",
+              "sqlReplaceTimeChunks": "all",
+            },
+            "dataSource": Object {
+              "inputFormat": Object {
+                "featureSpec": Object {},
+                "flattenSpec": null,
+                "keepNullColumns": false,
+                "type": "json",
+              },
+              "inputSource": Object {
+                "httpAuthenticationPassword": null,
+                "httpAuthenticationUsername": null,
+                "type": "http",
+                "uris": Array [
+                  "https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz",
+                ],
+              },
+              "signature": Array [
+                Object {
+                  "name": "timestamp",
+                  "type": "STRING",
+                },
+                Object {
+                  "name": "agent_type",
+                  "type": "STRING",
+                },
+              ],
+              "type": "external",
+            },
+            "granularity": Object {
+              "type": "all",
+            },
+            "intervals": Object {
+              "intervals": Array [
+                "-146136543-09-08T08:23:32.096Z/146140482-04-24T15:36:27.903Z",
+              ],
+              "type": "intervals",
+            },
+            "legacy": false,
+            "queryType": "scan",
+            "resultFormat": "compactedList",
+            "virtualColumns": Array [
+              Object {
+                "expression": "timestamp_parse(\\"timestamp\\",null,'UTC')",
+                "name": "v0",
+                "outputType": "LONG",
+                "type": "expression",
+              },
+            ],
+          },
+          "queryContext": Object {
+            "finalizeAggregations": false,
+            "groupByEnableMultiValueUnnesting": false,
+            "maxParseExceptions": 0,
+          },
+          "result": undefined,
+          "sqlQuery": "REPLACE INTO \\"kttm_simple\\" OVERWRITE ALL
+        SELECT TIME_PARSE(\\"timestamp\\") AS \\"__time\\", agent_type
+        FROM TABLE(
+          EXTERN(
+            '{\\"type\\":\\"http\\",\\"uris\\":[\\"https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz\\"]}',
+            '{\\"type\\":\\"json\\"}',
+            '[{\\"name\\":\\"timestamp\\",\\"type\\":\\"string\\"},{\\"name\\":\\"agent_type\\",\\"type\\":\\"string\\"}]'
+          )
+        )
+        PARTITIONED BY ALL TIME",
+          "stages": Stages {
+            "counters": Object {
+              "0": Object {
+                "0": Object {
+                  "input0": Object {
+                    "files": Array [
+                      1,
+                    ],
+                    "rows": Array [
+                      465346,
+                    ],
+                    "totalFiles": Array [
+                      1,
+                    ],
+                    "type": "channel",
+                  },
+                  "output": Object {
+                    "bytes": Array [
+                      25430674,
+                    ],
+                    "frames": Array [
+                      4,
+                    ],
+                    "rows": Array [
+                      465346,
+                    ],
+                    "type": "channel",
+                  },
+                  "shuffle": Object {
+                    "bytes": Array [
+                      23570446,
+                    ],
+                    "frames": Array [
+                      38,
+                    ],
+                    "rows": Array [
+                      465346,
+                    ],
+                    "type": "channel",
+                  },
+                  "sortProgress": Object {
+                    "levelToMergedBatches": Object {
+                      "0": 1,
+                      "1": 1,
+                      "2": 1,
+                    },
+                    "levelToTotalBatches": Object {
+                      "0": 1,
+                      "1": 1,
+                      "2": 1,
+                    },
+                    "progressDigest": 1,
+                    "totalMergersForUltimateLevel": 1,
+                    "totalMergingLevels": 3,
+                    "type": "sortProgress",
+                  },
+                },
+              },
+              "1": Object {
+                "0": Object {
+                  "input0": Object {
+                    "bytes": Array [
+                      23570446,
+                    ],
+                    "frames": Array [
+                      38,
+                    ],
+                    "rows": Array [
+                      465346,
+                    ],
+                    "type": "channel",
+                  },
+                },
+              },
+            },
+            "stages": Array [
+              Object {
+                "definition": Object {
+                  "id": "0b353011-6ea1-480a-8ca8-386771621672_0",
+                  "input": Array [
+                    Object {
+                      "inputFormat": Object {
+                        "featureSpec": Object {},
+                        "flattenSpec": null,
+                        "keepNullColumns": false,
+                        "type": "json",
+                      },
+                      "inputSource": Object {
+                        "httpAuthenticationPassword": null,
+                        "httpAuthenticationUsername": null,
+                        "type": "http",
+                        "uris": Array [
+                          "https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz",
+                        ],
+                      },
+                      "signature": Array [
+                        Object {
+                          "name": "timestamp",
+                          "type": "STRING",
+                        },
+                        Object {
+                          "name": "agent_type",
+                          "type": "STRING",
+                        },
+                      ],
+                      "type": "external",
+                    },
+                  ],
+                  "maxWorkerCount": 1,
+                  "processor": Object {
+                    "query": Object {
+                      "columns": Array [
+                        "agent_type",
+                        "v0",
+                      ],
+                      "context": Object {
+                        "__timeColumn": "v0",
+                        "finalize": false,
+                        "finalizeAggregations": false,
+                        "groupByEnableMultiValueUnnesting": false,
+                        "scanSignature": "[{\\"name\\":\\"agent_type\\",\\"type\\":\\"STRING\\"},{\\"name\\":\\"v0\\",\\"type\\":\\"LONG\\"}]",
+                        "sqlInsertSegmentGranularity": "{\\"type\\":\\"all\\"}",
+                        "sqlQueryId": "32ced762-7679-4a25-9220-3915c5976961",
+                        "sqlReplaceTimeChunks": "all",
+                      },
+                      "dataSource": Object {
+                        "inputNumber": 0,
+                        "type": "inputNumber",
+                      },
+                      "granularity": Object {
+                        "type": "all",
+                      },
+                      "intervals": Object {
+                        "intervals": Array [
+                          "-146136543-09-08T08:23:32.096Z/146140482-04-24T15:36:27.903Z",
+                        ],
+                        "type": "intervals",
+                      },
+                      "legacy": false,
+                      "queryType": "scan",
+                      "resultFormat": "compactedList",
+                      "virtualColumns": Array [
+                        Object {
+                          "expression": "timestamp_parse(\\"timestamp\\",null,'UTC')",
+                          "name": "v0",
+                          "outputType": "LONG",
+                          "type": "expression",
+                        },
+                      ],
+                    },
+                    "type": "scan",
+                  },
+                  "shuffleCheckHasMultipleValues": true,
+                  "shuffleSpec": Object {
+                    "clusterBy": Object {
+                      "columns": Array [
+                        Object {
+                          "columnName": "__boost",
+                        },
+                      ],
+                    },
+                    "targetSize": 3000000,
+                    "type": "targetSize",
+                  },
+                  "signature": Array [
+                    Object {
+                      "name": "__boost",
+                      "type": "LONG",
+                    },
+                    Object {
+                      "name": "agent_type",
+                      "type": "STRING",
+                    },
+                    Object {
+                      "name": "v0",
+                      "type": "LONG",
+                    },
+                  ],
+                },
+                "duration": 20229,
+                "partitionCount": 1,
+                "phase": "FINISHED",
+                "sort": true,
+                "stageNumber": 0,
+                "startTime": "2022-08-22T20:12:53.790Z",
+                "workerCount": 1,
+              },
+              Object {
+                "definition": Object {
+                  "id": "0b353011-6ea1-480a-8ca8-386771621672_1",
+                  "input": Array [
+                    Object {
+                      "stage": 0,
+                      "type": "stage",
+                    },
+                  ],
+                  "maxWorkerCount": 1,
+                  "processor": Object {
+                    "columnMappings": Array [
+                      Object {
+                        "outputColumn": "__time",
+                        "queryColumn": "v0",
+                      },
+                      Object {
+                        "outputColumn": "agent_type",
+                        "queryColumn": "agent_type",
+                      },
+                    ],
+                    "dataSchema": Object {
+                      "dataSource": "kttm_simple",
+                      "dimensionsSpec": Object {
+                        "dimensionExclusions": Array [
+                          "__time",
+                        ],
+                        "dimensions": Array [
+                          Object {
+                            "createBitmapIndex": true,
+                            "multiValueHandling": "SORTED_ARRAY",
+                            "name": "agent_type",
+                            "type": "string",
+                          },
+                        ],
+                        "includeAllDimensions": false,
+                      },
+                      "granularitySpec": Object {
+                        "intervals": Array [
+                          "-146136543-09-08T08:23:32.096Z/146140482-04-24T15:36:27.903Z",
+                        ],
+                        "queryGranularity": Object {
+                          "type": "none",
+                        },
+                        "rollup": false,
+                        "type": "arbitrary",
+                      },
+                      "metricsSpec": Array [],
+                      "timestampSpec": Object {
+                        "column": "__time",
+                        "format": "millis",
+                        "missingValue": null,
+                      },
+                      "transformSpec": Object {
+                        "filter": null,
+                        "transforms": Array [],
+                      },
+                    },
+                    "tuningConfig": Object {
+                      "maxNumWorkers": 1,
+                      "maxRowsInMemory": 100000,
+                      "rowsPerSegment": 3000000,
+                    },
+                    "type": "segmentGenerator",
+                  },
+                  "signature": Array [],
+                },
+                "duration": 2497,
+                "partitionCount": 1,
+                "phase": "FINISHED",
+                "stageNumber": 1,
+                "startTime": "2022-08-22T20:13:13.991Z",
+                "workerCount": 1,
+              },
+            ],
+          },
+          "startTime": 2022-08-22T20:12:51.391Z,
+          "status": "SUCCESS",
+          "warnings": undefined,
+        }
+      `);
+    });
+  });
+});
diff --git a/web-console/src/druid-models/execution/execution.ts b/web-console/src/druid-models/execution/execution.ts
new file mode 100644
index 000000000000..5aeeb47a2ab4
--- /dev/null
+++ b/web-console/src/druid-models/execution/execution.ts
@@ -0,0 +1,467 @@
+/*
+ * 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 { Column, QueryResult, SqlExpression, SqlQuery, SqlWithQuery } from 'druid-query-toolkit';
+
+import { deepGet, deleteKeys, nonEmptyArray, oneOf } from '../../utils';
+import { DruidEngine, validDruidEngine } from '../druid-engine/druid-engine';
+import { QueryContext } from '../query-context/query-context';
+import { Stages } from '../stages/stages';
+
+const IGNORE_CONTEXT_KEYS = [
+  '__asyncIdentity__',
+  '__timeColumn',
+  'queryId',
+  'sqlQueryId',
+  'sqlInsertSegmentGranularity',
+  'signature',
+  'scanSignature',
+  'sqlReplaceTimeChunks',
+];
+
+// Hack around the concept that we might get back a SqlWithQuery and will need to unpack it
+function parseSqlQuery(queryString: string): SqlQuery | undefined {
+  const q = SqlExpression.maybeParse(queryString);
+  if (!q) return;
+  if (q instanceof SqlWithQuery) return q.flattenWith();
+  if (q instanceof SqlQuery) return q;
+  return;
+}
+
+export interface ExecutionError {
+  error: {
+    errorCode: string;
+    errorMessage?: string;
+    [key: string]: any;
+  };
+  host?: string;
+  taskId?: string;
+  stageNumber?: number;
+  exceptionStackTrace?: string;
+}
+
+type ExecutionDestination =
+  | {
+      type: 'taskReport';
+    }
+  | { type: 'dataSource'; dataSource: string; exists?: boolean }
+  | { type: 'download' };
+
+export type ExecutionStatus = 'RUNNING' | 'FAILED' | 'SUCCESS';
+
+export interface LastExecution {
+  engine: DruidEngine;
+  id: string;
+}
+
+export function validateLastExecution(possibleLastExecution: any): LastExecution | undefined {
+  if (
+    !possibleLastExecution ||
+    !validDruidEngine(possibleLastExecution.engine) ||
+    typeof possibleLastExecution.id !== 'string'
+  ) {
+    return;
+  }
+
+  return {
+    engine: possibleLastExecution.engine,
+    id: possibleLastExecution.id,
+  };
+}
+
+export interface ExecutionValue {
+  engine: DruidEngine;
+  id: string;
+  sqlQuery?: string;
+  nativeQuery?: any;
+  queryContext?: QueryContext;
+  status?: ExecutionStatus;
+  startTime?: Date;
+  duration?: number;
+  stages?: Stages;
+  destination?: ExecutionDestination;
+  result?: QueryResult;
+  error?: ExecutionError;
+  warnings?: ExecutionError[];
+  _payload?: { payload: any; task: string };
+}
+
+export class Execution {
+  static validAsyncStatus(
+    status: string | undefined,
+  ): status is 'INITIALIZED' | 'RUNNING' | 'COMPLETE' | 'FAILED' | 'UNDETERMINED' {
+    return oneOf(status, 'INITIALIZED', 'RUNNING', 'COMPLETE', 'FAILED', 'UNDETERMINED');
+  }
+
+  static validTaskStatus(
+    status: string | undefined,
+  ): status is 'WAITING' | 'PENDING' | 'RUNNING' | 'FAILED' | 'SUCCESS' {
+    return oneOf(status, 'WAITING', 'PENDING', 'RUNNING', 'FAILED', 'SUCCESS');
+  }
+
+  static normalizeAsyncStatus(
+    state: 'INITIALIZED' | 'RUNNING' | 'COMPLETE' | 'FAILED' | 'UNDETERMINED',
+  ): ExecutionStatus {
+    switch (state) {
+      case 'COMPLETE':
+        return 'SUCCESS';
+
+      case 'INITIALIZED':
+      case 'UNDETERMINED':
+        return 'RUNNING';
+
+      default:
+        return state;
+    }
+  }
+
+  // Treat WAITING as PENDING since they are all the same as far as the UI is concerned
+  static normalizeTaskStatus(
+    status: 'WAITING' | 'PENDING' | 'RUNNING' | 'FAILED' | 'SUCCESS',
+  ): ExecutionStatus {
+    switch (status) {
+      case 'SUCCESS':
+      case 'FAILED':
+        return status;
+
+      default:
+        return 'RUNNING';
+    }
+  }
+
+  static fromTaskSubmit(
+    taskSubmitResult: { state: any; taskId: string; error: any },
+    sqlQuery?: string,
+    queryContext?: QueryContext,
+  ): Execution {
+    const status = Execution.normalizeTaskStatus(taskSubmitResult.state);
+    return new Execution({
+      engine: 'sql-msq-task',
+      id: taskSubmitResult.taskId,
+      status: taskSubmitResult.error ? 'FAILED' : status,
+      sqlQuery,
+      queryContext,
+      error: taskSubmitResult.error
+        ? {
+            error: {
+              errorCode: 'AsyncError',
+              errorMessage: JSON.stringify(taskSubmitResult.error),
+            },
+          }
+        : status === 'FAILED'
+        ? {
+            error: {
+              errorCode: 'UnknownError',
+              errorMessage:
+                'Execution failed, there is no detail information, and there is no error in the status response',
+            },
+          }
+        : undefined,
+      destination: undefined,
+    });
+  }
+
+  static fromTaskStatus(
+    taskStatus: { status: any; task: string },
+    sqlQuery?: string,
+    queryContext?: QueryContext,
+  ): Execution {
+    const status = Execution.normalizeTaskStatus(taskStatus.status.status);
+    return new Execution({
+      engine: 'sql-msq-task',
+      id: taskStatus.task,
+      status: taskStatus.status.error ? 'FAILED' : status,
+      sqlQuery,
+      queryContext,
+      error: taskStatus.status.error
+        ? {
+            error: {
+              errorCode: 'AsyncError',
+              errorMessage: JSON.stringify(taskStatus.status.error),
+            },
+          }
+        : status === 'FAILED'
+        ? {
+            error: {
+              errorCode: 'UnknownError',
+              errorMessage:
+                'Execution failed, there is no detail information, and there is no error in the status response',
+            },
+          }
+        : undefined,
+      destination: undefined,
+    });
+  }
+
+  static fromTaskPayloadAndReport(
+    taskPayload: { payload: any; task: string },
+    taskReport: {
+      multiStageQuery: { payload: any; taskId: string };
+      error?: any;
+    },
+  ): Execution {
+    // Must have status set for a valid report
+    const id = deepGet(taskReport, 'multiStageQuery.taskId');
+    const status = deepGet(taskReport, 'multiStageQuery.payload.status.status');
+    const warnings = deepGet(taskReport, 'multiStageQuery.payload.status.warningReports');
+
+    if (typeof id !== 'string' || !Execution.validTaskStatus(status)) {
+      throw new Error('Invalid payload');
+    }
+
+    let error: ExecutionError | undefined;
+    if (status === 'FAILED') {
+      error =
+        deepGet(taskReport, 'multiStageQuery.payload.status.errorReport') ||
+        (typeof taskReport.error === 'string'
+          ? { error: { errorCode: 'UnknownError', errorMessage: taskReport.error } }
+          : undefined);
+    }
+
+    const stages = deepGet(taskReport, 'multiStageQuery.payload.stages');
+    const startTime = new Date(deepGet(taskReport, 'multiStageQuery.payload.status.startTime'));
+    const durationMs = deepGet(taskReport, 'multiStageQuery.payload.status.durationMs');
+
+    let result: QueryResult | undefined;
+    const resultsPayload: {
+      signature: { name: string; type: string }[];
+      sqlTypeNames: string[];
+      results: any[];
+    } = deepGet(taskReport, 'multiStageQuery.payload.results');
+    if (resultsPayload) {
+      const { signature, sqlTypeNames, results } = resultsPayload;
+      result = new QueryResult({
+        header: signature.map(
+          (sig, i: number) =>
+            new Column({ name: sig.name, nativeType: sig.type, sqlType: sqlTypeNames?.[i] }),
+        ),
+        rows: results,
+      }).inflateDatesFromSqlTypes();
+    }
+
+    let res = new Execution({
+      engine: 'sql-msq-task',
+      id,
+      status: Execution.normalizeTaskStatus(status),
+      startTime: isNaN(startTime.getTime()) ? undefined : startTime,
+      duration: typeof durationMs === 'number' ? durationMs : undefined,
+      stages: Array.isArray(stages)
+        ? new Stages(stages, deepGet(taskReport, 'multiStageQuery.payload.counters'))
+        : undefined,
+      error,
+      warnings: Array.isArray(warnings) ? warnings : undefined,
+      destination: deepGet(taskPayload, 'payload.spec.destination'),
+      result,
+      nativeQuery: deepGet(taskPayload, 'payload.spec.query'),
+
+      _payload: taskPayload,
+    });
+
+    if (deepGet(taskPayload, 'payload.sqlQuery')) {
+      res = res.changeSqlQuery(
+        deepGet(taskPayload, 'payload.sqlQuery'),
+        deleteKeys(deepGet(taskPayload, 'payload.sqlQueryContext'), IGNORE_CONTEXT_KEYS),
+      );
+    }
+
+    return res;
+  }
+
+  static fromResult(engine: DruidEngine, result: QueryResult): Execution {
+    return new Execution({
+      engine,
+      id: result.sqlQueryId || result.queryId || 'direct_result',
+      status: 'SUCCESS',
+      result,
+      duration: result.queryDuration,
+    });
+  }
+
+  public readonly engine: DruidEngine;
+  public readonly id: string;
+  public readonly sqlQuery?: string;
+  public readonly nativeQuery?: any;
+  public readonly queryContext?: QueryContext;
+  public readonly status?: ExecutionStatus;
+  public readonly startTime?: Date;
+  public readonly duration?: number;
+  public readonly stages?: Stages;
+  public readonly destination?: ExecutionDestination;
+  public readonly result?: QueryResult;
+  public readonly error?: ExecutionError;
+  public readonly warnings?: ExecutionError[];
+
+  public readonly _payload?: { payload: any; task: string };
+
+  constructor(value: ExecutionValue) {
+    this.engine = value.engine;
+    this.id = value.id;
+    if (!this.id) throw new Error('must have an id');
+    this.sqlQuery = value.sqlQuery;
+    this.nativeQuery = value.nativeQuery;
+    this.queryContext = value.queryContext;
+    this.status = value.status;
+    this.startTime = value.startTime;
+    this.duration = value.duration;
+    this.stages = value.stages;
+    this.destination = value.destination;
+    this.result = value.result;
+    this.error = value.error;
+    this.warnings = nonEmptyArray(value.warnings) ? value.warnings : undefined;
+
+    this._payload = value._payload;
+  }
+
+  valueOf(): ExecutionValue {
+    return {
+      engine: this.engine,
+      id: this.id,
+      sqlQuery: this.sqlQuery,
+      nativeQuery: this.nativeQuery,
+      queryContext: this.queryContext,
+      status: this.status,
+      startTime: this.startTime,
+      duration: this.duration,
+      stages: this.stages,
+      destination: this.destination,
+      result: this.result,
+      error: this.error,
+      warnings: this.warnings,
+
+      _payload: this._payload,
+    };
+  }
+
+  public changeSqlQuery(sqlQuery: string, queryContext?: QueryContext): Execution {
+    const value = this.valueOf();
+
+    value.sqlQuery = sqlQuery;
+    value.queryContext = queryContext;
+    const parsedQuery = parseSqlQuery(sqlQuery);
+    if (value.result && (parsedQuery || queryContext)) {
+      value.result = value.result.attachQuery({ context: queryContext }, parsedQuery);
+    }
+
+    return new Execution(value);
+  }
+
+  public changeDestination(destination: ExecutionDestination): Execution {
+    return new Execution({
+      ...this.valueOf(),
+      destination,
+    });
+  }
+
+  public changeResult(result: QueryResult): Execution {
+    return new Execution({
+      ...this.valueOf(),
+      result: result.attachQuery({}, this.sqlQuery ? parseSqlQuery(this.sqlQuery) : undefined),
+    });
+  }
+
+  public updateWith(newSummary: Execution): Execution {
+    let nextSummary = newSummary;
+    if (this.sqlQuery && !nextSummary.sqlQuery) {
+      nextSummary = nextSummary.changeSqlQuery(this.sqlQuery, this.queryContext);
+    }
+    if (this.destination && !nextSummary.destination) {
+      nextSummary = nextSummary.changeDestination(this.destination);
+    }
+
+    return nextSummary;
+  }
+
+  public attachErrorFromStatus(status: any): Execution {
+    const errorMsg = deepGet(status, 'status.errorMsg');
+
+    return new Execution({
+      ...this.valueOf(),
+      error: {
+        error: {
+          errorCode: 'UnknownError',
+          errorMessage: errorMsg,
+        },
+      },
+    });
+  }
+
+  public markDestinationDatasourceExists(): Execution {
+    const { destination } = this;
+    if (destination?.type !== 'dataSource') return this;
+
+    return new Execution({
+      ...this.valueOf(),
+      destination: {
+        ...destination,
+        exists: true,
+      },
+    });
+  }
+
+  public isProcessingData(): boolean {
+    const { status, stages } = this;
+    return Boolean(
+      status === 'RUNNING' &&
+        stages &&
+        stages.getTotalInputForStage(stages.getStage(0), 'rows') > 0,
+    );
+  }
+
+  public isWaitingForQuery(): boolean {
+    const { status } = this;
+    return status !== 'SUCCESS' && status !== 'FAILED';
+  }
+
+  public isFullyComplete(): boolean {
+    if (this.isWaitingForQuery()) return false;
+
+    const { status, destination } = this;
+    if (status === 'SUCCESS' && destination?.type === 'dataSource') {
+      return Boolean(destination.exists);
+    }
+
+    return true;
+  }
+
+  public getIngestDatasource(): string | undefined {
+    const { destination } = this;
+    if (destination?.type !== 'dataSource') return;
+    return destination.dataSource;
+  }
+
+  public isSuccessfulInsert(): boolean {
+    return Boolean(
+      this.isFullyComplete() && this.getIngestDatasource() && this.status === 'SUCCESS',
+    );
+  }
+
+  public getErrorMessage(): string | undefined {
+    const { error } = this;
+    if (!error) return;
+    return (
+      (error.error.errorCode ? `${error.error.errorCode}: ` : '') +
+      (error.error.errorMessage || (error.exceptionStackTrace || '').split('\n')[0])
+    );
+  }
+
+  public getEndTime(): Date | undefined {
+    const { startTime, duration } = this;
+    if (!startTime || !duration) return;
+    return new Date(startTime.valueOf() + duration);
+  }
+}
diff --git a/web-console/src/druid-models/external-config/external-config.ts b/web-console/src/druid-models/external-config/external-config.ts
new file mode 100644
index 000000000000..d9dcb97cd1bc
--- /dev/null
+++ b/web-console/src/druid-models/external-config/external-config.ts
@@ -0,0 +1,192 @@
+/*
+ * 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 {
+  filterMap,
+  SqlExpression,
+  SqlFunction,
+  SqlLiteral,
+  SqlQuery,
+  SqlRef,
+  SqlStar,
+} from 'druid-query-toolkit';
+import * as JSONBig from 'json-bigint-native';
+
+import { nonEmptyArray } from '../../utils';
+import { InputFormat } from '../input-format/input-format';
+import { InputSource } from '../input-source/input-source';
+
+export const MULTI_STAGE_QUERY_MAX_COLUMNS = 2000;
+const MAX_LINES = 10;
+
+function joinLinesMax(lines: string[], max: number) {
+  if (lines.length > max) {
+    lines = lines.slice(0, max).concat(`(and ${lines.length - max} more)`);
+  }
+  return lines.join('\n');
+}
+
+export interface ExternalConfig {
+  inputSource: InputSource;
+  inputFormat: InputFormat;
+  signature: SignatureColumn[];
+}
+
+export interface SignatureColumn {
+  name: string;
+  type: string;
+}
+
+export function summarizeInputSource(inputSource: InputSource, multiline: boolean): string {
+  switch (inputSource.type) {
+    case 'inline':
+      return `inline data`;
+
+    case 'local':
+      // ToDo: make this official
+      if (nonEmptyArray((inputSource as any).files)) {
+        let lines: string[] = (inputSource as any).files;
+        if (!multiline) lines = lines.slice(0, 1);
+        return joinLinesMax(lines, MAX_LINES);
+      }
+      return `${inputSource.baseDir || '?'}{${inputSource.filter || '?'}}`;
+
+    case 'http':
+      if (nonEmptyArray(inputSource.uris)) {
+        let lines: string[] = inputSource.uris;
+        if (!multiline) lines = lines.slice(0, 1);
+        return joinLinesMax(lines, MAX_LINES);
+      }
+      return '?';
+
+    case 's3':
+    case 'google':
+    case 'azure': {
+      const possibleLines = inputSource.uris || inputSource.prefixes;
+      if (nonEmptyArray(possibleLines)) {
+        let lines: string[] = possibleLines;
+        if (!multiline) lines = lines.slice(0, 1);
+        return joinLinesMax(lines, MAX_LINES);
+      }
+      if (nonEmptyArray(inputSource.objects)) {
+        let lines: string[] = inputSource.objects.map(({ bucket, path }) => `${bucket}:${path}`);
+        if (!multiline) lines = lines.slice(0, 1);
+        return joinLinesMax(lines, MAX_LINES);
+      }
+      return '?';
+    }
+
+    case 'hdfs': {
+      const paths =
+        typeof inputSource.paths === 'string' ? inputSource.paths.split(',') : inputSource.paths;
+      if (nonEmptyArray(paths)) {
+        let lines: string[] = paths;
+        if (!multiline) lines = lines.slice(0, 1);
+        return joinLinesMax(lines, MAX_LINES);
+      }
+      return '?';
+    }
+
+    default:
+      return String(inputSource.type);
+  }
+}
+
+export function summarizeInputFormat(inputFormat: InputFormat): string {
+  return String(inputFormat.type);
+}
+
+export function summarizeExternalConfig(externalConfig: ExternalConfig): string {
+  return `${summarizeInputSource(externalConfig.inputSource, false)} [${summarizeInputFormat(
+    externalConfig.inputFormat,
+  )}]`;
+}
+
+export function externalConfigToTableExpression(config: ExternalConfig): SqlExpression {
+  return SqlExpression.parse(`TABLE(
+  EXTERN(
+    ${SqlLiteral.create(JSONBig.stringify(config.inputSource))},
+    ${SqlLiteral.create(JSONBig.stringify(config.inputFormat))},
+    ${SqlLiteral.create(JSONBig.stringify(config.signature))}
+  )
+)`);
+}
+
+export function externalConfigToInitDimensions(
+  config: ExternalConfig,
+  isArrays: boolean[],
+  timeExpression: SqlExpression | undefined,
+): SqlExpression[] {
+  return (timeExpression ? [timeExpression.as('__time')] : [])
+    .concat(
+      filterMap(config.signature, ({ name }, i) => {
+        if (timeExpression && timeExpression.containsColumn(name)) return;
+        return SqlRef.column(name).applyIf(
+          isArrays[i],
+          ex => SqlFunction.simple('MV_TO_ARRAY', [ex]).as(name) as any,
+        );
+      }),
+    )
+    .slice(0, MULTI_STAGE_QUERY_MAX_COLUMNS);
+}
+
+export function fitExternalConfigPattern(query: SqlQuery): ExternalConfig {
+  if (!(query.getSelectExpressionForIndex(0) instanceof SqlStar)) {
+    throw new Error(`External SELECT must only be a star`);
+  }
+
+  const tableFn = query.fromClause?.expressions?.first();
+  if (!(tableFn instanceof SqlFunction) || tableFn.functionName !== 'TABLE') {
+    throw new Error(`External FROM must be a TABLE function`);
+  }
+
+  const externFn = tableFn.getArg(0);
+  if (!(externFn instanceof SqlFunction) || externFn.functionName !== 'EXTERN') {
+    throw new Error(`Within the TABLE function there must be an extern function`);
+  }
+
+  let inputSource: any;
+  try {
+    const arg0 = externFn.getArg(0);
+    inputSource = JSONBig.parse(arg0 instanceof SqlLiteral ? String(arg0.value) : '#');
+  } catch {
+    throw new Error(`The first argument to the extern function must be a string embedding JSON`);
+  }
+
+  let inputFormat: any;
+  try {
+    const arg1 = externFn.getArg(1);
+    inputFormat = JSONBig.parse(arg1 instanceof SqlLiteral ? String(arg1.value) : '#');
+  } catch {
+    throw new Error(`The second argument to the extern function must be a string embedding JSON`);
+  }
+
+  let signature: any;
+  try {
+    const arg2 = externFn.getArg(2);
+    signature = JSONBig.parse(arg2 instanceof SqlLiteral ? String(arg2.value) : '#');
+  } catch {
+    throw new Error(`The third argument to the extern function must be a string embedding JSON`);
+  }
+
+  return {
+    inputSource,
+    inputFormat,
+    signature,
+  };
+}
diff --git a/web-console/src/druid-models/filter.tsx b/web-console/src/druid-models/filter/filter.tsx
similarity index 95%
rename from web-console/src/druid-models/filter.tsx
rename to web-console/src/druid-models/filter/filter.tsx
index 89cb2b65b12e..35b09a68c42a 100644
--- a/web-console/src/druid-models/filter.tsx
+++ b/web-console/src/druid-models/filter/filter.tsx
@@ -18,11 +18,10 @@
 
 import React from 'react';
 
-import { ExternalLink, Field } from '../components';
-import { getLink } from '../links';
-import { deepGet, EMPTY_ARRAY, oneOf, typeIs } from '../utils';
-
-import { IngestionSpec } from './ingestion-spec';
+import { ExternalLink, Field } from '../../components';
+import { getLink } from '../../links';
+import { deepGet, EMPTY_ARRAY, oneOf, typeIs } from '../../utils';
+import { IngestionSpec } from '../ingestion-spec/ingestion-spec';
 
 export interface DruidFilter {
   readonly type: string;
diff --git a/web-console/src/druid-models/flatten-spec.spec.ts b/web-console/src/druid-models/flatten-spec/flatten-spec.spec.ts
similarity index 91%
rename from web-console/src/druid-models/flatten-spec.spec.ts
rename to web-console/src/druid-models/flatten-spec/flatten-spec.spec.ts
index a4751901255c..a35c1853810e 100644
--- a/web-console/src/druid-models/flatten-spec.spec.ts
+++ b/web-console/src/druid-models/flatten-spec/flatten-spec.spec.ts
@@ -18,11 +18,11 @@
 
 import { computeFlattenExprsForData } from './flatten-spec';
 
-describe('spec-utils', () => {
+describe('flatten-spec', () => {
   describe('computeFlattenExprsForData', () => {
     const data = [
       {
-        context: { host: 'clarity', topic: 'moon', bonus: { foo: 'bar' } },
+        context: { host: 'cla', topic: 'moon', bonus: { foo: 'bar' } },
         tags: ['a', 'b', 'c'],
         messages: [
           { metric: 'request/time', value: 122 },
@@ -32,7 +32,7 @@ describe('spec-utils', () => {
         value: 5,
       },
       {
-        context: { host: 'pivot', popic: 'sun' },
+        context: { host: 'piv', popic: 'sun' },
         tags: ['a', 'd'],
         messages: [
           { metric: 'request/time', value: 44 },
@@ -41,7 +41,7 @@ describe('spec-utils', () => {
         value: 4,
       },
       {
-        context: { host: 'imply', dopik: 'fun' },
+        context: { host: 'imp', dopik: 'fun' },
         tags: ['x', 'y'],
         messages: [
           { metric: 'request/time', value: 4 },
diff --git a/web-console/src/druid-models/flatten-spec.tsx b/web-console/src/druid-models/flatten-spec/flatten-spec.tsx
similarity index 96%
rename from web-console/src/druid-models/flatten-spec.tsx
rename to web-console/src/druid-models/flatten-spec/flatten-spec.tsx
index 68b8184ced02..3845a83916dd 100644
--- a/web-console/src/druid-models/flatten-spec.tsx
+++ b/web-console/src/druid-models/flatten-spec/flatten-spec.tsx
@@ -18,9 +18,9 @@
 
 import React from 'react';
 
-import { ExternalLink, Field } from '../components';
-import { getLink } from '../links';
-import { typeIs } from '../utils';
+import { ExternalLink, Field } from '../../components';
+import { getLink } from '../../links';
+import { typeIs } from '../../utils';
 
 export interface FlattenSpec {
   useFieldDiscovery?: boolean;
diff --git a/web-console/src/druid-models/index.ts b/web-console/src/druid-models/index.ts
index d5e80d37643b..359ba70440b8 100644
--- a/web-console/src/druid-models/index.ts
+++ b/web-console/src/druid-models/index.ts
@@ -16,18 +16,26 @@
  * limitations under the License.
  */
 
-export * from './compaction-config';
-export * from './compaction-status';
-export * from './coordinator-dynamic-config';
-export * from './dimension-spec';
-export * from './filter';
-export * from './flatten-spec';
-export * from './ingestion-spec';
-export * from './input-format';
-export * from './input-source';
-export * from './lookup-spec';
-export * from './metric-spec';
-export * from './overlord-dynamic-config';
-export * from './time';
-export * from './timestamp-spec';
-export * from './transform-spec';
+export * from './compaction-config/compaction-config';
+export * from './compaction-status/compaction-status';
+export * from './coordinator-dynamic-config/coordinator-dynamic-config';
+export * from './dimension-spec/dimension-spec';
+export * from './druid-engine/druid-engine';
+export * from './execution/execution';
+export * from './external-config/external-config';
+export * from './filter/filter';
+export * from './flatten-spec/flatten-spec';
+export * from './ingest-query-pattern/ingest-query-pattern';
+export * from './ingestion-spec/ingestion-spec';
+export * from './input-format/input-format';
+export * from './input-source/input-source';
+export * from './lookup-spec/lookup-spec';
+export * from './metric-spec/metric-spec';
+export * from './overlord-dynamic-config/overlord-dynamic-config';
+export * from './query-context/query-context';
+export * from './stages/stages';
+export * from './time/time';
+export * from './timestamp-spec/timestamp-spec';
+export * from './transform-spec/transform-spec';
+export * from './workbench-query/workbench-query';
+export * from './workbench-query/workbench-query-part';
diff --git a/web-console/src/druid-models/ingest-query-pattern/ingest-query-pattern.spec.ts b/web-console/src/druid-models/ingest-query-pattern/ingest-query-pattern.spec.ts
new file mode 100644
index 000000000000..d8ec89f17259
--- /dev/null
+++ b/web-console/src/druid-models/ingest-query-pattern/ingest-query-pattern.spec.ts
@@ -0,0 +1,53 @@
+/*
+ * 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 { sane, SqlQuery } from 'druid-query-toolkit';
+
+import { fitIngestQueryPattern, ingestQueryPatternToQuery } from './ingest-query-pattern';
+
+describe('ingest-query-pattern', () => {
+  it('works', () => {
+    const query = SqlQuery.parse(sane`
+      INSERT INTO "kttm-2019"
+      WITH ext AS (SELECT *
+      FROM TABLE(
+        EXTERN(
+          '{"type":"http","uris":["https://example.com/data.json.gz"]}',
+          '{"type":"json"}',
+          '[{"name":"timestamp","type":"string"},{"name":"agent_category","type":"string"},{"name":"agent_type","type":"string"},{"name":"browser","type":"string"},{"name":"browser_version","type":"string"},{"name":"city","type":"string"},{"name":"continent","type":"string"},{"name":"country","type":"string"},{"name":"version","type":"string"},{"name":"event_type","type":"string"},{"name":"event_subtype","type":"string"},{"name":"loaded_image","type":"string"},{"name":"adblock_list","type":"string"},{"name":"forwarded_for","type":"string"},{"name":"language","type":"string"},{"name":"number","type":"long"},{"name":"os","type":"string"},{"name":"path","type":"string"},{"name":"platform","type":"string"},{"name":"referrer","type":"string"},{"name":"referrer_host","type":"string"},{"name":"region","type":"string"},{"name":"remote_address","type":"string"},{"name":"screen","type":"string"},{"name":"session","type":"string"},{"name":"session_length","type":"long"},{"name":"timezone","type":"string"},{"name":"timezone_offset","type":"long"},{"name":"window","type":"string"}]'
+        )
+      ))
+      SELECT
+        TIME_PARSE("timestamp") AS __time,
+        agent_category,
+        agent_type,
+        browser,
+        browser_version
+      FROM ext
+      PARTITIONED BY HOUR
+      CLUSTERED BY 4
+    `);
+
+    const insertQueryPattern = fitIngestQueryPattern(query);
+    expect(insertQueryPattern.partitionedBy).toEqual('hour');
+
+    const query2 = ingestQueryPatternToQuery(insertQueryPattern);
+
+    expect(query2.toString()).toEqual(query.toString());
+  });
+});
diff --git a/web-console/src/druid-models/ingest-query-pattern/ingest-query-pattern.ts b/web-console/src/druid-models/ingest-query-pattern/ingest-query-pattern.ts
new file mode 100644
index 000000000000..53a6f2b6b8e1
--- /dev/null
+++ b/web-console/src/druid-models/ingest-query-pattern/ingest-query-pattern.ts
@@ -0,0 +1,314 @@
+/*
+ * 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 {
+  SqlExpression,
+  SqlFunction,
+  SqlLiteral,
+  SqlPartitionedByClause,
+  SqlQuery,
+  SqlReplaceClause,
+  SqlTableRef,
+  SqlWithPart,
+} from 'druid-query-toolkit';
+
+import { filterMap, oneOf } from '../../utils';
+import {
+  ExternalConfig,
+  externalConfigToInitDimensions,
+  externalConfigToTableExpression,
+  fitExternalConfigPattern,
+} from '../external-config/external-config';
+import { guessDataSourceNameFromInputSource } from '../ingestion-spec/ingestion-spec';
+
+export type IngestMode = 'insert' | 'replace';
+
+function removeMvToArray(dimension: SqlExpression): SqlExpression {
+  return dimension.walk(ex =>
+    ex instanceof SqlFunction && ex.getEffectiveFunctionName() === 'MV_TO_ARRAY'
+      ? ex.getArg(0)
+      : ex,
+  ) as SqlExpression;
+}
+
+export interface IngestQueryPattern {
+  destinationTableName: string;
+  mode: IngestMode;
+  overwriteWhere?: SqlExpression;
+  mainExternalName: string;
+  mainExternalConfig: ExternalConfig;
+  filters: readonly SqlExpression[];
+  dimensions: readonly SqlExpression[];
+  metrics?: readonly SqlExpression[];
+  partitionedBy: string;
+  clusteredBy: readonly number[];
+}
+
+export function externalConfigToIngestQueryPattern(
+  config: ExternalConfig,
+  isArrays: boolean[],
+  timeExpression: SqlExpression | undefined,
+): IngestQueryPattern {
+  return {
+    destinationTableName: guessDataSourceNameFromInputSource(config.inputSource) || 'data',
+    mode: 'replace',
+    mainExternalName: 'ext',
+    mainExternalConfig: config,
+    filters: [],
+    dimensions: externalConfigToInitDimensions(config, isArrays, timeExpression),
+    partitionedBy: timeExpression ? 'day' : 'all',
+    clusteredBy: [],
+  };
+}
+
+export function getQueryPatternExpression(
+  pattern: IngestQueryPattern,
+  index: number,
+): SqlExpression | undefined {
+  const { dimensions, metrics } = pattern;
+  if (index < dimensions.length) {
+    return dimensions[index];
+  } else if (metrics) {
+    return metrics[index - dimensions.length];
+  }
+  return;
+}
+
+export function getQueryPatternExpressionType(
+  pattern: IngestQueryPattern,
+  index: number,
+): 'dimension' | 'metric' | undefined {
+  const { dimensions, metrics } = pattern;
+  if (index < dimensions.length) {
+    return 'dimension';
+  } else if (metrics) {
+    return 'metric';
+  }
+  return;
+}
+
+export function changeQueryPatternExpression(
+  pattern: IngestQueryPattern,
+  index: number,
+  type: 'dimension' | 'metric',
+  ex: SqlExpression | undefined,
+): IngestQueryPattern {
+  let { dimensions, metrics } = pattern;
+  if (index === -1) {
+    if (ex) {
+      if (type === 'dimension') {
+        dimensions = dimensions.concat(ex);
+      } else if (metrics) {
+        metrics = metrics.concat(ex);
+      }
+    }
+  } else if (index < dimensions.length) {
+    dimensions = filterMap(dimensions, (d, i) => (i === index ? ex : d));
+  } else if (metrics) {
+    const metricIndex = index - dimensions.length;
+    metrics = filterMap(metrics, (m, i) => (i === metricIndex ? ex : m));
+  }
+  return { ...pattern, dimensions, metrics };
+}
+
+function verifyHasOutputName(expression: SqlExpression): void {
+  if (expression.getOutputName()) return;
+  throw new Error(`${expression} must have an AS alias`);
+}
+
+export function fitIngestQueryPattern(query: SqlQuery): IngestQueryPattern {
+  if (query.explainClause) throw new Error(`Can not use EXPLAIN in the data loader flow`);
+  if (query.havingClause) throw new Error(`Can not use HAVING in the data loader flow`);
+  if (query.orderByClause) throw new Error(`Can not USE ORDER BY in the data loader flow`);
+  if (query.limitClause) throw new Error(`Can not use LIMIT in the data loader flow`);
+  if (query.offsetClause) throw new Error(`Can not use OFFSET in the data loader flow`);
+  if (query.unionQuery) throw new Error(`Can not use UNION in the data loader flow`);
+
+  if (query.hasStarInSelect()) {
+    throw new Error(
+      `Can not have * in SELECT in the data loader flow, the columns need to be explicitly listed out`,
+    );
+  }
+
+  let destinationTableName: string;
+  let mode: IngestMode;
+  let overwriteWhere: SqlExpression | undefined;
+  if (query.insertClause) {
+    mode = 'insert';
+    destinationTableName = query.insertClause.table.getTable();
+  } else if (query.replaceClause) {
+    mode = 'replace';
+    destinationTableName = query.replaceClause.table.getTable();
+    overwriteWhere = query.replaceClause.whereClause?.expression;
+  } else {
+    throw new Error(`Must have an INSERT or REPLACE clause`);
+  }
+
+  const withParts = query.getWithParts();
+  if (withParts.length !== 1) {
+    throw new Error(`Must have exactly one with part`);
+  }
+
+  const { table: withTable, columns: withColumns, query: withQuery } = withParts[0];
+  if (withColumns) {
+    throw new Error(`Can not have columns in the WITH expression`);
+  }
+  if (!(withQuery instanceof SqlQuery)) {
+    throw new Error(`The body of the WITH expression must be a query`);
+  }
+
+  const mainExternalName = withTable.name;
+  const mainExternalConfig = fitExternalConfigPattern(withQuery);
+
+  const filters = query.getWhereExpression()?.decomposeViaAnd() || [];
+
+  let dimensions: readonly SqlExpression[];
+  let metrics: readonly SqlExpression[] | undefined;
+  if (query.hasGroupBy()) {
+    dimensions = query.getGroupedSelectExpressions();
+    metrics = query.getAggregateSelectExpressions();
+    metrics.forEach(verifyHasOutputName);
+  } else {
+    dimensions = query.getSelectExpressionsArray();
+  }
+
+  dimensions.forEach(verifyHasOutputName);
+
+  const partitionedByClause = query.partitionedByClause;
+  if (!partitionedByClause) {
+    throw new Error(`Must have a PARTITIONED BY clause`);
+  }
+  let partitionedBy: string;
+  if (partitionedByClause.expression) {
+    if (partitionedByClause.expression instanceof SqlLiteral) {
+      partitionedBy = String(partitionedByClause.expression.value).toLowerCase();
+    } else {
+      partitionedBy = '';
+    }
+  } else {
+    partitionedBy = 'all';
+  }
+  if (!oneOf(partitionedBy, 'hour', 'day', 'month', 'year', 'all')) {
+    throw new Error(`Must partition by HOUR, DAY, MONTH, YEAR, or ALL TIME`);
+  }
+
+  const clusteredByExpressions = query.clusteredByClause
+    ? query.clusteredByClause.expressions.values
+    : [];
+  const clusteredBy = clusteredByExpressions.map(clusteredByExpression => {
+    const selectIndex = query.getSelectIndexForExpression(clusteredByExpression, true);
+    if (selectIndex === -1) {
+      throw new Error(
+        `Invalid CLUSTERED BY expression ${clusteredByExpression}, can only partition on a dimension`,
+      );
+    }
+    return selectIndex;
+  });
+
+  return {
+    destinationTableName,
+    mode,
+    overwriteWhere,
+    mainExternalName,
+    mainExternalConfig,
+    filters,
+    dimensions,
+    metrics,
+    partitionedBy,
+    clusteredBy,
+  };
+}
+
+export function ingestQueryPatternToQuery(
+  ingestQueryPattern: IngestQueryPattern,
+  preview?: boolean,
+  sampleDataQuery?: SqlQuery,
+): SqlQuery {
+  const {
+    destinationTableName,
+    mode,
+    overwriteWhere,
+    mainExternalName,
+    mainExternalConfig,
+    filters,
+    dimensions,
+    metrics,
+    partitionedBy,
+    clusteredBy,
+  } = ingestQueryPattern;
+  return SqlQuery.from(SqlTableRef.create(mainExternalName))
+    .applyIf(!preview, q =>
+      mode === 'insert'
+        ? q.changeInsertIntoTable(destinationTableName)
+        : q.changeReplaceClause(SqlReplaceClause.create(destinationTableName, overwriteWhere)),
+    )
+    .changeWithParts([
+      SqlWithPart.simple(
+        mainExternalName,
+        sampleDataQuery ||
+          SqlQuery.create(externalConfigToTableExpression(mainExternalConfig)).applyIf(preview, q =>
+            q.changeLimitValue(10000),
+          ),
+      ),
+    ])
+    .applyForEach(dimensions, (query, ex) =>
+      query.addSelect(preview ? removeMvToArray(ex) : ex, metrics ? { addToGroupBy: 'end' } : {}),
+    )
+    .applyForEach(metrics || [], (query, ex) => query.addSelect(ex))
+    .applyIf(filters.length, query => query.changeWhereExpression(SqlExpression.and(...filters)))
+    .applyIf(!preview, q =>
+      q
+        .changePartitionedByClause(
+          SqlPartitionedByClause.create(
+            partitionedBy !== 'all'
+              ? new SqlLiteral({
+                  value: partitionedBy.toUpperCase(),
+                  stringValue: partitionedBy.toUpperCase(),
+                })
+              : undefined,
+          ),
+        )
+        .changeClusteredByExpressions(clusteredBy.map(p => SqlLiteral.index(p))),
+    );
+}
+
+export type DestinationMode = 'new' | 'replace' | 'insert';
+
+export interface DestinationInfo {
+  mode: DestinationMode;
+  table: string;
+}
+
+export function getDestinationMode(
+  ingestQueryPattern: IngestQueryPattern,
+  existingTables: string[],
+): DestinationMode {
+  return existingTables.includes(ingestQueryPattern.destinationTableName)
+    ? ingestQueryPattern.mode
+    : 'new';
+}
+
+export function getDestinationInfo(
+  ingestQueryPattern: IngestQueryPattern,
+  existingTables: string[],
+): DestinationInfo {
+  return {
+    mode: getDestinationMode(ingestQueryPattern, existingTables),
+    table: ingestQueryPattern.destinationTableName,
+  };
+}
diff --git a/web-console/src/druid-models/ingestion-spec.spec.ts b/web-console/src/druid-models/ingestion-spec/ingestion-spec.spec.ts
similarity index 95%
rename from web-console/src/druid-models/ingestion-spec.spec.ts
rename to web-console/src/druid-models/ingestion-spec/ingestion-spec.spec.ts
index 768a061fd939..a846d29a8188 100644
--- a/web-console/src/druid-models/ingestion-spec.spec.ts
+++ b/web-console/src/druid-models/ingestion-spec/ingestion-spec.spec.ts
@@ -16,6 +16,8 @@
  * limitations under the License.
  */
 
+import { CSV_SAMPLE } from '../../utils/sampler.mock';
+
 import {
   adjustId,
   cleanSpec,
@@ -26,7 +28,6 @@ import {
   updateSchemaWithSample,
   upgradeSpec,
 } from './ingestion-spec';
-import { CSV_SAMPLE } from './test-fixtures';
 
 describe('ingestion-spec', () => {
   it('upgrades / downgrades task spec 1', () => {
@@ -170,6 +171,39 @@ describe('ingestion-spec', () => {
     });
   });
 
+  it('does not mangle a custom parser', () => {
+    expect(() =>
+      upgradeSpec({
+        type: 'index_parallel',
+        spec: {
+          ioConfig: {
+            type: 'index_parallel',
+            firehose: {
+              type: 'http',
+              uris: ['https://website.com/wikipedia.json.gz'],
+            },
+          },
+          tuningConfig: {
+            type: 'index_parallel',
+          },
+          dataSchema: {
+            dataSource: 'wikipedia',
+            granularitySpec: {
+              segmentGranularity: 'day',
+              queryGranularity: 'hour',
+              rollup: true,
+            },
+            parser: {
+              type: 'super_cool_custom_parser',
+            },
+          },
+        },
+      }),
+    ).toThrow(
+      "Can not rewrite parser of type 'super_cool_custom_parser', only 'string' is supported",
+    );
+  });
+
   it('upgrades / downgrades task spec (without parser)', () => {
     const oldTaskSpec = {
       type: 'index_parallel',
@@ -693,8 +727,12 @@ describe('spec utils', () => {
       expect(guessColumnTypeFromInput([1, [2], 3], false)).toEqual('string');
     });
 
+    it('works for strange json', () => {
+      expect(guessColumnTypeFromInput([1, { hello: 'world' }, 3], false)).toEqual('COMPLEX<json>');
+    });
+
     it('works for strange input (object with no prototype)', () => {
-      expect(guessColumnTypeFromInput([1, Object.create(null), 3], false)).toEqual('string');
+      expect(guessColumnTypeFromInput([1, Object.create(null), 3], false)).toEqual('COMPLEX<json>');
     });
   });
 
diff --git a/web-console/src/druid-models/ingestion-spec.tsx b/web-console/src/druid-models/ingestion-spec/ingestion-spec.tsx
similarity index 96%
rename from web-console/src/druid-models/ingestion-spec.tsx
rename to web-console/src/druid-models/ingestion-spec/ingestion-spec.tsx
index 29881dfe0a21..d7bf50916347 100644
--- a/web-console/src/druid-models/ingestion-spec.tsx
+++ b/web-console/src/druid-models/ingestion-spec/ingestion-spec.tsx
@@ -20,8 +20,8 @@ import { Code } from '@blueprintjs/core';
 import { range } from 'd3-array';
 import React from 'react';
 
-import { AutoForm, ExternalLink, Field } from '../components';
-import { getLink } from '../links';
+import { AutoForm, ExternalLink, Field } from '../../components';
+import { getLink } from '../../links';
 import {
   allowKeys,
   deepDelete,
@@ -35,25 +35,28 @@ import {
   oneOf,
   parseCsvLine,
   typeIs,
-} from '../utils';
-import { SampleHeaderAndRows } from '../utils/sampler';
-
+} from '../../utils';
+import { SampleHeaderAndRows } from '../../utils/sampler';
 import {
   DimensionsSpec,
   getDimensionSpecName,
   getDimensionSpecs,
   getDimensionSpecType,
-} from './dimension-spec';
-import { InputFormat, issueWithInputFormat } from './input-format';
-import { InputSource, issueWithInputSource } from './input-source';
+} from '../dimension-spec/dimension-spec';
+import { InputFormat, issueWithInputFormat } from '../input-format/input-format';
+import {
+  FILTER_SUGGESTIONS,
+  InputSource,
+  issueWithInputSource,
+} from '../input-source/input-source';
 import {
   getMetricSpecOutputType,
   getMetricSpecs,
   getMetricSpecSingleFieldName,
   MetricSpec,
-} from './metric-spec';
-import { TimestampSpec } from './timestamp-spec';
-import { TransformSpec } from './transform-spec';
+} from '../metric-spec/metric-spec';
+import { TimestampSpec } from '../timestamp-spec/timestamp-spec';
+import { TransformSpec } from '../transform-spec/transform-spec';
 
 export const MAX_INLINE_DATA_LENGTH = 65536;
 
@@ -349,7 +352,7 @@ export function cleanSpec(
   ) as IngestionSpec;
 }
 
-export function upgradeSpec(spec: any): Partial<IngestionSpec> {
+export function upgradeSpec(spec: any, yolo = false): Partial<IngestionSpec> {
   spec = nestSpecIfNeeded(spec);
 
   // Upgrade firehose if exists
@@ -370,6 +373,15 @@ export function upgradeSpec(spec: any): Partial<IngestionSpec> {
 
   // Decompose parser if exists
   if (deepGet(spec, 'spec.dataSchema.parser')) {
+    if (!yolo) {
+      const parserType = deepGet(spec, 'spec.dataSchema.parser.type');
+      if (parserType !== 'string') {
+        throw new Error(
+          `Can not rewrite parser of type '${parserType}', only 'string' is supported`,
+        );
+      }
+    }
+
     spec = deepMove(
       spec,
       'spec.dataSchema.parser.parseSpec.timestampSpec',
@@ -442,6 +454,24 @@ export function getIoConfigFormFields(ingestionComboType: IngestionComboType): F
     ),
   };
 
+  const inputSourceFilter: Field<IoConfig> = {
+    name: 'inputSource.filter',
+    label: 'File filter',
+    type: 'string',
+    suggestions: FILTER_SUGGESTIONS,
+    placeholder: '*',
+    info: (
+      <p>
+        A wildcard filter for files. See{' '}
+        <ExternalLink href="https://commons.apache.org/proper/commons-io/apidocs/org/apache/commons/io/filefilter/WildcardFileFilter.html">
+          here
+        </ExternalLink>{' '}
+        for format information. Files matching the filter criteria are considered for ingestion.
+        Files not matching the filter criteria are ignored.
+      </p>
+    ),
+  };
+
   switch (ingestionComboType) {
     case 'index_parallel:http':
       return [
@@ -499,16 +529,7 @@ export function getIoConfigFormFields(ingestionComboType: IngestionComboType): F
           label: 'File filter',
           type: 'string',
           required: true,
-          suggestions: [
-            '*',
-            '*.json',
-            '*.json.gz',
-            '*.csv',
-            '*.tsv',
-            '*.parquet',
-            '*.orc',
-            '*.avro',
-          ],
+          suggestions: FILTER_SUGGESTIONS,
           info: (
             <>
               <ExternalLink
@@ -521,7 +542,8 @@ export function getIoConfigFormFields(ingestionComboType: IngestionComboType): F
                 <ExternalLink href="https://commons.apache.org/proper/commons-io/apidocs/org/apache/commons/io/filefilter/WildcardFileFilter.html">
                   here
                 </ExternalLink>{' '}
-                for format information.
+                for format information. Files matching the filter criteria are considered for
+                ingestion. Files not matching the filter criteria are ignored.
               </p>
             </>
           ),
@@ -629,7 +651,7 @@ export function getIoConfigFormFields(ingestionComboType: IngestionComboType): F
             </>
           ),
         },
-
+        inputSourceFilter,
         {
           name: 'inputSource.properties.accessKeyId.type',
           label: 'Access key ID type',
@@ -687,7 +709,7 @@ export function getIoConfigFormFields(ingestionComboType: IngestionComboType): F
 
         {
           name: 'inputSource.properties.secretAccessKey.type',
-          label: 'Secret key type',
+          label: 'Secret access key type',
           type: 'string',
           suggestions: [undefined, 'environment', 'default'],
           placeholder: '(none)',
@@ -708,7 +730,7 @@ export function getIoConfigFormFields(ingestionComboType: IngestionComboType): F
         },
         {
           name: 'inputSource.properties.secretAccessKey.variable',
-          label: 'Secret key value',
+          label: 'Secret access key environment variable',
           type: 'string',
           placeholder: '(environment variable name)',
           defined: ioConfig =>
@@ -717,7 +739,7 @@ export function getIoConfigFormFields(ingestionComboType: IngestionComboType): F
         },
         {
           name: 'inputSource.properties.secretAccessKey.password',
-          label: 'Secret key value',
+          label: 'Secret access key value',
           type: 'string',
           placeholder: '(secret key)',
           defined: ioConfig =>
@@ -791,6 +813,7 @@ export function getIoConfigFormFields(ingestionComboType: IngestionComboType): F
             </>
           ),
         },
+        inputSourceFilter,
       ];
 
     case 'index_parallel:google':
@@ -849,6 +872,7 @@ export function getIoConfigFormFields(ingestionComboType: IngestionComboType): F
             </>
           ),
         },
+        inputSourceFilter,
       ];
 
     case 'index_parallel:hdfs':
@@ -1277,9 +1301,9 @@ function filterIsFilename(filter: string): boolean {
 }
 
 function filenameFromPath(path: string): string | undefined {
-  const m = /([^/.]+)[^/]*?\/?$/.exec(path);
-  if (!m) return;
-  return m[1];
+  const parts = path.split('/');
+  while (parts.length && !parts[parts.length - 1]) parts.pop();
+  return parts.length ? basenameFromFilename(parts[parts.length - 1]) : undefined;
 }
 
 function basenameFromFilename(filename: string): string | undefined {
@@ -1751,6 +1775,24 @@ const TUNING_FORM_FIELDS: Field<IngestionSpec>[] = [
     placeholder: 'Default: 1/6 of max JVM memory',
     info: <>Used in determining when intermediate persists to disk should occur.</>,
   },
+  {
+    name: 'spec.tuningConfig.maxColumnsToMerge',
+    type: 'number',
+    defaultValue: -1,
+    min: -1,
+    hideInMore: true,
+    info: (
+      <>
+        <p>
+          Limit of the number of segments to merge in a single phase when merging segments for
+          publishing. This limit affects the total number of columns present in a set of segments to
+          merge. If the limit is exceeded, segment merging occurs in multiple phases. Druid merges
+          at least 2 segments per phase, regardless of this setting.
+        </p>
+        <p>Default: -1 (unlimited)</p>
+      </>
+    ),
+  },
   {
     name: 'spec.tuningConfig.resetOffsetAutomatically',
     type: 'boolean',
@@ -2303,6 +2345,9 @@ export function guessColumnTypeFromInput(
   // If we see any arrays in the input this is a multi-value dimension that must be a string
   if (definedValues.some(v => Array.isArray(v))) return 'string';
 
+  // If we see any JSON objects in the input assume COMPLEX<json>
+  if (definedValues.some(v => v && typeof v === 'object')) return 'COMPLEX<json>';
+
   if (
     definedValues.every(v => {
       return (
diff --git a/web-console/src/druid-models/input-format.tsx b/web-console/src/druid-models/input-format/input-format.tsx
similarity index 93%
rename from web-console/src/druid-models/input-format.tsx
rename to web-console/src/druid-models/input-format/input-format.tsx
index 90fb8b800d1b..61ac6eda148a 100644
--- a/web-console/src/druid-models/input-format.tsx
+++ b/web-console/src/druid-models/input-format/input-format.tsx
@@ -19,11 +19,10 @@
 import { Code } from '@blueprintjs/core';
 import React from 'react';
 
-import { AutoForm, ExternalLink, Field } from '../components';
-import { getLink } from '../links';
-import { oneOf, typeIs } from '../utils';
-
-import { FlattenSpec } from './flatten-spec';
+import { AutoForm, ExternalLink, Field } from '../../components';
+import { getLink } from '../../links';
+import { oneOf, typeIs } from '../../utils';
+import { FlattenSpec } from '../flatten-spec/flatten-spec';
 
 export interface InputFormat {
   readonly type: string;
@@ -31,7 +30,7 @@ export interface InputFormat {
   readonly skipHeaderRows?: number;
   readonly columns?: string[];
   readonly delimiter?: string;
-  readonly listDelimiter?: string;
+  readonly listDelimiter?: string | null;
   readonly pattern?: string;
   readonly function?: string;
   readonly flattenSpec?: FlattenSpec | null;
@@ -44,7 +43,7 @@ export const INPUT_FORMAT_FIELDS: Field<InputFormat>[] = [
     name: 'type',
     label: 'Input format',
     type: 'string',
-    suggestions: ['json', 'csv', 'tsv', 'regex', 'parquet', 'orc', 'avro_ocf', 'avro_stream'],
+    suggestions: ['json', 'csv', 'tsv', 'parquet', 'orc', 'avro_ocf', 'avro_stream', 'regex'],
     required: true,
     info: (
       <>
diff --git a/web-console/src/druid-models/input-source.tsx b/web-console/src/druid-models/input-source.tsx
deleted file mode 100644
index eb989de4f07e..000000000000
--- a/web-console/src/druid-models/input-source.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-/*
- * 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 { nonEmptyArray } from '../utils';
-
-export interface InputSource {
-  type: string;
-  baseDir?: string;
-  filter?: any;
-  uris?: string[];
-  prefixes?: string[];
-  objects?: { bucket: string; path: string }[];
-  fetchTimeout?: number;
-
-  // druid
-  dataSource?: string;
-  interval?: string;
-  dimensions?: string[];
-  metrics?: string[];
-  maxInputSegmentBytesPerTask?: number;
-
-  // inline
-  data?: string;
-
-  // hdfs
-  paths?: string;
-
-  // http
-  httpAuthenticationUsername?: any;
-  httpAuthenticationPassword?: any;
-}
-
-export function issueWithInputSource(inputSource: InputSource | undefined): string | undefined {
-  if (!inputSource) return 'does not exist';
-  if (!inputSource.type) return 'missing a type';
-  switch (inputSource.type) {
-    case 'local':
-      if (!inputSource.baseDir) return `must have a 'baseDir'`;
-      if (!inputSource.filter) return `must have a 'filter'`;
-      break;
-
-    case 'http':
-      if (!nonEmptyArray(inputSource.uris)) {
-        return 'must have at least one uri';
-      }
-      break;
-
-    case 'druid':
-      if (!inputSource.dataSource) return `must have a 'dataSource'`;
-      if (!inputSource.interval) return `must have an 'interval'`;
-      break;
-
-    case 'inline':
-      if (!inputSource.data) return `must have 'data'`;
-      break;
-
-    case 's3':
-    case 'azure':
-    case 'google':
-      if (
-        !nonEmptyArray(inputSource.uris) &&
-        !nonEmptyArray(inputSource.prefixes) &&
-        !nonEmptyArray(inputSource.objects)
-      ) {
-        return 'must have at least one uri or prefix or object';
-      }
-      break;
-
-    case 'hdfs':
-      if (!inputSource.paths) {
-        return 'must have paths';
-      }
-      break;
-  }
-  return;
-}
diff --git a/web-console/src/druid-models/input-source/input-source.tsx b/web-console/src/druid-models/input-source/input-source.tsx
new file mode 100644
index 000000000000..7f5ba6379332
--- /dev/null
+++ b/web-console/src/druid-models/input-source/input-source.tsx
@@ -0,0 +1,590 @@
+/*
+ * 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 React from 'react';
+
+import { ExternalLink, Field } from '../../components';
+import { getLink } from '../../links';
+import { deepGet, deepSet, nonEmptyArray, typeIs } from '../../utils';
+
+export const FILTER_SUGGESTIONS: string[] = [
+  '*',
+  '*.json',
+  '*.json.gz',
+  '*.csv',
+  '*.tsv',
+  '*.parquet',
+  '*.orc',
+  '*.avro',
+];
+
+export interface InputSource {
+  type: string;
+  baseDir?: string;
+  filter?: any;
+  uris?: string[];
+  prefixes?: string[];
+  objects?: { bucket: string; path: string }[];
+  fetchTimeout?: number;
+
+  // druid
+  dataSource?: string;
+  interval?: string;
+  dimensions?: string[];
+  metrics?: string[];
+  maxInputSegmentBytesPerTask?: number;
+
+  // inline
+  data?: string;
+
+  // hdfs
+  paths?: string | string[];
+
+  // http
+  httpAuthenticationUsername?: any;
+  httpAuthenticationPassword?: any;
+}
+
+export type InputSourceDesc =
+  | {
+      type: 'inline';
+      data: string;
+    }
+  | {
+      type: 'local';
+      filter?: any;
+      baseDir?: string;
+      files?: string[];
+    }
+  | {
+      type: 'druid';
+      dataSource: string;
+      interval: string;
+      filter?: any;
+      dimensions?: string[]; // ToDo: these are not in the docs https://druid.apache.org/docs/latest/ingestion/native-batch-input-sources.html
+      metrics?: string[];
+      maxInputSegmentBytesPerTask?: number;
+    }
+  | {
+      type: 'http';
+      uris: string[];
+      httpAuthenticationUsername?: any;
+      httpAuthenticationPassword?: any;
+    }
+  | {
+      type: 's3';
+      uris?: string[];
+      prefixes?: string[];
+      objects?: { bucket: string; path: string }[];
+      properties?: {
+        accessKeyId?: any;
+        secretAccessKey?: any;
+        assumeRoleArn?: any;
+        assumeRoleExternalId?: any;
+      };
+    }
+  | {
+      type: 'google' | 'azure';
+      uris?: string[];
+      prefixes?: string[];
+      objects?: { bucket: string; path: string }[];
+    }
+  | {
+      type: 'hdfs';
+      paths?: string | string[];
+    }
+  | {
+      type: 'sql';
+      database: any;
+      foldCase?: boolean;
+      sqls: string[];
+    }
+  | {
+      type: 'combining';
+      delegates: InputSource[];
+    };
+
+export function issueWithInputSource(inputSource: InputSource | undefined): string | undefined {
+  if (!inputSource) return 'does not exist';
+  if (!inputSource.type) return 'missing a type';
+  switch (inputSource.type) {
+    case 'local':
+      if (!inputSource.baseDir) return `must have a 'baseDir'`;
+      if (!inputSource.filter) return `must have a 'filter'`;
+      return;
+
+    case 'http':
+      if (!nonEmptyArray(inputSource.uris)) {
+        return 'must have at least one uri';
+      }
+      return;
+
+    case 'druid':
+      if (!inputSource.dataSource) return `must have a 'dataSource'`;
+      if (!inputSource.interval) return `must have an 'interval'`;
+      return;
+
+    case 'inline':
+      if (!inputSource.data) return `must have 'data'`;
+      return;
+
+    case 's3':
+    case 'azure':
+    case 'google':
+      if (
+        !nonEmptyArray(inputSource.uris) &&
+        !nonEmptyArray(inputSource.prefixes) &&
+        !nonEmptyArray(inputSource.objects)
+      ) {
+        return 'must have at least one uri or prefix or object';
+      }
+      return;
+
+    case 'hdfs':
+      if (!inputSource.paths) {
+        return 'must have paths';
+      }
+      return;
+
+    default:
+      return;
+  }
+}
+
+export const INPUT_SOURCE_FIELDS: Field<InputSource>[] = [
+  // inline
+
+  {
+    name: 'data',
+    label: 'Inline data',
+    type: 'string',
+    defined: typeIs('inline'),
+    required: true,
+    placeholder: 'Paste your data here',
+    multiline: true,
+    info: <p>Put you inline data here</p>,
+  },
+
+  // http
+
+  {
+    name: 'uris',
+    label: 'URIs',
+    type: 'string-array',
+    placeholder: 'https://example.com/path/to/file1.ext, https://example.com/path/to/file2.ext',
+    defined: typeIs('http'),
+    required: true,
+    info: (
+      <p>
+        The full URI of your file. To ingest from multiple URIs, use commas to separate each
+        individual URI.
+      </p>
+    ),
+  },
+  {
+    name: 'httpAuthenticationUsername',
+    label: 'HTTP auth username',
+    type: 'string',
+    defined: typeIs('http'),
+    placeholder: '(optional)',
+    info: <p>Username to use for authentication with specified URIs</p>,
+  },
+  {
+    name: 'httpAuthenticationPassword',
+    label: 'HTTP auth password',
+    type: 'string',
+    defined: typeIs('http'),
+    placeholder: '(optional)',
+    info: <p>Password to use for authentication with specified URIs</p>,
+  },
+
+  // local
+
+  {
+    name: 'baseDir',
+    label: 'Base directory',
+    type: 'string',
+    placeholder: '/path/to/files/',
+    defined: typeIs('local'),
+    required: true,
+    info: (
+      <>
+        <ExternalLink href={`${getLink('DOCS')}/ingestion/native-batch.html#input-sources`}>
+          baseDir
+        </ExternalLink>
+        <p>Specifies the directory to search recursively for files to be ingested.</p>
+      </>
+    ),
+  },
+  {
+    name: 'filter',
+    label: 'File filter',
+    type: 'string',
+    defined: typeIs('local'),
+    required: true,
+    suggestions: FILTER_SUGGESTIONS,
+    info: (
+      <>
+        <ExternalLink href={`${getLink('DOCS')}/ingestion/native-batch.html#local-input-source`}>
+          filter
+        </ExternalLink>
+        <p>
+          A wildcard filter for files. See{' '}
+          <ExternalLink href="https://commons.apache.org/proper/commons-io/apidocs/org/apache/commons/io/filefilter/WildcardFileFilter.html">
+            here
+          </ExternalLink>{' '}
+          for format information.
+        </p>
+      </>
+    ),
+  },
+
+  // s3
+
+  {
+    name: 'uris',
+    label: 'S3 URIs',
+    type: 'string-array',
+    placeholder: 's3://your-bucket/some-file1.ext, s3://your-bucket/some-file2.ext',
+    defined: inputSource =>
+      inputSource.type === 's3' &&
+      !deepGet(inputSource, 'prefixes') &&
+      !deepGet(inputSource, 'objects'),
+    required: true,
+    info: (
+      <>
+        <p>
+          The full S3 URI of your file. To ingest from multiple URIs, use commas to separate each
+          individual URI.
+        </p>
+        <p>Either S3 URIs or prefixes or objects must be set.</p>
+      </>
+    ),
+  },
+  {
+    name: 'prefixes',
+    label: 'S3 prefixes',
+    type: 'string-array',
+    placeholder: 's3://your-bucket/some-path1, s3://your-bucket/some-path2',
+    defined: inputSource =>
+      inputSource.type === 's3' &&
+      !deepGet(inputSource, 'uris') &&
+      !deepGet(inputSource, 'objects'),
+    required: true,
+    info: (
+      <>
+        <p>A list of paths (with bucket) where your files are stored.</p>
+        <p>Either S3 URIs or prefixes or objects must be set.</p>
+      </>
+    ),
+  },
+  {
+    name: 'objects',
+    label: 'S3 objects',
+    type: 'json',
+    placeholder: '{"bucket":"your-bucket", "path":"some-file.ext"}',
+    defined: inputSource => inputSource.type === 's3' && deepGet(inputSource, 'objects'),
+    required: true,
+    info: (
+      <>
+        <p>
+          JSON array of{' '}
+          <ExternalLink href={`${getLink('DOCS')}/development/extensions-core/s3.html`}>
+            S3 Objects
+          </ExternalLink>
+          .
+        </p>
+        <p>Either S3 URIs or prefixes or objects must be set.</p>
+      </>
+    ),
+  },
+
+  // azure
+
+  {
+    name: 'uris',
+    label: 'Azure URIs',
+    type: 'string-array',
+    placeholder: 'azure://your-container/some-file1.ext, azure://your-container/some-file2.ext',
+    defined: inputSource =>
+      inputSource.type === 'azure' &&
+      !deepGet(inputSource, 'prefixes') &&
+      !deepGet(inputSource, 'objects'),
+    required: true,
+    info: (
+      <>
+        <p>
+          The full Azure URI of your file. To ingest from multiple URIs, use commas to separate each
+          individual URI.
+        </p>
+        <p>Either Azure URIs or prefixes or objects must be set.</p>
+      </>
+    ),
+  },
+  {
+    name: 'prefixes',
+    label: 'Azure prefixes',
+    type: 'string-array',
+    placeholder: 'azure://your-container/some-path1, azure://your-container/some-path2',
+    defined: inputSource =>
+      inputSource.type === 'azure' &&
+      !deepGet(inputSource, 'uris') &&
+      !deepGet(inputSource, 'objects'),
+    required: true,
+    info: (
+      <>
+        <p>A list of paths (with bucket) where your files are stored.</p>
+        <p>Either Azure URIs or prefixes or objects must be set.</p>
+      </>
+    ),
+  },
+  {
+    name: 'objects',
+    label: 'Azure objects',
+    type: 'json',
+    placeholder: '{"bucket":"your-container", "path":"some-file.ext"}',
+    defined: inputSource => inputSource.type === 'azure' && deepGet(inputSource, 'objects'),
+    required: true,
+    info: (
+      <>
+        <p>
+          JSON array of{' '}
+          <ExternalLink href={`${getLink('DOCS')}/development/extensions-core/azure.html`}>
+            S3 Objects
+          </ExternalLink>
+          .
+        </p>
+        <p>Either Azure URIs or prefixes or objects must be set.</p>
+      </>
+    ),
+  },
+
+  // google
+  {
+    name: 'uris',
+    label: 'Google Cloud Storage URIs',
+    type: 'string-array',
+    placeholder: 'gs://your-bucket/some-file1.ext, gs://your-bucket/some-file2.ext',
+    defined: inputSource =>
+      inputSource.type === 'google' &&
+      !deepGet(inputSource, 'prefixes') &&
+      !deepGet(inputSource, 'objects'),
+    required: true,
+    info: (
+      <>
+        <p>
+          The full Google Cloud Storage URI of your file. To ingest from multiple URIs, use commas
+          to separate each individual URI.
+        </p>
+        <p>Either Google Cloud Storage URIs or prefixes or objects must be set.</p>
+      </>
+    ),
+  },
+  {
+    name: 'prefixes',
+    label: 'Google Cloud Storage prefixes',
+    type: 'string-array',
+    placeholder: 'gs://your-bucket/some-path1, gs://your-bucket/some-path2',
+    defined: inputSource =>
+      inputSource.type === 'google' &&
+      !deepGet(inputSource, 'uris') &&
+      !deepGet(inputSource, 'objects'),
+    required: true,
+    info: (
+      <>
+        <p>A list of paths (with bucket) where your files are stored.</p>
+        <p>Either Google Cloud Storage URIs or prefixes or objects must be set.</p>
+      </>
+    ),
+  },
+  {
+    name: 'objects',
+    label: 'Google Cloud Storage objects',
+    type: 'json',
+    placeholder: '{"bucket":"your-bucket", "path":"some-file.ext"}',
+    defined: inputSource => inputSource.type === 'google' && deepGet(inputSource, 'objects'),
+    required: true,
+    info: (
+      <>
+        <p>
+          JSON array of{' '}
+          <ExternalLink href={`${getLink('DOCS')}/development/extensions-core/google.html`}>
+            Google Cloud Storage Objects
+          </ExternalLink>
+          .
+        </p>
+        <p>Either Google Cloud Storage URIs or prefixes or objects must be set.</p>
+      </>
+    ),
+  },
+
+  // Cloud common
+  {
+    name: 'filter',
+    label: 'File filter',
+    type: 'string',
+    suggestions: FILTER_SUGGESTIONS,
+    placeholder: '*',
+    defined: typeIs('s3', 'azure', 'google'),
+    info: (
+      <p>
+        A wildcard filter for files. See{' '}
+        <ExternalLink href="https://commons.apache.org/proper/commons-io/apidocs/org/apache/commons/io/filefilter/WildcardFileFilter.html">
+          here
+        </ExternalLink>{' '}
+        for format information. Files matching the filter criteria are considered for ingestion.
+        Files not matching the filter criteria are ignored.
+      </p>
+    ),
+  },
+
+  // S3 auth extra
+  {
+    name: 'properties.accessKeyId.type',
+    label: 'Access key ID type',
+    type: 'string',
+    suggestions: [undefined, 'environment', 'default'],
+    placeholder: '(none)',
+    defined: typeIs('s3'),
+    info: (
+      <>
+        <p>S3 access key type.</p>
+        <p>Setting this will override the default configuration provided in the config.</p>
+        <p>
+          The access key can be pulled from an environment variable or inlined in the ingestion spec
+          (default).
+        </p>
+        <p>
+          Note: Inlining the access key into the ingestion spec is dangerous as it might appear in
+          server log files and can be seen by anyone accessing this console.
+        </p>
+      </>
+    ),
+    adjustment: inputSource => {
+      return deepSet(
+        inputSource,
+        'properties.secretAccessKey.type',
+        deepGet(inputSource, 'properties.accessKeyId.type'),
+      );
+    },
+  },
+  {
+    name: 'properties.accessKeyId.variable',
+    label: 'Access key ID environment variable',
+    type: 'string',
+    placeholder: '(environment variable name)',
+    defined: inputSource =>
+      inputSource.type === 's3' &&
+      deepGet(inputSource, 'properties.accessKeyId.type') === 'environment',
+    info: <p>The environment variable containing the S3 access key for this S3 bucket.</p>,
+  },
+  {
+    name: 'properties.accessKeyId.password',
+    label: 'Access key ID value',
+    type: 'string',
+    placeholder: '(access key)',
+    defined: inputSource =>
+      inputSource.type === 's3' &&
+      deepGet(inputSource, 'properties.accessKeyId.type') === 'default',
+    info: (
+      <>
+        <p>S3 access key for this S3 bucket.</p>
+        <p>
+          Note: Inlining the access key into the ingestion spec is dangerous as it might appear in
+          server log files and can be seen by anyone accessing this console.
+        </p>
+      </>
+    ),
+  },
+  {
+    name: 'properties.secretAccessKey.type',
+    label: 'Secret access key type',
+    type: 'string',
+    suggestions: [undefined, 'environment', 'default'],
+    placeholder: '(none)',
+    defined: typeIs('s3'),
+    info: (
+      <>
+        <p>S3 secret key type.</p>
+        <p>Setting this will override the default configuration provided in the config.</p>
+        <p>
+          The secret key can be pulled from an environment variable or inlined in the ingestion spec
+          (default).
+        </p>
+        <p>
+          Note: Inlining the secret key into the ingestion spec is dangerous as it might appear in
+          server log files and can be seen by anyone accessing this console.
+        </p>
+      </>
+    ),
+  },
+  {
+    name: 'properties.secretAccessKey.variable',
+    label: 'Secret access key environment variable',
+    type: 'string',
+    placeholder: '(environment variable name)',
+    defined: inputSource =>
+      deepGet(inputSource, 'properties.secretAccessKey.type') === 'environment',
+    info: <p>The environment variable containing the S3 secret key for this S3 bucket.</p>,
+  },
+  {
+    name: 'properties.secretAccessKey.password',
+    label: 'Secret access key value',
+    type: 'string',
+    placeholder: '(secret key)',
+    defined: inputSource => deepGet(inputSource, 'properties.secretAccessKey.type') === 'default',
+    info: (
+      <>
+        <p>S3 secret key for this S3 bucket.</p>
+        <p>
+          Note: Inlining the access key into the ingestion spec is dangerous as it might appear in
+          server log files and can be seen by anyone accessing this console.
+        </p>
+      </>
+    ),
+  },
+
+  // hdfs
+  {
+    name: 'paths',
+    label: 'Paths',
+    type: 'string',
+    placeholder: '/path/to/file.ext',
+    defined: typeIs('hdfs'),
+    required: true,
+  },
+
+  // sql
+  {
+    name: 'database.type',
+    label: 'Database type',
+    type: 'string',
+    suggestions: ['mysql', 'postgresql'],
+    defined: typeIs('sql'),
+    required: true,
+    info: (
+      <>
+        <p>
+          The full Google Cloud Storage URI of your file. To ingest from multiple URIs, use commas
+          to separate each individual URI.
+        </p>
+        <p>Either Google Cloud Storage URIs or prefixes or objects must be set.</p>
+      </>
+    ),
+  },
+];
diff --git a/web-console/src/druid-models/lookup-spec.spec.ts b/web-console/src/druid-models/lookup-spec/lookup-spec.spec.ts
similarity index 100%
rename from web-console/src/druid-models/lookup-spec.spec.ts
rename to web-console/src/druid-models/lookup-spec/lookup-spec.spec.ts
diff --git a/web-console/src/druid-models/lookup-spec.tsx b/web-console/src/druid-models/lookup-spec/lookup-spec.tsx
similarity index 99%
rename from web-console/src/druid-models/lookup-spec.tsx
rename to web-console/src/druid-models/lookup-spec/lookup-spec.tsx
index 67f12b6d39f4..b1328a8f12a1 100644
--- a/web-console/src/druid-models/lookup-spec.tsx
+++ b/web-console/src/druid-models/lookup-spec/lookup-spec.tsx
@@ -19,8 +19,8 @@
 import { Code } from '@blueprintjs/core';
 import React from 'react';
 
-import { AutoForm, Field } from '../components';
-import { deepGet, deepSet, oneOf, pluralIfNeeded, typeIs } from '../utils';
+import { AutoForm, Field } from '../../components';
+import { deepGet, deepSet, oneOf, pluralIfNeeded, typeIs } from '../../utils';
 
 export interface ExtractionNamespaceSpec {
   readonly type: string;
diff --git a/web-console/src/druid-models/metric-spec.spec.ts b/web-console/src/druid-models/metric-spec/metric-spec.spec.ts
similarity index 97%
rename from web-console/src/druid-models/metric-spec.spec.ts
rename to web-console/src/druid-models/metric-spec/metric-spec.spec.ts
index 70e0d5051c9d..e30b806344b5 100644
--- a/web-console/src/druid-models/metric-spec.spec.ts
+++ b/web-console/src/druid-models/metric-spec/metric-spec.spec.ts
@@ -16,8 +16,9 @@
  * limitations under the License.
  */
 
+import { JSON_SAMPLE } from '../../utils/sampler.mock';
+
 import { getMetricSpecs } from './metric-spec';
-import { JSON_SAMPLE } from './test-fixtures';
 
 describe('metric-spec', () => {
   describe('getMetricSecs', () => {
diff --git a/web-console/src/druid-models/metric-spec.tsx b/web-console/src/druid-models/metric-spec/metric-spec.tsx
similarity index 97%
rename from web-console/src/druid-models/metric-spec.tsx
rename to web-console/src/druid-models/metric-spec/metric-spec.tsx
index 3aa9c7b19c79..6b3290272ee9 100644
--- a/web-console/src/druid-models/metric-spec.tsx
+++ b/web-console/src/druid-models/metric-spec/metric-spec.tsx
@@ -19,12 +19,11 @@
 import { Code } from '@blueprintjs/core';
 import React from 'react';
 
-import { ExternalLink, Field } from '../components';
-import { getLink } from '../links';
-import { filterMap, typeIs } from '../utils';
-import { SampleHeaderAndRows } from '../utils/sampler';
-
-import { guessColumnTypeFromHeaderAndRows } from './ingestion-spec';
+import { ExternalLink, Field } from '../../components';
+import { getLink } from '../../links';
+import { filterMap, typeIs } from '../../utils';
+import { SampleHeaderAndRows } from '../../utils/sampler';
+import { guessColumnTypeFromHeaderAndRows } from '../ingestion-spec/ingestion-spec';
 
 export interface MetricSpec {
   readonly type: string;
diff --git a/web-console/src/druid-models/mocks.ts b/web-console/src/druid-models/mocks.ts
new file mode 100644
index 000000000000..a07429577e5e
--- /dev/null
+++ b/web-console/src/druid-models/mocks.ts
@@ -0,0 +1,20 @@
+/*
+ * 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 './execution/execution-ingest-complete.mock';
+export * from './execution/execution-ingest-error.mock';
diff --git a/web-console/src/druid-models/overlord-dynamic-config.tsx b/web-console/src/druid-models/overlord-dynamic-config/overlord-dynamic-config.tsx
similarity index 96%
rename from web-console/src/druid-models/overlord-dynamic-config.tsx
rename to web-console/src/druid-models/overlord-dynamic-config/overlord-dynamic-config.tsx
index 14cac8295113..2b090acd9d72 100644
--- a/web-console/src/druid-models/overlord-dynamic-config.tsx
+++ b/web-console/src/druid-models/overlord-dynamic-config/overlord-dynamic-config.tsx
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Field } from '../components';
+import { Field } from '../../components';
 
 export interface OverlordDynamicConfig {
   selectStrategy?: Record<string, any>;
diff --git a/web-console/src/druid-models/query-context/query-context.tsx b/web-console/src/druid-models/query-context/query-context.tsx
new file mode 100644
index 000000000000..f9151862859c
--- /dev/null
+++ b/web-console/src/druid-models/query-context/query-context.tsx
@@ -0,0 +1,217 @@
+/*
+ * 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 { deepDelete, deepSet } from '../../utils';
+
+export interface QueryContext {
+  useCache?: boolean;
+  populateCache?: boolean;
+  useApproximateCountDistinct?: boolean;
+  useApproximateTopN?: boolean;
+  sqlTimeZone?: string;
+
+  // Multi-stage query
+  maxNumTasks?: number;
+  finalizeAggregations?: boolean;
+  durableShuffleStorage?: boolean;
+  maxParseExceptions?: number;
+  groupByEnableMultiValueUnnesting?: boolean;
+
+  [key: string]: any;
+}
+
+export interface QueryWithContext {
+  queryString: string;
+  queryContext?: QueryContext;
+  wrapQueryLimit?: number;
+}
+
+export function isEmptyContext(context: QueryContext | undefined): boolean {
+  return !context || Object.keys(context).length === 0;
+}
+
+// -----------------------------
+
+export function getUseCache(context: QueryContext): boolean {
+  const { useCache } = context;
+  return typeof useCache === 'boolean' ? useCache : true;
+}
+
+export function changeUseCache(context: QueryContext, useCache: boolean): QueryContext {
+  let newContext = context;
+  if (useCache) {
+    newContext = deepDelete(newContext, 'useCache');
+    newContext = deepDelete(newContext, 'populateCache');
+  } else {
+    newContext = deepSet(newContext, 'useCache', false);
+    newContext = deepSet(newContext, 'populateCache', false);
+  }
+  return newContext;
+}
+
+// -----------------------------
+
+export function getUseApproximateCountDistinct(context: QueryContext): boolean {
+  const { useApproximateCountDistinct } = context;
+  return typeof useApproximateCountDistinct === 'boolean' ? useApproximateCountDistinct : true;
+}
+
+export function changeUseApproximateCountDistinct(
+  context: QueryContext,
+  useApproximateCountDistinct: boolean,
+): QueryContext {
+  if (useApproximateCountDistinct) {
+    return deepDelete(context, 'useApproximateCountDistinct');
+  } else {
+    return deepSet(context, 'useApproximateCountDistinct', false);
+  }
+}
+
+// -----------------------------
+
+export function getUseApproximateTopN(context: QueryContext): boolean {
+  const { useApproximateTopN } = context;
+  return typeof useApproximateTopN === 'boolean' ? useApproximateTopN : true;
+}
+
+export function changeUseApproximateTopN(
+  context: QueryContext,
+  useApproximateTopN: boolean,
+): QueryContext {
+  if (useApproximateTopN) {
+    return deepDelete(context, 'useApproximateTopN');
+  } else {
+    return deepSet(context, 'useApproximateTopN', false);
+  }
+}
+
+// sqlTimeZone
+
+export function getTimezone(context: QueryContext): string | undefined {
+  return context.sqlTimeZone;
+}
+
+export function changeTimezone(context: QueryContext, timezone: string | undefined): QueryContext {
+  if (timezone) {
+    return deepSet(context, 'sqlTimeZone', timezone);
+  } else {
+    return deepDelete(context, 'sqlTimeZone');
+  }
+}
+
+// maxNumTasks
+
+export function getMaxNumTasks(context: QueryContext): number {
+  const { maxNumTasks } = context;
+  return Math.max(typeof maxNumTasks === 'number' ? maxNumTasks : 0, 2);
+}
+
+export function changeMaxNumTasks(
+  context: QueryContext,
+  maxNumTasks: number | undefined,
+): QueryContext {
+  return typeof maxNumTasks === 'number'
+    ? deepSet(context, 'maxNumTasks', maxNumTasks)
+    : deepDelete(context, 'maxNumTasks');
+}
+
+// taskAssignment
+
+export function getTaskAssigment(context: QueryContext): string {
+  const { taskAssignment } = context;
+  return taskAssignment ?? 'max';
+}
+
+export function changeTaskAssigment(
+  context: QueryContext,
+  taskAssignment: string | undefined,
+): QueryContext {
+  return typeof taskAssignment === 'string'
+    ? deepSet(context, 'taskAssignment', taskAssignment)
+    : deepDelete(context, 'taskAssignment');
+}
+
+// finalizeAggregations
+
+export function getFinalizeAggregations(context: QueryContext): boolean | undefined {
+  const { finalizeAggregations } = context;
+  return typeof finalizeAggregations === 'boolean' ? finalizeAggregations : undefined;
+}
+
+export function changeFinalizeAggregations(
+  context: QueryContext,
+  finalizeAggregations: boolean | undefined,
+): QueryContext {
+  return typeof finalizeAggregations === 'boolean'
+    ? deepSet(context, 'finalizeAggregations', finalizeAggregations)
+    : deepDelete(context, 'finalizeAggregations');
+}
+
+// finalizeAggregations
+
+export function getGroupByEnableMultiValueUnnesting(context: QueryContext): boolean | undefined {
+  const { groupByEnableMultiValueUnnesting } = context;
+  return typeof groupByEnableMultiValueUnnesting === 'boolean'
+    ? groupByEnableMultiValueUnnesting
+    : undefined;
+}
+
+export function changeGroupByEnableMultiValueUnnesting(
+  context: QueryContext,
+  groupByEnableMultiValueUnnesting: boolean | undefined,
+): QueryContext {
+  return typeof groupByEnableMultiValueUnnesting === 'boolean'
+    ? deepSet(context, 'groupByEnableMultiValueUnnesting', groupByEnableMultiValueUnnesting)
+    : deepDelete(context, 'groupByEnableMultiValueUnnesting');
+}
+
+// durableShuffleStorage
+
+export function getDurableShuffleStorage(context: QueryContext): boolean {
+  const { durableShuffleStorage } = context;
+  return Boolean(durableShuffleStorage);
+}
+
+export function changeDurableShuffleStorage(
+  context: QueryContext,
+  durableShuffleStorage: boolean,
+): QueryContext {
+  if (durableShuffleStorage) {
+    return deepSet(context, 'durableShuffleStorage', true);
+  } else {
+    return deepDelete(context, 'durableShuffleStorage');
+  }
+}
+
+// maxParseExceptions
+
+export function getMaxParseExceptions(context: QueryContext): number {
+  const { maxParseExceptions } = context;
+  return Number(maxParseExceptions) || 0;
+}
+
+export function changeMaxParseExceptions(
+  context: QueryContext,
+  maxParseExceptions: number,
+): QueryContext {
+  if (maxParseExceptions !== 0) {
+    return deepSet(context, 'maxParseExceptions', maxParseExceptions);
+  } else {
+    return deepDelete(context, 'maxParseExceptions');
+  }
+}
diff --git a/web-console/src/druid-models/stages/stages.spec.ts b/web-console/src/druid-models/stages/stages.spec.ts
new file mode 100644
index 000000000000..01faf5fd8cde
--- /dev/null
+++ b/web-console/src/druid-models/stages/stages.spec.ts
@@ -0,0 +1,881 @@
+/*
+ * 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 { Stages } from './stages';
+
+describe('Stages', () => {
+  describe('#overallProgress', () => {
+    it('works when finished', () => {
+      expect(
+        new Stages(
+          [
+            {
+              stageNumber: 0,
+              definition: {
+                id: 'ac4d6506-6e1d-4fd7-96e2-193f46219d4b_0',
+                input: [
+                  {
+                    type: 'external',
+                    inputSource: {
+                      type: 'http',
+                      uris: ['https://static.imply.io/example-data/lookup/countries.tsv'],
+                      httpAuthenticationUsername: null,
+                      httpAuthenticationPassword: null,
+                    },
+                    inputFormat: {
+                      type: 'tsv',
+                      columns: [],
+                      listDelimiter: null,
+                      delimiter: '\t',
+                      findColumnsFromHeader: true,
+                      skipHeaderRows: 0,
+                    },
+                    signature: [
+                      { name: 'Country', type: 'STRING' },
+                      { name: 'Capital', type: 'STRING' },
+                      { name: 'ISO3', type: 'STRING' },
+                      { name: 'ISO2', type: 'STRING' },
+                    ],
+                  },
+                ],
+                processor: {
+                  type: 'scan',
+                  query: {
+                    queryType: 'scan',
+                    dataSource: { type: 'inputNumber', inputNumber: 0 },
+                    intervals: {
+                      type: 'intervals',
+                      intervals: ['-146136543-09-08T08:23:32.096Z/146140482-04-24T15:36:27.903Z'],
+                    },
+                    resultFormat: 'compactedList',
+                    columns: ['Capital', 'Country', 'ISO3'],
+                    legacy: false,
+                    context: {
+                      groupByEnableMultiValueUnnesting: false,
+                      finalizeAggregations: false,
+                      maxNumTasks: 3,
+                      scanSignature:
+                        '[{"name":"Capital","type":"STRING"},{"name":"Country","type":"STRING"},{"name":"ISO3","type":"STRING"}]',
+                      multiStageQuery: true,
+                      sqlInsertSegmentGranularity: '"HOUR"',
+                      sqlQueryId: '57c2dca3-0199-4c61-bef0-344a68ff351b',
+                      sqlReplaceTimeChunks: 'all',
+                    },
+                    granularity: { type: 'all' },
+                  },
+                },
+                signature: [
+                  { name: '__bucket', type: 'LONG' },
+                  { name: '__boost', type: 'LONG' },
+                  { name: 'Capital', type: 'STRING' },
+                  { name: 'Country', type: 'STRING' },
+                  { name: 'ISO3', type: 'STRING' },
+                ],
+                shuffleSpec: {
+                  type: 'maxCount',
+                  clusterBy: {
+                    columns: [{ columnName: '__bucket' }, { columnName: '__boost' }],
+                    bucketByCount: 1,
+                  },
+                  partitions: 2,
+                  aggregate: false,
+                },
+                maxWorkerCount: 2,
+              },
+              phase: 'FINISHED',
+              workerCount: 2,
+              partitionCount: 2,
+              startTime: '2022-07-06T16:27:32.835Z',
+              duration: 313,
+              sort: true,
+            },
+            {
+              stageNumber: 1,
+              definition: {
+                id: 'ac4d6506-6e1d-4fd7-96e2-193f46219d4b_1',
+                input: [
+                  { type: 'table', dataSource: 'kttm_simple' },
+                  { type: 'stage', stage: 0 },
+                ],
+                broadcast: [1],
+                processor: {
+                  type: 'groupByPreShuffle',
+                  query: {
+                    queryType: 'groupBy',
+                    dataSource: {
+                      type: 'join',
+                      left: { type: 'inputNumber', inputNumber: 0 },
+                      right: { type: 'inputNumber', inputNumber: 1 },
+                      rightPrefix: 'j0.',
+                      condition: '("country" == "j0.Country")',
+                      joinType: 'LEFT',
+                    },
+                    intervals: {
+                      type: 'intervals',
+                      intervals: ['-146136543-09-08T08:23:32.096Z/146140482-04-24T15:36:27.903Z'],
+                    },
+                    virtualColumns: [
+                      {
+                        type: 'expression',
+                        name: 'v0',
+                        expression:
+                          "timestamp_floor(timestamp_parse(\"timestamp\",null,'UTC'),'PT1M',null,'UTC')",
+                        outputType: 'LONG',
+                      },
+                      {
+                        type: 'expression',
+                        name: 'v1',
+                        expression: 'mv_to_array("language")',
+                        outputType: 'ARRAY<STRING>',
+                      },
+                      { type: 'expression', name: 'v2', expression: "'iOS'", outputType: 'STRING' },
+                    ],
+                    filter: { type: 'selector', dimension: 'os', value: 'iOS' },
+                    granularity: { type: 'all' },
+                    dimensions: [
+                      { type: 'default', dimension: 'v0', outputName: 'd0', outputType: 'LONG' },
+                      {
+                        type: 'default',
+                        dimension: 'session',
+                        outputName: 'd1',
+                        outputType: 'STRING',
+                      },
+                      {
+                        type: 'default',
+                        dimension: 'agent_category',
+                        outputName: 'd2',
+                        outputType: 'STRING',
+                      },
+                      {
+                        type: 'default',
+                        dimension: 'agent_type',
+                        outputName: 'd3',
+                        outputType: 'STRING',
+                      },
+                      {
+                        type: 'default',
+                        dimension: 'browser',
+                        outputName: 'd4',
+                        outputType: 'STRING',
+                      },
+                      {
+                        type: 'default',
+                        dimension: 'browser_version',
+                        outputName: 'd5',
+                        outputType: 'STRING',
+                      },
+                      {
+                        type: 'extraction',
+                        dimension: 'browser_version',
+                        outputName: 'd6',
+                        outputType: 'LONG',
+                        extractionFn: {
+                          type: 'regex',
+                          expr: '^(\\d+)',
+                          index: 0,
+                          replaceMissingValue: true,
+                          replaceMissingValueWith: null,
+                        },
+                      },
+                      {
+                        type: 'default',
+                        dimension: 'v1',
+                        outputName: 'd7',
+                        outputType: 'ARRAY<STRING>',
+                      },
+                      { type: 'default', dimension: 'v2', outputName: 'd8', outputType: 'STRING' },
+                      {
+                        type: 'default',
+                        dimension: 'city',
+                        outputName: 'd9',
+                        outputType: 'STRING',
+                      },
+                      {
+                        type: 'default',
+                        dimension: 'country',
+                        outputName: 'd10',
+                        outputType: 'STRING',
+                      },
+                      {
+                        type: 'default',
+                        dimension: 'j0.Capital',
+                        outputName: 'd11',
+                        outputType: 'STRING',
+                      },
+                      {
+                        type: 'default',
+                        dimension: 'j0.ISO3',
+                        outputName: 'd12',
+                        outputType: 'STRING',
+                      },
+                      {
+                        type: 'default',
+                        dimension: 'forwarded_for',
+                        outputName: 'd13',
+                        outputType: 'STRING',
+                      },
+                    ],
+                    aggregations: [
+                      { type: 'count', name: 'a0' },
+                      { type: 'longSum', name: 'a1', fieldName: 'session_length' },
+                      {
+                        type: 'HLLSketchBuild',
+                        name: 'a2',
+                        fieldName: 'event_type',
+                        lgK: 12,
+                        tgtHllType: 'HLL_4',
+                        round: true,
+                      },
+                    ],
+                    limitSpec: {
+                      type: 'default',
+                      columns: [
+                        {
+                          dimension: 'd4',
+                          direction: 'ascending',
+                          dimensionOrder: { type: 'lexicographic' },
+                        },
+                        {
+                          dimension: 'd1',
+                          direction: 'ascending',
+                          dimensionOrder: { type: 'lexicographic' },
+                        },
+                      ],
+                    },
+                    context: {
+                      finalize: false,
+                      groupByEnableMultiValueUnnesting: false,
+                      finalizeAggregations: false,
+                      maxNumTasks: 3,
+                      scanSignature:
+                        '[{"name":"Capital","type":"STRING"},{"name":"Country","type":"STRING"},{"name":"ISO3","type":"STRING"}]',
+                      msqTimeColumn: 'd0',
+                      multiStageQuery: true,
+                      sqlInsertSegmentGranularity: '"HOUR"',
+                      sqlQueryId: '57c2dca3-0199-4c61-bef0-344a68ff351b',
+                      sqlReplaceTimeChunks: 'all',
+                    },
+                  },
+                },
+                signature: [
+                  { name: 'd0', type: 'LONG' },
+                  { name: 'd1', type: 'STRING' },
+                  { name: 'd2', type: 'STRING' },
+                  { name: 'd3', type: 'STRING' },
+                  { name: 'd4', type: 'STRING' },
+                  { name: 'd5', type: 'STRING' },
+                  { name: 'd6', type: 'LONG' },
+                  { name: 'd7', type: 'ARRAY<STRING>' },
+                  { name: 'd8', type: 'STRING' },
+                  { name: 'd9', type: 'STRING' },
+                  { name: 'd10', type: 'STRING' },
+                  { name: 'd11', type: 'STRING' },
+                  { name: 'd12', type: 'STRING' },
+                  { name: 'd13', type: 'STRING' },
+                  { name: 'a0', type: 'LONG' },
+                  { name: 'a1', type: 'LONG' },
+                  { name: 'a2', type: 'COMPLEX<HLLSketchBuild>' },
+                ],
+                shuffleSpec: {
+                  type: 'maxCount',
+                  clusterBy: {
+                    columns: [
+                      { columnName: 'd0' },
+                      { columnName: 'd1' },
+                      { columnName: 'd2' },
+                      { columnName: 'd3' },
+                      { columnName: 'd4' },
+                      { columnName: 'd5' },
+                      { columnName: 'd6' },
+                      { columnName: 'd7' },
+                      { columnName: 'd8' },
+                      { columnName: 'd9' },
+                      { columnName: 'd10' },
+                      { columnName: 'd11' },
+                      { columnName: 'd12' },
+                      { columnName: 'd13' },
+                    ],
+                  },
+                  partitions: 2,
+                  aggregate: true,
+                },
+                maxWorkerCount: 2,
+              },
+              phase: 'FINISHED',
+              workerCount: 2,
+              partitionCount: 2,
+              startTime: '2022-07-06T16:27:33.139Z',
+              duration: 1927,
+              sort: true,
+            },
+            {
+              stageNumber: 2,
+              definition: {
+                id: 'ac4d6506-6e1d-4fd7-96e2-193f46219d4b_2',
+                input: [{ type: 'stage', stage: 1 }],
+                processor: {
+                  type: 'groupByPostShuffle',
+                  query: {
+                    queryType: 'groupBy',
+                    dataSource: {
+                      type: 'join',
+                      left: { type: 'inputNumber', inputNumber: 0 },
+                      right: { type: 'inputNumber', inputNumber: 1 },
+                      rightPrefix: 'j0.',
+                      condition: '("country" == "j0.Country")',
+                      joinType: 'LEFT',
+                    },
+                    intervals: {
+                      type: 'intervals',
+                      intervals: ['-146136543-09-08T08:23:32.096Z/146140482-04-24T15:36:27.903Z'],
+                    },
+                    virtualColumns: [
+                      {
+                        type: 'expression',
+                        name: 'v0',
+                        expression:
+                          "timestamp_floor(timestamp_parse(\"timestamp\",null,'UTC'),'PT1M',null,'UTC')",
+                        outputType: 'LONG',
+                      },
+                      {
+                        type: 'expression',
+                        name: 'v1',
+                        expression: 'mv_to_array("language")',
+                        outputType: 'ARRAY<STRING>',
+                      },
+                      { type: 'expression', name: 'v2', expression: "'iOS'", outputType: 'STRING' },
+                    ],
+                    filter: { type: 'selector', dimension: 'os', value: 'iOS' },
+                    granularity: { type: 'all' },
+                    dimensions: [
+                      { type: 'default', dimension: 'v0', outputName: 'd0', outputType: 'LONG' },
+                      {
+                        type: 'default',
+                        dimension: 'session',
+                        outputName: 'd1',
+                        outputType: 'STRING',
+                      },
+                      {
+                        type: 'default',
+                        dimension: 'agent_category',
+                        outputName: 'd2',
+                        outputType: 'STRING',
+                      },
+                      {
+                        type: 'default',
+                        dimension: 'agent_type',
+                        outputName: 'd3',
+                        outputType: 'STRING',
+                      },
+                      {
+                        type: 'default',
+                        dimension: 'browser',
+                        outputName: 'd4',
+                        outputType: 'STRING',
+                      },
+                      {
+                        type: 'default',
+                        dimension: 'browser_version',
+                        outputName: 'd5',
+                        outputType: 'STRING',
+                      },
+                      {
+                        type: 'extraction',
+                        dimension: 'browser_version',
+                        outputName: 'd6',
+                        outputType: 'LONG',
+                        extractionFn: {
+                          type: 'regex',
+                          expr: '^(\\d+)',
+                          index: 0,
+                          replaceMissingValue: true,
+                          replaceMissingValueWith: null,
+                        },
+                      },
+                      {
+                        type: 'default',
+                        dimension: 'v1',
+                        outputName: 'd7',
+                        outputType: 'ARRAY<STRING>',
+                      },
+                      { type: 'default', dimension: 'v2', outputName: 'd8', outputType: 'STRING' },
+                      {
+                        type: 'default',
+                        dimension: 'city',
+                        outputName: 'd9',
+                        outputType: 'STRING',
+                      },
+                      {
+                        type: 'default',
+                        dimension: 'country',
+                        outputName: 'd10',
+                        outputType: 'STRING',
+                      },
+                      {
+                        type: 'default',
+                        dimension: 'j0.Capital',
+                        outputName: 'd11',
+                        outputType: 'STRING',
+                      },
+                      {
+                        type: 'default',
+                        dimension: 'j0.ISO3',
+                        outputName: 'd12',
+                        outputType: 'STRING',
+                      },
+                      {
+                        type: 'default',
+                        dimension: 'forwarded_for',
+                        outputName: 'd13',
+                        outputType: 'STRING',
+                      },
+                    ],
+                    aggregations: [
+                      { type: 'count', name: 'a0' },
+                      { type: 'longSum', name: 'a1', fieldName: 'session_length' },
+                      {
+                        type: 'HLLSketchBuild',
+                        name: 'a2',
+                        fieldName: 'event_type',
+                        lgK: 12,
+                        tgtHllType: 'HLL_4',
+                        round: true,
+                      },
+                    ],
+                    limitSpec: {
+                      type: 'default',
+                      columns: [
+                        {
+                          dimension: 'd4',
+                          direction: 'ascending',
+                          dimensionOrder: { type: 'lexicographic' },
+                        },
+                        {
+                          dimension: 'd1',
+                          direction: 'ascending',
+                          dimensionOrder: { type: 'lexicographic' },
+                        },
+                      ],
+                    },
+                    context: {
+                      finalize: false,
+                      groupByEnableMultiValueUnnesting: false,
+                      finalizeAggregations: false,
+                      maxNumTasks: 3,
+                      scanSignature:
+                        '[{"name":"Capital","type":"STRING"},{"name":"Country","type":"STRING"},{"name":"ISO3","type":"STRING"}]',
+                      msqTimeColumn: 'd0',
+                      multiStageQuery: true,
+                      sqlInsertSegmentGranularity: '"HOUR"',
+                      sqlQueryId: '57c2dca3-0199-4c61-bef0-344a68ff351b',
+                      sqlReplaceTimeChunks: 'all',
+                    },
+                  },
+                },
+                signature: [
+                  { name: '__bucket', type: 'LONG' },
+                  { name: 'd4', type: 'STRING' },
+                  { name: 'd1', type: 'STRING' },
+                  { name: 'd0', type: 'LONG' },
+                  { name: 'd2', type: 'STRING' },
+                  { name: 'd3', type: 'STRING' },
+                  { name: 'd5', type: 'STRING' },
+                  { name: 'd6', type: 'LONG' },
+                  { name: 'd7', type: 'ARRAY<STRING>' },
+                  { name: 'd8', type: 'STRING' },
+                  { name: 'd9', type: 'STRING' },
+                  { name: 'd10', type: 'STRING' },
+                  { name: 'd11', type: 'STRING' },
+                  { name: 'd12', type: 'STRING' },
+                  { name: 'd13', type: 'STRING' },
+                  { name: 'a0', type: 'LONG' },
+                  { name: 'a1', type: 'LONG' },
+                  { name: 'a2', type: 'COMPLEX<HLLSketchBuild>' },
+                ],
+                shuffleSpec: {
+                  type: 'targetSize',
+                  clusterBy: {
+                    columns: [
+                      { columnName: '__bucket' },
+                      { columnName: 'd4' },
+                      { columnName: 'd1' },
+                    ],
+                    bucketByCount: 1,
+                  },
+                  targetSize: 3000000,
+                  aggregate: false,
+                },
+                maxWorkerCount: 2,
+                shuffleCheckHasMultipleValues: true,
+              },
+              phase: 'FINISHED',
+              workerCount: 2,
+              partitionCount: 24,
+              startTime: '2022-07-06T16:27:35.052Z',
+              duration: 509,
+              sort: true,
+            },
+            {
+              stageNumber: 3,
+              definition: {
+                id: 'ac4d6506-6e1d-4fd7-96e2-193f46219d4b_3',
+                input: [{ type: 'stage', stage: 2 }],
+                processor: {
+                  type: 'segmentGenerator',
+                  dataSchema: {
+                    dataSource: 'kttm_reingest',
+                    timestampSpec: { column: '__time', format: 'millis', missingValue: null },
+                    dimensionsSpec: {
+                      dimensions: [
+                        {
+                          type: 'string',
+                          name: 'browser',
+                          multiValueHandling: 'SORTED_ARRAY',
+                          createBitmapIndex: true,
+                        },
+                        {
+                          type: 'string',
+                          name: 'session',
+                          multiValueHandling: 'SORTED_ARRAY',
+                          createBitmapIndex: true,
+                        },
+                        {
+                          type: 'string',
+                          name: 'agent_category',
+                          multiValueHandling: 'SORTED_ARRAY',
+                          createBitmapIndex: true,
+                        },
+                        {
+                          type: 'string',
+                          name: 'agent_type',
+                          multiValueHandling: 'SORTED_ARRAY',
+                          createBitmapIndex: true,
+                        },
+                        {
+                          type: 'string',
+                          name: 'browser_version',
+                          multiValueHandling: 'SORTED_ARRAY',
+                          createBitmapIndex: true,
+                        },
+                        {
+                          type: 'long',
+                          name: 'browser_major',
+                          multiValueHandling: 'SORTED_ARRAY',
+                          createBitmapIndex: false,
+                        },
+                        {
+                          type: 'string',
+                          name: 'language',
+                          multiValueHandling: 'ARRAY',
+                          createBitmapIndex: true,
+                        },
+                        {
+                          type: 'string',
+                          name: 'os',
+                          multiValueHandling: 'SORTED_ARRAY',
+                          createBitmapIndex: true,
+                        },
+                        {
+                          type: 'string',
+                          name: 'city',
+                          multiValueHandling: 'SORTED_ARRAY',
+                          createBitmapIndex: true,
+                        },
+                        {
+                          type: 'string',
+                          name: 'country',
+                          multiValueHandling: 'SORTED_ARRAY',
+                          createBitmapIndex: true,
+                        },
+                        {
+                          type: 'string',
+                          name: 'capital',
+                          multiValueHandling: 'SORTED_ARRAY',
+                          createBitmapIndex: true,
+                        },
+                        {
+                          type: 'string',
+                          name: 'iso3',
+                          multiValueHandling: 'SORTED_ARRAY',
+                          createBitmapIndex: true,
+                        },
+                        {
+                          type: 'string',
+                          name: 'ip_address',
+                          multiValueHandling: 'SORTED_ARRAY',
+                          createBitmapIndex: true,
+                        },
+                      ],
+                      dimensionExclusions: [
+                        '__time',
+                        'unique_event_types',
+                        'cnt',
+                        'session_length',
+                      ],
+                      includeAllDimensions: false,
+                    },
+                    metricsSpec: [
+                      { type: 'longSum', name: 'cnt', fieldName: 'cnt' },
+                      { type: 'longSum', name: 'session_length', fieldName: 'session_length' },
+                      {
+                        type: 'HLLSketchMerge',
+                        name: 'unique_event_types',
+                        fieldName: 'unique_event_types',
+                        lgK: 12,
+                        tgtHllType: 'HLL_4',
+                        round: true,
+                      },
+                    ],
+                    granularitySpec: {
+                      type: 'arbitrary',
+                      queryGranularity: { type: 'none' },
+                      rollup: true,
+                      intervals: ['-146136543-09-08T08:23:32.096Z/146140482-04-24T15:36:27.903Z'],
+                    },
+                    transformSpec: { filter: null, transforms: [] },
+                  },
+                  columnMappings: [
+                    { queryColumn: 'd0', outputColumn: '__time' },
+                    { queryColumn: 'd1', outputColumn: 'session' },
+                    { queryColumn: 'd2', outputColumn: 'agent_category' },
+                    { queryColumn: 'd3', outputColumn: 'agent_type' },
+                    { queryColumn: 'd4', outputColumn: 'browser' },
+                    { queryColumn: 'd5', outputColumn: 'browser_version' },
+                    { queryColumn: 'd6', outputColumn: 'browser_major' },
+                    { queryColumn: 'd7', outputColumn: 'language' },
+                    { queryColumn: 'd8', outputColumn: 'os' },
+                    { queryColumn: 'd9', outputColumn: 'city' },
+                    { queryColumn: 'd10', outputColumn: 'country' },
+                    { queryColumn: 'd11', outputColumn: 'capital' },
+                    { queryColumn: 'd12', outputColumn: 'iso3' },
+                    { queryColumn: 'd13', outputColumn: 'ip_address' },
+                    { queryColumn: 'a0', outputColumn: 'cnt' },
+                    { queryColumn: 'a1', outputColumn: 'session_length' },
+                    { queryColumn: 'a2', outputColumn: 'unique_event_types' },
+                  ],
+                  tuningConfig: {
+                    type: 'index_parallel',
+                    maxRowsPerSegment: 3000000,
+                    appendableIndexSpec: { type: 'onheap', preserveExistingMetrics: false },
+                    maxRowsInMemory: 100000,
+                    maxBytesInMemory: 0,
+                    skipBytesInMemoryOverheadCheck: false,
+                    maxTotalRows: null,
+                    numShards: null,
+                    splitHintSpec: null,
+                    partitionsSpec: {
+                      type: 'dynamic',
+                      maxRowsPerSegment: 3000000,
+                      maxTotalRows: null,
+                    },
+                    indexSpec: {
+                      bitmap: { type: 'roaring', compressRunOnSerialization: true },
+                      dimensionCompression: 'lz4',
+                      metricCompression: 'lz4',
+                      longEncoding: 'longs',
+                      segmentLoader: null,
+                    },
+                    indexSpecForIntermediatePersists: {
+                      bitmap: { type: 'roaring', compressRunOnSerialization: true },
+                      dimensionCompression: 'lz4',
+                      metricCompression: 'lz4',
+                      longEncoding: 'longs',
+                      segmentLoader: null,
+                    },
+                    maxPendingPersists: 0,
+                    forceGuaranteedRollup: false,
+                    reportParseExceptions: false,
+                    pushTimeout: 0,
+                    segmentWriteOutMediumFactory: null,
+                    maxNumConcurrentSubTasks: 2,
+                    maxRetry: 1,
+                    taskStatusCheckPeriodMs: 1000,
+                    chatHandlerTimeout: 'PT10S',
+                    chatHandlerNumRetries: 5,
+                    maxNumSegmentsToMerge: 100,
+                    totalNumMergeTasks: 10,
+                    logParseExceptions: false,
+                    maxParseExceptions: 2147483647,
+                    maxSavedParseExceptions: 0,
+                    maxColumnsToMerge: -1,
+                    awaitSegmentAvailabilityTimeoutMillis: 0,
+                    maxAllowedLockCount: -1,
+                    partitionDimensions: [],
+                  },
+                },
+                signature: [],
+                maxWorkerCount: 2,
+              },
+              phase: 'FINISHED',
+              workerCount: 2,
+              partitionCount: 24,
+              startTime: '2022-07-06T16:27:35.552Z',
+              duration: 2812,
+            },
+          ],
+          {
+            '0': {
+              '0': {
+                input0: { type: 'channel', rows: [197], files: [1], totalFiles: [1] },
+                output: { type: 'channel', rows: [197], bytes: [15468], frames: [1] },
+                shuffle: { type: 'channel', rows: [98, 99], bytes: [7260, 7454], frames: [1, 1] },
+                sortProgress: {
+                  type: 'sortProgress',
+                  totalMergingLevels: 3,
+                  levelToTotalBatches: { '0': 1, '1': 1, '2': 2 },
+                  levelToMergedBatches: { '0': 1, '1': 1, '2': 2 },
+                  totalMergersForUltimateLevel: 2,
+                  progressDigest: 1.0,
+                },
+              },
+              '1': {
+                sortProgress: {
+                  type: 'sortProgress',
+                  totalMergingLevels: -1,
+                  levelToTotalBatches: {},
+                  levelToMergedBatches: {},
+                  totalMergersForUltimateLevel: -1,
+                  triviallyComplete: true,
+                  progressDigest: 1.0,
+                },
+              },
+            },
+            '1': {
+              '0': {
+                input0: {
+                  type: 'channel',
+                  rows: [462096],
+                  bytes: [43452909],
+                  files: [1],
+                  totalFiles: [1],
+                },
+                input1: { type: 'channel', rows: [98, 99], bytes: [7260, 7454], frames: [1, 1] },
+                output: { type: 'channel', rows: [39667], bytes: [11081283], frames: [2] },
+                shuffle: {
+                  type: 'channel',
+                  rows: [19834, 19833],
+                  bytes: [5458795, 5464500],
+                  frames: [11, 11],
+                },
+                sortProgress: {
+                  type: 'sortProgress',
+                  totalMergingLevels: 3,
+                  levelToTotalBatches: { '0': 1, '1': 1, '2': 2 },
+                  levelToMergedBatches: { '0': 1, '1': 1, '2': 2 },
+                  totalMergersForUltimateLevel: 2,
+                  progressDigest: 1.0,
+                },
+              },
+              '1': {
+                sortProgress: {
+                  type: 'sortProgress',
+                  totalMergingLevels: -1,
+                  levelToTotalBatches: {},
+                  levelToMergedBatches: {},
+                  totalMergersForUltimateLevel: -1,
+                  triviallyComplete: true,
+                  progressDigest: 1.0,
+                },
+              },
+            },
+            '2': {
+              '0': {
+                input0: { type: 'channel', rows: [19834], bytes: [5458795], frames: [11] },
+                output: { type: 'channel', rows: [19834], bytes: [5795633], frames: [1] },
+                shuffle: {
+                  type: 'channel',
+                  rows: [
+                    888, 993, 1418, 894, 590, 633, 309, 241, 236, 309, 253, 260, 440, 876, 1394,
+                    892, 3595, 5613,
+                  ],
+                  bytes: [
+                    257524, 289161, 412116, 259346, 170554, 182872, 88525, 67821, 65844, 85875,
+                    71002, 72512, 123204, 249217, 399583, 256916, 1039927, 1625012,
+                  ],
+                  frames: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 4],
+                },
+                sortProgress: {
+                  type: 'sortProgress',
+                  totalMergingLevels: 3,
+                  levelToTotalBatches: { '0': 1, '1': 1, '2': 24 },
+                  levelToMergedBatches: { '0': 1, '1': 1, '2': 24 },
+                  totalMergersForUltimateLevel: 24,
+                  progressDigest: 1.0,
+                },
+              },
+              '1': {
+                input0: { type: 'channel', rows: [0, 19833], bytes: [0, 5464500], frames: [0, 11] },
+                output: { type: 'channel', rows: [0, 19833], bytes: [0, 5801321], frames: [0, 1] },
+                shuffle: {
+                  type: 'channel',
+                  rows: [
+                    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 909, 4525, 4324, 4149, 2561,
+                    1914, 1451,
+                  ],
+                  bytes: [
+                    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 262915, 1307287, 1247597,
+                    1195593, 738804, 552485, 417784,
+                  ],
+                  frames: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 3, 3, 3, 2, 2, 1],
+                },
+                sortProgress: {
+                  type: 'sortProgress',
+                  totalMergingLevels: 3,
+                  levelToTotalBatches: { '0': 1, '1': 1, '2': 24 },
+                  levelToMergedBatches: { '0': 1, '1': 1, '2': 24 },
+                  totalMergersForUltimateLevel: 24,
+                  progressDigest: 1.0,
+                },
+              },
+            },
+            '3': {
+              '0': {
+                input0: {
+                  type: 'channel',
+                  rows: [
+                    888, 0, 1418, 0, 590, 0, 309, 0, 236, 0, 253, 0, 440, 0, 1394, 0, 3595, 0, 4525,
+                    0, 4149, 0, 1914,
+                  ],
+                  bytes: [
+                    257524, 0, 412116, 0, 170554, 0, 88525, 0, 65844, 0, 71002, 0, 123204, 0,
+                    399583, 0, 1039927, 0, 1307287, 0, 1195593, 0, 552485,
+                  ],
+                  frames: [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 2, 0, 3, 0, 3, 0, 2],
+                },
+              },
+              '1': {
+                input0: {
+                  type: 'channel',
+                  rows: [
+                    0, 993, 0, 894, 0, 633, 0, 241, 0, 309, 0, 260, 0, 876, 0, 892, 0, 6522, 0,
+                    4324, 0, 2561, 0, 1451,
+                  ],
+                  bytes: [
+                    0, 289161, 0, 259346, 0, 182872, 0, 67821, 0, 85875, 0, 72512, 0, 249217, 0,
+                    256916, 0, 1887893, 0, 1247597, 0, 738804, 0, 417784,
+                  ],
+                  frames: [0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 4, 0, 3, 0, 2, 0, 1],
+                },
+              },
+            },
+          },
+        ).overallProgress(),
+      ).toBeCloseTo(0.987);
+    });
+  });
+});
diff --git a/web-console/src/druid-models/stages/stages.ts b/web-console/src/druid-models/stages/stages.ts
new file mode 100644
index 000000000000..ac67b029a85b
--- /dev/null
+++ b/web-console/src/druid-models/stages/stages.ts
@@ -0,0 +1,524 @@
+/*
+ * 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 { sum } from 'd3-array';
+import hasOwnProp from 'has-own-prop';
+
+import { deleteKeys, filterMap, oneOf, zeroDivide } from '../../utils';
+import { InputFormat } from '../input-format/input-format';
+import { InputSource } from '../input-source/input-source';
+
+const SORT_WEIGHT = 0.5;
+const READING_INPUT_WITH_SORT_WEIGHT = 1 - SORT_WEIGHT;
+
+export type StageInput =
+  | {
+      type: 'stage';
+      stage: number;
+    }
+  | {
+      type: 'table';
+      dataSource: string;
+    }
+  | {
+      type: 'external';
+      inputSource: InputSource;
+      inputFormat: InputFormat;
+      signature: any[];
+    };
+
+export interface StageDefinition {
+  stageNumber: number;
+  definition: {
+    id: string;
+    input: StageInput[];
+    broadcast?: number[];
+    processor: {
+      type: string;
+      [k: string]: any;
+    };
+    signature: any;
+    shuffleSpec?: {
+      type: string;
+      clusterBy?: ClusterBy;
+      targetSize?: number;
+      partitions?: number;
+      aggregate?: boolean;
+    };
+    maxWorkerCount: number;
+    shuffleCheckHasMultipleValues?: boolean;
+  };
+  phase?: 'NEW' | 'READING_INPUT' | 'POST_READING' | 'RESULTS_READY' | 'FINISHED' | 'FAILED';
+  workerCount?: number;
+  partitionCount?: number;
+  startTime?: string;
+  duration?: number;
+  sort?: boolean;
+}
+
+export interface ClusterBy {
+  columns: {
+    columnName: string;
+    descending?: boolean;
+  }[];
+  bucketByCount?: number;
+}
+
+export function formatClusterBy(
+  clusterBy: ClusterBy | undefined,
+  part: 'all' | 'partition' | 'cluster' = 'all',
+): string {
+  if (!clusterBy) return '';
+
+  let { columns, bucketByCount } = clusterBy;
+  if (bucketByCount) {
+    if (part === 'partition') {
+      columns = columns.slice(0, bucketByCount);
+    } else {
+      columns = columns.slice(bucketByCount);
+    }
+  }
+
+  return columns.map(part => part.columnName + (part.descending ? ' DESC' : '')).join(', ');
+}
+
+export interface StageWorkerCounter {
+  [k: `input${number}`]: ChannelCounter | undefined;
+  output?: ChannelCounter;
+  shuffle?: ChannelCounter;
+  sortProgress?: SortProgressCounter;
+  warnings?: WarningCounter;
+}
+
+export type ChannelCounterName = `input${number}` | 'output' | 'shuffle';
+
+export type CounterName = keyof StageWorkerCounter;
+
+function tallyWarningCount(warningCounter: WarningCounter): number {
+  return sum(Object.values(warningCounter), v => (typeof v === 'number' ? v : 0));
+}
+
+function sumByKey(objs: Record<string, number>[]): Record<string, number> {
+  const res: Record<string, number> = {};
+  for (const obj of objs) {
+    for (const k in obj) {
+      if (hasOwnProp(obj, k)) {
+        res[k] = (res[k] || 0) + obj[k];
+      }
+    }
+  }
+  return res;
+}
+
+export interface ChannelCounter {
+  type: 'channel';
+  rows?: number[];
+  bytes?: number[];
+  frames?: number[];
+  files?: number[];
+  totalFiles?: number[];
+}
+
+export type ChannelFields = 'rows' | 'bytes' | 'frames' | 'files' | 'totalFiles';
+
+export interface SortProgressCounter {
+  type: 'sortProgress';
+  totalMergingLevels: number;
+  levelToTotalBatches: Record<number, number>;
+  levelToMergedBatches: Record<number, number>;
+  totalMergersForUltimateLevel: number;
+  progressDigest?: number;
+  triviallyComplete?: boolean;
+}
+
+export interface WarningCounter {
+  type: 'warning';
+  CannotParseExternalData?: number;
+  // More types of warnings might be added later
+}
+
+export interface SimpleWideCounter {
+  index: number;
+  [k: `input${number}`]: Record<ChannelFields, number> | undefined;
+  output?: Record<ChannelFields, number>;
+  shuffle?: Record<ChannelFields, number>;
+}
+
+function zeroChannelFields(): Record<ChannelFields, number> {
+  return {
+    rows: 0,
+    bytes: 0,
+    frames: 0,
+    files: 0,
+    totalFiles: 0,
+  };
+}
+
+export class Stages {
+  static readonly QUERY_START_FACTOR = 0.05;
+  static readonly QUERY_END_FACTOR = 0.05;
+
+  static stageWeight(stage: StageDefinition): number {
+    return stage.definition.processor.type === 'limit' ? 0.1 : 1;
+  }
+
+  public readonly stages: StageDefinition[];
+  private readonly counters?: Record<string, Record<string, StageWorkerCounter>>;
+
+  constructor(
+    stages: StageDefinition[],
+    counters?: Record<string, Record<string, StageWorkerCounter>>,
+  ) {
+    this.stages = stages;
+    this.counters = counters;
+  }
+
+  stageCount(): number {
+    return this.stages.length;
+  }
+
+  getStage(stageNumber: number): StageDefinition {
+    return this.stages[stageNumber];
+  }
+
+  getLastStage(): StageDefinition | undefined {
+    return this.stages[this.stages.length - 1];
+  }
+
+  getAllCounters(): StageWorkerCounter[] {
+    const { counters } = this;
+    if (!counters) return [];
+    return Object.values(counters).flatMap(wc => Object.values(wc));
+  }
+
+  getStageCounterTitle(stage: StageDefinition, counterName: CounterName): string {
+    switch (counterName) {
+      case 'output':
+        return 'Processor output';
+
+      case 'shuffle':
+        return 'Shuffle output';
+
+      default:
+        if (counterName.startsWith('input')) {
+          const inputIndex = Number(counterName.replace('input', ''));
+          return `Input${inputIndex} (${stage.definition.input[inputIndex].type})`;
+        }
+        return '';
+    }
+  }
+
+  getCountersForStage(stage: StageDefinition): StageWorkerCounter[] {
+    const { counters } = this;
+    const c = counters?.[stage.stageNumber];
+    return c ? Object.values(c) : [];
+  }
+
+  stageHasOutput(stage: StageDefinition): boolean {
+    return stage.definition.processor.type !== 'segmentGenerator';
+  }
+
+  stageHasSort(stage: StageDefinition): boolean {
+    if (!this.stageHasOutput(stage)) return false;
+    return Boolean(stage.sort);
+  }
+
+  stageOutputCounterName(stage: StageDefinition): ChannelCounterName {
+    return this.stageHasSort(stage) ? 'shuffle' : 'output';
+  }
+
+  overallProgress(): number {
+    const { stages } = this;
+    let progress = 0;
+    let total = Stages.QUERY_END_FACTOR;
+    if (stages.length) {
+      progress +=
+        Stages.QUERY_START_FACTOR + sum(stages, s => this.stageProgress(s) * Stages.stageWeight(s));
+      total += Stages.QUERY_START_FACTOR + sum(stages, Stages.stageWeight);
+    }
+    return zeroDivide(progress, total);
+  }
+
+  stageProgress(stage: StageDefinition): number {
+    switch (stage.phase) {
+      case 'READING_INPUT':
+        return (
+          (this.stageHasSort(stage) ? READING_INPUT_WITH_SORT_WEIGHT : 1) *
+          this.readingInputPhaseProgress(stage)
+        );
+
+      case 'POST_READING':
+        return READING_INPUT_WITH_SORT_WEIGHT + SORT_WEIGHT * this.postReadingPhaseProgress(stage);
+
+      case 'RESULTS_READY':
+      case 'FINISHED':
+        return 1;
+
+      default:
+        return 0;
+    }
+  }
+
+  readingInputPhaseProgress(stage: StageDefinition): number {
+    const { stages } = this;
+    const { input, broadcast } = stage.definition;
+
+    const inputFileCount = this.getTotalInputForStage(stage, 'totalFiles');
+    if (inputFileCount) {
+      // If we know how many files there are base the progress on how many files were read
+      return (
+        sum(input, (input, i) =>
+          input.type === 'external' ? this.getTotalCounterForStage(stage, `input${i}`, 'files') : 0,
+        ) / inputFileCount
+      );
+    } else {
+      // Otherwise, base it on the stage input divided by the output of all non-broadcast input stages
+      return zeroDivide(
+        sum(input, (inputSource, i) =>
+          inputSource.type === 'stage' && !broadcast?.includes(i)
+            ? this.getTotalCounterForStage(stage, `input${i}`, 'rows')
+            : 0,
+        ),
+        sum(input, (inputSource, i) =>
+          inputSource.type === 'stage' && !broadcast?.includes(i)
+            ? this.getTotalOutputForStage(stages[inputSource.stage], 'rows')
+            : 0,
+        ),
+      );
+    }
+  }
+
+  postReadingPhaseProgress(stage: StageDefinition): number {
+    return this.getSortProgressForStage(stage);
+  }
+
+  currentStageIndex(): number {
+    return this.stages.findIndex(({ phase }) => oneOf(phase, 'READING_INPUT', 'POST_READING'));
+  }
+
+  hasCounterForStage(stage: StageDefinition, counterName: CounterName): boolean {
+    return this.getCountersForStage(stage).some(c => Boolean(c[counterName]));
+  }
+
+  hasSortProgressForStage(stage: StageDefinition): boolean {
+    const { counters } = this;
+    if (!counters) return false;
+    const { phase } = stage;
+    if (phase === 'READING_INPUT') return false;
+
+    return this.getCountersForStage(stage).some(c => {
+      const sortProgress = c.sortProgress;
+      return Boolean(sortProgress?.progressDigest && !sortProgress.triviallyComplete);
+    });
+  }
+
+  getWarningCount(): number {
+    const { counters } = this;
+    if (!counters) return 0;
+    return sum(this.getAllCounters(), c => {
+      const warningCounter = c.warnings;
+      if (!warningCounter) return 0;
+      return tallyWarningCount(warningCounter);
+    });
+  }
+
+  getWarningCountForStage(stage: StageDefinition): number {
+    const { counters } = this;
+    if (!counters) return 0;
+    return sum(this.getCountersForStage(stage), c => {
+      const warningCounter = c.warnings;
+      if (!warningCounter) return 0;
+      return tallyWarningCount(warningCounter);
+    });
+  }
+
+  getWarningBreakdownForStage(stage: StageDefinition): Record<string, number> {
+    const { counters } = this;
+    if (!counters) return {};
+    return sumByKey(
+      filterMap(this.getCountersForStage(stage), c => {
+        const warningCounter = c.warnings;
+        if (!warningCounter) return;
+        return deleteKeys(warningCounter, ['type']);
+      }),
+    );
+  }
+
+  getTotalCounterForStage(
+    stage: StageDefinition,
+    counterName: CounterName,
+    field: ChannelFields,
+  ): number {
+    const { counters } = this;
+    if (!counters) return 0;
+    return sum(this.getCountersForStage(stage), c => {
+      const counter = c[counterName];
+      if (counter?.type !== 'channel') return 0;
+      return sum(counter[field] || []);
+    });
+  }
+
+  getInputCountersForStage(stage: StageDefinition, field: ChannelFields): number[] {
+    return stage.definition.input.map((_, i) =>
+      this.getTotalCounterForStage(stage, `input${i}`, field),
+    );
+  }
+
+  getTotalInputForStage(stage: StageDefinition, field: ChannelFields): number {
+    return sum(this.getInputCountersForStage(stage, field));
+  }
+
+  getTotalOutputForStage(stage: StageDefinition, field: 'frames' | 'rows' | 'bytes'): number {
+    return this.getTotalCounterForStage(stage, this.stageOutputCounterName(stage), field);
+  }
+
+  getSortProgressForStage(stage: StageDefinition): number {
+    const { counters } = this;
+    if (!counters) return 0;
+    return zeroDivide(
+      sum(this.getCountersForStage(stage), c => {
+        const rowsToSort = c.output ? sum(c.output.rows || []) : 0;
+        const progressDigest = c.sortProgress?.progressDigest || 0;
+        return Math.floor(rowsToSort * progressDigest);
+      }),
+      this.getTotalCounterForStage(stage, 'output', 'rows'),
+    );
+  }
+
+  getChannelCounterNamesForStage(stage: StageDefinition): ChannelCounterName[] {
+    const { definition } = stage;
+
+    const channelCounters = definition.input.map((_, i) => `input${i}` as ChannelCounterName);
+    if (this.stageHasOutput(stage)) channelCounters.push('output');
+    if (this.stageHasSort(stage)) channelCounters.push('shuffle');
+    return channelCounters;
+  }
+
+  getByWorkerCountersForStage(stage: StageDefinition): SimpleWideCounter[] {
+    const { counters } = this;
+    const { stageNumber } = stage;
+
+    const channelCounters = this.getChannelCounterNamesForStage(stage);
+
+    const forStageCounters = counters?.[stageNumber] || {};
+    return Object.keys(forStageCounters).map(key => {
+      const stageCounters = forStageCounters[key];
+      const newWideCounter: SimpleWideCounter = {
+        index: Number(key),
+      };
+      for (const channel of channelCounters) {
+        const c = stageCounters[channel];
+        newWideCounter[channel] = c
+          ? {
+              rows: sum(c.rows || []),
+              bytes: sum(c.bytes || []),
+              frames: sum(c.frames || []),
+              files: sum(c.files || []),
+              totalFiles: sum(c.totalFiles || []),
+            }
+          : zeroChannelFields();
+      }
+      return newWideCounter;
+    });
+  }
+
+  getPartitionChannelCounterNamesForStage(
+    stage: StageDefinition,
+    type: 'input' | 'output',
+  ): ChannelCounterName[] {
+    if (type === 'input') {
+      const { input, broadcast } = stage.definition;
+      return filterMap(input, (input, i) =>
+        input.type === 'stage' && !broadcast?.includes(i)
+          ? (`input${i}` as ChannelCounterName)
+          : undefined,
+      );
+    } else {
+      return [this.stageOutputCounterName(stage)];
+    }
+  }
+
+  getByPartitionCountersForStage(
+    stage: StageDefinition,
+    type: 'input' | 'output',
+  ): SimpleWideCounter[] {
+    const counterNames = this.getPartitionChannelCounterNamesForStage(stage, type);
+    if (!counterNames.length) return [];
+
+    if (!this.hasCounterForStage(stage, counterNames[0])) return [];
+
+    const { partitionCount } = stage;
+    const simpleCounters: SimpleWideCounter[] = [];
+    if (type === 'output' && partitionCount) {
+      // If we are in output mode then we clearly know how many partitions to expect to initialize their counters with 0s
+      for (let i = 0; i < partitionCount; i++) {
+        simpleCounters.push({
+          index: i,
+          [counterNames[0]]: zeroChannelFields(),
+        } as SimpleWideCounter);
+      }
+    }
+
+    const stageCounters = this.getCountersForStage(stage);
+    for (const stageCounter of stageCounters) {
+      for (const counterName of counterNames) {
+        const channelCounter = stageCounter[counterName];
+        if (channelCounter?.type !== 'channel') continue;
+        const n = channelCounter.rows?.length || 0;
+        if (!n) continue;
+
+        for (let partitionNumber = 0; partitionNumber < n; partitionNumber++) {
+          let mySimpleCounter = simpleCounters[partitionNumber];
+          if (!mySimpleCounter) {
+            simpleCounters[partitionNumber] = mySimpleCounter = {
+              index: partitionNumber,
+            };
+          }
+
+          let c = mySimpleCounter[counterName];
+          if (!c) {
+            mySimpleCounter[counterName] = c = zeroChannelFields();
+          }
+
+          c.rows += channelCounter.rows?.[partitionNumber] || 0;
+          c.bytes += channelCounter.bytes?.[partitionNumber] || 0;
+          c.frames += channelCounter.frames?.[partitionNumber] || 0;
+          c.files += channelCounter.files?.[partitionNumber] || 0;
+          c.totalFiles += channelCounter.totalFiles?.[partitionNumber] || 0;
+        }
+      }
+    }
+
+    return simpleCounters;
+  }
+
+  getRateFromStage(stage: StageDefinition, field: ChannelFields): number | undefined {
+    if (!stage.duration) return;
+    if (field === 'bytes' && stage.definition.input.some(input => input.type !== 'stage')) {
+      // If we have inputs that do not report bytes, don't show a rate
+      return;
+    }
+    return Math.round(
+      Math.max(
+        this.getTotalInputForStage(stage, field),
+        this.getTotalCounterForStage(stage, 'output', field),
+      ) /
+        (stage.duration / 1000),
+    );
+  }
+}
diff --git a/web-console/src/druid-models/time.spec.ts b/web-console/src/druid-models/time/time.spec.ts
similarity index 100%
rename from web-console/src/druid-models/time.spec.ts
rename to web-console/src/druid-models/time/time.spec.ts
diff --git a/web-console/src/druid-models/time.ts b/web-console/src/druid-models/time/time.ts
similarity index 98%
rename from web-console/src/druid-models/time.ts
rename to web-console/src/druid-models/time/time.ts
index 2784f576ee90..829be85520f6 100644
--- a/web-console/src/druid-models/time.ts
+++ b/web-console/src/druid-models/time/time.ts
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { jodaFormatToRegExp } from '../utils/joda-to-regexp';
+import { jodaFormatToRegExp } from '../../utils/joda-to-regexp';
 
 export const NUMERIC_TIME_FORMATS: string[] = ['posix', 'millis', 'micro', 'nano'];
 export const BASIC_TIME_FORMATS: string[] = ['auto', 'iso'].concat(NUMERIC_TIME_FORMATS);
diff --git a/web-console/src/druid-models/timestamp-spec.tsx b/web-console/src/druid-models/timestamp-spec/timestamp-spec.tsx
similarity index 94%
rename from web-console/src/druid-models/timestamp-spec.tsx
rename to web-console/src/druid-models/timestamp-spec/timestamp-spec.tsx
index c30bb0f82c52..cc2a8eae4490 100644
--- a/web-console/src/druid-models/timestamp-spec.tsx
+++ b/web-console/src/druid-models/timestamp-spec/timestamp-spec.tsx
@@ -18,17 +18,16 @@
 
 import React from 'react';
 
-import { ExternalLink, Field } from '../components';
-import { deepGet, EMPTY_ARRAY, EMPTY_OBJECT } from '../utils';
-
-import { IngestionSpec } from './ingestion-spec';
+import { ExternalLink, Field } from '../../components';
+import { deepGet, EMPTY_ARRAY, EMPTY_OBJECT } from '../../utils';
+import { IngestionSpec } from '../ingestion-spec/ingestion-spec';
 import {
   BASIC_TIME_FORMATS,
   DATE_ONLY_TIME_FORMATS,
   DATETIME_TIME_FORMATS,
   OTHER_TIME_FORMATS,
-} from './time';
-import { Transform } from './transform-spec';
+} from '../time/time';
+import { Transform } from '../transform-spec/transform-spec';
 
 const NO_SUCH_COLUMN = '!!!_no_such_column_!!!';
 
diff --git a/web-console/src/druid-models/transform-spec.spec.ts b/web-console/src/druid-models/transform-spec/transform-spec.spec.ts
similarity index 100%
rename from web-console/src/druid-models/transform-spec.spec.ts
rename to web-console/src/druid-models/transform-spec/transform-spec.spec.ts
diff --git a/web-console/src/druid-models/transform-spec.tsx b/web-console/src/druid-models/transform-spec/transform-spec.tsx
similarity index 95%
rename from web-console/src/druid-models/transform-spec.tsx
rename to web-console/src/druid-models/transform-spec/transform-spec.tsx
index 9d53761a3fa0..9b6f8952e620 100644
--- a/web-console/src/druid-models/transform-spec.tsx
+++ b/web-console/src/druid-models/transform-spec/transform-spec.tsx
@@ -19,10 +19,9 @@
 import { Code } from '@blueprintjs/core';
 import React from 'react';
 
-import { ExternalLink, Field } from '../components';
-import { getLink } from '../links';
-
-import { TIME_COLUMN } from './timestamp-spec';
+import { ExternalLink, Field } from '../../components';
+import { getLink } from '../../links';
+import { TIME_COLUMN } from '../timestamp-spec/timestamp-spec';
 
 export interface TransformSpec {
   readonly transforms?: Transform[];
diff --git a/web-console/src/druid-models/workbench-query/workbench-query-part.ts b/web-console/src/druid-models/workbench-query/workbench-query-part.ts
new file mode 100644
index 000000000000..d78bd8bbe46c
--- /dev/null
+++ b/web-console/src/druid-models/workbench-query/workbench-query-part.ts
@@ -0,0 +1,256 @@
+/*
+ * 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 { SqlExpression, SqlQuery, SqlTableRef, SqlValues, SqlWithQuery } from 'druid-query-toolkit';
+import Hjson from 'hjson';
+import * as JSONBig from 'json-bigint-native';
+
+import { ColumnMetadata, compact, filterMap, generate8HexId, sqlTypeFromDruid } from '../../utils';
+import { LastExecution, validateLastExecution } from '../execution/execution';
+import { fitExternalConfigPattern } from '../external-config/external-config';
+
+// -----------------------------
+
+export interface WorkbenchQueryPartValue {
+  id: string;
+  queryName?: string;
+  queryString: string;
+  collapsed?: boolean;
+  lastExecution?: LastExecution;
+}
+
+export class WorkbenchQueryPart {
+  static blank() {
+    return new WorkbenchQueryPart({
+      id: generate8HexId(),
+      queryString: '',
+    });
+  }
+
+  static fromQuery(query: SqlQuery | SqlValues, queryName?: string, collapsed?: boolean) {
+    return this.fromQueryString(query.changeParens([]).toString(), queryName, collapsed);
+  }
+
+  static fromQueryString(queryString: string, queryName?: string, collapsed?: boolean) {
+    return new WorkbenchQueryPart({
+      id: generate8HexId(),
+      queryName,
+      queryString,
+      collapsed,
+    });
+  }
+
+  static isTaskEngineNeeded(queryString: string): boolean {
+    return /EXTERN\s*\(|(?:INSERT|REPLACE)\s+INTO/im.test(queryString);
+  }
+
+  static getIngestDatasourceFromQueryFragment(queryFragment: string): string | undefined {
+    // Assuming the queryFragment is no parsable find the prefix that look like:
+    // REPLACE<space>INTO<space><whatever><space>SELECT<space or EOF>
+    const matchInsertReplaceIndex = queryFragment.match(/(?:INSERT|REPLACE)\s+INTO/)?.index;
+    if (typeof matchInsertReplaceIndex !== 'number') return;
+
+    const matchEnd = queryFragment.match(/\b(?:SELECT|WITH)\b|$/);
+    const fragmentQuery = SqlQuery.maybeParse(
+      queryFragment.substring(matchInsertReplaceIndex, matchEnd?.index) + ' SELECT * FROM t',
+    );
+    if (!fragmentQuery) return;
+
+    return fragmentQuery.getIngestTable()?.getTable();
+  }
+
+  public readonly id: string;
+  public readonly queryName?: string;
+  public readonly queryString: string;
+  public readonly collapsed: boolean;
+  public readonly lastExecution?: LastExecution;
+
+  public readonly parsedQuery?: SqlQuery;
+
+  constructor(value: WorkbenchQueryPartValue) {
+    this.id = value.id;
+    this.queryName = value.queryName;
+    this.queryString = value.queryString;
+    this.collapsed = Boolean(value.collapsed);
+    this.lastExecution = validateLastExecution(value.lastExecution);
+
+    try {
+      this.parsedQuery = SqlQuery.parse(this.queryString);
+    } catch {}
+  }
+
+  public valueOf(): WorkbenchQueryPartValue {
+    return {
+      id: this.id,
+      queryName: this.queryName,
+      queryString: this.queryString,
+      collapsed: this.collapsed,
+      lastExecution: this.lastExecution,
+    };
+  }
+
+  public changeId(id: string): WorkbenchQueryPart {
+    return new WorkbenchQueryPart({ ...this.valueOf(), id });
+  }
+
+  public changeQueryName(queryName: string): WorkbenchQueryPart {
+    return new WorkbenchQueryPart({ ...this.valueOf(), queryName });
+  }
+
+  public changeQueryString(queryString: string): WorkbenchQueryPart {
+    return new WorkbenchQueryPart({ ...this.valueOf(), queryString });
+  }
+
+  public changeCollapsed(collapsed: boolean): WorkbenchQueryPart {
+    return new WorkbenchQueryPart({ ...this.valueOf(), collapsed });
+  }
+
+  public changeLastExecution(lastExecution: LastExecution | undefined): WorkbenchQueryPart {
+    return new WorkbenchQueryPart({ ...this.valueOf(), lastExecution });
+  }
+
+  public clear(): WorkbenchQueryPart {
+    return new WorkbenchQueryPart({
+      ...this.valueOf(),
+      queryString: '',
+    });
+  }
+
+  public isEmptyQuery(): boolean {
+    return this.queryString.trim() === '';
+  }
+
+  public isJsonLike(): boolean {
+    return this.queryString.trim().startsWith('{');
+  }
+
+  public validJson(): boolean {
+    try {
+      Hjson.parse(this.queryString);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  public isSqlInJson(): boolean {
+    try {
+      const query = Hjson.parse(this.queryString);
+      return typeof query.query === 'string';
+    } catch {
+      return false;
+    }
+  }
+
+  public getSqlString(): string {
+    if (this.isJsonLike()) {
+      const query = Hjson.parse(this.queryString);
+      return typeof query.query === 'string' ? query.query : '';
+    } else {
+      return this.queryString;
+    }
+  }
+
+  public prettyPrintJson(): WorkbenchQueryPart {
+    let parsed: unknown;
+    try {
+      parsed = Hjson.parse(this.queryString);
+    } catch {
+      return this;
+    }
+    return this.changeQueryString(JSONBig.stringify(parsed, undefined, 2));
+  }
+
+  public getIngestDatasource(): string | undefined {
+    const { queryString, parsedQuery } = this;
+    if (parsedQuery) {
+      return parsedQuery.getIngestTable()?.getTable();
+    }
+
+    if (this.isJsonLike()) return;
+
+    return WorkbenchQueryPart.getIngestDatasourceFromQueryFragment(queryString);
+  }
+
+  public getInlineMetadata(): ColumnMetadata[] {
+    const { queryName, parsedQuery } = this;
+    if (queryName && parsedQuery) {
+      try {
+        return fitExternalConfigPattern(parsedQuery).signature.map(({ name, type }) => ({
+          COLUMN_NAME: name,
+          DATA_TYPE: sqlTypeFromDruid(type),
+          TABLE_NAME: queryName,
+          TABLE_SCHEMA: 'druid',
+        }));
+      } catch {
+        return filterMap(parsedQuery.getSelectExpressionsArray(), ex => {
+          const outputName = ex.getOutputName();
+          if (!outputName) return;
+          return {
+            COLUMN_NAME: outputName,
+            DATA_TYPE: 'UNKNOWN',
+            TABLE_NAME: queryName,
+            TABLE_SCHEMA: 'druid',
+          };
+        });
+      }
+    }
+    return [];
+  }
+
+  public isTaskEngineNeeded(): boolean {
+    return WorkbenchQueryPart.isTaskEngineNeeded(this.queryString);
+  }
+
+  public extractCteHelpers(): WorkbenchQueryPart[] | undefined {
+    let flatQuery: SqlQuery;
+    try {
+      // We need to do our own parsing here because this.parseQuery necessarily must be a SqlQuery
+      // object, and we might have a SqlWithQuery here.
+      flatQuery = (SqlExpression.parse(this.queryString) as SqlWithQuery).flattenWith();
+    } catch {
+      return;
+    }
+
+    const possibleNewParts = flatQuery.getWithParts().map(({ table, columns, query }) => {
+      if (columns) return;
+      return WorkbenchQueryPart.fromQuery(query, table.name, true);
+    });
+    if (!possibleNewParts.length) return;
+
+    const newParts = compact(possibleNewParts);
+    if (newParts.length !== possibleNewParts.length) return;
+
+    return newParts.concat(this.changeQueryString(flatQuery.changeWithParts(undefined).toString()));
+  }
+
+  public toWithPart(): string {
+    const { queryName, queryString } = this;
+    return `${SqlTableRef.create(queryName || 'q')} AS (\n${queryString}\n)`;
+  }
+
+  public duplicate(): WorkbenchQueryPart {
+    return this.changeId(generate8HexId()).changeLastExecution(undefined);
+  }
+
+  public addPreviewLimit(): WorkbenchQueryPart {
+    const { parsedQuery } = this;
+    if (!parsedQuery || parsedQuery.hasLimit()) return this;
+    return this.changeQueryString(parsedQuery.changeLimitValue(10000).toString());
+  }
+}
diff --git a/web-console/src/druid-models/workbench-query/workbench-query.spec.ts b/web-console/src/druid-models/workbench-query/workbench-query.spec.ts
new file mode 100644
index 000000000000..008947994f58
--- /dev/null
+++ b/web-console/src/druid-models/workbench-query/workbench-query.spec.ts
@@ -0,0 +1,592 @@
+/*
+ * 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 { sane } from 'druid-query-toolkit';
+
+import { WorkbenchQuery } from './workbench-query';
+import { WorkbenchQueryPart } from './workbench-query-part';
+
+describe('WorkbenchQuery', () => {
+  beforeAll(() => {
+    WorkbenchQuery.setQueryEngines(['native', 'sql-native', 'sql-msq-task']);
+  });
+
+  describe('.commentOutInsertInto', () => {
+    it('works when INSERT INTO is first', () => {
+      const sql = sane`
+        INSERT INTO trips2
+        SELECT * FROM TABLE(EXTERN(''))
+      `;
+
+      expect(WorkbenchQuery.commentOutIngestParts(sql)).toEqual(sane`
+        --SERT INTO trips2
+        SELECT * FROM TABLE(EXTERN(''))
+      `);
+    });
+
+    it('works when REPLACE INTO is first', () => {
+      const sql = sane`
+        REPLACE INTO trips2 OVERWRITE ALL
+        SELECT * FROM TABLE(EXTERN(''))
+      `;
+
+      expect(WorkbenchQuery.commentOutIngestParts(sql)).toEqual(sane`
+        --PLACE INTO trips2 OVERWRITE ALL
+        SELECT * FROM TABLE(EXTERN(''))
+      `);
+    });
+
+    it('works when INSERT INTO is not first', () => {
+      const sql = sane`
+        -- Some comment
+        INSERT INTO trips2
+        SELECT * FROM TABLE(EXTERN(''))
+      `;
+
+      expect(WorkbenchQuery.commentOutIngestParts(sql)).toEqual(sane`
+        -- Some comment
+        --SERT INTO trips2
+        SELECT * FROM TABLE(EXTERN(''))
+      `);
+    });
+
+    it('works when INSERT INTO is indented', () => {
+      const sql = sane`
+        -- Some comment
+            INSERT INTO trips2
+        SELECT * FROM TABLE(EXTERN(''))
+      `;
+
+      expect(WorkbenchQuery.commentOutIngestParts(sql)).toEqual(sane`
+        -- Some comment
+            --SERT INTO trips2
+        SELECT * FROM TABLE(EXTERN(''))
+      `);
+    });
+  });
+
+  describe('.getIngestionLines', () => {
+    it('works', () => {
+      const queryString = sane`
+        REPLACE INTO "kttm_simple"
+          OVERWRITE ALL
+        SELECT *, VAR
+        FROM TABLE(
+          EXTERN(
+            '{"type":"http","uris":["https://static.imply.io/data/kttm/kttm-v2-2019-08-25.json.gz"]}',
+            '{"type":"json"}',
+            '[{"name":"timestamp","type":"string"},{"name":"agent_category","type":"string"},{"name":"agent_type","type":"string"},{"name":"browser","type":"string"},{"name":"browser_version","type":"string"},{"name":"city","type":"string"},{"name":"continent","type":"string"},{"name":"country","type":"string"},{"name":"version","type":"string"},{"name":"event_type","type":"string"},{"name":"event_subtype","type":"string"},{"name":"loaded_image","type":"string"},{"name":"adblock_list","type":"string"},{"name":"forwarded_for","type":"string"},{"name":"language","type":"string"},{"name":"number","type":"long"},{"name":"os","type":"string"},{"name":"path","type":"string"},{"name":"platform","type":"string"},{"name":"referrer","type":"string"},{"name":"referrer_host","type":"string"},{"name":"region","type":"string"},{"name":"remote_address","type":"string"},{"name":"screen","type":"string"},{"name":"session","type":"string"},{"name":"session_length","type":"long"},{"name":"timezone","type":"string"},{"name":"timezone_offset","type":"long"},{"name":"window","type":"string"}]'
+          )
+        )
+        PARTITIONED BY ALL TIME
+        CLUSTERED BY browser, session
+      `;
+
+      expect(WorkbenchQuery.getIngestionLines(queryString)).toEqual({
+        clusteredByLine: 'CLUSTERED BY browser, session',
+        insertReplaceLine: 'REPLACE INTO "kttm_simple"',
+        overwriteLine: '  OVERWRITE ALL',
+        partitionedByLine: 'PARTITIONED BY ALL TIME',
+      });
+    });
+  });
+
+  describe('.fromString', () => {
+    const tabString = sane`
+      ===== Helper: q =====
+
+      SELECT *
+
+      FROM wikipedia
+
+      ===== Query =====
+
+      SELECT * FROM q
+
+      ===== Context =====
+
+      {
+        "maxNumTasks": 3
+      }
+    `;
+
+    expect(String(WorkbenchQuery.fromString(tabString))).toEqual(tabString);
+  });
+
+  describe('#makePreview', () => {
+    it('works', () => {
+      const workbenchQuery = WorkbenchQuery.blank().changeQueryString(sane`
+        REPLACE INTO "kttm_simple" OVERWRITE ALL
+        SELECT
+          TIME_PARSE("timestamp") AS __time,
+          session
+        FROM TABLE(
+          EXTERN(
+            '{"type":"http","uris":["https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz"]}',
+            '{"type":"json"}',
+            '[{"name":"timestamp","type":"string"}]'
+          )
+        )
+        PARTITIONED BY HOUR
+        CLUSTERED BY browser, session
+      `);
+
+      expect(workbenchQuery.makePreview().getQueryString()).toEqual(sane`
+        SELECT
+          TIME_PARSE("timestamp") AS __time,
+          session
+        FROM TABLE(
+          EXTERN(
+            '{"type":"http","uris":["https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz"]}',
+            '{"type":"json"}',
+            '[{"name":"timestamp","type":"string"}]'
+          )
+        )
+        ORDER BY FLOOR(__time TO HOUR), browser, session
+      `);
+    });
+  });
+
+  describe('#getApiQuery', () => {
+    const makeQueryId = () => 'deadbeef-9fb0-499c-8475-ea461e96a4fd';
+
+    it('works with native', () => {
+      const native = sane`
+        {
+          "queryType": "topN",
+          "dataSource": "kttm1"
+          "dimension": "browser",
+          "threshold": 1001,
+          "intervals": "-146136543-09-08T08:23:32.096Z/146140482-04-24T15:36:27.903Z"
+          "granularity":"all"
+          "aggregations": [
+            {
+              "type": "count",
+              "name": "Count"
+            }
+          ],
+          "context": {
+            "x": 1
+          }
+        }
+      `;
+
+      const workbenchQuery = WorkbenchQuery.blank()
+        .changeQueryString(native)
+        .changeQueryContext({ useCache: false });
+
+      const apiQuery = workbenchQuery.getApiQuery(makeQueryId);
+      expect(apiQuery).toEqual({
+        cancelQueryId: 'deadbeef-9fb0-499c-8475-ea461e96a4fd',
+        engine: 'native',
+        query: {
+          aggregations: [
+            {
+              name: 'Count',
+              type: 'count',
+            },
+          ],
+          context: {
+            queryId: 'deadbeef-9fb0-499c-8475-ea461e96a4fd',
+            useCache: false,
+            x: 1,
+          },
+          dataSource: 'kttm1',
+          dimension: 'browser',
+          granularity: 'all',
+          intervals: '-146136543-09-08T08:23:32.096Z/146140482-04-24T15:36:27.903Z',
+          queryType: 'topN',
+          threshold: 1001,
+        },
+      });
+    });
+
+    it('works with native [explicit queryId]', () => {
+      const native = sane`
+        {
+          "queryType": "topN",
+          "dataSource": "kttm1"
+          "dimension": "browser",
+          "threshold": 1001,
+          "intervals": "-146136543-09-08T08:23:32.096Z/146140482-04-24T15:36:27.903Z"
+          "granularity":"all"
+          "aggregations": [
+            {
+              "type": "count",
+              "name": "Count"
+            }
+          ],
+          "context": {
+            "x": 1
+          }
+        }
+      `;
+
+      const workbenchQuery = WorkbenchQuery.blank()
+        .changeQueryString(native)
+        .changeQueryContext({ queryId: 'lol' });
+
+      const apiQuery = workbenchQuery.getApiQuery(makeQueryId);
+      expect(apiQuery).toEqual({
+        cancelQueryId: 'lol',
+        engine: 'native',
+        query: {
+          aggregations: [
+            {
+              name: 'Count',
+              type: 'count',
+            },
+          ],
+          context: {
+            queryId: 'lol',
+            x: 1,
+          },
+          dataSource: 'kttm1',
+          dimension: 'browser',
+          granularity: 'all',
+          intervals: '-146136543-09-08T08:23:32.096Z/146140482-04-24T15:36:27.903Z',
+          queryType: 'topN',
+          threshold: 1001,
+        },
+      });
+    });
+
+    it('works with sql (as SQL string)', () => {
+      const sql = `SELECT * FROM wikipedia`;
+
+      const workbenchQuery = WorkbenchQuery.blank()
+        .changeQueryString(sql)
+        .changeQueryContext({ useCache: false });
+
+      const apiQuery = workbenchQuery.getApiQuery(makeQueryId);
+      expect(apiQuery).toEqual({
+        cancelQueryId: 'deadbeef-9fb0-499c-8475-ea461e96a4fd',
+        engine: 'sql-native',
+        query: {
+          context: {
+            sqlOuterLimit: 1001,
+            sqlQueryId: 'deadbeef-9fb0-499c-8475-ea461e96a4fd',
+            useCache: false,
+          },
+          header: true,
+          query: 'SELECT * FROM wikipedia',
+          resultFormat: 'array',
+          sqlTypesHeader: true,
+          typesHeader: true,
+        },
+        sqlPrefixLines: 0,
+      });
+    });
+
+    it('works with sql (as SQL string) [explicit sqlQueryId]', () => {
+      const sql = `SELECT * FROM wikipedia`;
+
+      const workbenchQuery = WorkbenchQuery.blank()
+        .changeQueryString(sql)
+        .changeQueryContext({ sqlQueryId: 'lol' });
+
+      const apiQuery = workbenchQuery.getApiQuery(makeQueryId);
+      expect(apiQuery).toEqual({
+        cancelQueryId: 'lol',
+        engine: 'sql-native',
+        query: {
+          context: {
+            sqlOuterLimit: 1001,
+            sqlQueryId: 'lol',
+          },
+          header: true,
+          query: 'SELECT * FROM wikipedia',
+          resultFormat: 'array',
+          sqlTypesHeader: true,
+          typesHeader: true,
+        },
+        sqlPrefixLines: 0,
+      });
+    });
+
+    it('works with sql (as JSON)', () => {
+      const sqlInJson = sane`
+        {
+          context: {
+            sqlOuterLimit: 1001,
+            x: 1
+          },
+          header: true
+          query: 'SELECT * FROM wikipedia',
+          resultFormat: 'array',
+          sqlTypesHeader: true,
+          typesHeader: true,
+        }
+      `;
+
+      const workbenchQuery = WorkbenchQuery.blank()
+        .changeQueryString(sqlInJson)
+        .changeQueryContext({ useCache: false });
+
+      const apiQuery = workbenchQuery.getApiQuery(makeQueryId);
+      expect(apiQuery).toEqual({
+        cancelQueryId: 'deadbeef-9fb0-499c-8475-ea461e96a4fd',
+        engine: 'sql-native',
+        query: {
+          context: {
+            sqlOuterLimit: 1001,
+            sqlQueryId: 'deadbeef-9fb0-499c-8475-ea461e96a4fd',
+            useCache: false,
+            x: 1,
+          },
+          header: true,
+          query: 'SELECT * FROM wikipedia',
+          resultFormat: 'array',
+          sqlTypesHeader: true,
+          typesHeader: true,
+        },
+        sqlPrefixLines: 0,
+      });
+    });
+
+    it('works with sql (as JSON) [explicit sqlQueryId]', () => {
+      const sqlInJson = sane`
+        {
+          context: {
+            sqlOuterLimit: 1001,
+            x: 1
+          },
+          header: true
+          query: 'SELECT * FROM wikipedia',
+          resultFormat: 'array',
+          sqlTypesHeader: true,
+          typesHeader: true,
+        }
+      `;
+
+      const workbenchQuery = WorkbenchQuery.blank()
+        .changeQueryString(sqlInJson)
+        .changeQueryContext({ sqlQueryId: 'lol' });
+
+      const apiQuery = workbenchQuery.getApiQuery(makeQueryId);
+      expect(apiQuery).toEqual({
+        cancelQueryId: 'lol',
+        engine: 'sql-native',
+        query: {
+          context: {
+            sqlOuterLimit: 1001,
+            sqlQueryId: 'lol',
+            x: 1,
+          },
+          header: true,
+          query: 'SELECT * FROM wikipedia',
+          resultFormat: 'array',
+          sqlTypesHeader: true,
+          typesHeader: true,
+        },
+        sqlPrefixLines: 0,
+      });
+    });
+
+    it('works with sql-task (as SQL string)', () => {
+      const sql = `INSERT INTO wiki2 SELECT * FROM wikipedia`;
+
+      const workbenchQuery = WorkbenchQuery.blank()
+        .changeQueryString(sql)
+        .changeQueryContext({ useCache: false });
+
+      const apiQuery = workbenchQuery.getApiQuery(makeQueryId);
+      expect(apiQuery).toEqual({
+        engine: 'sql-msq-task',
+        query: {
+          context: {
+            finalizeAggregations: false,
+            groupByEnableMultiValueUnnesting: false,
+            useCache: false,
+          },
+          header: true,
+          query: 'INSERT INTO wiki2 SELECT * FROM wikipedia',
+          resultFormat: 'array',
+          sqlTypesHeader: true,
+          typesHeader: true,
+        },
+        sqlPrefixLines: 0,
+      });
+    });
+  });
+
+  describe('#getIngestDatasource', () => {
+    it('works with INSERT', () => {
+      const sql = sane`
+        -- Some comment
+        INSERT INTO trips2
+        SELECT
+          TIME_PARSE(pickup_datetime) AS __time,
+          *
+        FROM TABLE(
+            EXTERN(
+              '{"type": "local", ...}',
+              '{"type":"csv", ...}',
+              '[{ "name": "cab_type", "type": "string" }, ...]'
+            )
+          )
+        CLUSTERED BY trip_id
+      `;
+
+      const workbenchQuery = WorkbenchQuery.blank().changeQueryString(sql);
+      expect(workbenchQuery.getIngestDatasource()).toEqual('trips2');
+      expect(workbenchQuery.changeEngine('sql-native').getIngestDatasource()).toBeUndefined();
+    });
+
+    it('works with INSERT (unparsable)', () => {
+      const sql = sane`
+        -- Some comment
+        INSERT INTO trips2
+        SELECT
+          TIME_PARSE(pickup_datetime) AS __time,
+          *
+        FROM TABLE(
+      `;
+
+      const workbenchQuery = WorkbenchQuery.blank().changeQueryString(sql);
+      expect(workbenchQuery.getIngestDatasource()).toEqual('trips2');
+      expect(workbenchQuery.changeEngine('sql-native').getIngestDatasource()).toBeUndefined();
+    });
+
+    it('works with REPLACE', () => {
+      const sql = sane`
+        REPLACE INTO trips2 OVERWRITE ALL
+        SELECT
+          TIME_PARSE(pickup_datetime) AS __time,
+          *
+        FROM TABLE(
+            EXTERN(
+              '{"type": "local", ...}',
+              '{"type":"csv", ...}',
+              '[{ "name": "cab_type", "type": "string" }, ...]'
+            )
+          )
+        CLUSTERED BY trip_id
+      `;
+
+      const workbenchQuery = WorkbenchQuery.blank().changeQueryString(sql);
+      expect(workbenchQuery.getIngestDatasource()).toEqual('trips2');
+      expect(workbenchQuery.changeEngine('sql-native').getIngestDatasource()).toBeUndefined();
+    });
+
+    it('works with REPLACE (unparsable)', () => {
+      const sql = sane`
+        REPLACE INTO trips2 OVERWRITE ALL
+        WITH kttm_data AS (SELECT *
+      `;
+
+      const workbenchQuery = WorkbenchQuery.blank().changeQueryString(sql);
+      expect(workbenchQuery.getIngestDatasource()).toEqual('trips2');
+      expect(workbenchQuery.changeEngine('sql-native').getIngestDatasource()).toBeUndefined();
+    });
+  });
+
+  describe('#extractCteHelpers', () => {
+    it('works', () => {
+      const sql = sane`
+        REPLACE INTO task_statuses OVERWRITE ALL
+        WITH
+        task_statuses AS (
+        SELECT * FROM
+        TABLE(
+          EXTERN(
+            '{"type":"local","baseDir":"/Users/vadim/Desktop/","filter":"task_statuses.json"}',
+            '{"type":"json"}',
+            '[{"name":"id","type":"string"},{"name":"status","type":"string"},{"name":"duration","type":"long"},{"name":"errorMsg","type":"string"},{"name":"created_date","type":"string"}]'
+          )
+        )
+        )
+        (
+        --PLACE INTO task_statuses OVERWRITE ALL
+        SELECT
+          id,
+          status,
+          duration,
+          errorMsg,
+          created_date
+        FROM task_statuses
+        --RTITIONED BY ALL
+        )
+        PARTITIONED BY ALL
+      `;
+
+      expect(WorkbenchQuery.blank().changeQueryString(sql).extractCteHelpers().getQueryString())
+        .toEqual(sane`
+          REPLACE INTO task_statuses OVERWRITE ALL
+          SELECT
+            id,
+            status,
+            duration,
+            errorMsg,
+            created_date
+          FROM task_statuses
+          PARTITIONED BY ALL
+        `);
+    });
+  });
+
+  describe('#materializeHelpers', () => {
+    expect(
+      WorkbenchQuery.blank()
+        .changeQueryParts([
+          new WorkbenchQueryPart({
+            id: 'aaa',
+            queryName: 'kttm_data',
+            queryString: sane`
+            SELECT * FROM TABLE(
+              EXTERN(
+                '{"type":"http","uris":["https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz"]}',
+                '{"type":"json"}',
+                '[{"name":"timestamp","type":"string"},{"name":"agent_category","type":"string"},{"name":"agent_type","type":"string"},{"name":"browser","type":"string"},{"name":"browser_version","type":"string"},{"name":"city","type":"string"},{"name":"continent","type":"string"},{"name":"country","type":"string"},{"name":"version","type":"string"},{"name":"event_type","type":"string"},{"name":"event_subtype","type":"string"},{"name":"loaded_image","type":"string"},{"name":"adblock_list","type":"string"},{"name":"forwarded_for","type":"string"},{"name":"language","type":"string"},{"name":"number","type":"long"},{"name":"os","type":"string"},{"name":"path","type":"string"},{"name":"platform","type":"string"},{"name":"referrer","type":"string"},{"name":"referrer_host","type":"string"},{"name":"region","type":"string"},{"name":"remote_address","type":"string"},{"name":"screen","type":"string"},{"name":"session","type":"string"},{"name":"session_length","type":"long"},{"name":"timezone","type":"string"},{"name":"timezone_offset","type":"long"},{"name":"window","type":"string"}]'
+              )
+            )
+        `,
+          }),
+          new WorkbenchQueryPart({
+            id: 'bbb',
+            queryName: 'country_lookup',
+            queryString: sane`
+            SELECT * FROM TABLE(
+              EXTERN(
+                '{"type":"http","uris":["https://static.imply.io/example-data/lookup/countries.tsv"]}',
+                '{"type":"tsv","findColumnsFromHeader":true}',
+                '[{"name":"Country","type":"string"},{"name":"Capital","type":"string"},{"name":"ISO3","type":"string"},{"name":"ISO2","type":"string"}]'
+              )
+            )
+        `,
+          }),
+          new WorkbenchQueryPart({
+            id: 'ccc',
+            queryName: 'x',
+            queryString: sane`
+            SELECT
+              os,
+              CONCAT(country, ' (', country_lookup.ISO3, ')') AS "country",
+              COUNT(DISTINCT session) AS "unique_sessions"
+            FROM kttm_data
+            LEFT JOIN country_lookup ON country_lookup.Country = kttm_data.country
+            GROUP BY 1, 2
+            ORDER BY 3 DESC
+            LIMIT 10
+        `,
+          }),
+        ])
+        .materializeHelpers(),
+    );
+  });
+});
diff --git a/web-console/src/druid-models/workbench-query/workbench-query.ts b/web-console/src/druid-models/workbench-query/workbench-query.ts
new file mode 100644
index 000000000000..4200874aaf55
--- /dev/null
+++ b/web-console/src/druid-models/workbench-query/workbench-query.ts
@@ -0,0 +1,665 @@
+/*
+ * 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 {
+  SqlClusteredByClause,
+  SqlExpression,
+  SqlFunction,
+  SqlLiteral,
+  SqlOrderByClause,
+  SqlPartitionedByClause,
+  SqlQuery,
+  SqlRef,
+  SqlTableRef,
+} from 'druid-query-toolkit';
+import { SqlOrderByExpression } from 'druid-query-toolkit/build/sql/sql-clause/sql-order-by-expression/sql-order-by-expression';
+import Hjson from 'hjson';
+import * as JSONBig from 'json-bigint-native';
+import { v4 as uuidv4 } from 'uuid';
+
+import { ColumnMetadata, deleteKeys, generate8HexId } from '../../utils';
+import { DruidEngine, validDruidEngine } from '../druid-engine/druid-engine';
+import { LastExecution } from '../execution/execution';
+import { ExternalConfig } from '../external-config/external-config';
+import {
+  externalConfigToIngestQueryPattern,
+  ingestQueryPatternToQuery,
+} from '../ingest-query-pattern/ingest-query-pattern';
+import { QueryContext } from '../query-context/query-context';
+
+import { WorkbenchQueryPart } from './workbench-query-part';
+
+export interface TabEntry {
+  id: string;
+  tabName: string;
+  query: WorkbenchQuery;
+}
+
+interface IngestionLines {
+  insertReplaceLine?: string;
+  overwriteLine?: string;
+  partitionedByLine?: string;
+  clusteredByLine?: string;
+}
+
+// -----------------------------
+
+export interface WorkbenchQueryValue {
+  queryParts: WorkbenchQueryPart[];
+  queryContext: QueryContext;
+  engine?: DruidEngine;
+  unlimited?: boolean;
+}
+
+export class WorkbenchQuery {
+  static INLINE_DATASOURCE_MARKER = '__query_select';
+
+  private static enabledQueryEngines: DruidEngine[] = ['native', 'sql-native'];
+
+  static blank(): WorkbenchQuery {
+    return new WorkbenchQuery({
+      queryContext: {},
+      queryParts: [WorkbenchQueryPart.blank()],
+    });
+  }
+
+  static fromInitExternalConfig(
+    externalConfig: ExternalConfig,
+    isArrays: boolean[],
+    timeExpression: SqlExpression | undefined,
+  ): WorkbenchQuery {
+    return new WorkbenchQuery({
+      queryContext: {},
+      queryParts: [
+        WorkbenchQueryPart.fromQueryString(
+          ingestQueryPatternToQuery(
+            externalConfigToIngestQueryPattern(externalConfig, isArrays, timeExpression),
+          ).toString(),
+        ),
+      ],
+    });
+  }
+
+  static fromString(tabString: string): WorkbenchQuery {
+    const parts = tabString.split('\n\n');
+    const headers: string[] = [];
+    const bodies: string[] = [];
+    for (const part of parts) {
+      const m = part.match(/^===== (Helper:.+|Query|Context) =====$/);
+      if (m) {
+        headers.push(m[1]);
+      } else {
+        const i = headers.length - 1;
+        if (i < 0) throw new Error('content before header');
+        bodies[i] = bodies[i] ? bodies[i] + '\n\n' + part : part;
+      }
+    }
+
+    const queryParts: WorkbenchQueryPart[] = [];
+    let queryContext: QueryContext = {};
+    for (let i = 0; i < headers.length; i++) {
+      const header = headers[i];
+      const body = bodies[i];
+      if (header === 'Context') {
+        queryContext = JSONBig.parse(body);
+      } else if (header.startsWith('Helper:')) {
+        queryParts.push(
+          new WorkbenchQueryPart({
+            id: generate8HexId(),
+            queryName: header.replace(/^Helper:/, '').trim(),
+            queryString: body,
+            collapsed: true,
+          }),
+        );
+      } else {
+        queryParts.push(
+          new WorkbenchQueryPart({
+            id: generate8HexId(),
+            queryString: body,
+          }),
+        );
+      }
+    }
+
+    if (!queryParts.length) {
+      queryParts.push(WorkbenchQueryPart.blank());
+    }
+
+    return new WorkbenchQuery({
+      queryContext,
+      queryParts,
+    });
+  }
+
+  static setQueryEngines(queryEngines: DruidEngine[]): void {
+    WorkbenchQuery.enabledQueryEngines = queryEngines;
+  }
+
+  static getQueryEngines(): DruidEngine[] {
+    return WorkbenchQuery.enabledQueryEngines;
+  }
+
+  static fromEffectiveQueryAndContext(queryString: string, context: QueryContext): WorkbenchQuery {
+    const noSqlOuterLimit = typeof context['sqlOuterLimit'] === 'undefined';
+    const cleanContext = deleteKeys(context, ['sqlOuterLimit']);
+
+    let retQuery = WorkbenchQuery.blank()
+      .changeQueryString(queryString)
+      .changeQueryContext(cleanContext);
+
+    if (noSqlOuterLimit && !retQuery.getIngestDatasource()) {
+      retQuery = retQuery.changeUnlimited(true);
+    }
+
+    return retQuery;
+  }
+
+  static getIngestionLines(sqlString: string): IngestionLines {
+    const lines = sqlString.split('\n');
+    return {
+      insertReplaceLine: lines.find(line => /^\s*(?:INSERT|REPLACE)\s+INTO/i.test(line)),
+      overwriteLine: lines.find(line => /^\s*OVERWRITE/i.test(line)),
+      partitionedByLine: lines.find(line => /^\s*PARTITIONED\s+BY/i.test(line)),
+      clusteredByLine: lines.find(line => /^\s*CLUSTERED\s+BY/i.test(line)),
+    };
+  }
+
+  static commentOutIngestParts(sqlString: string): string {
+    return sqlString
+      .split('\n')
+      .map(line =>
+        line.replace(
+          /^(\s*)(INSERT\s+INTO|REPLACE\s+INTO|OVERWRITE|PARTITIONED\s+BY|CLUSTERED\s+BY)/i,
+          (_, spaces, thing) => `${spaces}--${thing.substr(2)}`,
+        ),
+      )
+      .join('\n');
+  }
+
+  static makeOrderByClause(
+    partitionedByClause: SqlPartitionedByClause | undefined,
+    clusteredByClause: SqlClusteredByClause | undefined,
+  ): SqlOrderByClause | undefined {
+    if (!partitionedByClause) return;
+
+    const orderByExpressions: SqlOrderByExpression[] = [];
+    let partitionedByExpression = partitionedByClause.expression;
+    if (partitionedByExpression) {
+      if (partitionedByExpression instanceof SqlLiteral) {
+        partitionedByExpression = SqlFunction.floor(
+          SqlRef.column('__time'),
+          partitionedByExpression,
+        );
+      }
+      orderByExpressions.push(SqlOrderByExpression.create(partitionedByExpression));
+    }
+
+    if (clusteredByClause) {
+      orderByExpressions.push(
+        ...clusteredByClause.expressions.values.map(ex => SqlOrderByExpression.create(ex)),
+      );
+    }
+
+    return orderByExpressions.length ? SqlOrderByClause.create(orderByExpressions) : undefined;
+  }
+
+  public readonly queryParts: WorkbenchQueryPart[];
+  public readonly queryContext: QueryContext;
+  public readonly engine?: DruidEngine;
+  public readonly unlimited?: boolean;
+
+  constructor(value: WorkbenchQueryValue) {
+    let queryParts = value.queryParts;
+    if (!Array.isArray(queryParts) || !queryParts.length) {
+      queryParts = [WorkbenchQueryPart.blank()];
+    }
+    if (!(queryParts instanceof WorkbenchQueryPart)) {
+      queryParts = queryParts.map(p => new WorkbenchQueryPart(p));
+    }
+    this.queryParts = queryParts;
+    this.queryContext = value.queryContext;
+
+    // Start back compat code for the engine names that might be coming from local storage
+    let possibleEngine: string | undefined = value.engine;
+    if (possibleEngine === 'sql') {
+      possibleEngine = 'sql-native';
+    } else if (possibleEngine === 'sql-task') {
+      possibleEngine = 'sql-msq-task';
+    }
+    // End bac compat code
+
+    this.engine = validDruidEngine(possibleEngine) ? possibleEngine : undefined;
+
+    if (value.unlimited) this.unlimited = true;
+  }
+
+  public valueOf(): WorkbenchQueryValue {
+    return {
+      queryParts: this.queryParts,
+      queryContext: this.queryContext,
+      engine: this.engine,
+      unlimited: this.unlimited,
+    };
+  }
+
+  public toString(): string {
+    const { queryParts, queryContext } = this;
+    return queryParts
+      .slice(0, queryParts.length - 1)
+      .flatMap(part => [`===== Helper: ${part.queryName} =====`, part.queryString])
+      .concat([
+        `===== Query =====`,
+        this.getLastPart().queryString,
+        `===== Context =====`,
+        JSONBig.stringify(queryContext, undefined, 2),
+      ])
+      .join('\n\n');
+  }
+
+  public changeQueryParts(queryParts: WorkbenchQueryPart[]): WorkbenchQuery {
+    return new WorkbenchQuery({ ...this.valueOf(), queryParts });
+  }
+
+  public changeQueryContext(queryContext: QueryContext): WorkbenchQuery {
+    return new WorkbenchQuery({ ...this.valueOf(), queryContext });
+  }
+
+  public changeEngine(engine: DruidEngine | undefined): WorkbenchQuery {
+    return new WorkbenchQuery({ ...this.valueOf(), engine });
+  }
+
+  public changeUnlimited(unlimited: boolean): WorkbenchQuery {
+    return new WorkbenchQuery({ ...this.valueOf(), unlimited });
+  }
+
+  public isTaskEngineNeeded(): boolean {
+    return this.queryParts.some(part => part.isTaskEngineNeeded());
+  }
+
+  public getEffectiveEngine(): DruidEngine {
+    const { engine } = this;
+    if (engine) return engine;
+    const enabledEngines = WorkbenchQuery.getQueryEngines();
+    if (this.getLastPart().isJsonLike()) {
+      if (this.getLastPart().isSqlInJson()) {
+        if (enabledEngines.includes('sql-native')) return 'sql-native';
+      } else {
+        if (enabledEngines.includes('native')) return 'native';
+      }
+    }
+    if (enabledEngines.includes('sql-msq-task') && this.isTaskEngineNeeded()) return 'sql-msq-task';
+    if (enabledEngines.includes('sql-native')) return 'sql-native';
+    return enabledEngines[0] || 'sql-native';
+  }
+
+  private getLastPart(): WorkbenchQueryPart {
+    const { queryParts } = this;
+    return queryParts[queryParts.length - 1];
+  }
+
+  public getId(): string {
+    return this.getLastPart().id;
+  }
+
+  public getIds(): string[] {
+    return this.queryParts.map(queryPart => queryPart.id);
+  }
+
+  public getQueryName(): string {
+    return this.getLastPart().queryName || '';
+  }
+
+  public getQueryString(): string {
+    return this.getLastPart().queryString;
+  }
+
+  public getCollapsed(): boolean {
+    return this.getLastPart().collapsed;
+  }
+
+  public getLastExecution(): LastExecution | undefined {
+    return this.getLastPart().lastExecution;
+  }
+
+  public getParsedQuery(): SqlQuery | undefined {
+    return this.getLastPart().parsedQuery;
+  }
+
+  public isEmptyQuery(): boolean {
+    return this.getLastPart().isEmptyQuery();
+  }
+
+  public isValid(): boolean {
+    const lastPart = this.getLastPart();
+    if (lastPart.isJsonLike() && !lastPart.validJson()) {
+      return false;
+    }
+
+    return true;
+  }
+
+  public canPrettify(): boolean {
+    const lastPart = this.getLastPart();
+    return lastPart.isJsonLike();
+  }
+
+  public prettify(): WorkbenchQuery {
+    const lastPart = this.getLastPart();
+    let parsed;
+    try {
+      parsed = Hjson.parse(lastPart.queryString);
+    } catch {
+      return this;
+    }
+    return this.changeQueryString(JSONBig.stringify(parsed, undefined, 2));
+  }
+
+  public getIngestDatasource(): string | undefined {
+    if (this.getEffectiveEngine() !== 'sql-msq-task') return;
+    return this.getLastPart().getIngestDatasource();
+  }
+
+  public isIngestQuery(): boolean {
+    return Boolean(this.getIngestDatasource());
+  }
+
+  private changeLastQueryPart(lastQueryPart: WorkbenchQueryPart): WorkbenchQuery {
+    const { queryParts } = this;
+    return this.changeQueryParts(queryParts.slice(0, queryParts.length - 1).concat(lastQueryPart));
+  }
+
+  public changeQueryName(queryName: string): WorkbenchQuery {
+    return this.changeLastQueryPart(this.getLastPart().changeQueryName(queryName));
+  }
+
+  public changeQueryString(queryString: string): WorkbenchQuery {
+    return this.changeLastQueryPart(this.getLastPart().changeQueryString(queryString));
+  }
+
+  public changeCollapsed(collapsed: boolean): WorkbenchQuery {
+    return this.changeLastQueryPart(this.getLastPart().changeCollapsed(collapsed));
+  }
+
+  public changeLastExecution(lastExecution: LastExecution | undefined): WorkbenchQuery {
+    return this.changeLastQueryPart(this.getLastPart().changeLastExecution(lastExecution));
+  }
+
+  public clear(): WorkbenchQuery {
+    return new WorkbenchQuery({
+      queryParts: [],
+      queryContext: {},
+    });
+  }
+
+  public toggleUnlimited(): WorkbenchQuery {
+    const { unlimited } = this;
+    return this.changeUnlimited(!unlimited);
+  }
+
+  public hasHelperQueries(): boolean {
+    return this.queryParts.length > 1;
+  }
+
+  public materializeHelpers(): WorkbenchQuery {
+    if (!this.hasHelperQueries()) return this;
+    const { query } = this.getApiQuery();
+    const queryString = query.query;
+    if (typeof queryString !== 'string') return this;
+    const lastPart = this.getLastPart();
+    return this.changeQueryParts([
+      new WorkbenchQueryPart({
+        id: lastPart.id,
+        queryName: lastPart.queryName,
+        queryString,
+      }),
+    ]);
+  }
+
+  public extractCteHelpers(): WorkbenchQuery {
+    const { queryParts } = this;
+
+    let changed = false;
+    const newParts = queryParts.flatMap(queryPart => {
+      const helpers = queryPart.extractCteHelpers();
+      if (helpers) changed = true;
+      return helpers || [queryPart];
+    });
+    return changed ? this.changeQueryParts(newParts) : this;
+  }
+
+  public makePreview(): WorkbenchQuery {
+    if (!this.isIngestQuery()) return this;
+
+    let ret: WorkbenchQuery = this;
+
+    // Limit all the helper queries
+    const parsedQuery = this.getParsedQuery();
+    if (parsedQuery) {
+      const fromExpression = parsedQuery.getFirstFromExpression();
+      if (fromExpression instanceof SqlTableRef) {
+        const firstTable = fromExpression.getTable();
+        ret = ret.changeQueryParts(
+          this.queryParts.map(queryPart =>
+            queryPart.queryName === firstTable ? queryPart.addPreviewLimit() : queryPart,
+          ),
+        );
+      }
+    }
+
+    // Adjust the context, remove maxNumTasks and add in ingest mode flags
+    const cleanContext = deleteKeys(this.queryContext, ['maxNumTasks']);
+    ret = ret.changeQueryContext({
+      ...cleanContext,
+      finalizeAggregations: false,
+      groupByEnableMultiValueUnnesting: false,
+    });
+
+    // Remove everything pertaining to INSERT INTO / REPLACE INTO from the query string
+    const newQueryString = parsedQuery
+      ? parsedQuery
+          .changeInsertClause(undefined)
+          .changeReplaceClause(undefined)
+          .changePartitionedByClause(undefined)
+          .changeClusteredByClause(undefined)
+          .changeOrderByClause(
+            WorkbenchQuery.makeOrderByClause(
+              parsedQuery.partitionedByClause,
+              parsedQuery.clusteredByClause,
+            ),
+          )
+          .toString()
+      : WorkbenchQuery.commentOutIngestParts(this.getQueryString());
+
+    return ret.changeQueryString(newQueryString);
+  }
+
+  public getApiQuery(makeQueryId: () => string = uuidv4): {
+    engine: DruidEngine;
+    query: Record<string, any>;
+    sqlPrefixLines?: number;
+    cancelQueryId?: string;
+  } {
+    const { queryParts, queryContext, unlimited } = this;
+    if (!queryParts.length) throw new Error(`should not get here`);
+    const engine = this.getEffectiveEngine();
+
+    const lastQueryPart = this.getLastPart();
+    if (engine === 'native') {
+      let query: any;
+      try {
+        query = Hjson.parse(lastQueryPart.queryString);
+      } catch (e) {
+        throw new Error(
+          `You have selected the 'native' engine but the query you entered could not be parsed as JSON: ${e.message}`,
+        );
+      }
+      query.context = { ...(query.context || {}), ...queryContext };
+
+      let cancelQueryId = query.context.queryId;
+      if (!cancelQueryId) {
+        // If the queryId (sqlQueryId) is not explicitly set on the context generate one so it is possible to cancel the query.
+        query.context.queryId = cancelQueryId = makeQueryId();
+      }
+
+      return {
+        engine,
+        query,
+        cancelQueryId,
+      };
+    }
+
+    const prefixParts = queryParts
+      .slice(0, queryParts.length - 1)
+      .filter(part => !part.getIngestDatasource());
+
+    let apiQuery: Record<string, any> = {};
+    if (lastQueryPart.isJsonLike()) {
+      try {
+        apiQuery = Hjson.parse(lastQueryPart.queryString);
+      } catch (e) {
+        throw new Error(`The query you entered could not be parsed as JSON: ${e.message}`);
+      }
+    } else {
+      apiQuery = {
+        query: lastQueryPart.queryString,
+        resultFormat: 'array',
+        header: true,
+        typesHeader: true,
+        sqlTypesHeader: true,
+      };
+    }
+
+    let queryPrepend = '';
+    let queryAppend = '';
+
+    if (prefixParts.length) {
+      const { insertReplaceLine, overwriteLine, partitionedByLine, clusteredByLine } =
+        WorkbenchQuery.getIngestionLines(apiQuery.query);
+      if (insertReplaceLine) {
+        queryPrepend += insertReplaceLine + '\n';
+        if (overwriteLine) {
+          queryPrepend += overwriteLine + '\n';
+        }
+
+        apiQuery.query = WorkbenchQuery.commentOutIngestParts(apiQuery.query);
+
+        if (clusteredByLine) {
+          queryAppend = '\n' + clusteredByLine + queryAppend;
+        }
+        if (partitionedByLine) {
+          queryAppend = '\n' + partitionedByLine + queryAppend;
+        }
+      }
+
+      queryPrepend += 'WITH\n' + prefixParts.map(p => p.toWithPart()).join(',\n') + '\n(\n';
+      queryAppend = '\n)' + queryAppend;
+    }
+
+    let prefixLines = 0;
+    if (queryPrepend) {
+      prefixLines = queryPrepend.split('\n').length - 1;
+      apiQuery.query = queryPrepend + apiQuery.query + queryAppend;
+    }
+
+    const m = /(--:context\s.+)(?:\n|$)/.exec(apiQuery.query);
+    if (m) {
+      throw new Error(
+        `This query contains a context comment '${m[1]}'. Context comments have been deprecated. Please rewrite the context comment as a context parameter. The context parameter editor is located in the "Engine" dropdown.`,
+      );
+    }
+
+    const ingestQuery = this.isIngestQuery();
+    if (!unlimited && !ingestQuery) {
+      apiQuery.context ||= {};
+      apiQuery.context.sqlOuterLimit = 1001;
+    }
+
+    apiQuery.context = {
+      ...(apiQuery.context || {}),
+      ...queryContext,
+    };
+
+    let cancelQueryId: string | undefined;
+    if (engine === 'sql-native') {
+      cancelQueryId = apiQuery.context.sqlQueryId;
+      if (!cancelQueryId) {
+        // If the sqlQueryId is not explicitly set on the context generate one, so it is possible to cancel the query.
+        apiQuery.context.sqlQueryId = cancelQueryId = makeQueryId();
+      }
+    }
+
+    if (engine === 'sql-msq-task') {
+      apiQuery.context.finalizeAggregations ??= !ingestQuery;
+      apiQuery.context.groupByEnableMultiValueUnnesting ??= !ingestQuery;
+    }
+
+    return {
+      engine,
+      query: apiQuery,
+      sqlPrefixLines: prefixLines,
+      cancelQueryId,
+    };
+  }
+
+  public getInlineMetadata(): ColumnMetadata[] {
+    const { queryParts } = this;
+    if (!queryParts.length) return [];
+    return queryParts.slice(0, queryParts.length - 1).flatMap(p => p.getInlineMetadata());
+  }
+
+  public getPrefix(index: number): WorkbenchQuery {
+    return this.changeQueryParts(this.queryParts.slice(0, index + 1));
+  }
+
+  public getPrefixQueries(): WorkbenchQuery[] {
+    return this.queryParts.slice(0, this.queryParts.length - 1).map((_, i) => this.getPrefix(i));
+  }
+
+  public applyUpdate(newQuery: WorkbenchQuery, index: number): WorkbenchQuery {
+    return newQuery.changeQueryParts(newQuery.queryParts.concat(this.queryParts.slice(index + 1)));
+  }
+
+  public duplicate(): WorkbenchQuery {
+    return this.changeQueryParts(this.queryParts.map(part => part.duplicate()));
+  }
+
+  public duplicateLast(): WorkbenchQuery {
+    const { queryParts } = this;
+    const last = this.getLastPart();
+    return this.changeQueryParts(queryParts.concat(last.duplicate()));
+  }
+
+  public addBlank(): WorkbenchQuery {
+    const { queryParts } = this;
+    const last = this.getLastPart();
+    return this.changeQueryParts(
+      queryParts.slice(0, queryParts.length - 1).concat(
+        last
+          .changeQueryName(last.queryName || 'q')
+          .changeCollapsed(true)
+          .changeLastExecution(undefined),
+        WorkbenchQueryPart.blank(),
+      ),
+    );
+  }
+
+  public remove(index: number): WorkbenchQuery {
+    const { queryParts } = this;
+    return this.changeQueryParts(queryParts.filter((_, i) => i !== index));
+  }
+}
diff --git a/web-console/src/entry.ts b/web-console/src/entry.ts
index d92f3e3d8e0d..39e695d43536 100644
--- a/web-console/src/entry.ts
+++ b/web-console/src/entry.ts
@@ -81,7 +81,7 @@ if (consoleConfig.baseURL) {
   UrlBaser.baseUrl = consoleConfig.baseURL;
 }
 if (consoleConfig.customHeaderName && consoleConfig.customHeaderValue) {
-  apiConfig.headers[consoleConfig.customHeaderName] = consoleConfig.customHeaderValue;
+  apiConfig.headers![consoleConfig.customHeaderName] = consoleConfig.customHeaderValue;
 }
 if (consoleConfig.customHeaders) {
   Object.assign(apiConfig.headers, consoleConfig.customHeaders);
diff --git a/web-console/src/helpers/execution/general.ts b/web-console/src/helpers/execution/general.ts
new file mode 100644
index 000000000000..adf015883ef9
--- /dev/null
+++ b/web-console/src/helpers/execution/general.ts
@@ -0,0 +1,70 @@
+/*
+ * 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 { CancelToken } from 'axios';
+import { QueryResult } from 'druid-query-toolkit';
+
+import { Execution } from '../../druid-models';
+import { IntermediateQueryState } from '../../utils';
+
+import {
+  updateExecutionWithDatasourceExistsIfNeeded,
+  updateExecutionWithTaskIfNeeded,
+} from './sql-task-execution';
+
+export function extractResult(
+  execution: Execution | IntermediateQueryState<Execution>,
+): QueryResult | IntermediateQueryState<Execution> {
+  if (execution instanceof IntermediateQueryState) return execution;
+
+  if (execution.result) {
+    return execution.result;
+  } else {
+    const error = new Error(execution.getErrorMessage() || 'unexpected destination');
+    if (execution.error) (error as any).executionError = execution.error;
+    throw error;
+  }
+}
+
+export async function executionBackgroundStatusCheck(
+  execution: Execution,
+  _query: any,
+  cancelToken: CancelToken,
+): Promise<Execution | IntermediateQueryState<Execution>> {
+  switch (execution.engine) {
+    case 'sql-msq-task':
+      execution = await updateExecutionWithTaskIfNeeded(execution, cancelToken);
+      execution = await updateExecutionWithDatasourceExistsIfNeeded(execution, cancelToken);
+      break;
+
+    default:
+      throw new Error(`can not background check execution for engine ${execution.engine}`);
+  }
+
+  if (!execution.isFullyComplete()) return new IntermediateQueryState(execution);
+
+  return execution;
+}
+
+export async function executionBackgroundResultStatusCheck(
+  execution: Execution,
+  query: any,
+  cancelToken: CancelToken,
+): Promise<QueryResult | IntermediateQueryState<Execution>> {
+  return extractResult(await executionBackgroundStatusCheck(execution, query, cancelToken));
+}
diff --git a/web-console/src/helpers/execution/sql-task-execution.ts b/web-console/src/helpers/execution/sql-task-execution.ts
new file mode 100644
index 000000000000..b84963f43406
--- /dev/null
+++ b/web-console/src/helpers/execution/sql-task-execution.ts
@@ -0,0 +1,264 @@
+/*
+ * 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 { AxiosResponse, CancelToken } from 'axios';
+import { SqlLiteral } from 'druid-query-toolkit';
+
+import { Execution, QueryContext } from '../../druid-models';
+import { Api } from '../../singletons';
+import {
+  deepGet,
+  DruidError,
+  IntermediateQueryState,
+  queryDruidSql,
+  QueryManager,
+} from '../../utils';
+
+const WAIT_FOR_SEGMENTS_TIMEOUT = 180000; // 3 minutes to wait until segments appear
+
+export interface SubmitTaskQueryOptions {
+  query: string | Record<string, any>;
+  context?: QueryContext;
+  skipResults?: boolean;
+  prefixLines?: number;
+  cancelToken?: CancelToken;
+  preserveOnTermination?: boolean;
+  onSubmitted?: (id: string) => void;
+}
+
+export async function submitTaskQuery(
+  options: SubmitTaskQueryOptions,
+): Promise<Execution | IntermediateQueryState<Execution>> {
+  const {
+    query,
+    context,
+    skipResults,
+    prefixLines,
+    cancelToken,
+    preserveOnTermination,
+    onSubmitted,
+  } = options;
+
+  let sqlQuery: string;
+  let jsonQuery: Record<string, any>;
+  if (typeof query === 'string') {
+    sqlQuery = query;
+    jsonQuery = {
+      query: sqlQuery,
+      resultFormat: 'array',
+      header: true,
+      typesHeader: true,
+      sqlTypesHeader: true,
+      context: context,
+    };
+  } else {
+    sqlQuery = query.query;
+
+    if (context) {
+      jsonQuery = {
+        ...query,
+        context: {
+          ...(query.context || {}),
+          ...context,
+        },
+      };
+    } else {
+      jsonQuery = query;
+    }
+  }
+
+  let sqlTaskResp: AxiosResponse;
+
+  try {
+    sqlTaskResp = await Api.instance.post(`/druid/v2/sql/task`, jsonQuery, { cancelToken });
+  } catch (e) {
+    const druidError = deepGet(e, 'response.data.error');
+    if (!druidError) throw e;
+    throw new DruidError(druidError, prefixLines);
+  }
+
+  let execution = Execution.fromTaskSubmit(sqlTaskResp.data, sqlQuery, context);
+
+  if (onSubmitted) {
+    onSubmitted(execution.id);
+  }
+
+  if (skipResults) {
+    execution = execution.changeDestination({ type: 'download' });
+  }
+
+  execution = await updateExecutionWithDatasourceExistsIfNeeded(execution, cancelToken);
+
+  if (execution.isFullyComplete()) return execution;
+
+  if (cancelToken) {
+    cancelTaskExecutionOnCancel(execution.id, cancelToken, Boolean(preserveOnTermination));
+  }
+
+  return new IntermediateQueryState(execution);
+}
+
+export interface ReattachTaskQueryOptions {
+  id: string;
+  cancelToken?: CancelToken;
+  preserveOnTermination?: boolean;
+}
+
+export async function reattachTaskExecution(
+  option: ReattachTaskQueryOptions,
+): Promise<Execution | IntermediateQueryState<Execution>> {
+  const { id, cancelToken, preserveOnTermination } = option;
+  let execution = await getTaskExecution(id, undefined, cancelToken);
+
+  execution = await updateExecutionWithDatasourceExistsIfNeeded(execution, cancelToken);
+
+  if (execution.isFullyComplete()) return execution;
+
+  if (cancelToken) {
+    cancelTaskExecutionOnCancel(execution.id, cancelToken, Boolean(preserveOnTermination));
+  }
+
+  return new IntermediateQueryState(execution);
+}
+
+export async function updateExecutionWithTaskIfNeeded(
+  execution: Execution,
+  cancelToken?: CancelToken,
+): Promise<Execution> {
+  if (!execution.isWaitingForQuery()) return execution;
+
+  // Inherit old payload so as not to re-query it
+  return execution.updateWith(
+    await getTaskExecution(execution.id, execution._payload, cancelToken),
+  );
+}
+
+export async function getTaskExecution(
+  id: string,
+  taskPayloadOverride?: { payload: any; task: string },
+  cancelToken?: CancelToken,
+): Promise<Execution> {
+  const encodedId = Api.encodePath(id);
+
+  let taskPayloadResp: AxiosResponse | undefined;
+  if (!taskPayloadOverride) {
+    try {
+      taskPayloadResp = await Api.instance.get(`/druid/indexer/v1/task/${encodedId}`, {
+        cancelToken,
+      });
+    } catch (e) {
+      if (Api.isNetworkError(e)) throw e;
+    }
+  }
+
+  let taskReportResp: AxiosResponse | undefined;
+  try {
+    taskReportResp = await Api.instance.get(`/druid/indexer/v1/task/${encodedId}/reports`, {
+      cancelToken,
+    });
+  } catch (e) {
+    if (Api.isNetworkError(e)) throw e;
+  }
+
+  if ((taskPayloadResp || taskPayloadOverride) && taskReportResp) {
+    try {
+      return Execution.fromTaskPayloadAndReport(
+        taskPayloadResp ? taskPayloadResp.data : taskPayloadOverride,
+        taskReportResp.data,
+      );
+    } catch {
+      // We got a bad payload, wait a bit and try to get the payload again (also log it)
+      // This whole catch block is a hack, and we should make the detail route more robust
+      console.error(
+        `Got unusable response from the reports endpoint (/druid/indexer/v1/task/${encodedId}/reports) going to retry`,
+      );
+      console.log('Report response:', taskReportResp.data);
+    }
+  }
+
+  const statusResp = await Api.instance.get(`/druid/indexer/v1/task/${encodedId}/status`, {
+    cancelToken,
+  });
+
+  return Execution.fromTaskStatus(statusResp.data);
+}
+
+export async function updateExecutionWithDatasourceExistsIfNeeded(
+  execution: Execution,
+  _cancelToken?: CancelToken,
+): Promise<Execution> {
+  if (
+    !(execution.destination?.type === 'dataSource' && !execution.destination.exists) ||
+    execution.status !== 'SUCCESS'
+  ) {
+    return execution;
+  }
+
+  const segmentCheck = await queryDruidSql({
+    query: `SELECT
+  COUNT(*) AS num_segments,
+  COUNT(*) FILTER (WHERE is_published = 1 AND is_available = 0) AS loading_segments
+FROM sys.segments
+WHERE datasource = ${SqlLiteral.create(execution.destination.dataSource)} AND is_overshadowed = 0`,
+  });
+
+  const numSegments: number = deepGet(segmentCheck, '0.num_segments') || 0;
+  const loadingSegments: number = deepGet(segmentCheck, '0.loading_segments') || 0;
+
+  // There appear to be no segments either nothing was written out or they have not shown up in the metadata yet
+  if (numSegments === 0) {
+    const { stages } = execution;
+    if (stages) {
+      const lastStage = stages.getStage(stages.stageCount() - 1);
+      if (lastStage.partitionCount === 0) {
+        // No data was meant to be written anyway
+        return execution.markDestinationDatasourceExists();
+      }
+    }
+
+    const endTime = execution.getEndTime();
+    if (!endTime || endTime.valueOf() + WAIT_FOR_SEGMENTS_TIMEOUT < Date.now()) {
+      // Enough time has passed since the query ran... give up waiting (or there is no time info).
+      return execution.markDestinationDatasourceExists();
+    }
+
+    return execution;
+  }
+
+  // There are segments, and we are still waiting for some of them to load
+  if (loadingSegments > 0) return execution;
+
+  return execution.markDestinationDatasourceExists();
+}
+
+function cancelTaskExecutionOnCancel(
+  id: string,
+  cancelToken: CancelToken,
+  preserveOnTermination = false,
+): void {
+  void cancelToken.promise
+    .then(cancel => {
+      if (preserveOnTermination && cancel.message === QueryManager.TERMINATION_MESSAGE) return;
+      return cancelTaskExecution(id);
+    })
+    .catch(() => {});
+}
+
+export function cancelTaskExecution(id: string): Promise<void> {
+  return Api.instance.post(`/druid/indexer/v1/task/${Api.encodePath(id)}/shutdown`, {});
+}
diff --git a/web-console/src/helpers/index.ts b/web-console/src/helpers/index.ts
new file mode 100644
index 000000000000..7c0a01e35605
--- /dev/null
+++ b/web-console/src/helpers/index.ts
@@ -0,0 +1,21 @@
+/*
+ * 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 './execution/general';
+export * from './execution/sql-task-execution';
+export * from './spec-conversion';
diff --git a/web-console/src/helpers/spec-conversion.spec.ts b/web-console/src/helpers/spec-conversion.spec.ts
new file mode 100644
index 000000000000..9b1e421e939d
--- /dev/null
+++ b/web-console/src/helpers/spec-conversion.spec.ts
@@ -0,0 +1,452 @@
+/*
+ * 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 { sane } from 'druid-query-toolkit';
+
+import { convertSpecToSql } from './spec-conversion';
+
+describe('spec conversion', () => {
+  it('converts index_parallel spec (without rollup)', () => {
+    const converted = convertSpecToSql({
+      type: 'index_parallel',
+      spec: {
+        ioConfig: {
+          type: 'index_parallel',
+          inputSource: {
+            type: 'http',
+            uris: ['https://druid.apache.org/data/wikipedia.json.gz'],
+          },
+          inputFormat: {
+            type: 'json',
+          },
+        },
+        dataSchema: {
+          granularitySpec: {
+            segmentGranularity: 'hour',
+            queryGranularity: 'none',
+            rollup: false,
+          },
+          dataSource: 'wikipedia',
+          transformSpec: {
+            filter: {
+              type: 'not',
+              field: {
+                type: 'selector',
+                dimension: 'channel',
+                value: 'xxx',
+              },
+            },
+          },
+          timestampSpec: {
+            column: 'timestamp',
+            format: 'auto',
+          },
+          dimensionsSpec: {
+            dimensions: [
+              'isRobot',
+              'channel',
+              'flags',
+              'isUnpatrolled',
+              'page',
+              'diffUrl',
+              {
+                type: 'long',
+                name: 'added',
+              },
+              'comment',
+              {
+                type: 'long',
+                name: 'commentLength',
+              },
+              'isNew',
+              'isMinor',
+              {
+                type: 'long',
+                name: 'delta',
+              },
+              'isAnonymous',
+              'user',
+              {
+                type: 'long',
+                name: 'deltaBucket',
+              },
+              {
+                type: 'long',
+                name: 'deleted',
+              },
+              'namespace',
+              'cityName',
+              'countryName',
+              'regionIsoCode',
+              'metroCode',
+              'countryIsoCode',
+              'regionName',
+            ],
+          },
+        },
+        tuningConfig: {
+          type: 'index_parallel',
+          partitionsSpec: {
+            type: 'single_dim',
+            partitionDimension: 'isRobot',
+            targetRowsPerSegment: 150000,
+          },
+          forceGuaranteedRollup: true,
+          maxNumConcurrentSubTasks: 4,
+          maxParseExceptions: 3,
+        },
+      },
+    });
+
+    expect(converted.queryString).toEqual(sane`
+      -- This SQL query was auto generated from an ingestion spec
+      REPLACE INTO wikipedia OVERWRITE ALL
+      WITH source AS (SELECT * FROM TABLE(
+        EXTERN(
+          '{"type":"http","uris":["https://druid.apache.org/data/wikipedia.json.gz"]}',
+          '{"type":"json"}',
+          '[{"name":"timestamp","type":"string"},{"name":"isRobot","type":"string"},{"name":"channel","type":"string"},{"name":"flags","type":"string"},{"name":"isUnpatrolled","type":"string"},{"name":"page","type":"string"},{"name":"diffUrl","type":"string"},{"name":"added","type":"long"},{"name":"comment","type":"string"},{"name":"commentLength","type":"long"},{"name":"isNew","type":"string"},{"name":"isMinor","type":"string"},{"name":"delta","type":"long"},{"name":"isAnonymous","type":"string"},{"name":"user","type":"string"},{"name":"deltaBucket","type":"long"},{"name":"deleted","type":"long"},{"name":"namespace","type":"string"},{"name":"cityName","type":"string"},{"name":"countryName","type":"string"},{"name":"regionIsoCode","type":"string"},{"name":"metroCode","type":"string"},{"name":"countryIsoCode","type":"string"},{"name":"regionName","type":"string"}]'
+        )
+      ))
+      SELECT
+        CASE WHEN CAST("timestamp" AS BIGINT) > 0 THEN MILLIS_TO_TIMESTAMP(CAST("timestamp" AS BIGINT)) ELSE TIME_PARSE("timestamp") END AS __time,
+        "isRobot",
+        "channel",
+        "flags",
+        "isUnpatrolled",
+        "page",
+        "diffUrl",
+        "added",
+        "comment",
+        "commentLength",
+        "isNew",
+        "isMinor",
+        "delta",
+        "isAnonymous",
+        "user",
+        "deltaBucket",
+        "deleted",
+        "namespace",
+        "cityName",
+        "countryName",
+        "regionIsoCode",
+        "metroCode",
+        "countryIsoCode",
+        "regionName"
+      FROM source
+      WHERE NOT ("channel" = 'xxx')
+      PARTITIONED BY HOUR
+      CLUSTERED BY "isRobot"
+    `);
+
+    expect(converted.queryContext).toEqual({
+      groupByEnableMultiValueUnnesting: false,
+      maxParseExceptions: 3,
+      finalizeAggregations: false,
+      maxNumTasks: 5,
+    });
+  });
+
+  it('converts index_parallel spec (with rollup)', () => {
+    const converted = convertSpecToSql({
+      type: 'index_parallel',
+      spec: {
+        ioConfig: {
+          type: 'index_parallel',
+          inputSource: {
+            type: 'http',
+            uris: ['https://druid.apache.org/data/wikipedia.json.gz'],
+          },
+          inputFormat: {
+            type: 'json',
+          },
+        },
+        dataSchema: {
+          granularitySpec: {
+            segmentGranularity: 'hour',
+            queryGranularity: 'hour',
+          },
+          dataSource: 'wikipedia_rollup',
+          timestampSpec: {
+            column: 'timestamp',
+            format: 'iso',
+          },
+          dimensionsSpec: {
+            dimensions: [
+              'isRobot',
+              'channel',
+              'flags',
+              'isUnpatrolled',
+              'comment',
+              'isNew',
+              'isMinor',
+              'isAnonymous',
+              'user',
+              'namespace',
+              'cityName',
+              'countryName',
+              'regionIsoCode',
+              'metroCode',
+              'countryIsoCode',
+              'regionName',
+            ],
+          },
+          metricsSpec: [
+            {
+              name: 'count',
+              type: 'count',
+            },
+            {
+              name: 'sum_added',
+              type: 'longSum',
+              fieldName: 'added',
+            },
+            {
+              name: 'sum_commentLength',
+              type: 'longSum',
+              fieldName: 'commentLength',
+            },
+            {
+              name: 'sum_delta',
+              type: 'longSum',
+              fieldName: 'delta',
+            },
+            {
+              name: 'sum_deltaBucket',
+              type: 'longSum',
+              fieldName: 'deltaBucket',
+            },
+            {
+              name: 'sum_deleted',
+              type: 'longSum',
+              fieldName: 'deleted',
+            },
+            {
+              name: 'page_theta',
+              type: 'thetaSketch',
+              fieldName: 'page',
+            },
+          ],
+        },
+        tuningConfig: {
+          type: 'index_parallel',
+          partitionsSpec: {
+            type: 'hashed',
+          },
+          forceGuaranteedRollup: true,
+        },
+      },
+    });
+
+    expect(converted.queryString).toEqual(sane`
+      -- This SQL query was auto generated from an ingestion spec
+      REPLACE INTO wikipedia_rollup OVERWRITE ALL
+      WITH source AS (SELECT * FROM TABLE(
+        EXTERN(
+          '{"type":"http","uris":["https://druid.apache.org/data/wikipedia.json.gz"]}',
+          '{"type":"json"}',
+          '[{"name":"timestamp","type":"string"},{"name":"isRobot","type":"string"},{"name":"channel","type":"string"},{"name":"flags","type":"string"},{"name":"isUnpatrolled","type":"string"},{"name":"comment","type":"string"},{"name":"isNew","type":"string"},{"name":"isMinor","type":"string"},{"name":"isAnonymous","type":"string"},{"name":"user","type":"string"},{"name":"namespace","type":"string"},{"name":"cityName","type":"string"},{"name":"countryName","type":"string"},{"name":"regionIsoCode","type":"string"},{"name":"metroCode","type":"string"},{"name":"countryIsoCode","type":"string"},{"name":"regionName","type":"string"},{"name":"added","type":"long"},{"name":"commentLength","type":"long"},{"name":"delta","type":"long"},{"name":"deltaBucket","type":"long"},{"name":"deleted","type":"long"},{"name":"page","type":"string"}]'
+        )
+      ))
+      SELECT
+        TIME_FLOOR(TIME_PARSE("timestamp"), 'PT1H') AS __time,
+        "isRobot",
+        "channel",
+        "flags",
+        "isUnpatrolled",
+        "comment",
+        "isNew",
+        "isMinor",
+        "isAnonymous",
+        "user",
+        "namespace",
+        "cityName",
+        "countryName",
+        "regionIsoCode",
+        "metroCode",
+        "countryIsoCode",
+        "regionName",
+        COUNT(*) AS "count",
+        SUM("added") AS "sum_added",
+        SUM("commentLength") AS "sum_commentLength",
+        SUM("delta") AS "sum_delta",
+        SUM("deltaBucket") AS "sum_deltaBucket",
+        SUM("deleted") AS "sum_deleted",
+        APPROX_COUNT_DISTINCT_DS_THETA("page") AS "page_theta"
+      FROM source
+      GROUP BY 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17
+      PARTITIONED BY HOUR
+    `);
+
+    expect(converted.queryContext).toEqual({
+      groupByEnableMultiValueUnnesting: false,
+      finalizeAggregations: false,
+    });
+  });
+
+  it('converts index_hadoop spec (with rollup)', () => {
+    const converted = convertSpecToSql({
+      type: 'index_hadoop',
+      spec: {
+        dataSchema: {
+          dataSource: 'newSource',
+          hadoopDependencyCoordinates: [
+            'org.apache.hadoop:hadoop-client:2.7.3',
+            'org.apache.hadoop:hadoop-aws:2.7.3',
+          ],
+          parser: {
+            type: 'parquet',
+            parseSpec: {
+              format: 'timeAndDims',
+              timestampSpec: {
+                column: 'event_ts',
+                format: 'auto',
+              },
+              columns: [
+                'col1',
+                'col2',
+                'col3',
+                'col4',
+                'metric1',
+                'metric2',
+                'metric3',
+                'metric4',
+                'metric5',
+                'metric6',
+                'metric7',
+              ],
+              dimensionsSpec: {
+                dimensions: ['col1', 'col2', 'col3', 'col4'],
+                dimensionExclusions: [],
+                spatialDimensions: [],
+              },
+            },
+          },
+          metricsSpec: [
+            {
+              type: 'doubleSum',
+              name: 'metric1',
+              fieldName: 'field1',
+            },
+            {
+              type: 'doubleMax',
+              name: 'metric2',
+              fieldName: 'field2',
+            },
+            {
+              type: 'doubleMin',
+              name: 'metric3',
+              fieldName: 'field3',
+            },
+            {
+              type: 'hyperUnique',
+              name: 'metric4',
+              fieldName: 'field4',
+              isInputHyperUnique: true,
+            },
+            {
+              type: 'hyperUnique',
+              name: 'metric5',
+              fieldName: 'field5',
+              isInputHyperUnique: true,
+            },
+            {
+              type: 'longSum',
+              name: 'metric6',
+              fieldName: 'field6',
+            },
+            {
+              type: 'doubleSum',
+              name: 'metric7',
+              fieldName: 'field7',
+            },
+          ],
+          granularitySpec: {
+            type: 'uniform',
+            segmentGranularity: 'HOUR',
+            queryGranularity: 'HOUR',
+            intervals: ['2022-08-01/2022-08-02'],
+            rollup: true,
+          },
+          transformSpec: {
+            filter: {
+              type: 'selector',
+              dimension: 'col2',
+              value: 'xxx',
+            },
+          },
+        },
+        ioConfig: {
+          type: 'hadoop',
+          inputSpec: {
+            type: 'static',
+            inputFormat: 'org.apache.druid.data.input.parquet.DruidParquetInputFormat',
+            paths: 's3://path',
+          },
+        },
+        tuningConfig: {
+          type: 'hadoop',
+          partitionsSpec: {
+            type: 'hashed',
+            targetPartitionSize: 3000000,
+          },
+          forceExtendableShardSpecs: true,
+          jobProperties: {
+            'mapreduce.job.classloader': 'true',
+            'mapreduce.map.memory.mb': '8192',
+            'mapreduce.reduce.memory.mb': '18288',
+          },
+        },
+      },
+    });
+
+    expect(converted.queryString).toEqual(sane`
+      -- This SQL query was auto generated from an ingestion spec
+      REPLACE INTO newSource OVERWRITE ALL
+      WITH source AS (SELECT * FROM TABLE(
+        EXTERN(
+          '{"type":"s3","uris":["s3://path"]}',
+          '{"columns":["col1","col2","col3","col4","metric1","metric2","metric3","metric4","metric5","metric6","metric7"],"type":"timeAndDims"}',
+          '[{"name":"event_ts","type":"string"},{"name":"col1","type":"string"},{"name":"col2","type":"string"},{"name":"col3","type":"string"},{"name":"col4","type":"string"},{"name":"field1","type":"double"},{"name":"field2","type":"double"},{"name":"field3","type":"double"},{"name":"field4","type":"string"},{"name":"field5","type":"string"},{"name":"field6","type":"long"},{"name":"field7","type":"double"}]'
+        )
+      ))
+      SELECT
+        TIME_FLOOR(CASE WHEN CAST(event_ts AS BIGINT) > 0 THEN MILLIS_TO_TIMESTAMP(CAST(event_ts AS BIGINT)) ELSE TIME_PARSE(event_ts) END, 'PT1H') AS __time,
+        "col1",
+        "col2",
+        "col3",
+        "col4",
+        SUM("field1") AS "metric1",
+        MAX("field2") AS "metric2",
+        MIN("field3") AS "metric3",
+        APPROX_COUNT_DISTINCT_BUILTIN("field4") AS "metric4",
+        APPROX_COUNT_DISTINCT_BUILTIN("field5") AS "metric5",
+        SUM("field6") AS "metric6",
+        SUM("field7") AS "metric7"
+      FROM source
+      WHERE "col2" = 'xxx'
+      GROUP BY 1, 2, 3, 4, 5
+      PARTITIONED BY HOUR
+    `);
+
+    expect(converted.queryContext).toEqual({
+      groupByEnableMultiValueUnnesting: false,
+      finalizeAggregations: false,
+    });
+  });
+});
diff --git a/web-console/src/helpers/spec-conversion.ts b/web-console/src/helpers/spec-conversion.ts
new file mode 100644
index 000000000000..498c908595b6
--- /dev/null
+++ b/web-console/src/helpers/spec-conversion.ts
@@ -0,0 +1,455 @@
+/*
+ * 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 { RefName, SqlExpression, SqlLiteral, SqlRef, SqlTableRef } from 'druid-query-toolkit';
+import * as JSONBig from 'json-bigint-native';
+
+import {
+  DimensionSpec,
+  inflateDimensionSpec,
+  IngestionSpec,
+  MetricSpec,
+  QueryWithContext,
+  TimestampSpec,
+  Transform,
+  upgradeSpec,
+} from '../druid-models';
+import { deepGet, filterMap, oneOf } from '../utils';
+
+export function getSpecDatasourceName(spec: IngestionSpec): string {
+  return deepGet(spec, 'spec.dataSchema.dataSource') || 'unknown_datasource';
+}
+
+function convertFilter(filter: any): SqlExpression {
+  switch (filter.type) {
+    case 'selector':
+      return SqlRef.columnWithQuotes(filter.dimension).equal(filter.value);
+
+    case 'in':
+      return SqlRef.columnWithQuotes(filter.dimension).in(filter.values);
+
+    case 'not':
+      return convertFilter(filter.field).not();
+
+    case 'and':
+      return SqlExpression.and(filter.fields.map(convertFilter));
+
+    case 'or':
+      return SqlExpression.or(filter.fields.map(convertFilter));
+
+    default:
+      throw new Error(`unknown filter type '${filter.type}'`);
+  }
+}
+
+const SOURCE_REF = SqlTableRef.create('source');
+
+export function convertSpecToSql(spec: any): QueryWithContext {
+  if (!oneOf(spec.type, 'index_parallel', 'index', 'index_hadoop')) {
+    throw new Error('Only index_parallel, index, and index_hadoop specs are supported');
+  }
+  spec = upgradeSpec(spec, true);
+
+  const context: Record<string, any> = {
+    finalizeAggregations: false,
+    groupByEnableMultiValueUnnesting: false,
+  };
+
+  const lines: string[] = [];
+
+  const rollup = deepGet(spec, 'spec.dataSchema.granularitySpec.rollup') ?? true;
+
+  const timestampSpec: TimestampSpec = deepGet(spec, 'spec.dataSchema.timestampSpec');
+  if (!timestampSpec) throw new Error(`spec.dataSchema.timestampSpec is not defined`);
+
+  let dimensions = deepGet(spec, 'spec.dataSchema.dimensionsSpec.dimensions');
+  if (!Array.isArray(dimensions)) {
+    throw new Error(`spec.dataSchema.dimensionsSpec.dimensions must be an array`);
+  }
+  dimensions = dimensions.map(inflateDimensionSpec);
+
+  let columns = dimensions.map((d: DimensionSpec) => ({
+    name: d.name,
+    type: d.type,
+  }));
+
+  const metricsSpec = deepGet(spec, 'spec.dataSchema.metricsSpec');
+  if (Array.isArray(metricsSpec)) {
+    columns = columns.concat(
+      filterMap(metricsSpec, metricSpec =>
+        metricSpec.fieldName
+          ? {
+              name: metricSpec.fieldName,
+              type: metricSpecTypeToDataType(metricSpec.type),
+            }
+          : undefined,
+      ),
+    );
+  }
+
+  let timeExpression: string;
+  const column = timestampSpec.column || 'timestamp';
+  const columnRef = SqlRef.column(column);
+  const format = timestampSpec.format || 'auto';
+  switch (format) {
+    case 'auto':
+      columns.unshift({ name: column, type: 'string' });
+      timeExpression = `CASE WHEN CAST(${columnRef} AS BIGINT) > 0 THEN MILLIS_TO_TIMESTAMP(CAST(${columnRef} AS BIGINT)) ELSE TIME_PARSE(${columnRef}) END`;
+      break;
+
+    case 'iso':
+      columns.unshift({ name: column, type: 'string' });
+      timeExpression = `TIME_PARSE(${columnRef})`;
+      break;
+
+    case 'posix':
+      columns.unshift({ name: column, type: 'long' });
+      timeExpression = `MILLIS_TO_TIMESTAMP(${columnRef} * 1000)`;
+      break;
+
+    case 'millis':
+      columns.unshift({ name: column, type: 'long' });
+      timeExpression = `MILLIS_TO_TIMESTAMP(${columnRef})`;
+      break;
+
+    case 'micro':
+      columns.unshift({ name: column, type: 'long' });
+      timeExpression = `MILLIS_TO_TIMESTAMP(${columnRef} / 1000)`;
+      break;
+
+    case 'nano':
+      columns.unshift({ name: column, type: 'long' });
+      timeExpression = `MILLIS_TO_TIMESTAMP(${columnRef} / 1000000)`;
+      break;
+
+    default:
+      columns.unshift({ name: column, type: 'string' });
+      timeExpression = `TIME_PARSE(${columnRef}, ${SqlLiteral.create(format)})`;
+      break;
+  }
+
+  if (timestampSpec.missingValue) {
+    timeExpression = `COALESCE(${timeExpression}, TIME_PARSE(${SqlLiteral.create(
+      timestampSpec.missingValue,
+    )}))`;
+  }
+
+  timeExpression = convertQueryGranularity(
+    timeExpression,
+    deepGet(spec, 'spec.dataSchema.granularitySpec.queryGranularity'),
+  );
+
+  lines.push(`-- This SQL query was auto generated from an ingestion spec`);
+
+  const maxNumConcurrentSubTasks = deepGet(spec, 'spec.tuningConfig.maxNumConcurrentSubTasks');
+  if (maxNumConcurrentSubTasks > 1) {
+    context.maxNumTasks = maxNumConcurrentSubTasks + 1;
+  }
+
+  const maxParseExceptions = deepGet(spec, 'spec.tuningConfig.maxParseExceptions');
+  if (typeof maxParseExceptions === 'number') {
+    context.maxParseExceptions = maxParseExceptions;
+  }
+
+  const dataSource = deepGet(spec, 'spec.dataSchema.dataSource');
+  if (typeof dataSource !== 'string') throw new Error(`spec.dataSchema.dataSource is not a string`);
+
+  if (deepGet(spec, 'spec.ioConfig.appendToExisting')) {
+    lines.push(`INSERT INTO ${SqlTableRef.create(dataSource)}`);
+  } else {
+    const overwrite = deepGet(spec, 'spec.ioConfig.dropExisting')
+      ? 'WHERE ' +
+        SqlExpression.fromTimeRefAndInterval(
+          SqlRef.column('__time'),
+          deepGet(spec, 'spec.dataSchema.granularitySpec.intervals'),
+        )
+      : 'ALL';
+
+    lines.push(`REPLACE INTO ${SqlTableRef.create(dataSource)} OVERWRITE ${overwrite}`);
+  }
+
+  let inputSource: any;
+  if (oneOf(spec.type, 'index_parallel', 'index')) {
+    inputSource = deepGet(spec, 'spec.ioConfig.inputSource');
+    if (!inputSource) throw new Error(`spec.ioConfig.inputSource is not defined`);
+  } else {
+    // index_hadoop
+    const inputSpec = deepGet(spec, 'spec.ioConfig.inputSpec');
+    if (!inputSpec) throw new Error(`spec.ioConfig.inputSpec is not defined`);
+    if (inputSpec.type !== 'static') {
+      throw new Error(`can only convert when spec.ioConfig.inputSpec.type = 'static'`);
+    }
+
+    const paths = inputSpec.paths.split(',');
+    const firstPath = paths[0];
+    if (firstPath.startsWith('s3://')) {
+      inputSource = { type: 's3', uris: paths };
+    } else if (firstPath.startsWith('gs://')) {
+      inputSource = { type: 'google', uris: paths };
+    } else if (firstPath.startsWith('hdfs://')) {
+      inputSource = { type: 'hdfs', paths };
+    } else {
+      throw new Error('unsupported');
+    }
+  }
+
+  if (inputSource.type === 'druid') {
+    lines.push(
+      `WITH ${SOURCE_REF} AS (`,
+      `  SELECT *`,
+      `  FROM ${SqlTableRef.create(inputSource.dataSource)}`,
+      `  WHERE ${SqlExpression.fromTimeRefAndInterval(
+        SqlRef.column('__time'),
+        inputSource.interval,
+      )}`,
+      ')',
+    );
+  } else {
+    lines.push(
+      `WITH ${SOURCE_REF} AS (SELECT * FROM TABLE(`,
+      `  EXTERN(`,
+      `    ${SqlLiteral.create(JSONBig.stringify(inputSource))},`,
+    );
+
+    const inputFormat = deepGet(spec, 'spec.ioConfig.inputFormat');
+    if (!inputFormat) throw new Error(`spec.ioConfig.inputFormat is not defined`);
+    lines.push(
+      `    ${SqlLiteral.create(JSONBig.stringify(inputFormat))},`,
+      `    ${SqlLiteral.create(JSONBig.stringify(columns))}`,
+      `  )`,
+      `))`,
+    );
+  }
+
+  lines.push(`SELECT`);
+
+  const transforms: Transform[] = deepGet(spec, 'spec.dataSchema.transformSpec.transforms') || [];
+  if (!Array.isArray(transforms))
+    throw new Error(`spec.dataSchema.transformSpec.transforms is not an array`);
+  if (transforms.length) {
+    lines.push(`  -- The spec contained transforms that could not be automatically converted.`);
+  }
+
+  const dimensionExpressions = [`  ${timeExpression} AS __time,`].concat(
+    dimensions.flatMap((dimension: DimensionSpec) => {
+      const dimensionName = dimension.name;
+      const relevantTransform = transforms.find(t => t.name === dimensionName);
+      return `  ${SqlRef.columnWithQuotes(dimensionName)},${
+        relevantTransform ? ` -- Relevant transform: ${JSONBig.stringify(relevantTransform)}` : ''
+      }`;
+    }),
+  );
+
+  const selectExpressions = dimensionExpressions.concat(
+    Array.isArray(metricsSpec)
+      ? metricsSpec.map(metricSpec => `  ${metricSpecToSelect(metricSpec)},`)
+      : [],
+  );
+
+  // Remove trailing comma from last expression
+  selectExpressions[selectExpressions.length - 1] = selectExpressions[selectExpressions.length - 1]
+    .replace(/,$/, '')
+    .replace(/,(\s+--)/, '$1');
+
+  lines.push(selectExpressions.join('\n'));
+  lines.push(`FROM ${SOURCE_REF}`);
+
+  const filter = deepGet(spec, 'spec.dataSchema.transformSpec.filter');
+  if (filter) {
+    try {
+      lines.push(`WHERE ${convertFilter(filter)}`);
+    } catch {
+      lines.push(
+        `-- The spec contained a filter that could not be automatically converted: ${JSONBig.stringify(
+          filter,
+        )}`,
+      );
+    }
+  }
+
+  if (rollup) {
+    lines.push(`GROUP BY ${dimensionExpressions.map((_, i) => i + 1).join(', ')}`);
+  }
+
+  const segmentGranularity = deepGet(spec, 'spec.dataSchema.granularitySpec.segmentGranularity');
+  if (typeof segmentGranularity !== 'string') {
+    throw new Error(`spec.dataSchema.granularitySpec.segmentGranularity is not a string`);
+  }
+  lines.push(
+    `PARTITIONED BY ${
+      segmentGranularity.toLowerCase() === 'all' ? 'ALL TIME' : segmentGranularity.toUpperCase()
+    }`,
+  );
+
+  const partitionsSpec = deepGet(spec, 'spec.tuningConfig.partitionsSpec') || {};
+  const partitionDimensions =
+    partitionsSpec.partitionDimensions ||
+    (partitionsSpec.partitionDimension ? [partitionsSpec.partitionDimension] : undefined);
+  if (Array.isArray(partitionDimensions)) {
+    lines.push(
+      `CLUSTERED BY ${partitionDimensions.map(d => SqlRef.columnWithQuotes(d)).join(', ')}`,
+    );
+  }
+
+  return {
+    queryString: lines.join('\n'),
+    queryContext: context,
+  };
+}
+
+function convertQueryGranularity(
+  timeExpression: string,
+  queryGranularity: { type: string } | string | undefined,
+) {
+  if (!queryGranularity) return timeExpression;
+
+  const effectiveQueryGranularity =
+    typeof queryGranularity === 'string'
+      ? queryGranularity
+      : typeof queryGranularity.type === 'string'
+      ? queryGranularity.type
+      : undefined;
+
+  if (effectiveQueryGranularity) {
+    const queryGranularitySql = QUERY_GRANULARITY_MAP[effectiveQueryGranularity.toLowerCase()];
+
+    if (queryGranularitySql) {
+      return queryGranularitySql.replace('?', timeExpression);
+    }
+  }
+
+  throw new Error(`spec.dataSchema.granularitySpec.queryGranularity is not recognized`);
+}
+
+const QUERY_GRANULARITY_MAP: Record<string, string> = {
+  none: `?`,
+  second: `TIME_FLOOR(?, 'PT1S')`,
+  minute: `TIME_FLOOR(?, 'PT1M')`,
+  fifteen_minute: `TIME_FLOOR(?, 'PT15M')`,
+  thirty_minute: `TIME_FLOOR(?, 'PT30M')`,
+  hour: `TIME_FLOOR(?, 'PT1H')`,
+  day: `TIME_FLOOR(?, 'P1D')`,
+  week: `TIME_FLOOR(?, 'P7D')`,
+  month: `TIME_FLOOR(?, 'P1M')`,
+  quarter: `TIME_FLOOR(?, 'P3M')`,
+  year: `TIME_FLOOR(?, 'P1Y')`,
+};
+
+function metricSpecTypeToDataType(metricSpecType: string): string {
+  const m = /^(long|float|double|string)/.exec(String(metricSpecType));
+  if (m) return m[1];
+
+  switch (metricSpecType) {
+    case 'thetaSketch':
+    case 'HLLSketchBuild':
+    case 'HLLSketchMerge':
+    case 'quantilesDoublesSketch':
+    case 'momentSketch':
+    case 'fixedBucketsHistogram':
+    case 'hyperUnique':
+      return 'string';
+  }
+
+  return 'double';
+}
+
+function metricSpecToSelect(metricSpec: MetricSpec): string {
+  const name = metricSpec.name;
+  const expression = metricSpecToSqlExpression(metricSpec);
+  if (!name || !expression) {
+    return `-- could not convert metric: ${JSONBig.stringify(metricSpec)}`;
+  }
+
+  return `${expression} AS ${RefName.create(name, true)}`;
+}
+
+function metricSpecToSqlExpression(metricSpec: MetricSpec): string | undefined {
+  if (metricSpec.type === 'count') {
+    return `COUNT(*)`; // count is special as it does not have a fieldName
+  }
+
+  if (!metricSpec.fieldName) return;
+  const ref = SqlRef.columnWithQuotes(metricSpec.fieldName);
+
+  switch (metricSpec.type) {
+    case 'longSum':
+    case 'floatSum':
+    case 'doubleSum':
+      return `SUM(${ref})`;
+
+    case 'longMin':
+    case 'floatMin':
+    case 'doubleMin':
+      return `MIN(${ref})`;
+
+    case 'longMax':
+    case 'floatMax':
+    case 'doubleMax':
+      return `MAX(${ref})`;
+
+    case 'doubleFirst':
+    case 'floatFirst':
+    case 'longFirst':
+      return `EARLIEST(${ref})`;
+
+    case 'stringFirst':
+      return `EARLIEST(${ref}, ${SqlLiteral.create(metricSpec.maxStringBytes || 128)})`;
+
+    case 'doubleLast':
+    case 'floatLast':
+    case 'longLast':
+      return `LATEST(${ref})`;
+
+    case 'stringLast':
+      return `LATEST(${ref}, ${SqlLiteral.create(metricSpec.maxStringBytes || 128)})`;
+
+    case 'thetaSketch':
+      return `APPROX_COUNT_DISTINCT_DS_THETA(${ref}${extraArgs([metricSpec.size, 16384])})`;
+
+    case 'HLLSketchBuild':
+    case 'HLLSketchMerge':
+      return `APPROX_COUNT_DISTINCT_DS_HLL(${ref}${extraArgs(
+        [metricSpec.lgK, 12],
+        [metricSpec.tgtHllType, 'HLL_4'],
+      )})`;
+
+    case 'quantilesDoublesSketch':
+      // For consistency with the above this should be APPROX_QUANTILE_DS but that requires a post agg so it does not work quite right.
+      return `DS_QUANTILES_SKETCH(${ref}${extraArgs([metricSpec.k, 128])})`;
+
+    case 'hyperUnique':
+      return `APPROX_COUNT_DISTINCT_BUILTIN(${ref})`;
+
+    default:
+      // The following things are (knowingly) not supported:
+      // tDigestSketch, momentSketch, fixedBucketsHistogram
+      return;
+  }
+}
+
+function extraArgs(...thingAndDefaults: [any, any?][]): string {
+  while (
+    thingAndDefaults.length &&
+    typeof thingAndDefaults[thingAndDefaults.length - 1][0] === 'undefined'
+  ) {
+    thingAndDefaults.pop();
+  }
+
+  if (!thingAndDefaults.length) return '';
+  return ', ' + thingAndDefaults.map(([x, def]) => SqlLiteral.create(x ?? def)).join(', ');
+}
diff --git a/web-console/src/hooks/use-query-manager.ts b/web-console/src/hooks/use-query-manager.ts
index 68ebe99c8208..3704b188415f 100644
--- a/web-console/src/hooks/use-query-manager.ts
+++ b/web-console/src/hooks/use-query-manager.ts
@@ -20,7 +20,6 @@ import { useEffect, useState } from 'react';
 
 import { QueryManager, QueryManagerOptions, QueryState } from '../utils';
 
-import { useConstant } from './use-constant';
 import { usePermanentCallback } from './use-permanent-callback';
 
 export interface UseQueryManagerOptions<Q, R, I, E extends Error>
@@ -41,7 +40,7 @@ export function useQueryManager<Q, R, I = never, E extends Error = Error>(
 
   const [resultState, setResultState] = useState<QueryState<R, E, I>>(initState || QueryState.INIT);
 
-  const queryManager = useConstant(() => {
+  function makeQueryManager() {
     return new QueryManager<Q, R, I, E>({
       ...options,
       initState,
@@ -49,14 +48,28 @@ export function useQueryManager<Q, R, I = never, E extends Error = Error>(
       backgroundStatusCheck: backgroundStatusCheck ? concreteBackgroundStatusCheck : undefined,
       onStateChange: setResultState,
     });
-  });
+  }
+
+  const [queryManager, setQueryManager] = useState<QueryManager<Q, R, I, E>>(makeQueryManager);
 
   useEffect(() => {
+    // Initialize queryManager on mount if needed to ensure that useQueryManager
+    // will be compatible with future React versions that may mount/unmount/remount
+    // the same component multiple times while.
+    //
+    // See https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state
+    // and https://github.com/reactwg/react-18/discussions/18
+    let myQueryManager = queryManager;
+    if (queryManager.isTerminated()) {
+      myQueryManager = makeQueryManager();
+      setQueryManager(myQueryManager);
+    }
+
     if (typeof initQuery !== 'undefined') {
-      queryManager.runQuery(initQuery);
+      myQueryManager.runQuery(initQuery);
     }
     return () => {
-      queryManager.terminate();
+      myQueryManager.terminate();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
diff --git a/web-console/src/index.ts b/web-console/src/index.ts
new file mode 100644
index 000000000000..31c7c7202060
--- /dev/null
+++ b/web-console/src/index.ts
@@ -0,0 +1,27 @@
+/*
+ * 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 './bootstrap/react-table-defaults';
+export * from './components';
+export * from './console-application';
+export * from './dialogs';
+export * from './druid-models';
+export * from './hooks';
+export * from './singletons';
+export * from './utils';
+export * from './views';
diff --git a/web-console/src/links.ts b/web-console/src/links.ts
index 0055ae5edcb4..4e1c7259e90e 100644
--- a/web-console/src/links.ts
+++ b/web-console/src/links.ts
@@ -19,7 +19,7 @@
 import hasOwnProp from 'has-own-prop';
 
 // This is set to the latest available version and should be updated to the next version before release
-const DRUID_DOCS_VERSION = '0.23.0';
+const DRUID_DOCS_VERSION = 'latest';
 
 function fillVersion(str: string): string {
   return str.replace(/\{\{VERSION}}/g, DRUID_DOCS_VERSION);
diff --git a/web-console/src/react-table/react-table-base-styles.scss b/web-console/src/react-table/react-table-base-styles.scss
index 2b1d0d20324a..7fef36eee2d9 100644
--- a/web-console/src/react-table/react-table-base-styles.scss
+++ b/web-console/src/react-table/react-table-base-styles.scss
@@ -92,10 +92,6 @@ $border-color: rgba(0, 0, 0, 0.15);
       &.-cursor-pointer {
         cursor: pointer;
       }
-
-      &:last-child {
-        border-right: 0;
-      }
     }
 
     .rt-resizable-header {
@@ -150,9 +146,6 @@ $border-color: rgba(0, 0, 0, 0.15);
     }
     .rt-td {
       border-right: 1px solid $border-color;
-      &:last-child {
-        border-right: 0;
-      }
     }
     .rt-expandable {
       cursor: pointer;
diff --git a/web-console/src/react-table/react-table-extra.scss b/web-console/src/react-table/react-table-extra.scss
index 0b57b7967109..d87c25c84d8a 100644
--- a/web-console/src/react-table/react-table-extra.scss
+++ b/web-console/src/react-table/react-table-extra.scss
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import 'src/variables';
+@import '../variables';
 
 .ReactTable {
   .rt-tr {
diff --git a/web-console/src/react-table/react-table-pagination/react-table-pagination.tsx b/web-console/src/react-table/react-table-pagination/react-table-pagination.tsx
index df9b51b316b3..4c7fe477aa24 100644
--- a/web-console/src/react-table/react-table-pagination/react-table-pagination.tsx
+++ b/web-console/src/react-table/react-table-pagination/react-table-pagination.tsx
@@ -21,7 +21,7 @@ import { IconNames } from '@blueprintjs/icons';
 import { Popover2 } from '@blueprintjs/popover2';
 import React, { useState } from 'react';
 
-import { formatInteger, nonEmptyArray } from '../../utils';
+import { formatInteger, nonEmptyArray, tickIcon } from '../../utils';
 
 import { PageJumpDialog } from './page-jump-dialog/page-jump-dialog';
 
@@ -86,7 +86,7 @@ export const ReactTablePagination = React.memo(function ReactTablePagination(
         {pageSizeOptions.map((option, i) => (
           <MenuItem
             key={i}
-            icon={option === pageSize ? IconNames.TICK : IconNames.BLANK}
+            icon={tickIcon(option === pageSize)}
             text={String(option)}
             onClick={() => {
               if (option === pageSize) return;
@@ -99,9 +99,10 @@ export const ReactTablePagination = React.memo(function ReactTablePagination(
   }
 
   const start = page * pageSize + 1;
-  const end =
-    page * pageSize +
-    (nonEmptyArray(sortedData) ? Math.min(sortedData.length, pageSize) : pageSize);
+  let end = page * pageSize + pageSize;
+  if (nonEmptyArray(sortedData)) {
+    end = Math.min(end, sortedData.length);
+  }
 
   let pageInfo = 'Showing';
   if (end) {
diff --git a/web-console/src/singletons/ace-editor-state-cache.ts b/web-console/src/singletons/ace-editor-state-cache.ts
new file mode 100644
index 000000000000..667afbde849a
--- /dev/null
+++ b/web-console/src/singletons/ace-editor-state-cache.ts
@@ -0,0 +1,48 @@
+/*
+ * 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 { Ace } from 'ace-builds';
+
+interface EditorState {
+  undoManager: Ace.UndoManager;
+}
+
+export class AceEditorStateCache {
+  static states: Record<string, EditorState> = {};
+
+  static saveState(id: string, editor: Ace.Editor): void {
+    const session = editor.getSession();
+    const undoManager: any = session.getUndoManager();
+    AceEditorStateCache.states[id] = {
+      undoManager,
+    };
+  }
+
+  static applyState(id: string, editor: Ace.Editor): void {
+    const state = AceEditorStateCache.states[id];
+    if (!state) return;
+    const session = editor.getSession();
+    session.setUndoManager(state.undoManager);
+  }
+
+  static deleteStates(ids: string[]): void {
+    for (const id of ids) {
+      delete AceEditorStateCache.states[id];
+    }
+  }
+}
diff --git a/web-console/src/singletons/api.spec.ts b/web-console/src/singletons/api.spec.ts
index 4ff69f32157e..1dda6d8611ef 100644
--- a/web-console/src/singletons/api.spec.ts
+++ b/web-console/src/singletons/api.spec.ts
@@ -21,7 +21,7 @@ import { Api } from './api';
 describe('Api', () => {
   it('escapes stuff', () => {
     expect(Api.encodePath('wikipedia')).toEqual('wikipedia');
-    expect(Api.encodePath(`wi%ki?pe#dia&'[]`)).toEqual('wi%25ki%3Fpe%23dia%26%27%5B%5D');
+    expect(Api.encodePath(`wi%ki?pe#dia&'[;]`)).toEqual('wi%25ki%3Fpe%23dia%26%27%5B%3B%5D');
   });
 
   describe(`with BigInt`, () => {
diff --git a/web-console/src/singletons/api.ts b/web-console/src/singletons/api.ts
index 2a30ff12b20f..70e997a0148e 100644
--- a/web-console/src/singletons/api.ts
+++ b/web-console/src/singletons/api.ts
@@ -46,6 +46,10 @@ export class Api {
   }
 
   static encodePath(path: string): string {
-    return path.replace(/[?#%&'[\]\\]/g, c => '%' + c.charCodeAt(0).toString(16).toUpperCase());
+    return path.replace(/[?#%;&'[\]\\]/g, c => '%' + c.charCodeAt(0).toString(16).toUpperCase());
+  }
+
+  static isNetworkError(e: Error): boolean {
+    return e.message === 'Network Error' && !(e as any).response;
   }
 }
diff --git a/web-console/src/singletons/execution-state-cache.ts b/web-console/src/singletons/execution-state-cache.ts
new file mode 100644
index 000000000000..0011a53e5ac8
--- /dev/null
+++ b/web-console/src/singletons/execution-state-cache.ts
@@ -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 { Execution } from '../druid-models';
+import { DruidError, QueryState } from '../utils';
+
+export class ExecutionStateCache {
+  private static readonly cache: Record<string, QueryState<Execution, DruidError, Execution>> = {};
+
+  static storeState(id: string, report: QueryState<Execution, DruidError, Execution>): void {
+    ExecutionStateCache.cache[id] = report;
+  }
+
+  static getState(id: string): QueryState<Execution, DruidError, Execution> | undefined {
+    return ExecutionStateCache.cache[id];
+  }
+
+  static deleteState(id: string): void {
+    delete ExecutionStateCache.cache[id];
+  }
+
+  static deleteStates(ids: string[]): void {
+    for (const id of ids) {
+      delete ExecutionStateCache.cache[id];
+    }
+  }
+}
diff --git a/web-console/src/singletons/workbench-history.ts b/web-console/src/singletons/workbench-history.ts
new file mode 100644
index 000000000000..7c533f0647af
--- /dev/null
+++ b/web-console/src/singletons/workbench-history.ts
@@ -0,0 +1,73 @@
+/*
+ * 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 JSONBig from 'json-bigint-native';
+
+import { WorkbenchQuery } from '../druid-models';
+import { localStorageGetJson, LocalStorageKeys, localStorageSetJson } from '../utils';
+
+export interface WorkbenchQueryHistoryEntry {
+  readonly version: string;
+  readonly query: WorkbenchQuery;
+}
+
+export class WorkbenchHistory {
+  static MAX_ENTRIES = 10;
+
+  private static getHistoryVersion(): string {
+    return new Date().toISOString().split('.')[0].replace('T', ' ');
+  }
+
+  static getHistory(): WorkbenchQueryHistoryEntry[] {
+    const possibleQueryHistory = localStorageGetJson(LocalStorageKeys.WORKBENCH_HISTORY);
+    return Array.isArray(possibleQueryHistory)
+      ? possibleQueryHistory
+          .filter(h => h.query)
+          .map(h => ({
+            ...h,
+            query: new WorkbenchQuery(h.query),
+          }))
+      : [];
+  }
+
+  private static setHistory(history: WorkbenchQueryHistoryEntry[]): void {
+    localStorageSetJson(LocalStorageKeys.WORKBENCH_HISTORY, history);
+  }
+
+  static addQueryToHistory(query: WorkbenchQuery): void {
+    const queryHistory = WorkbenchHistory.getHistory();
+
+    // Do not add to history if already the same as the last element in query and context
+    if (
+      queryHistory.length &&
+      JSONBig.stringify(queryHistory[0].query) === JSONBig.stringify(query)
+    ) {
+      return;
+    }
+
+    WorkbenchHistory.setHistory(
+      [
+        {
+          version: WorkbenchHistory.getHistoryVersion(),
+          query,
+        } as WorkbenchQueryHistoryEntry,
+        ...queryHistory,
+      ].slice(0, WorkbenchHistory.MAX_ENTRIES),
+    );
+  }
+}
diff --git a/web-console/src/singletons/workbench-running-promises.ts b/web-console/src/singletons/workbench-running-promises.ts
new file mode 100644
index 000000000000..46592907de85
--- /dev/null
+++ b/web-console/src/singletons/workbench-running-promises.ts
@@ -0,0 +1,50 @@
+/*
+ * 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 { QueryResult } from 'druid-query-toolkit';
+
+export interface WorkbenchRunningPromise {
+  promise: Promise<QueryResult>;
+  sqlPrefixLines: number | undefined;
+}
+
+export class WorkbenchRunningPromises {
+  private static readonly promises: Record<string, WorkbenchRunningPromise> = {};
+
+  static isWorkbenchRunningPromise(x: any): x is WorkbenchRunningPromise {
+    return Boolean(x.promise);
+  }
+
+  static storePromise(id: string, promise: WorkbenchRunningPromise): void {
+    WorkbenchRunningPromises.promises[id] = promise;
+  }
+
+  static getPromise(id: string): WorkbenchRunningPromise | undefined {
+    return WorkbenchRunningPromises.promises[id];
+  }
+
+  static deletePromise(id: string): void {
+    delete WorkbenchRunningPromises.promises[id];
+  }
+
+  static deletePromises(ids: string[]): void {
+    for (const id of ids) {
+      delete WorkbenchRunningPromises.promises[id];
+    }
+  }
+}
diff --git a/web-console/src/utils/capabilities.ts b/web-console/src/utils/capabilities.ts
index 033b39842525..e5bb33825426 100644
--- a/web-console/src/utils/capabilities.ts
+++ b/web-console/src/utils/capabilities.ts
@@ -35,8 +35,11 @@ export type QueryType = 'none' | 'nativeOnly' | 'nativeAndSql';
 
 export interface CapabilitiesOptions {
   queryType: QueryType;
+  multiStageQuery: boolean;
   coordinator: boolean;
   overlord: boolean;
+
+  warnings?: string[];
 }
 
 export class Capabilities {
@@ -49,6 +52,7 @@ export class Capabilities {
   static NO_PROXY: Capabilities;
 
   private readonly queryType: QueryType;
+  private readonly multiStageQuery: boolean;
   private readonly coordinator: boolean;
   private readonly overlord: boolean;
 
@@ -123,6 +127,15 @@ export class Capabilities {
     return true;
   }
 
+  static async detectMultiStageQuery(): Promise<boolean> {
+    try {
+      const resp = await Api.instance.get(`/druid/v2/sql/task/enabled?capabilities`);
+      return Boolean(resp.data.enabled);
+    } catch {
+      return false;
+    }
+  }
+
   static async detectCapabilities(): Promise<Capabilities | undefined> {
     const capabilitiesOverride = localStorageGetJson(LocalStorageKeys.CAPABILITIES_OVERRIDE);
     if (capabilitiesOverride) return new Capabilities(capabilitiesOverride);
@@ -141,8 +154,11 @@ export class Capabilities {
       coordinator = overlord = await Capabilities.detectManagementProxy();
     }
 
+    const multiStageQuery = await Capabilities.detectMultiStageQuery();
+
     return new Capabilities({
       queryType,
+      multiStageQuery,
       coordinator,
       overlord,
     });
@@ -150,6 +166,7 @@ export class Capabilities {
 
   constructor(options: CapabilitiesOptions) {
     this.queryType = options.queryType;
+    this.multiStageQuery = options.multiStageQuery;
     this.coordinator = options.coordinator;
     this.overlord = options.overlord;
   }
@@ -204,6 +221,10 @@ export class Capabilities {
     return this.queryType === 'nativeAndSql';
   }
 
+  public hasMultiStageQuery(): boolean {
+    return this.multiStageQuery;
+  }
+
   public hasCoordinatorAccess(): boolean {
     return this.coordinator;
   }
@@ -222,31 +243,37 @@ export class Capabilities {
 }
 Capabilities.FULL = new Capabilities({
   queryType: 'nativeAndSql',
+  multiStageQuery: true,
   coordinator: true,
   overlord: true,
 });
 Capabilities.NO_SQL = new Capabilities({
   queryType: 'nativeOnly',
+  multiStageQuery: false,
   coordinator: true,
   overlord: true,
 });
 Capabilities.COORDINATOR_OVERLORD = new Capabilities({
   queryType: 'none',
+  multiStageQuery: false,
   coordinator: true,
   overlord: true,
 });
 Capabilities.COORDINATOR = new Capabilities({
   queryType: 'none',
+  multiStageQuery: false,
   coordinator: true,
   overlord: false,
 });
 Capabilities.OVERLORD = new Capabilities({
   queryType: 'none',
+  multiStageQuery: false,
   coordinator: false,
   overlord: true,
 });
 Capabilities.NO_PROXY = new Capabilities({
   queryType: 'nativeAndSql',
+  multiStageQuery: true,
   coordinator: false,
   overlord: false,
 });
diff --git a/web-console/src/utils/download-query-detail-archive.ts b/web-console/src/utils/download-query-detail-archive.ts
new file mode 100644
index 000000000000..cb4dcb818b63
--- /dev/null
+++ b/web-console/src/utils/download-query-detail-archive.ts
@@ -0,0 +1,61 @@
+/*
+ * 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 JSONBig from 'json-bigint-native';
+
+import { Api } from '../singletons';
+
+import { downloadFile } from './download';
+
+interface QueryDetailArchive {
+  id: string;
+  detailArchiveVersion: number;
+  status?: any;
+  reports?: any;
+  payload?: any;
+  serverStatus?: any;
+}
+
+export async function downloadQueryDetailArchive(id: string) {
+  const profile: QueryDetailArchive = {
+    id,
+    detailArchiveVersion: 2,
+  };
+
+  try {
+    profile.status = (
+      await Api.instance.get(`/druid/indexer/v1/task/${Api.encodePath(id)}/status`)
+    ).data;
+  } catch {}
+
+  try {
+    profile.reports = (
+      await Api.instance.get(`/druid/indexer/v1/task/${Api.encodePath(id)}/reports`)
+    ).data;
+  } catch {}
+
+  try {
+    profile.payload = (await Api.instance.get(`/druid/indexer/v1/task/${Api.encodePath(id)}`)).data;
+  } catch {}
+
+  try {
+    profile.serverStatus = (await Api.instance.get(`/status`)).data;
+  } catch {}
+
+  downloadFile(JSONBig.stringify(profile, undefined, 2), 'json', `query_detail_${id}.archive.json`);
+}
diff --git a/web-console/src/utils/download.spec.ts b/web-console/src/utils/download.spec.ts
new file mode 100644
index 000000000000..85d6669acc9c
--- /dev/null
+++ b/web-console/src/utils/download.spec.ts
@@ -0,0 +1,30 @@
+/*
+ * 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 { formatForFormat } from './download';
+
+describe('download', () => {
+  it('.formatForFormat', () => {
+    expect(formatForFormat(null, 'csv')).toEqual('"null"');
+    expect(formatForFormat('hello\nworld', 'csv')).toEqual('"hello world"');
+    expect(formatForFormat(123, 'csv')).toEqual('"123"');
+    expect(formatForFormat(new Date('2021-01-02T03:04:05.678Z'), 'csv')).toEqual(
+      '"2021-01-02T03:04:05.678Z"',
+    );
+  });
+});
diff --git a/web-console/src/utils/download.ts b/web-console/src/utils/download.ts
new file mode 100644
index 000000000000..ad5dbd27507a
--- /dev/null
+++ b/web-console/src/utils/download.ts
@@ -0,0 +1,92 @@
+/*
+ * 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 { QueryResult } from 'druid-query-toolkit';
+import FileSaver from 'file-saver';
+import * as JSONBig from 'json-bigint-native';
+
+import { stringifyValue } from './general';
+
+export function formatForFormat(s: null | string | number | Date, format: 'csv' | 'tsv'): string {
+  // stringify and remove line break
+  const str = stringifyValue(s).replace(/(?:\r\n|\r|\n)/g, ' ');
+
+  if (format === 'csv') {
+    // csv: single quote => double quote, handle ','
+    return `"${str.replace(/"/g, '""')}"`;
+  } else {
+    // tsv: single quote => double quote, \t => ''
+    return str.replace(/\t/g, '').replace(/"/g, '""');
+  }
+}
+
+export function downloadFile(text: string, type: string, filename: string): void {
+  let blobType;
+  switch (type) {
+    case 'json':
+      blobType = 'application/json';
+      break;
+    case 'tsv':
+      blobType = 'text/tab-separated-values';
+      break;
+    default:
+      // csv
+      blobType = `text/${type}`;
+      break;
+  }
+
+  const blob = new Blob([text], {
+    type: blobType,
+  });
+
+  FileSaver.saveAs(blob, filename);
+}
+
+export function downloadQueryResults(
+  queryResult: QueryResult,
+  filename: string,
+  format: string,
+): void {
+  let lines: string[] = [];
+  let separator = '';
+
+  if (format === 'csv' || format === 'tsv') {
+    separator = format === 'csv' ? ',' : '\t';
+    lines.push(
+      queryResult.header.map(column => formatForFormat(column.name, format)).join(separator),
+    );
+    lines = lines.concat(
+      queryResult.rows.map(r => r.map(cell => formatForFormat(cell, format)).join(separator)),
+    );
+  } else {
+    // json
+    lines = queryResult.rows.map(r => {
+      const outputObject: Record<string, any> = {};
+      for (let k = 0; k < r.length; k++) {
+        const newName = queryResult.header[k];
+        if (newName) {
+          outputObject[newName.name] = r[k];
+        }
+      }
+      return JSONBig.stringify(outputObject);
+    });
+  }
+
+  const lineBreak = '\n';
+  downloadFile(lines.join(lineBreak), format, filename);
+}
diff --git a/web-console/src/utils/druid-query.spec.ts b/web-console/src/utils/druid-query.spec.ts
index 1e9a50f4fcf3..ffdfeebedf0e 100644
--- a/web-console/src/utils/druid-query.spec.ts
+++ b/web-console/src/utils/druid-query.spec.ts
@@ -18,7 +18,7 @@
 
 import { sane } from 'druid-query-toolkit';
 
-import { DruidError, getDruidErrorMessage, parseHtmlError, trimSemicolon } from './druid-query';
+import { DruidError, getDruidErrorMessage, parseHtmlError } from './druid-query';
 
 describe('DruidQuery', () => {
   describe('DruidError.parsePosition', () => {
@@ -151,31 +151,16 @@ describe('DruidQuery', () => {
     });
 
     it('works for incorrectly quoted AS alias', () => {
-      const sql = sane`
-        SELECT
-          channel,
-          COUNT(*) AS 'Count'
-        FROM wikipedia
-        GROUP BY 1
-        ORDER BY 2 DESC
-      `;
-      const suggestion = DruidError.getSuggestion(
-        `Encountered "\\'Count\\'" at line 3, column 15...`,
+      const suggestion = DruidError.getSuggestion(`Encountered "AS \\'c\\'" at line 1, column 16.`);
+      expect(suggestion!.label).toEqual(`Replace 'c' with "c"`);
+      expect(suggestion!.fn(`SELECT channel AS 'c' FROM wikipedia`)).toEqual(
+        `SELECT channel AS "c" FROM wikipedia`,
       );
-      expect(suggestion!.label).toEqual(`Replace 'Count' with "Count"`);
-      expect(suggestion!.fn(sql)).toEqual(sane`
-        SELECT
-          channel,
-          COUNT(*) AS "Count"
-        FROM wikipedia
-        GROUP BY 1
-        ORDER BY 2 DESC
-      `);
     });
 
     it('removes comma (,) before FROM', () => {
       const suggestion = DruidError.getSuggestion(
-        `Encountered "FROM" at line 1, column 14. Was expecting one of: "ABS" ...`,
+        `Encountered ", FROM" at line 1, column 12. Was expecting one of: "ABS" ...`,
       );
       expect(suggestion!.label).toEqual(`Remove , before FROM`);
       expect(suggestion!.fn(`SELECT page, FROM wikipedia WHERE channel = '#ar.wikipedia'`)).toEqual(
@@ -197,7 +182,7 @@ describe('DruidQuery', () => {
 
     it('removes trailing semicolon (;)', () => {
       const suggestion = DruidError.getSuggestion(
-        `Encountered ";" at line 1, column 14. Was expecting one of: "ABS" ...`,
+        `Encountered ";" at line 1, column 59. Was expecting one of: "ABS" ...`,
       );
       expect(suggestion!.label).toEqual(`Remove trailing ;`);
       expect(suggestion!.fn(`SELECT page FROM wikipedia WHERE channel = '#ar.wikipedia';`)).toEqual(
@@ -222,12 +207,4 @@ describe('DruidQuery', () => {
       expect(getDruidErrorMessage({})).toMatchInlineSnapshot(`undefined`);
     });
   });
-
-  describe('.trimSemicolon', () => {
-    it('works', () => {
-      expect(trimSemicolon('SELECT * FROM tbl;')).toEqual('SELECT * FROM tbl');
-      expect(trimSemicolon('SELECT * FROM tbl;   ')).toEqual('SELECT * FROM tbl   ');
-      expect(trimSemicolon('SELECT * FROM tbl; --hello  ')).toEqual('SELECT * FROM tbl --hello  ');
-    });
-  });
 });
diff --git a/web-console/src/utils/druid-query.ts b/web-console/src/utils/druid-query.ts
index 118b04b47847..e63b7ff89ce4 100644
--- a/web-console/src/utils/druid-query.ts
+++ b/web-console/src/utils/druid-query.ts
@@ -22,17 +22,10 @@ import { SqlRef } from 'druid-query-toolkit';
 import { Api } from '../singletons';
 
 import { assemble } from './general';
-import { QueryContext } from './query-context';
 import { RowColumn } from './query-cursor';
 
 const CANCELED_MESSAGE = 'Query canceled by user.';
 
-export interface QueryWithContext {
-  queryString: string;
-  queryContext: QueryContext;
-  wrapQueryLimit: number | undefined;
-}
-
 export interface DruidErrorResponse {
   error?: string;
   errorMessage?: string;
@@ -125,6 +118,7 @@ export class DruidError extends Error {
 
   static getSuggestion(errorMessage: string): QuerySuggestion | undefined {
     // == is used instead of =
+    // ex: SELECT * FROM wikipedia WHERE channel == '#en.wikipedia'
     // ex: Encountered "= =" at line 3, column 15. Was expecting one of
     const matchEquals = /Encountered "= =" at line (\d+), column (\d+)./.exec(errorMessage);
     if (matchEquals) {
@@ -140,6 +134,8 @@ export class DruidError extends Error {
       };
     }
 
+    // Mangled quotes from copy/paste
+    // ex: SELECT * FROM wikipedia WHERE channel = ‘#en.wikipedia‛
     const matchLexical =
       /Lexical error at line (\d+), column (\d+).\s+Encountered: "\\u201\w"/.exec(errorMessage);
     if (matchLexical) {
@@ -155,7 +151,8 @@ export class DruidError extends Error {
       };
     }
 
-    // Incorrect quoting on table
+    // Incorrect quoting on table column
+    // ex: SELECT * FROM wikipedia WHERE channel = "#en.wikipedia"
     // ex: org.apache.calcite.runtime.CalciteContextException: From line 3, column 17 to line 3, column 31: Column '#ar.wikipedia' not found in any table
     const matchQuotes =
       /org.apache.calcite.runtime.CalciteContextException: From line (\d+), column (\d+) to line \d+, column \d+: Column '([^']+)' not found in any table/.exec(
@@ -178,7 +175,8 @@ export class DruidError extends Error {
     }
 
     // Single quotes on AS alias
-    const matchSingleQuotesAlias = /Encountered "\\'([\w-]+)\\'" at/i.exec(errorMessage);
+    // ex: SELECT channel AS 'c' FROM wikipedia
+    const matchSingleQuotesAlias = /Encountered "AS \\'([\w-]+)\\'" at/i.exec(errorMessage);
     if (matchSingleQuotesAlias) {
       const alias = matchSingleQuotesAlias[1];
       return {
@@ -191,22 +189,9 @@ export class DruidError extends Error {
       };
     }
 
-    // , before FROM
-    const matchCommaFrom = /Encountered "(FROM)" at/i.exec(errorMessage);
-    if (matchCommaFrom) {
-      const keyword = matchCommaFrom[1];
-      return {
-        label: `Remove , before ${keyword}`,
-        fn: str => {
-          const newQuery = str.replace(/,(\s+FROM)/gim, '$1');
-          if (newQuery === str) return;
-          return newQuery;
-        },
-      };
-    }
-
-    // , before GROUP, ORDER, or LIMIT
-    const matchComma = /Encountered ", (GROUP|ORDER|LIMIT)" at/i.exec(errorMessage);
+    // , before FROM, GROUP, ORDER, or LIMIT
+    // ex: SELECT channel, FROM wikipedia
+    const matchComma = /Encountered ", (FROM|GROUP|ORDER|LIMIT)" at/i.exec(errorMessage);
     if (matchComma) {
       const keyword = matchComma[1];
       return {
@@ -219,15 +204,19 @@ export class DruidError extends Error {
       };
     }
 
-    // ; at the end
-    const matchSemicolon = /Encountered ";" at/i.exec(errorMessage);
+    // ; at the end. https://bit.ly/1n1yfkJ
+    // ex: SELECT 1;
+    // ex: Encountered ";" at line 6, column 16.
+    const matchSemicolon = /Encountered ";" at line (\d+), column (\d+)./i.exec(errorMessage);
     if (matchSemicolon) {
+      const line = Number(matchSemicolon[1]);
+      const column = Number(matchSemicolon[2]);
       return {
         label: `Remove trailing ;`,
         fn: str => {
-          const newQuery = str.replace(/;+(\s*)$/m, '$1');
-          if (newQuery === str) return;
-          return newQuery;
+          const index = DruidError.positionToIndex(str, line, column);
+          if (str[index] !== ';') return;
+          return str.slice(0, index) + str.slice(index + 1);
         },
       };
     }
@@ -323,8 +312,3 @@ export function formatSignature(queryExplanation: QueryExplanation): string {
     .map(({ name, type }) => `${SqlRef.column(name)}::${type}`)
     .join(', ');
 }
-
-export function trimSemicolon(query: string): string {
-  // Trims out a trailing semicolon while preserving space (https://bit.ly/1n1yfkJ)
-  return query.replace(/;+((?:\s*--[^\n]*)?\s*)$/, '$1');
-}
diff --git a/web-console/src/utils/general.tsx b/web-console/src/utils/general.tsx
index b71ae28087c1..772e3c646f28 100644
--- a/web-console/src/utils/general.tsx
+++ b/web-console/src/utils/general.tsx
@@ -17,8 +17,8 @@
  */
 
 import { Intent } from '@blueprintjs/core';
+import { IconName, IconNames } from '@blueprintjs/icons';
 import copy from 'copy-to-clipboard';
-import FileSaver from 'file-saver';
 import hasOwnProp from 'has-own-prop';
 import * as JSONBig from 'json-bigint-native';
 import numeral from 'numeral';
@@ -46,6 +46,10 @@ export function wait(ms: number): Promise<void> {
   });
 }
 
+export function clamp(n: number, min: number, max: number): number {
+  return Math.min(Math.max(n, min), max);
+}
+
 export function addOrUpdate<T>(xs: readonly T[], x: T, keyFn: (x: T) => string | number): T[] {
   const keyX = keyFn(x);
   let added = false;
@@ -246,14 +250,6 @@ export function pluralIfNeeded(n: NumberLike, singular: string, plural?: string)
 
 // ----------------------------
 
-export function parseJson(json: string): any {
-  try {
-    return JSONBig.parse(json);
-  } catch (e) {
-    return undefined;
-  }
-}
-
 export function validJson(json: string): boolean {
   try {
     JSONBig.parse(json);
@@ -279,6 +275,15 @@ export function alphanumericCompare(a: string, b: string): number {
   return String(a).localeCompare(b, undefined, { numeric: true });
 }
 
+export function zeroDivide(a: number, b: number): number {
+  if (b === 0) return 0;
+  return a / b;
+}
+
+export function capitalizeFirst(str: string): string {
+  return str.slice(0, 1).toUpperCase() + str.slice(1).toLowerCase();
+}
+
 export function arrangeWithPrefixSuffix(
   things: readonly string[],
   prefix: readonly string[],
@@ -292,25 +297,6 @@ export function arrangeWithPrefixSuffix(
 
 // ----------------------------
 
-export function downloadFile(text: string, type: string, filename: string): void {
-  let blobType;
-  switch (type) {
-    case 'json':
-      blobType = 'application/json';
-      break;
-    case 'tsv':
-      blobType = 'text/tab-separated-values';
-      break;
-    default:
-      // csv
-      blobType = `text/${type}`;
-  }
-  const blob = new Blob([text], {
-    type: blobType,
-  });
-  FileSaver.saveAs(blob, filename);
-}
-
 export function copyAndAlert(copyString: string, alertMessage: string): void {
   copy(copyString, { format: 'text/plain' });
   AppToaster.show({
@@ -396,7 +382,7 @@ export function isInBackground(): boolean {
   return document.visibilityState === 'hidden';
 }
 
-export function twoLines(line1: string, line2: string) {
+export function twoLines(line1: string | JSX.Element, line2: string | JSX.Element) {
   return (
     <>
       {line1}
@@ -445,3 +431,15 @@ export function objectHash(obj: any): string {
 export function hasPopoverOpen(): boolean {
   return Boolean(document.querySelector('.bp4-portal .bp4-overlay .bp4-popover2'));
 }
+
+export function checkedCircleIcon(checked: boolean): IconName {
+  return checked ? IconNames.TICK_CIRCLE : IconNames.CIRCLE;
+}
+
+export function tickIcon(checked: boolean): IconName {
+  return checked ? IconNames.TICK : IconNames.BLANK;
+}
+
+export function generate8HexId(): string {
+  return (Math.random() * 1e10).toString(16).replace('.', '').substr(0, 8);
+}
diff --git a/web-console/src/utils/index.tsx b/web-console/src/utils/index.tsx
index 35cc766d5814..967a1144d21b 100644
--- a/web-console/src/utils/index.tsx
+++ b/web-console/src/utils/index.tsx
@@ -18,8 +18,9 @@
 
 export * from './capabilities';
 export * from './column-metadata';
-export * from './data-type-utils';
 export * from './date';
+export * from './download';
+export * from './download-query-detail-archive';
 export * from './druid-lookup';
 export * from './druid-query';
 export * from './formatter';
@@ -32,5 +33,8 @@ export * from './query-action';
 export * from './query-cursor';
 export * from './query-manager';
 export * from './query-state';
+export * from './sample-query';
 export * from './sanitizers';
+export * from './sql';
 export * from './table-helpers';
+export * from './types';
diff --git a/web-console/src/utils/local-storage-keys.tsx b/web-console/src/utils/local-storage-keys.tsx
index 88ad64fb8f78..dcc509388723 100644
--- a/web-console/src/utils/local-storage-keys.tsx
+++ b/web-console/src/utils/local-storage-keys.tsx
@@ -21,6 +21,8 @@ import * as JSONBig from 'json-bigint-native';
 export const LocalStorageKeys = {
   CAPABILITIES_OVERRIDE: 'capabilities-override' as const,
   INGESTION_SPEC: 'ingestion-spec' as const,
+  BATCH_INGESTION_SPEC: 'batch-ingestion-spec' as const,
+  STREAMING_INGESTION_SPEC: 'streaming-ingestion-spec' as const,
   DATASOURCE_TABLE_COLUMN_SELECTION: 'datasource-table-column-selection' as const,
   SEGMENT_TABLE_COLUMN_SELECTION: 'segment-table-column-selection' as const,
   SUPERVISOR_TABLE_COLUMN_SELECTION: 'supervisor-table-column-selection' as const,
@@ -39,6 +41,14 @@ export const LocalStorageKeys = {
   LOOKUPS_REFRESH_RATE: 'lookups-refresh-rate' as const,
   QUERY_HISTORY: 'query-history' as const,
   LIVE_QUERY_MODE: 'live-query-mode' as const,
+
+  WORKBENCH_QUERIES: 'workbench-queries' as const,
+  WORKBENCH_LAST_TAB: 'workbench-last-tab' as const,
+  WORKBENCH_PANE_SIZE: 'workbench-pane-size' as const,
+  WORKBENCH_HISTORY: 'workbench-history' as const,
+  WORKBENCH_TASK_PANEL: 'workbench-task-panel' as const,
+
+  SQL_DATA_LOADER_CONTENT: 'sql-data-loader-content' as const,
 };
 export type LocalStorageKeys = typeof LocalStorageKeys[keyof typeof LocalStorageKeys];
 
diff --git a/web-console/src/utils/query-context.tsx b/web-console/src/utils/query-context.tsx
deleted file mode 100644
index 4449c5ddbcac..000000000000
--- a/web-console/src/utils/query-context.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-/*
- * 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 { deepDelete, deepSet } from './object-change';
-
-export interface QueryContext {
-  useCache?: boolean | undefined;
-  populateCache?: boolean | undefined;
-  useApproximateCountDistinct?: boolean | undefined;
-  useApproximateTopN?: boolean | undefined;
-  [key: string]: any;
-}
-
-export function isEmptyContext(context: QueryContext): boolean {
-  return Object.keys(context).length === 0;
-}
-
-// -----------------------------
-
-export function getUseCache(context: QueryContext): boolean {
-  const { useCache } = context;
-  return typeof useCache === 'boolean' ? useCache : true;
-}
-
-export function setUseCache(context: QueryContext, useCache: boolean): QueryContext {
-  let newContext = context;
-  if (useCache) {
-    newContext = deepDelete(newContext, 'useCache');
-    newContext = deepDelete(newContext, 'populateCache');
-  } else {
-    newContext = deepSet(newContext, 'useCache', false);
-    newContext = deepSet(newContext, 'populateCache', false);
-  }
-  return newContext;
-}
-
-// -----------------------------
-
-export function getUseApproximateCountDistinct(context: QueryContext): boolean {
-  const { useApproximateCountDistinct } = context;
-  return typeof useApproximateCountDistinct === 'boolean' ? useApproximateCountDistinct : true;
-}
-
-export function setUseApproximateCountDistinct(
-  context: QueryContext,
-  useApproximateCountDistinct: boolean,
-): QueryContext {
-  if (useApproximateCountDistinct) {
-    return deepDelete(context, 'useApproximateCountDistinct');
-  } else {
-    return deepSet(context, 'useApproximateCountDistinct', false);
-  }
-}
-
-// -----------------------------
-
-export function getUseApproximateTopN(context: QueryContext): boolean {
-  const { useApproximateTopN } = context;
-  return typeof useApproximateTopN === 'boolean' ? useApproximateTopN : true;
-}
-
-export function setUseApproximateTopN(
-  context: QueryContext,
-  useApproximateTopN: boolean,
-): QueryContext {
-  if (useApproximateTopN) {
-    return deepDelete(context, 'useApproximateTopN');
-  } else {
-    return deepSet(context, 'useApproximateTopN', false);
-  }
-}
diff --git a/web-console/src/utils/query-manager.tsx b/web-console/src/utils/query-manager.tsx
index 9504e8af9d67..71fc0a49a5d8 100644
--- a/web-console/src/utils/query-manager.tsx
+++ b/web-console/src/utils/query-manager.tsx
@@ -40,6 +40,7 @@ export interface QueryManagerOptions<Q, R, I = never, E extends Error = Error> {
   debounceLoading?: number;
   backgroundStatusCheckInitDelay?: number;
   backgroundStatusCheckDelay?: number;
+  swallowBackgroundError?: (e: Error) => boolean;
 }
 
 export class QueryManager<Q, R, I = never, E extends Error = Error> {
@@ -60,6 +61,7 @@ export class QueryManager<Q, R, I = never, E extends Error = Error> {
   private readonly onStateChange?: (queryResolve: QueryState<R, E, I>) => void;
   private readonly backgroundStatusCheckInitDelay: number;
   private readonly backgroundStatusCheckDelay: number;
+  private readonly swallowBackgroundError?: (e: Error) => boolean;
 
   private terminated = false;
   private nextQuery: Q | undefined;
@@ -78,6 +80,7 @@ export class QueryManager<Q, R, I = never, E extends Error = Error> {
     this.onStateChange = options.onStateChange;
     this.backgroundStatusCheckInitDelay = options.backgroundStatusCheckInitDelay || 500;
     this.backgroundStatusCheckDelay = options.backgroundStatusCheckDelay || 1000;
+    this.swallowBackgroundError = options.swallowBackgroundError;
     if (options.debounceIdle !== 0) {
       this.runWhenIdle = debounce(this.run, options.debounceIdle || 100);
     } else {
@@ -130,6 +133,7 @@ export class QueryManager<Q, R, I = never, E extends Error = Error> {
     }
 
     let backgroundChecks = 0;
+    let intermediateError: Error | undefined;
     while (data instanceof IntermediateQueryState) {
       try {
         if (!this.backgroundStatusCheck) {
@@ -143,6 +147,7 @@ export class QueryManager<Q, R, I = never, E extends Error = Error> {
           new QueryState<R, E, I>({
             loading: true,
             intermediate: data.state,
+            intermediateError,
             lastData: this.state.getSomeData(),
           }),
         );
@@ -159,16 +164,21 @@ export class QueryManager<Q, R, I = never, E extends Error = Error> {
         }
 
         data = await this.backgroundStatusCheck(data.state, query, cancelToken);
+        intermediateError = undefined; // Clear the intermediate error if there was one
       } catch (e) {
         if (this.currentQueryId !== myQueryId) return;
-        this.currentRunCancelFn = undefined;
-        this.setState(
-          new QueryState<R, E>({
-            error: axios.isCancel(e) ? new Error(`canceled.`) : e, // remap cancellation into a simple error to hide away the axios implementation specifics
-            lastData: this.state.getSomeData(),
-          }),
-        );
-        return;
+        if (this.swallowBackgroundError?.(e)) {
+          intermediateError = e;
+        } else {
+          this.currentRunCancelFn = undefined;
+          this.setState(
+            new QueryState<R, E>({
+              error: axios.isCancel(e) ? new Error(`canceled.`) : e, // remap cancellation into a simple error to hide away the axios implementation specifics
+              lastData: this.state.getSomeData(),
+            }),
+          );
+          return;
+        }
       }
 
       backgroundChecks++;
@@ -245,4 +255,8 @@ export class QueryManager<Q, R, I = never, E extends Error = Error> {
       this.currentRunCancelFn(QueryManager.TERMINATION_MESSAGE);
     }
   }
+
+  public isTerminated(): boolean {
+    return this.terminated;
+  }
 }
diff --git a/web-console/src/utils/query-state.ts b/web-console/src/utils/query-state.ts
index fd40305d860e..b4387bb91116 100644
--- a/web-console/src/utils/query-state.ts
+++ b/web-console/src/utils/query-state.ts
@@ -21,6 +21,7 @@ export type QueryStateState = 'init' | 'loading' | 'data' | 'error';
 export interface QueryStateOptions<T, E extends Error = Error, I = never> {
   loading?: boolean;
   intermediate?: I;
+  intermediateError?: Error;
   error?: E;
   data?: T;
   lastData?: T;
@@ -32,6 +33,7 @@ export class QueryState<T, E extends Error = Error, I = never> {
 
   public state: QueryStateState = 'init';
   public intermediate?: I;
+  public intermediateError?: Error;
   public error?: E;
   public data?: T;
   public lastData?: T;
@@ -52,6 +54,7 @@ export class QueryState<T, E extends Error = Error, I = never> {
       } else if (opts.loading) {
         this.state = 'loading';
         this.intermediate = opts.intermediate;
+        this.intermediateError = opts.intermediateError;
       } else {
         this.state = 'init';
       }
diff --git a/web-console/src/utils/sample-query.spec.tsx b/web-console/src/utils/sample-query.spec.tsx
new file mode 100644
index 000000000000..23ab099f1564
--- /dev/null
+++ b/web-console/src/utils/sample-query.spec.tsx
@@ -0,0 +1,60 @@
+/*
+ * 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 { QueryResult, sane } from 'druid-query-toolkit';
+
+import { sampleDataToQuery } from './sample-query';
+
+describe('sample-query', () => {
+  it('works', () => {
+    const result = QueryResult.fromRawResult(
+      [
+        ['__time', 'host', 'service', 'msg'],
+        ['LONG', 'STRING', 'STRING', 'COMPLEX<json>'],
+        ['TIMESTAMP', 'VARCHAR', 'VARCHAR', 'OTHER'],
+        [
+          '2022-02-01T00:00:00.000Z',
+          'brokerA.internal',
+          'broker',
+          '{"type":"sys","swap/free":1223334,"swap/max":3223334}',
+        ],
+        [
+          '2022-02-01T00:00:00.000Z',
+          'brokerA.internal',
+          'broker',
+          '{"type":"query","time":1223,"bytes":2434234}',
+        ],
+      ],
+      false,
+      true,
+      true,
+      true,
+    );
+
+    expect(sampleDataToQuery(result).toString()).toEqual(sane`
+      SELECT
+        CAST(c0 AS TIMESTAMP) AS "__time",
+        CAST(c1 AS VARCHAR) AS "host",
+        CAST(c2 AS VARCHAR) AS "service",
+        PARSE_JSON(c3) AS "msg"
+      FROM (VALUES
+      ('2022-02-01T00:00:00.000Z', 'brokerA.internal', 'broker', '"{\\"type\\":\\"sys\\",\\"swap/free\\":1223334,\\"swap/max\\":3223334}"'),
+      ('2022-02-01T00:00:00.000Z', 'brokerA.internal', 'broker', '"{\\"type\\":\\"query\\",\\"time\\":1223,\\"bytes\\":2434234}"')) AS t ("c0", "c1", "c2", "c3")
+    `);
+  });
+});
diff --git a/web-console/src/utils/sample-query.tsx b/web-console/src/utils/sample-query.tsx
new file mode 100644
index 000000000000..01f4f2d43d3c
--- /dev/null
+++ b/web-console/src/utils/sample-query.tsx
@@ -0,0 +1,81 @@
+/*
+ * 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 {
+  Column,
+  LiteralValue,
+  QueryResult,
+  RefName,
+  SqlAlias,
+  SqlColumnList,
+  SqlExpression,
+  SqlFunction,
+  SqlLiteral,
+  SqlQuery,
+  SqlRecord,
+  SqlRef,
+  SqlValues,
+} from 'druid-query-toolkit';
+
+import { oneOf } from './general';
+
+const SAMPLE_ARRAY_SEPARATOR = '-3432-d401-';
+
+function nullForColumn(column: Column): LiteralValue {
+  return oneOf(column.sqlType, 'BIGINT', 'DOUBLE', 'FLOAT') ? 0 : '';
+}
+
+export function sampleDataToQuery(sample: QueryResult): SqlQuery {
+  const { header, rows } = sample;
+  const arrayIndexes: Record<number, boolean> = {};
+  return SqlQuery.create(
+    new SqlAlias({
+      expression: SqlValues.create(
+        rows.map(row =>
+          SqlRecord.create(
+            row.map((r, i) => {
+              if (header[i].nativeType === 'COMPLEX<json>') {
+                return SqlLiteral.create(JSON.stringify(r));
+              } else if (Array.isArray(r)) {
+                arrayIndexes[i] = true;
+                return SqlLiteral.create(r.join(SAMPLE_ARRAY_SEPARATOR));
+              } else {
+                // Avoid actually using NULL literals as they create havc in the VALUES type system and throw errors.
+                return SqlLiteral.create(r == null ? nullForColumn(header[i]) : r);
+              }
+            }),
+          ),
+        ),
+      ),
+      alias: RefName.alias('t'),
+      columns: SqlColumnList.create(header.map((_, i) => RefName.create(`c${i}`, true))),
+    }),
+  ).changeSelectExpressions(
+    header.map((h, i) => {
+      let ex: SqlExpression = SqlRef.column(`c${i}`);
+      if (h.nativeType === 'COMPLEX<json>') {
+        ex = SqlFunction.simple('PARSE_JSON', [ex]);
+      } else if (arrayIndexes[i]) {
+        ex = SqlFunction.simple('STRING_TO_MV', [ex, SqlLiteral.create(SAMPLE_ARRAY_SEPARATOR)]);
+      } else if (h.sqlType) {
+        ex = ex.cast(h.sqlType);
+      }
+      return ex.as(h.name, true);
+    }),
+  );
+}
diff --git a/web-console/src/druid-models/test-fixtures.ts b/web-console/src/utils/sampler.mock.ts
similarity index 98%
rename from web-console/src/druid-models/test-fixtures.ts
rename to web-console/src/utils/sampler.mock.ts
index ffd174186562..284b4a4e88cb 100644
--- a/web-console/src/druid-models/test-fixtures.ts
+++ b/web-console/src/utils/sampler.mock.ts
@@ -17,7 +17,7 @@
  */
 
 // Just to make sure we are in a test context. This line will cause trouble if this file is ever compiled into the main build
-import { SampleHeaderAndRows } from '../utils/sampler';
+import { SampleHeaderAndRows } from './sampler';
 
 expect(1).toEqual(1);
 
diff --git a/web-console/src/utils/sql.ts b/web-console/src/utils/sql.ts
new file mode 100644
index 000000000000..a98a0c268697
--- /dev/null
+++ b/web-console/src/utils/sql.ts
@@ -0,0 +1,60 @@
+/*
+ * 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 { SqlExpression, SqlFunction, SqlLiteral, SqlRef, SqlStar } from 'druid-query-toolkit';
+
+export function timeFormatToSql(timeFormat: string): SqlExpression | undefined {
+  switch (timeFormat) {
+    case 'auto':
+    case 'iso':
+      return SqlExpression.parse('TIME_PARSE(?)');
+
+    case 'posix':
+      return SqlExpression.parse(`MILLIS_TO_TIMESTAMP((?) * 1000)`);
+
+    case 'millis':
+      return SqlExpression.parse(`MILLIS_TO_TIMESTAMP(?)`);
+
+    case 'micro':
+      return SqlExpression.parse(`MILLIS_TO_TIMESTAMP((?) / 1000)`);
+
+    case 'nano':
+      return SqlExpression.parse(`MILLIS_TO_TIMESTAMP((?) / 1000000)`);
+
+    default:
+      return SqlExpression.parse(`TIME_PARSE(?, '${timeFormat}')`);
+  }
+}
+
+export function convertToGroupByExpression(ex: SqlExpression): SqlExpression | undefined {
+  const underlyingExpression = ex.getUnderlyingExpression();
+  if (!(underlyingExpression instanceof SqlFunction)) return;
+
+  const args = underlyingExpression.args?.values;
+  if (!args) return;
+
+  const interestingArgs = args.filter(
+    arg => !(arg instanceof SqlLiteral || arg instanceof SqlStar),
+  );
+  if (interestingArgs.length !== 1) return;
+
+  const newEx = interestingArgs[0];
+  if (newEx instanceof SqlRef) return newEx;
+
+  return newEx.as((ex.getOutputName() || 'grouped').replace(/^[a-z]+_/i, ''));
+}
diff --git a/web-console/src/utils/data-type-utils.ts b/web-console/src/utils/types.ts
similarity index 70%
rename from web-console/src/utils/data-type-utils.ts
rename to web-console/src/utils/types.ts
index d9b387873657..a762fc080349 100644
--- a/web-console/src/utils/data-type-utils.ts
+++ b/web-console/src/utils/types.ts
@@ -18,6 +18,35 @@
 
 import { IconName } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import { Column } from 'druid-query-toolkit';
+
+function getEffectiveColumnType(column: Column): string | undefined {
+  if (column.sqlType === 'TIMESTAMP') return column.sqlType;
+  return column.nativeType || column.sqlType;
+}
+
+export function sqlTypeFromDruid(druidType: string): string {
+  druidType = druidType.toLowerCase();
+  switch (druidType) {
+    case 'string':
+      return 'VARCHAR';
+
+    case 'long':
+      return 'BIGINT';
+
+    case 'float':
+    case 'double':
+      return druidType.toUpperCase();
+
+    default:
+      return 'COMPLEX';
+  }
+}
+
+export function columnToIcon(column: Column): IconName | undefined {
+  const effectiveType = getEffectiveColumnType(column);
+  return effectiveType ? dataTypeToIcon(effectiveType) : undefined;
+}
 
 export function dataTypeToIcon(dataType: string): IconName {
   const typeUpper = dataType.toUpperCase();
@@ -56,7 +85,12 @@ export function dataTypeToIcon(dataType: string): IconName {
   }
 }
 
-export function dataTypeToColumnWidth(dataType: string | undefined): number {
+export function columnToWidth(column: Column): number {
+  const effectiveType = getEffectiveColumnType(column);
+  return effectiveType ? dataTypeToWidth(effectiveType) : 180;
+}
+
+export function dataTypeToWidth(dataType: string | undefined): number {
   const typeUpper = String(dataType).toUpperCase();
 
   switch (typeUpper) {
diff --git a/web-console/src/views/datasources-view/__snapshots__/datasources-view.spec.tsx.snap b/web-console/src/views/datasources-view/__snapshots__/datasources-view.spec.tsx.snap
index 9b5240377e5a..c48713eff201 100644
--- a/web-console/src/views/datasources-view/__snapshots__/datasources-view.spec.tsx.snap
+++ b/web-console/src/views/datasources-view/__snapshots__/datasources-view.spec.tsx.snap
@@ -18,12 +18,13 @@ exports[`DatasourcesView matches snapshot 1`] = `
           disabled={false}
           icon="compressed"
           intent="danger"
+          label="(debug)"
           multiline={false}
           onClick={[Function]}
           popoverProps={Object {}}
           selected={false}
           shouldDismissPopover={true}
-          text="Force compaction run (debug)"
+          text="Force compaction run"
         />
       }
     >
@@ -207,7 +208,7 @@ exports[`DatasourcesView matches snapshot 1`] = `
           "className": "padded",
           "filterable": false,
           "show": true,
-          "width": 220,
+          "width": 230,
         },
         Object {
           "Cell": [Function],
@@ -247,7 +248,7 @@ exports[`DatasourcesView matches snapshot 1`] = `
           "className": "padded",
           "filterable": false,
           "show": true,
-          "width": 100,
+          "width": 110,
         },
         Object {
           "Cell": [Function],
diff --git a/web-console/src/views/datasources-view/datasources-view.tsx b/web-console/src/views/datasources-view/datasources-view.tsx
index e91b0934cc9d..b368fccf9e33 100644
--- a/web-console/src/views/datasources-view/datasources-view.tsx
+++ b/web-console/src/views/datasources-view/datasources-view.tsx
@@ -42,6 +42,7 @@ import {
   CompactionConfig,
   CompactionStatus,
   formatCompactionConfigAndStatus,
+  QueryWithContext,
   zeroCompactionStatus,
 } from '../../druid-models';
 import { STANDARD_TABLE_PAGE_SIZE, STANDARD_TABLE_PAGE_SIZE_OPTIONS } from '../../react-table';
@@ -233,9 +234,9 @@ interface CompactionDialogOpenOn {
 }
 
 export interface DatasourcesViewProps {
-  goToQuery: (initSql: string) => void;
-  goToTask: (datasource?: string, openDialog?: string) => void;
-  goToSegments: (datasource: string, onlyUnavailable?: boolean) => void;
+  goToQuery(queryWithContext: QueryWithContext): void;
+  goToTask(datasource?: string, openDialog?: string): void;
+  goToSegments(datasource: string, onlyUnavailable?: boolean): void;
   capabilities: Capabilities;
   initDatasource?: string;
 }
@@ -274,6 +275,7 @@ export class DatasourcesView extends React.PureComponent<
   DatasourcesViewState
 > {
   static UNUSED_COLOR = '#0a1500';
+  static EMPTY_COLOR = '#868686';
   static FULLY_AVAILABLE_COLOR = '#57d500';
   static PARTIALLY_AVAILABLE_COLOR = '#ffbf00';
 
@@ -673,7 +675,8 @@ ORDER BY 1`;
         altExtra={
           <MenuItem
             icon={IconNames.COMPRESSED}
-            text="Force compaction run (debug)"
+            text="Force compaction run"
+            label="(debug)"
             intent={Intent.DANGER}
             onClick={() => {
               this.setState({ showForceCompact: true });
@@ -688,7 +691,7 @@ ORDER BY 1`;
             disabled={!lastDatasourcesQuery}
             onClick={() => {
               if (!lastDatasourcesQuery) return;
-              goToQuery(lastDatasourcesQuery);
+              goToQuery({ queryString: lastDatasourcesQuery });
             }}
           />
         )}
@@ -827,7 +830,8 @@ ORDER BY 1`;
       goToActions.push({
         icon: IconNames.APPLICATION,
         title: 'Query with SQL',
-        onAction: () => goToQuery(SqlQuery.create(SqlTableRef.create(datasource)).toString()),
+        onAction: () =>
+          goToQuery({ queryString: SqlQuery.create(SqlTableRef.create(datasource)).toString() }),
       });
     }
 
@@ -1069,6 +1073,13 @@ ORDER BY 1`;
               );
               if (typeof num_segments_to_load !== 'number' || typeof num_segments !== 'number') {
                 return '-';
+              } else if (num_segments === 0) {
+                return (
+                  <span>
+                    <span style={{ color: DatasourcesView.EMPTY_COLOR }}>&#x25cf;&nbsp;</span>
+                    Empty
+                  </span>
+                );
               } else if (num_segments_to_load === 0) {
                 return (
                   <span>
@@ -1127,7 +1138,7 @@ ORDER BY 1`;
             show: capabilities.hasSql() && visibleColumns.shown('Segment rows'),
             accessor: 'avg_segment_rows',
             filterable: false,
-            width: 220,
+            width: 230,
             className: 'padded',
             Cell: ({ value, original }) => {
               const { min_segment_rows, max_segment_rows } = original as Datasource;
@@ -1238,7 +1249,7 @@ ORDER BY 1`;
             show: capabilities.hasSql() && visibleColumns.shown('Total rows'),
             accessor: 'total_rows',
             filterable: false,
-            width: 100,
+            width: 110,
             className: 'padded',
             Cell: ({ value }) => {
               if (isNumberLikeNaN(value)) return '-';
@@ -1506,7 +1517,7 @@ ORDER BY 1`;
         {this.renderDatasourcesTable()}
         {datasourceTableActionDialogId && (
           <DatasourceTableActionDialog
-            datasourceId={datasourceTableActionDialogId}
+            datasource={datasourceTableActionDialogId}
             actions={actions}
             onClose={() => this.setState({ datasourceTableActionDialogId: undefined })}
           />
diff --git a/web-console/src/views/home-view/__snapshots__/home-view.spec.tsx.snap b/web-console/src/views/home-view/__snapshots__/home-view.spec.tsx.snap
index 36c5a3e7e4b3..78c458fbb4b8 100644
--- a/web-console/src/views/home-view/__snapshots__/home-view.spec.tsx.snap
+++ b/web-console/src/views/home-view/__snapshots__/home-view.spec.tsx.snap
@@ -9,6 +9,7 @@ exports[`HomeView matches snapshot (coordinator) 1`] = `
     capabilities={
       Capabilities {
         "coordinator": true,
+        "multiStageQuery": false,
         "overlord": false,
         "queryType": "none",
       }
@@ -18,6 +19,7 @@ exports[`HomeView matches snapshot (coordinator) 1`] = `
     capabilities={
       Capabilities {
         "coordinator": true,
+        "multiStageQuery": false,
         "overlord": false,
         "queryType": "none",
       }
@@ -27,6 +29,7 @@ exports[`HomeView matches snapshot (coordinator) 1`] = `
     capabilities={
       Capabilities {
         "coordinator": true,
+        "multiStageQuery": false,
         "overlord": false,
         "queryType": "none",
       }
@@ -36,6 +39,7 @@ exports[`HomeView matches snapshot (coordinator) 1`] = `
     capabilities={
       Capabilities {
         "coordinator": true,
+        "multiStageQuery": false,
         "overlord": false,
         "queryType": "none",
       }
@@ -53,6 +57,7 @@ exports[`HomeView matches snapshot (full) 1`] = `
     capabilities={
       Capabilities {
         "coordinator": true,
+        "multiStageQuery": true,
         "overlord": true,
         "queryType": "nativeAndSql",
       }
@@ -62,6 +67,7 @@ exports[`HomeView matches snapshot (full) 1`] = `
     capabilities={
       Capabilities {
         "coordinator": true,
+        "multiStageQuery": true,
         "overlord": true,
         "queryType": "nativeAndSql",
       }
@@ -71,6 +77,7 @@ exports[`HomeView matches snapshot (full) 1`] = `
     capabilities={
       Capabilities {
         "coordinator": true,
+        "multiStageQuery": true,
         "overlord": true,
         "queryType": "nativeAndSql",
       }
@@ -80,6 +87,7 @@ exports[`HomeView matches snapshot (full) 1`] = `
     capabilities={
       Capabilities {
         "coordinator": true,
+        "multiStageQuery": true,
         "overlord": true,
         "queryType": "nativeAndSql",
       }
@@ -89,6 +97,7 @@ exports[`HomeView matches snapshot (full) 1`] = `
     capabilities={
       Capabilities {
         "coordinator": true,
+        "multiStageQuery": true,
         "overlord": true,
         "queryType": "nativeAndSql",
       }
@@ -98,6 +107,7 @@ exports[`HomeView matches snapshot (full) 1`] = `
     capabilities={
       Capabilities {
         "coordinator": true,
+        "multiStageQuery": true,
         "overlord": true,
         "queryType": "nativeAndSql",
       }
@@ -115,6 +125,7 @@ exports[`HomeView matches snapshot (overlord) 1`] = `
     capabilities={
       Capabilities {
         "coordinator": false,
+        "multiStageQuery": false,
         "overlord": true,
         "queryType": "none",
       }
@@ -124,6 +135,7 @@ exports[`HomeView matches snapshot (overlord) 1`] = `
     capabilities={
       Capabilities {
         "coordinator": false,
+        "multiStageQuery": false,
         "overlord": true,
         "queryType": "none",
       }
diff --git a/web-console/src/views/home-view/services-card/services-card.tsx b/web-console/src/views/home-view/services-card/services-card.tsx
index 18430cdcba9d..846aebfc1e28 100644
--- a/web-console/src/views/home-view/services-card/services-card.tsx
+++ b/web-console/src/views/home-view/services-card/services-card.tsx
@@ -19,7 +19,7 @@
 import { IconNames } from '@blueprintjs/icons';
 import React from 'react';
 
-import { PluralPairIfNeeded } from '../../../components/plural-pair-if-needed/plural-pair-if-needed';
+import { PluralPairIfNeeded } from '../../../components';
 import { useQueryManager } from '../../../hooks';
 import { Api } from '../../../singletons';
 import { Capabilities, lookupBy, queryDruidSql } from '../../../utils';
diff --git a/web-console/src/views/home-view/tasks-card/tasks-card.tsx b/web-console/src/views/home-view/tasks-card/tasks-card.tsx
index be385b65b188..7e4f67882972 100644
--- a/web-console/src/views/home-view/tasks-card/tasks-card.tsx
+++ b/web-console/src/views/home-view/tasks-card/tasks-card.tsx
@@ -19,7 +19,7 @@
 import { IconNames } from '@blueprintjs/icons';
 import React from 'react';
 
-import { PluralPairIfNeeded } from '../../../components/plural-pair-if-needed/plural-pair-if-needed';
+import { PluralPairIfNeeded } from '../../../components';
 import { useQueryManager } from '../../../hooks';
 import { Api } from '../../../singletons';
 import { Capabilities, lookupBy, pluralIfNeeded, queryDruidSql } from '../../../utils';
diff --git a/web-console/src/views/index.ts b/web-console/src/views/index.ts
index 8037ac29e911..7af1b655428e 100644
--- a/web-console/src/views/index.ts
+++ b/web-console/src/views/index.ts
@@ -24,3 +24,5 @@ export * from './lookups-view/lookups-view';
 export * from './query-view/query-view';
 export * from './segments-view/segments-view';
 export * from './services-view/services-view';
+export * from './sql-data-loader-view/sql-data-loader-view';
+export * from './workbench-view/workbench-view';
diff --git a/web-console/src/views/ingestion-view/__snapshots__/ingestion-view.spec.tsx.snap b/web-console/src/views/ingestion-view/__snapshots__/ingestion-view.spec.tsx.snap
index 2f14d5912fce..028af2d9e1e2 100644
--- a/web-console/src/views/ingestion-view/__snapshots__/ingestion-view.spec.tsx.snap
+++ b/web-console/src/views/ingestion-view/__snapshots__/ingestion-view.spec.tsx.snap
@@ -359,10 +359,10 @@ exports[`IngestionView matches snapshot 1`] = `
               "Group ID",
               "Type",
               "Datasource",
-              "Location",
-              "Created time",
               "Status",
+              "Created time",
               "Duration",
+              "Location",
               "Actions",
             ]
           }
@@ -458,12 +458,13 @@ exports[`IngestionView matches snapshot 1`] = `
               "width": 200,
             },
             Object {
-              "Aggregated": [Function],
               "Cell": [Function],
-              "Header": "Location",
-              "accessor": "location",
+              "Header": "Status",
+              "accessor": [Function],
+              "id": "status",
               "show": true,
-              "width": 200,
+              "sortMethod": [Function],
+              "width": 110,
             },
             Object {
               "Aggregated": [Function],
@@ -473,17 +474,6 @@ exports[`IngestionView matches snapshot 1`] = `
               "show": true,
               "width": 190,
             },
-            Object {
-              "Cell": [Function],
-              "Header": "Status",
-              "accessor": [Function],
-              "className": "padded",
-              "filterMethod": [Function],
-              "id": "status",
-              "show": true,
-              "sortMethod": [Function],
-              "width": 110,
-            },
             Object {
               "Aggregated": [Function],
               "Cell": [Function],
@@ -494,6 +484,14 @@ exports[`IngestionView matches snapshot 1`] = `
               "show": true,
               "width": 80,
             },
+            Object {
+              "Aggregated": [Function],
+              "Cell": [Function],
+              "Header": "Location",
+              "accessor": "location",
+              "show": true,
+              "width": 200,
+            },
             Object {
               "Aggregated": [Function],
               "Cell": [Function],
diff --git a/web-console/src/views/ingestion-view/ingestion-view.spec.tsx b/web-console/src/views/ingestion-view/ingestion-view.spec.tsx
index cd9dbb1874fe..45161dbdbbfd 100644
--- a/web-console/src/views/ingestion-view/ingestion-view.spec.tsx
+++ b/web-console/src/views/ingestion-view/ingestion-view.spec.tsx
@@ -28,11 +28,13 @@ describe('IngestionView', () => {
     const taskView = shallow(
       <IngestionView
         openDialog="test"
+        taskId={undefined}
         taskGroupId="test"
         datasourceId="datasource"
         goToDatasource={() => {}}
         goToQuery={() => {}}
-        goToLoadData={() => {}}
+        goToStreamingDataLoader={() => {}}
+        goToClassicBatchDataLoader={() => {}}
         capabilities={Capabilities.FULL}
       />,
     );
diff --git a/web-console/src/views/ingestion-view/ingestion-view.tsx b/web-console/src/views/ingestion-view/ingestion-view.tsx
index 5d01991173b5..06064a8ec490 100644
--- a/web-console/src/views/ingestion-view/ingestion-view.tsx
+++ b/web-console/src/views/ingestion-view/ingestion-view.tsx
@@ -40,8 +40,8 @@ import {
   SupervisorTableActionDialog,
   TaskTableActionDialog,
 } from '../../dialogs';
+import { QueryWithContext } from '../../druid-models';
 import {
-  booleanCustomTableFilter,
   SMALL_TABLE_PAGE_SIZE,
   SMALL_TABLE_PAGE_SIZE_OPTIONS,
   syncFilterClauseById,
@@ -73,18 +73,21 @@ const supervisorTableColumns: string[] = [
   'Status',
   ACTION_COLUMN_LABEL,
 ];
+
 const taskTableColumns: string[] = [
   'Task ID',
   'Group ID',
   'Type',
   'Datasource',
-  'Location',
-  'Created time',
   'Status',
+  'Created time',
   'Duration',
+  'Location',
   ACTION_COLUMN_LABEL,
 ];
 
+const CANCELED_ERROR_MSG = 'Shutdown request from user';
+
 interface SupervisorQueryResultRow {
   supervisor_id: string;
   type: string;
@@ -104,16 +107,17 @@ interface TaskQueryResultRow {
   error_msg: string | null;
   location: string | null;
   status: string;
-  rank: number;
 }
 
 export interface IngestionViewProps {
+  taskId: string | undefined;
   taskGroupId: string | undefined;
   datasourceId: string | undefined;
   openDialog: string | undefined;
-  goToDatasource: (datasource: string) => void;
-  goToQuery: (initSql: string) => void;
-  goToLoadData: (supervisorId?: string, taskId?: string) => void;
+  goToDatasource(datasource: string): void;
+  goToQuery(queryWithContext: QueryWithContext): void;
+  goToStreamingDataLoader(supervisorId?: string): void;
+  goToClassicBatchDataLoader(taskId?: string): void;
   capabilities: Capabilities;
 }
 
@@ -163,6 +167,8 @@ function statusToColor(status: string): string {
       return '#57d500';
     case 'FAILED':
       return '#d5100a';
+    case 'CANCELED':
+      return '#858585';
     default:
       return '#0a1500';
   }
@@ -203,22 +209,29 @@ export class IngestionView extends React.PureComponent<IngestionViewProps, Inges
 FROM sys.supervisors
 ORDER BY "supervisor_id"`;
 
-  static TASK_SQL = `SELECT
+  static TASK_SQL = `WITH tasks AS (SELECT
   "task_id", "group_id", "type", "datasource", "created_time", "location", "duration", "error_msg",
-  CASE WHEN "status" = 'RUNNING' THEN "runner_status" ELSE "status" END AS "status",
+  CASE WHEN "error_msg" = '${CANCELED_ERROR_MSG}' THEN 'CANCELED' WHEN "status" = 'RUNNING' THEN "runner_status" ELSE "status" END AS "status"
+  FROM sys.tasks
+)
+SELECT "task_id", "group_id", "type", "datasource", "created_time", "location", "duration", "error_msg", "status"
+FROM tasks
+ORDER BY
   (
-    CASE WHEN "status" = 'RUNNING' THEN
-     (CASE "runner_status" WHEN 'RUNNING' THEN 4 WHEN 'PENDING' THEN 3 ELSE 2 END)
+    CASE "status"
+    WHEN 'RUNNING' THEN 4
+    WHEN 'PENDING' THEN 3
+    WHEN 'WAITING' THEN 2
     ELSE 1
     END
-  ) AS "rank"
-FROM sys.tasks
-ORDER BY "rank" DESC, "created_time" DESC`;
+  ) DESC,
+  "created_time" DESC`;
 
   constructor(props: IngestionViewProps, context: any) {
     super(props, context);
 
     const taskFilter: Filter[] = [];
+    if (props.taskId) taskFilter.push({ id: 'task_id', value: `=${props.taskId}` });
     if (props.taskGroupId) taskFilter.push({ id: 'group_id', value: `=${props.taskGroupId}` });
     if (props.datasourceId) taskFilter.push({ id: 'datasource', value: `=${props.datasourceId}` });
 
@@ -306,7 +319,7 @@ ORDER BY "rank" DESC, "created_time" DESC`;
   }
 
   static parseTasks = (data: any[]): TaskQueryResultRow[] => {
-    return data.map((d: any) => {
+    return data.map(d => {
       return {
         task_id: d.id,
         group_id: d.groupId,
@@ -317,9 +330,6 @@ ORDER BY "rank" DESC, "created_time" DESC`;
         error_msg: d.errorMsg,
         location: d.location.host ? `${d.location.host}:${d.location.port}` : null,
         status: d.statusCode === 'RUNNING' ? d.runnerStatusCode : d.statusCode,
-        rank: IngestionView.statusRanking[
-          d.statusCode === 'RUNNING' ? d.runnerStatusCode : d.statusCode
-        ],
       };
     });
   };
@@ -388,7 +398,7 @@ ORDER BY "rank" DESC, "created_time" DESC`;
     supervisorSuspended: boolean,
     type: string,
   ): BasicAction[] {
-    const { goToDatasource, goToLoadData } = this.props;
+    const { goToDatasource, goToStreamingDataLoader } = this.props;
 
     const actions: BasicAction[] = [];
     if (oneOf(type, 'kafka', 'kinesis')) {
@@ -401,7 +411,7 @@ ORDER BY "rank" DESC, "created_time" DESC`;
         {
           icon: IconNames.CLOUD_UPLOAD,
           title: 'Open in data loader',
-          onAction: () => goToLoadData(id),
+          onAction: () => goToStreamingDataLoader(id),
         },
       );
     }
@@ -688,7 +698,7 @@ ORDER BY "rank" DESC, "created_time" DESC`;
     status: string,
     type: string,
   ): BasicAction[] {
-    const { goToDatasource, goToLoadData } = this.props;
+    const { goToDatasource, goToClassicBatchDataLoader } = this.props;
 
     const actions: BasicAction[] = [];
     if (datasource && status === 'SUCCESS') {
@@ -702,7 +712,7 @@ ORDER BY "rank" DESC, "created_time" DESC`;
       actions.push({
         icon: IconNames.CLOUD_UPLOAD,
         title: 'Open in data loader',
-        onAction: () => goToLoadData(undefined, id),
+        onAction: () => goToClassicBatchDataLoader(id),
       });
     }
     if (oneOf(status, 'RUNNING', 'WAITING', 'PENDING')) {
@@ -837,27 +847,10 @@ ORDER BY "rank" DESC, "created_time" DESC`;
             Cell: this.renderTaskFilterableCell('datasource'),
             show: hiddenTaskColumns.shown('Datasource'),
           },
-          {
-            Header: 'Location',
-            accessor: 'location',
-            width: 200,
-            Cell: this.renderTaskFilterableCell('location'),
-            Aggregated: () => '',
-            show: hiddenTaskColumns.shown('Location'),
-          },
-          {
-            Header: 'Created time',
-            accessor: 'created_time',
-            width: 190,
-            Cell: this.renderTaskFilterableCell('created_time'),
-            Aggregated: () => '',
-            show: hiddenTaskColumns.shown('Created time'),
-          },
           {
             Header: 'Status',
             id: 'status',
             width: 110,
-            className: 'padded',
             accessor: row => ({
               status: row.status,
               created_time: row.created_time,
@@ -868,15 +861,25 @@ ORDER BY "rank" DESC, "created_time" DESC`;
               const { status } = row.original;
               const errorMsg = row.original.error_msg;
               return (
-                <span>
-                  <span style={{ color: statusToColor(status) }}>&#x25cf;&nbsp;</span>
-                  {status}
-                  {errorMsg && (
-                    <a onClick={() => this.setState({ alertErrorMsg: errorMsg })} title={errorMsg}>
-                      &nbsp;?
-                    </a>
-                  )}
-                </span>
+                <TableFilterableCell
+                  field="status"
+                  value={status}
+                  filters={taskFilter}
+                  onFiltersChange={filters => this.setState({ taskFilter: filters })}
+                >
+                  <span>
+                    <span style={{ color: statusToColor(status) }}>&#x25cf;&nbsp;</span>
+                    {status}
+                    {errorMsg && errorMsg !== CANCELED_ERROR_MSG && (
+                      <a
+                        onClick={() => this.setState({ alertErrorMsg: errorMsg })}
+                        title={errorMsg}
+                      >
+                        &nbsp;?
+                      </a>
+                    )}
+                  </span>
+                </TableFilterableCell>
               );
             },
             sortMethod: (d1, d2) => {
@@ -898,21 +901,43 @@ ORDER BY "rank" DESC, "created_time" DESC`;
                   return 0;
               }
             },
-            filterMethod: (filter: Filter, row: any) => {
-              return booleanCustomTableFilter(filter, row.status.status);
-            },
             show: hiddenTaskColumns.shown('Status'),
           },
+          {
+            Header: 'Created time',
+            accessor: 'created_time',
+            width: 190,
+            Cell: this.renderTaskFilterableCell('created_time'),
+            Aggregated: () => '',
+            show: hiddenTaskColumns.shown('Created time'),
+          },
           {
             Header: 'Duration',
             accessor: 'duration',
             width: 80,
             filterable: false,
             className: 'padded',
-            Cell: row => (row.value > 0 ? formatDuration(row.value) : ''),
+            Cell({ value, original }) {
+              if (value > 0) {
+                return formatDuration(value);
+              }
+              if (original.created_time) {
+                // Compute running duration from the created time if it exists
+                return formatDuration(Date.now() - Date.parse(original.created_time));
+              }
+              return '';
+            },
             Aggregated: () => '',
             show: hiddenTaskColumns.shown('Duration'),
           },
+          {
+            Header: 'Location',
+            accessor: 'location',
+            width: 200,
+            Cell: this.renderTaskFilterableCell('location'),
+            Aggregated: () => '',
+            show: hiddenTaskColumns.shown('Location'),
+          },
           {
             Header: ACTION_COLUMN_LABEL,
             id: ACTION_COLUMN_ID,
@@ -950,7 +975,7 @@ ORDER BY "rank" DESC, "created_time" DESC`;
             <MenuItem
               icon={IconNames.APPLICATION}
               text="View SQL query for table"
-              onClick={() => goToQuery(IngestionView.SUPERVISOR_SQL)}
+              onClick={() => goToQuery({ queryString: IngestionView.SUPERVISOR_SQL })}
             />
           )}
           <MenuItem
@@ -1069,7 +1094,7 @@ ORDER BY "rank" DESC, "created_time" DESC`;
           <MenuItem
             icon={IconNames.APPLICATION}
             text="View SQL query for table"
-            onClick={() => goToQuery(IngestionView.TASK_SQL)}
+            onClick={() => goToQuery({ queryString: IngestionView.TASK_SQL })}
           />
         )}
         <MenuItem
diff --git a/web-console/src/views/load-data-view/__snapshots__/load-data-view.spec.tsx.snap b/web-console/src/views/load-data-view/__snapshots__/load-data-view.spec.tsx.snap
index 46856e84eebb..f6289c9d57f1 100644
--- a/web-console/src/views/load-data-view/__snapshots__/load-data-view.spec.tsx.snap
+++ b/web-console/src/views/load-data-view/__snapshots__/load-data-view.spec.tsx.snap
@@ -1,166 +1,358 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`LoadDataView matches snapshot 1`] = `
+exports[`LoadDataView matches snapshot batch 1`] = `
 <div
   className="load-data-view app-view welcome"
 >
   <div
-    className="bp4-tabs step-nav"
+    className="step-nav"
   >
     <div
-      className="step-section"
-      key="Connect and parse raw data"
+      className="step-nav-inner"
     >
       <div
-        className="step-nav-l1"
+        className="step-section"
+        key="Connect and parse raw data"
       >
-        Connect and parse raw data
+        <div
+          className="step-nav-l1"
+        >
+          Connect and parse raw data
+        </div>
+        <Blueprint4.ButtonGroup
+          className="step-nav-l2"
+        >
+          <Blueprint4.Button
+            active={true}
+            className="welcome"
+            disabled={false}
+            icon={false}
+            key="welcome"
+            onClick={[Function]}
+            text="Start"
+          />
+          <Blueprint4.Button
+            active={false}
+            className="connect"
+            disabled={true}
+            icon={false}
+            key="connect"
+            onClick={[Function]}
+            text="Connect"
+          />
+          <Blueprint4.Button
+            active={false}
+            className="parser"
+            disabled={true}
+            icon={false}
+            key="parser"
+            onClick={[Function]}
+            text="Parse data"
+          />
+        </Blueprint4.ButtonGroup>
       </div>
-      <Blueprint4.ButtonGroup
-        className="step-nav-l2"
+      <div
+        className="step-section"
+        key="Transform data and configure schema"
       >
-        <Blueprint4.Button
-          active={true}
-          className="welcome"
-          disabled={false}
-          icon={false}
-          key="welcome"
-          onClick={[Function]}
-          text="Start"
-        />
-        <Blueprint4.Button
-          active={false}
-          className="connect"
-          disabled={true}
-          icon={false}
-          key="connect"
-          onClick={[Function]}
-          text="Connect"
-        />
-        <Blueprint4.Button
-          active={false}
-          className="parser"
-          disabled={true}
-          icon={false}
-          key="parser"
-          onClick={[Function]}
-          text="Parse data"
-        />
-      </Blueprint4.ButtonGroup>
-    </div>
-    <div
-      className="step-section"
-      key="Transform data and configure schema"
-    >
+        <div
+          className="step-nav-l1"
+        >
+          Transform data and configure schema
+        </div>
+        <Blueprint4.ButtonGroup
+          className="step-nav-l2"
+        >
+          <Blueprint4.Button
+            active={false}
+            className="timestamp"
+            disabled={true}
+            icon={false}
+            key="timestamp"
+            onClick={[Function]}
+            text="Parse time"
+          />
+          <Blueprint4.Button
+            active={false}
+            className="transform"
+            disabled={true}
+            icon={false}
+            key="transform"
+            onClick={[Function]}
+            text="Transform"
+          />
+          <Blueprint4.Button
+            active={false}
+            className="filter"
+            disabled={true}
+            icon={false}
+            key="filter"
+            onClick={[Function]}
+            text="Filter"
+          />
+          <Blueprint4.Button
+            active={false}
+            className="schema"
+            disabled={true}
+            icon={false}
+            key="schema"
+            onClick={[Function]}
+            text="Configure schema"
+          />
+        </Blueprint4.ButtonGroup>
+      </div>
       <div
-        className="step-nav-l1"
+        className="step-section"
+        key="Tune parameters"
       >
-        Transform data and configure schema
+        <div
+          className="step-nav-l1"
+        >
+          Tune parameters
+        </div>
+        <Blueprint4.ButtonGroup
+          className="step-nav-l2"
+        >
+          <Blueprint4.Button
+            active={false}
+            className="partition"
+            disabled={true}
+            icon={false}
+            key="partition"
+            onClick={[Function]}
+            text="Partition"
+          />
+          <Blueprint4.Button
+            active={false}
+            className="tuning"
+            disabled={true}
+            icon={false}
+            key="tuning"
+            onClick={[Function]}
+            text="Tune"
+          />
+          <Blueprint4.Button
+            active={false}
+            className="publish"
+            disabled={true}
+            icon={false}
+            key="publish"
+            onClick={[Function]}
+            text="Publish"
+          />
+        </Blueprint4.ButtonGroup>
       </div>
-      <Blueprint4.ButtonGroup
-        className="step-nav-l2"
+      <div
+        className="step-section"
+        key="Verify and submit"
       >
-        <Blueprint4.Button
-          active={false}
-          className="timestamp"
-          disabled={true}
-          icon={false}
-          key="timestamp"
-          onClick={[Function]}
-          text="Parse time"
-        />
-        <Blueprint4.Button
-          active={false}
-          className="transform"
-          disabled={true}
-          icon={false}
-          key="transform"
-          onClick={[Function]}
-          text="Transform"
-        />
-        <Blueprint4.Button
-          active={false}
-          className="filter"
-          disabled={true}
-          icon={false}
-          key="filter"
-          onClick={[Function]}
-          text="Filter"
-        />
-        <Blueprint4.Button
-          active={false}
-          className="schema"
-          disabled={true}
-          icon={false}
-          key="schema"
-          onClick={[Function]}
-          text="Configure schema"
-        />
-      </Blueprint4.ButtonGroup>
+        <div
+          className="step-nav-l1"
+        >
+          Verify and submit
+        </div>
+        <Blueprint4.ButtonGroup
+          className="step-nav-l2"
+        >
+          <Blueprint4.Button
+            active={false}
+            className="spec"
+            disabled={false}
+            icon="manually-entered-data"
+            key="spec"
+            onClick={[Function]}
+            text="Edit spec"
+          />
+        </Blueprint4.ButtonGroup>
+      </div>
     </div>
+  </div>
+  <div
+    className="main"
+  >
+    <div
+      className="ingestion-cards"
+    />
+  </div>
+  <div
+    className="control"
+  >
+    <Blueprint4.FormGroup>
+      <Blueprint4.Callout>
+        <p>
+          Please specify where your raw data is located.
+        </p>
+      </Blueprint4.Callout>
+    </Blueprint4.FormGroup>
+  </div>
+</div>
+`;
+
+exports[`LoadDataView matches snapshot streaming 1`] = `
+<div
+  className="load-data-view app-view welcome"
+>
+  <div
+    className="step-nav"
+  >
     <div
-      className="step-section"
-      key="Tune parameters"
+      className="step-nav-inner"
     >
       <div
-        className="step-nav-l1"
+        className="step-section"
+        key="Connect and parse raw data"
       >
-        Tune parameters
+        <div
+          className="step-nav-l1"
+        >
+          Connect and parse raw data
+        </div>
+        <Blueprint4.ButtonGroup
+          className="step-nav-l2"
+        >
+          <Blueprint4.Button
+            active={true}
+            className="welcome"
+            disabled={false}
+            icon={false}
+            key="welcome"
+            onClick={[Function]}
+            text="Start"
+          />
+          <Blueprint4.Button
+            active={false}
+            className="connect"
+            disabled={true}
+            icon={false}
+            key="connect"
+            onClick={[Function]}
+            text="Connect"
+          />
+          <Blueprint4.Button
+            active={false}
+            className="parser"
+            disabled={true}
+            icon={false}
+            key="parser"
+            onClick={[Function]}
+            text="Parse data"
+          />
+        </Blueprint4.ButtonGroup>
       </div>
-      <Blueprint4.ButtonGroup
-        className="step-nav-l2"
+      <div
+        className="step-section"
+        key="Transform data and configure schema"
       >
-        <Blueprint4.Button
-          active={false}
-          className="partition"
-          disabled={true}
-          icon={false}
-          key="partition"
-          onClick={[Function]}
-          text="Partition"
-        />
-        <Blueprint4.Button
-          active={false}
-          className="tuning"
-          disabled={true}
-          icon={false}
-          key="tuning"
-          onClick={[Function]}
-          text="Tune"
-        />
-        <Blueprint4.Button
-          active={false}
-          className="publish"
-          disabled={true}
-          icon={false}
-          key="publish"
-          onClick={[Function]}
-          text="Publish"
-        />
-      </Blueprint4.ButtonGroup>
-    </div>
-    <div
-      className="step-section"
-      key="Verify and submit"
-    >
+        <div
+          className="step-nav-l1"
+        >
+          Transform data and configure schema
+        </div>
+        <Blueprint4.ButtonGroup
+          className="step-nav-l2"
+        >
+          <Blueprint4.Button
+            active={false}
+            className="timestamp"
+            disabled={true}
+            icon={false}
+            key="timestamp"
+            onClick={[Function]}
+            text="Parse time"
+          />
+          <Blueprint4.Button
+            active={false}
+            className="transform"
+            disabled={true}
+            icon={false}
+            key="transform"
+            onClick={[Function]}
+            text="Transform"
+          />
+          <Blueprint4.Button
+            active={false}
+            className="filter"
+            disabled={true}
+            icon={false}
+            key="filter"
+            onClick={[Function]}
+            text="Filter"
+          />
+          <Blueprint4.Button
+            active={false}
+            className="schema"
+            disabled={true}
+            icon={false}
+            key="schema"
+            onClick={[Function]}
+            text="Configure schema"
+          />
+        </Blueprint4.ButtonGroup>
+      </div>
       <div
-        className="step-nav-l1"
+        className="step-section"
+        key="Tune parameters"
       >
-        Verify and submit
+        <div
+          className="step-nav-l1"
+        >
+          Tune parameters
+        </div>
+        <Blueprint4.ButtonGroup
+          className="step-nav-l2"
+        >
+          <Blueprint4.Button
+            active={false}
+            className="partition"
+            disabled={true}
+            icon={false}
+            key="partition"
+            onClick={[Function]}
+            text="Partition"
+          />
+          <Blueprint4.Button
+            active={false}
+            className="tuning"
+            disabled={true}
+            icon={false}
+            key="tuning"
+            onClick={[Function]}
+            text="Tune"
+          />
+          <Blueprint4.Button
+            active={false}
+            className="publish"
+            disabled={true}
+            icon={false}
+            key="publish"
+            onClick={[Function]}
+            text="Publish"
+          />
+        </Blueprint4.ButtonGroup>
       </div>
-      <Blueprint4.ButtonGroup
-        className="step-nav-l2"
+      <div
+        className="step-section"
+        key="Verify and submit"
       >
-        <Blueprint4.Button
-          active={false}
-          className="spec"
-          disabled={false}
-          icon="manually-entered-data"
-          key="spec"
-          onClick={[Function]}
-          text="Edit spec"
-        />
-      </Blueprint4.ButtonGroup>
+        <div
+          className="step-nav-l1"
+        >
+          Verify and submit
+        </div>
+        <Blueprint4.ButtonGroup
+          className="step-nav-l2"
+        >
+          <Blueprint4.Button
+            active={false}
+            className="spec"
+            disabled={false}
+            icon="manually-entered-data"
+            key="spec"
+            onClick={[Function]}
+            text="Edit spec"
+          />
+        </Blueprint4.ButtonGroup>
+      </div>
     </div>
   </div>
   <div
@@ -176,7 +368,7 @@ exports[`LoadDataView matches snapshot 1`] = `
     <Blueprint4.FormGroup>
       <Blueprint4.Callout>
         <p>
-          Please specify where your raw data is located
+          Please specify where your raw data is located.
         </p>
       </Blueprint4.Callout>
     </Blueprint4.FormGroup>
diff --git a/web-console/src/views/load-data-view/info-messages.tsx b/web-console/src/views/load-data-view/info-messages.tsx
index 3377989c1266..7d7235bc3d36 100644
--- a/web-console/src/views/load-data-view/info-messages.tsx
+++ b/web-console/src/views/load-data-view/info-messages.tsx
@@ -19,12 +19,10 @@
 import { Callout, Code, FormGroup } from '@blueprintjs/core';
 import React from 'react';
 
-import { ExternalLink } from '../../components';
+import { ExternalLink, LearnMore } from '../../components';
 import { DimensionMode, getIngestionDocLink, IngestionSpec } from '../../druid-models';
 import { getLink } from '../../links';
 
-import { LearnMore } from './learn-more/learn-more';
-
 export interface ConnectMessageProps {
   inlineMode: boolean;
   spec: Partial<IngestionSpec>;
diff --git a/web-console/src/views/load-data-view/load-data-view.scss b/web-console/src/views/load-data-view/load-data-view.scss
index 53bc7f050077..cec24de2bf3f 100644
--- a/web-console/src/views/load-data-view/load-data-view.scss
+++ b/web-console/src/views/load-data-view/load-data-view.scss
@@ -48,14 +48,17 @@ $actual-icon-height: 400px;
 
     .spec-card {
       display: inline-block;
-      width: 480px;
-      height: 100px;
+      vertical-align: top;
+      position: relative;
+      width: 440px;
+      height: 120px;
       margin: 10px;
       text-align: left;
 
       .spec-card-icon {
-        vertical-align: top;
-        margin-top: 6px;
+        position: absolute;
+        top: 26px;
+        left: 20px;
 
         svg {
           width: 20px;
@@ -67,9 +70,7 @@ $actual-icon-height: 400px;
         font-size: 16px;
         font-weight: 600;
         line-height: 32px;
-        display: inline-block;
-        vertical-align: top;
-        padding-left: 16px;
+        padding-left: 36px;
 
         .spec-card-caption {
           font-size: 13px;
@@ -91,23 +92,13 @@ $actual-icon-height: 400px;
         @include sunk-panel;
         display: grid;
         gap: $thin-padding;
-        grid-template-columns: 1fr 1fr 1fr 1fr;
+        grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
+        grid-template-rows: repeat(auto-fill, 150px);
         padding: 10px;
-
-        @media (max-width: 1200px) {
-          grid-template-columns: 1fr 1fr 1fr;
-        }
-
-        @media (max-width: 900px) {
-          grid-template-columns: 1fr 1fr;
-        }
-
-        @media (max-width: 600px) {
-          grid-template-columns: 1fr;
-        }
+        height: 100%;
       }
 
-      .#{$bp-ns}-card {
+      .ingestion-card {
         position: relative;
         display: inline-block;
         vertical-align: top;
@@ -166,24 +157,32 @@ $actual-icon-height: 400px;
 
   .step-nav {
     grid-area: navi;
-    white-space: nowrap;
-    overflow: auto;
-    padding: 5px 5px 0 5px;
+    overflow: hidden;
+    position: relative;
 
-    .step-section {
-      display: inline-block;
-      vertical-align: top;
-      margin-right: $thin-padding;
-    }
+    .step-nav-inner {
+      position: absolute;
+      width: 100%;
+      height: 80px;
+      overflow: auto;
+      white-space: nowrap;
+      padding: 5px 5px 0 5px;
 
-    .step-nav-l1 {
-      height: 24px;
-      font-weight: 600;
-      color: #eeeeee;
-    }
+      .step-section {
+        display: inline-block;
+        vertical-align: top;
+        margin-right: $thin-padding;
+      }
 
-    .step-nav-l2 {
-      height: 30px;
+      .step-nav-l1 {
+        height: 24px;
+        font-weight: 600;
+        color: #eeeeee;
+      }
+
+      .step-nav-l2 {
+        height: 30px;
+      }
     }
   }
 
diff --git a/web-console/src/views/load-data-view/load-data-view.spec.tsx b/web-console/src/views/load-data-view/load-data-view.spec.tsx
index 43b7164c26dd..ad6e48440bde 100644
--- a/web-console/src/views/load-data-view/load-data-view.spec.tsx
+++ b/web-console/src/views/load-data-view/load-data-view.spec.tsx
@@ -22,8 +22,13 @@ import React from 'react';
 import { LoadDataView } from './load-data-view';
 
 describe('LoadDataView', () => {
-  it('matches snapshot', () => {
-    const loadDataView = shallow(<LoadDataView goToIngestion={() => {}} />);
+  it('matches snapshot streaming', () => {
+    const loadDataView = shallow(<LoadDataView mode="streaming" goToIngestion={() => {}} />);
+    expect(loadDataView).toMatchSnapshot();
+  });
+
+  it('matches snapshot batch', () => {
+    const loadDataView = shallow(<LoadDataView mode="batch" goToIngestion={() => {}} />);
     expect(loadDataView).toMatchSnapshot();
   });
 });
diff --git a/web-console/src/views/load-data-view/load-data-view.tsx b/web-console/src/views/load-data-view/load-data-view.tsx
index ac262796f80f..bf74ba10d4ff 100644
--- a/web-console/src/views/load-data-view/load-data-view.tsx
+++ b/web-console/src/views/load-data-view/load-data-view.tsx
@@ -23,17 +23,17 @@ import {
   ButtonGroup,
   Callout,
   Card,
-  Classes,
   Code,
   FormGroup,
   H5,
-  HTMLSelect,
   Icon,
   IconName,
   InputGroup,
   Intent,
   Menu,
   MenuItem,
+  Radio,
+  RadioGroup,
   Switch,
   TextArea,
 } from '@blueprintjs/core';
@@ -49,11 +49,11 @@ import {
   CenterMessage,
   ClearableInput,
   ExternalLink,
+  FormGroupWithInfo,
   JsonInput,
   Loader,
   PopoverText,
 } from '../../components';
-import { FormGroupWithInfo } from '../../components/form-group-with-info/form-group-with-info';
 import { AsyncActionDialog } from '../../dialogs';
 import {
   addTimestampTransform,
@@ -135,13 +135,12 @@ import {
   EMPTY_OBJECT,
   filterMap,
   getDruidErrorMessage,
-  localStorageGet,
+  localStorageGetJson,
   LocalStorageKeys,
-  localStorageSet,
+  localStorageSetJson,
   moveElement,
   moveToIndex,
   oneOf,
-  parseJson,
   pluralIfNeeded,
   QueryState,
 } from '../../utils';
@@ -310,11 +309,14 @@ const VIEW_TITLE: Record<Step, string> = {
   loading: 'Loading',
 };
 
+export type LoadDataViewMode = 'all' | 'streaming' | 'batch';
+
 export interface LoadDataViewProps {
+  mode: LoadDataViewMode;
   initSupervisorId?: string;
   initTaskId?: string;
   exampleManifestsUrl?: string;
-  goToIngestion: (taskGroupId: string | undefined, supervisor?: string) => void;
+  goToIngestion: (taskGroupId: string | undefined, openDialog?: string) => void;
 }
 
 interface SelectedIndex<T> {
@@ -382,10 +384,19 @@ export interface LoadDataViewState {
 }
 
 export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDataViewState> {
+  static MODE_TO_KEY: Record<LoadDataViewMode, LocalStorageKeys> = {
+    all: LocalStorageKeys.INGESTION_SPEC,
+    streaming: LocalStorageKeys.STREAMING_INGESTION_SPEC,
+    batch: LocalStorageKeys.BATCH_INGESTION_SPEC,
+  };
+
+  private readonly localStorageKey: LocalStorageKeys;
+
   constructor(props: LoadDataViewProps) {
     super(props);
 
-    let spec = parseJson(String(localStorageGet(LocalStorageKeys.INGESTION_SPEC)));
+    this.localStorageKey = LoadDataView.MODE_TO_KEY[props.mode];
+    let spec = localStorageGetJson(this.localStorageKey);
     if (!spec || typeof spec !== 'object') spec = {};
     this.state = {
       step: 'loading',
@@ -521,13 +532,38 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
 
   private readonly updateSpec = (newSpec: Partial<IngestionSpec>) => {
     newSpec = normalizeSpec(newSpec);
-    newSpec = upgradeSpec(newSpec);
+    try {
+      newSpec = upgradeSpec(newSpec);
+    } catch (e) {
+      newSpec = {};
+      AppToaster.show({
+        icon: IconNames.ERROR,
+        intent: Intent.DANGER,
+        timeout: 30000,
+        message: (
+          <>
+            <p>
+              This spec can not be used in the data loader because it can not be auto-converted to
+              the latest spec format:
+            </p>
+            <p>{e.message}</p>
+            <p>You can still submit it directly form the Ingestion view.</p>
+          </>
+        ),
+        action: {
+          text: 'Go to Ingestion view',
+          onClick: () => {
+            this.props.goToIngestion(undefined);
+          },
+        },
+      });
+    }
     const deltaState: Partial<LoadDataViewState> = { spec: newSpec };
     if (!deepGet(newSpec, 'spec.ioConfig.type')) {
       deltaState.cacheRows = undefined;
     }
     this.setState(deltaState as LoadDataViewState);
-    localStorageSet(LocalStorageKeys.INGESTION_SPEC, JSONBig.stringify(newSpec));
+    localStorageSetJson(this.localStorageKey, newSpec);
   };
 
   private readonly updateSpecPreview = (newSpecPreview: Partial<IngestionSpec>) => {
@@ -537,7 +573,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
   private readonly applyPreviewSpec = () => {
     this.setState(({ spec, nextSpec }) => {
       if (nextSpec) {
-        localStorageSet(LocalStorageKeys.INGESTION_SPEC, JSONBig.stringify(nextSpec));
+        localStorageSetJson(this.localStorageKey, nextSpec);
       }
       return { spec: nextSpec ? nextSpec : { ...spec }, nextSpec: undefined }; // If applying again, make a shallow copy to force a refresh
     });
@@ -606,7 +642,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
   renderActionCard(icon: IconName, title: string, caption: string, onClick: () => void) {
     return (
       <Card className="spec-card" interactive onClick={onClick} elevation={1}>
-        <Icon className="spec-card-icon" icon={icon} iconSize={30} />
+        <Icon className="spec-card-icon" icon={icon} size={30} />
         <div className="spec-card-header">
           {title}
           <div className="spec-card-caption">{caption}</div>
@@ -616,21 +652,23 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
   }
 
   render(): JSX.Element {
+    const { mode } = this.props;
     const { step, continueToSpec } = this.state;
+    const type = mode === 'all' ? '' : `${mode} `;
 
     if (!continueToSpec) {
       return (
         <div className={classNames('load-data-continue-view load-data-view')}>
           {this.renderActionCard(
             IconNames.ASTERISK,
-            'Start a new spec',
-            'Begin a new ingestion flow',
+            `Start a new ${type}spec`,
+            `Begin a new ${type}ingestion flow.`,
             this.handleResetSpec,
           )}
           {this.renderActionCard(
             IconNames.REPEAT,
-            'Continue from previous spec',
-            'Go back to the most recent spec you were working on',
+            `Continue from previous ${type}spec`,
+            `Go back to the most recent ${type}ingestion flow you were working on.`,
             this.handleContinueSpec,
           )}
         </div>
@@ -683,25 +721,27 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
     const { step } = this.state;
 
     return (
-      <div className={classNames(Classes.TABS, 'step-nav')}>
-        {SECTIONS.map(section => (
-          <div className="step-section" key={section.name}>
-            <div className="step-nav-l1">{section.name}</div>
-            <ButtonGroup className="step-nav-l2">
-              {section.steps.map(s => (
-                <Button
-                  className={s}
-                  key={s}
-                  active={s === step}
-                  onClick={() => this.updateStep(s)}
-                  icon={s === 'spec' && IconNames.MANUALLY_ENTERED_DATA}
-                  text={VIEW_TITLE[s]}
-                  disabled={!this.isStepEnabled(s)}
-                />
-              ))}
-            </ButtonGroup>
-          </div>
-        ))}
+      <div className="step-nav">
+        <div className="step-nav-inner">
+          {SECTIONS.map(section => (
+            <div className="step-section" key={section.name}>
+              <div className="step-nav-l1">{section.name}</div>
+              <ButtonGroup className="step-nav-l2">
+                {section.steps.map(s => (
+                  <Button
+                    className={s}
+                    key={s}
+                    active={s === step}
+                    onClick={() => this.updateStep(s)}
+                    icon={s === 'spec' && IconNames.MANUALLY_ENTERED_DATA}
+                    text={VIEW_TITLE[s]}
+                    disabled={!this.isStepEnabled(s)}
+                  />
+                ))}
+              </ButtonGroup>
+            </div>
+          ))}
+        </div>
       </div>
     );
   }
@@ -760,7 +800,10 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
 
     return (
       <Card
-        className={classNames({ disabled: !goodToGo, active: selectedComboType === comboType })}
+        className={classNames('ingestion-card', {
+          disabled: !goodToGo,
+          active: selectedComboType === comboType,
+        })}
         interactive
         elevation={1}
         onClick={e => {
@@ -784,7 +827,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
   }
 
   renderWelcomeStep() {
-    const { exampleManifestsUrl } = this.props;
+    const { mode, exampleManifestsUrl } = this.props;
     const { spec, exampleManifests } = this.state;
     const noExamples = Boolean(!exampleManifests || !exampleManifests.length);
 
@@ -793,18 +836,26 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
       <>
         <div className="main">
           <div className="ingestion-cards">
-            {this.renderIngestionCard('kafka')}
-            {this.renderIngestionCard('kinesis')}
-            {this.renderIngestionCard('azure-event-hubs')}
-            {this.renderIngestionCard('index_parallel:s3')}
-            {this.renderIngestionCard('index_parallel:azure')}
-            {this.renderIngestionCard('index_parallel:google')}
-            {this.renderIngestionCard('index_parallel:hdfs')}
-            {this.renderIngestionCard('index_parallel:druid')}
-            {this.renderIngestionCard('index_parallel:http')}
-            {this.renderIngestionCard('index_parallel:local')}
-            {this.renderIngestionCard('index_parallel:inline')}
-            {exampleManifestsUrl && this.renderIngestionCard('example', noExamples)}
+            {mode !== 'batch' && (
+              <>
+                {this.renderIngestionCard('kafka')}
+                {this.renderIngestionCard('kinesis')}
+                {this.renderIngestionCard('azure-event-hubs')}
+              </>
+            )}
+            {mode !== 'streaming' && (
+              <>
+                {this.renderIngestionCard('index_parallel:s3')}
+                {this.renderIngestionCard('index_parallel:azure')}
+                {this.renderIngestionCard('index_parallel:google')}
+                {this.renderIngestionCard('index_parallel:hdfs')}
+                {this.renderIngestionCard('index_parallel:druid')}
+                {this.renderIngestionCard('index_parallel:http')}
+                {this.renderIngestionCard('index_parallel:local')}
+                {this.renderIngestionCard('index_parallel:inline')}
+                {exampleManifestsUrl && this.renderIngestionCard('example', noExamples)}
+              </>
+            )}
             {this.renderIngestionCard('other')}
           </div>
         </div>
@@ -827,7 +878,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
     const { selectedComboType, exampleManifests } = this.state;
 
     if (!selectedComboType) {
-      return <p>Please specify where your raw data is located</p>;
+      return <p>Please specify where your raw data is located.</p>;
     }
 
     const issue = this.selectedIngestionTypeIssue();
@@ -1244,13 +1295,13 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
           )}
           {oneOf(specType, 'kafka', 'kinesis') && (
             <FormGroup label="Where should the data be sampled from?">
-              <HTMLSelect
-                value={sampleStrategy}
-                onChange={e => this.setState({ sampleStrategy: e.target.value as any })}
+              <RadioGroup
+                selectedValue={sampleStrategy}
+                onChange={e => this.setState({ sampleStrategy: e.currentTarget.value as any })}
               >
-                <option value="start">Start of stream</option>
-                <option value="end">End of the stream</option>
-              </HTMLSelect>
+                <Radio value="start">Start of stream</Radio>
+                <Radio value="end">End of stream</Radio>
+              </RadioGroup>
             </FormGroup>
           )}
           {this.renderApplyButtonBar(
diff --git a/web-console/src/views/load-data-view/parse-data-table/parse-data-table.tsx b/web-console/src/views/load-data-view/parse-data-table/parse-data-table.tsx
index f285b3051263..af2c2e2c5fb2 100644
--- a/web-console/src/views/load-data-view/parse-data-table/parse-data-table.tsx
+++ b/web-console/src/views/load-data-view/parse-data-table/parse-data-table.tsx
@@ -21,8 +21,7 @@ import * as JSONBig from 'json-bigint-native';
 import React from 'react';
 import ReactTable from 'react-table';
 
-import { TableCell } from '../../../components';
-import { TableCellUnparseable } from '../../../components/table-cell-unparseable/table-cell-unparseable';
+import { TableCell, TableCellUnparseable } from '../../../components';
 import { FlattenField } from '../../../druid-models';
 import {
   DEFAULT_TABLE_CLASS_NAME,
diff --git a/web-console/src/views/load-data-view/parse-time-table/parse-time-table.tsx b/web-console/src/views/load-data-view/parse-time-table/parse-time-table.tsx
index 38921216ccd4..7e1396b4de1c 100644
--- a/web-console/src/views/load-data-view/parse-time-table/parse-time-table.tsx
+++ b/web-console/src/views/load-data-view/parse-time-table/parse-time-table.tsx
@@ -20,8 +20,7 @@ import classNames from 'classnames';
 import React from 'react';
 import ReactTable from 'react-table';
 
-import { TableCell } from '../../../components';
-import { TableCellUnparseable } from '../../../components/table-cell-unparseable/table-cell-unparseable';
+import { TableCell, TableCellUnparseable } from '../../../components';
 import {
   getTimestampDetailFromSpec,
   getTimestampSpecColumnFromSpec,
diff --git a/web-console/src/views/query-view/__snapshots__/query-view.spec.tsx.snap b/web-console/src/views/query-view/__snapshots__/query-view.spec.tsx.snap
index fc2434807e26..886f92c883fb 100644
--- a/web-console/src/views/query-view/__snapshots__/query-view.spec.tsx.snap
+++ b/web-console/src/views/query-view/__snapshots__/query-view.spec.tsx.snap
@@ -24,7 +24,7 @@ exports[`QueryView matches snapshot 1`] = `
           "tableRefName": undefined,
           "type": "ref",
         },
-        "not": false,
+        "negated": false,
         "op": ">=",
         "rhs": SqlMulti {
           "args": SeparatedArray {
@@ -132,9 +132,10 @@ exports[`QueryView matches snapshot 1`] = `
             onChange={[Function]}
           />
         </Blueprint4.Tooltip2>
-        <Memo(LiveQueryModeSelector)
+        <Memo(LiveQueryModeButton)
           autoLiveQueryModeShouldRun={true}
           liveQueryMode="auto"
+          minimal={true}
           onLiveQueryModeChange={[Function]}
         />
         <Memo(QueryTimer) />
@@ -176,7 +177,7 @@ exports[`QueryView matches snapshot with query 1`] = `
           "tableRefName": undefined,
           "type": "ref",
         },
-        "not": false,
+        "negated": false,
         "op": ">=",
         "rhs": SqlMulti {
           "args": SeparatedArray {
@@ -284,9 +285,10 @@ exports[`QueryView matches snapshot with query 1`] = `
             onChange={[Function]}
           />
         </Blueprint4.Tooltip2>
-        <Memo(LiveQueryModeSelector)
+        <Memo(LiveQueryModeButton)
           autoLiveQueryModeShouldRun={true}
           liveQueryMode="auto"
+          minimal={true}
           onLiveQueryModeChange={[Function]}
         />
         <Memo(QueryTimer) />
diff --git a/web-console/src/views/query-view/column-tree/column-tree.spec.tsx b/web-console/src/views/query-view/column-tree/column-tree.spec.tsx
index cae99dfc36b5..f06e02a98bfd 100644
--- a/web-console/src/views/query-view/column-tree/column-tree.spec.tsx
+++ b/web-console/src/views/query-view/column-tree/column-tree.spec.tsx
@@ -26,7 +26,7 @@ import { ColumnTree } from './column-tree';
 
 describe('ColumnTree', () => {
   it('matches snapshot', () => {
-    const columnTree = shallow(
+    const comp = shallow(
       <ColumnTree
         getParsedQuery={() => {
           return SqlQuery.parse(`SELECT channel, count(*) as cnt FROM wikipedia GROUP BY 1`);
@@ -66,6 +66,6 @@ describe('ColumnTree', () => {
       />,
     );
 
-    expect(columnTree).toMatchSnapshot();
+    expect(comp).toMatchSnapshot();
   });
 });
diff --git a/web-console/src/views/query-view/column-tree/column-tree.tsx b/web-console/src/views/query-view/column-tree/column-tree.tsx
index e7214ba18903..f70439f4f27e 100644
--- a/web-console/src/views/query-view/column-tree/column-tree.tsx
+++ b/web-console/src/views/query-view/column-tree/column-tree.tsx
@@ -30,10 +30,15 @@ import {
 } from 'druid-query-toolkit';
 import React, { ChangeEvent } from 'react';
 
-import { Loader } from '../../../components';
-import { Deferred } from '../../../components/deferred/deferred';
-import { ColumnMetadata, copyAndAlert, groupBy, oneOf, prettyPrintSql } from '../../../utils';
-import { dataTypeToIcon } from '../../../utils/data-type-utils';
+import { Deferred, Loader } from '../../../components';
+import {
+  ColumnMetadata,
+  copyAndAlert,
+  dataTypeToIcon,
+  groupBy,
+  oneOf,
+  prettyPrintSql,
+} from '../../../utils';
 
 import { NumberMenuItems, StringMenuItems, TimeMenuItems } from './column-tree-menu';
 
diff --git a/web-console/src/views/query-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap b/web-console/src/views/query-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap
index 95a2ba81a386..e581bbd3c4d3 100644
--- a/web-console/src/views/query-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap
+++ b/web-console/src/views/query-view/explain-dialog/__snapshots__/explain-dialog.spec.tsx.snap
@@ -113,10 +113,43 @@ exports[`ExplainDialog matches snapshot on some data (many queries) 1`] = `
           >
             <Blueprint4.FormGroup
               className="query-group"
-              label="Query"
             >
-              <Blueprint4.TextArea
+              <ReactAce
+                className="query-string"
+                cursorStart={1}
+                editorProps={Object {}}
+                enableBasicAutocompletion={false}
+                enableLiveAutocompletion={false}
+                enableSnippets={false}
+                focus={false}
+                fontSize={13}
+                height="100%"
+                highlightActiveLine={true}
+                maxLines={null}
+                minLines={null}
+                mode="hjson"
+                name="ace-editor"
+                navigateToFileEnd={true}
+                onChange={null}
+                onLoad={null}
+                onPaste={null}
+                onScroll={null}
+                placeholder={null}
                 readOnly={true}
+                scrollMargin={
+                  Array [
+                    0,
+                    0,
+                    0,
+                    0,
+                  ]
+                }
+                setOptions={Object {}}
+                showGutter={true}
+                showPrintMargin={false}
+                style={Object {}}
+                tabSize={4}
+                theme="solarized_dark"
                 value="{
   \\"queryType\\": \\"scan\\",
   \\"dataSource\\": {
@@ -144,6 +177,8 @@ exports[`ExplainDialog matches snapshot on some data (many queries) 1`] = `
     \\"type\\": \\"all\\"
   }
 }"
+                width="100%"
+                wrapEnabled={false}
               />
             </Blueprint4.FormGroup>
             <Blueprint4.FormGroup
@@ -177,10 +212,43 @@ exports[`ExplainDialog matches snapshot on some data (many queries) 1`] = `
           >
             <Blueprint4.FormGroup
               className="query-group"
-              label="Query"
             >
-              <Blueprint4.TextArea
+              <ReactAce
+                className="query-string"
+                cursorStart={1}
+                editorProps={Object {}}
+                enableBasicAutocompletion={false}
+                enableLiveAutocompletion={false}
+                enableSnippets={false}
+                focus={false}
+                fontSize={13}
+                height="100%"
+                highlightActiveLine={true}
+                maxLines={null}
+                minLines={null}
+                mode="hjson"
+                name="ace-editor"
+                navigateToFileEnd={true}
+                onChange={null}
+                onLoad={null}
+                onPaste={null}
+                onScroll={null}
+                placeholder={null}
                 readOnly={true}
+                scrollMargin={
+                  Array [
+                    0,
+                    0,
+                    0,
+                    0,
+                  ]
+                }
+                setOptions={Object {}}
+                showGutter={true}
+                showPrintMargin={false}
+                style={Object {}}
+                tabSize={4}
+                theme="solarized_dark"
                 value="{
   \\"queryType\\": \\"scan\\",
   \\"dataSource\\": {
@@ -213,6 +281,8 @@ exports[`ExplainDialog matches snapshot on some data (many queries) 1`] = `
     \\"type\\": \\"all\\"
   }
 }"
+                width="100%"
+                wrapEnabled={false}
               />
             </Blueprint4.FormGroup>
             <Blueprint4.FormGroup
@@ -270,10 +340,43 @@ exports[`ExplainDialog matches snapshot on some data (one query) 1`] = `
     >
       <Blueprint4.FormGroup
         className="query-group"
-        label="Query"
       >
-        <Blueprint4.TextArea
+        <ReactAce
+          className="query-string"
+          cursorStart={1}
+          editorProps={Object {}}
+          enableBasicAutocompletion={false}
+          enableLiveAutocompletion={false}
+          enableSnippets={false}
+          focus={false}
+          fontSize={13}
+          height="100%"
+          highlightActiveLine={true}
+          maxLines={null}
+          minLines={null}
+          mode="hjson"
+          name="ace-editor"
+          navigateToFileEnd={true}
+          onChange={null}
+          onLoad={null}
+          onPaste={null}
+          onScroll={null}
+          placeholder={null}
           readOnly={true}
+          scrollMargin={
+            Array [
+              0,
+              0,
+              0,
+              0,
+            ]
+          }
+          setOptions={Object {}}
+          showGutter={true}
+          showPrintMargin={false}
+          style={Object {}}
+          tabSize={4}
+          theme="solarized_dark"
           value="{
   \\"queryType\\": \\"topN\\",
   \\"dataSource\\": {
@@ -364,6 +467,8 @@ exports[`ExplainDialog matches snapshot on some data (one query) 1`] = `
   \\"context\\": {},
   \\"descending\\": false
 }"
+          width="100%"
+          wrapEnabled={false}
         />
       </Blueprint4.FormGroup>
       <Blueprint4.FormGroup
diff --git a/web-console/src/views/query-view/explain-dialog/explain-dialog.scss b/web-console/src/views/query-view/explain-dialog/explain-dialog.scss
index 56fd2c9a89bc..8b264bd0205a 100644
--- a/web-console/src/views/query-view/explain-dialog/explain-dialog.scss
+++ b/web-console/src/views/query-view/explain-dialog/explain-dialog.scss
@@ -25,6 +25,8 @@
   }
 
   .#{$bp-ns}-dialog-body {
+    position: relative;
+
     .#{$bp-ns}-tabs {
       width: 100%;
       height: 100%;
diff --git a/web-console/src/views/query-view/explain-dialog/explain-dialog.spec.tsx b/web-console/src/views/query-view/explain-dialog/explain-dialog.spec.tsx
index ab5f046c8205..f64f35781243 100644
--- a/web-console/src/views/query-view/explain-dialog/explain-dialog.spec.tsx
+++ b/web-console/src/views/query-view/explain-dialog/explain-dialog.spec.tsx
@@ -35,9 +35,10 @@ describe('ExplainDialog', () => {
   function makeExplainDialog() {
     return (
       <ExplainDialog
-        setQueryString={() => {}}
-        queryWithContext={{ queryString: 'test', queryContext: {}, wrapQueryLimit: undefined }}
+        onOpenQuery={() => {}}
+        queryWithContext={{ engine: 'sql-native', queryString: 'test', queryContext: {} }}
         onClose={() => {}}
+        openQueryLabel="Open query"
       />
     );
   }
diff --git a/web-console/src/views/query-view/explain-dialog/explain-dialog.tsx b/web-console/src/views/query-view/explain-dialog/explain-dialog.tsx
index dbd64bdd8fd2..a60567c994d9 100644
--- a/web-console/src/views/query-view/explain-dialog/explain-dialog.tsx
+++ b/web-console/src/views/query-view/explain-dialog/explain-dialog.tsx
@@ -25,51 +25,56 @@ import {
   Intent,
   Tab,
   Tabs,
-  TextArea,
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import * as JSONBig from 'json-bigint-native';
 import React from 'react';
+import AceEditor from 'react-ace';
 
 import { Loader } from '../../../components';
+import { DruidEngine, isEmptyContext, QueryContext, QueryWithContext } from '../../../druid-models';
 import { useQueryManager } from '../../../hooks';
+import { Api } from '../../../singletons';
 import {
+  deepGet,
   formatSignature,
   getDruidErrorMessage,
+  nonEmptyArray,
   queryDruidSql,
   QueryExplanation,
-  QueryWithContext,
-  trimSemicolon,
 } from '../../../utils';
-import { isEmptyContext } from '../../../utils/query-context';
 
 import './explain-dialog.scss';
 
 function isExplainQuery(query: string): boolean {
-  return /EXPLAIN\sPLAN\sFOR/i.test(query);
+  return /^\s*EXPLAIN\sPLAN\sFOR/im.test(query);
 }
 
 function wrapInExplainIfNeeded(query: string): string {
-  query = trimSemicolon(query);
   if (isExplainQuery(query)) return query;
   return `EXPLAIN PLAN FOR ${query}`;
 }
 
+export interface QueryContextEngine extends QueryWithContext {
+  engine: DruidEngine;
+}
+
 export interface ExplainDialogProps {
-  queryWithContext: QueryWithContext;
+  queryWithContext: QueryContextEngine;
   mandatoryQueryContext?: Record<string, any>;
   onClose: () => void;
-  setQueryString: (queryString: string) => void;
+  openQueryLabel: string | undefined;
+  onOpenQuery: (queryString: string) => void;
 }
 
 export const ExplainDialog = React.memo(function ExplainDialog(props: ExplainDialogProps) {
-  const { queryWithContext, onClose, setQueryString, mandatoryQueryContext } = props;
+  const { queryWithContext, onClose, openQueryLabel, onOpenQuery, mandatoryQueryContext } = props;
 
-  const [explainState] = useQueryManager<QueryWithContext, QueryExplanation[] | string>({
-    processQuery: async (queryWithContext: QueryWithContext) => {
-      const { queryString, queryContext, wrapQueryLimit } = queryWithContext;
+  const [explainState] = useQueryManager<QueryContextEngine, QueryExplanation[] | string>({
+    processQuery: async queryWithContext => {
+      const { engine, queryString, queryContext, wrapQueryLimit } = queryWithContext;
 
-      let context: Record<string, any> | undefined;
+      let context: QueryContext | undefined;
       if (!isEmptyContext(queryContext) || wrapQueryLimit || mandatoryQueryContext) {
         context = {
           ...queryContext,
@@ -81,19 +86,24 @@ export const ExplainDialog = React.memo(function ExplainDialog(props: ExplainDia
         }
       }
 
-      let result: any[] | undefined;
+      const payload: any = {
+        query: wrapInExplainIfNeeded(queryString),
+        context,
+      };
+
+      let result: any[];
       try {
-        result = await queryDruidSql({
-          query: wrapInExplainIfNeeded(queryString),
-          context,
-        });
+        result =
+          engine === 'sql-msq-task'
+            ? (await Api.instance.post(`/druid/v2/sql/task`, payload)).data
+            : await queryDruidSql(payload);
       } catch (e) {
         throw new Error(getDruidErrorMessage(e));
       }
 
-      const plan = result[0]['PLAN'];
+      const plan = deepGet(result, '0.PLAN');
       if (typeof plan !== 'string') {
-        throw new Error(`unexpected result from server`);
+        throw new Error(`unexpected result from ${engine} API`);
       }
 
       try {
@@ -113,23 +123,37 @@ export const ExplainDialog = React.memo(function ExplainDialog(props: ExplainDia
     const queryString = JSONBig.stringify(queryExplanation.query, undefined, 2);
     return (
       <div className="query-explanation">
-        <FormGroup className="query-group" label="Query">
-          <TextArea readOnly value={queryString} />
+        <FormGroup className="query-group">
+          <AceEditor
+            mode="hjson"
+            theme="solarized_dark"
+            className="query-string"
+            name="ace-editor"
+            fontSize={13}
+            width="100%"
+            height="100%"
+            showGutter
+            showPrintMargin={false}
+            value={queryString}
+            readOnly
+          />
         </FormGroup>
         <FormGroup className="signature-group" label="Signature">
           <InputGroup defaultValue={formatSignature(queryExplanation)} readOnly />
         </FormGroup>
-        <Button
-          className="open-query"
-          text="Open query"
-          rightIcon={IconNames.ARROW_TOP_RIGHT}
-          intent={Intent.PRIMARY}
-          minimal
-          onClick={() => {
-            setQueryString(queryString);
-            onClose();
-          }}
-        />
+        {openQueryLabel && (
+          <Button
+            className="open-query"
+            text={openQueryLabel}
+            rightIcon={IconNames.ARROW_TOP_RIGHT}
+            intent={Intent.PRIMARY}
+            minimal
+            onClick={() => {
+              onOpenQuery(queryString);
+              onClose();
+            }}
+          />
+        )}
       </div>
     );
   }
@@ -140,7 +164,7 @@ export const ExplainDialog = React.memo(function ExplainDialog(props: ExplainDia
     content = <div>{explainError.message}</div>;
   } else if (!explainResult) {
     content = <div />;
-  } else if (Array.isArray(explainResult) && explainResult.length) {
+  } else if (nonEmptyArray(explainResult)) {
     if (explainResult.length === 1) {
       content = renderQueryExplanation(explainResult[0]);
     } else {
@@ -159,7 +183,7 @@ export const ExplainDialog = React.memo(function ExplainDialog(props: ExplainDia
       );
     }
   } else {
-    content = <div className="generic-result">{explainResult}</div>;
+    content = <div className="generic-result">{String(explainResult)}</div>;
   }
 
   return (
diff --git a/web-console/src/views/query-view/live-query-mode-selector/__snapshots__/live-query-mode-selector.spec.tsx.snap b/web-console/src/views/query-view/live-query-mode-button/__snapshots__/live-query-mode-button.spec.tsx.snap
similarity index 87%
rename from web-console/src/views/query-view/live-query-mode-selector/__snapshots__/live-query-mode-selector.spec.tsx.snap
rename to web-console/src/views/query-view/live-query-mode-button/__snapshots__/live-query-mode-button.spec.tsx.snap
index 90b8683d0dba..dab20a797f6a 100644
--- a/web-console/src/views/query-view/live-query-mode-selector/__snapshots__/live-query-mode-selector.spec.tsx.snap
+++ b/web-console/src/views/query-view/live-query-mode-button/__snapshots__/live-query-mode-button.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`LiveQueryModeSelector matches snapshot auto 1`] = `
+exports[`LiveQueryModeButton matches snapshot auto 1`] = `
 <Blueprint4.Popover2
   boundary="clippingParents"
   captureDismiss={false}
@@ -52,9 +52,9 @@ exports[`LiveQueryModeSelector matches snapshot auto 1`] = `
   hoverOpenDelay={150}
   inheritDarkTheme={true}
   interactionKind="click"
-  minimal={true}
+  minimal={false}
   openOnTargetFocus={true}
-  portalClassName="live-query-mode-selector-portal"
+  portalClassName="live-query-mode-button-portal"
   position="bottom-left"
   positioningStrategy="absolute"
   shouldReturnFocusOnClose={false}
@@ -63,12 +63,9 @@ exports[`LiveQueryModeSelector matches snapshot auto 1`] = `
   usePortal={true}
 >
   <Blueprint4.Button
-    className="live-query-mode-selector"
-    minimal={true}
+    className="live-query-mode-button"
   >
-    <span>
-      Live query:
-    </span>
+    Live query:
      
     <span
       className="auto auto-on"
@@ -79,7 +76,7 @@ exports[`LiveQueryModeSelector matches snapshot auto 1`] = `
 </Blueprint4.Popover2>
 `;
 
-exports[`LiveQueryModeSelector matches snapshot on 1`] = `
+exports[`LiveQueryModeButton matches snapshot on 1`] = `
 <Blueprint4.Popover2
   boundary="clippingParents"
   captureDismiss={false}
@@ -131,9 +128,9 @@ exports[`LiveQueryModeSelector matches snapshot on 1`] = `
   hoverOpenDelay={150}
   inheritDarkTheme={true}
   interactionKind="click"
-  minimal={true}
+  minimal={false}
   openOnTargetFocus={true}
-  portalClassName="live-query-mode-selector-portal"
+  portalClassName="live-query-mode-button-portal"
   position="bottom-left"
   positioningStrategy="absolute"
   shouldReturnFocusOnClose={false}
@@ -142,12 +139,9 @@ exports[`LiveQueryModeSelector matches snapshot on 1`] = `
   usePortal={true}
 >
   <Blueprint4.Button
-    className="live-query-mode-selector"
-    minimal={true}
+    className="live-query-mode-button"
   >
-    <span>
-      Live query:
-    </span>
+    Live query:
      
     <span
       className="on auto-on"
diff --git a/web-console/src/views/query-view/live-query-mode-selector/live-query-mode-selector.scss b/web-console/src/views/query-view/live-query-mode-button/live-query-mode-button.scss
similarity index 94%
rename from web-console/src/views/query-view/live-query-mode-selector/live-query-mode-selector.scss
rename to web-console/src/views/query-view/live-query-mode-button/live-query-mode-button.scss
index f4193c2baeaf..b6c257a20ee3 100644
--- a/web-console/src/views/query-view/live-query-mode-selector/live-query-mode-selector.scss
+++ b/web-console/src/views/query-view/live-query-mode-button/live-query-mode-button.scss
@@ -19,7 +19,7 @@
 @import '../../../variables';
 @import '../../../blueprint-overrides/common/colors';
 
-.live-query-mode-selector {
+.live-query-mode-button {
   .auto.auto-on {
     color: $druid-brand;
   }
@@ -29,7 +29,7 @@
   }
 }
 
-.live-query-mode-selector-portal {
+.live-query-mode-button-portal {
   .auto.auto-on .#{$bp-ns}-text-overflow-ellipsis {
     color: $druid-brand;
   }
diff --git a/web-console/src/views/query-view/live-query-mode-selector/live-query-mode-selector.spec.tsx b/web-console/src/views/query-view/live-query-mode-button/live-query-mode-button.spec.tsx
similarity index 89%
rename from web-console/src/views/query-view/live-query-mode-selector/live-query-mode-selector.spec.tsx
rename to web-console/src/views/query-view/live-query-mode-button/live-query-mode-button.spec.tsx
index a8bd391c0d37..f49a5caaa5f3 100644
--- a/web-console/src/views/query-view/live-query-mode-selector/live-query-mode-selector.spec.tsx
+++ b/web-console/src/views/query-view/live-query-mode-button/live-query-mode-button.spec.tsx
@@ -19,12 +19,12 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 
-import { LiveQueryModeSelector } from './live-query-mode-selector';
+import { LiveQueryModeButton } from './live-query-mode-button';
 
-describe('LiveQueryModeSelector', () => {
+describe('LiveQueryModeButton', () => {
   it('matches snapshot on', () => {
     const liveQueryModeSelector = shallow(
-      <LiveQueryModeSelector
+      <LiveQueryModeButton
         liveQueryMode="on"
         onLiveQueryModeChange={() => {}}
         autoLiveQueryModeShouldRun
@@ -36,7 +36,7 @@ describe('LiveQueryModeSelector', () => {
 
   it('matches snapshot auto', () => {
     const liveQueryModeSelector = shallow(
-      <LiveQueryModeSelector
+      <LiveQueryModeButton
         liveQueryMode="auto"
         onLiveQueryModeChange={() => {}}
         autoLiveQueryModeShouldRun
diff --git a/web-console/src/views/query-view/live-query-mode-selector/live-query-mode-selector.tsx b/web-console/src/views/query-view/live-query-mode-button/live-query-mode-button.tsx
similarity index 78%
rename from web-console/src/views/query-view/live-query-mode-selector/live-query-mode-selector.tsx
rename to web-console/src/views/query-view/live-query-mode-button/live-query-mode-button.tsx
index 5a3ab2cdde58..cae6f3a62de1 100644
--- a/web-console/src/views/query-view/live-query-mode-selector/live-query-mode-selector.tsx
+++ b/web-console/src/views/query-view/live-query-mode-button/live-query-mode-button.tsx
@@ -17,12 +17,13 @@
  */
 
 import { Button, Menu, MenuItem, PopoverPosition } from '@blueprintjs/core';
-import { IconNames } from '@blueprintjs/icons';
 import { Popover2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
 import React from 'react';
 
-import './live-query-mode-selector.scss';
+import { tickIcon } from '../../../utils';
+
+import './live-query-mode-button.scss';
 
 export type LiveQueryMode = 'auto' | 'on' | 'off';
 export const LIVE_QUERY_MODES: LiveQueryMode[] = ['auto', 'on', 'off'];
@@ -32,21 +33,22 @@ export const LIVE_QUERY_MODE_TITLE: Record<LiveQueryMode, string> = {
   off: 'Off',
 };
 
-export interface LiveQueryModeSelectorProps {
+export interface LiveQueryModeButtonProps {
   liveQueryMode: LiveQueryMode;
-  onLiveQueryModeChange: (liveQueryMode: LiveQueryMode) => void;
+  onLiveQueryModeChange(liveQueryMode: LiveQueryMode): void;
   autoLiveQueryModeShouldRun: boolean;
+  minimal?: boolean;
 }
 
-export const LiveQueryModeSelector = React.memo(function LiveQueryModeSelector(
-  props: LiveQueryModeSelectorProps,
+export const LiveQueryModeButton = React.memo(function LiveQueryModeButton(
+  props: LiveQueryModeButtonProps,
 ) {
-  const { liveQueryMode, onLiveQueryModeChange, autoLiveQueryModeShouldRun } = props;
+  const { liveQueryMode, onLiveQueryModeChange, autoLiveQueryModeShouldRun, minimal } = props;
 
   return (
     <Popover2
-      portalClassName="live-query-mode-selector-portal"
-      minimal
+      portalClassName="live-query-mode-button-portal"
+      minimal={minimal}
       position={PopoverPosition.BOTTOM_LEFT}
       content={
         <Menu>
@@ -57,7 +59,7 @@ export const LiveQueryModeSelector = React.memo(function LiveQueryModeSelector(
                 m === 'auto' ? (autoLiveQueryModeShouldRun ? 'auto-on' : 'auto-off') : undefined,
               )}
               key={m}
-              icon={m === liveQueryMode ? IconNames.TICK : IconNames.BLANK}
+              icon={tickIcon(m === liveQueryMode)}
               text={LIVE_QUERY_MODE_TITLE[m]}
               onClick={() => onLiveQueryModeChange(m)}
             />
@@ -65,8 +67,8 @@ export const LiveQueryModeSelector = React.memo(function LiveQueryModeSelector(
         </Menu>
       }
     >
-      <Button minimal className="live-query-mode-selector">
-        <span>Live query:</span>{' '}
+      <Button className="live-query-mode-button" minimal={minimal}>
+        Live query:{' '}
         <span
           className={classNames(liveQueryMode, autoLiveQueryModeShouldRun ? 'auto-on' : 'auto-off')}
         >
diff --git a/web-console/src/dialogs/query-history-dialog/__snapshots__/query-history-dialog.spec.tsx.snap b/web-console/src/views/query-view/query-history-dialog/__snapshots__/query-history-dialog.spec.tsx.snap
similarity index 100%
rename from web-console/src/dialogs/query-history-dialog/__snapshots__/query-history-dialog.spec.tsx.snap
rename to web-console/src/views/query-view/query-history-dialog/__snapshots__/query-history-dialog.spec.tsx.snap
diff --git a/web-console/src/dialogs/query-history-dialog/query-history-dialog.scss b/web-console/src/views/query-view/query-history-dialog/query-history-dialog.scss
similarity index 97%
rename from web-console/src/dialogs/query-history-dialog/query-history-dialog.scss
rename to web-console/src/views/query-view/query-history-dialog/query-history-dialog.scss
index cdf2ce1ec638..b18f74f8fdbf 100644
--- a/web-console/src/dialogs/query-history-dialog/query-history-dialog.scss
+++ b/web-console/src/views/query-view/query-history-dialog/query-history-dialog.scss
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '../../variables';
+@import '../../../variables';
 
 .query-history-dialog {
   &.#{$bp-ns}-dialog {
diff --git a/web-console/src/dialogs/query-history-dialog/query-history-dialog.spec.tsx b/web-console/src/views/query-view/query-history-dialog/query-history-dialog.spec.tsx
similarity index 100%
rename from web-console/src/dialogs/query-history-dialog/query-history-dialog.spec.tsx
rename to web-console/src/views/query-view/query-history-dialog/query-history-dialog.spec.tsx
diff --git a/web-console/src/dialogs/query-history-dialog/query-history-dialog.tsx b/web-console/src/views/query-view/query-history-dialog/query-history-dialog.tsx
similarity index 96%
rename from web-console/src/dialogs/query-history-dialog/query-history-dialog.tsx
rename to web-console/src/views/query-view/query-history-dialog/query-history-dialog.tsx
index 1d24760b5460..df7dbc8a080c 100644
--- a/web-console/src/dialogs/query-history-dialog/query-history-dialog.tsx
+++ b/web-console/src/views/query-view/query-history-dialog/query-history-dialog.tsx
@@ -19,8 +19,8 @@
 import { Button, Classes, Dialog, Intent, Tab, Tabs, TextArea } from '@blueprintjs/core';
 import React, { useState } from 'react';
 
-import { CenterMessage } from '../../components';
-import { QueryRecord } from '../../utils/query-history';
+import { CenterMessage } from '../../../components';
+import { QueryRecord } from '../../../utils/query-history';
 
 import './query-history-dialog.scss';
 
diff --git a/web-console/src/views/query-view/query-input/query-input.tsx b/web-console/src/views/query-view/query-input/query-input.tsx
index ca7b413001ee..d4fd3fe6ae35 100644
--- a/web-console/src/views/query-view/query-input/query-input.tsx
+++ b/web-console/src/views/query-view/query-input/query-input.tsx
@@ -18,7 +18,8 @@
 
 import { ResizeEntry } from '@blueprintjs/core';
 import { ResizeSensor2 } from '@blueprintjs/popover2';
-import ace, { Ace } from 'ace-builds';
+import type { Ace } from 'ace-builds';
+import ace from 'ace-builds';
 import escape from 'lodash.escape';
 import React from 'react';
 import AceEditor from 'react-ace';
@@ -30,16 +31,14 @@ import {
   SQL_KEYWORDS,
 } from '../../../../lib/keywords';
 import { SQL_DATA_TYPES, SQL_FUNCTIONS } from '../../../../lib/sql-docs';
-import { RowColumn, uniq } from '../../../utils';
-import { ColumnMetadata } from '../../../utils/column-metadata';
+import { ColumnMetadata, RowColumn, uniq } from '../../../utils';
 
 import './query-input.scss';
-import Completion = Ace.Completion;
 
 const langTools = ace.require('ace/ext/language_tools');
 
 const COMPLETER = {
-  insertMatch: (editor: any, data: Completion) => {
+  insertMatch: (editor: any, data: Ace.Completion) => {
     editor.completer.insertMatch({ value: data.name });
   },
 };
@@ -80,7 +79,7 @@ export class QueryInput extends React.PureComponent<QueryInputProps, QueryInputS
       SQL_EXPRESSION_PARTS.map(v => ({ name: v, value: v, score: 0, meta: 'keyword' })),
       SQL_CONSTANTS.map(v => ({ name: v, value: v, score: 0, meta: 'constant' })),
       SQL_DYNAMICS.map(v => ({ name: v, value: v, score: 0, meta: 'dynamic' })),
-      SQL_DATA_TYPES.map(([name, runtime, description]) => ({
+      Object.entries(SQL_DATA_TYPES).map(([name, [runtime, description]]) => ({
         name,
         value: name,
         score: 0,
@@ -109,8 +108,7 @@ export class QueryInput extends React.PureComponent<QueryInputProps, QueryInputS
   static addFunctionAutoCompleter(): void {
     if (!langTools) return;
 
-    const functionList: any[] = Object.keys(SQL_FUNCTIONS).flatMap(name => {
-      const versions = SQL_FUNCTIONS[name];
+    const functionList: any[] = Object.entries(SQL_FUNCTIONS).flatMap(([name, versions]) => {
       return versions.map(([args, description]) => ({
         name: name,
         value: versions.length > 1 ? `${name}(${args})` : name,
diff --git a/web-console/src/views/query-view/query-output/query-output.tsx b/web-console/src/views/query-view/query-output/query-output.tsx
index 51aee30e0ef7..db57d1b0b511 100644
--- a/web-console/src/views/query-view/query-output/query-output.tsx
+++ b/web-console/src/views/query-view/query-output/query-output.tsx
@@ -29,8 +29,8 @@ import { ShowValueDialog } from '../../../dialogs/show-value-dialog/show-value-d
 import { SMALL_TABLE_PAGE_SIZE, SMALL_TABLE_PAGE_SIZE_OPTIONS } from '../../../react-table';
 import {
   changePage,
+  columnToWidth,
   copyAndAlert,
-  dataTypeToColumnWidth,
   formatNumber,
   getNumericColumnBraces,
   Pagination,
@@ -217,7 +217,12 @@ export const QueryOutput = React.memo(function QueryOutput(props: QueryOutputPro
         icon={icon}
         text={`${having ? 'Having' : 'Filter on'}: ${prettyPrintSql(clause)}`}
         onClick={() => {
-          onQueryAction(having ? q => q.addHaving(clause) : q => q.addWhere(clause));
+          const column = clause.getUsedColumns()[0];
+          onQueryAction(
+            having
+              ? q => q.removeFromHaving(column).addHaving(clause)
+              : q => q.removeColumnFromWhere(column).addWhere(clause),
+          );
         }}
       />
     );
@@ -367,7 +372,6 @@ export const QueryOutput = React.memo(function QueryOutput(props: QueryOutputPro
         }
         columns={queryResult.header.map((column, i) => {
           const h = column.name;
-          const effectiveType = column.isTimeColumn() ? column.sqlType : column.nativeType;
 
           return {
             Header:
@@ -378,15 +382,13 @@ export const QueryOutput = React.memo(function QueryOutput(props: QueryOutputPro
                       <Popover2 content={<Deferred content={() => getHeaderMenu(h, i)} />}>
                         <div className="clickable-cell">
                           {h}
-                          {hasFilterOnHeader(h, i) && (
-                            <Icon icon={IconNames.FILTER} iconSize={14} />
-                          )}
+                          {hasFilterOnHeader(h, i) && <Icon icon={IconNames.FILTER} size={14} />}
                         </div>
                       </Popover2>
                     );
                   },
             headerClassName: getHeaderClassName(h, i),
-            width: dataTypeToColumnWidth(effectiveType),
+            width: columnToWidth(column),
             accessor: String(i),
             Cell(row) {
               const value = row.value;
diff --git a/web-console/src/views/query-view/query-view.spec.tsx b/web-console/src/views/query-view/query-view.spec.tsx
index 058280c09d02..bc252c660d0c 100644
--- a/web-console/src/views/query-view/query-view.spec.tsx
+++ b/web-console/src/views/query-view/query-view.spec.tsx
@@ -31,13 +31,4 @@ describe('QueryView', () => {
     const sqlView = shallow(<QueryView initQuery="SELECT +3" />);
     expect(sqlView).toMatchSnapshot();
   });
-
-  it('.formatStr', () => {
-    expect(QueryView.formatStr(null, 'csv')).toEqual('"null"');
-    expect(QueryView.formatStr('hello\nworld', 'csv')).toEqual('"hello world"');
-    expect(QueryView.formatStr(123, 'csv')).toEqual('"123"');
-    expect(QueryView.formatStr(new Date('2021-01-02T03:04:05.678Z'), 'csv')).toEqual(
-      '"2021-01-02T03:04:05.678Z"',
-    );
-  });
 });
diff --git a/web-console/src/views/query-view/query-view.tsx b/web-console/src/views/query-view/query-view.tsx
index 2221e97cd402..9c014c744d61 100644
--- a/web-console/src/views/query-view/query-view.tsx
+++ b/web-console/src/views/query-view/query-view.tsx
@@ -27,13 +27,13 @@ import React, { RefObject } from 'react';
 import SplitterLayout from 'react-splitter-layout';
 import { v4 as uuidv4 } from 'uuid';
 
-import { Loader } from '../../components';
-import { EditContextDialog } from '../../dialogs/edit-context-dialog/edit-context-dialog';
-import { QueryHistoryDialog } from '../../dialogs/query-history-dialog/query-history-dialog';
+import { Loader, QueryErrorPane } from '../../components';
+import { EditContextDialog } from '../../dialogs';
+import { QueryContext, QueryWithContext } from '../../druid-models';
 import { Api, AppToaster } from '../../singletons';
 import {
   ColumnMetadata,
-  downloadFile,
+  downloadQueryResults,
   DruidError,
   findEmptyLiteralPosition,
   localStorageGet,
@@ -45,22 +45,19 @@ import {
   queryDruidSql,
   QueryManager,
   QueryState,
-  QueryWithContext,
   RowColumn,
-  stringifyValue,
 } from '../../utils';
-import { QueryContext } from '../../utils/query-context';
 import { QueryRecord, QueryRecordUtil } from '../../utils/query-history';
 
 import { ColumnTree } from './column-tree/column-tree';
-import { ExplainDialog } from './explain-dialog/explain-dialog';
+import { ExplainDialog, QueryContextEngine } from './explain-dialog/explain-dialog';
 import {
   LIVE_QUERY_MODES,
   LiveQueryMode,
-  LiveQueryModeSelector,
-} from './live-query-mode-selector/live-query-mode-selector';
-import { QueryError } from './query-error/query-error';
+  LiveQueryModeButton,
+} from './live-query-mode-button/live-query-mode-button';
 import { QueryExtraInfo } from './query-extra-info/query-extra-info';
+import { QueryHistoryDialog } from './query-history-dialog/query-history-dialog';
 import { QueryInput } from './query-input/query-input';
 import { QueryOutput } from './query-output/query-output';
 import { QueryTimer } from './query-timer/query-timer';
@@ -95,7 +92,7 @@ export interface QueryViewState {
 
   queryResultState: QueryState<QueryResult, DruidError>;
 
-  explainDialogQuery?: QueryWithContext;
+  explainDialogQuery?: QueryContextEngine;
 
   defaultSchema?: string;
   defaultTable?: string;
@@ -128,19 +125,6 @@ export class QueryView extends React.PureComponent<QueryViewProps, QueryViewStat
     }
   }
 
-  static formatStr(s: null | string | number | Date, format: 'csv' | 'tsv') {
-    // stringify and remove line break
-    const str = stringifyValue(s).replace(/(?:\r\n|\r|\n)/g, ' ');
-
-    if (format === 'csv') {
-      // csv: single quote => double quote, handle ','
-      return `"${str.replace(/"/g, '""')}"`;
-    } else {
-      // tsv: single quote => double quote, \t => ''
-      return str.replace(/\t/g, '').replace(/"/g, '""');
-    }
-  }
-
   private readonly metadataQueryManager: QueryManager<null, ColumnMetadata[]>;
   private readonly queryManager: QueryManager<QueryWithContext, QueryResult>;
 
@@ -288,33 +272,7 @@ export class QueryView extends React.PureComponent<QueryViewProps, QueryViewStat
     const queryResult = queryResultState.data;
     if (!queryResult) return;
 
-    let lines: string[] = [];
-    let separator = '';
-
-    if (format === 'csv' || format === 'tsv') {
-      separator = format === 'csv' ? ',' : '\t';
-      lines.push(
-        queryResult.header.map(column => QueryView.formatStr(column.name, format)).join(separator),
-      );
-      lines = lines.concat(
-        queryResult.rows.map(r => r.map(cell => QueryView.formatStr(cell, format)).join(separator)),
-      );
-    } else {
-      // json
-      lines = queryResult.rows.map(r => {
-        const outputObject: Record<string, any> = {};
-        for (let k = 0; k < r.length; k++) {
-          const newName = queryResult.header[k];
-          if (newName) {
-            outputObject[newName.name] = r[k];
-          }
-        }
-        return JSONBig.stringify(outputObject);
-      });
-    }
-
-    const lineBreak = '\n';
-    downloadFile(lines.join(lineBreak), format, filename);
+    downloadQueryResults(queryResult, filename, format);
   };
 
   private readonly handleLoadMore = () => {
@@ -335,8 +293,9 @@ export class QueryView extends React.PureComponent<QueryViewProps, QueryViewStat
       <ExplainDialog
         queryWithContext={explainDialogQuery}
         mandatoryQueryContext={mandatoryQueryContext}
-        setQueryString={this.handleQueryStringChange}
+        onOpenQuery={this.handleQueryStringChange}
         onClose={() => this.setState({ explainDialogQuery: undefined })}
+        openQueryLabel="Open query"
       />
     );
   }
@@ -372,15 +331,16 @@ export class QueryView extends React.PureComponent<QueryViewProps, QueryViewStat
     );
   }
 
-  private renderLiveQueryModeSelector() {
+  private renderLiveQueryModeButton() {
     const { liveQueryMode, queryString } = this.state;
     if (QueryView.isJsonLike(queryString)) return;
 
     return (
-      <LiveQueryModeSelector
+      <LiveQueryModeButton
         liveQueryMode={liveQueryMode}
         onLiveQueryModeChange={this.handleLiveQueryModeChange}
         autoLiveQueryModeShouldRun={this.autoLiveQueryModeShouldRun()}
+        minimal
       />
     );
   }
@@ -462,7 +422,7 @@ export class QueryView extends React.PureComponent<QueryViewProps, QueryViewStat
               loading={queryResultState.loading}
             />
             {this.renderWrapQueryLimitSelector()}
-            {this.renderLiveQueryModeSelector()}
+            {this.renderLiveQueryModeButton()}
             {queryResult && (
               <QueryExtraInfo
                 queryResult={queryResult}
@@ -483,7 +443,7 @@ export class QueryView extends React.PureComponent<QueryViewProps, QueryViewStat
             />
           )}
           {queryResultState.error && (
-            <QueryError
+            <QueryErrorPane
               error={queryResultState.error}
               moveCursorTo={position => {
                 this.moveToPosition(position);
@@ -603,6 +563,7 @@ export class QueryView extends React.PureComponent<QueryViewProps, QueryViewStat
 
     this.setState({
       explainDialogQuery: {
+        engine: 'sql-native',
         queryString,
         queryContext,
         wrapQueryLimit,
diff --git a/web-console/src/views/query-view/run-button/run-button.tsx b/web-console/src/views/query-view/run-button/run-button.tsx
index d9afcfad1f5e..4d2777adf79e 100644
--- a/web-console/src/views/query-view/run-button/run-button.tsx
+++ b/web-console/src/views/query-view/run-button/run-button.tsx
@@ -31,17 +31,17 @@ import { Popover2 } from '@blueprintjs/popover2';
 import React, { useCallback, useMemo } from 'react';
 
 import { MenuCheckbox } from '../../../components';
-import { getLink } from '../../../links';
-import { pluralIfNeeded } from '../../../utils';
 import {
+  changeUseApproximateCountDistinct,
+  changeUseApproximateTopN,
+  changeUseCache,
   getUseApproximateCountDistinct,
   getUseApproximateTopN,
   getUseCache,
   QueryContext,
-  setUseApproximateCountDistinct,
-  setUseApproximateTopN,
-  setUseCache,
-} from '../../../utils/query-context';
+} from '../../../druid-models';
+import { getLink } from '../../../links';
+import { pluralIfNeeded } from '../../../utils';
 
 import './run-button.scss';
 
@@ -102,7 +102,7 @@ const RunButtonExtraMenu = (props: RunButtonProps) => {
             text="Use approximate COUNT(DISTINCT)"
             onChange={() => {
               onQueryContextChange(
-                setUseApproximateCountDistinct(queryContext, !useApproximateCountDistinct),
+                changeUseApproximateCountDistinct(queryContext, !useApproximateCountDistinct),
               );
             }}
           />
@@ -110,7 +110,7 @@ const RunButtonExtraMenu = (props: RunButtonProps) => {
             checked={useApproximateTopN}
             text="Use approximate TopN"
             onChange={() => {
-              onQueryContextChange(setUseApproximateTopN(queryContext, !useApproximateTopN));
+              onQueryContextChange(changeUseApproximateTopN(queryContext, !useApproximateTopN));
             }}
           />
         </>
@@ -119,7 +119,7 @@ const RunButtonExtraMenu = (props: RunButtonProps) => {
         checked={useCache}
         text="Use cache"
         onChange={() => {
-          onQueryContextChange(setUseCache(queryContext, !useCache));
+          onQueryContextChange(changeUseCache(queryContext, !useCache));
         }}
       />
     </Menu>
diff --git a/web-console/src/views/segments-view/segments-view.tsx b/web-console/src/views/segments-view/segments-view.tsx
index 648c1bef4a9b..b0327182be13 100644
--- a/web-console/src/views/segments-view/segments-view.tsx
+++ b/web-console/src/views/segments-view/segments-view.tsx
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Button, ButtonGroup, Icon, Intent, Label, MenuItem, Switch } from '@blueprintjs/core';
+import { Button, ButtonGroup, Intent, Label, MenuItem, Switch } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
 import { SqlComparison, SqlExpression, SqlLiteral, SqlRef } from 'druid-query-toolkit';
@@ -41,6 +41,7 @@ import {
 import { AsyncActionDialog } from '../../dialogs';
 import { SegmentTableActionDialog } from '../../dialogs/segments-table-action-dialog/segment-table-action-dialog';
 import { ShowValueDialog } from '../../dialogs/show-value-dialog/show-value-dialog';
+import { QueryWithContext } from '../../druid-models';
 import {
   booleanCustomTableFilter,
   BooleanFilterInput,
@@ -128,7 +129,7 @@ function formatRangeDimensionValue(dimension: any, value: any): string {
 }
 
 export interface SegmentsViewProps {
-  goToQuery: (initSql: string) => void;
+  goToQuery(queryWithContext: QueryWithContext): void;
   datasource: string | undefined;
   onlyUnavailable: boolean | undefined;
   capabilities: Capabilities;
@@ -655,18 +656,17 @@ END AS "time_span"`,
                 });
               };
 
-              const fullShardIcon = (
-                <Icon className="full-shard-spec-icon" icon={IconNames.EYE_OPEN} />
-              );
-
               switch (v?.type) {
                 case 'range': {
                   const dimensions = v.dimensions || [];
                   const formatEdge = (values: string[]) =>
-                    values.map((x, i) => formatRangeDimensionValue(dimensions[i], x)).join('; ');
+                    values
+                      .map((x, i) => formatRangeDimensionValue(dimensions[i] || `d${i}`, x))
+                      .join('; ');
 
                   return (
                     <TableClickableCell
+                      className="range-detail"
                       onClick={onShowFullShardSpec}
                       hoverIcon={IconNames.EYE_OPEN}
                     >
@@ -681,14 +681,17 @@ END AS "time_span"`,
 
                 case 'single': {
                   return (
-                    <div className="spec-detail range-detail" onClick={onShowFullShardSpec}>
+                    <TableClickableCell
+                      className="range-detail"
+                      onClick={onShowFullShardSpec}
+                      hoverIcon={IconNames.EYE_OPEN}
+                    >
                       <span className="range-label">Start:</span>
                       {v.start != null ? formatRangeDimensionValue(v.dimension, v.start) : '-∞'}
                       <br />
                       <span className="range-label">End:</span>
                       {v.end != null ? formatRangeDimensionValue(v.dimension, v.end) : '∞'}
-                      {fullShardIcon}
-                    </div>
+                    </TableClickableCell>
                   );
                 }
 
@@ -696,14 +699,16 @@ END AS "time_span"`,
                   const { partitionDimensions } = v;
                   if (!Array.isArray(partitionDimensions)) return value;
                   return (
-                    <div className="spec-detail" onClick={onShowFullShardSpec}>
+                    <TableClickableCell
+                      onClick={onShowFullShardSpec}
+                      hoverIcon={IconNames.EYE_OPEN}
+                    >
                       {`hash(${
                         partitionDimensions.length
                           ? partitionDimensions.join(', ')
                           : '<all dimensions>'
                       })`}
-                      {fullShardIcon}
-                    </div>
+                    </TableClickableCell>
                   );
                 }
 
@@ -711,17 +716,22 @@ END AS "time_span"`,
                 case 'none':
                 case 'tombstone':
                   return (
-                    <div className="spec-detail" onClick={onShowFullShardSpec}>
-                      No detail{fullShardIcon}
-                    </div>
+                    <TableClickableCell
+                      onClick={onShowFullShardSpec}
+                      hoverIcon={IconNames.EYE_OPEN}
+                    >
+                      No detail
+                    </TableClickableCell>
                   );
 
                 default:
                   return (
-                    <div className="spec-detail" onClick={onShowFullShardSpec}>
+                    <TableClickableCell
+                      onClick={onShowFullShardSpec}
+                      hoverIcon={IconNames.EYE_OPEN}
+                    >
                       {String(value)}
-                      {fullShardIcon}
-                    </div>
+                    </TableClickableCell>
                   );
               }
             },
@@ -906,7 +916,7 @@ END AS "time_span"`,
             disabled={!lastSegmentsQuery}
             onClick={() => {
               if (!lastSegmentsQuery) return;
-              goToQuery(lastSegmentsQuery);
+              goToQuery({ queryString: lastSegmentsQuery });
             }}
           />
         )}
diff --git a/web-console/src/views/services-view/services-view.spec.tsx b/web-console/src/views/services-view/services-view.spec.tsx
index db2bb85aff8d..21d51e9c5dd5 100644
--- a/web-console/src/views/services-view/services-view.spec.tsx
+++ b/web-console/src/views/services-view/services-view.spec.tsx
@@ -81,9 +81,7 @@ jest.mock('../../utils', () => {
 
 describe('ServicesView', () => {
   it('renders data', () => {
-    const comp = (
-      <ServicesView goToQuery={() => {}} goToTask={() => {}} capabilities={Capabilities.FULL} />
-    );
+    const comp = <ServicesView goToQuery={() => {}} capabilities={Capabilities.FULL} />;
 
     const servicesView = shallow(comp);
     expect(servicesView).toMatchSnapshot();
diff --git a/web-console/src/views/services-view/services-view.tsx b/web-console/src/views/services-view/services-view.tsx
index b9fa963c53c6..aa2a934533e7 100644
--- a/web-console/src/views/services-view/services-view.tsx
+++ b/web-console/src/views/services-view/services-view.tsx
@@ -34,6 +34,7 @@ import {
   ViewControlBar,
 } from '../../components';
 import { AsyncActionDialog } from '../../dialogs';
+import { QueryWithContext } from '../../druid-models';
 import { STANDARD_TABLE_PAGE_SIZE, STANDARD_TABLE_PAGE_SIZE_OPTIONS } from '../../react-table';
 import { Api } from '../../singletons';
 import {
@@ -101,8 +102,7 @@ function formatQueues(
 }
 
 export interface ServicesViewProps {
-  goToQuery: (initSql: string) => void;
-  goToTask: (taskId: string) => void;
+  goToQuery(queryWithContext: QueryWithContext): void;
   capabilities: Capabilities;
 }
 
@@ -683,7 +683,7 @@ ORDER BY
           <MenuItem
             icon={IconNames.APPLICATION}
             text="View SQL query for table"
-            onClick={() => goToQuery(ServicesView.SERVICE_SQL)}
+            onClick={() => goToQuery({ queryString: ServicesView.SERVICE_SQL })}
           />
         )}
       </MoreButton>
diff --git a/web-console/src/views/sql-data-loader-view/column-actions/column-actions.scss b/web-console/src/views/sql-data-loader-view/column-actions/column-actions.scss
new file mode 100644
index 000000000000..53514219f17b
--- /dev/null
+++ b/web-console/src/views/sql-data-loader-view/column-actions/column-actions.scss
@@ -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 '../../../variables';
+
+.column-actions {
+  background: rgba($gray3, 0.15);
+  padding: 10px;
+  border-radius: $pt-border-radius;
+  margin-bottom: 15px;
+
+  .title {
+    font-size: 16px;
+    margin-bottom: 10px;
+    cursor: default;
+  }
+
+  .#{$bp-ns}-form-group:last-child {
+    margin-bottom: 0;
+  }
+}
diff --git a/web-console/src/views/sql-data-loader-view/column-actions/column-actions.tsx b/web-console/src/views/sql-data-loader-view/column-actions/column-actions.tsx
new file mode 100644
index 000000000000..c0c198f26d75
--- /dev/null
+++ b/web-console/src/views/sql-data-loader-view/column-actions/column-actions.tsx
@@ -0,0 +1,283 @@
+/*
+ * 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 { Button, FormGroup, Menu, MenuItem } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
+import { QueryResult, SqlExpression, SqlFunction } from 'druid-query-toolkit';
+import React from 'react';
+
+import { possibleDruidFormatForValues, TIME_COLUMN } from '../../../druid-models';
+import { convertToGroupByExpression, oneOf, QueryAction, timeFormatToSql } from '../../../utils';
+import { TimeFloorMenuItem } from '../../workbench-view/time-floor-menu-item/time-floor-menu-item';
+
+import './column-actions.scss';
+
+interface ColumnActionsProps {
+  queryResult: QueryResult | undefined;
+  headerIndex: number;
+  onQueryAction(action: QueryAction): void;
+}
+
+export const ColumnActions = React.memo(function ExpressionEditor(props: ColumnActionsProps) {
+  const { onQueryAction, queryResult, headerIndex } = props;
+
+  const transformMenuItems: JSX.Element[] = [];
+  let convertButton: JSX.Element | undefined;
+  let removeFilterButton: JSX.Element | undefined;
+
+  const sqlQuery = queryResult?.sqlQuery;
+  if (queryResult && sqlQuery && headerIndex !== -1) {
+    const column = queryResult.header[headerIndex];
+    const header = column.name;
+    const type = column.sqlType || column.nativeType;
+
+    const expression = queryResult.sqlQuery?.getSelectExpressionForIndex(headerIndex);
+
+    if (sqlQuery.getEffectiveWhereExpression().containsColumn(header)) {
+      removeFilterButton = (
+        <Button
+          icon={IconNames.FILTER_REMOVE}
+          text="Remove filter on this column"
+          onClick={() => {
+            onQueryAction(q =>
+              q.changeWhereExpression(q.getWhereExpression()?.removeColumnFromAnd(header)),
+            );
+          }}
+        />
+      );
+    }
+
+    const grouped: boolean | undefined = sqlQuery.hasGroupBy()
+      ? sqlQuery.isGroupedSelectIndex(headerIndex)
+      : undefined;
+
+    if (expression) {
+      if (column.sqlType === 'TIMESTAMP') {
+        transformMenuItems.push(
+          <TimeFloorMenuItem
+            key="time_floor"
+            expression={expression}
+            onChange={expression => {
+              onQueryAction(q => q.changeSelect(headerIndex, expression));
+            }}
+          />,
+        );
+
+        if (!column.isTimeColumn()) {
+          transformMenuItems.push(
+            <MenuItem
+              key="declare_time"
+              icon={IconNames.TIME}
+              text="Use as the primary time column"
+              onClick={() => {
+                onQueryAction(q =>
+                  q.removeSelectIndex(headerIndex).addSelect(expression.as(TIME_COLUMN), {
+                    insertIndex: 0,
+                    addToGroupBy: q.hasGroupBy() ? 'start' : undefined,
+                  }),
+                );
+              }}
+            />,
+          );
+        }
+      } else {
+        // Not a time column -------------------------------------------
+        const values = queryResult.rows.map(row => row[headerIndex]);
+        const possibleDruidFormat = possibleDruidFormatForValues(values);
+        const formatSql = possibleDruidFormat ? timeFormatToSql(possibleDruidFormat) : undefined;
+
+        if (formatSql) {
+          const newSelectExpression = formatSql.fillPlaceholders([
+            expression.getUnderlyingExpression(),
+          ]);
+
+          transformMenuItems.push(
+            <MenuItem
+              key="parse_time"
+              icon={IconNames.TIME}
+              text={`Parse as '${possibleDruidFormat}'`}
+              onClick={() => {
+                const outputName = expression?.getOutputName();
+                if (!outputName) return;
+                onQueryAction(q => q.changeSelect(headerIndex, newSelectExpression.as(outputName)));
+              }}
+            />,
+            <MenuItem
+              key="parse_time_and_make_primary"
+              icon={IconNames.TIME}
+              text={`Parse as '${possibleDruidFormat}' and use as the primary time column`}
+              onClick={() => {
+                onQueryAction(q =>
+                  q.removeSelectIndex(headerIndex).addSelect(newSelectExpression.as(TIME_COLUMN), {
+                    insertIndex: 0,
+                    addToGroupBy: q.hasGroupBy() ? 'start' : undefined,
+                  }),
+                );
+              }}
+            />,
+          );
+        }
+
+        if (typeof grouped === 'boolean') {
+          if (grouped) {
+            const convertToAggregate = (aggregates: SqlExpression[]) => {
+              onQueryAction(q =>
+                q.removeOutputColumn(header).applyForEach(aggregates, (q, aggregate) =>
+                  q.addSelect(aggregate, {
+                    insertIndex: 'last',
+                  }),
+                ),
+              );
+            };
+
+            const underlyingSelectExpression = expression.getUnderlyingExpression();
+
+            convertButton = (
+              <Popover2
+                content={
+                  <Menu>
+                    <Menu>
+                      {oneOf(type, 'LONG', 'FLOAT', 'DOUBLE', 'BIGINT') && (
+                        <>
+                          <MenuItem
+                            text="Convert to SUM(...)"
+                            onClick={() => {
+                              convertToAggregate([
+                                SqlFunction.simple('SUM', [underlyingSelectExpression]).as(
+                                  `sum_${header}`,
+                                ),
+                              ]);
+                            }}
+                          />
+                          <MenuItem
+                            text="Convert to MIN(...)"
+                            onClick={() => {
+                              convertToAggregate([
+                                SqlFunction.simple('MIN', [underlyingSelectExpression]).as(
+                                  `min_${header}`,
+                                ),
+                              ]);
+                            }}
+                          />
+                          <MenuItem
+                            text="Convert to MAX(...)"
+                            onClick={() => {
+                              convertToAggregate([
+                                SqlFunction.simple('MAX', [underlyingSelectExpression]).as(
+                                  `max_${header}`,
+                                ),
+                              ]);
+                            }}
+                          />
+                          <MenuItem
+                            text="Convert to SUM(...), MIN(...), and MAX(...)"
+                            onClick={() => {
+                              convertToAggregate([
+                                SqlFunction.simple('SUM', [underlyingSelectExpression]).as(
+                                  `sum_${header}`,
+                                ),
+                                SqlFunction.simple('MIN', [underlyingSelectExpression]).as(
+                                  `min_${header}`,
+                                ),
+                                SqlFunction.simple('MAX', [underlyingSelectExpression]).as(
+                                  `max_${header}`,
+                                ),
+                              ]);
+                            }}
+                          />
+                        </>
+                      )}
+                      <MenuItem
+                        text="Convert to APPROX_COUNT_DISTINCT_DS_HLL(...)"
+                        onClick={() => {
+                          convertToAggregate([
+                            SqlFunction.simple('APPROX_COUNT_DISTINCT_DS_HLL', [
+                              underlyingSelectExpression,
+                            ]).as(`unique_${header}`),
+                          ]);
+                        }}
+                      />
+                      <MenuItem
+                        text="Convert to APPROX_COUNT_DISTINCT_DS_THETA(...)"
+                        onClick={() => {
+                          convertToAggregate([
+                            SqlFunction.simple('APPROX_COUNT_DISTINCT_DS_THETA', [
+                              underlyingSelectExpression,
+                            ]).as(`unique_${header}`),
+                          ]);
+                        }}
+                      />
+                      <MenuItem
+                        text="Convert to APPROX_COUNT_DISTINCT_BUILTIN(...)"
+                        onClick={() => {
+                          convertToAggregate([
+                            SqlFunction.simple('APPROX_COUNT_DISTINCT_BUILTIN', [
+                              underlyingSelectExpression,
+                            ]).as(`unique_${header}`),
+                          ]);
+                        }}
+                      />
+                    </Menu>
+                  </Menu>
+                }
+              >
+                <Button icon={IconNames.EXCHANGE} text="Convert to metric" />
+              </Popover2>
+            );
+          } else {
+            const groupByExpression = convertToGroupByExpression(expression);
+            if (groupByExpression) {
+              convertButton = (
+                <Button
+                  icon={IconNames.EXCHANGE}
+                  text="Convert to dimension"
+                  onClick={() => {
+                    onQueryAction(q =>
+                      q.removeOutputColumn(header).addSelect(groupByExpression, {
+                        insertIndex: 'last-grouping',
+                        addToGroupBy: 'end',
+                      }),
+                    );
+                  }}
+                />
+              );
+            }
+          }
+        }
+      }
+    }
+  }
+
+  if (!transformMenuItems.length && !removeFilterButton && !convertButton) return null;
+
+  return (
+    <div className="column-actions">
+      <div className="title">Column actions</div>
+      {transformMenuItems.length > 0 && (
+        <FormGroup>
+          <Popover2 content={<Menu>{transformMenuItems}</Menu>}>
+            <Button icon={IconNames.FUNCTION} text="Transform" />
+          </Popover2>
+        </FormGroup>
+      )}
+      {removeFilterButton && <FormGroup>{removeFilterButton}</FormGroup>}
+      {convertButton && <FormGroup>{convertButton}</FormGroup>}
+    </div>
+  );
+});
diff --git a/web-console/src/views/sql-data-loader-view/column-editor/column-editor.scss b/web-console/src/views/sql-data-loader-view/column-editor/column-editor.scss
new file mode 100644
index 000000000000..27b43148a3bf
--- /dev/null
+++ b/web-console/src/views/sql-data-loader-view/column-editor/column-editor.scss
@@ -0,0 +1,53 @@
+/*
+ * 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 '../../../variables';
+
+.column-editor {
+  background: rgba($gray3, 0.15);
+  padding: 10px;
+  border-radius: $pt-border-radius;
+  margin-bottom: 15px;
+
+  .title {
+    font-size: 16px;
+    margin-bottom: 10px;
+    cursor: default;
+  }
+
+  .flexible-query-input {
+    height: 80px;
+    border: 1px solid $gray2;
+    border-radius: 2px;
+  }
+
+  .apply-cancel-buttons {
+    position: relative;
+    text-align: right;
+
+    .#{$bp-ns}-button {
+      margin-left: 15px;
+    }
+
+    .delete {
+      position: absolute;
+      left: 0;
+      margin-left: 0;
+    }
+  }
+}
diff --git a/web-console/src/views/sql-data-loader-view/column-editor/column-editor.tsx b/web-console/src/views/sql-data-loader-view/column-editor/column-editor.tsx
new file mode 100644
index 000000000000..9fe9f073b204
--- /dev/null
+++ b/web-console/src/views/sql-data-loader-view/column-editor/column-editor.tsx
@@ -0,0 +1,219 @@
+/*
+ * 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 { Button, FormGroup, InputGroup, Intent, Menu, MenuItem, Position } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
+import { QueryResult, SqlExpression, SqlFunction } from 'druid-query-toolkit';
+import React, { useState } from 'react';
+
+import { AppToaster } from '../../../singletons';
+import { tickIcon } from '../../../utils';
+import { FlexibleQueryInput } from '../../workbench-view/flexible-query-input/flexible-query-input';
+
+import './column-editor.scss';
+
+const NATIVE_TYPES: (undefined | string)[] = ['', 'string', 'long', 'double'];
+
+interface Breakdown {
+  expression: SqlExpression;
+  nativeType?: string;
+  outputName: string;
+}
+
+function breakdownExpression(expression: SqlExpression): Breakdown {
+  const outputName = expression.getOutputName() || '';
+  expression = expression.getUnderlyingExpression();
+
+  let nativeType: string | undefined;
+  if (expression instanceof SqlFunction && expression.getEffectiveFunctionName() === 'CAST') {
+    const asType = String(expression.getArgAsString(1)).toUpperCase();
+    switch (asType) {
+      case 'VARCHAR':
+        nativeType = 'string';
+        expression = expression.getArg(0)!;
+        break;
+
+      case 'BIGINT':
+        nativeType = 'long';
+        expression = expression.getArg(0)!;
+        break;
+
+      case 'DOUBLE':
+        nativeType = 'double';
+        expression = expression.getArg(0)!;
+        break;
+    }
+  }
+
+  return {
+    expression,
+    nativeType,
+    outputName,
+  };
+}
+
+function nativeTypeToSqlType(nativeType: string): string {
+  switch (nativeType) {
+    case 'string':
+      return 'VARCHAR';
+    case 'long':
+      return 'BIGINT';
+    case 'double':
+      return 'DOUBLE';
+    default:
+      return 'VARCHAR';
+  }
+}
+
+interface ColumnEditorProps {
+  expression?: SqlExpression;
+  onApply(expression: SqlExpression | undefined): void;
+  onCancel(): void;
+  dirty(): void;
+
+  queryResult: QueryResult | undefined;
+  headerIndex: number;
+}
+
+export const ColumnEditor = React.memo(function ColumnEditor(props: ColumnEditorProps) {
+  const { expression, onApply, onCancel, dirty, queryResult, headerIndex } = props;
+
+  const breakdown = expression ? breakdownExpression(expression) : undefined;
+
+  const [outputName, setOutputName] = useState<string | undefined>();
+  const [nativeType, setNativeType] = useState<string | undefined>();
+  const [expressionString, setExpressionString] = useState<string | undefined>();
+
+  const effectiveOutputName = outputName ?? (breakdown?.outputName || '');
+  const effectiveNativeType = nativeType ?? breakdown?.nativeType;
+  const effectiveExpressionString = expressionString ?? (breakdown?.expression.toString() || '');
+
+  let typeButton: JSX.Element | undefined;
+
+  const sqlQuery = queryResult?.sqlQuery;
+  if (queryResult && sqlQuery && headerIndex !== -1) {
+    const column = queryResult.header[headerIndex];
+
+    const expression = queryResult.sqlQuery?.getSelectExpressionForIndex(headerIndex);
+
+    if (expression && column.sqlType !== 'TIMESTAMP') {
+      const implicitText =
+        'implicit' + (breakdown?.nativeType ? '' : ` (${String(column.nativeType).toLowerCase()})`);
+      const selectExpression = sqlQuery.getSelectExpressionForIndex(headerIndex);
+      if (selectExpression) {
+        typeButton = (
+          <Popover2
+            position={Position.BOTTOM_LEFT}
+            minimal
+            content={
+              <Menu>
+                {NATIVE_TYPES.map((type, i) => {
+                  return (
+                    <MenuItem
+                      key={i}
+                      icon={tickIcon(type === (effectiveNativeType || ''))}
+                      text={type || implicitText}
+                      onClick={() => setNativeType(type)}
+                    />
+                  );
+                })}
+              </Menu>
+            }
+          >
+            <Button
+              text={`Type: ${effectiveNativeType || implicitText}`}
+              rightIcon={IconNames.CARET_DOWN}
+            />
+          </Popover2>
+        );
+      }
+    }
+  }
+
+  return (
+    <div className="column-editor">
+      <div className="title">{expression ? 'Edit column' : 'Add column'}</div>
+      <FormGroup label="Name">
+        <InputGroup
+          value={effectiveOutputName}
+          onChange={e => {
+            if (!outputName) dirty();
+            setOutputName(e.target.value);
+          }}
+        />
+      </FormGroup>
+      <FormGroup label="SQL expression">
+        <FlexibleQueryInput
+          autoHeight={false}
+          showGutter={false}
+          placeholder="expression"
+          queryString={effectiveExpressionString}
+          onQueryStringChange={f => {
+            if (!expressionString) dirty();
+            setExpressionString(f);
+          }}
+          columnMetadata={undefined}
+        />
+      </FormGroup>
+      {typeButton && <FormGroup>{typeButton}</FormGroup>}
+      <div className="apply-cancel-buttons">
+        {expression && (
+          <Button
+            className="delete"
+            icon={IconNames.TRASH}
+            intent={Intent.DANGER}
+            onClick={() => {
+              onApply(undefined);
+              onCancel();
+            }}
+          />
+        )}
+        <Button text="Cancel" onClick={onCancel} />
+        <Button
+          text="Apply"
+          intent={Intent.PRIMARY}
+          disabled={!outputName && !expressionString && typeof nativeType === 'undefined'}
+          onClick={() => {
+            let newExpression: SqlExpression;
+            try {
+              newExpression = SqlExpression.parse(effectiveExpressionString);
+            } catch (e) {
+              AppToaster.show({
+                message: `Could not parse SQL expression: ${e.message}`,
+                intent: Intent.DANGER,
+              });
+              return;
+            }
+
+            if (nativeType) {
+              newExpression = newExpression.cast(nativeTypeToSqlType(nativeType));
+            }
+
+            if (newExpression.getOutputName() !== effectiveOutputName) {
+              newExpression = newExpression.as(effectiveOutputName);
+            }
+
+            onApply(newExpression);
+            onCancel();
+          }}
+        />
+      </div>
+    </div>
+  );
+});
diff --git a/web-console/src/views/sql-data-loader-view/destination-dialog/destination-dialog.scss b/web-console/src/views/sql-data-loader-view/destination-dialog/destination-dialog.scss
new file mode 100644
index 000000000000..9038d91c461f
--- /dev/null
+++ b/web-console/src/views/sql-data-loader-view/destination-dialog/destination-dialog.scss
@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+
+.destination-dialog {
+  position: absolute;
+  top: 20%;
+  margin: 0;
+}
diff --git a/web-console/src/views/sql-data-loader-view/destination-dialog/destination-dialog.tsx b/web-console/src/views/sql-data-loader-view/destination-dialog/destination-dialog.tsx
new file mode 100644
index 000000000000..3ab3ed126b1f
--- /dev/null
+++ b/web-console/src/views/sql-data-loader-view/destination-dialog/destination-dialog.tsx
@@ -0,0 +1,89 @@
+/*
+ * 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 { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
+import React, { useEffect, useState } from 'react';
+
+import { DestinationInfo, getDestinationInfo, IngestQueryPattern } from '../../../druid-models';
+import { DestinationForm } from '../destination-form/destination-form';
+
+import './destination-dialog.scss';
+
+interface DestinationDialogProps {
+  existingTables: string[];
+  ingestQueryPattern: IngestQueryPattern;
+  changeIngestQueryPattern(ingestQueryPattern: IngestQueryPattern): void;
+  onClose(): void;
+}
+
+export const DestinationDialog = React.memo(function DestinationDialog(
+  props: DestinationDialogProps,
+) {
+  const { ingestQueryPattern, changeIngestQueryPattern, existingTables, onClose } = props;
+
+  const [info, setInfo] = useState<DestinationInfo | undefined>();
+
+  useEffect(() => {
+    if (!existingTables) return;
+    setInfo(getDestinationInfo(ingestQueryPattern, existingTables));
+  }, [ingestQueryPattern, existingTables]);
+
+  return (
+    <Dialog
+      className="destination-dialog"
+      onClose={onClose}
+      isOpen
+      title="Destination"
+      canOutsideClickClose={false}
+    >
+      {existingTables && info && (
+        <DestinationForm
+          className={Classes.DIALOG_BODY}
+          existingTables={existingTables}
+          destinationInfo={info}
+          changeDestinationInfo={setInfo}
+        />
+      )}
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button text="Close" onClick={onClose} />
+          <Button
+            text="Save"
+            intent={Intent.PRIMARY}
+            disabled={
+              !existingTables ||
+              !info ||
+              (info.mode === 'new' && existingTables.includes(info.table)) ||
+              (info.mode !== 'new' && !existingTables.includes(info.table))
+            }
+            onClick={() => {
+              if (!info || !existingTables) return;
+
+              changeIngestQueryPattern({
+                ...ingestQueryPattern,
+                mode: info.mode === 'new' ? 'replace' : info.mode,
+                destinationTableName: info.table,
+              });
+              onClose();
+            }}
+          />
+        </div>
+      </div>
+    </Dialog>
+  );
+});
diff --git a/web-console/src/views/sql-data-loader-view/destination-form/destination-form.scss b/web-console/src/views/sql-data-loader-view/destination-form/destination-form.scss
new file mode 100644
index 000000000000..7bbcd6cce49c
--- /dev/null
+++ b/web-console/src/views/sql-data-loader-view/destination-form/destination-form.scss
@@ -0,0 +1,24 @@
+/*
+ * 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.
+ */
+
+.destination-form {
+  .table-radios {
+    max-height: 400px;
+    overflow: auto;
+  }
+}
diff --git a/web-console/src/views/sql-data-loader-view/destination-form/destination-form.tsx b/web-console/src/views/sql-data-loader-view/destination-form/destination-form.tsx
new file mode 100644
index 000000000000..e0762b477ce8
--- /dev/null
+++ b/web-console/src/views/sql-data-loader-view/destination-form/destination-form.tsx
@@ -0,0 +1,128 @@
+/*
+ * 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 {
+  Button,
+  ButtonGroup,
+  FormGroup,
+  InputGroup,
+  Intent,
+  Radio,
+  RadioGroup,
+} from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import { Tooltip2 } from '@blueprintjs/popover2';
+import classNames from 'classnames';
+import React, { useState } from 'react';
+
+import { DestinationInfo, DestinationMode } from '../../../druid-models';
+
+import './destination-form.scss';
+
+interface DestinationFormProps {
+  className?: string;
+  existingTables: string[];
+  destinationInfo: DestinationInfo;
+  changeDestinationInfo(destinationInfo: DestinationInfo): void;
+}
+
+export const DestinationForm = React.memo(function DestinationForm(props: DestinationFormProps) {
+  const { className, existingTables, destinationInfo, changeDestinationInfo } = props;
+
+  const [tableSearch, setTableSearch] = useState<string>('');
+
+  function changeMode(mode: DestinationMode) {
+    changeDestinationInfo({ ...destinationInfo, mode });
+  }
+
+  const { mode, table } = destinationInfo;
+  return (
+    <div className={classNames('destination-form', className)}>
+      <FormGroup>
+        <ButtonGroup fill>
+          <Button
+            text="New table"
+            active={mode === 'new'}
+            onClick={() => {
+              changeMode('new');
+            }}
+          />
+          <Button
+            text="Append to table"
+            active={mode === 'insert'}
+            onClick={() => {
+              changeMode('insert');
+            }}
+          />
+          <Button
+            text="Replace table"
+            active={mode === 'replace'}
+            onClick={() => {
+              changeMode('replace');
+            }}
+          />
+        </ButtonGroup>
+      </FormGroup>
+      {mode === 'new' ? (
+        <FormGroup label="New table name">
+          <InputGroup
+            value={table}
+            onChange={e => {
+              changeDestinationInfo({ ...destinationInfo, table: (e.target as any).value });
+            }}
+            placeholder="Choose a name"
+            rightElement={
+              existingTables.includes(table) ? (
+                <Tooltip2 content="Table name already exists">
+                  <Button icon={IconNames.DELETE} intent={Intent.DANGER} minimal />
+                </Tooltip2>
+              ) : undefined
+            }
+          />
+        </FormGroup>
+      ) : (
+        <>
+          <FormGroup label="Choose a table">
+            <InputGroup
+              value={tableSearch}
+              onChange={e => {
+                setTableSearch(e.target.value);
+              }}
+              placeholder="Search"
+            />
+          </FormGroup>
+          <RadioGroup
+            className="table-radios"
+            selectedValue={table}
+            onChange={e => {
+              changeDestinationInfo({ ...destinationInfo, table: (e.target as any).value });
+            }}
+          >
+            {existingTables
+              .filter(t => t.includes(tableSearch))
+              .map(table => (
+                <Radio key={table} value={table}>
+                  {table}
+                </Radio>
+              ))}
+          </RadioGroup>
+        </>
+      )}
+    </div>
+  );
+});
diff --git a/web-console/src/views/sql-data-loader-view/expression-editor-dialog/expression-editor-dialog.scss b/web-console/src/views/sql-data-loader-view/expression-editor-dialog/expression-editor-dialog.scss
new file mode 100644
index 000000000000..eeab9b9866e7
--- /dev/null
+++ b/web-console/src/views/sql-data-loader-view/expression-editor-dialog/expression-editor-dialog.scss
@@ -0,0 +1,41 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import '../../../variables';
+
+.expression-editor-dialog {
+  .#{$bp-ns}-dialog-body {
+    min-height: 100px;
+
+    .flexible-query-input {
+      height: 80px;
+      border: 1px solid gray;
+    }
+  }
+
+  .#{$bp-ns}-dialog-footer-actions {
+    position: relative;
+
+    .delete-button {
+      position: absolute;
+      top: 0;
+      left: 0;
+      margin: 0;
+    }
+  }
+}
diff --git a/web-console/src/views/sql-data-loader-view/expression-editor-dialog/expression-editor-dialog.tsx b/web-console/src/views/sql-data-loader-view/expression-editor-dialog/expression-editor-dialog.tsx
new file mode 100644
index 000000000000..9561fc58a852
--- /dev/null
+++ b/web-console/src/views/sql-data-loader-view/expression-editor-dialog/expression-editor-dialog.tsx
@@ -0,0 +1,107 @@
+/*
+ * 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 { Button, Classes, Dialog, FormGroup, InputGroup, Intent } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import { SqlExpression } from 'druid-query-toolkit';
+import React, { useState } from 'react';
+
+import { FlexibleQueryInput } from '../../workbench-view/flexible-query-input/flexible-query-input';
+
+import './expression-editor-dialog.scss';
+
+interface ExpressionEditorDialogProps {
+  title?: string;
+  includeOutputName?: boolean;
+  expression?: SqlExpression;
+  onSave(expression: SqlExpression): void;
+  onDelete?(): void;
+  onClose(): void;
+}
+
+export const ExpressionEditorDialog = React.memo(function ExpressionEditorDialog(
+  props: ExpressionEditorDialogProps,
+) {
+  const { title, includeOutputName, expression, onSave, onDelete, onClose } = props;
+
+  const [outputName, setOutputName] = useState<string>(() => expression?.getOutputName() || '');
+  const [formula, setFormula] = useState<string>(
+    () => expression?.getUnderlyingExpression()?.toString() || '',
+  );
+
+  const parsedExpression = formula ? SqlExpression.maybeParse(formula) : undefined;
+
+  return (
+    <Dialog
+      className="expression-editor-dialog"
+      onClose={onClose}
+      isOpen
+      title={title || 'Edit expression'}
+      canOutsideClickClose={false}
+    >
+      <div className={Classes.DIALOG_BODY}>
+        <FormGroup>
+          <FlexibleQueryInput
+            autoHeight={false}
+            showGutter={false}
+            placeholder="expression"
+            queryString={formula}
+            onQueryStringChange={setFormula}
+            columnMetadata={undefined}
+          />
+        </FormGroup>
+        {includeOutputName && (
+          <FormGroup label="Output name">
+            <InputGroup value={outputName} onChange={e => setOutputName(e.target.value)} />
+          </FormGroup>
+        )}
+      </div>
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          {onDelete && (
+            <Button
+              className="delete-button"
+              icon={IconNames.TRASH}
+              text="Delete"
+              intent={Intent.DANGER}
+              onClick={() => {
+                onDelete();
+                onClose();
+              }}
+            />
+          )}
+          <Button text="Close" onClick={onClose} />
+          <Button
+            text="Save"
+            intent={Intent.PRIMARY}
+            disabled={!parsedExpression}
+            onClick={() => {
+              if (!parsedExpression) return;
+              let newExpression = parsedExpression;
+              if (includeOutputName && newExpression.getOutputName() !== outputName) {
+                newExpression = newExpression.as(outputName);
+              }
+              onSave(newExpression);
+              onClose();
+            }}
+          />
+        </div>
+      </div>
+    </Dialog>
+  );
+});
diff --git a/web-console/src/views/sql-data-loader-view/ingestion-progress-dialog/ingestion-progress-dialog.scss b/web-console/src/views/sql-data-loader-view/ingestion-progress-dialog/ingestion-progress-dialog.scss
new file mode 100644
index 000000000000..00fd4ff825ee
--- /dev/null
+++ b/web-console/src/views/sql-data-loader-view/ingestion-progress-dialog/ingestion-progress-dialog.scss
@@ -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 '../../../variables';
+
+.ingestion-progress-dialog {
+  position: absolute;
+  top: 20%;
+  margin: 0;
+
+  &.loading {
+    &.#{$bp-ns}-dialog {
+      width: 75vw;
+    }
+
+    .#{$bp-ns}-dialog-close-button {
+      display: none;
+    }
+  }
+
+  .#{$bp-ns}-dialog-body {
+    min-height: 160px;
+  }
+}
diff --git a/web-console/src/views/sql-data-loader-view/ingestion-progress-dialog/ingestion-progress-dialog.tsx b/web-console/src/views/sql-data-loader-view/ingestion-progress-dialog/ingestion-progress-dialog.tsx
new file mode 100644
index 000000000000..b82166755a41
--- /dev/null
+++ b/web-console/src/views/sql-data-loader-view/ingestion-progress-dialog/ingestion-progress-dialog.tsx
@@ -0,0 +1,132 @@
+/*
+ * 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 { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import classNames from 'classnames';
+import { SqlTableRef } from 'druid-query-toolkit';
+import React, { useState } from 'react';
+
+import { Execution, QueryWithContext } from '../../../druid-models';
+import { executionBackgroundStatusCheck, reattachTaskExecution } from '../../../helpers';
+import { useQueryManager } from '../../../hooks';
+import { ExecutionProgressBarPane } from '../../workbench-view/execution-progress-bar-pane/execution-progress-bar-pane';
+import { ExecutionStagesPane } from '../../workbench-view/execution-stages-pane/execution-stages-pane';
+
+import './ingestion-progress-dialog.scss';
+
+interface IngestionProgressDialogProps {
+  taskId: string;
+  goToQuery(queryWithContext: QueryWithContext): void;
+  goToIngestion(taskId: string): void;
+  onReset(): void;
+  onClose(): void;
+}
+
+export const IngestionProgressDialog = React.memo(function IngestionProgressDialog(
+  props: IngestionProgressDialogProps,
+) {
+  const { taskId, goToQuery, goToIngestion, onReset, onClose } = props;
+  const [showLiveReports, setShowLiveReports] = useState(false);
+
+  const [insertResultState, ingestQueryManager] = useQueryManager<string, Execution, Execution>({
+    initQuery: taskId,
+    processQuery: async (id, cancelToken) => {
+      return await reattachTaskExecution({
+        id,
+        cancelToken,
+        preserveOnTermination: true,
+      });
+    },
+    backgroundStatusCheck: executionBackgroundStatusCheck,
+  });
+
+  return (
+    <Dialog
+      className={classNames('ingestion-progress-dialog', insertResultState.state)}
+      onClose={insertResultState.isLoading() ? undefined : onClose}
+      isOpen
+      title="Ingestion progress"
+      canOutsideClickClose={false}
+    >
+      <div className={Classes.DIALOG_BODY}>
+        {insertResultState.isLoading() && (
+          <>
+            <p>
+              The data is now being loaded. You can say here or do something else. The task can be
+              tracked from both the Query view and the Ingestion views.
+            </p>
+            <ExecutionProgressBarPane
+              execution={insertResultState.intermediate}
+              onCancel={() => ingestQueryManager.cancelCurrent()}
+              onToggleLiveReports={() => setShowLiveReports(!showLiveReports)}
+              showLiveReports={showLiveReports}
+            />
+            {insertResultState.intermediate?.stages && showLiveReports && (
+              <ExecutionStagesPane
+                execution={insertResultState.intermediate}
+                goToIngestion={goToIngestion}
+              />
+            )}
+          </>
+        )}
+        {insertResultState.isError() && (
+          <p>Error ingesting data: {insertResultState.getErrorMessage()}</p>
+        )}
+        {insertResultState.data && (
+          <p>Done loading data into {insertResultState.data.getIngestDatasource()}</p>
+        )}
+      </div>
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          {insertResultState.isLoading() && (
+            <Button
+              icon={IconNames.GANTT_CHART}
+              text="Go to Ingestion view"
+              rightIcon={IconNames.ARROW_TOP_RIGHT}
+              onClick={() => {
+                if (!insertResultState.intermediate) return;
+                goToIngestion(insertResultState.intermediate.id);
+              }}
+            />
+          )}
+          {insertResultState.isError() && <Button text="Close" onClick={onClose} />}
+          {insertResultState.data && (
+            <>
+              <Button icon={IconNames.RESET} text="Reset data loader" onClick={onReset} />
+              <Button
+                icon={IconNames.APPLICATION}
+                text={`Query: ${insertResultState.data.getIngestDatasource()}`}
+                rightIcon={IconNames.ARROW_TOP_RIGHT}
+                intent={Intent.PRIMARY}
+                onClick={() => {
+                  if (!insertResultState.data) return;
+                  goToQuery({
+                    queryString: `SELECT * FROM ${SqlTableRef.create(
+                      insertResultState.data.getIngestDatasource()!,
+                    )}`,
+                  });
+                }}
+              />
+            </>
+          )}
+        </div>
+      </div>
+    </Dialog>
+  );
+});
diff --git a/web-console/src/views/sql-data-loader-view/schema-step/column-list/column-list.scss b/web-console/src/views/sql-data-loader-view/schema-step/column-list/column-list.scss
new file mode 100644
index 000000000000..d550e945f0e5
--- /dev/null
+++ b/web-console/src/views/sql-data-loader-view/schema-step/column-list/column-list.scss
@@ -0,0 +1,61 @@
+/*
+ * 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 '../../../../variables';
+
+@mixin sunk-panel {
+  background: rgba($dark-gray1, 0.5);
+  border-radius: $pt-border-radius;
+  box-shadow: inset 0 1px 3px rgba($black, 0.32);
+}
+
+.column-list {
+  display: flex;
+  gap: 10px;
+
+  .list-column {
+    flex: 1;
+    position: relative;
+    @include sunk-panel;
+    overflow: auto;
+
+    .list-label {
+      position: absolute;
+      top: 5px;
+      left: 8px;
+    }
+
+    .list-container {
+      position: absolute;
+      top: 30px;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      padding: 5px 8px;
+      overflow: auto;
+    }
+
+    .placeholder {
+      position: absolute;
+      top: 45%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      user-select: none;
+    }
+  }
+}
diff --git a/web-console/src/views/sql-data-loader-view/schema-step/column-list/column-list.tsx b/web-console/src/views/sql-data-loader-view/schema-step/column-list/column-list.tsx
new file mode 100644
index 000000000000..a09376aae5b4
--- /dev/null
+++ b/web-console/src/views/sql-data-loader-view/schema-step/column-list/column-list.tsx
@@ -0,0 +1,156 @@
+/*
+ * 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 { Icon } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
+import { QueryResult, SqlExpression } from 'druid-query-toolkit';
+import React, { useMemo } from 'react';
+
+import { LearnMore, PopoverText } from '../../../../components';
+import { getLink } from '../../../../links';
+import { filterMap } from '../../../../utils';
+
+import { ExpressionEntry } from './expression-entry/expression-entry';
+
+import './column-list.scss';
+
+export interface ColumnListProps {
+  queryResult: QueryResult;
+  columnFilter?(columnName: string): boolean;
+  selectedColumnIndex: number;
+  onEditColumn(columnIndex: number): void;
+}
+
+export const ColumnList = function ColumnList(props: ColumnListProps) {
+  const { queryResult, columnFilter, selectedColumnIndex, onEditColumn } = props;
+
+  const dimensions = useMemo(() => {
+    const { sqlQuery } = queryResult;
+    if (!sqlQuery) return [];
+    return sqlQuery.hasGroupBy()
+      ? sqlQuery.getGroupedSelectExpressions()
+      : sqlQuery.getSelectExpressionsArray();
+  }, [queryResult]);
+
+  const metrics = useMemo(() => {
+    const { sqlQuery } = queryResult;
+    if (!sqlQuery) return;
+    return sqlQuery.hasGroupBy() ? sqlQuery.getAggregateSelectExpressions() : undefined;
+  }, [queryResult]);
+
+  function getColumnIndexForExpression(ex: SqlExpression): number {
+    if (!queryResult) return -1;
+    const outputName = ex.getOutputName();
+    return queryResult.header.findIndex(c => c.name === outputName);
+  }
+
+  return (
+    <div className="column-list">
+      <div className="list-column">
+        <div className="list-label">
+          {metrics ? (
+            <>
+              {'Dimensions '}
+              <Popover2
+                className="info-popover"
+                content={
+                  <PopoverText>
+                    <p>
+                      Dimension columns are stored as-is, so they can be filtered on, grouped by, or
+                      aggregated at query time. They are always single Strings, arrays of Strings,
+                      single Longs, single Doubles or single Floats.
+                    </p>
+                    <LearnMore href={`${getLink('DOCS')}/ingestion/schema-design.html`} />
+                  </PopoverText>
+                }
+                position="left-bottom"
+              >
+                <Icon icon={IconNames.INFO_SIGN} size={14} />
+              </Popover2>
+            </>
+          ) : (
+            'Columns'
+          )}
+        </div>
+        <div className="list-container">
+          {filterMap(dimensions, (ex, i) => {
+            const columnIndex = getColumnIndexForExpression(ex);
+            const column = queryResult.header[columnIndex];
+            if (columnFilter && !columnFilter(column.name)) return;
+
+            return (
+              <ExpressionEntry
+                key={i}
+                column={column}
+                headerIndex={columnIndex}
+                queryResult={queryResult}
+                grouped={metrics ? true : undefined}
+                selected={selectedColumnIndex === columnIndex}
+                onEditColumn={onEditColumn}
+              />
+            );
+          })}
+        </div>
+      </div>
+      {metrics && (
+        <div className="list-column">
+          <div className="list-label">
+            {'Metrics '}
+            <Popover2
+              className="info-popover"
+              content={
+                <PopoverText>
+                  <p>
+                    Metric columns are stored pre-aggregated, so they can only be aggregated at
+                    query time (not filtered or grouped by). They are often stored as numbers
+                    (integers or floats) but can also be stored as complex objects like HyperLogLog
+                    sketches or approximate quantile sketches.
+                  </p>
+                  <LearnMore href={`${getLink('DOCS')}/ingestion/schema-design.html`} />
+                </PopoverText>
+              }
+              position="left-bottom"
+            >
+              <Icon icon={IconNames.INFO_SIGN} size={14} />
+            </Popover2>
+          </div>
+          <div className="list-container">
+            {filterMap(metrics, (ex, i) => {
+              const columnIndex = getColumnIndexForExpression(ex);
+              const column = queryResult?.header[columnIndex];
+              if (columnFilter && !columnFilter(column.name)) return;
+
+              return (
+                <ExpressionEntry
+                  key={i}
+                  column={column}
+                  headerIndex={columnIndex}
+                  queryResult={queryResult}
+                  grouped={false}
+                  selected={selectedColumnIndex === columnIndex}
+                  onEditColumn={onEditColumn}
+                />
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/web-console/src/views/sql-data-loader-view/schema-step/column-list/expression-entry/expression-entry.scss b/web-console/src/views/sql-data-loader-view/schema-step/column-list/expression-entry/expression-entry.scss
new file mode 100644
index 000000000000..bb1d1f2edb4f
--- /dev/null
+++ b/web-console/src/views/sql-data-loader-view/schema-step/column-list/expression-entry/expression-entry.scss
@@ -0,0 +1,82 @@
+/*
+ * 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 '../../../../../variables';
+
+.expression-entry {
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  cursor: pointer;
+  margin-bottom: 5px;
+
+  @include card-like;
+  padding: 4px 7px;
+  height: 46px;
+  user-select: none;
+
+  &.timestamp {
+    background: rgba($cobalt3, 0.44);
+  }
+
+  &.dimension {
+    background: rgba($green3, 0.3);
+
+    &.bigint,
+    &.float,
+    &.double {
+      background: rgba($blue3, 0.3);
+    }
+  }
+
+  &.metric {
+    background: rgba($rose2, 0.16);
+  }
+
+  .type-icon {
+    position: absolute;
+    top: 6px;
+    left: 6px;
+  }
+
+  .output-name {
+    padding-left: 20px;
+
+    .type-name {
+      opacity: 0.6;
+    }
+  }
+
+  .expression {
+    padding-left: 20px;
+    opacity: 0.5;
+    font-family: monospace;
+  }
+
+  &.selected::after {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    content: '';
+    border: 2px solid $blue4;
+    border-radius: $pt-border-radius;
+    pointer-events: none;
+  }
+}
diff --git a/web-console/src/views/sql-data-loader-view/schema-step/column-list/expression-entry/expression-entry.tsx b/web-console/src/views/sql-data-loader-view/schema-step/column-list/expression-entry/expression-entry.tsx
new file mode 100644
index 000000000000..eca01b39889e
--- /dev/null
+++ b/web-console/src/views/sql-data-loader-view/schema-step/column-list/expression-entry/expression-entry.tsx
@@ -0,0 +1,70 @@
+/*
+ * 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 { Icon } from '@blueprintjs/core';
+import classNames from 'classnames';
+import { Column, QueryResult, SqlRef } from 'druid-query-toolkit';
+import React from 'react';
+
+import { columnToIcon } from '../../../../../utils';
+
+import './expression-entry.scss';
+
+interface ExpressionEntryProps {
+  column: Column;
+  headerIndex: number;
+  queryResult: QueryResult;
+  grouped?: boolean;
+  selected: boolean;
+  onEditColumn(columnIndex: number): void;
+}
+
+export const ExpressionEntry = function ExpressionEntry(props: ExpressionEntryProps) {
+  const { column, headerIndex, queryResult, grouped, selected, onEditColumn } = props;
+
+  const expression = queryResult.sqlQuery?.getSelectExpressionForIndex(headerIndex);
+  if (!expression) return null;
+
+  const icon = columnToIcon(column);
+  return (
+    <div
+      className={
+        grouped === false
+          ? classNames('expression-entry', 'metric', { selected })
+          : classNames(
+              'expression-entry',
+              column.isTimeColumn() ? 'timestamp' : 'dimension',
+              column.sqlType?.toLowerCase(),
+              { selected },
+            )
+      }
+      onClick={() => onEditColumn(headerIndex)}
+    >
+      {icon && <Icon className="type-icon" icon={icon} size={14} />}
+      <div className="output-name">
+        {expression.getOutputName() || 'EXPR?'}
+        <span className="type-name">{` :: ${column.nativeType}`}</span>
+      </div>
+      {!(expression instanceof SqlRef) && (
+        <div className="expression">
+          {expression.getUnderlyingExpression().prettify({ keywordCasing: 'preserve' }).toString()}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/web-console/src/views/sql-data-loader-view/schema-step/preview-error/preview-error.scss b/web-console/src/views/sql-data-loader-view/schema-step/preview-error/preview-error.scss
new file mode 100644
index 000000000000..a7e0ea714b9b
--- /dev/null
+++ b/web-console/src/views/sql-data-loader-view/schema-step/preview-error/preview-error.scss
@@ -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 '../../../../variables';
+
+@mixin sunk-panel {
+  background: rgba($dark-gray1, 0.5);
+  border-radius: $pt-border-radius;
+  box-shadow: inset 0 1px 3px rgba($black, 0.32);
+}
+
+.preview-error {
+  @include sunk-panel;
+  padding: 20px;
+
+  .error-message {
+    max-width: 700px;
+    margin-bottom: 15px;
+  }
+}
diff --git a/web-console/src/views/sql-data-loader-view/schema-step/preview-error/preview-error.tsx b/web-console/src/views/sql-data-loader-view/schema-step/preview-error/preview-error.tsx
new file mode 100644
index 000000000000..fe82c4f65d0b
--- /dev/null
+++ b/web-console/src/views/sql-data-loader-view/schema-step/preview-error/preview-error.tsx
@@ -0,0 +1,41 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Button } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import React from 'react';
+
+import './preview-error.scss';
+
+interface PreviewErrorProps {
+  errorMessage: string;
+  onRevert?: () => void;
+}
+
+export const PreviewError = function PreviewError(props: PreviewErrorProps) {
+  const { errorMessage, onRevert } = props;
+
+  return (
+    <div className="preview-error">
+      <div className="error-message">{errorMessage}</div>
+      {onRevert && (
+        <Button icon={IconNames.UNDO} text="Revert to last working state" onClick={onRevert} />
+      )}
+    </div>
+  );
+};
diff --git a/web-console/src/views/sql-data-loader-view/schema-step/preview-table/preview-table.scss b/web-console/src/views/sql-data-loader-view/schema-step/preview-table/preview-table.scss
new file mode 100644
index 000000000000..f43130604d7e
--- /dev/null
+++ b/web-console/src/views/sql-data-loader-view/schema-step/preview-table/preview-table.scss
@@ -0,0 +1,146 @@
+/*
+ * 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 '../../../../variables';
+@import '../../../../blueprint-overrides/common/colors';
+
+.preview-table {
+  position: relative;
+
+  .ReactTable {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    font-feature-settings: tnum;
+    font-variant-numeric: tabular-nums;
+
+    .rt-thead.-header {
+      box-shadow: 0 1px 0 0 rgba(black, 0.2); // This is a hack! this line is sometimes too weak in tables.
+
+      .rt-th {
+        &.selected::after {
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          content: '';
+          border: 2px solid $blue4;
+          border-radius: $pt-border-radius;
+          pointer-events: none;
+        }
+
+        &.timestamp {
+          background: rgba($cobalt3, 0.44);
+        }
+
+        &.dimension {
+          background: rgba($green3, 0.3);
+
+          &.bigint,
+          &.float,
+          &.double {
+            background: rgba($blue3, 0.3);
+          }
+        }
+
+        &.metric {
+          background: rgba($rose2, 0.16);
+        }
+
+        &.first-metric {
+          border-left: 2px solid rgba(194, 39, 98, 0.7);
+        }
+
+        .header-wrapper {
+          padding: $table-cell-v-padding $table-cell-h-padding;
+          cursor: pointer;
+          height: 55px;
+        }
+
+        .output-name {
+          overflow: hidden;
+          text-overflow: ellipsis;
+
+          > * {
+            display: inline-block;
+            vertical-align: top;
+          }
+
+          .type-icon {
+            margin-top: 3px;
+            margin-right: 5px;
+          }
+
+          .filter-icon {
+            margin-top: 1px;
+            margin-left: 3px;
+          }
+        }
+
+        .formula {
+          font-family: monospace;
+          font-size: 11px;
+          margin-top: 4px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+
+    .rt-td {
+      cursor: pointer;
+
+      &.timestamp {
+        background: rgba($cobalt3, 0.16);
+      }
+
+      &.dimension {
+        background: rgba($green3, 0.12);
+
+        &.bigint,
+        &.float,
+        &.double {
+          background: rgba($blue3, 0.1);
+        }
+      }
+
+      &.metric {
+        background: rgba($rose2, 0.07);
+      }
+
+      &.first-metric {
+        border-left: 2px solid rgba(194, 39, 98, 0.7);
+      }
+    }
+  }
+
+  .clickable-cell {
+    cursor: pointer;
+    width: 100%;
+  }
+
+  .#{$bp-ns}-popover2-target {
+    width: 100%;
+  }
+
+  .aggregate-column {
+    background-color: rgba($druid-brand, 0.06);
+  }
+}
diff --git a/web-console/src/views/sql-data-loader-view/schema-step/preview-table/preview-table.tsx b/web-console/src/views/sql-data-loader-view/schema-step/preview-table/preview-table.tsx
new file mode 100644
index 000000000000..f2276f613fcc
--- /dev/null
+++ b/web-console/src/views/sql-data-loader-view/schema-step/preview-table/preview-table.tsx
@@ -0,0 +1,222 @@
+/*
+ * 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 { Icon, Menu, MenuItem } from '@blueprintjs/core';
+import { IconName, IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
+import classNames from 'classnames';
+import {
+  Column,
+  QueryResult,
+  SqlAlias,
+  SqlExpression,
+  SqlLiteral,
+  SqlQuery,
+  SqlStar,
+} from 'druid-query-toolkit';
+import React, { useState } from 'react';
+import ReactTable from 'react-table';
+
+import { BracedText, Deferred, TableCell } from '../../../../components';
+import { ShowValueDialog } from '../../../../dialogs/show-value-dialog/show-value-dialog';
+import {
+  columnToIcon,
+  columnToWidth,
+  filterMap,
+  getNumericColumnBraces,
+  prettyPrintSql,
+  QueryAction,
+  stringifyValue,
+} from '../../../../utils';
+
+import './preview-table.scss';
+
+function isDate(v: any): v is Date {
+  return Boolean(v && typeof v.toISOString === 'function');
+}
+
+function isComparable(x: unknown): boolean {
+  return x !== null && x !== '' && !isNaN(Number(x));
+}
+
+function getExpressionIfAlias(query: SqlQuery, selectIndex: number): string {
+  const ex = query.getSelectExpressionForIndex(selectIndex);
+
+  if (query.isRealOutputColumnAtSelectIndex(selectIndex)) {
+    if (ex instanceof SqlAlias) {
+      return String(ex.expression.prettify({ keywordCasing: 'preserve' }));
+    } else {
+      return '';
+    }
+  } else if (ex instanceof SqlStar) {
+    return '';
+  } else {
+    return ex ? String(ex.prettify({ keywordCasing: 'preserve' })) : '';
+  }
+}
+
+export interface PreviewTableProps {
+  queryResult: QueryResult;
+  onQueryAction(action: QueryAction): void;
+  columnFilter?(columnName: string): boolean;
+  selectedColumnIndex: number;
+  onEditColumn(index: number): void;
+}
+
+export const PreviewTable = React.memo(function PreviewTable(props: PreviewTableProps) {
+  const { queryResult, onQueryAction, columnFilter, selectedColumnIndex, onEditColumn } = props;
+  const [showValue, setShowValue] = useState<string>();
+
+  const parsedQuery: SqlQuery = queryResult.sqlQuery!;
+  if (!parsedQuery) return null;
+
+  function hasFilterOnHeader(header: string, headerIndex: number): boolean {
+    if (!parsedQuery || !parsedQuery.isRealOutputColumnAtSelectIndex(headerIndex)) return false;
+
+    return (
+      parsedQuery.getEffectiveWhereExpression().containsColumn(header) ||
+      parsedQuery.getEffectiveHavingExpression().containsColumn(header)
+    );
+  }
+
+  function filterOnMenuItem(icon: IconName, clause: SqlExpression) {
+    return (
+      <MenuItem
+        icon={icon}
+        text={`Filter on: ${prettyPrintSql(clause)}`}
+        onClick={() => {
+          onQueryAction(q => q.addWhere(clause));
+        }}
+      />
+    );
+  }
+
+  function getCellMenu(column: Column, headerIndex: number, value: unknown) {
+    const val = SqlLiteral.maybe(value);
+    const showFullValueMenuItem = (
+      <MenuItem
+        icon={IconNames.EYE_OPEN}
+        text="Show full value"
+        onClick={() => {
+          setShowValue(stringifyValue(value));
+        }}
+      />
+    );
+
+    let ex: SqlExpression | undefined;
+    if (!parsedQuery.isAggregateSelectIndex(headerIndex)) {
+      const selectValue = parsedQuery.getSelectExpressionForIndex(headerIndex);
+      if (selectValue) {
+        ex = selectValue.getUnderlyingExpression();
+      }
+    }
+
+    const jsonColumn = column.nativeType === 'COMPLEX<json>';
+    return (
+      <Menu>
+        {ex && val && !jsonColumn && (
+          <>
+            {filterOnMenuItem(IconNames.FILTER, ex.equal(val))}
+            {filterOnMenuItem(IconNames.FILTER, ex.unequal(val))}
+            {isComparable(value) && (
+              <>
+                {filterOnMenuItem(IconNames.FILTER, ex.greaterThanOrEqual(val))}
+                {filterOnMenuItem(IconNames.FILTER, ex.lessThanOrEqual(val))}
+              </>
+            )}
+          </>
+        )}
+        {showFullValueMenuItem}
+      </Menu>
+    );
+  }
+
+  const numericColumnBraces = getNumericColumnBraces(queryResult);
+  return (
+    <div className="preview-table">
+      <ReactTable
+        className="-striped -highlight"
+        data={queryResult.rows as any[][]}
+        noDataText={queryResult.rows.length ? '' : 'Preview returned no data'}
+        defaultPageSize={25}
+        showPagination={false}
+        sortable={false}
+        columns={filterMap(queryResult.header, (column, i) => {
+          const h = column.name;
+          if (columnFilter && !columnFilter(h)) return;
+
+          const icon = columnToIcon(column);
+          const selected = selectedColumnIndex === i;
+
+          const columnClassName = parsedQuery.isAggregateSelectIndex(i)
+            ? classNames('metric', `column${i}`, {
+                selected,
+                'first-metric': i > 0 && !parsedQuery.isAggregateSelectIndex(i - 1),
+              })
+            : classNames(
+                column.isTimeColumn() ? 'timestamp' : 'dimension',
+                `column${i}`,
+                column.sqlType?.toLowerCase(),
+                { selected },
+              );
+
+          return {
+            Header() {
+              return (
+                <div className="header-wrapper" onClick={() => onEditColumn(i)}>
+                  <div className="output-name">
+                    {icon && <Icon className="type-icon" icon={icon} size={12} />}
+                    {h}
+                    {hasFilterOnHeader(h, i) && (
+                      <Icon className="filter-icon" icon={IconNames.FILTER} size={14} />
+                    )}
+                  </div>
+                  <div className="formula">{getExpressionIfAlias(parsedQuery, i)}</div>
+                </div>
+              );
+            },
+            headerClassName: columnClassName,
+            className: columnClassName,
+            width: columnToWidth(column),
+            accessor: String(i),
+            Cell(row) {
+              const value = row.value;
+              return (
+                <div>
+                  <Popover2 content={<Deferred content={() => getCellMenu(column, i, value)} />}>
+                    {numericColumnBraces[i] ? (
+                      <BracedText
+                        className="table-padding"
+                        text={isDate(value) ? value.toISOString() : String(value)}
+                        braces={numericColumnBraces[i]}
+                        padFractionalPart
+                      />
+                    ) : (
+                      <TableCell value={value} unlimited />
+                    )}
+                  </Popover2>
+                </div>
+              );
+            },
+          };
+        })}
+      />
+      {showValue && <ShowValueDialog onClose={() => setShowValue(undefined)} str={showValue} />}
+    </div>
+  );
+});
diff --git a/web-console/src/views/sql-data-loader-view/schema-step/rollup-analysis-pane/rollup-analysis-pane.scss b/web-console/src/views/sql-data-loader-view/schema-step/rollup-analysis-pane/rollup-analysis-pane.scss
new file mode 100644
index 000000000000..edb59630f37b
--- /dev/null
+++ b/web-console/src/views/sql-data-loader-view/schema-step/rollup-analysis-pane/rollup-analysis-pane.scss
@@ -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 '../../../../variables';
+
+.rollup-analysis-pane {
+  .close {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  .strong {
+    color: orange;
+  }
+
+  .suggestion {
+    margin-right: 6px;
+  }
+}
diff --git a/web-console/src/views/sql-data-loader-view/schema-step/rollup-analysis-pane/rollup-analysis-pane.tsx b/web-console/src/views/sql-data-loader-view/schema-step/rollup-analysis-pane/rollup-analysis-pane.tsx
new file mode 100644
index 000000000000..a53eff649574
--- /dev/null
+++ b/web-console/src/views/sql-data-loader-view/schema-step/rollup-analysis-pane/rollup-analysis-pane.tsx
@@ -0,0 +1,342 @@
+/*
+ * 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 { Button, Callout, Intent, Tag } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import { CancelToken } from 'axios';
+import { QueryResult, SqlExpression, SqlFunction, SqlQuery } from 'druid-query-toolkit';
+import React, { useEffect } from 'react';
+
+import { Execution } from '../../../../druid-models';
+import { executionBackgroundStatusCheck, submitTaskQuery } from '../../../../helpers';
+import { useQueryManager } from '../../../../hooks';
+import { filterMap, formatPercentClapped, IntermediateQueryState } from '../../../../utils';
+
+import './rollup-analysis-pane.scss';
+
+const CAST_AS_VARCHAR_TEMPLATE = SqlExpression.parse(`NVL(CAST(? AS VARCHAR), '__NULL__')`);
+const CAST_TIMESTAMP_TEMPLATE = SqlExpression.parse(`CAST(TIMESTAMP_TO_MILLIS(?) AS VARCHAR)`);
+const CAST_ARRAY_TEMPLATE = SqlExpression.parse(`MV_TO_STRING(?, ',')`);
+
+function expressionCastToString(ex: SqlExpression): SqlExpression {
+  if (ex instanceof SqlFunction) {
+    switch (ex.getEffectiveFunctionName()) {
+      case 'TIME_PARSE':
+        return CAST_TIMESTAMP_TEMPLATE.fillPlaceholders([ex]);
+
+      case 'MV_TO_ARRAY':
+        return CAST_ARRAY_TEMPLATE.fillPlaceholders([ex]);
+    }
+  }
+
+  return CAST_AS_VARCHAR_TEMPLATE.fillPlaceholders([ex]);
+}
+
+function countDistinct(ex: SqlExpression): SqlExpression {
+  return SqlFunction.simple('APPROX_COUNT_DISTINCT_DS_HLL', [ex]);
+}
+
+function within(a: number, b: number, percent: number): boolean {
+  return Math.abs(a - b) / Math.abs(Math.min(a, b)) < percent;
+}
+
+function pairs(n: number): [number, number][] {
+  const p: [number, number][] = [];
+  for (let i = 0; i < n - 1; i++) {
+    for (let j = i + 1; j < n; j++) {
+      p.push([i, j]);
+    }
+  }
+  return p;
+}
+
+interface AnalyzeQuery {
+  expressions: readonly SqlExpression[];
+  deep: boolean;
+}
+
+interface AnalyzeResult {
+  deep: boolean;
+  count: number;
+  overall: number;
+  counts: number[];
+  pairCounts: number[];
+  implications: Implication[];
+}
+
+function queryResultToAnalysis(
+  analyzeQuery: AnalyzeQuery,
+  queryResult: QueryResult,
+): AnalyzeResult {
+  const row = queryResult.rows[0];
+  const numExpressions = analyzeQuery.expressions.length;
+
+  const counts = row.slice(2, numExpressions + 2);
+  const pairCounts = row.slice(numExpressions + 2);
+  return {
+    deep: analyzeQuery.deep,
+    count: row[0],
+    overall: row[1],
+    counts,
+    pairCounts,
+    implications: getImplications(counts, pairCounts),
+  };
+}
+
+type ImplicationType = 'implication' | 'equivalent';
+
+interface Implication {
+  type: ImplicationType;
+  a: number;
+  b: number;
+}
+
+function getImplications(counts: number[], pairCounts: number[]): Implication[] {
+  const pairIndexes = pairs(counts.length);
+
+  return filterMap(pairIndexes, ([i, j], index): Implication | undefined => {
+    const pairCount = pairCounts[index];
+    if (counts[i] < 2) return;
+    if (counts[j] < 2) return;
+    const iImpliesJ = within(counts[i], pairCount, 0.01);
+    const jImpliesI = within(counts[j], pairCount, 0.01);
+
+    if (iImpliesJ && jImpliesI) {
+      return { type: 'equivalent', a: i, b: j };
+    } else if (iImpliesJ) {
+      return { type: 'implication', a: i, b: j };
+    } else if (jImpliesI) {
+      return { type: 'implication', a: j, b: i };
+    }
+
+    return;
+  }).sort((x, y) => {
+    const diffA = x.a - y.a;
+    if (diffA !== 0) return diffA;
+    return x.b - y.b;
+  });
+}
+
+interface RollupAnalysisPaneProps {
+  dimensions: readonly SqlExpression[];
+  seedQuery: SqlQuery;
+  queryResult: QueryResult | undefined;
+  onEditColumn(columnIndex: number): void;
+  onClose(): void;
+}
+
+export const RollupAnalysisPane = React.memo(function RollupAnalysisPane(
+  props: RollupAnalysisPaneProps,
+) {
+  const { dimensions, seedQuery, queryResult, onEditColumn, onClose } = props;
+
+  const [analyzeQueryState, analyzeQueryManager] = useQueryManager<
+    AnalyzeQuery,
+    AnalyzeResult,
+    Execution
+  >({
+    processQuery: async (analyzeQuery: AnalyzeQuery, cancelToken) => {
+      const { expressions, deep } = analyzeQuery;
+
+      const groupedAsStrings = expressions.map(ex =>
+        expressionCastToString(ex.getUnderlyingExpression()),
+      );
+
+      const expressionPairs: SqlExpression[] = deep
+        ? pairs(expressions.length).map(([i, j]) =>
+            countDistinct(SqlFunction.simple('CONCAT', [groupedAsStrings[i], groupedAsStrings[j]])),
+          )
+        : [];
+
+      const queryString = seedQuery
+        .changeSelectExpressions(groupedAsStrings.map(countDistinct).concat(expressionPairs))
+        .addSelect(countDistinct(SqlFunction.simple('CONCAT', groupedAsStrings)), {
+          insertIndex: 0,
+        })
+        .addSelect(SqlFunction.COUNT_STAR, { insertIndex: 0 })
+        .changeGroupByExpressions([])
+        .changeHavingClause(undefined)
+        .changeOrderByClause(undefined)
+        .toString();
+
+      const res = await submitTaskQuery({
+        query: queryString,
+        context: {},
+        cancelToken,
+      });
+
+      if (res instanceof IntermediateQueryState) return res;
+
+      if (res.result) {
+        return queryResultToAnalysis(analyzeQuery, res.result);
+      } else {
+        throw new Error(res.getErrorMessage() || 'unexpected destination');
+      }
+    },
+    backgroundStatusCheck: async (
+      execution: Execution,
+      analyzeQuery: AnalyzeQuery,
+      cancelToken: CancelToken,
+    ) => {
+      const res = await executionBackgroundStatusCheck(execution, analyzeQuery, cancelToken);
+      if (res instanceof IntermediateQueryState) return res;
+
+      if (res.result) {
+        return queryResultToAnalysis(analyzeQuery, res.result);
+      } else {
+        throw new Error(res.getErrorMessage() || 'unexpected destination');
+      }
+    },
+  });
+
+  const analysis = analyzeQueryState.data;
+
+  useEffect(() => {
+    if (!analysis) return;
+    analyzeQueryManager.reset();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [queryResult]);
+
+  function renderOverallResult() {
+    if (!analysis) return;
+    const rollup = analysis.overall / analysis.count;
+    return (
+      <p>
+        {`Estimated size after rollup is `}
+        <span className="strong">{formatPercentClapped(rollup)}</span>
+        {` of raw data size. `}
+        {rollup < 0.8 ? (
+          <span className="strong">That is decent.</span>
+        ) : (
+          <>
+            At this rate rollup is <span className="strong">not worth it</span>.
+          </>
+        )}
+      </p>
+    );
+  }
+
+  function renderDimension(dimensionIndex: number) {
+    if (!queryResult) return;
+    const outputName = dimensions[dimensionIndex].getOutputName();
+    const headerIndex = queryResult.header.findIndex(c => c.name === outputName);
+    if (headerIndex === -1) return;
+
+    return (
+      <Tag interactive intent={Intent.WARNING} onClick={() => onEditColumn(headerIndex)}>
+        {outputName}
+      </Tag>
+    );
+  }
+
+  let singleDimensionSuggestions: JSX.Element[] = [];
+  let pairDimensionSuggestions: JSX.Element[] = [];
+  let implicationSuggestions: JSX.Element[] = [];
+  if (analysis) {
+    const { count, counts, pairCounts, implications } = analysis;
+
+    singleDimensionSuggestions = filterMap(counts, (c, i) => {
+      const variability = c / count;
+      if (variability < 0.8) return;
+      return (
+        <span className="suggestion" key={`single_${i}`}>
+          {renderDimension(i)}
+          {` has variability of ${formatPercentClapped(variability)}`}
+        </span>
+      );
+    });
+
+    pairDimensionSuggestions = filterMap(pairs(analysis.counts.length), ([i, j], index) => {
+      if (typeof pairCounts[index] !== 'number') return;
+      const variability = pairCounts[index] / count;
+      if (variability < 0.8) return;
+      return (
+        <span className="suggestion" key={`pair_${index}`}>
+          {renderDimension(i)}
+          {' together with '}
+          {renderDimension(j)}
+          {` has variability of ${formatPercentClapped(variability)}`}
+        </span>
+      );
+    });
+
+    implicationSuggestions = filterMap(dimensions, (_d, i) => {
+      if (implications.some(imp => imp.type === 'implication' && imp.b === i)) return;
+      return (
+        <span className="suggestion" key={`imp_${i}`}>
+          {'Remove '}
+          {renderDimension(i)}
+          {` (variability of ${formatPercentClapped(counts[i] / count)})`}
+        </span>
+      );
+    });
+  }
+
+  return (
+    <Callout className="rollup-analysis-pane">
+      <Button className="close" icon={IconNames.CROSS} onClick={onClose} minimal />
+      {analyzeQueryState.isInit() && (
+        <>
+          <p>
+            Use this tool to analyze which dimensions are preventing the data from rolling up
+            effectively.
+          </p>
+          <p>
+            <Button
+              text="Run rollup analysis"
+              onClick={() => {
+                analyzeQueryManager.runQuery({ expressions: dimensions, deep: false });
+              }}
+            />
+          </p>
+        </>
+      )}
+      {analyzeQueryState.isLoading() && <p>Loading analysis...</p>}
+      {renderOverallResult()}
+      {singleDimensionSuggestions.length === 0 && analysis && !analysis.deep && (
+        <p>
+          <Button
+            text="Deep analysis"
+            onClick={() => {
+              analyzeQueryManager.runQuery({ expressions: dimensions, deep: true });
+            }}
+          />
+        </p>
+      )}
+      {(singleDimensionSuggestions.length || pairDimensionSuggestions.length > 0) && (
+        <>
+          <p>Poor rollup is caused by:</p>
+          <p>
+            {singleDimensionSuggestions}
+            {pairDimensionSuggestions}
+          </p>
+        </>
+      )}
+      {analysis?.deep &&
+        !singleDimensionSuggestions.length &&
+        !pairDimensionSuggestions.length &&
+        implicationSuggestions.length > 0 && (
+          <>
+            <p>Possible actions to improve rollup:</p>
+            <p>{implicationSuggestions}</p>
+          </>
+        )}
+      {analyzeQueryState.isError() && <p>{analyzeQueryState.getErrorMessage()}</p>}
+    </Callout>
+  );
+});
diff --git a/web-console/src/views/sql-data-loader-view/schema-step/schema-step.scss b/web-console/src/views/sql-data-loader-view/schema-step/schema-step.scss
new file mode 100644
index 000000000000..10345224ab7f
--- /dev/null
+++ b/web-console/src/views/sql-data-loader-view/schema-step/schema-step.scss
@@ -0,0 +1,147 @@
+/*
+ * 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 '../../../variables';
+
+$loader-controls-height: 30px;
+$rollup-analysis-height: 160px;
+$controls-width: 305px;
+$gap: 15px;
+
+.schema-step {
+  .destination-button .#{$bp-ns}-button-text {
+    max-width: 230px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 150%;
+  }
+
+  .schema-container {
+    .loader-controls {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: $loader-controls-height;
+
+      .control-line {
+        white-space: nowrap;
+
+        & > * {
+          display: inline-block;
+          vertical-align: top;
+        }
+      }
+
+      .left {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+
+        & > * {
+          margin-right: 10px;
+        }
+      }
+
+      .right {
+        position: absolute;
+        bottom: 0;
+        right: $controls-width + $gap;
+
+        & > * {
+          margin-left: 10px;
+        }
+
+        .column-filter-control {
+          width: 250px;
+        }
+      }
+
+      .time-column-warning {
+        margin-left: 10px;
+      }
+    }
+
+    .preview {
+      position: absolute;
+      top: $loader-controls-height + $gap;
+      bottom: 0;
+      left: 0;
+      right: $controls-width + $gap;
+
+      .preview-table,
+      .column-list,
+      .flexible-query-input,
+      .preview-error {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .controls {
+      position: absolute;
+      top: $loader-controls-height + $gap;
+      bottom: 0;
+      right: 0;
+      width: $controls-width;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+
+      .time-column-warning {
+        .#{$bp-ns}-heading {
+          margin-bottom: 15px;
+        }
+      }
+
+      .top-controls {
+        flex: 1;
+        overflow: auto;
+      }
+
+      .bottom-controls {
+        .prev-next-bar {
+          position: relative;
+          padding-top: 15px;
+
+          .next {
+            position: absolute;
+            right: 0;
+            bottom: 0;
+          }
+        }
+      }
+    }
+
+    .rollup-analysis-pane {
+      position: absolute;
+      top: $loader-controls-height + $gap;
+      height: $rollup-analysis-height;
+      left: 0;
+      right: $controls-width + $gap;
+      width: auto;
+    }
+
+    &.with-analysis {
+      .preview {
+        top: $loader-controls-height + $gap + $rollup-analysis-height + $gap;
+      }
+    }
+  }
+}
diff --git a/web-console/src/views/sql-data-loader-view/schema-step/schema-step.tsx b/web-console/src/views/sql-data-loader-view/schema-step/schema-step.tsx
new file mode 100644
index 000000000000..489c2f393eba
--- /dev/null
+++ b/web-console/src/views/sql-data-loader-view/schema-step/schema-step.tsx
@@ -0,0 +1,983 @@
+/*
+ * 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 {
+  AnchorButton,
+  Button,
+  ButtonGroup,
+  Callout,
+  FormGroup,
+  Intent,
+  Menu,
+  MenuDivider,
+  MenuItem,
+  Tag,
+} from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
+import classNames from 'classnames';
+import { select, selectAll } from 'd3-selection';
+import {
+  QueryResult,
+  QueryRunner,
+  SqlExpression,
+  SqlFunction,
+  SqlQuery,
+  SqlRef,
+} from 'druid-query-toolkit';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+
+import { ClearableInput, LearnMore, Loader } from '../../../components';
+import { AsyncActionDialog } from '../../../dialogs';
+import {
+  changeQueryPatternExpression,
+  Execution,
+  externalConfigToTableExpression,
+  fitIngestQueryPattern,
+  getDestinationMode,
+  getQueryPatternExpression,
+  getQueryPatternExpressionType,
+  IngestQueryPattern,
+  ingestQueryPatternToQuery,
+  possibleDruidFormatForValues,
+  TIME_COLUMN,
+  WorkbenchQueryPart,
+} from '../../../druid-models';
+import {
+  executionBackgroundResultStatusCheck,
+  extractResult,
+  submitTaskQuery,
+} from '../../../helpers';
+import { useLastDefined, usePermanentCallback, useQueryManager } from '../../../hooks';
+import { getLink } from '../../../links';
+import { AppToaster } from '../../../singletons';
+import {
+  caseInsensitiveContains,
+  change,
+  dataTypeToIcon,
+  DruidError,
+  filterMap,
+  oneOf,
+  QueryAction,
+  queryDruidSql,
+  sampleDataToQuery,
+  tickIcon,
+  timeFormatToSql,
+  wait,
+  without,
+} from '../../../utils';
+import { FlexibleQueryInput } from '../../workbench-view/flexible-query-input/flexible-query-input';
+import { ColumnActions } from '../column-actions/column-actions';
+import { ColumnEditor } from '../column-editor/column-editor';
+import { DestinationDialog } from '../destination-dialog/destination-dialog';
+import { ExpressionEditorDialog } from '../expression-editor-dialog/expression-editor-dialog';
+import { TitleFrame } from '../title-frame/title-frame';
+
+import { ColumnList } from './column-list/column-list';
+import { PreviewError } from './preview-error/preview-error';
+import { PreviewTable } from './preview-table/preview-table';
+import { RollupAnalysisPane } from './rollup-analysis-pane/rollup-analysis-pane';
+
+import './schema-step.scss';
+
+const queryRunner = new QueryRunner();
+
+function digestQueryString(queryString: string): {
+  ingestQueryPattern?: IngestQueryPattern;
+  ingestPatternError?: string;
+  parsedQuery?: SqlQuery;
+} {
+  let ingestQueryPattern: IngestQueryPattern | undefined;
+  const parsedQuery = SqlQuery.maybeParse(queryString);
+  let ingestPatternError: string | undefined;
+  if (parsedQuery) {
+    try {
+      ingestQueryPattern = fitIngestQueryPattern(parsedQuery);
+    } catch (e) {
+      ingestPatternError = e.message;
+    }
+  } else {
+    ingestPatternError = 'Unparsable query';
+  }
+
+  return {
+    ingestQueryPattern,
+    ingestPatternError,
+    parsedQuery,
+  };
+}
+
+interface TimeSuggestion {
+  label: string | JSX.Element;
+  queryAction: QueryAction;
+}
+
+function getTimeSuggestions(queryResult: QueryResult, parsedQuery: SqlQuery): TimeSuggestion[] {
+  const hasGroupBy = parsedQuery.hasGroupBy();
+  const timeColumnIndex = queryResult.header.findIndex(({ name }) => name === TIME_COLUMN);
+  if (timeColumnIndex !== -1) {
+    const timeColumn = queryResult.header[timeColumnIndex];
+    switch (timeColumn.sqlType) {
+      case 'TIMESTAMP':
+        return []; // All good, nothing to do
+
+      case 'VARCHAR':
+      case 'BIGINT': {
+        const selectExpression = parsedQuery.getSelectExpressionForIndex(timeColumnIndex);
+        if (!selectExpression) return [];
+
+        const values = queryResult.rows.map(row => row[timeColumnIndex]);
+        const possibleDruidFormat = possibleDruidFormatForValues(values);
+        const formatSql = possibleDruidFormat ? timeFormatToSql(possibleDruidFormat) : undefined;
+        if (!formatSql) return [];
+        const newSelectExpression = formatSql.fillPlaceholders([
+          selectExpression.getUnderlyingExpression(),
+        ]);
+
+        return [
+          {
+            label: `Parse as '${possibleDruidFormat}'`,
+            queryAction: q =>
+              q.removeSelectIndex(timeColumnIndex).addSelect(newSelectExpression.as(TIME_COLUMN), {
+                insertIndex: 0,
+                addToGroupBy: hasGroupBy ? 'start' : undefined,
+              }),
+          },
+        ];
+      }
+
+      default:
+        return [
+          {
+            label: `Remove __time column which is of an unusable type ${timeColumn.sqlType}`,
+            queryAction: q => q.removeSelectIndex(timeColumnIndex),
+          },
+        ];
+    }
+  } else {
+    const suggestions: TimeSuggestion[] = filterMap(queryResult.header, (c, i) => {
+      const selectExpression = parsedQuery.getSelectExpressionForIndex(i);
+      if (!selectExpression) return;
+
+      if (c.sqlType === 'TIMESTAMP') {
+        return {
+          label: (
+            <>
+              {'Use '}
+              <strong>{c.name}</strong>
+              {' as the primary time column'}
+            </>
+          ),
+          queryAction: q =>
+            q.removeSelectIndex(timeColumnIndex).addSelect(selectExpression.as(TIME_COLUMN), {
+              insertIndex: 0,
+              addToGroupBy: hasGroupBy ? 'start' : undefined,
+            }),
+        };
+      }
+
+      const values = queryResult.rows.map(row => row[i]);
+      const possibleDruidFormat = possibleDruidFormatForValues(values);
+      const formatSql = possibleDruidFormat ? timeFormatToSql(possibleDruidFormat) : undefined;
+      if (!formatSql) return;
+      const newSelectExpression = formatSql.fillPlaceholders([
+        selectExpression.getUnderlyingExpression(),
+      ]);
+
+      return {
+        label: (
+          <>
+            {`Use `}
+            <strong>{c.name}</strong>
+            {` parsed as '${possibleDruidFormat}'`}
+          </>
+        ),
+        queryAction: q =>
+          q.removeSelectIndex(i).addSelect(newSelectExpression.as(TIME_COLUMN), {
+            insertIndex: 0,
+            addToGroupBy: hasGroupBy ? 'start' : undefined,
+          }),
+      };
+    });
+
+    if (suggestions.length) return suggestions;
+    return [
+      {
+        label: 'Use a constant as the primary time column',
+        queryAction: q =>
+          q.addSelect(SqlExpression.parse(`TIMESTAMP '2000-01-01 00:00:00'`).as(TIME_COLUMN), {
+            insertIndex: 0,
+            addToGroupBy: hasGroupBy ? 'start' : undefined,
+          }),
+      },
+    ];
+  }
+}
+
+const GRANULARITIES: string[] = ['hour', 'day', 'month', 'all'];
+
+type Mode = 'table' | 'list' | 'sql';
+
+interface EditorColumn {
+  index: number;
+  expression?: SqlExpression;
+  type: 'dimension' | 'metric';
+  dirty?: boolean;
+}
+
+export interface SchemaStepProps {
+  queryString: string;
+  onQueryStringChange(queryString: string): void;
+  enableAnalyze: boolean;
+  goToQuery: () => void;
+  onBack(): void;
+  onDone(): void;
+  extraCallout?: JSX.Element;
+}
+
+export const SchemaStep = function SchemaStep(props: SchemaStepProps) {
+  const {
+    queryString,
+    onQueryStringChange,
+    enableAnalyze,
+    goToQuery,
+    onBack,
+    onDone,
+    extraCallout,
+  } = props;
+  const [mode, setMode] = useState<Mode>('table');
+  const [columnSearch, setColumnSearch] = useState('');
+  const [editorColumn, setEditorColumn] = useState<EditorColumn | undefined>();
+  const [showAddFilterEditor, setShowAddFilterEditor] = useState(false);
+  const [filterInEditor, setFilterInEditor] = useState<SqlExpression | undefined>();
+  const [showRollupConfirm, setShowRollupConfirm] = useState(false);
+  const [showRollupAnalysisPane, setShowRollupAnalysisPane] = useState(false);
+  const [showDestinationDialog, setShowDestinationDialog] = useState(false);
+  const lastWorkingQueryPattern = useRef<IngestQueryPattern | undefined>();
+
+  const columnFilter = useCallback(
+    (columnName: string) => caseInsensitiveContains(columnName, columnSearch),
+    [columnSearch],
+  );
+
+  const { ingestQueryPattern, ingestPatternError, parsedQuery } = useMemo(
+    () => digestQueryString(queryString),
+    [queryString],
+  );
+
+  const updatePattern = useCallback(
+    (ingestQueryPattern: IngestQueryPattern) => {
+      onQueryStringChange(ingestQueryPatternToQuery(ingestQueryPattern).toString());
+    },
+    [onQueryStringChange],
+  );
+
+  const effectiveMode: Mode = ingestQueryPattern ? mode : 'sql';
+
+  const handleQueryAction = usePermanentCallback((queryAction: QueryAction) => {
+    if (!parsedQuery) return;
+    setEditorColumn(undefined);
+    onQueryStringChange(parsedQuery.apply(queryAction).toString());
+  });
+
+  const handleColumnSelect = usePermanentCallback((index: number) => {
+    if (!ingestQueryPattern) return;
+
+    if (editorColumn?.dirty) {
+      AppToaster.show({
+        message: 'Please save or discard the changes in the column editor.',
+        intent: Intent.WARNING,
+      });
+      return;
+    }
+
+    if (editorColumn?.index === index) {
+      setEditorColumn(undefined);
+      return;
+    }
+
+    const expression = getQueryPatternExpression(ingestQueryPattern, index);
+    const expressionType = getQueryPatternExpressionType(ingestQueryPattern, index);
+    if (!expression || !expressionType) return;
+    setEditorColumn({
+      index,
+      expression,
+      type: expressionType,
+    });
+  });
+
+  function handleNewColumnOfType(type: 'dimension' | 'metric') {
+    if (editorColumn?.dirty) {
+      AppToaster.show({
+        message: 'Please save or discard the changes in the column editor.',
+        intent: Intent.WARNING,
+      });
+      return;
+    }
+
+    setEditorColumn({
+      index: -1,
+      type,
+    });
+  }
+
+  const selectedColumnIndex = editorColumn ? editorColumn.index : -1;
+
+  // Use this direct DOM manipulation via d3 to avoid re-rendering the table when the selection changes
+  useLayoutEffect(() => {
+    if (mode !== 'table') return;
+    selectAll('.preview-table .rt-th').classed('selected', false);
+    if (selectedColumnIndex !== -1) {
+      select(`.preview-table .rt-th.column${selectedColumnIndex}`).classed('selected', true);
+    }
+  }, [mode, selectedColumnIndex, columnSearch]);
+
+  function toggleRollup() {
+    if (!ingestQueryPattern) return;
+
+    if (ingestQueryPattern.metrics) {
+      updatePattern({ ...ingestQueryPattern, metrics: undefined });
+    } else {
+      const countExpression = ingestQueryPattern.dimensions.find(groupedExpression =>
+        oneOf(groupedExpression.getOutputName(), 'count', '__count'),
+      );
+
+      updatePattern({
+        ...ingestQueryPattern,
+        dimensions: without(ingestQueryPattern.dimensions, countExpression),
+        metrics: [
+          (countExpression
+            ? SqlFunction.simple('SUM', [countExpression.getUnderlyingExpression()])
+            : SqlFunction.COUNT_STAR
+          ).as(countExpression?.getOutputName() || 'count'),
+        ],
+      });
+    }
+  }
+
+  const [existingTableState] = useQueryManager<string, string[]>({
+    initQuery: '',
+    processQuery: async (_: string, _cancelToken) => {
+      // Check if datasource already exists
+      const tables = await queryDruidSql({
+        query: `SELECT TABLE_NAME FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_SCHEMA = 'druid' ORDER BY TABLE_NAME ASC`,
+        resultFormat: 'array',
+      });
+
+      return tables.map(t => t[0]);
+    },
+  });
+
+  const sampleQueryString = useLastDefined(
+    ingestQueryPattern && mode !== 'sql' // Only sample the data if we are not in the SQL tab live editing the SQL
+      ? SqlQuery.create(
+          externalConfigToTableExpression(ingestQueryPattern.mainExternalConfig),
+        ).toString()
+      : undefined,
+  );
+
+  const [sampleState] = useQueryManager<string, QueryResult, Execution>({
+    query: sampleQueryString,
+    processQuery: async (sampleQueryString, cancelToken) => {
+      return extractResult(
+        await submitTaskQuery({
+          query: sampleQueryString,
+          context: {
+            sqlOuterLimit: 50,
+          },
+          cancelToken,
+        }),
+      );
+    },
+    backgroundStatusCheck: executionBackgroundResultStatusCheck,
+  });
+
+  const sampleDataQuery = useMemo(() => {
+    if (!sampleState.data) return;
+    return sampleDataToQuery(sampleState.data);
+  }, [sampleState.data]);
+
+  const previewQueryString = useLastDefined(
+    ingestQueryPattern && mode !== 'sql' && sampleDataQuery
+      ? ingestQueryPatternToQuery(ingestQueryPattern, true, sampleDataQuery).toString()
+      : undefined,
+  );
+
+  const [previewResultState] = useQueryManager<string, QueryResult, Execution>({
+    query: previewQueryString,
+    processQuery: async (previewQueryString, cancelToken) => {
+      const taskEngine = WorkbenchQueryPart.isTaskEngineNeeded(previewQueryString);
+      if (taskEngine) {
+        return extractResult(
+          await submitTaskQuery({
+            query: previewQueryString,
+            context: {
+              groupByEnableMultiValueUnnesting: false,
+              finalizeAggregations: false,
+              sqlOuterLimit: 25,
+            },
+            cancelToken,
+          }),
+        );
+      } else {
+        let result: QueryResult;
+        try {
+          result = await queryRunner.runQuery({
+            query: previewQueryString,
+            extraQueryContext: { sqlOuterLimit: 25, sqlStringifyArrays: false },
+            cancelToken,
+          });
+        } catch (e) {
+          throw new DruidError(e);
+        }
+
+        return result.attachQuery({}, SqlQuery.maybeParse(previewQueryString));
+      }
+    },
+    backgroundStatusCheck: executionBackgroundResultStatusCheck,
+  });
+
+  useEffect(() => {
+    if (!previewResultState.data) return;
+    lastWorkingQueryPattern.current = ingestQueryPattern;
+  }, [previewResultState]);
+
+  const unusedColumns = ingestQueryPattern
+    ? ingestQueryPattern.mainExternalConfig.signature.filter(
+        ({ name }) =>
+          !ingestQueryPattern.dimensions.some(d => d.containsColumn(name)) &&
+          !ingestQueryPattern.metrics?.some(m => m.containsColumn(name)),
+      )
+    : [];
+
+  const timeColumn =
+    ingestQueryPattern &&
+    ingestQueryPattern.dimensions.find(d => d.getOutputName() === TIME_COLUMN);
+
+  const timeSuggestions =
+    previewResultState.data && parsedQuery
+      ? getTimeSuggestions(previewResultState.data, parsedQuery)
+      : [];
+
+  const previewResultSomeData = previewResultState.getSomeData();
+
+  return (
+    <TitleFrame
+      className="schema-step"
+      title="Load data"
+      subtitle="Configure schema"
+      toolbar={
+        <>
+          <Popover2
+            position="bottom"
+            content={
+              <Menu>
+                <MenuItem
+                  icon={IconNames.PLUS}
+                  text="Add filter"
+                  onClick={() => setShowAddFilterEditor(true)}
+                />
+                {ingestQueryPattern && ingestQueryPattern.filters.length > 0 && (
+                  <>
+                    <MenuDivider />
+                    {ingestQueryPattern.filters.map((filter, i) => (
+                      <MenuItem
+                        key={i}
+                        icon={IconNames.FILTER}
+                        text={filter.toString()}
+                        onClick={() => setFilterInEditor(filter)}
+                      />
+                    ))}
+                  </>
+                )}
+              </Menu>
+            }
+          >
+            <Button icon={IconNames.FILTER} minimal>
+              Filters &nbsp;
+              <Tag minimal round>
+                {ingestQueryPattern ? ingestQueryPattern.filters.length : '?'}
+              </Tag>
+            </Button>
+          </Popover2>
+          {ingestQueryPattern && (
+            <Popover2
+              position="bottom"
+              content={
+                <Menu>
+                  {timeColumn ? (
+                    GRANULARITIES.map(g => (
+                      <MenuItem
+                        key={g}
+                        icon={tickIcon(g === ingestQueryPattern.partitionedBy)}
+                        text={g}
+                        onClick={() => {
+                          if (!ingestQueryPattern) return;
+                          updatePattern({
+                            ...ingestQueryPattern,
+                            partitionedBy: g,
+                          });
+                        }}
+                      />
+                    ))
+                  ) : (
+                    <MenuItem
+                      text="Only available when a primary time column is selected"
+                      disabled
+                    />
+                  )}
+                </Menu>
+              }
+            >
+              <Button icon={IconNames.SPLIT_COLUMNS} minimal>
+                Partition &nbsp;
+                <Tag minimal round>
+                  {ingestQueryPattern.partitionedBy === 'all'
+                    ? 'all time'
+                    : ingestQueryPattern.partitionedBy}
+                </Tag>
+              </Button>
+            </Popover2>
+          )}
+          {ingestQueryPattern && (
+            <Popover2
+              position="bottom"
+              content={
+                <Menu>
+                  {ingestQueryPattern.clusteredBy.map((p, i) => (
+                    <MenuItem
+                      key={i}
+                      icon={IconNames.MERGE_COLUMNS}
+                      text={ingestQueryPattern.dimensions[p].getOutputName()}
+                    >
+                      <MenuItem
+                        icon={IconNames.CROSS}
+                        text="Remove"
+                        onClick={() =>
+                          updatePattern({
+                            ...ingestQueryPattern,
+                            clusteredBy: without(ingestQueryPattern.clusteredBy, p),
+                          })
+                        }
+                      />
+                    </MenuItem>
+                  ))}
+                  <MenuItem icon={IconNames.PLUS} text="Add column clustering">
+                    {filterMap(ingestQueryPattern.dimensions, (dimension, i) => {
+                      const outputName = dimension.getOutputName();
+                      if (
+                        outputName === TIME_COLUMN ||
+                        ingestQueryPattern.clusteredBy.includes(i)
+                      ) {
+                        return;
+                      }
+
+                      return (
+                        <MenuItem
+                          key={i}
+                          text={outputName}
+                          onClick={() =>
+                            updatePattern({
+                              ...ingestQueryPattern,
+                              clusteredBy: ingestQueryPattern.clusteredBy.concat([i]),
+                            })
+                          }
+                          shouldDismissPopover={false}
+                        />
+                      );
+                    })}
+                  </MenuItem>
+                </Menu>
+              }
+            >
+              <Button icon={IconNames.MERGE_COLUMNS} minimal>
+                Cluster &nbsp;
+                <Tag minimal round>
+                  {ingestQueryPattern.clusteredBy.length}
+                </Tag>
+              </Button>
+            </Popover2>
+          )}
+          <Button
+            icon={IconNames.COMPRESSED}
+            onClick={() => {
+              setEditorColumn(undefined); // Clear any selected column if any
+              setShowRollupConfirm(true);
+            }}
+            minimal
+          >
+            Rollup &nbsp;
+            <Tag minimal round>
+              {ingestQueryPattern?.metrics ? 'On' : 'Off'}
+            </Tag>
+          </Button>
+          {ingestQueryPattern && existingTableState.data && (
+            <Button
+              className="destination-button"
+              icon={IconNames.MULTI_SELECT}
+              minimal
+              onClick={() => setShowDestinationDialog(true)}
+            >
+              {`Datasource: ${ingestQueryPattern.destinationTableName} `}
+              <Tag minimal round>
+                {getDestinationMode(ingestQueryPattern, existingTableState.data)}
+              </Tag>
+            </Button>
+          )}
+        </>
+      }
+    >
+      <div className={classNames('schema-container', { 'with-analysis': showRollupAnalysisPane })}>
+        <div className="loader-controls">
+          <div className="control-line left">
+            <ButtonGroup>
+              <Button
+                icon={IconNames.TH_LIST}
+                text="Table"
+                disabled={!ingestQueryPattern}
+                active={effectiveMode === 'table'}
+                onClick={() => setMode('table')}
+              />
+              <Button
+                icon={IconNames.LIST_COLUMNS}
+                text="List"
+                disabled={!ingestQueryPattern}
+                active={effectiveMode === 'list'}
+                onClick={() => setMode('list')}
+              />
+              <Button
+                icon={IconNames.APPLICATION}
+                text="SQL"
+                active={effectiveMode === 'sql'}
+                onClick={() => setMode('sql')}
+              />
+            </ButtonGroup>
+            {enableAnalyze && ingestQueryPattern?.metrics && (
+              <Button
+                icon={IconNames.LIGHTBULB}
+                text="Analyze rollup"
+                minimal
+                active={showRollupAnalysisPane}
+                onClick={() => setShowRollupAnalysisPane(!showRollupAnalysisPane)}
+              />
+            )}
+          </div>
+          {effectiveMode !== 'sql' && ingestQueryPattern && (
+            <div className="control-line right">
+              <Popover2
+                className="add-column-control"
+                position="bottom"
+                content={
+                  <Menu>
+                    {ingestQueryPattern.metrics ? (
+                      <>
+                        <MenuItem
+                          icon={IconNames.PLUS}
+                          text="Custom dimension"
+                          onClick={() => handleNewColumnOfType('dimension')}
+                        />
+                        <MenuItem
+                          icon={IconNames.PLUS}
+                          text="Custom metric"
+                          onClick={() => handleNewColumnOfType('metric')}
+                        />
+                      </>
+                    ) : (
+                      <MenuItem
+                        icon={IconNames.PLUS}
+                        text="Custom column"
+                        onClick={() => handleNewColumnOfType('dimension')}
+                      />
+                    )}
+                    <MenuDivider />
+                    {unusedColumns.length ? (
+                      unusedColumns.map((column, i) => (
+                        <MenuItem
+                          key={i}
+                          icon={dataTypeToIcon(column.type)}
+                          text={column.name}
+                          onClick={() => {
+                            handleQueryAction(q =>
+                              q.addSelect(
+                                SqlRef.column(column.name),
+                                ingestQueryPattern.metrics
+                                  ? { insertIndex: 'last-grouping', addToGroupBy: 'end' }
+                                  : {},
+                              ),
+                            );
+                          }}
+                        />
+                      ))
+                    ) : (
+                      <MenuItem icon={IconNames.BLANK} text="No column suggestions" disabled />
+                    )}
+                  </Menu>
+                }
+              >
+                <Button className="add-column" icon={IconNames.PLUS} text="Add column" />
+              </Popover2>
+              <ClearableInput
+                className="column-filter-control"
+                value={columnSearch}
+                placeholder="Search columns"
+                onChange={setColumnSearch}
+              />
+            </div>
+          )}
+          {effectiveMode === 'sql' && (
+            <div className="control-line right">
+              <Button rightIcon={IconNames.ARROW_TOP_RIGHT} onClick={goToQuery}>
+                Open in <strong>Query</strong> view
+              </Button>
+            </div>
+          )}
+        </div>
+        <div className="preview">
+          {effectiveMode === 'table' && (
+            <>
+              {previewResultState.isError() ? (
+                <PreviewError
+                  errorMessage={String(previewResultState.getErrorMessage())}
+                  onRevert={
+                    lastWorkingQueryPattern.current &&
+                    (() => {
+                      if (!lastWorkingQueryPattern.current) return;
+                      updatePattern(lastWorkingQueryPattern.current);
+                    })
+                  }
+                />
+              ) : (
+                previewResultSomeData && (
+                  <PreviewTable
+                    queryResult={previewResultSomeData}
+                    onQueryAction={handleQueryAction}
+                    columnFilter={columnFilter}
+                    selectedColumnIndex={-1}
+                    onEditColumn={handleColumnSelect}
+                  />
+                )
+              )}
+              {previewResultState.isLoading() && <Loader />}
+              {previewResultState.isInit() && sampleState.isLoading() && (
+                <Loader loadingText="Loading data sample..." />
+              )}
+              {sampleState.getErrorMessage() && 'Sample error'}
+            </>
+          )}
+          {effectiveMode === 'list' &&
+            ingestQueryPattern &&
+            (previewResultState.isError() ? (
+              <PreviewError
+                errorMessage={String(previewResultState.getErrorMessage())}
+                onRevert={
+                  lastWorkingQueryPattern.current &&
+                  (() => {
+                    if (!lastWorkingQueryPattern.current) return;
+                    updatePattern(lastWorkingQueryPattern.current);
+                  })
+                }
+              />
+            ) : (
+              previewResultSomeData && (
+                <ColumnList
+                  queryResult={previewResultSomeData}
+                  columnFilter={columnFilter}
+                  selectedColumnIndex={selectedColumnIndex}
+                  onEditColumn={handleColumnSelect}
+                />
+              )
+            ))}
+          {effectiveMode === 'sql' && (
+            <FlexibleQueryInput
+              autoHeight={false}
+              queryString={queryString}
+              onQueryStringChange={onQueryStringChange}
+              columnMetadata={undefined}
+              leaveBackground
+            />
+          )}
+        </div>
+        <div className="controls">
+          <div className="top-controls">
+            {!editorColumn && (
+              <FormGroup>
+                <Callout>
+                  <p>
+                    Each column in Druid must have an assigned type (string, long, float, double,
+                    complex, etc).
+                  </p>
+                  <p>
+                    Types are implicitly determined for your columns. If you want to change the type
+                    of a column you can cast it to a specific type. You can do that by clicking on a
+                    column header.
+                  </p>
+                  <LearnMore href={`${getLink('DOCS')}/ingestion/schema-design.html`} />
+                </Callout>
+              </FormGroup>
+            )}
+            {editorColumn && ingestQueryPattern && (
+              <>
+                <ColumnEditor
+                  expression={editorColumn.expression}
+                  onApply={newColumn => {
+                    if (!editorColumn) return;
+                    updatePattern(
+                      changeQueryPatternExpression(
+                        ingestQueryPattern,
+                        editorColumn.index,
+                        editorColumn.type,
+                        newColumn,
+                      ),
+                    );
+                  }}
+                  onCancel={() => setEditorColumn(undefined)}
+                  dirty={() => setEditorColumn({ ...editorColumn, dirty: true })}
+                  queryResult={previewResultState.data}
+                  headerIndex={editorColumn.index}
+                />
+                {editorColumn.index !== -1 && (
+                  <ColumnActions
+                    queryResult={previewResultState.data}
+                    headerIndex={editorColumn.index}
+                    onQueryAction={handleQueryAction}
+                  />
+                )}
+              </>
+            )}
+            {ingestPatternError && (
+              <FormGroup>
+                <Callout intent={Intent.DANGER}>{ingestPatternError}</Callout>
+              </FormGroup>
+            )}
+            {!editorColumn && timeSuggestions.length > 0 && (
+              <Callout
+                className="time-column-warning"
+                intent={Intent.WARNING}
+                title="No __time column defined"
+              >
+                {timeSuggestions.map((timeSuggestion, i) => (
+                  <FormGroup key={i}>
+                    <Button
+                      icon={IconNames.CLEAN}
+                      text={timeSuggestion.label}
+                      intent={Intent.SUCCESS}
+                      onClick={() => handleQueryAction(timeSuggestion.queryAction)}
+                    />
+                  </FormGroup>
+                ))}
+                <AnchorButton
+                  icon={IconNames.HELP}
+                  text="Learn more..."
+                  href={`${getLink('DOCS')}/ingestion/data-model.html#primary-timestamp`}
+                  target="_blank"
+                  intent={Intent.WARNING}
+                  minimal
+                />
+              </Callout>
+            )}
+          </div>
+          <div className="bottom-controls">
+            {extraCallout && (
+              <FormGroup>
+                <Callout>{extraCallout}</Callout>
+              </FormGroup>
+            )}
+            <div className="prev-next-bar">
+              <Button className="back" icon={IconNames.ARROW_LEFT} text="Back" onClick={onBack} />
+              <Button
+                className="next"
+                icon={IconNames.CLOUD_UPLOAD}
+                text="Start loading data"
+                intent={Intent.PRIMARY}
+                onClick={onDone}
+              />
+            </div>
+          </div>
+        </div>
+        {showRollupAnalysisPane && ingestQueryPattern && (
+          <RollupAnalysisPane
+            dimensions={ingestQueryPattern.dimensions}
+            seedQuery={ingestQueryPatternToQuery(ingestQueryPattern, true, sampleDataQuery)}
+            queryResult={previewResultState.data}
+            onEditColumn={handleColumnSelect}
+            onClose={() => setShowRollupAnalysisPane(false)}
+          />
+        )}
+        {showAddFilterEditor && ingestQueryPattern && (
+          <ExpressionEditorDialog
+            title="Add filter"
+            onSave={newExpression =>
+              updatePattern({
+                ...ingestQueryPattern,
+                filters: ingestQueryPattern.filters.concat(newExpression),
+              })
+            }
+            onClose={() => setShowAddFilterEditor(false)}
+          />
+        )}
+        {filterInEditor && ingestQueryPattern && (
+          <ExpressionEditorDialog
+            title="Edit filter"
+            expression={filterInEditor}
+            onSave={newFilter =>
+              updatePattern({
+                ...ingestQueryPattern,
+                filters: change(ingestQueryPattern.filters, filterInEditor, newFilter),
+              })
+            }
+            onDelete={() =>
+              updatePattern({
+                ...ingestQueryPattern,
+                filters: without(ingestQueryPattern.filters, filterInEditor),
+              })
+            }
+            onClose={() => setFilterInEditor(undefined)}
+          />
+        )}
+        {showRollupConfirm && ingestQueryPattern && (
+          <AsyncActionDialog
+            action={async () => {
+              await wait(100); // A hack to make it async. Revisit
+              toggleRollup();
+            }}
+            confirmButtonText={`Yes - ${ingestQueryPattern.metrics ? 'disable' : 'enable'} rollup`}
+            successText={`Rollup was ${
+              ingestQueryPattern.metrics ? 'disabled' : 'enabled'
+            }. Schema has been updated.`}
+            failText="Could change rollup"
+            intent={Intent.WARNING}
+            onClose={() => setShowRollupConfirm(false)}
+          >
+            <p>{`Are you sure you want to ${
+              ingestQueryPattern.metrics ? 'disable' : 'enable'
+            } rollup?`}</p>
+            <p>Making this change will reset any work you have done in this section.</p>
+          </AsyncActionDialog>
+        )}
+        {showDestinationDialog && ingestQueryPattern && existingTableState.data && (
+          <DestinationDialog
+            existingTables={existingTableState.data}
+            ingestQueryPattern={ingestQueryPattern}
+            changeIngestQueryPattern={updatePattern}
+            onClose={() => setShowDestinationDialog(false)}
+          />
+        )}
+      </div>
+    </TitleFrame>
+  );
+};
diff --git a/web-console/src/views/sql-data-loader-view/sql-data-loader-view.scss b/web-console/src/views/sql-data-loader-view/sql-data-loader-view.scss
new file mode 100644
index 000000000000..2f7ee8c432db
--- /dev/null
+++ b/web-console/src/views/sql-data-loader-view/sql-data-loader-view.scss
@@ -0,0 +1,85 @@
+/*
+ * 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 '../../variables';
+
+.sql-data-loader-view {
+  height: 100%;
+  width: 100%;
+  position: relative;
+
+  .title-frame,
+  .resume-step,
+  .loading-step,
+  .error-step {
+    width: 100%;
+    height: 100%;
+  }
+
+  .resume-step {
+    text-align: center;
+
+    .spec-card {
+      display: inline-block;
+      vertical-align: top;
+      position: relative;
+      width: 440px;
+      height: 120px;
+      margin: 10px;
+      text-align: left;
+
+      .spec-card-icon {
+        position: absolute;
+        top: 26px;
+        left: 20px;
+
+        svg {
+          width: 20px;
+          height: 20px;
+        }
+      }
+
+      .spec-card-header {
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 32px;
+        padding-left: 36px;
+
+        .spec-card-caption {
+          font-size: 13px;
+          line-height: 20px;
+          font-weight: 400;
+          color: $gray4;
+        }
+      }
+    }
+  }
+
+  .loading-step {
+    position: relative;
+    padding: 20px;
+
+    .execution-stages-pane {
+      position: absolute;
+      top: 160px;
+      bottom: 0;
+      right: 20px;
+      left: 20px;
+    }
+  }
+}
diff --git a/web-console/src/views/sql-data-loader-view/sql-data-loader-view.tsx b/web-console/src/views/sql-data-loader-view/sql-data-loader-view.tsx
new file mode 100644
index 000000000000..162d2fd8c615
--- /dev/null
+++ b/web-console/src/views/sql-data-loader-view/sql-data-loader-view.tsx
@@ -0,0 +1,201 @@
+/*
+ * 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 { Card, Icon, IconName, Intent } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import { SqlQuery } from 'druid-query-toolkit';
+import React, { useState } from 'react';
+
+import {
+  Execution,
+  ExternalConfig,
+  externalConfigToIngestQueryPattern,
+  ingestQueryPatternToQuery,
+  QueryWithContext,
+} from '../../druid-models';
+import { submitTaskQuery } from '../../helpers';
+import { useLocalStorageState } from '../../hooks';
+import { AppToaster } from '../../singletons';
+import { deepDelete, LocalStorageKeys } from '../../utils';
+import { InputFormatStep } from '../workbench-view/input-format-step/input-format-step';
+import { InputSourceStep } from '../workbench-view/input-source-step/input-source-step';
+import { MaxTasksButton } from '../workbench-view/max-tasks-button/max-tasks-button';
+
+import { IngestionProgressDialog } from './ingestion-progress-dialog/ingestion-progress-dialog';
+import { SchemaStep } from './schema-step/schema-step';
+import { TitleFrame } from './title-frame/title-frame';
+
+import './sql-data-loader-view.scss';
+
+interface LoaderContent extends QueryWithContext {
+  id?: string;
+}
+
+export interface SqlDataLoaderViewProps {
+  goToQuery(queryWithContext: QueryWithContext): void;
+  goToIngestion(taskId: string): void;
+}
+
+export const SqlDataLoaderView = React.memo(function SqlDataLoaderView(
+  props: SqlDataLoaderViewProps,
+) {
+  const { goToQuery, goToIngestion } = props;
+  const [externalConfigStep, setExternalConfigStep] = useState<Partial<ExternalConfig>>({});
+  const [content, setContent] = useLocalStorageState<LoaderContent | undefined>(
+    LocalStorageKeys.SQL_DATA_LOADER_CONTENT,
+  );
+  const [needVerify, setNeedVerify] = useState(Boolean(content && !content.id));
+
+  const { inputSource, inputFormat } = externalConfigStep;
+
+  function renderActionCard(icon: IconName, title: string, caption: string, onClick: () => void) {
+    return (
+      <Card className="spec-card" interactive onClick={onClick} elevation={1}>
+        <Icon className="spec-card-icon" icon={icon} size={30} />
+        <div className="spec-card-header">
+          {title}
+          <div className="spec-card-caption">{caption}</div>
+        </div>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="sql-data-loader-view">
+      {needVerify ? (
+        <div className="resume-step">
+          {renderActionCard(
+            IconNames.ASTERISK,
+            `Start a new flow`,
+            `Begin a new SQL ingestion flow.`,
+            () => {
+              setContent(undefined);
+              setNeedVerify(false);
+            },
+          )}
+          {renderActionCard(
+            IconNames.REPEAT,
+            `Continue from previous flow`,
+            `Go back to the most recent SQL ingestion flow you were working on.`,
+            () => {
+              setNeedVerify(false);
+            },
+          )}
+        </div>
+      ) : content ? (
+        <SchemaStep
+          queryString={content.queryString}
+          onQueryStringChange={queryString => setContent({ ...content, queryString })}
+          enableAnalyze={false}
+          goToQuery={() => goToQuery(content)}
+          onBack={() => setContent(undefined)}
+          onDone={async () => {
+            const ingestDatasource = SqlQuery.parse(content.queryString)
+              .getIngestTable()
+              ?.getTable();
+
+            if (!ingestDatasource) {
+              AppToaster.show({ message: `Must have an ingest datasource`, intent: Intent.DANGER });
+              return;
+            }
+
+            try {
+              const execution = await submitTaskQuery({
+                query: content.queryString,
+                context: content.queryContext,
+              });
+
+              const taskId = execution instanceof Execution ? execution.id : execution.state.id;
+
+              setContent({ ...content, id: taskId });
+            } catch (e) {
+              AppToaster.show({
+                message: `Error submitting task: ${e.message}`,
+                intent: Intent.DANGER,
+              });
+            }
+          }}
+          extraCallout={
+            <MaxTasksButton
+              queryContext={content.queryContext || {}}
+              changeQueryContext={queryContext => setContent({ ...content, queryContext })}
+              minimal
+            />
+          }
+        />
+      ) : inputFormat && inputSource ? (
+        <TitleFrame title="Load data" subtitle="Parse">
+          <InputFormatStep
+            inputSource={inputSource}
+            initInputFormat={inputFormat}
+            doneButton={false}
+            onSet={({ inputFormat, signature, isArrays, timeExpression }) => {
+              setContent({
+                queryString: ingestQueryPatternToQuery(
+                  externalConfigToIngestQueryPattern(
+                    { inputSource, inputFormat, signature },
+                    isArrays,
+                    timeExpression,
+                  ),
+                ).toString(),
+                queryContext: {
+                  finalizeAggregations: false,
+                  groupByEnableMultiValueUnnesting: false,
+                },
+              });
+            }}
+            altText="Skip the wizard and continue with custom SQL"
+            onAltSet={({ inputFormat, signature, isArrays, timeExpression }) => {
+              goToQuery({
+                queryString: ingestQueryPatternToQuery(
+                  externalConfigToIngestQueryPattern(
+                    { inputSource, inputFormat, signature },
+                    isArrays,
+                    timeExpression,
+                  ),
+                ).toString(),
+              });
+            }}
+            onBack={() => {
+              setExternalConfigStep({ inputSource });
+            }}
+          />
+        </TitleFrame>
+      ) : (
+        <TitleFrame title="Load data" subtitle="Select input type">
+          <InputSourceStep
+            initInputSource={inputSource}
+            mode="sampler"
+            onSet={(inputSource, inputFormat) => {
+              setExternalConfigStep({ inputSource, inputFormat });
+            }}
+          />
+        </TitleFrame>
+      )}
+      {content?.id && (
+        <IngestionProgressDialog
+          taskId={content.id}
+          goToQuery={goToQuery}
+          goToIngestion={goToIngestion}
+          onReset={() => setContent(undefined)}
+          onClose={() => setContent(deepDelete(content, 'id'))}
+        />
+      )}
+    </div>
+  );
+});
diff --git a/web-console/src/views/sql-data-loader-view/title-frame/title-frame.scss b/web-console/src/views/sql-data-loader-view/title-frame/title-frame.scss
new file mode 100644
index 000000000000..cbc97723bfaa
--- /dev/null
+++ b/web-console/src/views/sql-data-loader-view/title-frame/title-frame.scss
@@ -0,0 +1,55 @@
+/*
+ * 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 '../../../variables';
+
+.title-frame {
+  position: relative;
+
+  & > .titles {
+    font-size: 21px;
+    line-height: 30px;
+    font-weight: 600;
+    cursor: default;
+    margin: 0;
+
+    .slash {
+      opacity: 0.5;
+    }
+  }
+
+  & > .toolbar {
+    position: absolute;
+    top: 0;
+    right: 0;
+    white-space: nowrap;
+    background: $light-gray4;
+
+    .#{$bp-ns}-dark & {
+      background: $dark-gray2;
+    }
+  }
+
+  & > *:last-child {
+    position: absolute;
+    top: 45px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+}
diff --git a/web-console/src/views/sql-data-loader-view/title-frame/title-frame.tsx b/web-console/src/views/sql-data-loader-view/title-frame/title-frame.tsx
new file mode 100644
index 000000000000..c037d4e8907a
--- /dev/null
+++ b/web-console/src/views/sql-data-loader-view/title-frame/title-frame.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 classNames from 'classnames';
+import React, { ReactNode } from 'react';
+
+import './title-frame.scss';
+
+export interface TitleFrameProps {
+  className?: string;
+  title: string;
+  subtitle: string;
+  toolbar?: ReactNode;
+  children?: ReactNode;
+}
+
+export const TitleFrame = React.memo(function TitleFrame(props: TitleFrameProps) {
+  const { className, title, subtitle, toolbar, children } = props;
+
+  return (
+    <div className={classNames('title-frame', className)}>
+      <h1 className="titles">
+        {title} <span className="slash">/</span> {subtitle}
+      </h1>
+      {toolbar && <div className="toolbar">{toolbar}</div>}
+      {children}
+    </div>
+  );
+});
diff --git a/web-console/src/views/workbench-view/cancel-query-dialog/cancel-query-dialog.tsx b/web-console/src/views/workbench-view/cancel-query-dialog/cancel-query-dialog.tsx
new file mode 100644
index 000000000000..4c31b556d176
--- /dev/null
+++ b/web-console/src/views/workbench-view/cancel-query-dialog/cancel-query-dialog.tsx
@@ -0,0 +1,48 @@
+/*
+ * 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 { Alert, Intent } from '@blueprintjs/core';
+import React from 'react';
+
+export interface CancelQueryDialogProps {
+  onDismiss(): void;
+  onCancel(): void;
+}
+
+export const CancelQueryDialog = function CancelQueryDialog(props: CancelQueryDialogProps) {
+  const { onDismiss, onCancel } = props;
+
+  return (
+    <Alert
+      intent={Intent.DANGER}
+      isOpen
+      cancelButtonText="Continue running query"
+      confirmButtonText="Cancel query"
+      canOutsideClickCancel
+      canEscapeKeyCancel
+      onCancel={onDismiss}
+      onConfirm={() => {
+        onCancel();
+        onDismiss();
+      }}
+    >
+      <p>Are you sure you want to cancel this query?</p>
+      <p>You can&apos;t undo this action.</p>
+    </Alert>
+  );
+};
diff --git a/web-console/src/views/workbench-view/connect-external-data-dialog/connect-external-data-dialog.scss b/web-console/src/views/workbench-view/connect-external-data-dialog/connect-external-data-dialog.scss
new file mode 100644
index 000000000000..6bd06fee229b
--- /dev/null
+++ b/web-console/src/views/workbench-view/connect-external-data-dialog/connect-external-data-dialog.scss
@@ -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 '../../../variables';
+
+.connect-external-data-dialog {
+  &.#{$bp-ns}-dialog {
+    width: 95vw;
+    padding-bottom: 0;
+  }
+
+  .#{$bp-ns}-dialog-body {
+    height: 80vh;
+
+    .input-source-step,
+    .input-format-step {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
diff --git a/web-console/src/views/workbench-view/connect-external-data-dialog/connect-external-data-dialog.tsx b/web-console/src/views/workbench-view/connect-external-data-dialog/connect-external-data-dialog.tsx
new file mode 100644
index 000000000000..d857d37dbf30
--- /dev/null
+++ b/web-console/src/views/workbench-view/connect-external-data-dialog/connect-external-data-dialog.tsx
@@ -0,0 +1,87 @@
+/*
+ * 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 { Classes, Dialog } from '@blueprintjs/core';
+import { SqlExpression } from 'druid-query-toolkit';
+import React, { useState } from 'react';
+
+import { ExternalConfig } from '../../../druid-models';
+import { InputFormatStep } from '../input-format-step/input-format-step';
+import { InputSourceStep } from '../input-source-step/input-source-step';
+
+import './connect-external-data-dialog.scss';
+
+export interface ConnectExternalDataDialogProps {
+  initExternalConfig?: Partial<ExternalConfig>;
+  onSetExternalConfig(
+    config: ExternalConfig,
+    isArrays: boolean[],
+    timeExpression: SqlExpression | undefined,
+  ): void;
+  onClose(): void;
+}
+
+export const ConnectExternalDataDialog = React.memo(function ConnectExternalDataDialog(
+  props: ConnectExternalDataDialogProps,
+) {
+  const { initExternalConfig, onClose, onSetExternalConfig } = props;
+
+  const [externalConfigStep, setExternalConfigStep] = useState<Partial<ExternalConfig>>(
+    initExternalConfig || {},
+  );
+
+  const { inputSource, inputFormat } = externalConfigStep;
+
+  return (
+    <Dialog
+      className="connect-external-data-dialog"
+      isOpen
+      onClose={onClose}
+      title={`Connect external data / ${inputFormat ? 'Parse' : 'Select input type'}`}
+    >
+      <div className={Classes.DIALOG_BODY}>
+        {inputFormat && inputSource ? (
+          <InputFormatStep
+            inputSource={inputSource}
+            initInputFormat={inputFormat}
+            doneButton
+            onSet={({ inputFormat, signature, isArrays, timeExpression }) => {
+              onSetExternalConfig(
+                { inputSource, inputFormat, signature },
+                isArrays,
+                timeExpression,
+              );
+              onClose();
+            }}
+            onBack={() => {
+              setExternalConfigStep({ inputSource });
+            }}
+          />
+        ) : (
+          <InputSourceStep
+            initInputSource={inputSource}
+            mode="sampler"
+            onSet={(inputSource, inputFormat) => {
+              setExternalConfigStep({ inputSource, inputFormat });
+            }}
+          />
+        )}
+      </div>
+    </Dialog>
+  );
+});
diff --git a/web-console/src/views/workbench-view/demo-queries.ts b/web-console/src/views/workbench-view/demo-queries.ts
new file mode 100644
index 000000000000..7345290938ac
--- /dev/null
+++ b/web-console/src/views/workbench-view/demo-queries.ts
@@ -0,0 +1,312 @@
+/*
+ * 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 { TabEntry, WorkbenchQuery } from '../../druid-models';
+
+const BASE_QUERY = WorkbenchQuery.blank();
+
+export function getDemoQueries(): TabEntry[] {
+  function makeDemoQuery(queryString: string): WorkbenchQuery {
+    return BASE_QUERY.duplicate().changeQueryString(queryString.trim());
+  }
+
+  return [
+    {
+      id: 'demo1',
+      tabName: 'Demo 1',
+      query: makeDemoQuery(
+        `
+-- Demo 1 showcases the new SQL syntax available as part of the sql-msq-task engine.
+--
+-- The two syntax pieces highlighted in this demo are:
+--
+-- 1. The REPLACE clause wraps a query and specifies that the result of the underlying query should be written to a datasource.
+--    You can also use INSERT instead of REPLACE to append data instead of replacing it.
+--
+-- 2. The TABLE(EXTERN(...)) function defines a external table that can be used anywhere a table can be used.
+--
+-- This demo reads the file located at https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz and writes it into
+-- the "kttm_simple" datasource (overwriting it if it already exists).
+--
+-- You can click the "Preview" button if you want to see a preview of the shape of the data that will be ingested and then
+-- click "Run" to actually create the kttm_simple datasource (it will be needed for later demos).
+--
+-- The ingestion here is as simple as it could be (SELECT *), in "Demo 2" you will perform more transformations on the data.
+
+REPLACE INTO "kttm_simple" OVERWRITE ALL
+SELECT *
+FROM TABLE(
+  EXTERN(
+    '{"type":"http","uris":["https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz"]}',
+    '{"type":"json"}',
+    '[{"name":"timestamp","type":"string"},{"name":"agent_category","type":"string"},{"name":"agent_type","type":"string"},{"name":"browser","type":"string"},{"name":"browser_version","type":"string"},{"name":"city","type":"string"},{"name":"continent","type":"string"},{"name":"country","type":"string"},{"name":"version","type":"string"},{"name":"event_type","type":"string"},{"name":"event_subtype","type":"string"},{"name":"loaded_image","type":"string"},{"name":"adblock_list","type":"string"},{"name":"forwarded_for","type":"string"},{"name":"language","type":"string"},{"name":"number","type":"long"},{"name":"os","type":"string"},{"name":"path","type":"string"},{"name":"platform","type":"string"},{"name":"referrer","type":"string"},{"name":"referrer_host","type":"string"},{"name":"region","type":"string"},{"name":"remote_address","type":"string"},{"name":"screen","type":"string"},{"name":"session","type":"string"},{"name":"session_length","type":"long"},{"name":"timezone","type":"string"},{"name":"timezone_offset","type":"long"},{"name":"window","type":"string"}]'
+  )
+)
+PARTITIONED BY ALL TIME
+`,
+      ),
+    },
+    {
+      id: 'demo2',
+      tabName: 'Demo 2',
+      query: makeDemoQuery(
+        `
+-- In Demo 2, you build on the concepts of Demo 1 by transforming data.
+-- You're no longer simply reading data from a file and writing it to a datasource.
+--
+-- In this ingestion, you:
+--  - select only a handful of columns.
+--  - parse the "timestamp" column, truncate it to MINUTE, and make it the "primary time column" by aliasing it to __time.
+--  - filter the rows with a WHERE clause so that only data for 'iOS' is ingested.
+--  - perform "rollup" by applying a GROUP BY clause and specifying some aggregates ("metrics").
+--  - apply time based partitioning as well as clustering on two columns.
+--
+-- In Demo 3, you'll enrich data at ingestion time by transforming it further.
+
+REPLACE INTO "kttm_rollup" OVERWRITE ALL
+
+WITH kttm_data AS (
+SELECT * FROM TABLE(
+  EXTERN(
+    '{"type":"http","uris":["https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz"]}',
+    '{"type":"json"}',
+    '[{"name":"timestamp","type":"string"},{"name":"agent_category","type":"string"},{"name":"agent_type","type":"string"},{"name":"browser","type":"string"},{"name":"browser_version","type":"string"},{"name":"city","type":"string"},{"name":"continent","type":"string"},{"name":"country","type":"string"},{"name":"version","type":"string"},{"name":"event_type","type":"string"},{"name":"event_subtype","type":"string"},{"name":"loaded_image","type":"string"},{"name":"adblock_list","type":"string"},{"name":"forwarded_for","type":"string"},{"name":"language","type":"string"},{"name":"number","type":"long"},{"name":"os","type":"string"},{"name":"path","type":"string"},{"name":"platform","type":"string"},{"name":"referrer","type":"string"},{"name":"referrer_host","type":"string"},{"name":"region","type":"string"},{"name":"remote_address","type":"string"},{"name":"screen","type":"string"},{"name":"session","type":"string"},{"name":"session_length","type":"long"},{"name":"timezone","type":"string"},{"name":"timezone_offset","type":"long"},{"name":"window","type":"string"}]'
+  )
+))
+
+SELECT
+  FLOOR(TIME_PARSE("timestamp") TO MINUTE) AS __time,
+  session,
+  agent_category,
+  agent_type,
+  browser,
+  browser_version,
+  MV_TO_ARRAY("language") AS "language",
+  os,
+  city,
+  country,
+  forwarded_for AS ip_address,
+
+  COUNT(*) AS "cnt",
+  SUM(session_length) AS session_length,
+  APPROX_COUNT_DISTINCT_DS_HLL(event_type) AS unique_event_types
+FROM kttm_data
+WHERE os = 'iOS'
+GROUP BY 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11
+PARTITIONED BY HOUR
+CLUSTERED BY browser, session
+`,
+      ),
+    },
+    {
+      id: 'demo3',
+      tabName: 'Demo 3',
+      query: makeDemoQuery(
+        `
+-- This demo has the same query as Demo 2, except that it utilizes an additional external data file (you can have as many
+-- as you want) to enrich the data via a JOIN. Specifically for every country in the fact data you add a column for Capital
+-- and that countries ISO3 code.
+-- This query also computes a derived column, "browser_major", by applying a SQL transformation.
+--
+-- In the next demo you will see how you are not limited to reading external data in these queries.
+
+REPLACE INTO "kttm_transformed" OVERWRITE ALL
+WITH
+kttm_data AS (
+SELECT * FROM TABLE(
+  EXTERN(
+    '{"type":"http","uris":["https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz"]}',
+    '{"type":"json"}',
+    '[{"name":"timestamp","type":"string"},{"name":"agent_category","type":"string"},{"name":"agent_type","type":"string"},{"name":"browser","type":"string"},{"name":"browser_version","type":"string"},{"name":"city","type":"string"},{"name":"continent","type":"string"},{"name":"country","type":"string"},{"name":"version","type":"string"},{"name":"event_type","type":"string"},{"name":"event_subtype","type":"string"},{"name":"loaded_image","type":"string"},{"name":"adblock_list","type":"string"},{"name":"forwarded_for","type":"string"},{"name":"language","type":"string"},{"name":"number","type":"long"},{"name":"os","type":"string"},{"name":"path","type":"string"},{"name":"platform","type":"string"},{"name":"referrer","type":"string"},{"name":"referrer_host","type":"string"},{"name":"region","type":"string"},{"name":"remote_address","type":"string"},{"name":"screen","type":"string"},{"name":"session","type":"string"},{"name":"session_length","type":"long"},{"name":"timezone","type":"string"},{"name":"timezone_offset","type":"long"},{"name":"window","type":"string"}]'
+  )
+)),
+country_lookup AS (
+SELECT * FROM TABLE(
+  EXTERN(
+    '{"type":"http","uris":["https://static.imply.io/example-data/lookup/countries.tsv"]}',
+    '{"type":"tsv","findColumnsFromHeader":true}',
+    '[{"name":"Country","type":"string"},{"name":"Capital","type":"string"},{"name":"ISO3","type":"string"},{"name":"ISO2","type":"string"}]'
+  )
+))
+
+SELECT
+  FLOOR(TIME_PARSE("timestamp") TO MINUTE) AS __time,
+  session,
+  agent_category,
+  agent_type,
+  browser,
+  browser_version,
+  CAST(REGEXP_EXTRACT(browser_version, '^(\\d+)') AS BIGINT) AS browser_major,
+  MV_TO_ARRAY("language") AS "language",
+  os,
+  city,
+  country,
+  country_lookup.Capital AS capital,
+  country_lookup.ISO3 AS iso3,
+  forwarded_for AS ip_address,
+
+  COUNT(*) AS "cnt",
+  SUM(session_length) AS session_length,
+  APPROX_COUNT_DISTINCT_DS_HLL(event_type) AS unique_event_types
+FROM kttm_data
+LEFT JOIN country_lookup ON country_lookup.Country = kttm_data.country
+WHERE os = 'iOS'
+GROUP BY 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
+PARTITIONED BY HOUR
+CLUSTERED BY browser, session
+`,
+      ),
+    },
+    {
+      id: 'demo4a',
+      tabName: 'Demo 4a',
+      query: makeDemoQuery(
+        `
+-- This demo has a query that is identical to the previous demo except instead of reading the fact data from an external
+-- file, it reads the "kttm_simple" datasource that was created in Demo 1.
+-- This shows you that you can mix and match data already stored in Druid with external data and transform as needed.
+--
+-- In the next demo you will look at another type of data transformation.
+
+REPLACE INTO "kttm_reingest" OVERWRITE ALL
+WITH
+country_lookup AS (
+SELECT * FROM TABLE(
+  EXTERN(
+    '{"type":"http","uris":["https://static.imply.io/example-data/lookup/countries.tsv"]}',
+    '{"type":"tsv","findColumnsFromHeader":true}',
+    '[{"name":"Country","type":"string"},{"name":"Capital","type":"string"},{"name":"ISO3","type":"string"},{"name":"ISO2","type":"string"}]'
+  )
+))
+
+SELECT
+  FLOOR(TIME_PARSE("timestamp") TO MINUTE) AS __time,
+  session,
+  agent_category,
+  agent_type,
+  browser,
+  browser_version,
+  CAST(REGEXP_EXTRACT(browser_version, '^(\\d+)') AS BIGINT) AS browser_major,
+  MV_TO_ARRAY("language") AS "language",
+  os,
+  city,
+  country,
+  country_lookup.Capital AS capital,
+  country_lookup.ISO3 AS iso3,
+  forwarded_for AS ip_address,
+
+  COUNT(*) AS "cnt",
+  SUM(session_length) AS session_length,
+  APPROX_COUNT_DISTINCT_DS_HLL(event_type) AS unique_event_types
+FROM kttm_simple
+LEFT JOIN country_lookup ON country_lookup.Country = kttm_simple.country
+WHERE os = 'iOS'
+GROUP BY 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
+PARTITIONED BY HOUR
+CLUSTERED BY browser, session
+`,
+      ),
+    },
+    {
+      id: 'demo4b',
+      tabName: 'Demo 4b',
+      query: makeDemoQuery(
+        `
+-- Imagine you are an avid reader of https://www.reddit.com/r/MapsWithoutNZ and want your data to reflect your cartography
+-- humor. In this demo you transform the datasource created in Demo 1 to remove all entries for 'New Zealand'.
+-- Notice that you can read and write to the same datasource.
+-- You can open a new tab and run 'SELECT COUNT(*) FROM kttm_simple' before and after running this query to see the change.
+
+REPLACE INTO kttm_simple OVERWRITE ALL
+SELECT *
+FROM kttm_simple
+WHERE NOT(country = 'New Zealand')
+PARTITIONED BY ALL TIME
+`,
+      ),
+    },
+    {
+      id: 'demo5',
+      tabName: 'Demo 5',
+      query: makeDemoQuery(
+        `
+-- You don't have to wrap your query in a REPLACE / INSERT clause to run it with the sql-msq-task engine. In fact, when you
+-- use the "Preview" button for any of the earlier demos, it works by removing the REPLACE / INSERT clause and
+-- running the query "inline" as a SELECT with a limit.
+--
+-- If you want to run a one time calculation on data, you can do it without ingesting it into Druid. Doing this
+-- takes the same order of magnitude of resources and time as it would to ingest the data into Druid though.
+--
+-- This functionality should be considered as a tech preview of what the sql-msq-task engine can do and not something for
+-- production use (outside of specific, narrow uses like the "Preview" feature in this console).
+
+WITH
+kttm_data AS (
+SELECT * FROM TABLE(
+  EXTERN(
+    '{"type":"http","uris":["https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz"]}',
+    '{"type":"json"}',
+    '[{"name":"timestamp","type":"string"},{"name":"agent_category","type":"string"},{"name":"agent_type","type":"string"},{"name":"browser","type":"string"},{"name":"browser_version","type":"string"},{"name":"city","type":"string"},{"name":"continent","type":"string"},{"name":"country","type":"string"},{"name":"version","type":"string"},{"name":"event_type","type":"string"},{"name":"event_subtype","type":"string"},{"name":"loaded_image","type":"string"},{"name":"adblock_list","type":"string"},{"name":"forwarded_for","type":"string"},{"name":"language","type":"string"},{"name":"number","type":"long"},{"name":"os","type":"string"},{"name":"path","type":"string"},{"name":"platform","type":"string"},{"name":"referrer","type":"string"},{"name":"referrer_host","type":"string"},{"name":"region","type":"string"},{"name":"remote_address","type":"string"},{"name":"screen","type":"string"},{"name":"session","type":"string"},{"name":"session_length","type":"long"},{"name":"timezone","type":"string"},{"name":"timezone_offset","type":"long"},{"name":"window","type":"string"}]'
+  )
+)),
+country_lookup AS (
+SELECT * FROM TABLE(
+  EXTERN(
+    '{"type":"http","uris":["https://static.imply.io/example-data/lookup/countries.tsv"]}',
+    '{"type":"tsv","findColumnsFromHeader":true}',
+    '[{"name":"Country","type":"string"},{"name":"Capital","type":"string"},{"name":"ISO3","type":"string"},{"name":"ISO2","type":"string"}]'
+  )
+))
+SELECT
+  os,
+  CONCAT(country, ' (', country_lookup.ISO3, ')') AS "country",
+  COUNT(DISTINCT session) AS "unique_sessions"
+FROM kttm_data
+LEFT JOIN country_lookup ON country_lookup.Country = kttm_data.country
+GROUP BY 1, 2
+ORDER BY 3 DESC
+LIMIT 10
+`,
+      ),
+    },
+    {
+      id: 'demo6',
+      tabName: 'Demo 6',
+      query: makeDemoQuery(
+        `
+-- At the heart of the sql-msq-task engine is the ability to sort arbitrarily large amounts of data. Demo 6
+-- re-sorts the kttm_simple datasource on an arbitrary sort condition. This isn't possible with the "sql" or "native"
+-- engines since it requires the same order of magnitude of resources as ingesting the entire dataset over again.
+
+SELECT
+  session,
+  number,
+  browser,
+  browser_version,
+  "language",
+  event_type,
+  event_subtype
+FROM "kttm_simple"
+ORDER BY
+  session ASC,
+  number ASC
+`,
+      ).changeEngine('sql-msq-task'),
+    },
+  ];
+}
diff --git a/web-console/src/views/workbench-view/execution-details-dialog/execution-details-dialog.scss b/web-console/src/views/workbench-view/execution-details-dialog/execution-details-dialog.scss
new file mode 100644
index 000000000000..92664d24040b
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-details-dialog/execution-details-dialog.scss
@@ -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 '../../../variables';
+
+.execution-details-dialog {
+  &.#{$bp-ns}-dialog {
+    width: 95vw;
+  }
+
+  .#{$bp-ns}-dialog-body {
+    height: 70vh;
+    position: relative;
+    margin: 0;
+
+    .execution-details-pane {
+      height: 100%;
+    }
+  }
+}
diff --git a/web-console/src/views/workbench-view/execution-details-dialog/execution-details-dialog.tsx b/web-console/src/views/workbench-view/execution-details-dialog/execution-details-dialog.tsx
new file mode 100644
index 000000000000..61abc6ea7a23
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-details-dialog/execution-details-dialog.tsx
@@ -0,0 +1,58 @@
+/*
+ * 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 { Button, Classes, Dialog } from '@blueprintjs/core';
+import React from 'react';
+
+import { Execution } from '../../../druid-models';
+import { ExecutionDetailsTab } from '../execution-details-pane/execution-details-pane';
+import { ExecutionDetailsPaneLoader } from '../execution-details-pane-loader/execution-details-pane-loader';
+
+import './execution-details-dialog.scss';
+
+export interface ExecutionDetailsDialogProps {
+  id: string;
+  initTab?: ExecutionDetailsTab;
+  initExecution?: Execution;
+  goToIngestion(taskId: string): void;
+  onClose(): void;
+}
+
+export const ExecutionDetailsDialog = React.memo(function ExecutionDetailsDialog(
+  props: ExecutionDetailsDialogProps,
+) {
+  const { id, initTab, initExecution, goToIngestion, onClose } = props;
+
+  return (
+    <Dialog className="execution-details-dialog" isOpen onClose={onClose} title="Execution details">
+      <div className={Classes.DIALOG_BODY}>
+        <ExecutionDetailsPaneLoader
+          id={id}
+          initTab={initTab}
+          initExecution={initExecution}
+          goToIngestion={goToIngestion}
+        />
+      </div>
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button text="Close" onClick={onClose} />
+        </div>
+      </div>
+    </Dialog>
+  );
+});
diff --git a/web-console/src/views/workbench-view/execution-details-pane-loader/execution-details-pane-loader.tsx b/web-console/src/views/workbench-view/execution-details-pane-loader/execution-details-pane-loader.tsx
new file mode 100644
index 000000000000..5f6cba93f976
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-details-pane-loader/execution-details-pane-loader.tsx
@@ -0,0 +1,71 @@
+/*
+ * 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 React from 'react';
+
+import { Loader } from '../../../components';
+import { Execution } from '../../../druid-models';
+import { getTaskExecution } from '../../../helpers';
+import { useInterval, useQueryManager } from '../../../hooks';
+import { QueryState } from '../../../utils';
+import {
+  ExecutionDetailsPane,
+  ExecutionDetailsTab,
+} from '../execution-details-pane/execution-details-pane';
+
+export interface ExecutionDetailsPaneLoaderProps {
+  id: string;
+  initTab?: ExecutionDetailsTab;
+  initExecution?: Execution;
+  goToIngestion(taskId: string): void;
+}
+
+export const ExecutionDetailsPaneLoader = React.memo(function ExecutionDetailsPaneLoader(
+  props: ExecutionDetailsPaneLoaderProps,
+) {
+  const { id, initTab, initExecution, goToIngestion } = props;
+
+  const [executionState, queryManager] = useQueryManager<string, Execution>({
+    processQuery: (id: string) => {
+      return getTaskExecution(id);
+    },
+    initQuery: initExecution ? undefined : id,
+    initState: initExecution ? new QueryState({ data: initExecution }) : undefined,
+  });
+
+  useInterval(() => {
+    const execution = executionState.data;
+    if (!execution) return;
+    if (execution.isWaitingForQuery()) {
+      queryManager.runQuery(execution.id);
+    }
+  }, 1000);
+
+  const execution = executionState.getSomeData();
+  if (execution) {
+    return (
+      <ExecutionDetailsPane execution={execution} initTab={initTab} goToIngestion={goToIngestion} />
+    );
+  } else if (executionState.isLoading()) {
+    return <Loader className="execution-stages-pane" />;
+  } else if (executionState.isError()) {
+    return <div>{executionState.getErrorMessage()}</div>;
+  } else {
+    return null;
+  }
+});
diff --git a/web-console/src/views/workbench-view/execution-details-pane/execution-details-pane.scss b/web-console/src/views/workbench-view/execution-details-pane/execution-details-pane.scss
new file mode 100644
index 000000000000..821e229db380
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-details-pane/execution-details-pane.scss
@@ -0,0 +1,28 @@
+/*
+ * 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.
+ */
+
+.execution-details-pane {
+  .main-section {
+    overflow: auto;
+  }
+
+  .flexible-query-input,
+  .result-table-pane {
+    height: 100%;
+  }
+}
diff --git a/web-console/src/views/workbench-view/execution-details-pane/execution-details-pane.tsx b/web-console/src/views/workbench-view/execution-details-pane/execution-details-pane.tsx
new file mode 100644
index 000000000000..a19f901e733e
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-details-pane/execution-details-pane.tsx
@@ -0,0 +1,147 @@
+/*
+ * 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 { IconNames } from '@blueprintjs/icons';
+import { RefName } from 'druid-query-toolkit';
+import * as JSONBig from 'json-bigint-native';
+import React, { useState } from 'react';
+
+import { FancyTabPane } from '../../../components';
+import { Execution } from '../../../druid-models';
+import { ExecutionErrorPane } from '../execution-error-pane/execution-error-pane';
+import { ExecutionStagesPane } from '../execution-stages-pane/execution-stages-pane';
+import { ExecutionWarningsPane } from '../execution-warnings-pane/execution-warnings-pane';
+import { FlexibleQueryInput } from '../flexible-query-input/flexible-query-input';
+import { ResultTablePane } from '../result-table-pane/result-table-pane';
+
+import './execution-details-pane.scss';
+
+export type ExecutionDetailsTab = 'general' | 'sql' | 'native' | 'result' | 'error' | 'warnings';
+
+interface ExecutionDetailsPaneProps {
+  execution: Execution;
+  initTab?: ExecutionDetailsTab;
+  goToIngestion(taskId: string): void;
+}
+
+export const ExecutionDetailsPane = React.memo(function ExecutionDetailsPane(
+  props: ExecutionDetailsPaneProps,
+) {
+  const { execution, initTab, goToIngestion } = props;
+  const [activeTab, setActiveTab] = useState<ExecutionDetailsTab>(initTab || 'general');
+
+  function renderContent() {
+    switch (activeTab) {
+      case 'general': {
+        const ingestDatasource = execution.getIngestDatasource();
+        return (
+          <div>
+            <p>{`General info for ${execution.id}${
+              ingestDatasource ? ` ingesting into ${RefName.create(ingestDatasource, true)}` : ''
+            }`}</p>
+            {execution.error && <ExecutionErrorPane execution={execution} />}
+            {execution.stages ? (
+              <ExecutionStagesPane
+                execution={execution}
+                onErrorClick={() => setActiveTab('error')}
+                onWarningClick={() => setActiveTab('warnings')}
+                goToIngestion={goToIngestion}
+              />
+            ) : (
+              <p>No stage info was reported.</p>
+            )}
+          </div>
+        );
+      }
+
+      case 'sql':
+      case 'native':
+        return (
+          <FlexibleQueryInput
+            queryString={
+              activeTab === 'sql'
+                ? String(execution.sqlQuery)
+                : JSONBig.stringify(execution.nativeQuery, undefined, 2)
+            }
+            autoHeight={false}
+          />
+        );
+
+      case 'result':
+        if (!execution.result) return;
+        return (
+          <ResultTablePane
+            runeMode={execution.engine === 'native'}
+            queryResult={execution.result}
+            onExport={() => {}}
+            onQueryAction={() => {}}
+          />
+        );
+
+      case 'error':
+        return <ExecutionErrorPane execution={execution} />;
+
+      case 'warnings':
+        return <ExecutionWarningsPane execution={execution} />;
+
+      default:
+        return;
+    }
+  }
+
+  return (
+    <FancyTabPane
+      className="execution-details-pane"
+      activeTab={activeTab}
+      onActivateTab={setActiveTab as any}
+      tabs={[
+        {
+          id: 'general',
+          label: 'General',
+          icon: IconNames.MANY_TO_ONE,
+        },
+        Boolean(execution.sqlQuery) && {
+          id: 'sql',
+          label: 'SQL query',
+          icon: IconNames.APPLICATION,
+        },
+        Boolean(execution.nativeQuery) && {
+          id: 'native',
+          label: 'Native query',
+          icon: IconNames.COG,
+        },
+        execution.result && {
+          id: 'result',
+          label: 'Results',
+          icon: IconNames.TH,
+        },
+        execution.error && {
+          id: 'error',
+          label: 'Error',
+          icon: IconNames.ERROR,
+        },
+        execution.warnings && {
+          id: 'warnings',
+          label: 'Warnings',
+          icon: IconNames.WARNING_SIGN,
+        },
+      ]}
+    >
+      {renderContent()}
+    </FancyTabPane>
+  );
+});
diff --git a/web-console/src/views/workbench-view/execution-error-pane/__snapshots__/execution-error-pane.spec.tsx.snap b/web-console/src/views/workbench-view/execution-error-pane/__snapshots__/execution-error-pane.spec.tsx.snap
new file mode 100644
index 000000000000..55c2b8976870
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-error-pane/__snapshots__/execution-error-pane.spec.tsx.snap
@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ExecutionErrorPane matches snapshot 1`] = `
+<Blueprint4.Callout
+  className="execution-error-pane"
+  icon="error"
+>
+  <p
+    className="error-message-text"
+  >
+    UnknownError: 
+    java.lang.RuntimeException: java.lang.RuntimeException: Error occured while trying to read uri: https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz_
+     
+    <a
+      onClick={[Function]}
+    >
+      (Stack trace)
+    </a>
+  </p>
+  <p>
+    Failed task ID: 
+    <Memo(ClickToCopy)
+      text="query-0cf1a40a-aaef-4d17-bda4-5afa7edf07e7-worker0"
+    />
+     
+    On host: 
+    <Memo(ClickToCopy)
+      text="localhost:8101"
+    />
+     
+    Debug:
+     
+    <a
+      onClick={[Function]}
+    >
+      download query detail archive
+    </a>
+  </p>
+</Blueprint4.Callout>
+`;
diff --git a/web-console/src/views/workbench-view/execution-error-pane/execution-error-pane.scss b/web-console/src/views/workbench-view/execution-error-pane/execution-error-pane.scss
new file mode 100644
index 000000000000..7ba5fcf36f94
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-error-pane/execution-error-pane.scss
@@ -0,0 +1,30 @@
+/*
+ * 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 '../../../variables';
+
+.execution-error-pane {
+  .#{$bp-ns}-dark & {
+    background: $dark-gray3;
+  }
+
+  .error-message-text {
+    max-height: 75px;
+    overflow: auto;
+  }
+}
diff --git a/web-console/src/views/workbench-view/execution-error-pane/execution-error-pane.spec.tsx b/web-console/src/views/workbench-view/execution-error-pane/execution-error-pane.spec.tsx
new file mode 100644
index 000000000000..c9669840a607
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-error-pane/execution-error-pane.spec.tsx
@@ -0,0 +1,32 @@
+/*
+ * 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 React from 'react';
+
+import { EXECUTION_INGEST_ERROR } from '../../../druid-models/execution/execution-ingest-error.mock';
+
+import { ExecutionErrorPane } from './execution-error-pane';
+
+describe('ExecutionErrorPane', () => {
+  it('matches snapshot', () => {
+    const queryError = shallow(<ExecutionErrorPane execution={EXECUTION_INGEST_ERROR} />);
+
+    expect(queryError).toMatchSnapshot();
+  });
+});
diff --git a/web-console/src/views/workbench-view/execution-error-pane/execution-error-pane.tsx b/web-console/src/views/workbench-view/execution-error-pane/execution-error-pane.tsx
new file mode 100644
index 000000000000..7e37d64b9b57
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-error-pane/execution-error-pane.tsx
@@ -0,0 +1,94 @@
+/*
+ * 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 { Callout } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import React, { useState } from 'react';
+
+import { ClickToCopy } from '../../../components';
+import { ShowValueDialog } from '../../../dialogs/show-value-dialog/show-value-dialog';
+import { Execution } from '../../../druid-models';
+import { downloadQueryDetailArchive } from '../../../utils';
+
+import './execution-error-pane.scss';
+
+export interface ExecutionErrorPaneProps {
+  execution: Execution;
+}
+
+export const ExecutionErrorPane = React.memo(function ExecutionErrorPane(
+  props: ExecutionErrorPaneProps,
+) {
+  const { execution } = props;
+  const [stackToShow, setStackToShow] = useState<string | undefined>();
+  if (!execution.error) return null;
+
+  const { error, exceptionStackTrace, taskId, host } = execution.error;
+
+  return (
+    <Callout className="execution-error-pane" icon={IconNames.ERROR}>
+      <p className="error-message-text">
+        {error.errorCode && <>{`${error.errorCode}: `}</>}
+        {error.errorMessage || (exceptionStackTrace || '').split('\n')[0]}
+        {exceptionStackTrace && (
+          <>
+            {' '}
+            <a
+              onClick={() => {
+                setStackToShow(exceptionStackTrace);
+              }}
+            >
+              (Stack trace)
+            </a>
+          </>
+        )}
+      </p>
+      <p>
+        {taskId && (
+          <>
+            Failed task ID: <ClickToCopy text={taskId} />
+            &nbsp;
+          </>
+        )}
+        {host && (
+          <>
+            On host: <ClickToCopy text={host} />
+            &nbsp;
+          </>
+        )}
+        Debug:{' '}
+        <a
+          onClick={() => {
+            void downloadQueryDetailArchive(execution.id);
+          }}
+        >
+          download query detail archive
+        </a>
+      </p>
+
+      {stackToShow && (
+        <ShowValueDialog
+          size="large"
+          title="Full stack trace"
+          onClose={() => setStackToShow(undefined)}
+          str={stackToShow}
+        />
+      )}
+    </Callout>
+  );
+});
diff --git a/web-console/src/views/workbench-view/execution-progress-bar-pane/__snapshots__/execution-progress-bar-pane.spec.tsx.snap b/web-console/src/views/workbench-view/execution-progress-bar-pane/__snapshots__/execution-progress-bar-pane.spec.tsx.snap
new file mode 100644
index 000000000000..52920238123f
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-progress-bar-pane/__snapshots__/execution-progress-bar-pane.spec.tsx.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ExecutionProgressBarPane matches snapshot 1`] = `
+<div
+  className="execution-progress-bar-pane"
+>
+  <Component>
+    Query complete, waiting for segments to be loaded...
+     
+    <span
+      className="cancel"
+      onClick={[Function]}
+    >
+      (stop waiting)
+    </span>
+  </Component>
+  <Blueprint4.ProgressBar
+    className="overall"
+    intent="primary"
+    key="actual"
+  />
+</div>
+`;
diff --git a/web-console/src/views/workbench-view/execution-progress-bar-pane/execution-progress-bar-pane.scss b/web-console/src/views/workbench-view/execution-progress-bar-pane/execution-progress-bar-pane.scss
new file mode 100644
index 000000000000..557d8d6bdab7
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-progress-bar-pane/execution-progress-bar-pane.scss
@@ -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 '../../../variables';
+
+.execution-progress-bar-pane {
+  .cancel,
+  .toggle-live-reports {
+    color: $blue4;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .#{$bp-ns}-label {
+    margin: 8px 0;
+  }
+
+  .#{$bp-ns}-progress-meter {
+    animation-duration: 0.9s !important;
+    animation-direction: normal !important;
+  }
+}
diff --git a/web-console/src/views/workbench-view/execution-progress-bar-pane/execution-progress-bar-pane.spec.tsx b/web-console/src/views/workbench-view/execution-progress-bar-pane/execution-progress-bar-pane.spec.tsx
new file mode 100644
index 000000000000..a778abd78e5a
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-progress-bar-pane/execution-progress-bar-pane.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 { shallow } from 'enzyme';
+import React from 'react';
+
+import { EXECUTION_INGEST_COMPLETE } from '../../../druid-models/mocks';
+
+import { ExecutionProgressBarPane } from './execution-progress-bar-pane';
+
+describe('ExecutionProgressBarPane', () => {
+  it('matches snapshot', () => {
+    const comp = shallow(
+      <ExecutionProgressBarPane execution={EXECUTION_INGEST_COMPLETE} onCancel={() => {}} />,
+    );
+
+    expect(comp).toMatchSnapshot();
+  });
+});
diff --git a/web-console/src/views/workbench-view/execution-progress-bar-pane/execution-progress-bar-pane.tsx b/web-console/src/views/workbench-view/execution-progress-bar-pane/execution-progress-bar-pane.tsx
new file mode 100644
index 000000000000..ee2399db8387
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-progress-bar-pane/execution-progress-bar-pane.tsx
@@ -0,0 +1,95 @@
+/*
+ * 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 { Intent, Label, ProgressBar } from '@blueprintjs/core';
+import React, { useState } from 'react';
+
+import { Execution } from '../../../druid-models';
+import { CancelQueryDialog } from '../cancel-query-dialog/cancel-query-dialog';
+
+import './execution-progress-bar-pane.scss';
+
+export interface ExecutionProgressBarPaneProps {
+  execution: Execution | undefined;
+  onCancel?(): void;
+  onToggleLiveReports?(): void;
+  showLiveReports?: boolean;
+}
+
+export const ExecutionProgressBarPane = React.memo(function ExecutionProgressBarPane(
+  props: ExecutionProgressBarPaneProps,
+) {
+  const { execution, onCancel, onToggleLiveReports, showLiveReports } = props;
+  const [showCancelConfirm, setShowCancelConfirm] = useState(false);
+
+  const stages = execution?.stages;
+
+  function cancelMaybeConfirm() {
+    if (!onCancel) return;
+    if (execution?.isProcessingData()) {
+      setShowCancelConfirm(true);
+    } else {
+      onCancel();
+    }
+  }
+
+  const idx = stages ? stages.currentStageIndex() : -1;
+  return (
+    <div className="execution-progress-bar-pane">
+      <Label>
+        {stages
+          ? execution.isWaitingForQuery()
+            ? 'Running query...'
+            : 'Query complete, waiting for segments to be loaded...'
+          : 'Loading...'}
+        {onCancel && (
+          <>
+            {' '}
+            <span className="cancel" onClick={cancelMaybeConfirm}>
+              {stages && !execution.isWaitingForQuery() ? '(stop waiting)' : '(cancel)'}
+            </span>
+          </>
+        )}
+      </Label>
+      <ProgressBar
+        className="overall"
+        key={stages ? 'actual' : 'pending'}
+        intent={stages ? Intent.PRIMARY : undefined}
+        value={stages && execution.isWaitingForQuery() ? stages.overallProgress() : undefined}
+      />
+      {stages && idx >= 0 && (
+        <>
+          <Label>{`Current stage (${idx + 1} of ${stages.stageCount()})`}</Label>
+          <ProgressBar
+            className="stage"
+            stripes={false}
+            value={stages.stageProgress(stages.getStage(idx))}
+          />
+          {onToggleLiveReports && (
+            <Label className="toggle-live-reports" onClick={onToggleLiveReports}>
+              {showLiveReports ? 'Hide live reports' : 'Show live reports'}
+            </Label>
+          )}
+        </>
+      )}
+      {showCancelConfirm && onCancel && (
+        <CancelQueryDialog onCancel={onCancel} onDismiss={() => setShowCancelConfirm(false)} />
+      )}
+    </div>
+  );
+});
diff --git a/web-console/src/views/workbench-view/execution-progress-pane/execution-progress-pane.scss b/web-console/src/views/workbench-view/execution-progress-pane/execution-progress-pane.scss
new file mode 100644
index 000000000000..361b0c2681a5
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-progress-pane/execution-progress-pane.scss
@@ -0,0 +1,73 @@
+/*
+ * 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.
+ */
+
+.execution-progress-pane {
+  position: relative;
+
+  .execution-progress-bar-pane {
+    position: absolute;
+    left: 15px;
+    right: 15px;
+    top: 15px;
+  }
+
+  .execution-stages-pane {
+    position: absolute;
+    top: 160px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  &.stale {
+    .execution-progress-bar-pane,
+    .execution-stages-pane {
+      opacity: 0.7;
+    }
+  }
+
+  .network-error-notification {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 20px;
+      left: 20px;
+      right: 20px;
+      bottom: 20px;
+      border: 2px solid gray;
+      border-radius: 10px;
+      background: black;
+      opacity: 0.5;
+    }
+
+    .message {
+      position: absolute;
+      top: 45%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 20px;
+      color: yellow;
+    }
+  }
+}
diff --git a/web-console/src/views/workbench-view/execution-progress-pane/execution-progress-pane.tsx b/web-console/src/views/workbench-view/execution-progress-pane/execution-progress-pane.tsx
new file mode 100644
index 000000000000..42ed0ab2a002
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-progress-pane/execution-progress-pane.tsx
@@ -0,0 +1,62 @@
+/*
+ * 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 classNames from 'classnames';
+import React, { useState } from 'react';
+
+import { Execution } from '../../../druid-models';
+import { ExecutionProgressBarPane } from '../execution-progress-bar-pane/execution-progress-bar-pane';
+import { ExecutionStagesPane } from '../execution-stages-pane/execution-stages-pane';
+
+import './execution-progress-pane.scss';
+
+export interface ExecutionProgressPaneProps {
+  execution: Execution;
+  intermediateError?: Error;
+  goToIngestion(taskId: string): void;
+  onCancel?(): void;
+  allowLiveReportsPane?: boolean;
+}
+
+export const ExecutionProgressPane = React.memo(function ExecutionProgressPane(
+  props: ExecutionProgressPaneProps,
+) {
+  const { execution, intermediateError, onCancel, allowLiveReportsPane, goToIngestion } = props;
+  const [showLiveReports, setShowLiveReports] = useState(true);
+
+  return (
+    <div className={classNames('execution-progress-pane', { stale: intermediateError })}>
+      <ExecutionProgressBarPane
+        execution={execution}
+        onToggleLiveReports={
+          allowLiveReportsPane ? () => setShowLiveReports(!showLiveReports) : undefined
+        }
+        showLiveReports={allowLiveReportsPane && showLiveReports}
+        onCancel={onCancel}
+      />
+      {allowLiveReportsPane && showLiveReports && execution.stages && (
+        <ExecutionStagesPane execution={execution} goToIngestion={goToIngestion} />
+      )}
+      {intermediateError && (
+        <div className="network-error-notification">
+          <div className="message">Network connectivity issues...</div>
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/web-console/src/views/workbench-view/execution-stages-pane-loader/execution-stages-pane-loader.tsx b/web-console/src/views/workbench-view/execution-stages-pane-loader/execution-stages-pane-loader.tsx
new file mode 100644
index 000000000000..eb700fe6ae84
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-stages-pane-loader/execution-stages-pane-loader.tsx
@@ -0,0 +1,62 @@
+/*
+ * 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 React from 'react';
+
+import { Loader } from '../../../components';
+import { Execution } from '../../../druid-models';
+import { getTaskExecution } from '../../../helpers';
+import { useInterval, useQueryManager } from '../../../hooks';
+import { ExecutionStagesPane } from '../execution-stages-pane/execution-stages-pane';
+
+export interface ExecutionStagesPaneLoaderProps {
+  id: string;
+  goToIngestion(taskId: string): void;
+}
+
+export const ExecutionStagesPaneLoader = React.memo(function ExecutionStagesPaneLoader(
+  props: ExecutionStagesPaneLoaderProps,
+) {
+  const { id, goToIngestion } = props;
+
+  const [executionState, queryManager] = useQueryManager<string, Execution>({
+    processQuery: (id: string) => {
+      return getTaskExecution(id);
+    },
+    initQuery: id,
+  });
+
+  useInterval(() => {
+    const execution = executionState.data;
+    if (!execution) return;
+    if (execution.isWaitingForQuery()) {
+      queryManager.rerunLastQuery(true);
+    }
+  }, 1000);
+
+  const execution = executionState.getSomeData();
+  if (execution) {
+    return <ExecutionStagesPane execution={execution} goToIngestion={goToIngestion} />;
+  } else if (executionState.isLoading()) {
+    return <Loader className="execution-stages-pane" />;
+  } else if (executionState.isError()) {
+    return <div>{executionState.getErrorMessage()}</div>;
+  } else {
+    return null;
+  }
+});
diff --git a/web-console/src/views/workbench-view/execution-stages-pane/__snapshots__/execution-stages-pane.spec.tsx.snap b/web-console/src/views/workbench-view/execution-stages-pane/__snapshots__/execution-stages-pane.spec.tsx.snap
new file mode 100644
index 000000000000..f25d314f0f41
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-stages-pane/__snapshots__/execution-stages-pane.spec.tsx.snap
@@ -0,0 +1,427 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ExecutionStagesPane matches snapshot 1`] = `
+<ReactTable
+  AggregatedComponent={[Function]}
+  ExpanderComponent={[Function]}
+  FilterComponent={[Function]}
+  LoadingComponent={[Function]}
+  NoDataComponent={[Function]}
+  PadRowComponent={[Function]}
+  PaginationComponent={[Function]}
+  PivotValueComponent={[Function]}
+  ResizerComponent={[Function]}
+  SubComponent={[Function]}
+  TableComponent={[Function]}
+  TbodyComponent={[Function]}
+  TdComponent={[Function]}
+  TfootComponent={[Function]}
+  ThComponent={[Function]}
+  TheadComponent={[Function]}
+  TrComponent={[Function]}
+  TrGroupComponent={[Function]}
+  aggregatedKey="_aggregated"
+  className="execution-stages-pane -striped -highlight padded-header"
+  collapseOnDataChange={false}
+  collapseOnPageChange={true}
+  collapseOnSortingChange={true}
+  column={
+    Object {
+      "Aggregated": undefined,
+      "Cell": undefined,
+      "Expander": undefined,
+      "Filter": undefined,
+      "Footer": undefined,
+      "Header": undefined,
+      "Pivot": undefined,
+      "PivotValue": undefined,
+      "Placeholder": undefined,
+      "aggregate": undefined,
+      "className": "",
+      "filterAll": false,
+      "filterMethod": undefined,
+      "filterable": undefined,
+      "footerClassName": "",
+      "footerStyle": Object {},
+      "getFooterProps": [Function],
+      "getHeaderProps": [Function],
+      "getProps": [Function],
+      "headerClassName": "",
+      "headerStyle": Object {},
+      "minResizeWidth": 11,
+      "minWidth": 100,
+      "resizable": undefined,
+      "show": true,
+      "sortMethod": undefined,
+      "sortable": undefined,
+      "style": Object {},
+    }
+  }
+  columns={
+    Array [
+      Object {
+        "Cell": [Function],
+        "Header": <React.Fragment>
+          Stage
+          <br />
+          <i>
+            processorType
+          </i>
+        </React.Fragment>,
+        "accessor": "stageNumber",
+        "className": "padded",
+        "id": "stage",
+        "width": 140,
+      },
+      Object {
+        "Cell": [Function],
+        "Header": "Counter",
+        "accessor": "stageNumber",
+        "className": "padded",
+        "id": "counter",
+        "width": 150,
+      },
+      Object {
+        "Cell": [Function],
+        "Header": <React.Fragment>
+          Data processed
+          <br />
+          <i>
+            rows   (size or files)
+          </i>
+        </React.Fragment>,
+        "accessor": [Function],
+        "className": "padded",
+        "id": "data_processed",
+        "width": 220,
+      },
+      Object {
+        "Cell": [Function],
+        "Header": <React.Fragment>
+          Data processing rate
+          <br />
+          <i>
+            rows/s   (data rate)
+          </i>
+        </React.Fragment>,
+        "accessor": [Function],
+        "className": "padded",
+        "id": "data_processing_rate",
+        "width": 200,
+      },
+      Object {
+        "Header": "Phase",
+        "accessor": [Function],
+        "className": "padded",
+        "id": "phase",
+        "width": 130,
+      },
+      Object {
+        "Cell": [Function],
+        "Header": "Timing",
+        "accessor": [Function],
+        "className": "padded",
+        "id": "timing",
+        "width": 170,
+      },
+      Object {
+        "Header": <React.Fragment>
+          Num
+          <br />
+          workers
+        </React.Fragment>,
+        "accessor": "workerCount",
+        "className": "padded",
+        "width": 75,
+      },
+      Object {
+        "Header": <React.Fragment>
+          Output
+          <br />
+          partitions
+        </React.Fragment>,
+        "accessor": "partitionCount",
+        "className": "padded",
+        "width": 75,
+      },
+      Object {
+        "Cell": [Function],
+        "Header": "Cluster by",
+        "accessor": [Function],
+        "className": "padded",
+        "id": "clusterBy",
+        "minWidth": 400,
+      },
+    ]
+  }
+  data={
+    Array [
+      Object {
+        "definition": Object {
+          "id": "0b353011-6ea1-480a-8ca8-386771621672_0",
+          "input": Array [
+            Object {
+              "inputFormat": Object {
+                "featureSpec": Object {},
+                "flattenSpec": null,
+                "keepNullColumns": false,
+                "type": "json",
+              },
+              "inputSource": Object {
+                "httpAuthenticationPassword": null,
+                "httpAuthenticationUsername": null,
+                "type": "http",
+                "uris": Array [
+                  "https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz",
+                ],
+              },
+              "signature": Array [
+                Object {
+                  "name": "timestamp",
+                  "type": "STRING",
+                },
+                Object {
+                  "name": "agent_type",
+                  "type": "STRING",
+                },
+              ],
+              "type": "external",
+            },
+          ],
+          "maxWorkerCount": 1,
+          "processor": Object {
+            "query": Object {
+              "columns": Array [
+                "agent_type",
+                "v0",
+              ],
+              "context": Object {
+                "__timeColumn": "v0",
+                "finalize": false,
+                "finalizeAggregations": false,
+                "groupByEnableMultiValueUnnesting": false,
+                "scanSignature": "[{\\"name\\":\\"agent_type\\",\\"type\\":\\"STRING\\"},{\\"name\\":\\"v0\\",\\"type\\":\\"LONG\\"}]",
+                "sqlInsertSegmentGranularity": "{\\"type\\":\\"all\\"}",
+                "sqlQueryId": "32ced762-7679-4a25-9220-3915c5976961",
+                "sqlReplaceTimeChunks": "all",
+              },
+              "dataSource": Object {
+                "inputNumber": 0,
+                "type": "inputNumber",
+              },
+              "granularity": Object {
+                "type": "all",
+              },
+              "intervals": Object {
+                "intervals": Array [
+                  "-146136543-09-08T08:23:32.096Z/146140482-04-24T15:36:27.903Z",
+                ],
+                "type": "intervals",
+              },
+              "legacy": false,
+              "queryType": "scan",
+              "resultFormat": "compactedList",
+              "virtualColumns": Array [
+                Object {
+                  "expression": "timestamp_parse(\\"timestamp\\",null,'UTC')",
+                  "name": "v0",
+                  "outputType": "LONG",
+                  "type": "expression",
+                },
+              ],
+            },
+            "type": "scan",
+          },
+          "shuffleCheckHasMultipleValues": true,
+          "shuffleSpec": Object {
+            "clusterBy": Object {
+              "columns": Array [
+                Object {
+                  "columnName": "__boost",
+                },
+              ],
+            },
+            "targetSize": 3000000,
+            "type": "targetSize",
+          },
+          "signature": Array [
+            Object {
+              "name": "__boost",
+              "type": "LONG",
+            },
+            Object {
+              "name": "agent_type",
+              "type": "STRING",
+            },
+            Object {
+              "name": "v0",
+              "type": "LONG",
+            },
+          ],
+        },
+        "duration": 20229,
+        "partitionCount": 1,
+        "phase": "FINISHED",
+        "sort": true,
+        "stageNumber": 0,
+        "startTime": "2022-08-22T20:12:53.790Z",
+        "workerCount": 1,
+      },
+      Object {
+        "definition": Object {
+          "id": "0b353011-6ea1-480a-8ca8-386771621672_1",
+          "input": Array [
+            Object {
+              "stage": 0,
+              "type": "stage",
+            },
+          ],
+          "maxWorkerCount": 1,
+          "processor": Object {
+            "columnMappings": Array [
+              Object {
+                "outputColumn": "__time",
+                "queryColumn": "v0",
+              },
+              Object {
+                "outputColumn": "agent_type",
+                "queryColumn": "agent_type",
+              },
+            ],
+            "dataSchema": Object {
+              "dataSource": "kttm_simple",
+              "dimensionsSpec": Object {
+                "dimensionExclusions": Array [
+                  "__time",
+                ],
+                "dimensions": Array [
+                  Object {
+                    "createBitmapIndex": true,
+                    "multiValueHandling": "SORTED_ARRAY",
+                    "name": "agent_type",
+                    "type": "string",
+                  },
+                ],
+                "includeAllDimensions": false,
+              },
+              "granularitySpec": Object {
+                "intervals": Array [
+                  "-146136543-09-08T08:23:32.096Z/146140482-04-24T15:36:27.903Z",
+                ],
+                "queryGranularity": Object {
+                  "type": "none",
+                },
+                "rollup": false,
+                "type": "arbitrary",
+              },
+              "metricsSpec": Array [],
+              "timestampSpec": Object {
+                "column": "__time",
+                "format": "millis",
+                "missingValue": null,
+              },
+              "transformSpec": Object {
+                "filter": null,
+                "transforms": Array [],
+              },
+            },
+            "tuningConfig": Object {
+              "maxNumWorkers": 1,
+              "maxRowsInMemory": 100000,
+              "rowsPerSegment": 3000000,
+            },
+            "type": "segmentGenerator",
+          },
+          "signature": Array [],
+        },
+        "duration": 2497,
+        "partitionCount": 1,
+        "phase": "FINISHED",
+        "stageNumber": 1,
+        "startTime": "2022-08-22T20:13:13.991Z",
+        "workerCount": 1,
+      },
+    ]
+  }
+  defaultExpanded={Object {}}
+  defaultFilterMethod={[Function]}
+  defaultFiltered={Array []}
+  defaultPage={0}
+  defaultPageSize={7}
+  defaultResized={Array []}
+  defaultSortDesc={false}
+  defaultSortMethod={[Function]}
+  defaultSorted={Array []}
+  expanderDefaults={
+    Object {
+      "filterable": false,
+      "resizable": false,
+      "sortable": false,
+      "width": 35,
+    }
+  }
+  filterable={false}
+  freezeWhenExpanded={false}
+  getLoadingProps={[Function]}
+  getNoDataProps={[Function]}
+  getPaginationProps={[Function]}
+  getProps={[Function]}
+  getResizerProps={[Function]}
+  getTableProps={[Function]}
+  getTbodyProps={[Function]}
+  getTdProps={[Function]}
+  getTfootProps={[Function]}
+  getTfootTdProps={[Function]}
+  getTfootTrProps={[Function]}
+  getTheadFilterProps={[Function]}
+  getTheadFilterThProps={[Function]}
+  getTheadFilterTrProps={[Function]}
+  getTheadGroupProps={[Function]}
+  getTheadGroupThProps={[Function]}
+  getTheadGroupTrProps={[Function]}
+  getTheadProps={[Function]}
+  getTheadThProps={[Function]}
+  getTheadTrProps={[Function]}
+  getTrGroupProps={[Function]}
+  getTrProps={[Function]}
+  groupedByPivotKey="_groupedByPivot"
+  indexKey="_index"
+  loading={false}
+  loadingText="Loading..."
+  multiSort={true}
+  nestingLevelKey="_nestingLevel"
+  nextText="Next"
+  noDataText="No stages"
+  ofText="of"
+  onFetchData={[Function]}
+  originalKey="_original"
+  pageJumpText="jump to page"
+  pageSizeOptions={
+    Array [
+      5,
+      10,
+      20,
+      25,
+      50,
+      100,
+    ]
+  }
+  pageText="Page"
+  pivotDefaults={Object {}}
+  pivotIDKey="_pivotID"
+  pivotValKey="_pivotVal"
+  previousText="Previous"
+  resizable={true}
+  resolveData={[Function]}
+  rowsSelectorText="rows per page"
+  rowsText="rows"
+  showPageJump={true}
+  showPageSizeOptions={true}
+  showPagination={false}
+  showPaginationBottom={true}
+  showPaginationTop={false}
+  sortable={false}
+  style={Object {}}
+  subRowsKey="_subRows"
+/>
+`;
diff --git a/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.scss b/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.scss
new file mode 100644
index 000000000000..6080979cd927
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.scss
@@ -0,0 +1,104 @@
+/*
+ * 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 '../../../variables';
+
+.execution-stages-pane {
+  .rt-td {
+    cursor: default;
+  }
+
+  .stage {
+    color: #8dd3c7;
+  }
+
+  .datasource {
+    color: #ffffb3;
+  }
+
+  .external {
+    color: #80b1d3;
+  }
+
+  .broadcast-tag {
+    margin-left: 3px;
+    margin-right: 1px;
+    opacity: 0.6;
+  }
+
+  .counter-spacer {
+    position: relative;
+    height: 5px;
+
+    &:after {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      right: 0;
+      content: '';
+      border-top: 1px solid white;
+      opacity: 0.2;
+    }
+
+    &.extend-right:after {
+      right: -5px;
+    }
+
+    &.extend-left:after {
+      left: -5px;
+    }
+  }
+
+  .data-transfer {
+    .counter-type-label {
+      display: inline-block;
+      width: 125px;
+      text-align: right;
+      padding-right: 15px;
+    }
+
+    .sort-percent {
+      display: inline-block;
+      margin-left: 20px;
+    }
+  }
+
+  .execution-stage-detail-pane {
+    padding: 0 10px 10px 0;
+    background: $dark-gray2;
+    min-height: 100px;
+    position: relative;
+
+    &:empty:after {
+      position: absolute;
+      top: 45%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      content: 'Detailed counters are not available';
+    }
+
+    .detail-counters-for-partitions,
+    .detail-counters-for-workers {
+      display: inline-block;
+      margin-left: 10px;
+      margin-top: 10px;
+      vertical-align: top;
+      background: $dark-gray3;
+    }
+  }
+}
diff --git a/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.spec.tsx b/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.spec.tsx
new file mode 100644
index 000000000000..2fd1da98c17d
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.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 { shallow } from 'enzyme';
+import React from 'react';
+
+import { EXECUTION_INGEST_COMPLETE } from '../../../druid-models/mocks';
+
+import { ExecutionStagesPane } from './execution-stages-pane';
+
+describe('ExecutionStagesPane', () => {
+  it('matches snapshot', () => {
+    const comp = shallow(
+      <ExecutionStagesPane execution={EXECUTION_INGEST_COMPLETE} goToIngestion={() => {}} />,
+    );
+
+    expect(comp).toMatchSnapshot();
+  });
+});
diff --git a/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.tsx b/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.tsx
new file mode 100644
index 000000000000..f376c4109abf
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-stages-pane/execution-stages-pane.tsx
@@ -0,0 +1,649 @@
+/*
+ * 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 { Button, Icon, Intent } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import { Tooltip2 } from '@blueprintjs/popover2';
+import classNames from 'classnames';
+import React from 'react';
+import ReactTable, { Column } from 'react-table';
+
+import { BracedText, TableClickableCell } from '../../../components';
+import {
+  ChannelCounterName,
+  ClusterBy,
+  CounterName,
+  Execution,
+  formatClusterBy,
+  SimpleWideCounter,
+  StageDefinition,
+  Stages,
+  summarizeInputSource,
+} from '../../../druid-models';
+import { DEFAULT_TABLE_CLASS_NAME } from '../../../react-table';
+import {
+  capitalizeFirst,
+  clamp,
+  deepGet,
+  formatBytes,
+  formatDuration,
+  formatDurationWithMs,
+  formatInteger,
+  formatPercent,
+  NumberLike,
+  oneOf,
+  twoLines,
+} from '../../../utils';
+
+import './execution-stages-pane.scss';
+
+const MAX_STAGE_ROWS = 20;
+const MAX_DETAIL_ROWS = 20;
+
+function formatBreakdown(breakdown: Record<string, number>): string {
+  return Object.keys(breakdown)
+    .map(k => `${k}: ${formatInteger(breakdown[k])}`)
+    .join('\n');
+}
+
+const formatRows = formatInteger;
+const formatRowRate = formatInteger;
+const formatSize = (bytes: number) => `(${formatBytes(bytes)})`;
+const formatByteRate = (byteRate: number) => `(${formatBytes(byteRate)}/s)`;
+const formatFrames = formatInteger;
+const formatDurationDynamic = (n: NumberLike) =>
+  n < 1000 ? formatDurationWithMs(n) : formatDuration(n);
+
+const formatFileOfTotal = (files: number, totalFiles: number) =>
+  `(${formatInteger(files)} / ${formatInteger(totalFiles)})`;
+
+const formatFileOfTotalForBrace = (files: number, totalFiles: number) =>
+  `(${formatInteger(files)} /GB ${formatInteger(totalFiles)})`;
+
+function inputLabelContent(stage: StageDefinition, inputIndex: number) {
+  const { input, broadcast } = stage.definition;
+  const stageInput = input[inputIndex];
+  return (
+    <>
+      Input{' '}
+      {stageInput.type === 'stage' && <span className="stage">{`Stage${stageInput.stage}`}</span>}
+      {stageInput.type === 'table' && (
+        <span className="datasource" title={stageInput.dataSource}>
+          {stageInput.dataSource}
+        </span>
+      )}
+      {stageInput.type === 'external' && (
+        <span className="external" title={summarizeInputSource(stageInput.inputSource, true)}>
+          {`${stageInput.inputSource.type} external`}
+        </span>
+      )}
+      {broadcast?.includes(inputIndex) && (
+        <Icon
+          className="broadcast-tag"
+          icon={IconNames.CELL_TOWER}
+          title="This input is being broadcast to all workers in this stage."
+        />
+      )}
+    </>
+  );
+}
+
+export interface ExecutionStagesPaneProps {
+  execution: Execution;
+  onErrorClick?(): void;
+  onWarningClick?(): void;
+  goToIngestion(taskId: string): void;
+}
+
+export const ExecutionStagesPane = React.memo(function ExecutionStagesPane(
+  props: ExecutionStagesPaneProps,
+) {
+  const { execution, onErrorClick, onWarningClick, goToIngestion } = props;
+  const stages = execution.stages || new Stages([]);
+  const error = execution.error;
+
+  const rowRateValues = stages.stages.map(s =>
+    formatRowRate(stages.getRateFromStage(s, 'rows') || 0),
+  );
+  const byteRateValues = stages.stages.map(s =>
+    formatByteRate(stages.getRateFromStage(s, 'bytes') || 0),
+  );
+
+  const rowsValues = stages.stages.flatMap(stage => [
+    ...stages.getInputCountersForStage(stage, 'rows').map(formatRows),
+    formatRows(stages.getTotalCounterForStage(stage, 'output', 'rows')),
+    formatRows(stages.getTotalCounterForStage(stage, 'shuffle', 'rows')),
+  ]);
+
+  const bytesAndFilesValues = stages.stages.flatMap(stage => {
+    const inputFileCount = stages.getTotalInputForStage(stage, 'totalFiles');
+    return [
+      ...stages.getInputCountersForStage(stage, 'bytes').map(formatSize),
+      formatSize(stages.getTotalCounterForStage(stage, 'output', 'bytes')),
+      formatSize(stages.getTotalCounterForStage(stage, 'shuffle', 'bytes')),
+      inputFileCount ? formatFileOfTotalForBrace(inputFileCount, inputFileCount) : '',
+    ];
+  });
+
+  function detailedStats(stage: StageDefinition) {
+    const { phase } = stage;
+    const phaseIsWorking = oneOf(phase, 'NEW', 'READING_INPUT', 'POST_READING');
+    return (
+      <div className="execution-stage-detail-pane">
+        {detailedCountersForPartitions(stage, 'input', phase === 'READING_INPUT')}
+        {detailedCountersForWorkers(stage)}
+        {detailedCountersForPartitions(stage, 'output', phaseIsWorking)}
+      </div>
+    );
+  }
+
+  function detailedCountersForWorkers(stage: StageDefinition) {
+    const wideCounters = stages.getByWorkerCountersForStage(stage);
+    if (!wideCounters.length) return;
+
+    const counterNames: ChannelCounterName[] = stages.getChannelCounterNamesForStage(stage);
+
+    const bracesRows: Record<ChannelCounterName, string[]> = {} as any;
+    const bracesExtra: Record<ChannelCounterName, string[]> = {} as any;
+    for (const counterName of counterNames) {
+      bracesRows[counterName] = wideCounters.map(wideCounter =>
+        formatRows(wideCounter[counterName]!.rows),
+      );
+      bracesExtra[counterName] = wideCounters.map(wideCounter => {
+        const totalFiles = wideCounter[counterName]!.totalFiles;
+        if (totalFiles) {
+          return formatFileOfTotalForBrace(totalFiles, totalFiles);
+        } else {
+          return formatSize(wideCounter[counterName]!.bytes);
+        }
+      });
+    }
+
+    return (
+      <ReactTable
+        className="detail-counters-for-workers"
+        data={wideCounters}
+        loading={false}
+        sortable
+        defaultSorted={[{ id: 'worker', desc: false }]}
+        defaultPageSize={clamp(wideCounters.length, 1, MAX_DETAIL_ROWS)}
+        showPagination={wideCounters.length > MAX_DETAIL_ROWS}
+        columns={[
+          {
+            Header: 'Worker',
+            id: 'worker',
+            accessor: d => d.index,
+            width: 100,
+            Cell({ value }) {
+              const taskId = `${execution.id}-worker${value}`;
+              return (
+                <TableClickableCell
+                  hoverIcon={IconNames.SHARE}
+                  title={`Go to task: ${taskId}`}
+                  onClick={() => {
+                    goToIngestion(taskId);
+                  }}
+                >{`Worker${value}`}</TableClickableCell>
+              );
+            },
+          } as Column<SimpleWideCounter>,
+        ].concat(
+          counterNames.map((counterName, i) => {
+            const isInput = counterName.startsWith('input');
+            return {
+              Header: twoLines(
+                isInput ? (
+                  <span>{inputLabelContent(stage, i)}</span>
+                ) : (
+                  stages.getStageCounterTitle(stage, counterName)
+                ),
+                isInput ? <i>rows &nbsp; (size or files)</i> : <i>rows &nbsp; (size)</i>,
+              ),
+              id: counterName,
+              accessor: d => d[counterName]!.rows,
+              className: 'padded',
+              width: 180,
+              Cell({ value, original }) {
+                const c = (original as SimpleWideCounter)[counterName]!;
+                return (
+                  <>
+                    <BracedText text={formatRows(value)} braces={bracesRows[counterName]} />
+                    {c.totalFiles ? (
+                      <>
+                        {' '}
+                        &nbsp;{' '}
+                        <BracedText
+                          text={formatFileOfTotal(c.files, c.totalFiles)}
+                          braces={bracesExtra[counterName]}
+                        />
+                      </>
+                    ) : c.bytes ? (
+                      <>
+                        {' '}
+                        &nbsp;
+                        <BracedText text={formatSize(c.bytes)} braces={bracesExtra[counterName]} />
+                      </>
+                    ) : undefined}
+                  </>
+                );
+              },
+            };
+          }),
+        )}
+      />
+    );
+  }
+
+  function detailedCountersForPartitions(
+    stage: StageDefinition,
+    type: 'input' | 'output',
+    inProgress: boolean,
+  ) {
+    const wideCounters = stages.getByPartitionCountersForStage(stage, type);
+    if (!wideCounters.length) return;
+
+    const counterNames: ChannelCounterName[] = stages.getPartitionChannelCounterNamesForStage(
+      stage,
+      type,
+    );
+
+    const bracesRows: Record<ChannelCounterName, string[]> = {} as any;
+    const bracesBytes: Record<ChannelCounterName, string[]> = {} as any;
+    for (const counterName of counterNames) {
+      bracesRows[counterName] = wideCounters.map(wideCounter =>
+        formatRows(wideCounter[counterName]!.rows),
+      );
+      bracesBytes[counterName] = wideCounters.map(wideCounter =>
+        formatSize(wideCounter[counterName]!.bytes),
+      );
+    }
+
+    return (
+      <ReactTable
+        className="detail-counters-for-partitions"
+        data={wideCounters}
+        loading={false}
+        sortable
+        defaultSorted={[{ id: 'partition', desc: false }]}
+        defaultPageSize={clamp(wideCounters.length, 1, MAX_DETAIL_ROWS)}
+        showPagination={wideCounters.length > MAX_DETAIL_ROWS}
+        columns={[
+          {
+            Header: `${capitalizeFirst(type)} partitions` + (inProgress ? '*' : ''),
+            id: 'partition',
+            accessor: d => d.index,
+            className: 'padded',
+            width: 120,
+            Cell({ value }) {
+              return `Partition${value}`;
+            },
+          } as Column<SimpleWideCounter>,
+        ].concat(
+          counterNames.map(counterName => {
+            return {
+              Header: twoLines(
+                stages.getStageCounterTitle(stage, counterName),
+                <i>rows &nbsp; (size)</i>,
+              ),
+              id: counterName,
+              accessor: d => d[counterName]!.rows,
+              className: 'padded',
+              width: 180,
+              Cell({ value, original }) {
+                const c = original[counterName];
+                return (
+                  <>
+                    <BracedText text={formatRows(value)} braces={bracesRows[counterName]} />
+                    {c.bytes ? (
+                      <>
+                        {' '}
+                        &nbsp;
+                        <BracedText text={formatSize(c.bytes)} braces={bracesBytes[counterName]} />
+                      </>
+                    ) : undefined}
+                  </>
+                );
+              },
+            };
+          }),
+        )}
+      />
+    );
+  }
+
+  function dataProcessedInput(stage: StageDefinition, inputNumber: number) {
+    const inputCounter: CounterName = `input${inputNumber}`;
+    if (!stages.hasCounterForStage(stage, inputCounter)) return;
+    const inputSizeBytes = stages.getTotalCounterForStage(stage, inputCounter, 'bytes');
+    const inputFileCount = stages.getTotalCounterForStage(stage, inputCounter, 'totalFiles');
+
+    return (
+      <div className="data-transfer" key={inputNumber}>
+        <BracedText
+          text={formatRows(stages.getTotalCounterForStage(stage, inputCounter, 'rows'))}
+          braces={rowsValues}
+        />
+        {inputFileCount ? (
+          <>
+            {' '}
+            &nbsp;{' '}
+            <BracedText
+              text={formatFileOfTotal(
+                stages.getTotalCounterForStage(stage, inputCounter, 'files'),
+                inputFileCount,
+              )}
+              braces={bytesAndFilesValues}
+            />
+          </>
+        ) : inputSizeBytes ? (
+          <>
+            {' '}
+            &nbsp; <BracedText text={formatSize(inputSizeBytes)} braces={bytesAndFilesValues} />
+          </>
+        ) : undefined}
+      </div>
+    );
+  }
+
+  function dataProcessedInputBroadcast(stage: StageDefinition, inputNumber: number) {
+    const inputCounter: CounterName = `input${inputNumber}`;
+    if (!stages.hasCounterForStage(stage, inputCounter)) return;
+    const stageInput = stage.definition.input[inputNumber];
+    if (stageInput.type !== 'stage') return;
+    const sourceStage = stages.getStage(stageInput.stage);
+    const timesRead =
+      stages.getTotalCounterForStage(stage, inputCounter, 'rows') /
+      stages.getTotalOutputForStage(sourceStage, 'rows');
+
+    let msg = timesRead.toFixed(2).replace(/\.00$/, '');
+    msg += msg === '1' ? ' time' : ' times';
+
+    return (
+      <div className="data-transfer" key={inputNumber}>
+        {`Read ${msg}`}
+      </div>
+    );
+  }
+
+  function dataProcessedOutput(stage: StageDefinition) {
+    if (!stages.hasCounterForStage(stage, 'output')) return;
+
+    return (
+      <div
+        className="data-transfer"
+        title={`${stages.getStageCounterTitle(stage, 'output')} frames: ${formatFrames(
+          stages.getTotalCounterForStage(stage, 'output', 'frames'),
+        )}`}
+      >
+        <BracedText
+          text={formatRows(stages.getTotalCounterForStage(stage, 'output', 'rows'))}
+          braces={rowsValues}
+        />{' '}
+        &nbsp;{' '}
+        <BracedText
+          text={formatSize(stages.getTotalCounterForStage(stage, 'output', 'bytes'))}
+          braces={bytesAndFilesValues}
+        />
+      </div>
+    );
+  }
+
+  function dataProcessedShuffle(stage: StageDefinition) {
+    const hasCounter = stages.hasCounterForStage(stage, 'shuffle');
+    const hasProgress = stages.hasSortProgressForStage(stage);
+    if (!hasCounter && !hasProgress) return;
+
+    const shuffleRows = stages.getTotalCounterForStage(stage, 'shuffle', 'rows');
+    const sortProgress = stages.getSortProgressForStage(stage);
+    return (
+      <div
+        className="data-transfer"
+        title={`${stages.getStageCounterTitle(stage, 'shuffle')} frames: ${formatFrames(
+          stages.getTotalCounterForStage(stage, 'shuffle', 'frames'),
+        )}`}
+      >
+        {shuffleRows ? (
+          <>
+            <BracedText text={formatRows(shuffleRows)} braces={rowsValues} /> &nbsp;{' '}
+            <BracedText
+              text={formatSize(stages.getTotalCounterForStage(stage, 'shuffle', 'bytes'))}
+              braces={bytesAndFilesValues}
+            />
+            {0 < sortProgress && sortProgress < 1 && (
+              <div className="sort-percent">{`[${formatPercent(sortProgress)}]`}</div>
+            )}
+          </>
+        ) : (
+          <BracedText text={`[${formatPercent(sortProgress)}]`} braces={rowsValues} />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <ReactTable
+      className={classNames('execution-stages-pane', DEFAULT_TABLE_CLASS_NAME)}
+      data={stages.stages}
+      loading={false}
+      noDataText="No stages"
+      sortable={false}
+      collapseOnDataChange={false}
+      defaultPageSize={clamp(stages.stageCount(), 7, MAX_STAGE_ROWS)}
+      showPagination={stages.stageCount() > MAX_STAGE_ROWS}
+      SubComponent={({ original }) => detailedStats(original)}
+      columns={[
+        {
+          Header: twoLines('Stage', <i>processorType</i>),
+          id: 'stage',
+          accessor: 'stageNumber',
+          className: 'padded',
+          width: 140,
+          Cell(props) {
+            const stage = props.original as StageDefinition;
+            const myError = error && error.stageNumber === stage.stageNumber;
+            const warnings = stages.getWarningCountForStage(stage);
+            return (
+              <>
+                <div>
+                  <span className="stage">{`Stage${stage.stageNumber}`}</span>
+                </div>
+                <div>{stage.definition.processor.type}</div>
+                {(myError || warnings > 0) && (
+                  <div>
+                    {myError && (
+                      <>
+                        <Tooltip2
+                          content={
+                            <div>
+                              {(error.error.errorCode ? `${error.error.errorCode}: ` : '') +
+                                error.error.errorMessage}
+                            </div>
+                          }
+                        >
+                          <Button
+                            minimal
+                            small
+                            icon={IconNames.ERROR}
+                            intent={Intent.DANGER}
+                            onClick={onErrorClick}
+                          />
+                        </Tooltip2>{' '}
+                      </>
+                    )}
+                    {warnings > 0 && (
+                      <Tooltip2
+                        content={
+                          <pre>{formatBreakdown(stages.getWarningBreakdownForStage(stage))}</pre>
+                        }
+                      >
+                        <Button
+                          minimal
+                          small
+                          icon={IconNames.WARNING_SIGN}
+                          text={warnings > 1 ? `${warnings}` : undefined}
+                          intent={Intent.WARNING}
+                          onClick={onWarningClick}
+                        />
+                      </Tooltip2>
+                    )}
+                  </div>
+                )}
+              </>
+            );
+          },
+        },
+        {
+          Header: 'Counter',
+          id: 'counter',
+          accessor: 'stageNumber',
+          className: 'padded',
+          width: 150,
+          Cell(props) {
+            const stage = props.original as StageDefinition;
+            const { input } = stage.definition;
+            return (
+              <>
+                {input.map((_, i) => (
+                  <div key={i}>{inputLabelContent(stage, i)}</div>
+                ))}
+                {stages.hasCounterForStage(stage, 'output') && (
+                  <>
+                    <div className="counter-spacer extend-right" />
+                    <div>{stages.getStageCounterTitle(stage, 'output')}</div>
+                  </>
+                )}
+                {stages.hasCounterForStage(stage, 'shuffle') && (
+                  <div>{stages.getStageCounterTitle(stage, 'shuffle')}</div>
+                )}
+              </>
+            );
+          },
+        },
+        {
+          Header: twoLines('Data processed', <i>rows &nbsp; (size or files)</i>),
+          id: 'data_processed',
+          accessor: () => null,
+          className: 'padded',
+          width: 220,
+          Cell({ original }) {
+            const stage = original as StageDefinition;
+            const { input, broadcast } = stage.definition;
+            return (
+              <>
+                {input.map((_, i) =>
+                  broadcast?.includes(i)
+                    ? dataProcessedInputBroadcast(stage, i)
+                    : dataProcessedInput(stage, i),
+                )}
+                {stages.hasCounterForStage(stage, 'output') && (
+                  <div className="counter-spacer extend-left" />
+                )}
+                {dataProcessedOutput(stage)}
+                {dataProcessedShuffle(stage)}
+              </>
+            );
+          },
+        },
+        {
+          Header: twoLines('Data processing rate', <i>rows/s &nbsp; (data rate)</i>),
+          id: 'data_processing_rate',
+          accessor: s => stages.getRateFromStage(s, 'rows'),
+          className: 'padded',
+          width: 200,
+          Cell({ value, original }) {
+            const stage = original as StageDefinition;
+            if (typeof value !== 'number') return null;
+
+            const byteRate = stages.getRateFromStage(stage, 'bytes');
+            return (
+              <>
+                <BracedText text={formatRowRate(value)} braces={rowRateValues} />
+                {byteRate ? (
+                  <>
+                    {' '}
+                    &nbsp; <BracedText text={formatByteRate(byteRate)} braces={byteRateValues} />
+                  </>
+                ) : undefined}
+              </>
+            );
+          },
+        },
+        {
+          Header: 'Phase',
+          id: 'phase',
+          accessor: row => (row.phase ? capitalizeFirst(row.phase.replace(/_/g, ' ')) : ''),
+          className: 'padded',
+          width: 130,
+        },
+        {
+          Header: 'Timing',
+          id: 'timing',
+          accessor: row => row.startTime,
+          className: 'padded',
+          width: 170,
+          Cell({ value, original }) {
+            const duration: number | undefined = original.duration;
+            if (!value) return null;
+            return (
+              <div title={value + (duration ? `/${formatDurationWithMs(duration)}` : '')}>
+                <div>{value.replace('T', ' ').replace(/\.\d\d\dZ$/, '')}</div>
+                <div>{duration ? formatDurationDynamic(duration) : ''}</div>
+              </div>
+            );
+          },
+        },
+        {
+          Header: twoLines('Num', 'workers'),
+          accessor: 'workerCount',
+          className: 'padded',
+          width: 75,
+        },
+        {
+          Header: twoLines('Output', 'partitions'),
+          accessor: 'partitionCount',
+          className: 'padded',
+          width: 75,
+        },
+        {
+          Header: 'Cluster by',
+          id: 'clusterBy',
+          className: 'padded',
+          minWidth: 400,
+          accessor: row => formatClusterBy(deepGet(row, 'definition.shuffleSpec.clusterBy')),
+          Cell({ value, original }) {
+            const clusterBy: ClusterBy | undefined = deepGet(
+              original,
+              'definition.shuffleSpec.clusterBy',
+            );
+            if (!clusterBy) return null;
+            if (clusterBy.bucketByCount) {
+              return (
+                <>
+                  <div>{`Partition by: ${formatClusterBy(clusterBy, 'partition')}`}</div>
+                  <div>{`Cluster by: ${formatClusterBy(clusterBy, 'cluster')}`}</div>
+                </>
+              );
+            } else {
+              return <div title={value}>{value}</div>;
+            }
+          },
+        },
+      ]}
+    />
+  );
+});
diff --git a/web-console/src/views/workbench-view/execution-submit-dialog/execution-submit-dialog.scss b/web-console/src/views/workbench-view/execution-submit-dialog/execution-submit-dialog.scss
new file mode 100644
index 000000000000..77d355bd8419
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-submit-dialog/execution-submit-dialog.scss
@@ -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 '../../../variables';
+
+.execution-submit-dialog {
+  &.#{$bp-ns}-dialog {
+    top: 5%;
+    width: 90%;
+  }
+
+  .execution-submit-dialog-textarea {
+    margin-bottom: 10px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+  }
+}
diff --git a/web-console/src/views/workbench-view/execution-submit-dialog/execution-submit-dialog.tsx b/web-console/src/views/workbench-view/execution-submit-dialog/execution-submit-dialog.tsx
new file mode 100644
index 000000000000..e6cc36ca6469
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-submit-dialog/execution-submit-dialog.tsx
@@ -0,0 +1,139 @@
+/*
+ * 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 { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
+import React, { useState } from 'react';
+import AceEditor from 'react-ace';
+
+import { Execution } from '../../../druid-models';
+import { AppToaster } from '../../../singletons';
+import { validJson } from '../../../utils';
+
+import './execution-submit-dialog.scss';
+
+export interface ExecutionSubmitDialogProps {
+  onSubmit: (execution: Execution) => void;
+  onClose: () => void;
+}
+
+export const ExecutionSubmitDialog = React.memo(function ExecutionSubmitDialog(
+  props: ExecutionSubmitDialogProps,
+) {
+  const { onClose, onSubmit } = props;
+  const [archive, setArchive] = useState('');
+
+  function submitProfile(): void {
+    if (!validJson(archive)) return;
+    let parsed: any;
+    try {
+      parsed = JSON.parse(archive);
+    } catch (e) {
+      AppToaster.show({
+        intent: Intent.DANGER,
+        message: `Could not parse JSON: ${e.message}`,
+      });
+      return;
+    }
+
+    let execution: Execution | undefined;
+    const detailArchiveVersion = parsed.detailArchiveVersion ?? parsed.profileVersion;
+    if (typeof detailArchiveVersion === 'number') {
+      try {
+        if (detailArchiveVersion === 2) {
+          execution = Execution.fromTaskPayloadAndReport(parsed.payload, parsed.reports);
+        } else {
+          AppToaster.show({
+            intent: Intent.DANGER,
+            message: `Unsupported detail archive version: ${detailArchiveVersion}`,
+          });
+          return;
+        }
+      } catch (e) {
+        AppToaster.show({
+          intent: Intent.DANGER,
+          message: `Could not decode profile: ${e.message}`,
+        });
+        return;
+      }
+    } else if (typeof parsed.multiStageQuery === 'object') {
+      try {
+        execution = Execution.fromTaskPayloadAndReport({} as any, parsed);
+      } catch (e) {
+        AppToaster.show({
+          intent: Intent.DANGER,
+          message: `Could not decode report payload: ${e.message}`,
+        });
+        return;
+      }
+    } else {
+      AppToaster.show({
+        intent: Intent.DANGER,
+        message: `The input has not been recognized`,
+      });
+      return;
+    }
+
+    onSubmit(execution);
+    onClose();
+  }
+
+  return (
+    <Dialog
+      className="execution-submit-dialog"
+      isOpen
+      onClose={onClose}
+      title="Load query detail archive"
+      canOutsideClickClose={false}
+    >
+      <AceEditor
+        mode="hjson"
+        theme="solarized_dark"
+        className="execution-submit-dialog-textarea placeholder-padding"
+        onChange={setArchive}
+        fontSize={12}
+        showPrintMargin={false}
+        showGutter
+        highlightActiveLine
+        value={archive}
+        width="100%"
+        setOptions={{
+          showLineNumbers: true,
+          tabSize: 2,
+          newLineMode: 'unix' as any, // newLineMode is incorrectly assumed to be boolean in the typings
+        }}
+        style={{}}
+        placeholder="{ Query detail archive or query report... }"
+        onLoad={editor => {
+          editor.renderer.setPadding(10);
+          editor.renderer.setScrollMargin(10, 10, 0, 0);
+        }}
+      />
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button text="Close" onClick={onClose} />
+          <Button
+            text="Submit"
+            intent={Intent.PRIMARY}
+            onClick={submitProfile}
+            disabled={!validJson(archive)}
+          />
+        </div>
+      </div>
+    </Dialog>
+  );
+});
diff --git a/web-console/src/views/workbench-view/execution-summary-panel/execution-summary-panel.scss b/web-console/src/views/workbench-view/execution-summary-panel/execution-summary-panel.scss
new file mode 100644
index 000000000000..49f625ca8de4
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-summary-panel/execution-summary-panel.scss
@@ -0,0 +1,22 @@
+/*
+ * 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.
+ */
+
+.execution-summary-panel {
+  white-space: nowrap;
+  cursor: pointer;
+}
diff --git a/web-console/src/views/workbench-view/execution-summary-panel/execution-summary-panel.tsx b/web-console/src/views/workbench-view/execution-summary-panel/execution-summary-panel.tsx
new file mode 100644
index 000000000000..d268861685c4
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-summary-panel/execution-summary-panel.tsx
@@ -0,0 +1,100 @@
+/*
+ * 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 { Button, ButtonGroup, Menu, MenuDivider, MenuItem, Position } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
+import React from 'react';
+
+import { Execution } from '../../../druid-models';
+import { downloadQueryResults, formatDurationHybrid, pluralIfNeeded } from '../../../utils';
+
+import './execution-summary-panel.scss';
+
+export interface ExecutionSummaryPanelProps {
+  execution: Execution | undefined;
+  onExecutionDetail(): void;
+  onReset?: () => void;
+}
+
+export const ExecutionSummaryPanel = React.memo(function ExecutionSummaryPanel(
+  props: ExecutionSummaryPanelProps,
+) {
+  const { execution, onExecutionDetail, onReset } = props;
+  const queryResult = execution?.result;
+
+  const buttons: JSX.Element[] = [];
+
+  if (queryResult) {
+    const wrapQueryLimit = queryResult.getSqlOuterLimit();
+    const hasMoreResults = queryResult.getNumResults() === wrapQueryLimit;
+
+    const resultCount = hasMoreResults
+      ? `${queryResult.getNumResults() - 1}+ results`
+      : pluralIfNeeded(queryResult.getNumResults(), 'result');
+
+    const warningCount = execution?.stages?.getWarningCount();
+
+    const handleDownload = (format: string) => {
+      downloadQueryResults(queryResult, `results-${execution.id}.${format}`, format);
+    };
+
+    buttons.push(
+      <Button
+        key="results"
+        minimal
+        text={
+          resultCount +
+          (warningCount ? ` and ${pluralIfNeeded(warningCount, 'warning')}` : '') +
+          (execution.duration ? ` in ${formatDurationHybrid(execution.duration)}` : '')
+        }
+        onClick={() => {
+          if (!execution) return;
+          if (execution.engine === 'sql-msq-task') {
+            onExecutionDetail();
+          }
+        }}
+      />,
+      <Popover2
+        key="download"
+        className="download-button"
+        content={
+          <Menu>
+            <MenuDivider title="Download results as..." />
+            <MenuItem text="CSV" onClick={() => handleDownload('csv')} />
+            <MenuItem text="TSV" onClick={() => handleDownload('tsv')} />
+            <MenuItem text="JSON (new line delimited)" onClick={() => handleDownload('json')} />
+          </Menu>
+        }
+        position={Position.BOTTOM_RIGHT}
+      >
+        <Button icon={IconNames.DOWNLOAD} minimal />
+      </Popover2>,
+    );
+  }
+
+  if (onReset) {
+    buttons.push(<Button key="reset" icon={IconNames.CROSS} minimal onClick={onReset} />);
+  }
+
+  return (
+    <ButtonGroup className="execution-summary-panel" minimal>
+      {buttons}
+    </ButtonGroup>
+  );
+});
diff --git a/web-console/src/views/workbench-view/execution-timer-panel/__snapshots__/execution-timer-panel.spec.tsx.snap b/web-console/src/views/workbench-view/execution-timer-panel/__snapshots__/execution-timer-panel.spec.tsx.snap
new file mode 100644
index 000000000000..00e85ad3d0a8
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-timer-panel/__snapshots__/execution-timer-panel.spec.tsx.snap
@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AnchoredQueryTimer matches snapshot 1`] = `
+<div
+  class="bp4-button-group execution-timer-panel"
+>
+  <button
+    class="bp4-button bp4-minimal timer"
+    type="button"
+  >
+    <span
+      aria-hidden="true"
+      class="bp4-icon bp4-icon-stopwatch"
+      icon="stopwatch"
+      tabindex="-1"
+    >
+      <svg
+        data-icon="stopwatch"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+      >
+        <path
+          d="M9 2v1.083A6.002 6.002 0 018 15 6 6 0 017 3.083V2H6a1 1 0 110-2h4a1 1 0 010 2H9zM8 5a4 4 0 104 4H8V5z"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </span>
+    <span
+      class="bp4-button-text"
+    >
+      3.00s
+    </span>
+  </button>
+  <button
+    class="bp4-button bp4-minimal"
+    type="button"
+  >
+    <span
+      aria-hidden="true"
+      class="bp4-icon bp4-icon-cross"
+      icon="cross"
+      tabindex="0"
+    >
+      <svg
+        data-icon="cross"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+      >
+        <path
+          d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </span>
+  </button>
+</div>
+`;
diff --git a/web-console/src/views/workbench-view/execution-timer-panel/execution-timer-panel.scss b/web-console/src/views/workbench-view/execution-timer-panel/execution-timer-panel.scss
new file mode 100644
index 000000000000..c01dbe5feea2
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-timer-panel/execution-timer-panel.scss
@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+
+.execution-timer-panel {
+  .timer {
+    pointer-events: none;
+  }
+}
diff --git a/web-console/src/views/workbench-view/execution-timer-panel/execution-timer-panel.spec.tsx b/web-console/src/views/workbench-view/execution-timer-panel/execution-timer-panel.spec.tsx
new file mode 100644
index 000000000000..7e1013e2cde6
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-timer-panel/execution-timer-panel.spec.tsx
@@ -0,0 +1,49 @@
+/*
+ * 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 { render } from '@testing-library/react';
+import React from 'react';
+
+import { Execution } from '../../../druid-models';
+
+import { ExecutionTimerPanel } from './execution-timer-panel';
+
+describe('AnchoredQueryTimer', () => {
+  const start = 1619201218452;
+
+  beforeEach(() => {
+    let nowCalls = 0;
+    jest.spyOn(Date, 'now').mockImplementation(() => {
+      return start + 1000 + 2000 * nowCalls++;
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('matches snapshot', () => {
+    const { container } = render(
+      <ExecutionTimerPanel
+        execution={new Execution({ engine: 'sql-msq-task', id: 'xxx', startTime: new Date(start) })}
+        onCancel={() => {}}
+      />,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/web-console/src/views/workbench-view/execution-timer-panel/execution-timer-panel.tsx b/web-console/src/views/workbench-view/execution-timer-panel/execution-timer-panel.tsx
new file mode 100644
index 000000000000..bc539559ec58
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-timer-panel/execution-timer-panel.tsx
@@ -0,0 +1,71 @@
+/*
+ * 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 { Button, ButtonGroup } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import React, { useState } from 'react';
+
+import { Execution } from '../../../druid-models';
+import { useInterval } from '../../../hooks';
+import { formatDurationHybrid } from '../../../utils';
+import { CancelQueryDialog } from '../cancel-query-dialog/cancel-query-dialog';
+
+import './execution-timer-panel.scss';
+
+export interface ExecutionTimerPanelProps {
+  execution: Execution | undefined;
+  onCancel(): void;
+}
+
+export const ExecutionTimerPanel = React.memo(function ExecutionTimerPanel(
+  props: ExecutionTimerPanelProps,
+) {
+  const { execution, onCancel } = props;
+  const [showCancelConfirm, setShowCancelConfirm] = useState(false);
+  const [mountTime] = useState(Date.now());
+  const [currentTime, setCurrentTime] = useState(Date.now());
+
+  useInterval(() => {
+    setCurrentTime(Date.now());
+  }, 25);
+
+  function cancelMaybeConfirm() {
+    if (execution?.isProcessingData()) {
+      setShowCancelConfirm(true);
+    } else {
+      onCancel();
+    }
+  }
+
+  const elapsed = currentTime - (execution?.startTime?.valueOf() || mountTime);
+  if (elapsed <= 0) return null;
+  return (
+    <ButtonGroup className="execution-timer-panel">
+      <Button
+        className="timer"
+        icon={IconNames.STOPWATCH}
+        text={formatDurationHybrid(elapsed)}
+        minimal
+      />
+      <Button icon={IconNames.CROSS} minimal onClick={cancelMaybeConfirm} />
+      {showCancelConfirm && (
+        <CancelQueryDialog onCancel={onCancel} onDismiss={() => setShowCancelConfirm(false)} />
+      )}
+    </ButtonGroup>
+  );
+});
diff --git a/web-console/src/views/workbench-view/execution-warnings-pane/execution-warnings-pane.scss b/web-console/src/views/workbench-view/execution-warnings-pane/execution-warnings-pane.scss
new file mode 100644
index 000000000000..4afac10cc647
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-warnings-pane/execution-warnings-pane.scss
@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+
+.execution-warnings-pane {
+  .warning-callout {
+    margin-bottom: 15px;
+  }
+}
diff --git a/web-console/src/views/workbench-view/execution-warnings-pane/execution-warnings-pane.tsx b/web-console/src/views/workbench-view/execution-warnings-pane/execution-warnings-pane.tsx
new file mode 100644
index 000000000000..ddd87afee05d
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-warnings-pane/execution-warnings-pane.tsx
@@ -0,0 +1,45 @@
+/*
+ * 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 React from 'react';
+
+import { Execution } from '../../../druid-models';
+
+import { WarningCallout } from './warning-callout';
+
+import './execution-warnings-pane.scss';
+
+interface ExecutionWarningsPaneProps {
+  execution: Execution;
+}
+
+export const ExecutionWarningsPane = React.memo(function ExecutionWarningsPane(
+  props: ExecutionWarningsPaneProps,
+) {
+  const { execution } = props;
+  const warnings = execution.warnings;
+  if (!warnings) return null;
+
+  return (
+    <div className="execution-warnings-pane">
+      {warnings.map((warning, i) => {
+        return <WarningCallout key={i} warning={warning} />;
+      })}
+    </div>
+  );
+});
diff --git a/web-console/src/views/workbench-view/execution-warnings-pane/warning-callout.scss b/web-console/src/views/workbench-view/execution-warnings-pane/warning-callout.scss
new file mode 100644
index 000000000000..2519e80503e7
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-warnings-pane/warning-callout.scss
@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+
+.warning-callout {
+  pre {
+    overflow: hidden;
+  }
+}
diff --git a/web-console/src/views/workbench-view/execution-warnings-pane/warning-callout.tsx b/web-console/src/views/workbench-view/execution-warnings-pane/warning-callout.tsx
new file mode 100644
index 000000000000..1c2103c97150
--- /dev/null
+++ b/web-console/src/views/workbench-view/execution-warnings-pane/warning-callout.tsx
@@ -0,0 +1,53 @@
+/*
+ * 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 { Button, Callout, Collapse } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import React, { useState } from 'react';
+
+import { ExecutionError } from '../../../druid-models';
+
+import './warning-callout.scss';
+
+interface WarningCalloutProps {
+  warning: ExecutionError;
+}
+
+export const WarningCallout = React.memo(function WarningCallout(props: WarningCalloutProps) {
+  const { warning } = props;
+
+  const [showStack, setShowStack] = useState(false);
+
+  return (
+    <Callout
+      className="warning-callout"
+      icon={IconNames.WARNING_SIGN}
+      title={warning.error.errorCode}
+    >
+      <p>{warning.error.errorMessage}</p>
+      <Button
+        text={showStack ? 'Hide stack' : 'Show stack'}
+        rightIcon={showStack ? IconNames.CARET_UP : IconNames.CARET_DOWN}
+        onClick={() => setShowStack(!showStack)}
+      />
+      <Collapse isOpen={showStack}>
+        <pre>{warning.exceptionStackTrace}</pre>
+      </Collapse>
+    </Callout>
+  );
+});
diff --git a/web-console/src/views/workbench-view/flexible-query-input/__snapshots__/flexible-query-input.spec.tsx.snap b/web-console/src/views/workbench-view/flexible-query-input/__snapshots__/flexible-query-input.spec.tsx.snap
new file mode 100644
index 000000000000..8a36beabdaf0
--- /dev/null
+++ b/web-console/src/views/workbench-view/flexible-query-input/__snapshots__/flexible-query-input.spec.tsx.snap
@@ -0,0 +1,111 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FlexibleQueryInput correctly formats helper HTML 1`] = `
+"
+<div class=\\"doc-name\\">COUNT</div>
+<div class=\\"doc-syntax\\">COUNT(*)</div>
+<div class=\\"doc-description\\">Counts the number of things</div>"
+`;
+
+exports[`FlexibleQueryInput matches snapshot 1`] = `
+<div
+  class="flexible-query-input"
+>
+  <div
+    class="ace-container"
+  >
+    <div
+      class=" ace_editor ace_hidpi ace-tm placeholder-padding no-background ace_focus"
+      id="ace-editor"
+      style="width: 100%; height: 200px; font-size: 13px;"
+    >
+      <textarea
+        autocapitalize="off"
+        autocorrect="off"
+        class="ace_text-input"
+        spellcheck="false"
+        style="opacity: 0; font-size: 1px; position: fixed; top: 0px;"
+        wrap="off"
+      />
+      <div
+        aria-hidden="true"
+        class="ace_gutter"
+      >
+        <div
+          class="ace_layer ace_gutter-layer ace_folding-enabled"
+          style="height: 1000000px;"
+        />
+      </div>
+      <div
+        class="ace_scroller"
+        style="line-height: 0px;"
+      >
+        <div
+          class="ace_content"
+        >
+          <div
+            class="ace_layer ace_print-margin-layer"
+          >
+            <div
+              class="ace_print-margin"
+              style="left: 10px; visibility: hidden;"
+            />
+          </div>
+          <div
+            class="ace_layer ace_marker-layer"
+          />
+          <div
+            class="ace_layer ace_text-layer"
+            style="height: 1000000px; margin: 0px 10px;"
+          />
+          <div
+            class="ace_layer ace_marker-layer"
+          />
+          <div
+            class="ace_layer ace_cursor-layer"
+          >
+            <div
+              class="ace_cursor"
+              style="animation-duration: 1000ms;"
+            />
+          </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>
+      <div
+        class="ace_scrollbar ace_scrollbar-h"
+        style="display: none; height: 20px;"
+      >
+        <div
+          class="ace_scrollbar-inner"
+          style="height: 20px;"
+        >
+           
+        </div>
+      </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;"
+        >
+          XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/web-console/src/views/workbench-view/flexible-query-input/flexible-query-input.scss b/web-console/src/views/workbench-view/flexible-query-input/flexible-query-input.scss
new file mode 100644
index 000000000000..ab4bc1b5c938
--- /dev/null
+++ b/web-console/src/views/workbench-view/flexible-query-input/flexible-query-input.scss
@@ -0,0 +1,27 @@
+/*
+ * 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.
+ */
+
+.flexible-query-input {
+  position: relative;
+
+  .ace-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/web-console/src/views/workbench-view/flexible-query-input/flexible-query-input.spec.tsx b/web-console/src/views/workbench-view/flexible-query-input/flexible-query-input.spec.tsx
new file mode 100644
index 000000000000..069044768641
--- /dev/null
+++ b/web-console/src/views/workbench-view/flexible-query-input/flexible-query-input.spec.tsx
@@ -0,0 +1,47 @@
+/*
+ * 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 { render } from '@testing-library/react';
+import React from 'react';
+
+import { FlexibleQueryInput } from './flexible-query-input';
+
+describe('FlexibleQueryInput', () => {
+  it('matches snapshot', () => {
+    const sqlControl = (
+      <FlexibleQueryInput
+        queryString="hello world"
+        autoHeight={false}
+        onQueryStringChange={() => {}}
+      />
+    );
+
+    const { container } = render(sqlControl);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('correctly formats helper HTML', () => {
+    expect(
+      FlexibleQueryInput.makeDocHtml({
+        name: 'COUNT',
+        syntax: 'COUNT(*)',
+        description: 'Counts the number of things',
+      }),
+    ).toMatchSnapshot();
+  });
+});
diff --git a/web-console/src/views/workbench-view/flexible-query-input/flexible-query-input.tsx b/web-console/src/views/workbench-view/flexible-query-input/flexible-query-input.tsx
new file mode 100644
index 000000000000..c83865cdb195
--- /dev/null
+++ b/web-console/src/views/workbench-view/flexible-query-input/flexible-query-input.tsx
@@ -0,0 +1,336 @@
+/*
+ * 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 { ResizeEntry } from '@blueprintjs/core';
+import { ResizeSensor2 } from '@blueprintjs/popover2';
+import type { Ace } from 'ace-builds';
+import ace from 'ace-builds';
+import classNames from 'classnames';
+import escape from 'lodash.escape';
+import React from 'react';
+import AceEditor from 'react-ace';
+
+import {
+  SQL_CONSTANTS,
+  SQL_DYNAMICS,
+  SQL_EXPRESSION_PARTS,
+  SQL_KEYWORDS,
+} from '../../../../lib/keywords';
+import { SQL_DATA_TYPES, SQL_FUNCTIONS } from '../../../../lib/sql-docs';
+import { AceEditorStateCache } from '../../../singletons/ace-editor-state-cache';
+import { ColumnMetadata, RowColumn, uniq } from '../../../utils';
+
+import './flexible-query-input.scss';
+
+const langTools = ace.require('ace/ext/language_tools');
+
+const V_PADDING = 10;
+const SCROLLBAR = 20;
+
+const COMPLETER = {
+  insertMatch: (editor: any, data: Ace.Completion) => {
+    editor.completer.insertMatch({ value: data.name });
+  },
+};
+
+interface ItemDescription {
+  name: string;
+  syntax: string;
+  description: string;
+}
+
+export interface FlexibleQueryInputProps {
+  queryString: string;
+  onQueryStringChange?: (newQueryString: string) => void;
+  autoHeight: boolean;
+  minRows?: number;
+  showGutter?: boolean;
+  placeholder?: string;
+  columnMetadata?: readonly ColumnMetadata[];
+  currentSchema?: string;
+  currentTable?: string;
+  editorStateId?: string;
+  leaveBackground?: boolean;
+}
+
+export interface FlexibleQueryInputState {
+  // For reasons (https://github.com/securingsincity/react-ace/issues/415) react ace editor needs an explicit height
+  // Since this component will grown and shrink dynamically we will measure its height and then set it.
+  editorHeight: number;
+  completions: any[];
+  prevColumnMetadata?: readonly ColumnMetadata[];
+  prevCurrentTable?: string;
+  prevCurrentSchema?: string;
+}
+
+export class FlexibleQueryInput extends React.PureComponent<
+  FlexibleQueryInputProps,
+  FlexibleQueryInputState
+> {
+  private aceEditor: Ace.Editor | undefined;
+
+  static replaceDefaultAutoCompleter(): void {
+    if (!langTools) return;
+
+    const keywordList = ([] as any[]).concat(
+      SQL_KEYWORDS.map(v => ({ name: v, value: v, score: 0, meta: 'keyword' })),
+      SQL_EXPRESSION_PARTS.map(v => ({ name: v, value: v, score: 0, meta: 'keyword' })),
+      SQL_CONSTANTS.map(v => ({ name: v, value: v, score: 0, meta: 'constant' })),
+      SQL_DYNAMICS.map(v => ({ name: v, value: v, score: 0, meta: 'dynamic' })),
+      Object.entries(SQL_DATA_TYPES).map(([name, [runtime, description]]) => ({
+        name,
+        value: name,
+        score: 0,
+        meta: 'type',
+        syntax: `Druid runtime type: ${runtime}`,
+        description,
+      })),
+    );
+
+    langTools.setCompleters([
+      langTools.snippetCompleter,
+      langTools.textCompleter,
+      {
+        getCompletions: (_editor: any, _session: any, _pos: any, _prefix: any, callback: any) => {
+          return callback(null, keywordList);
+        },
+        getDocTooltip: (item: any) => {
+          if (item.meta === 'type') {
+            item.docHTML = FlexibleQueryInput.makeDocHtml(item);
+          }
+        },
+      },
+    ]);
+  }
+
+  static addFunctionAutoCompleter(): void {
+    if (!langTools) return;
+
+    const functionList: any[] = Object.entries(SQL_FUNCTIONS).flatMap(([name, versions]) => {
+      return versions.map(([args, description]) => ({
+        name: name,
+        value: versions.length > 1 ? `${name}(${args})` : name,
+        score: 1100, // Use a high score to appear over the 'local' suggestions that have a score of 1000
+        meta: 'function',
+        syntax: `${name}(${args})`,
+        description,
+        completer: COMPLETER,
+      }));
+    });
+
+    langTools.addCompleter({
+      getCompletions: (_editor: any, _session: any, _pos: any, _prefix: any, callback: any) => {
+        callback(null, functionList);
+      },
+      getDocTooltip: (item: any) => {
+        if (item.meta === 'function') {
+          item.docHTML = FlexibleQueryInput.makeDocHtml(item);
+        }
+      },
+    });
+  }
+
+  static makeDocHtml(item: ItemDescription) {
+    return `
+<div class="doc-name">${item.name}</div>
+<div class="doc-syntax">${escape(item.syntax)}</div>
+<div class="doc-description">${item.description}</div>`;
+  }
+
+  static getDerivedStateFromProps(props: FlexibleQueryInputProps, state: FlexibleQueryInputState) {
+    const { columnMetadata, currentSchema, currentTable } = props;
+
+    if (
+      columnMetadata &&
+      (columnMetadata !== state.prevColumnMetadata ||
+        currentSchema !== state.prevCurrentSchema ||
+        currentTable !== state.prevCurrentTable)
+    ) {
+      const completions = ([] as any[]).concat(
+        uniq(columnMetadata.map(d => d.TABLE_SCHEMA)).map(v => ({
+          value: v,
+          score: 10,
+          meta: 'schema',
+        })),
+        uniq(
+          columnMetadata
+            .filter(d => (currentSchema ? d.TABLE_SCHEMA === currentSchema : true))
+            .map(d => d.TABLE_NAME),
+        ).map(v => ({
+          value: v,
+          score: 49,
+          meta: 'datasource',
+        })),
+        uniq(
+          columnMetadata
+            .filter(d =>
+              currentTable && currentSchema
+                ? d.TABLE_NAME === currentTable && d.TABLE_SCHEMA === currentSchema
+                : true,
+            )
+            .map(d => d.COLUMN_NAME),
+        ).map(v => ({
+          value: v,
+          score: 50,
+          meta: 'column',
+        })),
+      );
+
+      return {
+        completions,
+        prevColumnMetadata: columnMetadata,
+        prevCurrentSchema: currentSchema,
+        prevCurrentTable: currentTable,
+      };
+    }
+    return null;
+  }
+
+  constructor(props: FlexibleQueryInputProps, context: any) {
+    super(props, context);
+    this.state = {
+      editorHeight: 200,
+      completions: [],
+    };
+  }
+
+  componentDidMount(): void {
+    FlexibleQueryInput.replaceDefaultAutoCompleter();
+    FlexibleQueryInput.addFunctionAutoCompleter();
+    if (langTools) {
+      langTools.addCompleter({
+        getCompletions: (_editor: any, _session: any, _pos: any, _prefix: any, callback: any) => {
+          callback(null, this.state.completions);
+        },
+      });
+    }
+  }
+
+  componentWillUnmount() {
+    const { editorStateId } = this.props;
+    if (editorStateId && this.aceEditor) {
+      AceEditorStateCache.saveState(editorStateId, this.aceEditor);
+    }
+  }
+
+  private readonly handleAceContainerResize = (entries: ResizeEntry[]) => {
+    if (entries.length !== 1) return;
+    this.setState({ editorHeight: entries[0].contentRect.height });
+  };
+
+  private readonly handleChange = (value: string) => {
+    const { onQueryStringChange } = this.props;
+    if (!onQueryStringChange) return;
+    onQueryStringChange(value);
+  };
+
+  public goToPosition(rowColumn: RowColumn) {
+    const { aceEditor } = this;
+    if (!aceEditor) return;
+    aceEditor.focus(); // Grab the focus
+    aceEditor.getSelection().moveCursorTo(rowColumn.row, rowColumn.column);
+    if (rowColumn.endRow && rowColumn.endColumn) {
+      aceEditor
+        .getSelection()
+        .selectToPosition({ row: rowColumn.endRow, column: rowColumn.endColumn });
+    }
+  }
+
+  renderAce() {
+    const {
+      queryString,
+      onQueryStringChange,
+      autoHeight,
+      minRows,
+      showGutter,
+      placeholder,
+      editorStateId,
+    } = this.props;
+    const { editorHeight } = this.state;
+
+    const jsonMode = queryString.trim().startsWith('{');
+
+    let height: number;
+    if (autoHeight) {
+      height =
+        Math.max(queryString.split('\n').length, minRows ?? 2) * 18 + 2 * V_PADDING + SCROLLBAR;
+    } else {
+      height = editorHeight;
+    }
+
+    return (
+      <AceEditor
+        mode={jsonMode ? 'hjson' : 'dsql'}
+        theme="solarized_dark"
+        className={classNames(
+          'placeholder-padding',
+          this.props.leaveBackground ? undefined : 'no-background',
+        )}
+        name="ace-editor"
+        onChange={this.handleChange}
+        focus
+        fontSize={13}
+        width="100%"
+        height={height + 'px'}
+        showGutter={showGutter}
+        showPrintMargin={false}
+        value={queryString}
+        readOnly={!onQueryStringChange}
+        editorProps={{
+          $blockScrolling: Infinity,
+        }}
+        setOptions={{
+          enableBasicAutocompletion: !jsonMode,
+          enableLiveAutocompletion: !jsonMode,
+          showLineNumbers: true,
+          tabSize: 2,
+          newLineMode: 'unix' as any, // This type is specified incorrectly in AceEditor
+        }}
+        style={{}}
+        placeholder={placeholder || 'SELECT * FROM ...'}
+        onLoad={(editor: Ace.Editor) => {
+          editor.renderer.setPadding(V_PADDING);
+          editor.renderer.setScrollMargin(V_PADDING, V_PADDING, 0, 0);
+
+          if (editorStateId) {
+            AceEditorStateCache.applyState(editorStateId, editor);
+          }
+
+          this.aceEditor = editor;
+        }}
+      />
+    );
+  }
+
+  render(): JSX.Element {
+    const { autoHeight } = this.props;
+
+    // Set the key in the AceEditor to force a rebind and prevent an error that happens otherwise
+    return (
+      <div className="flexible-query-input">
+        {autoHeight ? (
+          this.renderAce()
+        ) : (
+          <ResizeSensor2 onResize={this.handleAceContainerResize}>
+            <div className="ace-container">{this.renderAce()}</div>
+          </ResizeSensor2>
+        )}
+      </div>
+    );
+  }
+}
diff --git a/web-console/src/views/workbench-view/helper-query/helper-query.scss b/web-console/src/views/workbench-view/helper-query/helper-query.scss
new file mode 100644
index 000000000000..4233353c7187
--- /dev/null
+++ b/web-console/src/views/workbench-view/helper-query/helper-query.scss
@@ -0,0 +1,100 @@
+/*
+ * 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 '../../../variables';
+
+.helper-query {
+  position: relative;
+  @include card-like;
+
+  .query-top-bar {
+    position: relative;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    white-space: nowrap;
+
+    .corner {
+      position: absolute;
+      top: 50%;
+      right: 3px;
+      transform: translate(0, -50%);
+      @include card-background;
+    }
+  }
+
+  .flexible-query-input {
+    border-top: 1px solid rgba($dark-gray1, 0.5);
+    border-bottom: 1px solid rgba($dark-gray1, 0.5);
+  }
+
+  .query-control-bar {
+    position: relative;
+    width: 100%;
+    height: 30px;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+
+    .execution-timer-panel,
+    .execution-summary-panel {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+  }
+
+  .init-pane {
+    text-align: center;
+    flex: 1;
+    border-top: 1px solid rgba($dark-gray1, 0.5);
+
+    p {
+      position: relative;
+      top: 38%;
+      font-size: 15px;
+    }
+  }
+
+  .output-pane {
+    overflow: hidden;
+    position: relative;
+    height: 254px;
+    border-top: 1px solid rgba($dark-gray1, 0.5);
+
+    > * {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+
+    .error-container {
+      position: relative;
+
+      .execution-error-pane {
+        position: absolute;
+        top: 5px;
+        left: 5px;
+        right: 5px;
+        height: 150px;
+        width: auto;
+      }
+    }
+  }
+}
diff --git a/web-console/src/views/workbench-view/helper-query/helper-query.tsx b/web-console/src/views/workbench-view/helper-query/helper-query.tsx
new file mode 100644
index 000000000000..d454777f6426
--- /dev/null
+++ b/web-console/src/views/workbench-view/helper-query/helper-query.tsx
@@ -0,0 +1,408 @@
+/*
+ * 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 { Button, ButtonGroup, InputGroup, Menu, MenuItem } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
+import { QueryResult, QueryRunner, SqlQuery } from 'druid-query-toolkit';
+import React, { useEffect, useRef } from 'react';
+
+import { Loader, QueryErrorPane } from '../../../components';
+import {
+  DruidEngine,
+  Execution,
+  fitExternalConfigPattern,
+  LastExecution,
+  QueryContext,
+  summarizeExternalConfig,
+  WorkbenchQuery,
+} from '../../../druid-models';
+import {
+  executionBackgroundStatusCheck,
+  reattachTaskExecution,
+  submitTaskQuery,
+} from '../../../helpers';
+import { usePermanentCallback, useQueryManager } from '../../../hooks';
+import { Api } from '../../../singletons';
+import { ExecutionStateCache } from '../../../singletons/execution-state-cache';
+import { WorkbenchHistory } from '../../../singletons/workbench-history';
+import {
+  WorkbenchRunningPromise,
+  WorkbenchRunningPromises,
+} from '../../../singletons/workbench-running-promises';
+import { ColumnMetadata, DruidError, QueryAction, QueryManager, RowColumn } from '../../../utils';
+import { ExecutionDetailsTab } from '../execution-details-pane/execution-details-pane';
+import { ExecutionErrorPane } from '../execution-error-pane/execution-error-pane';
+import { ExecutionProgressPane } from '../execution-progress-pane/execution-progress-pane';
+import { ExecutionStagesPane } from '../execution-stages-pane/execution-stages-pane';
+import { ExecutionSummaryPanel } from '../execution-summary-panel/execution-summary-panel';
+import { ExecutionTimerPanel } from '../execution-timer-panel/execution-timer-panel';
+import { FlexibleQueryInput } from '../flexible-query-input/flexible-query-input';
+import { IngestSuccessPane } from '../ingest-success-pane/ingest-success-pane';
+import { useMetadataStateStore } from '../metadata-state-store';
+import { ResultTablePane } from '../result-table-pane/result-table-pane';
+import { RunPanel } from '../run-panel/run-panel';
+import { useWorkStateStore } from '../work-state-store';
+
+import './helper-query.scss';
+
+const queryRunner = new QueryRunner({
+  inflateDateStrategy: 'none',
+});
+
+export interface HelperQueryProps {
+  query: WorkbenchQuery;
+  mandatoryQueryContext: QueryContext | undefined;
+  columnMetadata: readonly ColumnMetadata[] | undefined;
+  onQueryChange(newQuery: WorkbenchQuery): void;
+  onQueryTab(newQuery: WorkbenchQuery, tabName?: string): void;
+  onDelete(): void;
+  onDetails(id: string, initTab?: ExecutionDetailsTab): void;
+  queryEngines: DruidEngine[];
+  goToIngestion(taskId: string): void;
+}
+
+export const HelperQuery = React.memo(function HelperQuery(props: HelperQueryProps) {
+  const {
+    query,
+    columnMetadata,
+    mandatoryQueryContext,
+    onQueryChange,
+    onQueryTab,
+    onDelete,
+    onDetails,
+    queryEngines,
+    goToIngestion,
+  } = props;
+  const handleQueryStringChange = usePermanentCallback((queryString: string) => {
+    onQueryChange(query.changeQueryString(queryString));
+  });
+
+  const parsedQuery = query.getParsedQuery();
+  const handleQueryAction = usePermanentCallback((queryAction: QueryAction) => {
+    if (!(parsedQuery instanceof SqlQuery)) return;
+    onQueryChange(query.changeQueryString(parsedQuery.apply(queryAction).toString()));
+
+    if (shouldAutoRun()) {
+      setTimeout(() => handleRun(false), 20);
+    }
+  });
+
+  function shouldAutoRun(): boolean {
+    if (query.getEffectiveEngine() !== 'sql-native') return false;
+    const queryDuration = executionState.data?.result?.queryDuration;
+    return Boolean(queryDuration && queryDuration < 10000);
+  }
+
+  const queryInputRef = useRef<FlexibleQueryInput | null>(null);
+
+  const id = query.getId();
+  const [executionState, queryManager] = useQueryManager<
+    WorkbenchQuery | WorkbenchRunningPromise | LastExecution,
+    Execution,
+    Execution,
+    DruidError
+  >({
+    initQuery: ExecutionStateCache.getState(id)
+      ? undefined
+      : WorkbenchRunningPromises.getPromise(id) || query.getLastExecution(),
+    initState: ExecutionStateCache.getState(id),
+    processQuery: async (q, cancelToken) => {
+      if (q instanceof WorkbenchQuery) {
+        ExecutionStateCache.deleteState(id);
+
+        const { engine, query, sqlPrefixLines, cancelQueryId } = q.getApiQuery();
+
+        switch (engine) {
+          case 'sql-msq-task':
+            return await submitTaskQuery({
+              query,
+              prefixLines: sqlPrefixLines,
+              cancelToken,
+              preserveOnTermination: true,
+              onSubmitted: id => {
+                onQueryChange(props.query.changeLastExecution({ engine, id }));
+              },
+            });
+
+          case 'native':
+          case 'sql-native': {
+            if (cancelQueryId) {
+              void cancelToken.promise
+                .then(cancel => {
+                  if (cancel.message === QueryManager.TERMINATION_MESSAGE) return;
+                  return Api.instance.delete(
+                    `/druid/v2${engine === 'sql-native' ? '/sql' : ''}/${Api.encodePath(
+                      cancelQueryId,
+                    )}`,
+                  );
+                })
+                .catch(() => {});
+            }
+
+            onQueryChange(props.query.changeLastExecution(undefined));
+
+            let result: QueryResult;
+            try {
+              const resultPromise = queryRunner.runQuery({
+                query,
+                extraQueryContext: mandatoryQueryContext,
+              });
+              WorkbenchRunningPromises.storePromise(id, { promise: resultPromise, sqlPrefixLines });
+
+              result = await resultPromise;
+            } catch (e) {
+              throw new DruidError(e, sqlPrefixLines);
+            }
+
+            return Execution.fromResult(engine, result);
+          }
+        }
+      } else if (WorkbenchRunningPromises.isWorkbenchRunningPromise(q)) {
+        let result: QueryResult;
+        try {
+          result = await q.promise;
+        } catch (e) {
+          WorkbenchRunningPromises.deletePromise(id);
+          throw new DruidError(e, q.sqlPrefixLines);
+        }
+
+        WorkbenchRunningPromises.deletePromise(id);
+        return Execution.fromResult('sql-native', result);
+      } else {
+        switch (q.engine) {
+          case 'sql-msq-task':
+            return await reattachTaskExecution({
+              id: q.id,
+              cancelToken,
+              preserveOnTermination: true,
+            });
+
+          default:
+            throw new Error(`Can not reattach on ${q.engine}`);
+        }
+      }
+    },
+    backgroundStatusCheck: executionBackgroundStatusCheck,
+    swallowBackgroundError: Api.isNetworkError,
+  });
+
+  useEffect(() => {
+    if (!executionState.data) return;
+    ExecutionStateCache.storeState(id, executionState);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [executionState.data, executionState.error]);
+
+  const incrementWorkVersion = useWorkStateStore(state => state.increment);
+  useEffect(() => {
+    incrementWorkVersion();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [executionState.loading, Boolean(executionState.intermediate)]);
+
+  const execution = executionState.data;
+
+  const incrementMetadataVersion = useMetadataStateStore(state => state.increment);
+  useEffect(() => {
+    if (execution?.isSuccessfulInsert()) {
+      incrementMetadataVersion();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [Boolean(execution?.isSuccessfulInsert())]);
+
+  function moveToPosition(position: RowColumn) {
+    const currentQueryInput = queryInputRef.current;
+    if (!currentQueryInput) return;
+    currentQueryInput.goToPosition(position);
+  }
+
+  const handleRun = usePermanentCallback((preview: boolean) => {
+    if (!query.isValid()) return;
+
+    WorkbenchHistory.addQueryToHistory(query);
+    queryManager.runQuery(preview ? query.makePreview() : query);
+  });
+
+  const collapsed = query.getCollapsed();
+  const insertDatasource = query.getIngestDatasource();
+
+  const statsTaskId: string | undefined = execution?.id;
+
+  let extraInfo: string | undefined;
+  if (collapsed && parsedQuery instanceof SqlQuery) {
+    try {
+      extraInfo = summarizeExternalConfig(fitExternalConfigPattern(parsedQuery));
+    } catch {}
+  }
+
+  return (
+    <div className="helper-query">
+      <div className="query-top-bar">
+        <Button
+          icon={collapsed ? IconNames.CARET_RIGHT : IconNames.CARET_DOWN}
+          minimal
+          onClick={() => onQueryChange(query.changeCollapsed(!collapsed))}
+        />
+        {insertDatasource ? (
+          `<insert query : ${insertDatasource}>`
+        ) : (
+          <>
+            {collapsed ? (
+              <span className="query-name">{query.getQueryName()}</span>
+            ) : (
+              <InputGroup
+                className="query-name"
+                value={query.getQueryName()}
+                onChange={(e: any) => {
+                  onQueryChange(query.changeQueryName(e.target.value));
+                }}
+              />
+            )}
+            <span className="as-label">AS</span>
+            {extraInfo && <span className="extra-info">{extraInfo}</span>}
+          </>
+        )}
+        <ButtonGroup className="corner">
+          <Popover2
+            content={
+              <Menu>
+                <MenuItem
+                  icon={IconNames.DUPLICATE}
+                  text="Duplicate"
+                  onClick={() => onQueryChange(query.duplicateLast())}
+                />
+              </Menu>
+            }
+          >
+            <Button icon={IconNames.MORE} minimal />
+          </Popover2>
+          <Button
+            icon={IconNames.CROSS}
+            minimal
+            onClick={() => {
+              ExecutionStateCache.deleteState(id);
+              WorkbenchRunningPromises.deletePromise(id);
+              onDelete();
+            }}
+          />
+        </ButtonGroup>
+      </div>
+      {!collapsed && (
+        <>
+          <FlexibleQueryInput
+            ref={queryInputRef}
+            autoHeight
+            queryString={query.getQueryString()}
+            onQueryStringChange={handleQueryStringChange}
+            columnMetadata={
+              columnMetadata ? columnMetadata.concat(query.getInlineMetadata()) : undefined
+            }
+            editorStateId={query.getId()}
+          />
+          <div className="query-control-bar">
+            <RunPanel
+              query={query}
+              onQueryChange={onQueryChange}
+              onRun={handleRun}
+              loading={executionState.loading}
+              small
+              queryEngines={queryEngines}
+            />
+            {executionState.isLoading() && (
+              <ExecutionTimerPanel
+                execution={executionState.intermediate}
+                onCancel={() => queryManager.cancelCurrent()}
+              />
+            )}
+            {(execution || executionState.error) && (
+              <ExecutionSummaryPanel
+                execution={execution}
+                onExecutionDetail={() => onDetails(statsTaskId!)}
+                onReset={() => {
+                  queryManager.reset();
+                  onQueryChange(props.query.changeLastExecution(undefined));
+                  ExecutionStateCache.deleteState(id);
+                }}
+              />
+            )}
+          </div>
+          {!executionState.isInit() && (
+            <div className="output-pane">
+              {execution &&
+                (execution.result ? (
+                  <ResultTablePane
+                    runeMode={execution.engine === 'native'}
+                    queryResult={execution.result}
+                    onQueryAction={handleQueryAction}
+                    initPageSize={5}
+                  />
+                ) : execution.isSuccessfulInsert() ? (
+                  <IngestSuccessPane
+                    execution={execution}
+                    onDetails={() => onDetails(statsTaskId!)}
+                    onQueryTab={onQueryTab}
+                  />
+                ) : execution.error ? (
+                  <div className="error-container">
+                    <ExecutionErrorPane execution={execution} />
+                    {execution.stages && (
+                      <ExecutionStagesPane
+                        execution={execution}
+                        onErrorClick={() => onDetails(statsTaskId!, 'error')}
+                        onWarningClick={() => onDetails(statsTaskId!, 'warnings')}
+                        goToIngestion={goToIngestion}
+                      />
+                    )}
+                  </div>
+                ) : (
+                  <div>Unknown query execution state</div>
+                ))}
+              {executionState.error && (
+                <QueryErrorPane
+                  error={executionState.error}
+                  moveCursorTo={position => {
+                    moveToPosition(position);
+                  }}
+                  queryString={query.getQueryString()}
+                  onQueryStringChange={handleQueryStringChange}
+                />
+              )}
+              {executionState.isLoading() &&
+                (executionState.intermediate ? (
+                  <ExecutionProgressPane
+                    execution={executionState.intermediate}
+                    intermediateError={executionState.intermediateError}
+                    goToIngestion={goToIngestion}
+                    onCancel={() => {
+                      queryManager.cancelCurrent();
+                    }}
+                  />
+                ) : (
+                  <Loader
+                    cancelText="Cancel query"
+                    onCancel={() => {
+                      queryManager.cancelCurrent();
+                    }}
+                  />
+                ))}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+});
diff --git a/web-console/src/views/workbench-view/ingest-success-pane/__snapshots__/ingest-success-pane.spec.tsx.snap b/web-console/src/views/workbench-view/ingest-success-pane/__snapshots__/ingest-success-pane.spec.tsx.snap
new file mode 100644
index 000000000000..9f37518e64b0
--- /dev/null
+++ b/web-console/src/views/workbench-view/ingest-success-pane/__snapshots__/ingest-success-pane.spec.tsx.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IngestSuccessPane matches snapshot 1`] = `
+<div
+  className="ingest-success-pane"
+>
+  <p>
+    465,346 rows inserted into 'kttm_simple'.
+  </p>
+  <p>
+    Insert query took 0:00:25. 
+    <span
+      className="action"
+      onClick={[Function]}
+    >
+      Show details
+    </span>
+  </p>
+  <p>
+    Open new tab with:
+     
+    <span
+      className="action"
+      onClick={[Function]}
+    >
+      SELECT * FROM kttm_simple
+    </span>
+  </p>
+</div>
+`;
diff --git a/web-console/src/views/query-view/query-error/query-error.scss b/web-console/src/views/workbench-view/ingest-success-pane/ingest-success-pane.scss
similarity index 83%
rename from web-console/src/views/query-view/query-error/query-error.scss
rename to web-console/src/views/workbench-view/ingest-success-pane/ingest-success-pane.scss
index c5c7a188f4d5..cb5db6e40ba3 100644
--- a/web-console/src/views/query-view/query-error/query-error.scss
+++ b/web-console/src/views/workbench-view/ingest-success-pane/ingest-success-pane.scss
@@ -17,20 +17,16 @@
  */
 
 @import '../../../blueprint-overrides/common/colors';
-@import '../../../variables';
 
-.query-error {
+.ingest-success-pane {
   padding: 20px 22px;
 
-  .#{$bp-ns}-dark & {
-    background: $dark-gray3;
-  }
-
-  .cursor-link,
-  .more-or-less,
-  .suggestion {
+  .action {
     color: $blue4;
-    text-decoration: underline;
     cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
 }
diff --git a/web-console/src/views/workbench-view/ingest-success-pane/ingest-success-pane.spec.tsx b/web-console/src/views/workbench-view/ingest-success-pane/ingest-success-pane.spec.tsx
new file mode 100644
index 000000000000..2bc2ace401e3
--- /dev/null
+++ b/web-console/src/views/workbench-view/ingest-success-pane/ingest-success-pane.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 { shallow } from 'enzyme';
+import React from 'react';
+
+import { EXECUTION_INGEST_COMPLETE } from '../../../druid-models/mocks';
+
+import { IngestSuccessPane } from './ingest-success-pane';
+
+describe('IngestSuccessPane', () => {
+  it('matches snapshot', () => {
+    const comp = shallow(
+      <IngestSuccessPane
+        execution={EXECUTION_INGEST_COMPLETE}
+        onDetails={() => {}}
+        onQueryTab={() => {}}
+      />,
+    );
+
+    expect(comp).toMatchSnapshot();
+  });
+});
diff --git a/web-console/src/views/workbench-view/ingest-success-pane/ingest-success-pane.tsx b/web-console/src/views/workbench-view/ingest-success-pane/ingest-success-pane.tsx
new file mode 100644
index 000000000000..80a0950e3ad1
--- /dev/null
+++ b/web-console/src/views/workbench-view/ingest-success-pane/ingest-success-pane.tsx
@@ -0,0 +1,82 @@
+/*
+ * 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 { SqlTableRef } from 'druid-query-toolkit';
+import React from 'react';
+
+import { Execution, WorkbenchQuery } from '../../../druid-models';
+import { formatDuration, pluralIfNeeded } from '../../../utils';
+
+import './ingest-success-pane.scss';
+
+export interface IngestSuccessPaneProps {
+  execution: Execution;
+  onDetails(): void;
+  onQueryTab?(newQuery: WorkbenchQuery, tabName?: string): void;
+}
+
+export const IngestSuccessPane = React.memo(function IngestSuccessPane(
+  props: IngestSuccessPaneProps,
+) {
+  const { execution, onDetails, onQueryTab } = props;
+
+  const datasource = execution.getIngestDatasource();
+  if (!datasource) return null;
+
+  const { stages } = execution;
+  const lastStage = stages?.getLastStage();
+
+  const rows =
+    stages && lastStage && lastStage.definition.processor.type === 'segmentGenerator'
+      ? stages.getTotalCounterForStage(lastStage, 'input0', 'rows') // Assume input0 since we know the segmentGenerator will only ever have one stage input
+      : -1;
+
+  const table = SqlTableRef.create(datasource);
+
+  const warnings = stages?.getWarningCount() || 0;
+
+  const duration = execution.duration;
+  return (
+    <div className="ingest-success-pane">
+      <p>
+        {`${rows < 0 ? 'Data' : pluralIfNeeded(rows, 'row')} inserted into '${datasource}'.` +
+          (warnings > 0 ? ` ${pluralIfNeeded(warnings, 'warning')} generated.` : '')}
+      </p>
+      <p>
+        {duration ? `Insert query took ${formatDuration(duration)}. ` : `Insert query completed. `}
+        <span className="action" onClick={onDetails}>
+          Show details
+        </span>
+      </p>
+      {onQueryTab && (
+        <p>
+          Open new tab with:{' '}
+          <span
+            className="action"
+            onClick={() =>
+              onQueryTab(
+                WorkbenchQuery.blank().changeQueryString(`SELECT * FROM ${table}`),
+                datasource,
+              )
+            }
+          >{`SELECT * FROM ${table}`}</span>
+        </p>
+      )}
+    </div>
+  );
+});
diff --git a/web-console/src/views/workbench-view/input-format-step/input-format-step.scss b/web-console/src/views/workbench-view/input-format-step/input-format-step.scss
new file mode 100644
index 000000000000..5c3cfb01dcfc
--- /dev/null
+++ b/web-console/src/views/workbench-view/input-format-step/input-format-step.scss
@@ -0,0 +1,70 @@
+/*
+ * 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 '../../../variables';
+
+.input-format-step {
+  position: relative;
+
+  .preview {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 320px;
+    left: 0;
+
+    .parse-data-table,
+    .center-message {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .config {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: 300px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    .control-buttons {
+      text-align: right;
+    }
+
+    .top-controls {
+      flex: 1;
+      overflow: auto;
+    }
+
+    .bottom-controls {
+      .prev-next-bar {
+        position: relative;
+        padding-top: 15px;
+
+        .next {
+          position: absolute;
+          right: 0;
+          bottom: 0;
+        }
+      }
+    }
+  }
+}
diff --git a/web-console/src/views/workbench-view/input-format-step/input-format-step.tsx b/web-console/src/views/workbench-view/input-format-step/input-format-step.tsx
new file mode 100644
index 000000000000..0b92ae3ba9f0
--- /dev/null
+++ b/web-console/src/views/workbench-view/input-format-step/input-format-step.tsx
@@ -0,0 +1,259 @@
+/*
+ * 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 { Button, Callout, FormGroup, Icon, Intent, Tag } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import { SqlExpression, SqlRef } from 'druid-query-toolkit';
+import React, { useState } from 'react';
+
+import { AutoForm, CenterMessage, LearnMore, Loader } from '../../../components';
+import {
+  guessColumnTypeFromHeaderAndRows,
+  guessIsArrayFromHeaderAndRows,
+  INPUT_FORMAT_FIELDS,
+  InputFormat,
+  inputFormatOutputsNumericStrings,
+  InputSource,
+  PLACEHOLDER_TIMESTAMP_SPEC,
+  possibleDruidFormatForValues,
+  SignatureColumn,
+} from '../../../druid-models';
+import { useQueryManager } from '../../../hooks';
+import { getLink } from '../../../links';
+import {
+  checkedCircleIcon,
+  deepSet,
+  EMPTY_ARRAY,
+  filterMap,
+  timeFormatToSql,
+} from '../../../utils';
+import {
+  headerAndRowsFromSampleResponse,
+  postToSampler,
+  SampleHeaderAndRows,
+  SampleSpec,
+} from '../../../utils/sampler';
+import { ParseDataTable } from '../../load-data-view/parse-data-table/parse-data-table';
+
+import './input-format-step.scss';
+
+const noop = () => {};
+
+export interface InputFormatAndMore {
+  inputFormat: InputFormat;
+  signature: SignatureColumn[];
+  isArrays: boolean[];
+  timeExpression: SqlExpression | undefined;
+}
+
+interface PossibleTimeExpression {
+  column: string;
+  timeExpression: SqlExpression;
+}
+
+export interface InputFormatStepProps {
+  inputSource: InputSource;
+  initInputFormat: Partial<InputFormat>;
+  doneButton: boolean;
+  onSet(inputFormatAndMore: InputFormatAndMore): void;
+  onBack(): void;
+  onAltSet?(inputFormatAndMore: InputFormatAndMore): void;
+  altText?: string;
+}
+
+export const InputFormatStep = React.memo(function InputFormatStep(props: InputFormatStepProps) {
+  const { inputSource, initInputFormat, doneButton, onSet, onBack, onAltSet, altText } = props;
+
+  const [inputFormat, setInputFormat] = useState<Partial<InputFormat>>(initInputFormat);
+  const [inputFormatToSample, setInputFormatToSample] = useState<InputFormat | undefined>(
+    AutoForm.isValidModel(initInputFormat, INPUT_FORMAT_FIELDS) ? initInputFormat : undefined,
+  );
+  const [selectTimestamp, setSelectTimestamp] = useState(true);
+
+  const [previewState] = useQueryManager<InputFormat, SampleHeaderAndRows>({
+    query: inputFormatToSample,
+    processQuery: async (inputFormat: InputFormat) => {
+      const sampleSpec: SampleSpec = {
+        type: 'index_parallel',
+        spec: {
+          ioConfig: {
+            type: 'index_parallel',
+            inputSource,
+            inputFormat: deepSet(inputFormat, 'keepNullColumns', true),
+          },
+          dataSchema: {
+            dataSource: 'sample',
+            timestampSpec: PLACEHOLDER_TIMESTAMP_SPEC,
+            dimensionsSpec: {},
+            granularitySpec: {
+              rollup: false,
+            },
+          },
+        },
+        samplerConfig: {
+          numRows: 50,
+          timeoutMs: 15000,
+        },
+      };
+
+      const sampleResponse = await postToSampler(sampleSpec, 'input-format-step');
+
+      return headerAndRowsFromSampleResponse({
+        sampleResponse,
+        ignoreTimeColumn: true,
+        useInput: true,
+      });
+    },
+  });
+
+  const previewData = previewState.data;
+
+  let possibleTimeExpression: PossibleTimeExpression | undefined;
+  if (previewData) {
+    possibleTimeExpression = filterMap(previewData.header, column => {
+      const values = previewData.rows.map(row => row.input[column]);
+      const possibleDruidFormat = possibleDruidFormatForValues(values);
+      if (!possibleDruidFormat) return;
+
+      const formatSql = timeFormatToSql(possibleDruidFormat);
+      if (!formatSql) return;
+
+      return {
+        column,
+        timeExpression: formatSql.fillPlaceholders([SqlRef.column(column)]),
+      };
+    })[0];
+  }
+
+  const inputFormatAndMore =
+    previewData && AutoForm.isValidModel(inputFormat, INPUT_FORMAT_FIELDS)
+      ? {
+          inputFormat,
+          signature: previewData.header.map(name => ({
+            name,
+            type: guessColumnTypeFromHeaderAndRows(
+              previewData,
+              name,
+              inputFormatOutputsNumericStrings(inputFormat),
+            ),
+          })),
+          isArrays: previewData.header.map(name =>
+            guessIsArrayFromHeaderAndRows(previewData, name),
+          ),
+          timeExpression: selectTimestamp ? possibleTimeExpression?.timeExpression : undefined,
+        }
+      : undefined;
+
+  return (
+    <div className="input-format-step">
+      <div className="preview">
+        {previewState.isInit() && (
+          <CenterMessage>
+            Please fill out the fields on the right sidebar to get started{' '}
+            <Icon icon={IconNames.ARROW_RIGHT} />
+          </CenterMessage>
+        )}
+        {previewState.isLoading() && <Loader />}
+        {previewState.error && (
+          <CenterMessage>{`Error: ${previewState.getErrorMessage()}`}</CenterMessage>
+        )}
+        {previewData && (
+          <ParseDataTable
+            sampleData={previewData}
+            columnFilter=""
+            canFlatten={false}
+            flattenedColumnsOnly={false}
+            flattenFields={EMPTY_ARRAY}
+            onFlattenFieldSelect={noop}
+            useInput
+          />
+        )}
+      </div>
+      <div className="config">
+        <div className="top-controls">
+          <FormGroup>
+            <Callout>
+              <p>Ensure that your data appears correctly in a row/column orientation.</p>
+              <LearnMore href={`${getLink('DOCS')}/ingestion/data-formats.html`} />
+            </Callout>
+          </FormGroup>
+          <AutoForm fields={INPUT_FORMAT_FIELDS} model={inputFormat} onChange={setInputFormat} />
+          {inputFormatToSample !== inputFormat && (
+            <FormGroup className="control-buttons">
+              <Button
+                text="Preview changes"
+                intent={Intent.PRIMARY}
+                disabled={!AutoForm.isValidModel(inputFormat, INPUT_FORMAT_FIELDS)}
+                onClick={() => {
+                  if (!AutoForm.isValidModel(inputFormat, INPUT_FORMAT_FIELDS)) return;
+                  setInputFormatToSample(inputFormat);
+                }}
+              />
+            </FormGroup>
+          )}
+        </div>
+        <div className="bottom-controls">
+          {possibleTimeExpression && (
+            <FormGroup>
+              <Callout>
+                <Button
+                  rightIcon={checkedCircleIcon(selectTimestamp)}
+                  onClick={() => setSelectTimestamp(!selectTimestamp)}
+                  minimal
+                >
+                  Select <Tag minimal>{possibleTimeExpression.column}</Tag> as the primary time
+                  column
+                </Button>
+              </Callout>
+            </FormGroup>
+          )}
+          {altText && onAltSet && (
+            <FormGroup>
+              <Callout>
+                <Button
+                  text={altText}
+                  rightIcon={IconNames.ARROW_TOP_RIGHT}
+                  minimal
+                  disabled={!inputFormatAndMore}
+                  onClick={() => {
+                    if (!inputFormatAndMore) return;
+                    onAltSet(inputFormatAndMore);
+                  }}
+                />
+              </Callout>
+            </FormGroup>
+          )}
+          <div className="prev-next-bar">
+            <Button className="back" icon={IconNames.ARROW_LEFT} text="Back" onClick={onBack} />
+            <Button
+              className="next"
+              text={doneButton ? 'Done' : 'Next'}
+              rightIcon={doneButton ? IconNames.TICK : IconNames.ARROW_RIGHT}
+              intent={Intent.PRIMARY}
+              disabled={!inputFormatAndMore}
+              onClick={() => {
+                if (!inputFormatAndMore) return;
+                onSet(inputFormatAndMore);
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/web-console/src/views/workbench-view/input-source-step/example-inputs.ts b/web-console/src/views/workbench-view/input-source-step/example-inputs.ts
new file mode 100644
index 000000000000..e58dfacca35e
--- /dev/null
+++ b/web-console/src/views/workbench-view/input-source-step/example-inputs.ts
@@ -0,0 +1,159 @@
+/*
+ * 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 { InputSource } from '../../../druid-models';
+
+export interface ExampleInputSource {
+  name: string;
+  description: string;
+  inputSource: InputSource;
+}
+
+export const EXAMPLE_INPUT_SOURCES: ExampleInputSource[] = [
+  {
+    name: 'Wikipedia',
+    description: 'One day of wikipedia edits (JSON)',
+    inputSource: {
+      type: 'http',
+      uris: ['https://druid.apache.org/data/wikipedia.json.gz'],
+    },
+  },
+  {
+    name: 'KoalasToTheMax one day',
+    description: 'One day of flat events from KoalasToTheMax.com (JSON)',
+    inputSource: {
+      type: 'http',
+      uris: ['https://static.imply.io/example-data/kttm-v2/kttm-v2-2019-08-25.json.gz'],
+    },
+  },
+  {
+    name: 'KoalasToTheMax one day (nested)',
+    description: 'One day of nested events from KoalasToTheMax.com (JSON)',
+    inputSource: {
+      type: 'http',
+      uris: [
+        'https://static.imply.io/example-data/kttm-nested-v2/kttm-nested-v2-2019-08-25.json.gz',
+      ],
+    },
+  },
+  {
+    name: 'NYC Taxi cabs (3 files)',
+    description: '60M rows of NYC taxi trip data (CSV)',
+    inputSource: {
+      type: 'http',
+      uris: [
+        'https://static.imply.io/example-data/trips/trips_xaa.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xab.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xac.csv.gz',
+      ],
+    },
+  },
+  {
+    name: 'NYC Taxi cabs (all files)',
+    description: '1.4B rows of NYC taxi trip data (CSV)',
+    inputSource: {
+      type: 'http',
+      uris: [
+        'https://static.imply.io/example-data/trips/trips_xaa.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xab.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xac.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xad.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xae.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xaf.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xag.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xah.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xai.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xaj.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xak.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xal.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xam.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xan.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xao.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xap.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xaq.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xar.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xas.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xat.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xau.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xav.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xaw.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xax.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xay.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xaz.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xba.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xbb.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xbc.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xbd.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xbe.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xbf.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xbg.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xbh.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xbi.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xbj.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xbk.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xbl.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xbm.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xbn.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xbo.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xbp.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xbq.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xbr.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xbs.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xbt.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xbu.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xbv.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xbw.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xbx.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xby.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xbz.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xca.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xcb.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xcc.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xcd.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xce.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xcf.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xcg.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xch.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xci.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xcj.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xck.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xcl.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xcm.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xcn.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xco.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xcp.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xcq.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xcr.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xcs.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xct.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xcu.csv.gz',
+        'https://static.imply.io/example-data/trips/trips_xcv.csv.gz',
+      ],
+    },
+  },
+  {
+    name: 'FlightCarrierOnTime (1 month)',
+    description: 'One month of flight "On Time Performance" data (CSV)',
+    inputSource: {
+      type: 'http',
+      uris: [
+        'https://static.imply.io/example-data/flight_on_time/flights/On_Time_Reporting_Carrier_On_Time_Performance_(1987_present)_2005_11.csv.zip',
+      ],
+    },
+  },
+];
diff --git a/web-console/src/views/workbench-view/input-source-step/input-source-info.tsx b/web-console/src/views/workbench-view/input-source-step/input-source-info.tsx
new file mode 100644
index 000000000000..dbcbf7702d6c
--- /dev/null
+++ b/web-console/src/views/workbench-view/input-source-step/input-source-info.tsx
@@ -0,0 +1,78 @@
+/*
+ * 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 React from 'react';
+
+import { InputSource } from '../../../druid-models';
+
+export interface InputSourceInfoProps {
+  inputSource: Partial<InputSource>;
+}
+
+export const InputSourceInfo = React.memo(function InputSourceInfo(props: InputSourceInfoProps) {
+  const { inputSource } = props;
+
+  switch (inputSource.type) {
+    case 'http':
+      return (
+        <>
+          <p>Load data accessible through HTTP(s).</p>
+          <p>
+            Data must be in text, orc, or parquet format and the HTTP(s) endpoint must be reachable
+            by every Druid process in the cluster.
+          </p>
+        </>
+      );
+
+    case 'local':
+      return (
+        <>
+          <p>
+            <em>Recommended only in single server deployments.</em>
+          </p>
+          <p>Load data directly from a local file.</p>
+          <p>
+            Files must be in text, orc, or parquet format and must be accessible to all the Druid
+            processes in the cluster.
+          </p>
+        </>
+      );
+
+    case 'inline':
+      return (
+        <p>
+          Ingest a small amount of data by typing it in directly (or pasting from the clipboard).
+        </p>
+      );
+
+    case 's3':
+      return <p>Load text based, avro, orc, or parquet data from Amazon S3.</p>;
+
+    case 'azure':
+      return <p>Load text based, avro, orc, or parquet data from Azure.</p>;
+
+    case 'google':
+      return <p>Load text based, avro, orc, or parquet data from the Google Blobstore.</p>;
+
+    case 'hdfs':
+      return <p>Load text based, avro, orc, or parquet data from HDFS.</p>;
+
+    default:
+      return null;
+  }
+});
diff --git a/web-console/src/views/workbench-view/input-source-step/input-source-step.scss b/web-console/src/views/workbench-view/input-source-step/input-source-step.scss
new file mode 100644
index 000000000000..4c7137030201
--- /dev/null
+++ b/web-console/src/views/workbench-view/input-source-step/input-source-step.scss
@@ -0,0 +1,131 @@
+/*
+ * 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 '../../../variables';
+
+$icon-width: 100px;
+$actual-icon-width: 520px;
+$actual-icon-height: 400px;
+$config-width: 400px;
+
+@mixin sunk-panel {
+  background: rgba($dark-gray1, 0.5);
+  border-radius: $pt-border-radius;
+  box-shadow: inset 0 1px 3px rgba($black, 0.32);
+}
+
+.input-source-step {
+  position: relative;
+
+  .ingestion-cards {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: $config-width + 20px;
+    left: 0;
+    @include sunk-panel;
+    overflow: auto;
+    display: grid;
+    gap: $thin-padding;
+    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
+    grid-template-rows: repeat(auto-fill, 150px);
+    padding: 10px;
+
+    .ingestion-card {
+      position: relative;
+      display: inline-block;
+      vertical-align: top;
+      text-align: center;
+
+      & > * {
+        user-select: none;
+        pointer-events: none;
+      }
+
+      &.selected::after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        content: '';
+        border: 2px solid $blue3;
+        border-radius: $pt-border-radius;
+
+        .#{$bp-ns}-dark & {
+          border: 2px solid $blue4;
+        }
+      }
+
+      &.disabled {
+        opacity: 0.4;
+      }
+
+      img {
+        width: $icon-width;
+        height: $icon-width * ($actual-icon-height / $actual-icon-width);
+        display: inline-block;
+      }
+    }
+
+    textarea {
+      width: 100%;
+      height: 100%;
+      resize: none;
+      white-space: pre;
+    }
+
+    .center-message {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .config {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: $config-width;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    .top-controls {
+      flex: 1;
+      overflow: auto;
+
+      .example-label {
+        display: inline-block;
+        vertical-align: top;
+
+        .description {
+          opacity: 0.6;
+        }
+      }
+
+      .error-callout {
+        overflow: auto;
+      }
+    }
+
+    .bottom-controls {
+      text-align: right;
+    }
+  }
+}
diff --git a/web-console/src/views/workbench-view/input-source-step/input-source-step.tsx b/web-console/src/views/workbench-view/input-source-step/input-source-step.tsx
new file mode 100644
index 000000000000..211271c62c3d
--- /dev/null
+++ b/web-console/src/views/workbench-view/input-source-step/input-source-step.tsx
@@ -0,0 +1,343 @@
+/*
+ * 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 {
+  Button,
+  Callout,
+  Card,
+  FormGroup,
+  Intent,
+  ProgressBar,
+  Radio,
+  RadioGroup,
+} from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import classNames from 'classnames';
+import { QueryResult } from 'druid-query-toolkit';
+import React, { useEffect, useState } from 'react';
+
+import { AutoForm, ExternalLink } from '../../../components';
+import { ShowValueDialog } from '../../../dialogs/show-value-dialog/show-value-dialog';
+import {
+  Execution,
+  ExecutionError,
+  externalConfigToTableExpression,
+  getIngestionImage,
+  getIngestionTitle,
+  guessInputFormat,
+  INPUT_SOURCE_FIELDS,
+  InputFormat,
+  InputSource,
+  PLACEHOLDER_TIMESTAMP_SPEC,
+} from '../../../druid-models';
+import {
+  executionBackgroundResultStatusCheck,
+  extractResult,
+  submitTaskQuery,
+} from '../../../helpers';
+import { useQueryManager } from '../../../hooks';
+import { UrlBaser } from '../../../singletons';
+import { filterMap, IntermediateQueryState } from '../../../utils';
+import { postToSampler, SampleSpec } from '../../../utils/sampler';
+
+import { EXAMPLE_INPUT_SOURCES } from './example-inputs';
+import { InputSourceInfo } from './input-source-info';
+
+import './input-source-step.scss';
+
+function resultToInputFormat(result: QueryResult): InputFormat {
+  if (!result.rows.length) throw new Error('No data returned from sample query');
+  return guessInputFormat(result.rows.map((r: any) => r[0]));
+}
+
+const BOGUS_LIST_DELIMITER = '56616469-6de2-9da4-efb8-8f416e6e6965'; // Just a UUID to disable the list delimiter, let's hope we do not see this UUID in the data
+const ROWS_TO_SAMPLE = 50;
+
+export interface InputSourceStepProps {
+  initInputSource: Partial<InputSource> | undefined;
+  mode: 'sampler' | 'msq';
+  onSet(inputSource: InputSource, inputFormat: InputFormat): void;
+}
+
+export const InputSourceStep = React.memo(function InputSourceStep(props: InputSourceStepProps) {
+  const { initInputSource, mode, onSet } = props;
+
+  const [stackToShow, setStackToShow] = useState<string | undefined>();
+  const [inputSource, setInputSource] = useState<Partial<InputSource> | string | undefined>(
+    initInputSource,
+  );
+  const exampleInputSource = EXAMPLE_INPUT_SOURCES.find(
+    ({ name }) => name === inputSource,
+  )?.inputSource;
+
+  const [guessedInputFormatState, connectQueryManager] = useQueryManager<
+    InputSource,
+    InputFormat,
+    Execution
+  >({
+    processQuery: async (inputSource: InputSource, cancelToken) => {
+      if (mode === 'sampler') {
+        const sampleSpec: SampleSpec = {
+          type: 'index_parallel',
+          spec: {
+            ioConfig: {
+              type: 'index_parallel',
+              inputSource,
+              inputFormat: {
+                type: 'regex',
+                pattern: '([\\s\\S]*)', // Match the entire line, every single character
+                listDelimiter: BOGUS_LIST_DELIMITER,
+                columns: ['raw'],
+              },
+            },
+            dataSchema: {
+              dataSource: 'sample',
+              timestampSpec: PLACEHOLDER_TIMESTAMP_SPEC,
+              dimensionsSpec: {},
+              granularitySpec: {
+                rollup: false,
+              },
+            },
+          },
+          samplerConfig: {
+            numRows: ROWS_TO_SAMPLE,
+            timeoutMs: 15000,
+          },
+        };
+
+        const sampleResponse = await postToSampler(sampleSpec, 'input-source-step');
+
+        const sampleLines: string[] = filterMap(sampleResponse.data, l =>
+          l.input ? l.input.raw : undefined,
+        );
+
+        if (!sampleLines.length) throw new Error('No data returned from sampler');
+        return guessInputFormat(sampleLines);
+      } else {
+        const tableExpression = externalConfigToTableExpression({
+          inputSource,
+          inputFormat: {
+            type: 'regex',
+            pattern: '([\\s\\S]*)',
+            listDelimiter: BOGUS_LIST_DELIMITER,
+            columns: ['raw'],
+          },
+          signature: [{ name: 'raw', type: 'string' }],
+        });
+
+        const result = extractResult(
+          await submitTaskQuery({
+            query: `SELECT REPLACE(raw, U&'\\0000', '') AS "raw" FROM ${tableExpression}`, // Make sure to remove possible \u0000 chars as they are not allowed and will produce an InvalidNullByte error message
+            context: {
+              sqlOuterLimit: ROWS_TO_SAMPLE,
+            },
+            cancelToken,
+          }),
+        );
+
+        if (result instanceof IntermediateQueryState) return result;
+        return resultToInputFormat(result);
+      }
+    },
+    backgroundStatusCheck: async (execution, query, cancelToken) => {
+      const result = await executionBackgroundResultStatusCheck(execution, query, cancelToken);
+      if (result instanceof IntermediateQueryState) return result;
+      return resultToInputFormat(result);
+    },
+  });
+
+  useEffect(() => {
+    const guessedInputFormat = guessedInputFormatState.data;
+    if (!guessedInputFormat) return;
+    onSet(exampleInputSource || (inputSource as any), guessedInputFormat);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [guessedInputFormatState]);
+
+  const effectiveType = typeof inputSource === 'string' ? 'example' : inputSource?.type;
+  function renderIngestionCard(type: string): JSX.Element | undefined {
+    const selected = type === effectiveType;
+    return (
+      <Card
+        className={classNames('ingestion-card', { selected, disabled: false })}
+        interactive
+        elevation={1}
+        onClick={() => {
+          if (selected) {
+            setInputSource(undefined);
+          } else {
+            setInputSource(type === 'example' ? '' : { type });
+          }
+        }}
+      >
+        <img
+          src={UrlBaser.base(`/assets/${getIngestionImage(type as any)}.png`)}
+          alt={`Ingestion tile for ${type}`}
+        />
+        <p>
+          {getIngestionTitle(type === 'example' ? 'example' : (`index_parallel:${type}` as any))}
+        </p>
+      </Card>
+    );
+  }
+
+  const connectResultError = guessedInputFormatState.error;
+  return (
+    <div className="input-source-step">
+      <div className="ingestion-cards">
+        {renderIngestionCard('s3')}
+        {renderIngestionCard('azure')}
+        {renderIngestionCard('google')}
+        {renderIngestionCard('hdfs')}
+        {renderIngestionCard('http')}
+        {renderIngestionCard('local')}
+        {renderIngestionCard('inline')}
+        {renderIngestionCard('example')}
+      </div>
+      <div className="config">
+        <div className="top-controls">
+          {typeof inputSource === 'string' ? (
+            <>
+              <FormGroup label="Select example dataset">
+                <RadioGroup
+                  selectedValue={inputSource}
+                  onChange={e => setInputSource(e.currentTarget.value)}
+                >
+                  {EXAMPLE_INPUT_SOURCES.map((e, i) => (
+                    <Radio
+                      key={i}
+                      labelElement={
+                        <div className="example-label">
+                          <div className="name">{e.name}</div>
+                          <div className="description">{e.description}</div>
+                        </div>
+                      }
+                      value={e.name}
+                    />
+                  ))}
+                </RadioGroup>
+              </FormGroup>
+            </>
+          ) : inputSource ? (
+            <>
+              <FormGroup>
+                <Callout>
+                  <InputSourceInfo inputSource={inputSource} />
+                </Callout>
+              </FormGroup>
+              <AutoForm
+                fields={INPUT_SOURCE_FIELDS}
+                model={inputSource}
+                onChange={setInputSource}
+              />
+            </>
+          ) : (
+            <FormGroup>
+              <Callout>
+                <p>Please specify where your raw data is located.</p>
+                <p>Your raw data can be in any of the following formats:</p>
+                <ul>
+                  <li>
+                    <ExternalLink href="http://ndjson.org/">JSON (new line delimited)</ExternalLink>
+                  </li>
+                  <li>CSV</li>
+                  <li>TSV</li>
+                  <li>
+                    <ExternalLink href="https://parquet.apache.org/">Parquet</ExternalLink>
+                  </li>
+                  <li>
+                    <ExternalLink href="https://orc.apache.org/">ORC</ExternalLink>
+                  </li>
+                  <li>
+                    <ExternalLink href="https://avro.apache.org/">Avro</ExternalLink>
+                  </li>
+                  <li>
+                    Any line format that can be parsed with a custom regular expression (regex)
+                  </li>
+                </ul>
+              </Callout>
+            </FormGroup>
+          )}
+          {guessedInputFormatState.isLoading() && (
+            <FormGroup>
+              <ProgressBar intent={Intent.PRIMARY} />
+            </FormGroup>
+          )}
+          {connectResultError && (
+            <FormGroup>
+              <Callout className="error-callout" intent={Intent.DANGER}>
+                <p>{guessedInputFormatState.getErrorMessage()}</p>
+                {(connectResultError as any).executionError && (
+                  <p>
+                    <a
+                      onClick={() => {
+                        setStackToShow(
+                          ((connectResultError as any).executionError as ExecutionError)
+                            .exceptionStackTrace,
+                        );
+                      }}
+                    >
+                      Stack trace
+                    </a>
+                  </p>
+                )}
+              </Callout>
+            </FormGroup>
+          )}
+        </div>
+        <div className="bottom-controls">
+          {typeof inputSource === 'string' ? (
+            <Button
+              className="next"
+              text={guessedInputFormatState.isLoading() ? 'Loading...' : 'Use example'}
+              rightIcon={IconNames.ARROW_RIGHT}
+              intent={Intent.PRIMARY}
+              disabled={!exampleInputSource || guessedInputFormatState.isLoading()}
+              onClick={() => {
+                if (!exampleInputSource) return;
+                connectQueryManager.runQuery(exampleInputSource);
+              }}
+            />
+          ) : inputSource ? (
+            <Button
+              className="next"
+              text={guessedInputFormatState.isLoading() ? 'Loading...' : 'Connect data'}
+              rightIcon={IconNames.ARROW_RIGHT}
+              intent={Intent.PRIMARY}
+              disabled={
+                !AutoForm.isValidModel(inputSource, INPUT_SOURCE_FIELDS) ||
+                guessedInputFormatState.isLoading()
+              }
+              onClick={() => {
+                if (!AutoForm.isValidModel(inputSource, INPUT_SOURCE_FIELDS)) return;
+                connectQueryManager.runQuery(inputSource);
+              }}
+            />
+          ) : undefined}
+        </div>
+      </div>
+      {stackToShow && (
+        <ShowValueDialog
+          size="large"
+          title="Full stack trace"
+          onClose={() => setStackToShow(undefined)}
+          str={stackToShow}
+        />
+      )}
+    </div>
+  );
+});
diff --git a/web-console/src/views/workbench-view/max-tasks-button/__snapshots__/max-tasks-button.spec.tsx.snap b/web-console/src/views/workbench-view/max-tasks-button/__snapshots__/max-tasks-button.spec.tsx.snap
new file mode 100644
index 000000000000..ef1abc9079cc
--- /dev/null
+++ b/web-console/src/views/workbench-view/max-tasks-button/__snapshots__/max-tasks-button.spec.tsx.snap
@@ -0,0 +1,205 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MaxTasksButton matches snapshot 1`] = `
+<Fragment>
+  <Blueprint4.Popover2
+    boundary="clippingParents"
+    captureDismiss={false}
+    className="max-tasks-button"
+    content={
+      <Blueprint4.Menu>
+        <Blueprint4.MenuDivider
+          title="Number of tasks to launch"
+        />
+        <Blueprint4.MenuItem
+          active={false}
+          disabled={false}
+          icon="tick"
+          label="(1 controller + 1 worker)"
+          multiline={false}
+          onClick={[Function]}
+          popoverProps={Object {}}
+          selected={false}
+          shouldDismissPopover={true}
+          text="2"
+        />
+        <Blueprint4.MenuItem
+          active={false}
+          disabled={false}
+          icon="blank"
+          label="(1 controller + max 2 workers)"
+          multiline={false}
+          onClick={[Function]}
+          popoverProps={Object {}}
+          selected={false}
+          shouldDismissPopover={true}
+          text="3"
+        />
+        <Blueprint4.MenuItem
+          active={false}
+          disabled={false}
+          icon="blank"
+          label="(1 controller + max 3 workers)"
+          multiline={false}
+          onClick={[Function]}
+          popoverProps={Object {}}
+          selected={false}
+          shouldDismissPopover={true}
+          text="4"
+        />
+        <Blueprint4.MenuItem
+          active={false}
+          disabled={false}
+          icon="blank"
+          label="(1 controller + max 4 workers)"
+          multiline={false}
+          onClick={[Function]}
+          popoverProps={Object {}}
+          selected={false}
+          shouldDismissPopover={true}
+          text="5"
+        />
+        <Blueprint4.MenuItem
+          active={false}
+          disabled={false}
+          icon="blank"
+          label="(1 controller + max 6 workers)"
+          multiline={false}
+          onClick={[Function]}
+          popoverProps={Object {}}
+          selected={false}
+          shouldDismissPopover={true}
+          text="7"
+        />
+        <Blueprint4.MenuItem
+          active={false}
+          disabled={false}
+          icon="blank"
+          label="(1 controller + max 8 workers)"
+          multiline={false}
+          onClick={[Function]}
+          popoverProps={Object {}}
+          selected={false}
+          shouldDismissPopover={true}
+          text="9"
+        />
+        <Blueprint4.MenuItem
+          active={false}
+          disabled={false}
+          icon="blank"
+          label="(1 controller + max 10 workers)"
+          multiline={false}
+          onClick={[Function]}
+          popoverProps={Object {}}
+          selected={false}
+          shouldDismissPopover={true}
+          text="11"
+        />
+        <Blueprint4.MenuItem
+          active={false}
+          disabled={false}
+          icon="blank"
+          label="(1 controller + max 16 workers)"
+          multiline={false}
+          onClick={[Function]}
+          popoverProps={Object {}}
+          selected={false}
+          shouldDismissPopover={true}
+          text="17"
+        />
+        <Blueprint4.MenuItem
+          active={false}
+          disabled={false}
+          icon="blank"
+          label="(1 controller + max 32 workers)"
+          multiline={false}
+          onClick={[Function]}
+          popoverProps={Object {}}
+          selected={false}
+          shouldDismissPopover={true}
+          text="33"
+        />
+        <Blueprint4.MenuItem
+          active={false}
+          disabled={false}
+          icon="blank"
+          label="(1 controller + max 64 workers)"
+          multiline={false}
+          onClick={[Function]}
+          popoverProps={Object {}}
+          selected={false}
+          shouldDismissPopover={true}
+          text="65"
+        />
+        <Blueprint4.MenuItem
+          active={false}
+          disabled={false}
+          icon="blank"
+          multiline={false}
+          onClick={[Function]}
+          popoverProps={Object {}}
+          selected={false}
+          shouldDismissPopover={true}
+          text="Custom"
+        />
+        <Blueprint4.MenuDivider />
+        <Blueprint4.MenuItem
+          active={false}
+          disabled={false}
+          icon="flow-branch"
+          label="max"
+          multiline={false}
+          popoverProps={Object {}}
+          selected={false}
+          shouldDismissPopover={true}
+          text="Task assignment"
+        >
+          <Blueprint4.MenuItem
+            active={false}
+            disabled={false}
+            icon="tick"
+            multiline={false}
+            onClick={[Function]}
+            popoverProps={Object {}}
+            selected={false}
+            shouldDismissPopover={false}
+            text="max - Use as many tasks as possible, up to the maximum."
+          />
+          <Blueprint4.MenuItem
+            active={false}
+            disabled={false}
+            icon="blank"
+            multiline={false}
+            onClick={[Function]}
+            popoverProps={Object {}}
+            selected={false}
+            shouldDismissPopover={false}
+            text="auto - Use as few tasks as possible without exceeding 10 GiB or 10,000 files per task."
+          />
+        </Blueprint4.MenuItem>
+      </Blueprint4.Menu>
+    }
+    defaultIsOpen={false}
+    disabled={false}
+    fill={false}
+    hasBackdrop={false}
+    hoverCloseDelay={300}
+    hoverOpenDelay={150}
+    inheritDarkTheme={true}
+    interactionKind="click"
+    minimal={false}
+    openOnTargetFocus={true}
+    position="bottom-left"
+    positioningStrategy="absolute"
+    shouldReturnFocusOnClose={false}
+    targetTagName="span"
+    transitionDuration={300}
+    usePortal={true}
+  >
+    <Blueprint4.Button
+      rightIcon="caret-down"
+      text="Max tasks: 2"
+    />
+  </Blueprint4.Popover2>
+</Fragment>
+`;
diff --git a/web-console/src/views/workbench-view/max-tasks-button/max-tasks-button.spec.tsx b/web-console/src/views/workbench-view/max-tasks-button/max-tasks-button.spec.tsx
new file mode 100644
index 000000000000..9ab239aacb6f
--- /dev/null
+++ b/web-console/src/views/workbench-view/max-tasks-button/max-tasks-button.spec.tsx
@@ -0,0 +1,30 @@
+/*
+ * 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 React from 'react';
+
+import { MaxTasksButton } from './max-tasks-button';
+
+describe('MaxTasksButton', () => {
+  it('matches snapshot', () => {
+    const comp = shallow(<MaxTasksButton queryContext={{}} changeQueryContext={() => {}} />);
+
+    expect(comp).toMatchSnapshot();
+  });
+});
diff --git a/web-console/src/views/workbench-view/max-tasks-button/max-tasks-button.tsx b/web-console/src/views/workbench-view/max-tasks-button/max-tasks-button.tsx
new file mode 100644
index 000000000000..2830befa1520
--- /dev/null
+++ b/web-console/src/views/workbench-view/max-tasks-button/max-tasks-button.tsx
@@ -0,0 +1,115 @@
+/*
+ * 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 { Button, ButtonProps, Menu, MenuDivider, MenuItem, Position } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
+import React, { useState } from 'react';
+
+import { NumericInputDialog } from '../../../dialogs';
+import {
+  changeMaxNumTasks,
+  changeTaskAssigment,
+  getMaxNumTasks,
+  getTaskAssigment,
+  QueryContext,
+} from '../../../druid-models';
+import { formatInteger, tickIcon } from '../../../utils';
+
+const MAX_NUM_TASK_OPTIONS = [2, 3, 4, 5, 7, 9, 11, 17, 33, 65];
+const TASK_ASSIGNMENT_OPTIONS = ['max', 'auto'];
+
+const TASK_ASSIGNMENT_DESCRIPTION: Record<string, string> = {
+  max: 'Use as many tasks as possible, up to the maximum.',
+  auto: 'Use as few tasks as possible without exceeding 10 GiB or 10,000 files per task.',
+};
+
+export interface MaxTasksButtonProps extends Omit<ButtonProps, 'text' | 'rightIcon'> {
+  queryContext: QueryContext;
+  changeQueryContext(queryContext: QueryContext): void;
+}
+
+export const MaxTasksButton = function MaxTasksButton(props: MaxTasksButtonProps) {
+  const { queryContext, changeQueryContext, ...rest } = props;
+  const [customMaxNumTasksDialogOpen, setCustomMaxNumTasksDialogOpen] = useState(false);
+
+  const maxNumTasks = getMaxNumTasks(queryContext);
+  const taskAssigment = getTaskAssigment(queryContext);
+
+  return (
+    <>
+      <Popover2
+        className="max-tasks-button"
+        position={Position.BOTTOM_LEFT}
+        content={
+          <Menu>
+            <MenuDivider title="Number of tasks to launch" />
+            {MAX_NUM_TASK_OPTIONS.map(m => (
+              <MenuItem
+                key={String(m)}
+                icon={tickIcon(m === maxNumTasks)}
+                text={formatInteger(m)}
+                label={`(1 controller + ${m === 2 ? '1 worker' : `max ${m - 1} workers`})`}
+                onClick={() => changeQueryContext(changeMaxNumTasks(queryContext, m))}
+              />
+            ))}
+            <MenuItem
+              icon={tickIcon(!MAX_NUM_TASK_OPTIONS.includes(maxNumTasks))}
+              text="Custom"
+              onClick={() => setCustomMaxNumTasksDialogOpen(true)}
+            />
+            <MenuDivider />
+            <MenuItem icon={IconNames.FLOW_BRANCH} text="Task assignment" label={taskAssigment}>
+              {TASK_ASSIGNMENT_OPTIONS.map(t => (
+                <MenuItem
+                  key={String(t)}
+                  icon={tickIcon(t === taskAssigment)}
+                  text={`${t} - ${TASK_ASSIGNMENT_DESCRIPTION[t]}`}
+                  shouldDismissPopover={false}
+                  onClick={() => changeQueryContext(changeTaskAssigment(queryContext, t))}
+                />
+              ))}
+            </MenuItem>
+          </Menu>
+        }
+      >
+        <Button {...rest} text={`Max tasks: ${maxNumTasks}`} rightIcon={IconNames.CARET_DOWN} />
+      </Popover2>
+      {customMaxNumTasksDialogOpen && (
+        <NumericInputDialog
+          title="Custom max task number"
+          message={
+            <>
+              <p>Specify the total number of tasks that should be launched.</p>
+              <p>
+                There must be at least 2 tasks to account for the controller and at least one
+                worker.
+              </p>
+            </>
+          }
+          minValue={2}
+          initValue={maxNumTasks}
+          onSubmit={p => {
+            changeQueryContext(changeMaxNumTasks(queryContext, p));
+          }}
+          onClose={() => setCustomMaxNumTasksDialogOpen(false)}
+        />
+      )}
+    </>
+  );
+};
diff --git a/web-console/src/views/workbench-view/metadata-change-detector.tsx b/web-console/src/views/workbench-view/metadata-change-detector.tsx
new file mode 100644
index 000000000000..3dafa6c8ee3a
--- /dev/null
+++ b/web-console/src/views/workbench-view/metadata-change-detector.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 { useEffect } from 'react';
+
+import { useMetadataStateStore } from './metadata-state-store';
+
+export interface MetadataChangeDetectorProps {
+  onChange(): void;
+}
+
+export const MetadataChangeDetector = function MetadataChangeDetector(
+  props: MetadataChangeDetectorProps,
+) {
+  const { onChange } = props;
+
+  const metadataStateVersion = useMetadataStateStore(state => state.version);
+  useEffect(() => {
+    onChange();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [metadataStateVersion]);
+
+  return null;
+};
diff --git a/web-console/src/views/workbench-view/metadata-state-store.ts b/web-console/src/views/workbench-view/metadata-state-store.ts
new file mode 100644
index 000000000000..f36fd8e69434
--- /dev/null
+++ b/web-console/src/views/workbench-view/metadata-state-store.ts
@@ -0,0 +1,29 @@
+/*
+ * 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 create, { State } from 'zustand';
+
+interface MetadataState extends State {
+  version: number;
+  increment(): void;
+}
+
+export const useMetadataStateStore = create<MetadataState>(set => ({
+  version: 0,
+  increment: () => set(state => ({ version: state.version + 1 })),
+}));
diff --git a/web-console/src/views/workbench-view/query-tab/query-tab.scss b/web-console/src/views/workbench-view/query-tab/query-tab.scss
new file mode 100644
index 000000000000..31cf09489c1f
--- /dev/null
+++ b/web-console/src/views/workbench-view/query-tab/query-tab.scss
@@ -0,0 +1,147 @@
+/*
+ * 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 '../../../variables';
+
+$vertical-gap: 6px;
+
+.query-tab {
+  position: relative;
+
+  .#{$bp-ns}-dark & {
+    background: $dark-gray2;
+  }
+
+  .splitter-layout {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+
+    &.splitter-layout-vertical > .layout-splitter {
+      height: 3px;
+      background-color: $gray1;
+    }
+  }
+
+  .top-section {
+    position: absolute;
+    width: 100%;
+    top: 0;
+    bottom: $vertical-gap;
+
+    .query-section {
+      position: absolute;
+      width: 100%;
+      top: 0;
+      bottom: 30px + $vertical-gap;
+      overflow: auto;
+
+      .helper-query {
+        margin-top: $vertical-gap;
+      }
+
+      .main-query {
+        position: relative;
+        @include card-like;
+        min-height: 100%;
+        overflow: hidden;
+
+        &.single {
+          height: 100%;
+
+          .flexible-query-input {
+            height: 100%;
+          }
+        }
+
+        &.multi {
+          min-height: calc(100% - 18px);
+          margin-top: $vertical-gap;
+        }
+
+        .corner {
+          position: absolute;
+          top: 0;
+          right: 0;
+          @include card-background;
+          z-index: 1;
+          padding: 3px;
+        }
+      }
+    }
+
+    .run-bar {
+      position: absolute;
+      width: 100%;
+      bottom: 0;
+      display: flex;
+      gap: 10px;
+      align-items: center;
+
+      .execution-timer-panel,
+      .execution-summary-panel {
+        margin-left: auto;
+      }
+    }
+  }
+
+  .output-section {
+    position: absolute;
+    width: 100%;
+    top: $vertical-gap;
+    bottom: 0;
+    @include card-like;
+
+    > * {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+
+    .init-placeholder {
+      text-align: center;
+
+      p {
+        position: relative;
+        top: 38%;
+        font-size: 15px;
+      }
+    }
+
+    .error-container {
+      position: relative;
+
+      .execution-error-pane {
+        position: absolute;
+        top: 5px;
+        left: 5px;
+        right: 5px;
+        height: 150px;
+        width: auto;
+      }
+
+      .execution-stages-pane {
+        position: absolute;
+        top: 160px;
+        bottom: 0;
+        left: 0;
+        right: 0;
+      }
+    }
+  }
+}
diff --git a/web-console/src/views/workbench-view/query-tab/query-tab.tsx b/web-console/src/views/workbench-view/query-tab/query-tab.tsx
new file mode 100644
index 000000000000..712e2c42f098
--- /dev/null
+++ b/web-console/src/views/workbench-view/query-tab/query-tab.tsx
@@ -0,0 +1,457 @@
+/*
+ * 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 { Button, Code, Intent, Menu, MenuItem } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
+import classNames from 'classnames';
+import { QueryResult, QueryRunner, SqlQuery } from 'druid-query-toolkit';
+import React, { useCallback, useEffect, useRef } from 'react';
+import SplitterLayout from 'react-splitter-layout';
+
+import { Loader, QueryErrorPane } from '../../../components';
+import {
+  DruidEngine,
+  Execution,
+  LastExecution,
+  QueryContext,
+  WorkbenchQuery,
+} from '../../../druid-models';
+import {
+  executionBackgroundStatusCheck,
+  reattachTaskExecution,
+  submitTaskQuery,
+} from '../../../helpers';
+import { usePermanentCallback, useQueryManager } from '../../../hooks';
+import { Api, AppToaster } from '../../../singletons';
+import { ExecutionStateCache } from '../../../singletons/execution-state-cache';
+import { WorkbenchHistory } from '../../../singletons/workbench-history';
+import {
+  WorkbenchRunningPromise,
+  WorkbenchRunningPromises,
+} from '../../../singletons/workbench-running-promises';
+import {
+  ColumnMetadata,
+  DruidError,
+  localStorageGet,
+  LocalStorageKeys,
+  localStorageSet,
+  QueryAction,
+  QueryManager,
+  RowColumn,
+} from '../../../utils';
+import { ExecutionDetailsTab } from '../execution-details-pane/execution-details-pane';
+import { ExecutionErrorPane } from '../execution-error-pane/execution-error-pane';
+import { ExecutionProgressPane } from '../execution-progress-pane/execution-progress-pane';
+import { ExecutionStagesPane } from '../execution-stages-pane/execution-stages-pane';
+import { ExecutionSummaryPanel } from '../execution-summary-panel/execution-summary-panel';
+import { ExecutionTimerPanel } from '../execution-timer-panel/execution-timer-panel';
+import { FlexibleQueryInput } from '../flexible-query-input/flexible-query-input';
+import { HelperQuery } from '../helper-query/helper-query';
+import { IngestSuccessPane } from '../ingest-success-pane/ingest-success-pane';
+import { useMetadataStateStore } from '../metadata-state-store';
+import { ResultTablePane } from '../result-table-pane/result-table-pane';
+import { RunPanel } from '../run-panel/run-panel';
+import { useWorkStateStore } from '../work-state-store';
+
+import './query-tab.scss';
+
+const queryRunner = new QueryRunner({
+  inflateDateStrategy: 'none',
+});
+
+export interface QueryTabProps {
+  query: WorkbenchQuery;
+  mandatoryQueryContext: QueryContext | undefined;
+  columnMetadata: readonly ColumnMetadata[] | undefined;
+  onQueryChange(newQuery: WorkbenchQuery): void;
+  onQueryTab(newQuery: WorkbenchQuery, tabName?: string): void;
+  onDetails(id: string, initTab?: ExecutionDetailsTab): void;
+  queryEngines: DruidEngine[];
+  runMoreMenu: JSX.Element;
+  goToIngestion(taskId: string): void;
+}
+
+export const QueryTab = React.memo(function QueryTab(props: QueryTabProps) {
+  const {
+    query,
+    columnMetadata,
+    mandatoryQueryContext,
+    onQueryChange,
+    onQueryTab,
+    onDetails,
+    queryEngines,
+    runMoreMenu,
+    goToIngestion,
+  } = props;
+  const handleQueryStringChange = usePermanentCallback((queryString: string) => {
+    if (query.isEmptyQuery() && queryString.split('=====').length > 2) {
+      let parsedWorkbenchQuery: WorkbenchQuery | undefined;
+      try {
+        parsedWorkbenchQuery = WorkbenchQuery.fromString(queryString);
+      } catch (e) {
+        AppToaster.show({
+          icon: IconNames.CLIPBOARD,
+          intent: Intent.DANGER,
+          message: `Could not paste tab content due to: ${e.message}`,
+        });
+      }
+      if (parsedWorkbenchQuery) {
+        onQueryChange(parsedWorkbenchQuery);
+        return;
+      }
+    }
+    onQueryChange(query.changeQueryString(queryString));
+  });
+
+  const parsedQuery = query.getParsedQuery();
+  const handleQueryAction = usePermanentCallback((queryAction: QueryAction) => {
+    if (!(parsedQuery instanceof SqlQuery)) return;
+    onQueryChange(query.changeQueryString(parsedQuery.apply(queryAction).toString()));
+
+    if (shouldAutoRun()) {
+      setTimeout(() => handleRun(false), 20);
+    }
+  });
+
+  function shouldAutoRun(): boolean {
+    if (query.getEffectiveEngine() !== 'sql-native') return false;
+    const queryDuration = executionState.data?.result?.queryDuration;
+    return Boolean(queryDuration && queryDuration < 10000);
+  }
+
+  const handleSecondaryPaneSizeChange = useCallback((secondaryPaneSize: number) => {
+    localStorageSet(LocalStorageKeys.WORKBENCH_PANE_SIZE, String(secondaryPaneSize));
+  }, []);
+
+  const queryInputRef = useRef<FlexibleQueryInput | null>(null);
+
+  const id = query.getId();
+  const [executionState, queryManager] = useQueryManager<
+    WorkbenchQuery | WorkbenchRunningPromise | LastExecution,
+    Execution,
+    Execution,
+    DruidError
+  >({
+    initQuery: ExecutionStateCache.getState(id)
+      ? undefined
+      : WorkbenchRunningPromises.getPromise(id) || query.getLastExecution(),
+    initState: ExecutionStateCache.getState(id),
+    processQuery: async (q, cancelToken) => {
+      if (q instanceof WorkbenchQuery) {
+        ExecutionStateCache.deleteState(id);
+        const { engine, query, sqlPrefixLines, cancelQueryId } = q.getApiQuery();
+
+        switch (engine) {
+          case 'sql-msq-task':
+            return await submitTaskQuery({
+              query,
+              prefixLines: sqlPrefixLines,
+              cancelToken,
+              preserveOnTermination: true,
+              onSubmitted: id => {
+                onQueryChange(props.query.changeLastExecution({ engine, id }));
+              },
+            });
+
+          case 'native':
+          case 'sql-native': {
+            if (cancelQueryId) {
+              void cancelToken.promise
+                .then(cancel => {
+                  if (cancel.message === QueryManager.TERMINATION_MESSAGE) return;
+                  return Api.instance.delete(
+                    `/druid/v2${engine === 'sql-native' ? '/sql' : ''}/${Api.encodePath(
+                      cancelQueryId,
+                    )}`,
+                  );
+                })
+                .catch(() => {});
+            }
+
+            onQueryChange(props.query.changeLastExecution(undefined));
+
+            let result: QueryResult;
+            try {
+              const resultPromise = queryRunner.runQuery({
+                query,
+                extraQueryContext: mandatoryQueryContext,
+              });
+              WorkbenchRunningPromises.storePromise(id, { promise: resultPromise, sqlPrefixLines });
+
+              result = await resultPromise;
+            } catch (e) {
+              throw new DruidError(e, sqlPrefixLines);
+            }
+
+            return Execution.fromResult(engine, result);
+          }
+        }
+      } else if (WorkbenchRunningPromises.isWorkbenchRunningPromise(q)) {
+        let result: QueryResult;
+        try {
+          result = await q.promise;
+        } catch (e) {
+          WorkbenchRunningPromises.deletePromise(id);
+          throw new DruidError(e, q.sqlPrefixLines);
+        }
+
+        WorkbenchRunningPromises.deletePromise(id);
+        return Execution.fromResult('sql-native', result);
+      } else {
+        switch (q.engine) {
+          case 'sql-msq-task':
+            return await reattachTaskExecution({
+              id: q.id,
+              cancelToken,
+              preserveOnTermination: true,
+            });
+
+          default:
+            throw new Error(`Can not reattach on ${q.engine}`);
+        }
+      }
+    },
+    backgroundStatusCheck: executionBackgroundStatusCheck,
+    swallowBackgroundError: Api.isNetworkError,
+  });
+
+  useEffect(() => {
+    if (!executionState.data) return;
+    ExecutionStateCache.storeState(id, executionState);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [executionState.data, executionState.error]);
+
+  const incrementWorkVersion = useWorkStateStore(state => state.increment);
+  useEffect(() => {
+    incrementWorkVersion();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [executionState.loading, Boolean(executionState.intermediate)]);
+
+  const execution = executionState.data;
+
+  const incrementMetadataVersion = useMetadataStateStore(state => state.increment);
+  useEffect(() => {
+    if (execution?.isSuccessfulInsert()) {
+      incrementMetadataVersion();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [Boolean(execution?.isSuccessfulInsert())]);
+
+  function moveToPosition(position: RowColumn) {
+    const currentQueryInput = queryInputRef.current;
+    if (!currentQueryInput) return;
+    currentQueryInput.goToPosition(position);
+  }
+
+  const handleRun = usePermanentCallback((preview: boolean) => {
+    if (!query.isValid()) return;
+
+    WorkbenchHistory.addQueryToHistory(query);
+    queryManager.runQuery(preview ? query.makePreview() : query);
+  });
+
+  const statsTaskId: string | undefined = execution?.id;
+
+  const queryPrefixes = query.getPrefixQueries();
+  const extractedCtes = query.extractCteHelpers();
+
+  return (
+    <div className="query-tab">
+      <SplitterLayout
+        vertical
+        percentage
+        secondaryInitialSize={Number(localStorageGet(LocalStorageKeys.WORKBENCH_PANE_SIZE)!) || 40}
+        primaryMinSize={20}
+        secondaryMinSize={20}
+        onSecondaryPaneSizeChange={handleSecondaryPaneSizeChange}
+      >
+        <div className="top-section">
+          <div className="query-section">
+            {queryPrefixes.map((queryPrefix, i) => (
+              <HelperQuery
+                key={queryPrefix.getId()}
+                query={queryPrefix}
+                mandatoryQueryContext={mandatoryQueryContext}
+                columnMetadata={columnMetadata}
+                onQueryChange={newQuery => {
+                  onQueryChange(query.applyUpdate(newQuery, i));
+                }}
+                onQueryTab={onQueryTab}
+                onDelete={() => {
+                  onQueryChange(query.remove(i));
+                }}
+                onDetails={onDetails}
+                queryEngines={queryEngines}
+                goToIngestion={goToIngestion}
+              />
+            ))}
+            <div className={classNames('main-query', queryPrefixes.length ? 'multi' : 'single')}>
+              <FlexibleQueryInput
+                ref={queryInputRef}
+                autoHeight={Boolean(queryPrefixes.length)}
+                minRows={10}
+                queryString={query.getQueryString()}
+                onQueryStringChange={handleQueryStringChange}
+                columnMetadata={
+                  columnMetadata ? columnMetadata.concat(query.getInlineMetadata()) : undefined
+                }
+                editorStateId={query.getId()}
+              />
+              <div className="corner">
+                <Popover2
+                  content={
+                    <Menu>
+                      <MenuItem
+                        icon={IconNames.ARROW_UP}
+                        text="Save as helper query"
+                        onClick={() => {
+                          onQueryChange(query.addBlank());
+                        }}
+                      />
+                      {extractedCtes !== query && (
+                        <MenuItem
+                          icon={IconNames.DOCUMENT_SHARE}
+                          text="Extract WITH clauses into helper queries"
+                          onClick={() => onQueryChange(extractedCtes)}
+                        />
+                      )}
+                      {query.hasHelperQueries() && (
+                        <MenuItem
+                          icon={IconNames.DOCUMENT_OPEN}
+                          text="Materialize helper queries"
+                          onClick={() => onQueryChange(query.materializeHelpers())}
+                        />
+                      )}
+                      <MenuItem
+                        icon={IconNames.DUPLICATE}
+                        text="Duplicate as helper query"
+                        onClick={() => onQueryChange(query.duplicateLast())}
+                      />
+                    </Menu>
+                  }
+                >
+                  <Button icon={IconNames.LIST} minimal />
+                </Popover2>
+              </div>
+            </div>
+          </div>
+          <div className="run-bar">
+            <RunPanel
+              query={query}
+              onQueryChange={onQueryChange}
+              onRun={handleRun}
+              loading={executionState.loading}
+              queryEngines={queryEngines}
+              moreMenu={runMoreMenu}
+            />
+            {executionState.isLoading() && (
+              <ExecutionTimerPanel
+                execution={executionState.intermediate}
+                onCancel={() => queryManager.cancelCurrent()}
+              />
+            )}
+            {(execution || executionState.error) && (
+              <ExecutionSummaryPanel
+                execution={execution}
+                onExecutionDetail={() => onDetails(statsTaskId!)}
+                onReset={() => {
+                  queryManager.reset();
+                  onQueryChange(props.query.changeLastExecution(undefined));
+                  ExecutionStateCache.deleteState(id);
+                }}
+              />
+            )}
+          </div>
+        </div>
+        <div className="output-section">
+          {executionState.isInit() && (
+            <div className="init-placeholder">
+              {query.isEmptyQuery() ? (
+                <p>
+                  Enter a query and click <Code>Run</Code>
+                </p>
+              ) : (
+                <p>
+                  Click <Code>Run</Code> to execute the query
+                </p>
+              )}
+            </div>
+          )}
+          {execution &&
+            (execution.result ? (
+              <ResultTablePane
+                runeMode={execution.engine === 'native'}
+                queryResult={execution.result}
+                onQueryAction={handleQueryAction}
+              />
+            ) : execution.isSuccessfulInsert() ? (
+              <IngestSuccessPane
+                execution={execution}
+                onDetails={() => onDetails(statsTaskId!)}
+                onQueryTab={onQueryTab}
+              />
+            ) : execution.error ? (
+              <div className="error-container">
+                <ExecutionErrorPane execution={execution} />
+                {execution.stages && (
+                  <ExecutionStagesPane
+                    execution={execution}
+                    onErrorClick={() => onDetails(statsTaskId!, 'error')}
+                    onWarningClick={() => onDetails(statsTaskId!, 'warnings')}
+                    goToIngestion={goToIngestion}
+                  />
+                )}
+              </div>
+            ) : (
+              <div>Unknown query execution state</div>
+            ))}
+          {executionState.error && (
+            <QueryErrorPane
+              error={executionState.error}
+              moveCursorTo={position => {
+                moveToPosition(position);
+              }}
+              queryString={query.getQueryString()}
+              onQueryStringChange={handleQueryStringChange}
+            />
+          )}
+          {executionState.isLoading() &&
+            (executionState.intermediate ? (
+              <ExecutionProgressPane
+                execution={executionState.intermediate}
+                intermediateError={executionState.intermediateError}
+                goToIngestion={goToIngestion}
+                onCancel={() => {
+                  queryManager.cancelCurrent();
+                }}
+                allowLiveReportsPane
+              />
+            ) : (
+              <Loader
+                cancelText="Cancel query"
+                onCancel={() => {
+                  queryManager.cancelCurrent();
+                }}
+              />
+            ))}
+        </div>
+      </SplitterLayout>
+    </div>
+  );
+});
diff --git a/web-console/src/views/workbench-view/recent-query-task-panel/recent-query-task-panel.scss b/web-console/src/views/workbench-view/recent-query-task-panel/recent-query-task-panel.scss
new file mode 100644
index 000000000000..7f729111cc4c
--- /dev/null
+++ b/web-console/src/views/workbench-view/recent-query-task-panel/recent-query-task-panel.scss
@@ -0,0 +1,121 @@
+/*
+ * 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 '../../../variables';
+
+.recent-query-task-panel {
+  position: relative;
+  @include card-like;
+  overflow: auto;
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .title {
+    position: relative;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+    padding: 8px 10px;
+    user-select: none;
+
+    .close-button {
+      position: absolute;
+      top: 2px;
+      right: 2px;
+    }
+  }
+
+  .work-entries {
+    position: absolute;
+    top: 30px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 10px;
+
+    &:empty:after {
+      content: 'No recent queries';
+      position: absolute;
+      top: 45%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .work-entry {
+      display: block;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+      padding-top: 8px;
+      padding-bottom: 8px;
+      cursor: pointer;
+
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+
+      .line1 {
+        margin-bottom: 4px;
+
+        .status-icon {
+          display: inline-block;
+          margin-right: 5px;
+
+          &.running {
+            svg {
+              animation-name: spin;
+              animation-duration: 10s;
+              animation-iteration-count: infinite;
+              animation-timing-function: linear;
+            }
+          }
+        }
+
+        .timing {
+          display: inline-block;
+        }
+      }
+
+      .line2 {
+        white-space: nowrap;
+        overflow: hidden;
+      }
+
+      .output-icon {
+        margin-right: 5px;
+        opacity: 0.6;
+      }
+
+      .output-datasource {
+        display: inline-block;
+
+        &.query {
+          font-style: italic;
+        }
+      }
+
+      .query-indicator {
+        display: inline-block;
+        margin-left: 10px;
+      }
+    }
+  }
+}
diff --git a/web-console/src/views/workbench-view/recent-query-task-panel/recent-query-task-panel.tsx b/web-console/src/views/workbench-view/recent-query-task-panel/recent-query-task-panel.tsx
new file mode 100644
index 000000000000..5983d7e97752
--- /dev/null
+++ b/web-console/src/views/workbench-view/recent-query-task-panel/recent-query-task-panel.tsx
@@ -0,0 +1,275 @@
+/*
+ * 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 { Button, Icon, Intent, Menu, MenuDivider, MenuItem } from '@blueprintjs/core';
+import { IconName, IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
+import classNames from 'classnames';
+import copy from 'copy-to-clipboard';
+import { SqlTableRef } from 'druid-query-toolkit';
+import React, { useState } from 'react';
+
+import { Loader } from '../../../components';
+import { Execution, WorkbenchQuery } from '../../../druid-models';
+import { cancelTaskExecution, getTaskExecution } from '../../../helpers';
+import { useInterval, useQueryManager } from '../../../hooks';
+import { AppToaster } from '../../../singletons';
+import { downloadQueryDetailArchive, formatDuration, queryDruidSql } from '../../../utils';
+import { CancelQueryDialog } from '../cancel-query-dialog/cancel-query-dialog';
+import { useWorkStateStore } from '../work-state-store';
+
+import './recent-query-task-panel.scss';
+
+type TaskStatus = 'RUNNING' | 'WAITING' | 'PENDING' | 'SUCCESS' | 'FAILED' | 'CANCELED';
+
+function statusToIconAndColor(status: TaskStatus): [IconName, string] {
+  switch (status) {
+    case 'RUNNING':
+      return [IconNames.REFRESH, '#2167d5'];
+    case 'WAITING':
+    case 'PENDING':
+      return [IconNames.CIRCLE, '#d5631a'];
+    case 'SUCCESS':
+      return [IconNames.TICK_CIRCLE, '#57d500'];
+    case 'FAILED':
+      return [IconNames.DELETE, '#9f0d0a'];
+    case 'CANCELED':
+      return [IconNames.DISABLE, '#8d8d8d'];
+    default:
+      return [IconNames.CIRCLE, '#8d8d8d'];
+  }
+}
+
+interface RecentQueryEntry {
+  taskStatus: TaskStatus;
+  taskId: string;
+  datasource: string;
+  createdTime: string;
+  duration: number;
+  errorMessage?: string;
+}
+
+function formatDetail(entry: RecentQueryEntry): string | undefined {
+  const lines: string[] = [];
+  if (entry.datasource !== WorkbenchQuery.INLINE_DATASOURCE_MARKER) {
+    lines.push(`Datasource: ${entry.datasource}`);
+  }
+  if (entry.errorMessage) {
+    lines.push(entry.errorMessage);
+  }
+  return lines.length ? lines.join('\n\n') : undefined;
+}
+
+export interface RecentQueryTaskPanelProps {
+  onClose(): void;
+  onExecutionDetails(id: string): void;
+  onChangeQuery(queryString: string): void;
+  onNewTab(query: WorkbenchQuery, tabName: string): void;
+}
+
+export const RecentQueryTaskPanel = React.memo(function RecentQueryTaskPanel(
+  props: RecentQueryTaskPanelProps,
+) {
+  const { onClose, onExecutionDetails, onChangeQuery, onNewTab } = props;
+
+  const [confirmCancelId, setConfirmCancelId] = useState<string | undefined>();
+
+  const workStateVersion = useWorkStateStore(state => state.version);
+
+  const [queryTaskHistoryState, queryManager] = useQueryManager<number, RecentQueryEntry[]>({
+    query: workStateVersion,
+    processQuery: async _ => {
+      return await queryDruidSql<RecentQueryEntry>({
+        query: `SELECT
+  CASE WHEN "error_msg" = 'Shutdown request from user' THEN 'CANCELED' ELSE "status" END AS "taskStatus",
+  "task_id" AS "taskId",
+  "datasource",
+  "created_time" AS "createdTime",
+  "duration",
+  "error_msg" AS "errorMessage"
+FROM sys.tasks
+WHERE "type" = 'query_controller'
+ORDER BY "created_time" DESC
+LIMIT 100`,
+      });
+    },
+  });
+
+  useInterval(() => {
+    queryManager.rerunLastQuery(true);
+  }, 30000);
+
+  const incrementWorkVersion = useWorkStateStore(state => state.increment);
+
+  const queryTaskHistory = queryTaskHistoryState.getSomeData();
+  return (
+    <div className="recent-query-task-panel">
+      <div className="title">
+        Recent query tasks
+        <Button className="close-button" icon={IconNames.CROSS} minimal onClick={onClose} />
+      </div>
+      {queryTaskHistory ? (
+        <div className="work-entries">
+          {queryTaskHistory.map(w => {
+            const menu = (
+              <Menu>
+                <MenuItem
+                  icon={IconNames.EYE_OPEN}
+                  text="Show details"
+                  onClick={() => {
+                    onExecutionDetails(w.taskId);
+                  }}
+                />
+                <MenuItem
+                  icon={IconNames.DOCUMENT_OPEN}
+                  text="Attach in new tab"
+                  onClick={async () => {
+                    let execution: Execution;
+                    try {
+                      execution = await getTaskExecution(w.taskId);
+                    } catch {
+                      AppToaster.show({
+                        message: 'Could not get task report or payload',
+                        intent: Intent.DANGER,
+                      });
+                      return;
+                    }
+
+                    if (!execution.sqlQuery || !execution.queryContext) {
+                      AppToaster.show({
+                        message: 'Could not get query',
+                        intent: Intent.DANGER,
+                      });
+                      return;
+                    }
+
+                    onNewTab(
+                      WorkbenchQuery.fromEffectiveQueryAndContext(
+                        execution.sqlQuery,
+                        execution.queryContext,
+                      ).changeLastExecution({ engine: 'sql-msq-task', id: w.taskId }),
+                      'Attached',
+                    );
+                  }}
+                />
+                <MenuItem
+                  icon={IconNames.DUPLICATE}
+                  text="Copy ID"
+                  onClick={() => {
+                    copy(w.taskId, { format: 'text/plain' });
+                    AppToaster.show({
+                      message: `${w.taskId} copied to clipboard`,
+                      intent: Intent.SUCCESS,
+                    });
+                  }}
+                />
+                {w.taskStatus === 'SUCCESS' &&
+                  w.datasource !== WorkbenchQuery.INLINE_DATASOURCE_MARKER && (
+                    <MenuItem
+                      icon={IconNames.APPLICATION}
+                      text={`SELECT * FROM ${SqlTableRef.create(w.datasource)}`}
+                      onClick={() =>
+                        onChangeQuery(`SELECT * FROM ${SqlTableRef.create(w.datasource)}`)
+                      }
+                    />
+                  )}
+                <MenuItem
+                  icon={IconNames.ARCHIVE}
+                  text="Download query detail archive"
+                  onClick={() => downloadQueryDetailArchive(w.taskId)}
+                />
+                {w.taskStatus === 'RUNNING' && (
+                  <>
+                    <MenuDivider />
+                    <MenuItem
+                      icon={IconNames.CROSS}
+                      text="Cancel query"
+                      intent={Intent.DANGER}
+                      onClick={() => setConfirmCancelId(w.taskId)}
+                    />
+                  </>
+                )}
+              </Menu>
+            );
+
+            const [icon, color] = statusToIconAndColor(w.taskStatus);
+            return (
+              <Popover2 className="work-entry" key={w.taskId} position="left" content={menu}>
+                <div title={formatDetail(w)} onDoubleClick={() => onExecutionDetails(w.taskId)}>
+                  <div className="line1">
+                    <Icon
+                      className={'status-icon ' + w.taskStatus.toLowerCase()}
+                      icon={icon}
+                      style={{ color }}
+                    />
+                    <div className="timing">
+                      {w.createdTime.replace('T', ' ').replace(/\.\d\d\dZ$/, '') +
+                        (w.duration > 0 ? ` (${formatDuration(w.duration)})` : '')}
+                    </div>
+                  </div>
+                  <div className="line2">
+                    <Icon
+                      className="output-icon"
+                      icon={
+                        w.datasource === WorkbenchQuery.INLINE_DATASOURCE_MARKER
+                          ? IconNames.APPLICATION
+                          : IconNames.CLOUD_UPLOAD
+                      }
+                    />
+                    <div
+                      className={classNames('output-datasource', {
+                        query: w.datasource === WorkbenchQuery.INLINE_DATASOURCE_MARKER,
+                      })}
+                    >
+                      {w.datasource === WorkbenchQuery.INLINE_DATASOURCE_MARKER
+                        ? 'data in report'
+                        : w.datasource}
+                    </div>
+                  </div>
+                </div>
+              </Popover2>
+            );
+          })}
+        </div>
+      ) : queryTaskHistoryState.isLoading() ? (
+        <Loader />
+      ) : undefined}
+      {confirmCancelId && (
+        <CancelQueryDialog
+          onCancel={async () => {
+            if (!confirmCancelId) return;
+            try {
+              await cancelTaskExecution(confirmCancelId);
+              AppToaster.show({
+                message: 'Query canceled',
+                intent: Intent.SUCCESS,
+              });
+              incrementWorkVersion();
+            } catch {
+              AppToaster.show({
+                message: 'Could not cancel query',
+                intent: Intent.DANGER,
+              });
+            }
+          }}
+          onDismiss={() => setConfirmCancelId(undefined)}
+        />
+      )}
+    </div>
+  );
+});
diff --git a/web-console/src/views/workbench-view/result-table-pane/result-table-pane.scss b/web-console/src/views/workbench-view/result-table-pane/result-table-pane.scss
new file mode 100644
index 000000000000..a823c0d571ab
--- /dev/null
+++ b/web-console/src/views/workbench-view/result-table-pane/result-table-pane.scss
@@ -0,0 +1,117 @@
+/*
+ * 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 '../../../variables';
+@import '../../../blueprint-overrides/common/colors';
+
+.result-table-pane {
+  position: relative;
+
+  &.more-results .-totalPages {
+    // Hide the total page counter as it can be confusing due to the auto limit
+    display: none;
+  }
+
+  .dead-end {
+    position: absolute;
+    left: 50%;
+    top: 45%;
+    transform: translate(-50%, -50%);
+    width: 350px;
+
+    p {
+      text-align: center;
+    }
+
+    > * {
+      margin-bottom: 10px;
+    }
+  }
+
+  .ReactTable {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    font-feature-settings: tnum;
+    font-variant-numeric: tabular-nums;
+
+    .rt-thead.-header {
+      box-shadow: 0 1px 0 0 rgba(black, 0.2); // This is a hack! this line is sometimes too weak in tables.
+
+      .rt-th {
+        &.aggregate-header {
+          background: rgba($druid-brand, 0.06);
+        }
+
+        .asc {
+          box-shadow: inset 0 3px 0 0 rgba(255, 255, 255, 0.6);
+        }
+
+        .desc {
+          box-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, 0.6);
+        }
+
+        .#{$bp-ns}-icon {
+          margin-left: 3px;
+        }
+
+        .output-name {
+          overflow: hidden;
+          text-overflow: ellipsis;
+
+          > * {
+            display: inline-block;
+            vertical-align: top;
+          }
+
+          .type-icon {
+            margin-top: 3px;
+            margin-right: 5px;
+          }
+        }
+
+        .formula {
+          font-family: monospace;
+          font-size: 11px;
+          margin-top: 4px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+
+    .rt-td {
+      cursor: pointer;
+    }
+  }
+
+  .clickable-cell {
+    padding: $table-cell-v-padding $table-cell-h-padding;
+    cursor: pointer;
+    width: 100%;
+  }
+
+  .#{$bp-ns}-popover2-target {
+    width: 100%;
+  }
+
+  .aggregate-column {
+    background-color: rgba($druid-brand, 0.06);
+  }
+}
diff --git a/web-console/src/views/workbench-view/result-table-pane/result-table-pane.tsx b/web-console/src/views/workbench-view/result-table-pane/result-table-pane.tsx
new file mode 100644
index 000000000000..3917a12a1ae1
--- /dev/null
+++ b/web-console/src/views/workbench-view/result-table-pane/result-table-pane.tsx
@@ -0,0 +1,778 @@
+/*
+ * 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 { Button, Icon, Intent, Menu, MenuItem } from '@blueprintjs/core';
+import { IconName, IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
+import classNames from 'classnames';
+import {
+  Column,
+  QueryResult,
+  SqlAlias,
+  SqlExpression,
+  SqlFunction,
+  SqlLiteral,
+  SqlQuery,
+  SqlRef,
+  SqlStar,
+  trimString,
+} from 'druid-query-toolkit';
+import * as JSONBig from 'json-bigint-native';
+import React, { useEffect, useState } from 'react';
+import ReactTable from 'react-table';
+
+import { BracedText, Deferred, TableCell } from '../../../components';
+import { ShowValueDialog } from '../../../dialogs/show-value-dialog/show-value-dialog';
+import {
+  computeFlattenExprsForData,
+  possibleDruidFormatForValues,
+  TIME_COLUMN,
+} from '../../../druid-models';
+import { SMALL_TABLE_PAGE_SIZE, SMALL_TABLE_PAGE_SIZE_OPTIONS } from '../../../react-table';
+import {
+  columnToIcon,
+  columnToWidth,
+  convertToGroupByExpression,
+  copyAndAlert,
+  filterMap,
+  formatNumber,
+  getNumericColumnBraces,
+  oneOf,
+  Pagination,
+  prettyPrintSql,
+  QueryAction,
+  stringifyValue,
+  timeFormatToSql,
+} from '../../../utils';
+import { ExpressionEditorDialog } from '../../sql-data-loader-view/expression-editor-dialog/expression-editor-dialog';
+import { TimeFloorMenuItem } from '../time-floor-menu-item/time-floor-menu-item';
+
+import './result-table-pane.scss';
+
+function sqlLiteralForColumnValue(column: Column, value: unknown): SqlLiteral | undefined {
+  if (column.sqlType === 'TIMESTAMP') {
+    const asDate = new Date(value as any);
+    if (!isNaN(asDate.valueOf())) {
+      return SqlLiteral.create(asDate);
+    }
+  }
+
+  return SqlLiteral.maybe(value);
+}
+
+const CAST_TARGETS: string[] = ['VARCHAR', 'BIGINT', 'DOUBLE'];
+
+function jsonValue(ex: SqlExpression, path: string): SqlExpression {
+  return SqlExpression.parse(`JSON_VALUE(${ex}, ${SqlLiteral.create(path)})`);
+}
+
+function getJsonPaths(jsons: Record<string, any>[]): string[] {
+  return ['$.'].concat(computeFlattenExprsForData(jsons, 'path', 'include-arrays', true));
+}
+
+function isComparable(x: unknown): boolean {
+  return x !== null && x !== '';
+}
+
+function getExpressionIfAlias(query: SqlQuery, selectIndex: number): string {
+  const ex = query.getSelectExpressionForIndex(selectIndex);
+
+  if (query.isRealOutputColumnAtSelectIndex(selectIndex)) {
+    if (ex instanceof SqlAlias) {
+      return String(ex.expression.prettify({ keywordCasing: 'preserve' }));
+    } else {
+      return '';
+    }
+  } else if (ex instanceof SqlStar) {
+    return '';
+  } else {
+    return ex ? String(ex.prettify({ keywordCasing: 'preserve' })) : '';
+  }
+}
+
+export interface ResultTablePaneProps {
+  queryResult: QueryResult;
+  onQueryAction(action: QueryAction): void;
+  onExport?(): void;
+  runeMode: boolean;
+  initPageSize?: number;
+}
+
+export const ResultTablePane = React.memo(function ResultTablePane(props: ResultTablePaneProps) {
+  const { queryResult, onQueryAction, onExport, runeMode, initPageSize } = props;
+  const parsedQuery = queryResult.sqlQuery;
+  const [pagination, setPagination] = useState<Pagination>({
+    page: 0,
+    pageSize: initPageSize || 20,
+  });
+  const [showValue, setShowValue] = useState<string>();
+  const [editingColumn, setEditingColumn] = useState<number>(-1);
+
+  // Reset page to 0 if number of results changes
+  useEffect(() => {
+    setPagination(pagination => {
+      return pagination.page ? { ...pagination, page: 0 } : pagination;
+    });
+  }, [queryResult.rows.length]);
+
+  function hasFilterOnHeader(header: string, headerIndex: number): boolean {
+    if (!parsedQuery || !parsedQuery.isRealOutputColumnAtSelectIndex(headerIndex)) return false;
+
+    return (
+      parsedQuery.getEffectiveWhereExpression().containsColumn(header) ||
+      parsedQuery.getEffectiveHavingExpression().containsColumn(header)
+    );
+  }
+
+  function getHeaderMenu(column: Column, headerIndex: number) {
+    const header = column.name;
+    const type = column.sqlType || column.nativeType;
+    const ref = SqlRef.column(header);
+    const prettyRef = prettyPrintSql(ref);
+
+    const menuItems: JSX.Element[] = [];
+    if (parsedQuery) {
+      const noStar = !parsedQuery.hasStarInSelect();
+      const selectExpression = parsedQuery.getSelectExpressionForIndex(headerIndex);
+
+      const orderByExpression = parsedQuery.isValidSelectIndex(headerIndex)
+        ? SqlLiteral.index(headerIndex)
+        : SqlRef.column(header);
+      const descOrderBy = orderByExpression.toOrderByExpression('DESC');
+      const ascOrderBy = orderByExpression.toOrderByExpression('ASC');
+      const orderBy = parsedQuery.getOrderByForSelectIndex(headerIndex);
+
+      if (orderBy) {
+        const reverseOrderBy = orderBy.reverseDirection();
+        const reverseOrderByDirection = reverseOrderBy.getEffectiveDirection();
+        menuItems.push(
+          <MenuItem
+            key="order"
+            icon={reverseOrderByDirection === 'ASC' ? IconNames.SORT_ASC : IconNames.SORT_DESC}
+            text={`Order ${reverseOrderByDirection === 'ASC' ? 'ascending' : 'descending'}`}
+            onClick={() => {
+              onQueryAction(q => q.changeOrderByExpressions([reverseOrderBy]));
+            }}
+          />,
+        );
+      } else {
+        menuItems.push(
+          <MenuItem
+            key="order_desc"
+            icon={IconNames.SORT_DESC}
+            text="Order descending"
+            onClick={() => {
+              onQueryAction(q => q.changeOrderByExpressions([descOrderBy]));
+            }}
+          />,
+          <MenuItem
+            key="order_asc"
+            icon={IconNames.SORT_ASC}
+            text="Order ascending"
+            onClick={() => {
+              onQueryAction(q => q.changeOrderByExpressions([ascOrderBy]));
+            }}
+          />,
+        );
+      }
+
+      // Casts
+      if (selectExpression) {
+        const underlyingExpression = selectExpression.getUnderlyingExpression();
+        if (
+          underlyingExpression instanceof SqlFunction &&
+          underlyingExpression.getEffectiveFunctionName() === 'CAST'
+        ) {
+          menuItems.push(
+            <MenuItem
+              key="uncast"
+              icon={IconNames.CROSS}
+              text="Remove cast"
+              onClick={() => {
+                if (!selectExpression || !underlyingExpression) return;
+                onQueryAction(q =>
+                  q.changeSelect(
+                    headerIndex,
+                    underlyingExpression.getArg(0)!.as(selectExpression.getOutputName()),
+                  ),
+                );
+              }}
+            />,
+          );
+        }
+
+        menuItems.push(
+          <MenuItem key="cast" icon={IconNames.EXCHANGE} text="Cast to...">
+            {filterMap(CAST_TARGETS, asType => {
+              if (asType === column.sqlType) return;
+              return (
+                <MenuItem
+                  key={asType}
+                  text={asType}
+                  onClick={() => {
+                    if (!selectExpression) return;
+                    onQueryAction(q =>
+                      q.changeSelect(
+                        headerIndex,
+                        selectExpression
+                          .getUnderlyingExpression()
+                          .cast(asType)
+                          .as(selectExpression.getOutputName()),
+                      ),
+                    );
+                  }}
+                />
+              );
+            })}
+          </MenuItem>,
+        );
+      }
+
+      // JSON hint
+      if (column.nativeType === 'COMPLEX<json>') {
+        const paths = getJsonPaths(
+          filterMap(queryResult.rows, row => {
+            const v = row[headerIndex];
+            // Strangely multi-stage-query-engine and broker deal with JSON differently
+            if (v && typeof v === 'object') return v;
+            try {
+              return JSONBig.parse(v);
+            } catch {
+              return;
+            }
+          }),
+        );
+
+        if (paths.length) {
+          menuItems.push(
+            <MenuItem key="json_value" icon={IconNames.DIAGRAM_TREE} text="Get JSON value for...">
+              {paths.map(path => {
+                return (
+                  <MenuItem
+                    key={path}
+                    text={path}
+                    onClick={() => {
+                      if (!selectExpression) return;
+                      onQueryAction(q =>
+                        q.addSelect(
+                          jsonValue(selectExpression.getUnderlyingExpression(), path).as(
+                            selectExpression.getOutputName() + path.replace(/^\$/, ''),
+                          ),
+                          { insertIndex: headerIndex + 1 },
+                        ),
+                      );
+                    }}
+                  />
+                );
+              })}
+            </MenuItem>,
+          );
+        }
+      }
+
+      if (parsedQuery.isRealOutputColumnAtSelectIndex(headerIndex)) {
+        const whereExpression = parsedQuery.getWhereExpression();
+        if (whereExpression && whereExpression.containsColumn(header)) {
+          menuItems.push(
+            <MenuItem
+              key="remove_where"
+              icon={IconNames.FILTER_REMOVE}
+              text="Remove from WHERE clause"
+              onClick={() => {
+                onQueryAction(q =>
+                  q.changeWhereExpression(whereExpression.removeColumnFromAnd(header)),
+                );
+              }}
+            />,
+          );
+        }
+
+        const havingExpression = parsedQuery.getHavingExpression();
+        if (havingExpression && havingExpression.containsColumn(header)) {
+          menuItems.push(
+            <MenuItem
+              key="remove_having"
+              icon={IconNames.FILTER_REMOVE}
+              text="Remove from HAVING clause"
+              onClick={() => {
+                onQueryAction(q =>
+                  q.changeHavingExpression(havingExpression.removeColumnFromAnd(header)),
+                );
+              }}
+            />,
+          );
+        }
+      }
+
+      if (!parsedQuery.hasStarInSelect()) {
+        menuItems.push(
+          <MenuItem
+            key="edit_column"
+            icon={IconNames.EDIT}
+            text="Edit column"
+            onClick={() => {
+              setEditingColumn(headerIndex);
+            }}
+          />,
+        );
+      }
+
+      if (noStar && selectExpression) {
+        if (column.isTimeColumn()) {
+          menuItems.push(
+            <TimeFloorMenuItem
+              key="time_floor"
+              expression={selectExpression}
+              onChange={expression => {
+                onQueryAction(q => q.changeSelect(headerIndex, expression));
+              }}
+            />,
+          );
+        } else if (column.sqlType === 'TIMESTAMP') {
+          menuItems.push(
+            <MenuItem
+              key="declare_time"
+              icon={IconNames.TIME}
+              text="Use as the primary time column"
+              onClick={() => {
+                onQueryAction(q => q.changeSelect(headerIndex, selectExpression.as(TIME_COLUMN)));
+              }}
+            />,
+          );
+        } else {
+          // Not a time column -------------------------------------------
+          const values = queryResult.rows.map(row => row[headerIndex]);
+          const possibleDruidFormat = possibleDruidFormatForValues(values);
+          const formatSql = possibleDruidFormat ? timeFormatToSql(possibleDruidFormat) : undefined;
+
+          if (formatSql) {
+            const newSelectExpression = formatSql.fillPlaceholders([
+              selectExpression.getUnderlyingExpression(),
+            ]);
+
+            menuItems.push(
+              <MenuItem
+                key="parse_time"
+                icon={IconNames.TIME}
+                text={`Time parse as '${possibleDruidFormat}' and use as the primary time column`}
+                onClick={() => {
+                  onQueryAction(q =>
+                    q.changeSelect(headerIndex, newSelectExpression.as(TIME_COLUMN)),
+                  );
+                }}
+              />,
+            );
+          }
+
+          if (parsedQuery.hasGroupBy()) {
+            if (parsedQuery.isGroupedOutputColumn(header)) {
+              const convertToAggregate = (aggregate: SqlExpression) => {
+                onQueryAction(q =>
+                  q.removeOutputColumn(header).addSelect(aggregate, {
+                    insertIndex: 'last',
+                  }),
+                );
+              };
+
+              const underlyingSelectExpression = selectExpression.getUnderlyingExpression();
+
+              menuItems.push(
+                <MenuItem
+                  key="convert_to_aggregate"
+                  icon={IconNames.EXCHANGE}
+                  text="Convert to aggregate"
+                >
+                  {oneOf(type, 'LONG', 'FLOAT', 'DOUBLE', 'BIGINT') && (
+                    <>
+                      <MenuItem
+                        text="Convert to SUM(...)"
+                        onClick={() => {
+                          convertToAggregate(
+                            SqlFunction.simple('SUM', [underlyingSelectExpression]).as(
+                              `sum_${header}`,
+                            ),
+                          );
+                        }}
+                      />
+                      <MenuItem
+                        text="Convert to MIN(...)"
+                        onClick={() => {
+                          convertToAggregate(
+                            SqlFunction.simple('MIN', [underlyingSelectExpression]).as(
+                              `min_${header}`,
+                            ),
+                          );
+                        }}
+                      />
+                      <MenuItem
+                        text="Convert to MAX(...)"
+                        onClick={() => {
+                          convertToAggregate(
+                            SqlFunction.simple('MAX', [underlyingSelectExpression]).as(
+                              `max_${header}`,
+                            ),
+                          );
+                        }}
+                      />
+                    </>
+                  )}
+                  <MenuItem
+                    text="Convert to COUNT(DISTINCT ...)"
+                    onClick={() => {
+                      convertToAggregate(
+                        SqlFunction.decorated('COUNT', 'DISTINCT', [underlyingSelectExpression]).as(
+                          `unique_${header}`,
+                        ),
+                      );
+                    }}
+                  />
+                  <MenuItem
+                    text="Convert to APPROX_COUNT_DISTINCT_DS_HLL(...)"
+                    onClick={() => {
+                      convertToAggregate(
+                        SqlFunction.simple('APPROX_COUNT_DISTINCT_DS_HLL', [
+                          underlyingSelectExpression,
+                        ]).as(`unique_${header}`),
+                      );
+                    }}
+                  />
+                  <MenuItem
+                    text="Convert to APPROX_COUNT_DISTINCT_DS_THETA(...)"
+                    onClick={() => {
+                      convertToAggregate(
+                        SqlFunction.simple('APPROX_COUNT_DISTINCT_DS_THETA', [
+                          underlyingSelectExpression,
+                        ]).as(`unique_${header}`),
+                      );
+                    }}
+                  />
+                </MenuItem>,
+              );
+            } else {
+              const groupByExpression = convertToGroupByExpression(selectExpression);
+              if (groupByExpression) {
+                menuItems.push(
+                  <MenuItem
+                    key="convert_to_group_by"
+                    icon={IconNames.EXCHANGE}
+                    text="Convert to group by"
+                    onClick={() => {
+                      onQueryAction(q =>
+                        q.removeOutputColumn(header).addSelect(groupByExpression, {
+                          insertIndex: 'last-grouping',
+                          addToGroupBy: 'end',
+                        }),
+                      );
+                    }}
+                  />,
+                );
+              }
+            }
+          }
+        }
+      }
+
+      menuItems.push(
+        <MenuItem
+          key="remove_column"
+          icon={IconNames.CROSS}
+          text="Remove column"
+          onClick={() => {
+            onQueryAction(q => q.removeOutputColumn(header));
+          }}
+        />,
+      );
+    } else {
+      menuItems.push(
+        <MenuItem
+          key="copy_ref"
+          icon={IconNames.CLIPBOARD}
+          text={`Copy: ${prettyRef}`}
+          onClick={() => {
+            copyAndAlert(String(ref), `${prettyRef}' copied to clipboard`);
+          }}
+        />,
+      );
+
+      if (!runeMode) {
+        const orderByExpression = SqlRef.column(header);
+        const descOrderBy = orderByExpression.toOrderByExpression('DESC');
+        const ascOrderBy = orderByExpression.toOrderByExpression('ASC');
+        const descOrderByPretty = prettyPrintSql(descOrderBy);
+        const ascOrderByPretty = prettyPrintSql(descOrderBy);
+
+        menuItems.push(
+          <MenuItem
+            key="copy_desc"
+            icon={IconNames.CLIPBOARD}
+            text={`Copy: ${descOrderByPretty}`}
+            onClick={() =>
+              copyAndAlert(descOrderBy.toString(), `'${descOrderByPretty}' copied to clipboard`)
+            }
+          />,
+          <MenuItem
+            key="copy_asc"
+            icon={IconNames.CLIPBOARD}
+            text={`Copy: ${ascOrderByPretty}`}
+            onClick={() =>
+              copyAndAlert(ascOrderBy.toString(), `'${ascOrderByPretty}' copied to clipboard`)
+            }
+          />,
+        );
+      }
+    }
+
+    return <Menu>{menuItems}</Menu>;
+  }
+
+  function filterOnMenuItem(icon: IconName, clause: SqlExpression, having: boolean) {
+    if (!parsedQuery) return;
+
+    return (
+      <MenuItem
+        icon={icon}
+        text={`${having ? 'Having' : 'Filter on'}: ${prettyPrintSql(clause)}`}
+        onClick={() => {
+          const column = clause.getUsedColumns()[0];
+          onQueryAction(
+            having
+              ? q => q.removeFromHaving(column).addHaving(clause)
+              : q => q.removeColumnFromWhere(column).addWhere(clause),
+          );
+        }}
+      />
+    );
+  }
+
+  function clipboardMenuItem(clause: SqlExpression) {
+    const prettyLabel = prettyPrintSql(clause);
+    return (
+      <MenuItem
+        icon={IconNames.CLIPBOARD}
+        text={`Copy: ${prettyLabel}`}
+        onClick={() => copyAndAlert(clause.toString(), `${prettyLabel} copied to clipboard`)}
+      />
+    );
+  }
+
+  function getCellMenu(column: Column, headerIndex: number, value: unknown) {
+    const showFullValueMenuItem = (
+      <MenuItem
+        icon={IconNames.EYE_OPEN}
+        text="Show full value"
+        onClick={() => {
+          setShowValue(stringifyValue(value));
+        }}
+      />
+    );
+
+    const val = sqlLiteralForColumnValue(column, value);
+
+    if (parsedQuery) {
+      let ex: SqlExpression | undefined;
+      let having = false;
+      if (parsedQuery.hasStarInSelect()) {
+        ex = SqlRef.column(column.name);
+      } else {
+        const selectValue = parsedQuery.getSelectExpressionForIndex(headerIndex);
+        if (selectValue) {
+          const outputName = selectValue.getOutputName();
+          having = parsedQuery.isAggregateSelectIndex(headerIndex);
+          if (having && outputName) {
+            ex = SqlRef.column(outputName);
+          } else {
+            ex = selectValue.getUnderlyingExpression();
+          }
+        }
+      }
+
+      const jsonColumn = column.nativeType === 'COMPLEX<json>';
+      return (
+        <Menu>
+          {ex && val && !jsonColumn && (
+            <>
+              {filterOnMenuItem(IconNames.FILTER, ex.equal(val), having)}
+              {filterOnMenuItem(IconNames.FILTER, ex.unequal(val), having)}
+              {isComparable(value) && (
+                <>
+                  {filterOnMenuItem(IconNames.FILTER, ex.greaterThanOrEqual(val), having)}
+                  {filterOnMenuItem(IconNames.FILTER, ex.lessThanOrEqual(val), having)}
+                </>
+              )}
+            </>
+          )}
+          {showFullValueMenuItem}
+        </Menu>
+      );
+    } else {
+      const ref = SqlRef.column(column.name);
+      const stringValue = stringifyValue(value);
+      const trimmedValue = trimString(stringValue, 50);
+      return (
+        <Menu>
+          <MenuItem
+            icon={IconNames.CLIPBOARD}
+            text={`Copy: ${trimmedValue}`}
+            onClick={() => copyAndAlert(stringValue, `${trimmedValue} copied to clipboard`)}
+          />
+          {!runeMode && val && (
+            <>
+              {clipboardMenuItem(ref.equal(val))}
+              {clipboardMenuItem(ref.unequal(val))}
+            </>
+          )}
+          {showFullValueMenuItem}
+        </Menu>
+      );
+    }
+  }
+
+  function getHeaderClassName(header: string) {
+    if (!parsedQuery) return;
+
+    const className = [];
+
+    const orderBy = parsedQuery.getOrderByForOutputColumn(header);
+    if (orderBy) {
+      className.push(orderBy.getEffectiveDirection() === 'DESC' ? '-sort-desc' : '-sort-asc');
+    }
+
+    if (parsedQuery.isAggregateOutputColumn(header)) {
+      className.push('aggregate-header');
+    }
+
+    return className.join(' ');
+  }
+
+  const outerLimit = queryResult.getSqlOuterLimit();
+  const hasMoreResults = queryResult.rows.length === outerLimit;
+  const finalPage =
+    hasMoreResults && Math.floor(queryResult.rows.length / pagination.pageSize) === pagination.page; // on the last page
+
+  const editingExpression: SqlExpression | undefined =
+    parsedQuery && editingColumn !== -1
+      ? parsedQuery.getSelectExpressionForIndex(editingColumn)
+      : undefined;
+
+  const numericColumnBraces = getNumericColumnBraces(queryResult, pagination);
+  return (
+    <div className={classNames('result-table-pane', { 'more-results': hasMoreResults })}>
+      {finalPage ? (
+        <div className="dead-end">
+          <p>This is the end of the inline results but there are more results in this query.</p>
+          {onExport && (
+            <>
+              <p>If you want to see the full list of results you should export them.</p>
+              <Button
+                icon={IconNames.DOWNLOAD}
+                text="Export results"
+                intent={Intent.PRIMARY}
+                fill
+                onClick={onExport}
+              />
+            </>
+          )}
+          <Button
+            icon={IconNames.ARROW_LEFT}
+            text="Go to previous page"
+            fill
+            onClick={() => setPagination({ ...pagination, page: pagination.page - 1 })}
+          />
+        </div>
+      ) : (
+        <ReactTable
+          className="-striped -highlight"
+          data={queryResult.rows as any[][]}
+          ofText={hasMoreResults ? '' : 'of'}
+          noDataText={queryResult.rows.length ? '' : 'Query returned no data'}
+          page={pagination.page}
+          pageSize={pagination.pageSize}
+          onPageChange={page => setPagination({ ...pagination, page })}
+          onPageSizeChange={(pageSize, page) => setPagination({ page, pageSize })}
+          sortable={false}
+          defaultPageSize={SMALL_TABLE_PAGE_SIZE}
+          pageSizeOptions={SMALL_TABLE_PAGE_SIZE_OPTIONS}
+          showPagination={
+            queryResult.rows.length > Math.min(SMALL_TABLE_PAGE_SIZE, pagination.pageSize)
+          }
+          columns={filterMap(queryResult.header, (column, i) => {
+            const h = column.name;
+            const icon = columnToIcon(column);
+
+            return {
+              Header() {
+                return (
+                  <Popover2 content={<Deferred content={() => getHeaderMenu(column, i)} />}>
+                    <div className="clickable-cell">
+                      <div className="output-name">
+                        {icon && <Icon className="type-icon" icon={icon} size={12} />}
+                        {h}
+                        {hasFilterOnHeader(h, i) && <Icon icon={IconNames.FILTER} size={14} />}
+                      </div>
+                      {parsedQuery && (
+                        <div className="formula">{getExpressionIfAlias(parsedQuery, i)}</div>
+                      )}
+                    </div>
+                  </Popover2>
+                );
+              },
+              headerClassName: getHeaderClassName(h),
+              accessor: String(i),
+              Cell(row) {
+                const value = row.value;
+                return (
+                  <div>
+                    <Popover2 content={<Deferred content={() => getCellMenu(column, i, value)} />}>
+                      {numericColumnBraces[i] ? (
+                        <BracedText
+                          className="table-padding"
+                          text={formatNumber(value)}
+                          braces={numericColumnBraces[i]}
+                          padFractionalPart
+                        />
+                      ) : (
+                        <TableCell value={value} unlimited />
+                      )}
+                    </Popover2>
+                  </div>
+                );
+              },
+              width: columnToWidth(column),
+              className:
+                parsedQuery && parsedQuery.isAggregateOutputColumn(h)
+                  ? 'aggregate-column'
+                  : undefined,
+            };
+          })}
+        />
+      )}
+      {showValue && <ShowValueDialog onClose={() => setShowValue(undefined)} str={showValue} />}
+      {editingExpression && (
+        <ExpressionEditorDialog
+          includeOutputName
+          expression={editingExpression}
+          onSave={newExpression => {
+            if (!parsedQuery) return;
+            onQueryAction(q => q.changeSelect(editingColumn, newExpression));
+          }}
+          onClose={() => setEditingColumn(-1)}
+        />
+      )}
+    </div>
+  );
+});
diff --git a/web-console/src/views/workbench-view/run-panel/run-panel.scss b/web-console/src/views/workbench-view/run-panel/run-panel.scss
new file mode 100644
index 000000000000..c34f016ece8b
--- /dev/null
+++ b/web-console/src/views/workbench-view/run-panel/run-panel.scss
@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+.run-panel {
+  display: flex;
+  gap: 5px;
+
+  .rune-button {
+    background-color: #2ca89e !important;
+  }
+}
diff --git a/web-console/src/views/workbench-view/run-panel/run-panel.tsx b/web-console/src/views/workbench-view/run-panel/run-panel.tsx
new file mode 100644
index 000000000000..572120c9e730
--- /dev/null
+++ b/web-console/src/views/workbench-view/run-panel/run-panel.tsx
@@ -0,0 +1,422 @@
+/*
+ * 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 {
+  Button,
+  ButtonGroup,
+  Icon,
+  Intent,
+  Menu,
+  MenuDivider,
+  MenuItem,
+  Position,
+  useHotkeys,
+} from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
+import React, { useCallback, useMemo, useState } from 'react';
+
+import { MenuCheckbox, MenuTristate } from '../../../components';
+import { EditContextDialog, StringInputDialog } from '../../../dialogs';
+import {
+  changeDurableShuffleStorage,
+  changeFinalizeAggregations,
+  changeGroupByEnableMultiValueUnnesting,
+  changeMaxParseExceptions,
+  changeTimezone,
+  changeUseApproximateCountDistinct,
+  changeUseApproximateTopN,
+  changeUseCache,
+  DruidEngine,
+  getDurableShuffleStorage,
+  getFinalizeAggregations,
+  getGroupByEnableMultiValueUnnesting,
+  getMaxParseExceptions,
+  getTimezone,
+  getUseApproximateCountDistinct,
+  getUseApproximateTopN,
+  getUseCache,
+  WorkbenchQuery,
+} from '../../../druid-models';
+import { pluralIfNeeded, tickIcon } from '../../../utils';
+import { MaxTasksButton } from '../max-tasks-button/max-tasks-button';
+
+import './run-panel.scss';
+
+const NAMED_TIMEZONES: string[] = [
+  'America/Juneau', // -9.0
+  'America/Los_Angeles', // -8.0
+  'America/Yellowknife', // -7.0
+  'America/Phoenix', // -7.0
+  'America/Denver', // -7.0
+  'America/Mexico_City', // -6.0
+  'America/Chicago', // -6.0
+  'America/New_York', // -5.0
+  'America/Argentina/Buenos_Aires', // -4.0
+  'Etc/UTC', // +0.0
+  'Europe/London', // +0.0
+  'Europe/Paris', // +1.0
+  'Asia/Jerusalem', // +2.0
+  'Asia/Shanghai', // +8.0
+  'Asia/Hong_Kong', // +8.0
+  'Asia/Seoul', // +9.0
+  'Asia/Tokyo', // +9.0
+  'Pacific/Guam', // +10.0
+  'Australia/Sydney', // +11.0
+];
+
+export interface RunPanelProps {
+  query: WorkbenchQuery;
+  onQueryChange(query: WorkbenchQuery): void;
+  loading: boolean;
+  small?: boolean;
+  onRun(preview: boolean): void;
+  queryEngines: DruidEngine[];
+  moreMenu?: JSX.Element;
+}
+
+export const RunPanel = React.memo(function RunPanel(props: RunPanelProps) {
+  const { query, onQueryChange, onRun, moreMenu, loading, small, queryEngines } = props;
+  const [editContextDialogOpen, setEditContextDialogOpen] = useState(false);
+  const [customTimezoneDialogOpen, setCustomTimezoneDialogOpen] = useState(false);
+
+  const emptyQuery = query.isEmptyQuery();
+  const ingestMode = query.isIngestQuery();
+  const queryContext = query.queryContext;
+  const numContextKeys = Object.keys(queryContext).length;
+
+  const maxParseExceptions = getMaxParseExceptions(queryContext);
+  const finalizeAggregations = getFinalizeAggregations(queryContext);
+  const groupByEnableMultiValueUnnesting = getGroupByEnableMultiValueUnnesting(queryContext);
+  const durableShuffleStorage = getDurableShuffleStorage(queryContext);
+  const useApproximateCountDistinct = getUseApproximateCountDistinct(queryContext);
+  const useApproximateTopN = getUseApproximateTopN(queryContext);
+  const useCache = getUseCache(queryContext);
+  const timezone = getTimezone(queryContext);
+
+  const handleRun = useCallback(() => {
+    if (!onRun) return;
+    onRun(false);
+  }, [onRun]);
+
+  const handlePreview = useCallback(() => {
+    if (!onRun) return;
+    onRun(true);
+  }, [onRun]);
+
+  const hotkeys = useMemo(() => {
+    if (small) return [];
+    return [
+      {
+        allowInInput: true,
+        global: true,
+        group: 'Query',
+        combo: 'mod + enter',
+        label: 'Run the current query',
+        onKeyDown: handleRun,
+      },
+      {
+        allowInInput: true,
+        global: true,
+        group: 'Query',
+        combo: 'mod + shift + enter',
+        label: 'Preview the current query',
+        onKeyDown: handlePreview,
+      },
+    ];
+  }, [small, handleRun, handlePreview]);
+
+  useHotkeys(hotkeys);
+
+  const queryEngine = query.engine;
+  function renderQueryEngineMenuItem(e: DruidEngine | undefined) {
+    return (
+      <MenuItem
+        key={String(e)}
+        icon={tickIcon(e === queryEngine)}
+        text={typeof e === 'undefined' ? 'auto' : e}
+        label={e === 'sql-msq-task' ? 'multi-stage-query' : undefined}
+        onClick={() => onQueryChange(query.changeEngine(e))}
+        shouldDismissPopover={false}
+      />
+    );
+  }
+
+  const availableEngines = ([undefined] as (DruidEngine | undefined)[]).concat(queryEngines);
+
+  function offsetOptions(): JSX.Element[] {
+    const items: JSX.Element[] = [];
+
+    for (let i = -12; i <= 14; i++) {
+      const offset = `${i < 0 ? '-' : '+'}${String(Math.abs(i)).padStart(2, '0')}:00`;
+      items.push(
+        <MenuItem
+          key={offset}
+          icon={tickIcon(offset === timezone)}
+          text={offset}
+          shouldDismissPopover={false}
+          onClick={() => {
+            onQueryChange(query.changeQueryContext(changeTimezone(queryContext, offset)));
+          }}
+        />,
+      );
+    }
+
+    return items;
+  }
+
+  const effectiveEngine = query.getEffectiveEngine();
+  return (
+    <div className="run-panel">
+      <Button
+        className={effectiveEngine === 'native' ? 'rune-button' : undefined}
+        disabled={loading}
+        icon={IconNames.CARET_RIGHT}
+        onClick={() => onRun(false)}
+        text="Run"
+        intent={!emptyQuery && !small ? Intent.PRIMARY : undefined}
+        small={small}
+        minimal={small}
+      />
+      {ingestMode && (
+        <Button
+          disabled={loading}
+          icon={IconNames.EYE_OPEN}
+          onClick={() => onRun(true)}
+          text="Preview"
+          small={small}
+          minimal={small}
+        />
+      )}
+      {!small && onQueryChange && (
+        <ButtonGroup>
+          <Popover2
+            position={Position.BOTTOM_LEFT}
+            content={
+              <Menu>
+                {queryEngines.length > 1 && (
+                  <>
+                    <MenuDivider title="Select engine" />
+                    {availableEngines.map(renderQueryEngineMenuItem)}
+                    <MenuDivider />
+                  </>
+                )}
+                <MenuItem
+                  icon={IconNames.PROPERTIES}
+                  text="Edit context"
+                  onClick={() => setEditContextDialogOpen(true)}
+                  label={pluralIfNeeded(numContextKeys, 'key')}
+                />
+                {effectiveEngine !== 'native' && (
+                  <MenuItem
+                    icon={IconNames.GLOBE_NETWORK}
+                    text="Timezone"
+                    label={timezone || 'default'}
+                  >
+                    <MenuDivider title="Timezone type" />
+                    <MenuItem
+                      icon={tickIcon(!timezone)}
+                      text="Default"
+                      shouldDismissPopover={false}
+                      onClick={() => {
+                        onQueryChange(
+                          query.changeQueryContext(changeTimezone(queryContext, undefined)),
+                        );
+                      }}
+                    />
+                    <MenuItem icon={tickIcon(String(timezone).includes('/'))} text="Named">
+                      {NAMED_TIMEZONES.map(namedTimezone => (
+                        <MenuItem
+                          key={namedTimezone}
+                          icon={tickIcon(namedTimezone === timezone)}
+                          text={namedTimezone}
+                          shouldDismissPopover={false}
+                          onClick={() => {
+                            onQueryChange(
+                              query.changeQueryContext(changeTimezone(queryContext, namedTimezone)),
+                            );
+                          }}
+                        />
+                      ))}
+                    </MenuItem>
+                    <MenuItem icon={tickIcon(String(timezone).includes(':'))} text="Offset">
+                      {offsetOptions()}
+                    </MenuItem>
+                    <MenuItem
+                      icon={IconNames.BLANK}
+                      text="Custom"
+                      onClick={() => setCustomTimezoneDialogOpen(true)}
+                    />
+                  </MenuItem>
+                )}
+                {effectiveEngine === 'sql-msq-task' ? (
+                  <>
+                    <MenuItem
+                      icon={IconNames.ERROR}
+                      text="Max parse exceptions"
+                      label={String(maxParseExceptions)}
+                    >
+                      {[0, 1, 5, 10, 1000, 10000, -1].map(v => (
+                        <MenuItem
+                          key={String(v)}
+                          icon={tickIcon(v === maxParseExceptions)}
+                          text={v === -1 ? '∞ (-1)' : String(v)}
+                          onClick={() => {
+                            onQueryChange(
+                              query.changeQueryContext(changeMaxParseExceptions(queryContext, v)),
+                            );
+                          }}
+                          shouldDismissPopover={false}
+                        />
+                      ))}
+                    </MenuItem>
+                    <MenuTristate
+                      icon={IconNames.TRANSLATE}
+                      text="Finalize aggregations"
+                      value={finalizeAggregations}
+                      undefinedEffectiveValue={!ingestMode}
+                      onValueChange={v => {
+                        onQueryChange(
+                          query.changeQueryContext(changeFinalizeAggregations(queryContext, v)),
+                        );
+                      }}
+                    />
+                    <MenuTristate
+                      icon={IconNames.FORK}
+                      text="Enable GroupBy multi-value unnesting"
+                      value={groupByEnableMultiValueUnnesting}
+                      undefinedEffectiveValue={!ingestMode}
+                      onValueChange={v => {
+                        onQueryChange(
+                          query.changeQueryContext(
+                            changeGroupByEnableMultiValueUnnesting(queryContext, v),
+                          ),
+                        );
+                      }}
+                    />
+                    <MenuCheckbox
+                      checked={durableShuffleStorage}
+                      text="Durable shuffle storage"
+                      onChange={() => {
+                        onQueryChange(
+                          query.changeQueryContext(
+                            changeDurableShuffleStorage(queryContext, !durableShuffleStorage),
+                          ),
+                        );
+                      }}
+                    />
+                  </>
+                ) : (
+                  <>
+                    <MenuCheckbox
+                      checked={useCache}
+                      text="Use cache"
+                      onChange={() => {
+                        onQueryChange(
+                          query.changeQueryContext(changeUseCache(queryContext, !useCache)),
+                        );
+                      }}
+                    />
+                    <MenuCheckbox
+                      checked={useApproximateTopN}
+                      text="Use approximate TopN"
+                      onChange={() => {
+                        onQueryChange(
+                          query.changeQueryContext(
+                            changeUseApproximateTopN(queryContext, !useApproximateTopN),
+                          ),
+                        );
+                      }}
+                    />
+                  </>
+                )}
+                {effectiveEngine !== 'native' && (
+                  <MenuCheckbox
+                    checked={useApproximateCountDistinct}
+                    text="Use approximate COUNT(DISTINCT)"
+                    onChange={() => {
+                      onQueryChange(
+                        query.changeQueryContext(
+                          changeUseApproximateCountDistinct(
+                            queryContext,
+                            !useApproximateCountDistinct,
+                          ),
+                        ),
+                      );
+                    }}
+                  />
+                )}
+                <MenuCheckbox
+                  checked={!query.unlimited}
+                  intent={query.unlimited ? Intent.WARNING : undefined}
+                  text="Limit inline results"
+                  labelElement={
+                    query.unlimited ? <Icon icon={IconNames.WARNING_SIGN} /> : undefined
+                  }
+                  onChange={() => {
+                    onQueryChange(query.toggleUnlimited());
+                  }}
+                />
+              </Menu>
+            }
+          >
+            <Button
+              text={`Engine: ${queryEngine || `auto (${effectiveEngine})`}`}
+              rightIcon={IconNames.CARET_DOWN}
+              intent={query.unlimited ? Intent.WARNING : undefined}
+            />
+          </Popover2>
+          {effectiveEngine === 'sql-msq-task' && (
+            <MaxTasksButton
+              queryContext={queryContext}
+              changeQueryContext={queryContext =>
+                onQueryChange(query.changeQueryContext(queryContext))
+              }
+            />
+          )}
+        </ButtonGroup>
+      )}
+      {moreMenu && (
+        <Popover2 position={Position.BOTTOM_LEFT} content={moreMenu}>
+          <Button small={small} minimal={small} rightIcon={IconNames.MORE} />
+        </Popover2>
+      )}
+      {editContextDialogOpen && (
+        <EditContextDialog
+          queryContext={queryContext}
+          onQueryContextChange={newContext => {
+            if (!onQueryChange) return;
+            onQueryChange(query.changeQueryContext(newContext));
+          }}
+          onClose={() => {
+            setEditContextDialogOpen(false);
+          }}
+        />
+      )}
+      {customTimezoneDialogOpen && (
+        <StringInputDialog
+          title="Custom timezone"
+          placeholder="Etc/UTC"
+          maxLength={50}
+          onSubmit={tz => onQueryChange(query.changeQueryContext(changeTimezone(queryContext, tz)))}
+          onClose={() => setCustomTimezoneDialogOpen(false)}
+        />
+      )}
+    </div>
+  );
+});
diff --git a/web-console/src/views/workbench-view/tab-rename-dialog/tab-rename-dialog.tsx b/web-console/src/views/workbench-view/tab-rename-dialog/tab-rename-dialog.tsx
new file mode 100644
index 000000000000..c1d9514e651d
--- /dev/null
+++ b/web-console/src/views/workbench-view/tab-rename-dialog/tab-rename-dialog.tsx
@@ -0,0 +1,70 @@
+/*
+ * 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 { Button, Classes, Dialog, FormGroup, InputGroup, Intent } from '@blueprintjs/core';
+import React, { useState } from 'react';
+
+import { useGlobalEventListener } from '../../../hooks';
+
+interface TabRenameDialogProps {
+  initialTabName: string;
+  onSave(newTabName: string): void;
+  onClose(): void;
+}
+
+export const TabRenameDialog = React.memo(function TabRenameDialog(props: TabRenameDialogProps) {
+  const { initialTabName, onSave, onClose } = props;
+
+  const [newTabName, setNewTabName] = useState<string>(initialTabName || '');
+
+  useGlobalEventListener('keydown', (e: KeyboardEvent) => {
+    if (e.key !== 'Enter') return;
+    onSave(newTabName);
+    onClose();
+  });
+
+  return (
+    <Dialog
+      className="tab-rename-dialog"
+      onClose={onClose}
+      isOpen
+      title="Rename tab"
+      canOutsideClickClose={false}
+    >
+      <div className={Classes.DIALOG_BODY}>
+        <FormGroup label="New tab name">
+          <InputGroup value={newTabName} onChange={e => setNewTabName(e.target.value)} autoFocus />
+        </FormGroup>
+      </div>
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button text="Close" onClick={onClose} />
+          <Button
+            text="Save"
+            intent={Intent.PRIMARY}
+            disabled={!newTabName}
+            onClick={() => {
+              onSave(newTabName);
+              onClose();
+            }}
+          />
+        </div>
+      </div>
+    </Dialog>
+  );
+});
diff --git a/web-console/src/views/workbench-view/time-floor-menu-item/time-floor-menu-item.tsx b/web-console/src/views/workbench-view/time-floor-menu-item/time-floor-menu-item.tsx
new file mode 100644
index 000000000000..44948efbd9dd
--- /dev/null
+++ b/web-console/src/views/workbench-view/time-floor-menu-item/time-floor-menu-item.tsx
@@ -0,0 +1,102 @@
+/*
+ * 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 { MenuItem } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import { SqlExpression, SqlFunction, SqlLiteral } from 'druid-query-toolkit';
+import React from 'react';
+
+import { compact, oneOf, tickIcon } from '../../../utils';
+
+const OPTIONS: { label: string; value: string }[] = [
+  { label: 'Second', value: 'PT1S' },
+  { label: 'Minute', value: 'PT1M' },
+  { label: 'Hour', value: 'PT1H' },
+  { label: 'Day', value: 'P1D' },
+  { label: 'Month', value: 'P1M' },
+  { label: 'Year', value: 'P1Y' },
+];
+
+const UNIT_TO_DURATION: Record<string, string> = {
+  SECOND: 'PT1S',
+  MINUTE: 'PT1M',
+  HOUR: 'PT1H',
+  DAY: 'P1D',
+  WEEK: 'P7D',
+  MONTH: 'P1M',
+  QUARTER: 'P3M',
+  YEAR: 'P1Y',
+};
+
+export interface TimeFloorMenuItemProps {
+  expression: SqlExpression;
+  onChange(expression: SqlExpression): void;
+}
+
+export const TimeFloorMenuItem = function TimeFloorMenuItem(props: TimeFloorMenuItemProps) {
+  const { expression, onChange } = props;
+
+  let innerExpression = expression.getUnderlyingExpression();
+  let currentDuration: string | undefined;
+  let origin: SqlExpression | undefined;
+  let timezone: SqlExpression | undefined;
+  if (
+    innerExpression instanceof SqlFunction &&
+    oneOf(innerExpression.getEffectiveFunctionName(), 'TIME_FLOOR', 'FLOOR')
+  ) {
+    const firstArg = innerExpression.getArg(0);
+    const secondArg = innerExpression.getArgAsString(1)?.toUpperCase();
+    origin = innerExpression.getArg(2);
+    timezone = innerExpression.getArg(3);
+    if (firstArg && secondArg) {
+      innerExpression = firstArg;
+      currentDuration = UNIT_TO_DURATION[secondArg] || secondArg;
+    }
+  }
+
+  const changeTimeFloor = (duration: string | undefined) => {
+    onChange(
+      (duration
+        ? SqlFunction.simple(
+            'TIME_FLOOR',
+            compact([innerExpression, SqlLiteral.create(duration), origin, timezone]),
+          )
+        : innerExpression
+      ).as(expression.getOutputName()),
+    );
+  };
+
+  return (
+    <MenuItem icon={IconNames.TIME} text="Floor time">
+      <MenuItem
+        icon={tickIcon(!currentDuration)}
+        text="None"
+        onClick={() => changeTimeFloor(undefined)}
+      />
+      {OPTIONS.map(({ label, value }) => (
+        <MenuItem
+          key={value}
+          icon={tickIcon(currentDuration === value)}
+          text={label}
+          label={value}
+          onClick={() => changeTimeFloor(value)}
+        />
+      ))}
+    </MenuItem>
+  );
+};
diff --git a/web-console/src/views/workbench-view/work-state-store.ts b/web-console/src/views/workbench-view/work-state-store.ts
new file mode 100644
index 000000000000..1c76cb7d7167
--- /dev/null
+++ b/web-console/src/views/workbench-view/work-state-store.ts
@@ -0,0 +1,29 @@
+/*
+ * 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 create, { State } from 'zustand';
+
+interface WorkState extends State {
+  version: number;
+  increment(): void;
+}
+
+export const useWorkStateStore = create<WorkState>(set => ({
+  version: 0,
+  increment: () => set(state => ({ version: state.version + 1 })),
+}));
diff --git a/web-console/src/views/workbench-view/workbench-history-dialog/workbench-history-dialog.scss b/web-console/src/views/workbench-view/workbench-history-dialog/workbench-history-dialog.scss
new file mode 100644
index 000000000000..62b23689c223
--- /dev/null
+++ b/web-console/src/views/workbench-view/workbench-history-dialog/workbench-history-dialog.scss
@@ -0,0 +1,79 @@
+/*
+ * 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 '../../../variables';
+
+.workbench-history-dialog {
+  &.#{$bp-ns}-dialog {
+    width: 90vw;
+    height: 90vh;
+  }
+
+  .version-tabs {
+    height: 100%;
+
+    .#{$bp-ns}-tab-panel {
+      position: relative;
+      flex: 1;
+    }
+
+    .query-entry {
+      position: absolute;
+      top: 0;
+      left: 20px;
+      bottom: 0;
+      right: 0;
+      display: flex;
+      flex-direction: column;
+
+      .query-info-bar {
+        height: 32px;
+        white-space: nowrap;
+
+        & > * {
+          display: inline-block;
+          vertical-align: top;
+          margin-right: 10px;
+        }
+
+        .#{$bp-ns}-switch {
+          margin-top: 3px;
+        }
+      }
+
+      .query-string {
+        flex: 1;
+        resize: none;
+      }
+
+      .execution-stages-pane {
+        flex: 1;
+        max-height: 50%;
+      }
+    }
+  }
+
+  .center-message {
+    height: 400px;
+  }
+}
+
+.json-popover-content {
+  margin: 0;
+  padding: 10px;
+}
diff --git a/web-console/src/views/workbench-view/workbench-history-dialog/workbench-history-dialog.tsx b/web-console/src/views/workbench-view/workbench-history-dialog/workbench-history-dialog.tsx
new file mode 100644
index 000000000000..df105a67f740
--- /dev/null
+++ b/web-console/src/views/workbench-view/workbench-history-dialog/workbench-history-dialog.tsx
@@ -0,0 +1,134 @@
+/*
+ * 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 { Button, Classes, Dialog, Intent, Tab, Tabs } from '@blueprintjs/core';
+import { Popover2 } from '@blueprintjs/popover2';
+import * as JSONBig from 'json-bigint-native';
+import React, { useState } from 'react';
+import AceEditor from 'react-ace';
+
+import { CenterMessage } from '../../../components';
+import { WorkbenchQuery } from '../../../druid-models';
+import {
+  WorkbenchHistory,
+  WorkbenchQueryHistoryEntry,
+} from '../../../singletons/workbench-history';
+import { pluralIfNeeded } from '../../../utils';
+
+import './workbench-history-dialog.scss';
+
+export interface WorkbenchHistoryDialogProps {
+  onSelectQuery(query: WorkbenchQuery): void;
+  onClose(): void;
+}
+
+export const WorkbenchHistoryDialog = React.memo(function WorkbenchHistoryDialog(
+  props: WorkbenchHistoryDialogProps,
+) {
+  const { onSelectQuery, onClose } = props;
+  const [activeTab, setActiveTab] = useState(0);
+  const [queryRecords] = useState(() => WorkbenchHistory.getHistory());
+
+  function handleSelect() {
+    const queryRecord = queryRecords[activeTab];
+    onSelectQuery(queryRecord.query);
+    onClose();
+  }
+
+  function renderQueryEntry(record: WorkbenchQueryHistoryEntry) {
+    const queryString = record.query.getQueryString();
+    const jsonMode = queryString.trim().startsWith('{');
+
+    return (
+      <div className="query-entry">
+        <div className="query-info-bar">
+          <Popover2
+            content={
+              <pre className="json-popover-content">
+                {JSONBig.stringify(record.query.queryContext, undefined, 2)}
+              </pre>
+            }
+          >
+            <Button
+              text={`Context: ${pluralIfNeeded(
+                Object.keys(record.query.queryContext).length,
+                'key',
+              )}`}
+              minimal
+              small
+            />
+          </Popover2>
+        </div>
+        <AceEditor
+          mode={jsonMode ? 'hjson' : 'dsql'}
+          theme="solarized_dark"
+          className="query-string"
+          name="ace-editor"
+          fontSize={13}
+          width="100%"
+          showGutter
+          showPrintMargin={false}
+          value={queryString}
+          readOnly
+        />
+      </div>
+    );
+  }
+
+  function renderContent(): JSX.Element {
+    if (!queryRecords.length) {
+      return <CenterMessage>The query history is empty.</CenterMessage>;
+    }
+
+    return (
+      <Tabs
+        className="version-tabs"
+        animate
+        renderActiveTabPanelOnly
+        vertical
+        selectedTabId={activeTab}
+        onChange={(t: number) => setActiveTab(t)}
+      >
+        {queryRecords.map((record, index) => (
+          <Tab
+            id={index}
+            key={index}
+            title={record.version}
+            panel={renderQueryEntry(record)}
+            panelClassName="panel"
+          />
+        ))}
+        <Tabs.Expander />
+      </Tabs>
+    );
+  }
+
+  return (
+    <Dialog className="workbench-history-dialog" isOpen onClose={onClose} title="Query history">
+      <div className={Classes.DIALOG_BODY}>{renderContent()}</div>
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button text="Close" onClick={onClose} />
+          {Boolean(queryRecords.length) && (
+            <Button text="Open in new tab" intent={Intent.PRIMARY} onClick={handleSelect} />
+          )}
+        </div>
+      </div>
+    </Dialog>
+  );
+});
diff --git a/web-console/src/views/workbench-view/workbench-view.scss b/web-console/src/views/workbench-view/workbench-view.scss
new file mode 100644
index 000000000000..10c6ca56e657
--- /dev/null
+++ b/web-console/src/views/workbench-view/workbench-view.scss
@@ -0,0 +1,122 @@
+/*
+ * 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 '../../variables';
+
+$column-tree-width: 250px;
+$recent-query-task-panel-width: 250px;
+
+.workbench-view {
+  height: 100%;
+  width: 100%;
+
+  .column-tree {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: $column-tree-width;
+    @include card-like;
+  }
+
+  .recent-query-task-panel {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    width: $recent-query-task-panel-width;
+  }
+
+  .center-panel {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: $column-tree-width + $thin-padding;
+    right: $recent-query-task-panel-width + $thin-padding;
+
+    .tab-and-tool-bar {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+      gap: 10px;
+
+      .tab-bar {
+        flex: 1;
+        white-space: nowrap;
+        overflow: auto;
+
+        .tab-button {
+          display: inline-block;
+
+          &.active {
+            @include card-like;
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+            border-bottom: 2px solid #a1a6ba;
+          }
+
+          .tab-name .#{$bp-ns}-button-text {
+            max-width: 220px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            line-height: 150%;
+          }
+
+          .tab-close {
+            opacity: 0;
+            margin: 0 3px;
+          }
+
+          &.active,
+          &:hover {
+            .tab-close {
+              opacity: 1;
+            }
+          }
+        }
+
+        .add-tab {
+          display: inline-block;
+          vertical-align: top;
+          padding: 6px 14px;
+          margin-left: 4px;
+        }
+      }
+    }
+
+    .query-tab {
+      position: absolute;
+      width: 100%;
+      top: 32px;
+      bottom: 0;
+      overflow: auto;
+    }
+  }
+
+  &.hide-column-tree .center-panel {
+    left: 0;
+  }
+
+  &.hide-work-history .center-panel {
+    right: 0;
+  }
+}
diff --git a/web-console/src/views/workbench-view/workbench-view.tsx b/web-console/src/views/workbench-view/workbench-view.tsx
new file mode 100644
index 000000000000..afd3abdc44fe
--- /dev/null
+++ b/web-console/src/views/workbench-view/workbench-view.tsx
@@ -0,0 +1,805 @@
+/*
+ * 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 { Button, ButtonGroup, Intent, Menu, MenuDivider, MenuItem } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
+import classNames from 'classnames';
+import copy from 'copy-to-clipboard';
+import { SqlQuery } from 'druid-query-toolkit';
+import React from 'react';
+
+import { SpecDialog, StringInputDialog } from '../../dialogs';
+import {
+  DruidEngine,
+  Execution,
+  guessDataSourceNameFromInputSource,
+  QueryWithContext,
+  TabEntry,
+  WorkbenchQuery,
+} from '../../druid-models';
+import { convertSpecToSql, getSpecDatasourceName, getTaskExecution } from '../../helpers';
+import { getLink } from '../../links';
+import { AppToaster } from '../../singletons';
+import { AceEditorStateCache } from '../../singletons/ace-editor-state-cache';
+import { ExecutionStateCache } from '../../singletons/execution-state-cache';
+import { WorkbenchRunningPromises } from '../../singletons/workbench-running-promises';
+import {
+  ColumnMetadata,
+  deepSet,
+  generate8HexId,
+  localStorageGet,
+  localStorageGetJson,
+  LocalStorageKeys,
+  localStorageSet,
+  localStorageSetJson,
+  queryDruidSql,
+  QueryManager,
+  QueryState,
+} from '../../utils';
+import { ColumnTree } from '../query-view/column-tree/column-tree';
+import { ExplainDialog } from '../query-view/explain-dialog/explain-dialog';
+
+import { ConnectExternalDataDialog } from './connect-external-data-dialog/connect-external-data-dialog';
+import { getDemoQueries } from './demo-queries';
+import { ExecutionDetailsDialog } from './execution-details-dialog/execution-details-dialog';
+import { ExecutionDetailsTab } from './execution-details-pane/execution-details-pane';
+import { ExecutionSubmitDialog } from './execution-submit-dialog/execution-submit-dialog';
+import { MetadataChangeDetector } from './metadata-change-detector';
+import { QueryTab } from './query-tab/query-tab';
+import { RecentQueryTaskPanel } from './recent-query-task-panel/recent-query-task-panel';
+import { TabRenameDialog } from './tab-rename-dialog/tab-rename-dialog';
+import { WorkbenchHistoryDialog } from './workbench-history-dialog/workbench-history-dialog';
+
+import './workbench-view.scss';
+
+function cleanupTabEntry(tabEntry: TabEntry): void {
+  const discardedIds = tabEntry.query.getIds();
+  WorkbenchRunningPromises.deletePromises(discardedIds);
+  ExecutionStateCache.deleteStates(discardedIds);
+  AceEditorStateCache.deleteStates(discardedIds);
+}
+
+function externalDataTabId(tabId: string | undefined): boolean {
+  return String(tabId).startsWith('connect-external-data');
+}
+
+export interface WorkbenchViewProps {
+  tabId: string | undefined;
+  onTabChange(newTabId: string): void;
+  initQueryWithContext: QueryWithContext | undefined;
+  defaultQueryContext?: Record<string, any>;
+  mandatoryQueryContext?: Record<string, any>;
+  queryEngines: DruidEngine[];
+  allowExplain: boolean;
+  goToIngestion(taskId: string): void;
+}
+
+export interface WorkbenchViewState {
+  tabEntries: TabEntry[];
+
+  columnMetadataState: QueryState<readonly ColumnMetadata[]>;
+
+  details?: { id: string; initTab?: ExecutionDetailsTab; initExecution?: Execution };
+
+  defaultSchema?: string;
+  defaultTable?: string;
+
+  connectExternalDataDialogOpen: boolean;
+  explainDialogOpen: boolean;
+  historyDialogOpen: boolean;
+  specDialogOpen: boolean;
+  executionSubmitDialogOpen: boolean;
+  taskIdSubmitDialogOpen: boolean;
+  renamingTab?: TabEntry;
+
+  showRecentQueryTaskPanel: boolean;
+}
+
+export class WorkbenchView extends React.PureComponent<WorkbenchViewProps, WorkbenchViewState> {
+  private metadataQueryManager: QueryManager<null, ColumnMetadata[]> | undefined;
+
+  constructor(props: WorkbenchViewProps) {
+    super(props);
+    const { queryEngines, initQueryWithContext } = props;
+
+    const possibleTabEntries: TabEntry[] = localStorageGetJson(LocalStorageKeys.WORKBENCH_QUERIES);
+
+    WorkbenchQuery.setQueryEngines(queryEngines);
+
+    const hasSqlTask = queryEngines.includes('sql-msq-task');
+    const showRecentQueryTaskPanel = Boolean(
+      hasSqlTask && localStorageGetJson(LocalStorageKeys.WORKBENCH_TASK_PANEL),
+    );
+
+    const tabEntries =
+      Array.isArray(possibleTabEntries) && possibleTabEntries.length
+        ? possibleTabEntries.map(q => ({ ...q, query: new WorkbenchQuery(q.query) }))
+        : [];
+
+    if (initQueryWithContext) {
+      // Put it in the front so that it is the opened tab
+      tabEntries.unshift({
+        id: generate8HexId(),
+        tabName: 'Opened query',
+        query: WorkbenchQuery.blank()
+          .changeQueryString(initQueryWithContext.queryString)
+          .changeQueryContext(initQueryWithContext.queryContext || props.defaultQueryContext || {}),
+      });
+    }
+
+    if (!tabEntries.length) {
+      tabEntries.push(this.getInitTab());
+    }
+
+    this.state = {
+      tabEntries,
+      columnMetadataState: QueryState.INIT,
+
+      connectExternalDataDialogOpen: externalDataTabId(props.tabId) && hasSqlTask,
+      explainDialogOpen: false,
+      historyDialogOpen: false,
+      specDialogOpen: false,
+      executionSubmitDialogOpen: false,
+      taskIdSubmitDialogOpen: false,
+
+      showRecentQueryTaskPanel,
+    };
+  }
+
+  componentDidMount(): void {
+    this.metadataQueryManager = new QueryManager({
+      processQuery: async () => {
+        return await queryDruidSql<ColumnMetadata>({
+          query: `SELECT TABLE_SCHEMA, TABLE_NAME, COLUMN_NAME, DATA_TYPE FROM INFORMATION_SCHEMA.COLUMNS`,
+        });
+      },
+      onStateChange: columnMetadataState => {
+        if (columnMetadataState.error) {
+          AppToaster.show({
+            message: 'Could not load SQL metadata',
+            intent: Intent.DANGER,
+          });
+        }
+        this.setState({
+          columnMetadataState,
+        });
+      },
+    });
+
+    this.metadataQueryManager.runQuery(null);
+  }
+
+  componentWillUnmount(): void {
+    this.metadataQueryManager?.terminate();
+  }
+
+  componentDidUpdate(prevProps: Readonly<WorkbenchViewProps>) {
+    const tabId = this.props.tabId;
+    if (
+      prevProps.tabId !== tabId &&
+      externalDataTabId(tabId) &&
+      WorkbenchQuery.getQueryEngines().includes('sql-msq-task')
+    ) {
+      this.setState({ connectExternalDataDialogOpen: true });
+    }
+  }
+
+  private readonly openExplainDialog = () => {
+    this.setState({ explainDialogOpen: true });
+  };
+
+  private readonly openHistoryDialog = () => {
+    this.setState({ historyDialogOpen: true });
+  };
+
+  private readonly openSpecDialog = () => {
+    this.setState({ specDialogOpen: true });
+  };
+
+  private readonly openExecutionSubmitDialog = () => {
+    this.setState({ executionSubmitDialogOpen: true });
+  };
+
+  private readonly openTaskIdSubmitDialog = () => {
+    this.setState({ taskIdSubmitDialogOpen: true });
+  };
+
+  private readonly handleRecentQueryTaskPanelClose = () => {
+    this.setState({ showRecentQueryTaskPanel: false });
+    localStorageSetJson(LocalStorageKeys.WORKBENCH_TASK_PANEL, false);
+  };
+
+  private readonly handleDetails = (id: string, initTab?: ExecutionDetailsTab) => {
+    this.setState({
+      details: { id, initTab },
+    });
+  };
+
+  private getInitTab(): TabEntry {
+    return {
+      id: generate8HexId(),
+      tabName: 'Tab 1',
+      query: WorkbenchQuery.blank().changeQueryContext(this.props.defaultQueryContext || {}),
+    };
+  }
+
+  private getTabId(): string | undefined {
+    const { tabId, initQueryWithContext } = this.props;
+    if (tabId) return tabId;
+    if (initQueryWithContext) return; // If initialized from a query go to the first tab, forget about the last opened tab
+    return localStorageGet(LocalStorageKeys.WORKBENCH_LAST_TAB);
+  }
+
+  private getCurrentTabEntry() {
+    const { tabEntries } = this.state;
+    const tabId = this.getTabId();
+    return tabEntries.find(({ id }) => id === tabId) || tabEntries[0];
+  }
+
+  private getCurrentQuery() {
+    return this.getCurrentTabEntry().query;
+  }
+
+  private renderExecutionDetailsDialog() {
+    const { goToIngestion } = this.props;
+    const { details } = this.state;
+    if (!details) return;
+
+    return (
+      <ExecutionDetailsDialog
+        id={details.id}
+        initTab={details.initTab}
+        initExecution={details.initExecution}
+        goToIngestion={goToIngestion}
+        onClose={() => this.setState({ details: undefined })}
+      />
+    );
+  }
+
+  private renderExplainDialog() {
+    const { queryEngines } = this.props;
+    const { explainDialogOpen } = this.state;
+    if (!explainDialogOpen) return;
+
+    const query = this.getCurrentQuery();
+
+    const { engine, query: apiQuery } = query.getApiQuery();
+    if (typeof apiQuery.query !== 'string') return;
+
+    return (
+      <ExplainDialog
+        queryWithContext={{
+          engine,
+          queryString: apiQuery.query,
+          queryContext: apiQuery.context,
+        }}
+        mandatoryQueryContext={{}}
+        onClose={() => {
+          this.setState({ explainDialogOpen: false });
+        }}
+        openQueryLabel={
+          engine === 'sql-native' && queryEngines.includes('native') ? 'Open in new tab' : undefined
+        }
+        onOpenQuery={queryString => {
+          this.handleNewTab(
+            WorkbenchQuery.blank().changeQueryString(queryString),
+            'Explained query',
+          );
+        }}
+      />
+    );
+  }
+
+  private renderHistoryDialog() {
+    const { historyDialogOpen } = this.state;
+    if (!historyDialogOpen) return;
+
+    return (
+      <WorkbenchHistoryDialog
+        onSelectQuery={query => this.handleNewTab(query, 'Query from history')}
+        onClose={() => this.setState({ historyDialogOpen: false })}
+      />
+    );
+  }
+
+  private renderConnectExternalDataDialog() {
+    const { connectExternalDataDialogOpen } = this.state;
+    if (!connectExternalDataDialogOpen) return;
+
+    return (
+      <ConnectExternalDataDialog
+        onSetExternalConfig={(externalConfig, isArrays, timeExpression) => {
+          this.handleNewTab(
+            WorkbenchQuery.fromInitExternalConfig(externalConfig, isArrays, timeExpression),
+            'Ext ' + guessDataSourceNameFromInputSource(externalConfig.inputSource),
+          );
+        }}
+        onClose={() => {
+          this.setState({ connectExternalDataDialogOpen: false });
+        }}
+      />
+    );
+  }
+
+  private renderTabRenameDialog() {
+    const { renamingTab } = this.state;
+    if (!renamingTab) return;
+
+    return (
+      <TabRenameDialog
+        initialTabName={renamingTab.tabName}
+        onSave={newTabName => {
+          const { tabEntries } = this.state;
+          if (!renamingTab) return;
+          this.handleQueriesChange(
+            tabEntries.map(tabEntry =>
+              tabEntry.id === renamingTab.id ? { ...renamingTab, tabName: newTabName } : tabEntry,
+            ),
+          );
+        }}
+        onClose={() => this.setState({ renamingTab: undefined })}
+      />
+    );
+  }
+
+  private renderSpecDialog() {
+    const { specDialogOpen } = this.state;
+    if (!specDialogOpen) return;
+
+    return (
+      <SpecDialog
+        onSubmit={spec => {
+          let converted: QueryWithContext;
+          try {
+            converted = convertSpecToSql(spec as any);
+          } catch (e) {
+            AppToaster.show({
+              message: `Could not convert spec: ${e.message}`,
+              intent: Intent.DANGER,
+            });
+            return;
+          }
+
+          AppToaster.show({
+            message: `Spec converted, please double check`,
+            intent: Intent.SUCCESS,
+          });
+          this.handleNewTab(
+            WorkbenchQuery.blank()
+              .changeQueryString(converted.queryString)
+              .changeQueryContext(converted.queryContext || {}),
+            'Convert ' + getSpecDatasourceName(spec as any),
+          );
+        }}
+        onClose={() => this.setState({ specDialogOpen: false })}
+        title="Ingestion spec to convert"
+      />
+    );
+  }
+
+  private renderExecutionSubmit() {
+    const { executionSubmitDialogOpen } = this.state;
+    if (!executionSubmitDialogOpen) return;
+
+    return (
+      <ExecutionSubmitDialog
+        onSubmit={execution => {
+          this.setState({
+            details: {
+              id: execution.id,
+              initExecution: execution,
+            },
+          });
+        }}
+        onClose={() => this.setState({ executionSubmitDialogOpen: false })}
+      />
+    );
+  }
+
+  private renderTaskIdSubmit() {
+    const { taskIdSubmitDialogOpen } = this.state;
+    if (!taskIdSubmitDialogOpen) return;
+
+    return (
+      <StringInputDialog
+        title="Enter task ID"
+        placeholder="taskId"
+        onSubmit={async taskId => {
+          let execution: Execution;
+          try {
+            execution = await getTaskExecution(taskId);
+          } catch {
+            AppToaster.show({
+              message: 'Could not get task report or payload',
+              intent: Intent.DANGER,
+            });
+            return;
+          }
+
+          if (!execution.sqlQuery || !execution.queryContext) {
+            AppToaster.show({
+              message: 'Could not get query',
+              intent: Intent.DANGER,
+            });
+            return;
+          }
+
+          this.handleNewTab(
+            WorkbenchQuery.fromEffectiveQueryAndContext(
+              execution.sqlQuery,
+              execution.queryContext,
+            ).changeLastExecution({ engine: 'sql-msq-task', id: taskId }),
+            taskId,
+          );
+        }}
+        onClose={() => this.setState({ taskIdSubmitDialogOpen: false })}
+      />
+    );
+  }
+
+  private renderTabBar() {
+    const { onTabChange } = this.props;
+    const { tabEntries } = this.state;
+    const currentTabEntry = this.getCurrentTabEntry();
+
+    return (
+      <div className="tab-bar">
+        {tabEntries.map((tabEntry, i) => {
+          const currentId = tabEntry.id;
+          const active = currentTabEntry === tabEntry;
+          return (
+            <div key={i} className={classNames('tab-button', { active })}>
+              {active ? (
+                <Popover2
+                  position="bottom"
+                  content={
+                    <Menu>
+                      <MenuItem
+                        icon={IconNames.EDIT}
+                        text="Rename tab"
+                        onClick={() => this.setState({ renamingTab: tabEntry })}
+                      />
+                      <MenuItem
+                        icon={IconNames.CLIPBOARD}
+                        text="Copy tab"
+                        onClick={() => {
+                          copy(currentTabEntry.query.toString(), { format: 'text/plain' });
+                          AppToaster.show({
+                            message: `Tab '${currentTabEntry.tabName}' copied to clipboard.`,
+                            intent: Intent.SUCCESS,
+                          });
+                        }}
+                      />
+                      <MenuItem
+                        icon={IconNames.DUPLICATE}
+                        text="Duplicate tab"
+                        onClick={() => {
+                          const id = generate8HexId();
+                          const newTabEntry: TabEntry = {
+                            id,
+                            tabName: tabEntry.tabName + ' (copy)',
+                            query: tabEntry.query.duplicate(),
+                          };
+                          this.handleQueriesChange(
+                            tabEntries.slice(0, i + 1).concat(newTabEntry, tabEntries.slice(i + 1)),
+                            () => {
+                              onTabChange(newTabEntry.id);
+                            },
+                          );
+                        }}
+                      />
+                      {tabEntries.length > 1 && (
+                        <MenuItem
+                          icon={IconNames.CROSS}
+                          text="Close other tabs"
+                          intent={Intent.DANGER}
+                          onClick={() => {
+                            tabEntries.forEach(tabEntry => {
+                              if (tabEntry.id === currentId) return;
+                              cleanupTabEntry(tabEntry);
+                            });
+                            this.handleQueriesChange(
+                              tabEntries.filter(({ id }) => id === currentId),
+                              () => {
+                                if (!active) return;
+                                onTabChange(tabEntry.id);
+                              },
+                            );
+                          }}
+                        />
+                      )}
+                      <MenuItem
+                        icon={IconNames.CROSS}
+                        text="Close all tabs"
+                        intent={Intent.DANGER}
+                        onClick={() => {
+                          tabEntries.forEach(cleanupTabEntry);
+                          this.handleQueriesChange([], () => {
+                            onTabChange(this.state.tabEntries[0].id);
+                          });
+                        }}
+                      />
+                    </Menu>
+                  }
+                >
+                  <Button
+                    className="tab-name"
+                    text={tabEntry.tabName}
+                    title={tabEntry.tabName}
+                    minimal
+                    onDoubleClick={() => this.setState({ renamingTab: tabEntry })}
+                  />
+                </Popover2>
+              ) : (
+                <Button
+                  className="tab-name"
+                  text={tabEntry.tabName}
+                  title={tabEntry.tabName}
+                  minimal
+                  onClick={() => {
+                    localStorageSet(LocalStorageKeys.WORKBENCH_LAST_TAB, currentId);
+                    onTabChange(currentId);
+                  }}
+                />
+              )}
+              <Button
+                className="tab-close"
+                icon={IconNames.CROSS}
+                title={`Close tab '${tabEntry.tabName}`}
+                small
+                minimal
+                onClick={() => {
+                  cleanupTabEntry(tabEntry);
+                  this.handleQueriesChange(
+                    tabEntries.filter(({ id }) => id !== currentId),
+                    () => {
+                      if (!active) return;
+                      onTabChange(this.state.tabEntries[Math.max(0, i - 1)].id);
+                    },
+                  );
+                }}
+              />
+            </div>
+          );
+        })}
+        <Button
+          className="add-tab"
+          icon={IconNames.PLUS}
+          minimal
+          onClick={() => {
+            this.handleNewTab(WorkbenchQuery.blank());
+          }}
+        />
+      </div>
+    );
+  }
+
+  private renderToolbar() {
+    const { queryEngines } = this.props;
+    if (!queryEngines.includes('sql-msq-task')) return;
+
+    const { showRecentQueryTaskPanel } = this.state;
+    return (
+      <ButtonGroup className="toolbar">
+        <Button
+          icon={IconNames.TH_DERIVED}
+          text="Connect external data"
+          onClick={() => {
+            this.setState({
+              connectExternalDataDialogOpen: true,
+            });
+          }}
+          minimal
+        />
+        {!showRecentQueryTaskPanel && (
+          <Button
+            icon={IconNames.DRAWER_RIGHT}
+            minimal
+            title="Show recent query task panel"
+            onClick={() => {
+              this.setState({ showRecentQueryTaskPanel: true });
+              localStorageSetJson(LocalStorageKeys.WORKBENCH_TASK_PANEL, true);
+            }}
+          />
+        )}
+      </ButtonGroup>
+    );
+  }
+
+  private renderCenterPanel() {
+    const { mandatoryQueryContext, queryEngines, allowExplain, goToIngestion } = this.props;
+    const { columnMetadataState } = this.state;
+    const currentTabEntry = this.getCurrentTabEntry();
+
+    return (
+      <div className="center-panel">
+        <div className="tab-and-tool-bar">
+          {this.renderTabBar()}
+          {this.renderToolbar()}
+        </div>
+        <QueryTab
+          key={currentTabEntry.id}
+          query={currentTabEntry.query}
+          mandatoryQueryContext={mandatoryQueryContext}
+          columnMetadata={columnMetadataState.getSomeData()}
+          onQueryChange={this.handleQueryChange}
+          onQueryTab={this.handleNewTab}
+          onDetails={this.handleDetails}
+          queryEngines={queryEngines}
+          goToIngestion={goToIngestion}
+          runMoreMenu={
+            <Menu>
+              {allowExplain && (
+                <MenuItem
+                  icon={IconNames.CLEAN}
+                  text="Explain SQL query"
+                  onClick={this.openExplainDialog}
+                />
+              )}
+              <MenuItem
+                icon={IconNames.HISTORY}
+                text="Query history"
+                onClick={this.openHistoryDialog}
+              />
+              {currentTabEntry.query.canPrettify() && (
+                <MenuItem
+                  icon={IconNames.ALIGN_LEFT}
+                  text="Prettify query"
+                  onClick={() => this.handleQueryChange(currentTabEntry.query.prettify())}
+                />
+              )}
+              {queryEngines.includes('sql-msq-task') && (
+                <>
+                  <MenuItem
+                    icon={IconNames.TEXT_HIGHLIGHT}
+                    text="Convert ingestion spec to SQL"
+                    onClick={this.openSpecDialog}
+                  />
+                  <MenuItem
+                    icon={IconNames.DOCUMENT_OPEN}
+                    text="Attach tab from task ID"
+                    onClick={this.openTaskIdSubmitDialog}
+                  />
+                  <MenuItem
+                    icon={IconNames.UNARCHIVE}
+                    text="Open query detail archive"
+                    onClick={this.openExecutionSubmitDialog}
+                  />
+                </>
+              )}
+              <MenuDivider />
+              <MenuItem
+                icon={IconNames.HELP}
+                text="DruidSQL documentation"
+                href={getLink('DOCS_SQL')}
+                target="_blank"
+              />
+              {queryEngines.includes('sql-msq-task') && (
+                <MenuItem
+                  icon={IconNames.ROCKET_SLANT}
+                  text="Load demo queries"
+                  label="(replaces current tabs)"
+                  onClick={() => this.handleQueriesChange(getDemoQueries())}
+                />
+              )}
+            </Menu>
+          }
+        />
+      </div>
+    );
+  }
+
+  private readonly handleQueriesChange = (tabEntries: TabEntry[], callback?: () => void) => {
+    if (!tabEntries.length) {
+      tabEntries.push(this.getInitTab());
+    }
+    localStorageSetJson(LocalStorageKeys.WORKBENCH_QUERIES, tabEntries);
+    this.setState({ tabEntries }, callback);
+  };
+
+  private readonly handleQueryChange = (newQuery: WorkbenchQuery) => {
+    const { tabEntries } = this.state;
+    const tabId = this.getTabId();
+    const tabIndex = Math.max(
+      tabEntries.findIndex(({ id }) => id === tabId),
+      0,
+    );
+    const newQueries = deepSet(tabEntries, `${tabIndex}.query`, newQuery);
+    this.handleQueriesChange(newQueries);
+  };
+
+  private readonly handleQueryStringChange = (queryString: string): void => {
+    this.handleQueryChange(this.getCurrentQuery().changeQueryString(queryString));
+  };
+
+  private readonly handleSqlQueryChange = (sqlQuery: SqlQuery): void => {
+    this.handleQueryStringChange(sqlQuery.toString());
+  };
+
+  private readonly getParsedQuery = () => {
+    return this.getCurrentQuery().getParsedQuery();
+  };
+
+  private readonly handleNewTab = (query: WorkbenchQuery, tabName?: string) => {
+    const { onTabChange } = this.props;
+    const { tabEntries } = this.state;
+    const id = generate8HexId();
+    const newTabEntry: TabEntry = {
+      id,
+      tabName: tabName || `Tab ${tabEntries.length + 1}`,
+      query,
+    };
+    this.handleQueriesChange(tabEntries.concat(newTabEntry), () => {
+      onTabChange(newTabEntry.id);
+    });
+  };
+
+  render(): JSX.Element {
+    const { queryEngines } = this.props;
+    const { columnMetadataState, showRecentQueryTaskPanel } = this.state;
+    const query = this.getCurrentQuery();
+
+    let defaultSchema;
+    let defaultTable;
+    const parsedQuery = query.getParsedQuery();
+    if (parsedQuery) {
+      defaultSchema = parsedQuery.getFirstSchema();
+      defaultTable = parsedQuery.getFirstTableName();
+    }
+
+    return (
+      <div
+        className={classNames('workbench-view app-view', {
+          'hide-column-tree': columnMetadataState.isError(),
+          'hide-work-history': !showRecentQueryTaskPanel,
+        })}
+      >
+        {!columnMetadataState.isError() && (
+          <ColumnTree
+            getParsedQuery={this.getParsedQuery}
+            columnMetadataLoading={columnMetadataState.loading}
+            columnMetadata={columnMetadataState.data}
+            onQueryChange={this.handleSqlQueryChange}
+            defaultSchema={defaultSchema ? defaultSchema : 'druid'}
+            defaultTable={defaultTable}
+            highlightTable={undefined}
+          />
+        )}
+        {this.renderCenterPanel()}
+        {showRecentQueryTaskPanel && queryEngines.includes('sql-msq-task') && (
+          <RecentQueryTaskPanel
+            onClose={this.handleRecentQueryTaskPanelClose}
+            onExecutionDetails={this.handleDetails}
+            onChangeQuery={this.handleQueryStringChange}
+            onNewTab={this.handleNewTab}
+          />
+        )}
+        {this.renderExecutionDetailsDialog()}
+        {this.renderExplainDialog()}
+        {this.renderHistoryDialog()}
+        {this.renderConnectExternalDataDialog()}
+        {this.renderTabRenameDialog()}
+        {this.renderSpecDialog()}
+        {this.renderExecutionSubmit()}
+        {this.renderTaskIdSubmit()}
+        <MetadataChangeDetector onChange={() => this.metadataQueryManager?.runQuery(null)} />
+      </div>
+    );
+  }
+}