This is an automated email from the ASF dual-hosted git repository.

karan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/druid.git


The following commit(s) were added to refs/heads/master by this push:
     new 9f473028a8b Web console: switch to using AbortSignal (#18485)
9f473028a8b is described below

commit 9f473028a8b7de054432b66587916b9e7659dca2
Author: Vadim Ogievetsky <[email protected]>
AuthorDate: Thu Sep 11 08:14:08 2025 +0100

    Web console: switch to using AbortSignal (#18485)
    
    * switch to using AbortSignal
    
    * clean up licenses
    
    * ignore delete failure like before
---
 licenses.yaml                                      |  2 +-
 licenses/bin/@flatten-js-interval-tree.MIT         | 21 ++++++++++
 licenses/bin/@types-react-table.MIT                | 21 ++++++++++
 licenses/bin/d3-dsv.ISC                            | 13 ++++++
 licenses/bin/d3-path.ISC                           | 13 ++++++
 licenses/bin/d3-shape.ISC                          | 13 ++++++
 licenses/bin/d3-time-format.ISC                    | 13 ++++++
 licenses/bin/es-errors.MIT                         | 21 ++++++++++
 licenses/bin/es-set-tostringtag.MIT                | 21 ++++++++++
 licenses/bin/has-proto.MIT                         | 21 ++++++++++
 licenses/bin/hasown.MIT                            | 21 ++++++++++
 licenses/bin/markdown-table-ts.MIT                 | 21 ++++++++++
 licenses/bin/moment-timezone.MIT                   | 20 ---------
 licenses/bin/moment.MIT                            | 22 ----------
 licenses/bin/picocolors.ISC                        | 15 +++++++
 licenses/bin/webpack.MIT                           | 20 ---------
 web-console/package-lock.json                      | 17 ++++----
 web-console/package.json                           |  2 +-
 .../segment-timeline/segment-bar-chart.tsx         | 10 ++---
 .../segment-timeline/segment-timeline.tsx          | 12 +++---
 web-console/src/components/show-json/show-json.tsx |  4 +-
 web-console/src/components/show-log/show-log.tsx   |  4 +-
 .../supervisor-history-panel.tsx                   |  4 +-
 .../compaction-dynamic-config-dialog.tsx           |  4 +-
 .../compaction-history-dialog.tsx                  |  4 +-
 .../coordinator-dynamic-config-dialog.tsx          |  8 ++--
 .../datasource-columns-table.tsx                   |  4 +-
 .../datasource-preview-pane.tsx                    |  4 +-
 .../lookup-values-table/lookup-values-table.tsx    |  4 +-
 .../overlord-dynamic-config-dialog.tsx             |  8 ++--
 .../dialogs/retention-dialog/retention-dialog.tsx  | 10 ++---
 .../segments-preview-pane.tsx                      |  4 +-
 .../src/dialogs/status-dialog/status-dialog.tsx    |  4 +-
 .../supervisor-reset-offsets-dialog.tsx            |  4 +-
 .../supervisor-statistics-table.tsx                |  4 +-
 web-console/src/entry.tsx                          |  4 +-
 web-console/src/helpers/execution/general.ts       |  9 ++--
 .../src/helpers/execution/sql-task-execution.ts    | 48 +++++++++++-----------
 web-console/src/utils/druid-query.ts               | 18 ++++----
 .../src/utils/query-manager/query-manager.ts       | 29 +++++++------
 .../query-manager/result-with-auxiliary-work.ts    |  4 +-
 web-console/src/utils/sampler.ts                   |  5 +--
 .../views/datasources-view/datasources-view.tsx    | 29 ++++++-------
 .../contains-filter-control.tsx                    |  7 ++--
 .../filter-pane/filter-menu/filter-menu.tsx        |  3 +-
 .../regexp-filter-control.tsx                      |  7 ++--
 .../values-filter-control.tsx                      |  7 ++--
 .../components/filter-pane/filter-pane.tsx         |  7 ++--
 .../components/helper-table/helper-table.tsx       |  7 ++--
 .../src/views/explore-view/explore-view.tsx        | 23 +++++------
 .../module-repository/module-repository.ts         |  3 +-
 .../modules/bar-chart-module/bar-chart-module.tsx  |  4 +-
 .../grouping-table-module.tsx                      |  4 +-
 .../multi-axis-chart-module.tsx                    |  4 +-
 .../modules/pie-chart-module/pie-chart-module.tsx  |  7 +---
 .../time-chart-module/time-chart-module.tsx        |  8 ++--
 .../datasources-card/datasources-card.tsx          |  6 +--
 .../views/home-view/lookups-card/lookups-card.tsx  |  4 +-
 .../home-view/segments-card/segments-card.tsx      |  8 ++--
 .../home-view/services-card/services-card.tsx      |  8 ++--
 .../views/home-view/status-card/status-card.tsx    |  4 +-
 .../supervisors-card/supervisors-card.tsx          |  6 +--
 .../src/views/home-view/tasks-card/tasks-card.tsx  | 14 +++----
 .../src/views/lookups-view/lookups-view.tsx        |  6 +--
 .../src/views/segments-view/segments-view.tsx      | 15 +++----
 .../src/views/services-view/services-view.tsx      | 14 +++----
 .../ingestion-progress-dialog.tsx                  |  4 +-
 .../rollup-analysis-pane/rollup-analysis-pane.tsx  |  9 ++--
 .../schema-step/schema-step.tsx                    | 14 +++----
 .../views/supervisors-view/supervisors-view.tsx    | 18 ++++----
 web-console/src/views/tasks-view/tasks-view.tsx    |  6 +--
 .../current-dart-panel/current-dart-panel.tsx      |  4 +-
 .../execution-details-pane-loader.tsx              |  4 +-
 .../execution-stages-pane-loader.tsx               |  4 +-
 .../explain-dialog/explain-dialog.tsx              |  6 +--
 .../input-format-step/input-format-step.tsx        |  4 +-
 .../input-source-step/input-source-step.tsx        |  8 ++--
 .../views/workbench-view/query-tab/query-tab.tsx   | 45 ++++++++++----------
 .../recent-query-task-panel.tsx                    |  4 +-
 .../src/views/workbench-view/workbench-view.tsx    |  4 +-
 80 files changed, 487 insertions(+), 362 deletions(-)

diff --git a/licenses.yaml b/licenses.yaml
index d8847d90105..16290f16f13 100644
--- a/licenses.yaml
+++ b/licenses.yaml
@@ -5844,7 +5844,7 @@ license_category: binary
 module: web-console
 license_name: Apache License version 2.0
 copyright: Imply Data
-version: 1.1.5
+version: 1.2.0
 
 ---
 
diff --git a/licenses/bin/@flatten-js-interval-tree.MIT 
b/licenses/bin/@flatten-js-interval-tree.MIT
new file mode 100644
index 00000000000..29cea18e923
--- /dev/null
+++ b/licenses/bin/@flatten-js-interval-tree.MIT
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 alexbol99
+
+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/licenses/bin/@types-react-table.MIT 
b/licenses/bin/@types-react-table.MIT
new file mode 100644
index 00000000000..4b1ad51b2f0
--- /dev/null
+++ b/licenses/bin/@types-react-table.MIT
@@ -0,0 +1,21 @@
+    MIT License
+
+    Copyright (c) Microsoft Corporation. All rights reserved.
+
+    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/licenses/bin/d3-dsv.ISC b/licenses/bin/d3-dsv.ISC
new file mode 100644
index 00000000000..5cb4fc71439
--- /dev/null
+++ b/licenses/bin/d3-dsv.ISC
@@ -0,0 +1,13 @@
+Copyright 2013-2021 Mike Bostock
+
+Permission to use, copy, modify, and/or distribute this software for any 
purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 
LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.
diff --git a/licenses/bin/d3-path.ISC b/licenses/bin/d3-path.ISC
new file mode 100644
index 00000000000..ed25746bbfc
--- /dev/null
+++ b/licenses/bin/d3-path.ISC
@@ -0,0 +1,13 @@
+Copyright 2015-2022 Mike Bostock
+
+Permission to use, copy, modify, and/or distribute this software for any 
purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 
LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.
diff --git a/licenses/bin/d3-shape.ISC b/licenses/bin/d3-shape.ISC
new file mode 100644
index 00000000000..fbe44bdc9ad
--- /dev/null
+++ b/licenses/bin/d3-shape.ISC
@@ -0,0 +1,13 @@
+Copyright 2010-2022 Mike Bostock
+
+Permission to use, copy, modify, and/or distribute this software for any 
purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 
LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.
diff --git a/licenses/bin/d3-time-format.ISC b/licenses/bin/d3-time-format.ISC
new file mode 100644
index 00000000000..b0145150fd3
--- /dev/null
+++ b/licenses/bin/d3-time-format.ISC
@@ -0,0 +1,13 @@
+Copyright 2010-2021 Mike Bostock
+
+Permission to use, copy, modify, and/or distribute this software for any 
purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 
LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.
diff --git a/licenses/bin/es-errors.MIT b/licenses/bin/es-errors.MIT
new file mode 100644
index 00000000000..f82f38963b0
--- /dev/null
+++ b/licenses/bin/es-errors.MIT
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Jordan Harband
+
+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/licenses/bin/es-set-tostringtag.MIT 
b/licenses/bin/es-set-tostringtag.MIT
new file mode 100644
index 00000000000..c2a8460a3c4
--- /dev/null
+++ b/licenses/bin/es-set-tostringtag.MIT
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 ECMAScript Shims
+
+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/licenses/bin/has-proto.MIT b/licenses/bin/has-proto.MIT
new file mode 100644
index 00000000000..2e7b9a3eacf
--- /dev/null
+++ b/licenses/bin/has-proto.MIT
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Inspect JS
+
+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/licenses/bin/hasown.MIT b/licenses/bin/hasown.MIT
new file mode 100644
index 00000000000..0314929078d
--- /dev/null
+++ b/licenses/bin/hasown.MIT
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Jordan Harband and contributors
+
+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/licenses/bin/markdown-table-ts.MIT 
b/licenses/bin/markdown-table-ts.MIT
new file mode 100644
index 00000000000..83ed446129f
--- /dev/null
+++ b/licenses/bin/markdown-table-ts.MIT
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Jiri Hajek
+
+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/licenses/bin/moment-timezone.MIT b/licenses/bin/moment-timezone.MIT
deleted file mode 100644
index f0bb3b4bb46..00000000000
--- a/licenses/bin/moment-timezone.MIT
+++ /dev/null
@@ -1,20 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) JS Foundation and other contributors
-
-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.
\ No newline at end of file
diff --git a/licenses/bin/moment.MIT b/licenses/bin/moment.MIT
deleted file mode 100644
index 8618b7333d6..00000000000
--- a/licenses/bin/moment.MIT
+++ /dev/null
@@ -1,22 +0,0 @@
-Copyright (c) JS Foundation and other contributors
-
-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/licenses/bin/picocolors.ISC b/licenses/bin/picocolors.ISC
new file mode 100644
index 00000000000..46c9b95d4b8
--- /dev/null
+++ b/licenses/bin/picocolors.ISC
@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2021-2024 Oleksii Raspopov, Kostiantyn Denysov, Anton Verinov
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
diff --git a/licenses/bin/webpack.MIT b/licenses/bin/webpack.MIT
deleted file mode 100644
index 8c11fc7289b..00000000000
--- a/licenses/bin/webpack.MIT
+++ /dev/null
@@ -1,20 +0,0 @@
-Copyright JS Foundation and other contributors
-
-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/package-lock.json b/web-console/package-lock.json
index fa00329611e..8c87c09706f 100644
--- a/web-console/package-lock.json
+++ b/web-console/package-lock.json
@@ -30,7 +30,7 @@
         "d3-shape": "^3.2.0",
         "d3-time-format": "^4.1.0",
         "date-fns": "^2.28.0",
-        "druid-query-toolkit": "^1.1.5",
+        "druid-query-toolkit": "^1.2.0",
         "echarts": "^5.5.1",
         "file-saver": "^2.0.5",
         "hjson": "^3.2.2",
@@ -7283,12 +7283,15 @@
       }
     },
     "node_modules/druid-query-toolkit": {
-      "version": "1.1.5",
-      "resolved": 
"https://registry.npmjs.org/druid-query-toolkit/-/druid-query-toolkit-1.1.5.tgz";,
-      "integrity": 
"sha512-ZI9DG4C44jUZcfN3M/1YRF46q9Wkq8QkYvuWV/d+kQKLr6wVPDU16WtzGhsKbEZZaqWKmKuALag5fWqjApMXAQ==",
+      "version": "1.2.0",
+      "resolved": 
"https://registry.npmjs.org/druid-query-toolkit/-/druid-query-toolkit-1.2.0.tgz";,
+      "integrity": 
"sha512-MMcr1012UZSbOG+O3bI1BxxGQOHM1sVwPWYGgbQlfnBCQovjcLDAxkzWUGY/nn1c3B+Yrblcp3oMRl/S0HpiDQ==",
       "license": "Apache-2.0",
       "dependencies": {
         "tslib": "^2.5.2"
+      },
+      "engines": {
+        "node": ">= 14.17.0"
       }
     },
     "node_modules/duplexer": {
@@ -23695,9 +23698,9 @@
       }
     },
     "druid-query-toolkit": {
-      "version": "1.1.5",
-      "resolved": 
"https://registry.npmjs.org/druid-query-toolkit/-/druid-query-toolkit-1.1.5.tgz";,
-      "integrity": 
"sha512-ZI9DG4C44jUZcfN3M/1YRF46q9Wkq8QkYvuWV/d+kQKLr6wVPDU16WtzGhsKbEZZaqWKmKuALag5fWqjApMXAQ==",
+      "version": "1.2.0",
+      "resolved": 
"https://registry.npmjs.org/druid-query-toolkit/-/druid-query-toolkit-1.2.0.tgz";,
+      "integrity": 
"sha512-MMcr1012UZSbOG+O3bI1BxxGQOHM1sVwPWYGgbQlfnBCQovjcLDAxkzWUGY/nn1c3B+Yrblcp3oMRl/S0HpiDQ==",
       "requires": {
         "tslib": "^2.5.2"
       }
diff --git a/web-console/package.json b/web-console/package.json
index 370bf979c02..e7152234610 100644
--- a/web-console/package.json
+++ b/web-console/package.json
@@ -72,7 +72,7 @@
     "d3-shape": "^3.2.0",
     "d3-time-format": "^4.1.0",
     "date-fns": "^2.28.0",
-    "druid-query-toolkit": "^1.1.5",
+    "druid-query-toolkit": "^1.2.0",
     "echarts": "^5.5.1",
     "file-saver": "^2.0.5",
     "hjson": "^3.2.2",
diff --git a/web-console/src/components/segment-timeline/segment-bar-chart.tsx 
b/web-console/src/components/segment-timeline/segment-bar-chart.tsx
index cf38b12c397..78a82b90acd 100644
--- a/web-console/src/components/segment-timeline/segment-bar-chart.tsx
+++ b/web-console/src/components/segment-timeline/segment-bar-chart.tsx
@@ -51,7 +51,7 @@ export const SegmentBarChart = function 
SegmentBarChart(props: SegmentBarChartPr
 
   const [intervalRowsState] = useQueryManager({
     query: intervalsQuery,
-    processQuery: async ({ capabilities, dateRange, shownDatasource }, 
cancelToken) => {
+    processQuery: async ({ capabilities, dateRange, shownDatasource }, signal) 
=> {
       if (capabilities.hasSql()) {
         const query = SqlQuery.from(N('sys').table('segments'))
           .changeWhereExpression(
@@ -72,7 +72,7 @@ export const SegmentBarChart = function 
SegmentBarChart(props: SegmentBarChartPr
           .addSelect(F.sum(C('num_rows')).as('rows'))
           .toString();
 
-        return (await queryDruidSql({ query }, cancelToken)).map(sr => {
+        return (await queryDruidSql({ query }, signal)).map(sr => {
           const start = new Date(sr.start);
           const end = new Date(sr.end);
 
@@ -90,7 +90,7 @@ export const SegmentBarChart = function 
SegmentBarChart(props: SegmentBarChartPr
             
`/druid/coordinator/v1/metadata/segments?includeOvershadowedStatus&includeRealtimeSegments&${
               shownDatasource ? 
`datasources=${Api.encodePath(shownDatasource)}` : ''
             }`,
-            cancelToken,
+            signal,
           ),
           (segment: any) => {
             if (segment.overshadowed) return; // We have to include 
overshadowed segments to get the realtime segments in this API
@@ -118,10 +118,10 @@ export const SegmentBarChart = function 
SegmentBarChart(props: SegmentBarChartPr
 
   const [allLoadRulesState] = useQueryManager({
     query: shownDatasource ? '' : undefined,
-    processQuery: async (_, cancelToken) => {
+    processQuery: async (_, signal) => {
       return (
         await Api.instance.get<Record<string, 
Rule[]>>('/druid/coordinator/v1/rules', {
-          cancelToken,
+          signal,
         })
       ).data;
     },
diff --git a/web-console/src/components/segment-timeline/segment-timeline.tsx 
b/web-console/src/components/segment-timeline/segment-timeline.tsx
index d14f63d56c7..d3b4721c196 100644
--- a/web-console/src/components/segment-timeline/segment-timeline.tsx
+++ b/web-console/src/components/segment-timeline/segment-timeline.tsx
@@ -97,25 +97,25 @@ export const SegmentTimeline = function 
SegmentTimeline(props: SegmentTimelinePr
 
   const [datasourcesState] = useQueryManager<Capabilities, string[]>({
     initQuery: capabilities,
-    processQuery: async (capabilities, cancelToken) => {
+    processQuery: async (capabilities, signal) => {
       if (capabilities.hasSql()) {
         const tables = await queryDruidSql<{ TABLE_NAME: string }>(
           {
             query: `SELECT TABLE_NAME FROM INFORMATION_SCHEMA.TABLES WHERE 
TABLE_TYPE = 'TABLE'`,
           },
-          cancelToken,
+          signal,
         );
 
         return tables.map(d => d.TABLE_NAME);
       } else {
-        return await getApiArray(`/druid/coordinator/v1/datasources`, 
cancelToken);
+        return await getApiArray(`/druid/coordinator/v1/datasources`, signal);
       }
     },
   });
 
   const [initDatasourceDateRangeState] = useQueryManager<string | null, 
NonNullDateRange>({
     query: dateRange ? undefined : shownDatasource ?? null,
-    processQuery: async (datasource, cancelToken) => {
+    processQuery: async (datasource, signal) => {
       let queriedStart: Date;
       let queriedEnd: Date;
       if (capabilities.hasSql()) {
@@ -134,7 +134,7 @@ export const SegmentTimeline = function 
SegmentTimeline(props: SegmentTimelinePr
           .addSelect(C('end'), { addToOrderBy: 'end', direction: 'DESC' })
           .toString();
 
-        const endRes = await queryDruidSql<{ end: string }>({ query: endQuery 
}, cancelToken).catch(
+        const endRes = await queryDruidSql<{ end: string }>({ query: endQuery 
}, signal).catch(
           () => [],
         );
         if (endRes.length !== 1) {
@@ -149,7 +149,7 @@ export const SegmentTimeline = function 
SegmentTimeline(props: SegmentTimelinePr
 
         const startRes = await queryDruidSql<{ start: string }>(
           { query: startQuery },
-          cancelToken,
+          signal,
         ).catch(() => []);
         if (startRes.length !== 1) {
           return [DEFAULT_SHOWN_DURATION.shift(queriedEnd, Timezone.UTC, -1), 
queriedEnd]; // Should not really get here
diff --git a/web-console/src/components/show-json/show-json.tsx 
b/web-console/src/components/show-json/show-json.tsx
index e122be709c8..3340e5818ec 100644
--- a/web-console/src/components/show-json/show-json.tsx
+++ b/web-console/src/components/show-json/show-json.tsx
@@ -39,8 +39,8 @@ export const ShowJson = React.memo(function ShowJson(props: 
ShowJsonProps) {
   const { endpoint, transform, downloadFilename } = props;
 
   const [jsonState] = useQueryManager<null, string>({
-    processQuery: async (_, cancelToken) => {
-      const resp = await Api.instance.get(endpoint, { cancelToken });
+    processQuery: async (_, signal) => {
+      const resp = await Api.instance.get(endpoint, { signal });
       let data = resp.data;
       if (transform) data = transform(data);
       return typeof data === 'string' ? data : JSONBig.stringify(data, 
undefined, 2);
diff --git a/web-console/src/components/show-log/show-log.tsx 
b/web-console/src/components/show-log/show-log.tsx
index 3f597351e7e..50ae9d0c6ba 100644
--- a/web-console/src/components/show-log/show-log.tsx
+++ b/web-console/src/components/show-log/show-log.tsx
@@ -62,11 +62,11 @@ export class ShowLog extends 
React.PureComponent<ShowLogProps, ShowLogState> {
     };
 
     this.showLogQueryManager = new QueryManager({
-      processQuery: async (_, cancelToken) => {
+      processQuery: async (_, signal) => {
         const { endpoint, tailOffset } = this.props;
         const resp = await Api.instance.get(
           endpoint + (tailOffset ? `?offset=-${tailOffset}` : ''),
-          { cancelToken },
+          { signal },
         );
         const data = resp.data;
 
diff --git 
a/web-console/src/components/supervisor-history-panel/supervisor-history-panel.tsx
 
b/web-console/src/components/supervisor-history-panel/supervisor-history-panel.tsx
index 559c48539c2..ac1ef563167 100644
--- 
a/web-console/src/components/supervisor-history-panel/supervisor-history-panel.tsx
+++ 
b/web-console/src/components/supervisor-history-panel/supervisor-history-panel.tsx
@@ -48,11 +48,11 @@ export const SupervisorHistoryPanel = React.memo(function 
SupervisorHistoryPanel
   const [diffIndex, setDiffIndex] = useState(-1);
   const [historyState] = useQueryManager<string, SupervisorHistoryEntry[]>({
     initQuery: supervisorId,
-    processQuery: async (supervisorId, cancelToken) => {
+    processQuery: async (supervisorId, signal) => {
       return (
         await getApiArray<SupervisorHistoryEntry>(
           
`/druid/indexer/v1/supervisor/${Api.encodePath(supervisorId)}/history?count=100`,
-          cancelToken,
+          signal,
         )
       ).map(vs => deepSet(vs, 'spec', cleanSpec(vs.spec)));
     },
diff --git 
a/web-console/src/dialogs/compaction-dynamic-config-dialog/compaction-dynamic-config-dialog.tsx
 
b/web-console/src/dialogs/compaction-dynamic-config-dialog/compaction-dynamic-config-dialog.tsx
index 8a9b63d7bd4..e32bb794960 100644
--- 
a/web-console/src/dialogs/compaction-dynamic-config-dialog/compaction-dynamic-config-dialog.tsx
+++ 
b/web-console/src/dialogs/compaction-dynamic-config-dialog/compaction-dynamic-config-dialog.tsx
@@ -51,10 +51,10 @@ export const CompactionDynamicConfigDialog = 
React.memo(function CompactionDynam
 
   useQueryManager<null, Record<string, any>>({
     initQuery: null,
-    processQuery: async (_, cancelToken) => {
+    processQuery: async (_, signal) => {
       try {
         const configResp = await 
Api.instance.get('/druid/indexer/v1/compaction/config/cluster', {
-          cancelToken,
+          signal,
         });
         setDynamicConfig(configResp.data || {});
       } catch (e) {
diff --git 
a/web-console/src/dialogs/compaction-history-dialog/compaction-history-dialog.tsx
 
b/web-console/src/dialogs/compaction-history-dialog/compaction-history-dialog.tsx
index b77fc3d3dda..e01f9d45f30 100644
--- 
a/web-console/src/dialogs/compaction-history-dialog/compaction-history-dialog.tsx
+++ 
b/web-console/src/dialogs/compaction-history-dialog/compaction-history-dialog.tsx
@@ -64,14 +64,14 @@ export const CompactionHistoryDialog = React.memo(function 
CompactionHistoryDial
   const [diffIndex, setDiffIndex] = useState(-1);
   const [historyState] = useQueryManager<string, CompactionHistoryEntry[]>({
     initQuery: datasource,
-    processQuery: async (datasource, cancelToken) => {
+    processQuery: async (datasource, signal) => {
       try {
         return await getApiArrayFromKey<CompactionHistoryEntry>(
           `/druid/indexer/v1/compaction/config/datasources/${Api.encodePath(
             datasource,
           )}/history?count=20`,
           'entries',
-          cancelToken,
+          signal,
         );
       } catch (e) {
         if (e.response?.status === 404) return [];
diff --git 
a/web-console/src/dialogs/coordinator-dynamic-config-dialog/coordinator-dynamic-config-dialog.tsx
 
b/web-console/src/dialogs/coordinator-dynamic-config-dialog/coordinator-dynamic-config-dialog.tsx
index b77108d87dc..d8cffc5abf7 100644
--- 
a/web-console/src/dialogs/coordinator-dynamic-config-dialog/coordinator-dynamic-config-dialog.tsx
+++ 
b/web-console/src/dialogs/coordinator-dynamic-config-dialog/coordinator-dynamic-config-dialog.tsx
@@ -48,16 +48,16 @@ export const CoordinatorDynamicConfigDialog = 
React.memo(function CoordinatorDyn
 
   const [historyRecordsState] = useQueryManager<null, any[]>({
     initQuery: null,
-    processQuery: async (_, cancelToken) => {
-      return await 
getApiArray(`/druid/coordinator/v1/config/history?count=100`, cancelToken);
+    processQuery: async (_, signal) => {
+      return await 
getApiArray(`/druid/coordinator/v1/config/history?count=100`, signal);
     },
   });
 
   useQueryManager<null, Record<string, any>>({
     initQuery: null,
-    processQuery: async (_, cancelToken) => {
+    processQuery: async (_, signal) => {
       try {
-        const configResp = await 
Api.instance.get('/druid/coordinator/v1/config', { cancelToken });
+        const configResp = await 
Api.instance.get('/druid/coordinator/v1/config', { signal });
         setDynamicConfig(configResp.data || {});
       } catch (e) {
         AppToaster.show({
diff --git 
a/web-console/src/dialogs/datasource-table-action-dialog/datasource-columns-table/datasource-columns-table.tsx
 
b/web-console/src/dialogs/datasource-table-action-dialog/datasource-columns-table/datasource-columns-table.tsx
index 3dfb2f7879d..bfc5b7e22d5 100644
--- 
a/web-console/src/dialogs/datasource-table-action-dialog/datasource-columns-table/datasource-columns-table.tsx
+++ 
b/web-console/src/dialogs/datasource-table-action-dialog/datasource-columns-table/datasource-columns-table.tsx
@@ -42,13 +42,13 @@ export const DatasourceColumnsTable = React.memo(function 
DatasourceColumnsTable
 ) {
   const [columnsState] = useQueryManager<string, DatasourceColumnsTableRow[]>({
     initQuery: props.datasource,
-    processQuery: async (datasourceId, cancelToken) => {
+    processQuery: async (datasourceId, signal) => {
       return await queryDruidSql<ColumnMetadata>(
         {
           query: `SELECT COLUMN_NAME, DATA_TYPE FROM INFORMATION_SCHEMA.COLUMNS
           WHERE TABLE_SCHEMA = 'druid' AND TABLE_NAME = ${L(datasourceId)}`,
         },
-        cancelToken,
+        signal,
       );
     },
   });
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
index 37ee4beaf74..0484b88dfef 100644
--- 
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
@@ -39,13 +39,13 @@ export const DatasourcePreviewPane = React.memo(function 
DatasourcePreviewPane(
 ) {
   const [recordState] = useQueryManager<string, QueryResult>({
     initQuery: props.datasource,
-    processQuery: async (datasource, cancelToken) => {
+    processQuery: async (datasource, signal) => {
       let result: QueryResult;
       try {
         result = await queryRunner.runQuery({
           query: `SELECT * FROM ${T(datasource)} ORDER BY __time DESC`,
           extraQueryContext: { sqlOuterLimit: 100 },
-          cancelToken,
+          signal,
         });
       } catch (e) {
         throw new DruidError(e);
diff --git 
a/web-console/src/dialogs/lookup-table-action-dialog/lookup-values-table/lookup-values-table.tsx
 
b/web-console/src/dialogs/lookup-table-action-dialog/lookup-values-table/lookup-values-table.tsx
index 122cc4566b8..dc2cd81b1e6 100644
--- 
a/web-console/src/dialogs/lookup-table-action-dialog/lookup-values-table/lookup-values-table.tsx
+++ 
b/web-console/src/dialogs/lookup-table-action-dialog/lookup-values-table/lookup-values-table.tsx
@@ -41,12 +41,12 @@ export const LookupValuesTable = React.memo(function 
LookupValuesTable(
   props: LookupValuesTableProps,
 ) {
   const [entriesState] = useQueryManager<string, LookupRow[]>({
-    processQuery: async (lookupId, cancelToken) => {
+    processQuery: async (lookupId, signal) => {
       return await queryDruidSql<LookupRow>(
         {
           query: `SELECT "k", "v" FROM ${N('lookup').table(lookupId)} LIMIT 
5000`,
         },
-        cancelToken,
+        signal,
       );
     },
     initQuery: props.lookupId,
diff --git 
a/web-console/src/dialogs/overlord-dynamic-config-dialog/overlord-dynamic-config-dialog.tsx
 
b/web-console/src/dialogs/overlord-dynamic-config-dialog/overlord-dynamic-config-dialog.tsx
index a41054eff3f..8aa4704fb17 100644
--- 
a/web-console/src/dialogs/overlord-dynamic-config-dialog/overlord-dynamic-config-dialog.tsx
+++ 
b/web-console/src/dialogs/overlord-dynamic-config-dialog/overlord-dynamic-config-dialog.tsx
@@ -48,16 +48,16 @@ export const OverlordDynamicConfigDialog = 
React.memo(function OverlordDynamicCo
 
   const [historyRecordsState] = useQueryManager<null, any[]>({
     initQuery: null,
-    processQuery: async (_, cancelToken) => {
-      return await getApiArray(`/druid/indexer/v1/worker/history?count=100`, 
cancelToken);
+    processQuery: async (_, signal) => {
+      return await getApiArray(`/druid/indexer/v1/worker/history?count=100`, 
signal);
     },
   });
 
   useQueryManager<null, Record<string, any>>({
     initQuery: null,
-    processQuery: async (_, cancelToken) => {
+    processQuery: async (_, signal) => {
       try {
-        const configResp = await Api.instance.get(`/druid/indexer/v1/worker`, 
{ cancelToken });
+        const configResp = await Api.instance.get(`/druid/indexer/v1/worker`, 
{ signal });
         setDynamicConfig(configResp.data || {});
       } catch (e) {
         AppToaster.show({
diff --git a/web-console/src/dialogs/retention-dialog/retention-dialog.tsx 
b/web-console/src/dialogs/retention-dialog/retention-dialog.tsx
index 3991cefc23d..af1f37bf317 100644
--- a/web-console/src/dialogs/retention-dialog/retention-dialog.tsx
+++ b/web-console/src/dialogs/retention-dialog/retention-dialog.tsx
@@ -54,7 +54,7 @@ export const RetentionDialog = React.memo(function 
RetentionDialog(props: Retent
 
   const [tiersState] = useQueryManager<Capabilities, string[]>({
     initQuery: capabilities,
-    processQuery: async (capabilities, cancelToken) => {
+    processQuery: async (capabilities, signal) => {
       if (capabilities.hasSql()) {
         const sqlResp = await queryDruidSql<{ tier: string }>(
           {
@@ -64,13 +64,13 @@ WHERE "server_type" = 'historical'
 GROUP BY 1
 ORDER BY 1`,
           },
-          cancelToken,
+          signal,
         );
 
         return sqlResp.map(d => d.tier);
       } else if (capabilities.hasCoordinatorAccess()) {
         return filterMap(
-          await getApiArray('/druid/coordinator/v1/servers?simple', 
cancelToken),
+          await getApiArray('/druid/coordinator/v1/servers?simple', signal),
           (s: any) => (s.type === 'historical' ? s.tier : undefined),
         );
       } else {
@@ -83,10 +83,10 @@ ORDER BY 1`,
 
   const [historyQueryState] = useQueryManager<string, any[]>({
     initQuery: props.datasource,
-    processQuery: async (datasource, cancelToken) => {
+    processQuery: async (datasource, signal) => {
       return await getApiArray(
         
`/druid/coordinator/v1/rules/${Api.encodePath(datasource)}/history?count=200`,
-        cancelToken,
+        signal,
       );
     },
   });
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
index 2925482d990..8506eb1ef4a 100644
--- 
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
@@ -76,7 +76,7 @@ export const SegmentsPreviewPane = React.memo(function 
DatasourcePreviewPane(
 
   const [recordState] = useQueryManager<string, QueryResult>({
     initQuery: segmentIdParts.datasource,
-    processQuery: async (datasource, cancelToken) => {
+    processQuery: async (datasource, signal) => {
       let result: QueryResult;
       try {
         result = await queryRunner.runQuery({
@@ -99,7 +99,7 @@ export const SegmentsPreviewPane = React.memo(function 
DatasourcePreviewPane(
             granularity: 'all',
           },
           extraQueryContext: { sqlOuterLimit: 100 },
-          cancelToken,
+          signal,
         });
       } catch (e) {
         throw new DruidError(e);
diff --git a/web-console/src/dialogs/status-dialog/status-dialog.tsx 
b/web-console/src/dialogs/status-dialog/status-dialog.tsx
index e07a3c2e325..babc5e8acf1 100644
--- a/web-console/src/dialogs/status-dialog/status-dialog.tsx
+++ b/web-console/src/dialogs/status-dialog/status-dialog.tsx
@@ -49,8 +49,8 @@ export const StatusDialog = React.memo(function 
StatusDialog(props: StatusDialog
 
   const [responseState] = useQueryManager<null, StatusResponse>({
     initQuery: null,
-    processQuery: async (_, cancelToken) => {
-      return (await Api.instance.get(`/status`, { cancelToken })).data;
+    processQuery: async (_, signal) => {
+      return (await Api.instance.get(`/status`, { signal })).data;
     },
   });
 
diff --git 
a/web-console/src/dialogs/supervisor-reset-offsets-dialog/supervisor-reset-offsets-dialog.tsx
 
b/web-console/src/dialogs/supervisor-reset-offsets-dialog/supervisor-reset-offsets-dialog.tsx
index d10fc00eb5c..3d0ad4ee1bc 100644
--- 
a/web-console/src/dialogs/supervisor-reset-offsets-dialog/supervisor-reset-offsets-dialog.tsx
+++ 
b/web-console/src/dialogs/supervisor-reset-offsets-dialog/supervisor-reset-offsets-dialog.tsx
@@ -105,11 +105,11 @@ export const SupervisorResetOffsetsDialog = 
React.memo(function SupervisorResetO
 
   const [statusResp] = useQueryManager<string, SupervisorStatus>({
     initQuery: supervisorId,
-    processQuery: async (supervisorId, cancelToken) => {
+    processQuery: async (supervisorId, signal) => {
       return (
         await Api.instance.get(
           
`/druid/indexer/v1/supervisor/${Api.encodePath(supervisorId)}/status`,
-          { cancelToken },
+          { signal },
         )
       ).data;
     },
diff --git 
a/web-console/src/dialogs/supervisor-table-action-dialog/supervisor-statistics-table/supervisor-statistics-table.tsx
 
b/web-console/src/dialogs/supervisor-table-action-dialog/supervisor-statistics-table/supervisor-statistics-table.tsx
index 96d4f05333a..a3e5ceab43f 100644
--- 
a/web-console/src/dialogs/supervisor-table-action-dialog/supervisor-statistics-table/supervisor-statistics-table.tsx
+++ 
b/web-console/src/dialogs/supervisor-table-action-dialog/supervisor-statistics-table/supervisor-statistics-table.tsx
@@ -60,8 +60,8 @@ export const SupervisorStatisticsTable = React.memo(function 
SupervisorStatistic
     SupervisorStatisticsTableRow[]
   >({
     initQuery: null,
-    processQuery: async (_, cancelToken) => {
-      const resp = await Api.instance.get<SupervisorStats>(statsEndpoint, { 
cancelToken });
+    processQuery: async (_, signal) => {
+      const resp = await Api.instance.get<SupervisorStats>(statsEndpoint, { 
signal });
       return normalizeSupervisorStatisticsResults(resp.data);
     },
   });
diff --git a/web-console/src/entry.tsx b/web-console/src/entry.tsx
index 55f7abfc59a..e441a3ec5be 100644
--- a/web-console/src/entry.tsx
+++ b/web-console/src/entry.tsx
@@ -101,8 +101,8 @@ if (consoleConfig.localStorageNamespace) {
   setLocalStorageNamespace(consoleConfig.localStorageNamespace);
 }
 
-QueryRunner.defaultQueryExecutor = (payload, isSql, cancelToken) => {
-  return Api.instance.post(`/druid/v2${isSql ? '/sql' : ''}`, payload, { 
cancelToken });
+QueryRunner.defaultQueryExecutor = ({ payload, isSql, signal }) => {
+  return Api.instance.post(`/druid/v2${isSql ? '/sql' : ''}`, payload, { 
signal });
 };
 
 createRoot(container).render(
diff --git a/web-console/src/helpers/execution/general.ts 
b/web-console/src/helpers/execution/general.ts
index 0e78834172b..30d8c85c2fc 100644
--- a/web-console/src/helpers/execution/general.ts
+++ b/web-console/src/helpers/execution/general.ts
@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-import type { CancelToken } from 'axios';
 import type { QueryResult } from 'druid-query-toolkit';
 
 import type { Execution } from '../../druid-models';
@@ -41,11 +40,11 @@ export function extractResult(
 export async function executionBackgroundStatusCheck(
   execution: Execution,
   _query: any,
-  cancelToken: CancelToken,
+  signal: AbortSignal,
 ): Promise<Execution | IntermediateQueryState<Execution>> {
   switch (execution.engine) {
     case 'sql-msq-task':
-      execution = await updateExecutionWithTaskIfNeeded(execution, 
cancelToken);
+      execution = await updateExecutionWithTaskIfNeeded(execution, signal);
       break;
 
     default:
@@ -60,7 +59,7 @@ export async function executionBackgroundStatusCheck(
 export async function executionBackgroundResultStatusCheck(
   execution: Execution,
   query: any,
-  cancelToken: CancelToken,
+  signal: AbortSignal,
 ): Promise<QueryResult | IntermediateQueryState<Execution>> {
-  return extractResult(await executionBackgroundStatusCheck(execution, query, 
cancelToken));
+  return extractResult(await executionBackgroundStatusCheck(execution, query, 
signal));
 }
diff --git a/web-console/src/helpers/execution/sql-task-execution.ts 
b/web-console/src/helpers/execution/sql-task-execution.ts
index 68cf0763b42..6fa6df4bb35 100644
--- a/web-console/src/helpers/execution/sql-task-execution.ts
+++ b/web-console/src/helpers/execution/sql-task-execution.ts
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import type { AxiosResponse, CancelToken } from 'axios';
+import type { AxiosResponse } from 'axios';
 import { QueryResult } from 'druid-query-toolkit';
 
 import type { AsyncStatusResponse, MsqTaskPayloadResponse, QueryContext } from 
'../../druid-models';
@@ -38,7 +38,7 @@ export interface SubmitTaskQueryOptions {
   context?: QueryContext;
   baseQueryContext?: QueryContext;
   prefixLines?: number;
-  cancelToken?: CancelToken;
+  signal?: AbortSignal;
   preserveOnTermination?: boolean;
   onSubmitted?: (id: string) => void;
 }
@@ -51,7 +51,7 @@ export async function submitTaskQuery(
     context,
     baseQueryContext,
     prefixLines,
-    cancelToken,
+    signal,
     preserveOnTermination,
     onSubmitted,
   } = options;
@@ -87,7 +87,7 @@ export async function submitTaskQuery(
       `/druid/v2/sql/statements`,
       jsonQuery,
       {
-        cancelToken,
+        signal,
       },
     );
   } catch (e) {
@@ -114,8 +114,8 @@ export async function submitTaskQuery(
 
   if (!execution.isWaitingForQuery()) return execution;
 
-  if (cancelToken) {
-    cancelTaskExecutionOnCancel(execution.id, cancelToken, 
Boolean(preserveOnTermination));
+  if (signal) {
+    cancelTaskExecutionOnCancel(execution.id, signal, 
Boolean(preserveOnTermination));
   }
 
   return new IntermediateQueryState(execution);
@@ -123,26 +123,26 @@ export async function submitTaskQuery(
 
 export interface ReattachTaskQueryOptions {
   id: string;
-  cancelToken?: CancelToken;
+  signal?: AbortSignal;
   preserveOnTermination?: boolean;
 }
 
 export async function reattachTaskExecution(
   option: ReattachTaskQueryOptions,
 ): Promise<Execution | IntermediateQueryState<Execution>> {
-  const { id, cancelToken, preserveOnTermination } = option;
+  const { id, signal, preserveOnTermination } = option;
   let execution: Execution;
 
   try {
-    execution = await getTaskExecution(id, undefined, cancelToken);
+    execution = await getTaskExecution(id, undefined, signal);
   } catch (e) {
     throw new Error(`Reattaching to query failed due to: ${e.message}`);
   }
 
   if (!execution.isWaitingForQuery()) return execution;
 
-  if (cancelToken) {
-    cancelTaskExecutionOnCancel(execution.id, cancelToken, 
Boolean(preserveOnTermination));
+  if (signal) {
+    cancelTaskExecutionOnCancel(execution.id, signal, 
Boolean(preserveOnTermination));
   }
 
   return new IntermediateQueryState(execution);
@@ -150,18 +150,18 @@ export async function reattachTaskExecution(
 
 export async function updateExecutionWithTaskIfNeeded(
   execution: Execution,
-  cancelToken?: CancelToken,
+  signal?: AbortSignal,
 ): Promise<Execution> {
   if (!execution.isWaitingForQuery()) return execution;
 
   // Inherit old payload so as not to re-query it
-  return await getTaskExecution(execution.id, execution._payload, cancelToken);
+  return await getTaskExecution(execution.id, execution._payload, signal);
 }
 
 export async function getTaskExecution(
   id: string,
   taskPayloadOverride?: MsqTaskPayloadResponse,
-  cancelToken?: CancelToken,
+  signal?: AbortSignal,
 ): Promise<Execution> {
   const encodedId = Api.encodePath(id);
 
@@ -172,7 +172,7 @@ export async function getTaskExecution(
     try {
       taskReport = (
         await Api.instance.get(`/druid/indexer/v1/task/${encodedId}/reports`, {
-          cancelToken,
+          signal,
         })
       ).data;
     } catch (e) {
@@ -196,7 +196,7 @@ export async function getTaskExecution(
     const statusResp = await Api.instance.get<AsyncStatusResponse>(
       `/druid/v2/sql/statements/${encodedId}?detail=true`,
       {
-        cancelToken,
+        signal,
       },
     );
 
@@ -208,7 +208,7 @@ export async function getTaskExecution(
     try {
       taskPayload = (
         await Api.instance.get(`/druid/indexer/v1/task/${encodedId}`, {
-          cancelToken,
+          signal,
         })
       ).data;
     } catch (e) {
@@ -225,7 +225,7 @@ export async function getTaskExecution(
       const statusResp = await Api.instance.get<AsyncStatusResponse>(
         `/druid/v2/sql/statements/${encodedId}`,
         {
-          cancelToken,
+          signal,
         },
       );
 
@@ -247,15 +247,13 @@ export async function getTaskExecution(
 
 function cancelTaskExecutionOnCancel(
   id: string,
-  cancelToken: CancelToken,
+  signal: AbortSignal,
   preserveOnTermination = false,
 ): void {
-  void cancelToken.promise
-    .then(cancel => {
-      if (preserveOnTermination && cancel.message === 
QueryManager.TERMINATION_MESSAGE) return;
-      return cancelTaskExecution(id);
-    })
-    .catch(() => {});
+  signal.addEventListener('abort', () => {
+    if (preserveOnTermination && signal.reason === 
QueryManager.TERMINATION_MESSAGE) return;
+    cancelTaskExecution(id).catch(() => {});
+  });
 }
 
 export function cancelTaskExecution(id: string): Promise<void> {
diff --git a/web-console/src/utils/druid-query.ts 
b/web-console/src/utils/druid-query.ts
index c596abeefa6..c4e04c37162 100644
--- a/web-console/src/utils/druid-query.ts
+++ b/web-console/src/utils/druid-query.ts
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import type { AxiosResponse, CancelToken } from 'axios';
+import type { AxiosResponse } from 'axios';
 import axios from 'axios';
 import { C } from 'druid-query-toolkit';
 
@@ -324,11 +324,11 @@ export class DruidError extends Error {
 
 export async function queryDruidRune(
   runeQuery: Record<string, any>,
-  cancelToken?: CancelToken,
+  signal?: AbortSignal,
 ): Promise<any> {
   let runeResultResp: AxiosResponse;
   try {
-    runeResultResp = await Api.instance.post('/druid/v2', runeQuery, { 
cancelToken });
+    runeResultResp = await Api.instance.post('/druid/v2', runeQuery, { signal 
});
   } catch (e) {
     throw new Error(getDruidErrorMessage(e));
   }
@@ -337,19 +337,19 @@ export async function queryDruidRune(
 
 export async function queryDruidSql<T = any>(
   sqlQueryPayload: Record<string, any>,
-  cancelToken?: CancelToken,
+  signal?: AbortSignal,
 ): Promise<T[]> {
   let sqlResultResp: AxiosResponse;
   try {
-    sqlResultResp = await Api.instance.post('/druid/v2/sql', sqlQueryPayload, 
{ cancelToken });
+    sqlResultResp = await Api.instance.post('/druid/v2/sql', sqlQueryPayload, 
{ signal });
   } catch (e) {
     throw new Error(getDruidErrorMessage(e));
   }
   return sqlResultResp.data;
 }
 
-export async function getApiArray<T = any>(url: string, cancelToken?: 
CancelToken): Promise<T[]> {
-  const result = (await Api.instance.get(url, { cancelToken })).data;
+export async function getApiArray<T = any>(url: string, signal?: AbortSignal): 
Promise<T[]> {
+  const result = (await Api.instance.get(url, { signal })).data;
   if (!Array.isArray(result)) throw new Error('unexpected result');
   return result;
 }
@@ -357,9 +357,9 @@ export async function getApiArray<T = any>(url: string, 
cancelToken?: CancelToke
 export async function getApiArrayFromKey<T = any>(
   url: string,
   key: string,
-  cancelToken?: CancelToken,
+  signal?: AbortSignal,
 ): Promise<T[]> {
-  const result = (await Api.instance.get(url, { cancelToken })).data?.[key];
+  const result = (await Api.instance.get(url, { signal })).data?.[key];
   if (!Array.isArray(result)) throw new Error('unexpected result');
   return result;
 }
diff --git a/web-console/src/utils/query-manager/query-manager.ts 
b/web-console/src/utils/query-manager/query-manager.ts
index b7cbf3ab1c5..5c1a859758c 100644
--- a/web-console/src/utils/query-manager/query-manager.ts
+++ b/web-console/src/utils/query-manager/query-manager.ts
@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-import type { Canceler, CancelToken } from 'axios';
 import axios from 'axios';
 import debounce from 'lodash.debounce';
 
@@ -30,13 +29,13 @@ export interface QueryManagerOptions<Q, R, I = never, E 
extends Error = Error> {
   initState?: QueryState<R, E, I>;
   processQuery: (
     query: Q,
-    cancelToken: CancelToken,
+    signal: AbortSignal,
     setIntermediateQuery: (intermediateQuery: any) => void,
   ) => Promise<R | IntermediateQueryState<I> | ResultWithAuxiliaryWork<R>>;
   backgroundStatusCheck?: (
     state: I,
     query: Q,
-    cancelToken: CancelToken,
+    signal: AbortSignal,
   ) => Promise<R | IntermediateQueryState<I> | ResultWithAuxiliaryWork<R>>;
   onStateChange?: (queryResolve: QueryState<R, E, I>) => void;
   debounceInit?: number;
@@ -56,14 +55,14 @@ export class QueryManager<Q, R, I = never, E extends Error 
= Error> {
 
   private readonly processQuery: (
     query: Q,
-    cancelToken: CancelToken,
+    signal: AbortSignal,
     setIntermediateQuery: (intermediateQuery: any) => void,
   ) => Promise<R | IntermediateQueryState<I> | ResultWithAuxiliaryWork<R>>;
 
   private readonly backgroundStatusCheck?: (
     state: I,
     query: Q,
-    cancelToken: CancelToken,
+    signal: AbortSignal,
   ) => Promise<R | IntermediateQueryState<I> | ResultWithAuxiliaryWork<R>>;
 
   private readonly onStateChange?: (queryResolve: QueryState<R, E, I>) => void;
@@ -75,7 +74,7 @@ export class QueryManager<Q, R, I = never, E extends Error = 
Error> {
   private nextQuery: Q | undefined;
   private lastQuery: Q | undefined;
   private lastIntermediateQuery: any;
-  private currentRunCancelFn?: Canceler;
+  private currentRunCancelFn?: (reason?: string) => void;
   private state: QueryState<R, E, I>;
   private currentQueryId = 0;
 
@@ -124,14 +123,14 @@ export class QueryManager<Q, R, I = never, E extends 
Error = Error> {
     if (this.currentRunCancelFn) {
       this.currentRunCancelFn();
     }
-    const cancelToken = new axios.CancelToken(cancelFn => {
-      this.currentRunCancelFn = cancelFn;
-    });
+    const controller = new AbortController();
+    this.currentRunCancelFn = (reason: string | undefined) => 
controller.abort(reason);
+    const signal = controller.signal;
 
     const query = this.lastQuery;
     let data: R | IntermediateQueryState<I> | ResultWithAuxiliaryWork<R>;
     try {
-      data = await this.processQuery(query, cancelToken, (intermediateQuery: 
any) => {
+      data = await this.processQuery(query, signal, (intermediateQuery: any) 
=> {
         this.lastIntermediateQuery = intermediateQuery;
       });
     } catch (e) {
@@ -155,7 +154,7 @@ export class QueryManager<Q, R, I = never, E extends Error 
= Error> {
             'backgroundStatusCheck must be set if intermediate query state is 
returned',
           );
         }
-        cancelToken.throwIfRequested();
+        signal.throwIfAborted();
         if (this.currentQueryId !== myQueryId) return;
 
         this.setState(
@@ -175,11 +174,11 @@ export class QueryManager<Q, R, I = never, E extends 
Error = Error> {
 
         if (delay) {
           await wait(delay);
-          cancelToken.throwIfRequested();
+          signal.throwIfAborted();
           if (this.currentQueryId !== myQueryId) return;
         }
 
-        data = await this.backgroundStatusCheck(data.state, query, 
cancelToken);
+        data = await this.backgroundStatusCheck(data.state, query, signal);
         intermediateError = undefined; // Clear the intermediate error if 
there was one
       } catch (e) {
         if (this.currentQueryId !== myQueryId) return;
@@ -222,10 +221,10 @@ export class QueryManager<Q, R, I = never, E extends 
Error = Error> {
 
       try {
         for (let i = 0; i < numAuxiliaryQueries; i++) {
-          cancelToken.throwIfRequested();
+          signal.throwIfAborted();
           if (this.currentQueryId !== myQueryId) return;
 
-          data = await auxiliaryQueries[i](data, cancelToken);
+          data = await auxiliaryQueries[i](data, signal);
 
           if (this.currentQueryId !== myQueryId) return;
           if (i < numAuxiliaryQueries - 1) {
diff --git a/web-console/src/utils/query-manager/result-with-auxiliary-work.ts 
b/web-console/src/utils/query-manager/result-with-auxiliary-work.ts
index fae424f3b10..75908964150 100644
--- a/web-console/src/utils/query-manager/result-with-auxiliary-work.ts
+++ b/web-console/src/utils/query-manager/result-with-auxiliary-work.ts
@@ -16,9 +16,7 @@
  * limitations under the License.
  */
 
-import type { CancelToken } from 'axios';
-
-export type AuxiliaryQueryFn<R> = (result: R, cancelToken: CancelToken) => 
Promise<R>;
+export type AuxiliaryQueryFn<R> = (result: R, signal: AbortSignal) => 
Promise<R>;
 export class ResultWithAuxiliaryWork<R> {
   public readonly result: R;
   public readonly auxiliaryQueries: AuxiliaryQueryFn<R>[];
diff --git a/web-console/src/utils/sampler.ts b/web-console/src/utils/sampler.ts
index 5333013c12b..f007263613d 100644
--- a/web-console/src/utils/sampler.ts
+++ b/web-console/src/utils/sampler.ts
@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-import type { CancelToken } from 'axios';
 import { dedupe, F, SqlExpression, SqlFunction } from 'druid-query-toolkit';
 import * as JSONBig from 'json-bigint-native';
 
@@ -189,14 +188,14 @@ export async function getProxyOverlordModules(): 
Promise<string[]> {
 export async function postToSampler(
   sampleSpec: SampleSpec,
   forStr: string,
-  cancelToken?: CancelToken,
+  signal?: AbortSignal,
 ): Promise<SampleResponse> {
   sampleSpec = fixSamplerLookups(fixSamplerTypes(sampleSpec));
 
   let sampleResp: any;
   try {
     sampleResp = await 
Api.instance.post(`/druid/indexer/v1/sampler?for=${forStr}`, sampleSpec, {
-      cancelToken,
+      signal,
     });
   } catch (e) {
     throw new Error(getDruidErrorMessage(e));
diff --git a/web-console/src/views/datasources-view/datasources-view.tsx 
b/web-console/src/views/datasources-view/datasources-view.tsx
index 2520fc5cbd8..b1d08522ee3 100644
--- a/web-console/src/views/datasources-view/datasources-view.tsx
+++ b/web-console/src/views/datasources-view/datasources-view.tsx
@@ -439,21 +439,21 @@ GROUP BY 1, 2`;
     this.datasourceQueryManager = new QueryManager<DatasourceQuery, 
DatasourcesAndDefaultRules>({
       processQuery: async (
         { capabilities, visibleColumns, showUnused },
-        cancelToken,
+        signal,
         setIntermediateQuery,
       ) => {
         let datasources: DatasourceQueryResultRow[];
         if (capabilities.hasSql()) {
           const query = DatasourcesView.query(visibleColumns);
           setIntermediateQuery(query);
-          datasources = await queryDruidSql({ query }, cancelToken);
+          datasources = await queryDruidSql({ query }, signal);
         } else if (capabilities.hasCoordinatorAccess()) {
           const datasourcesResp = await getApiArray(
             '/druid/coordinator/v1/datasources?simple',
-            cancelToken,
+            signal,
           );
           const loadstatusResp = await 
Api.instance.get('/druid/coordinator/v1/loadstatus?simple', {
-            cancelToken,
+            signal,
           });
           const loadstatus = loadstatusResp.data;
           datasources = datasourcesResp.map((d: any): DatasourceQueryResultRow 
=> {
@@ -493,13 +493,13 @@ GROUP BY 1, 2`;
 
         if (visibleColumns.shown('Running tasks')) {
           if (capabilities.hasSql()) {
-            auxiliaryQueries.push(async (datasourcesAndDefaultRules, 
cancelToken) => {
+            auxiliaryQueries.push(async (datasourcesAndDefaultRules, signal) 
=> {
               try {
                 const runningTasks = await queryDruidSql<RunningTaskRow>(
                   {
                     query: DatasourcesView.RUNNING_TASK_SQL,
                   },
-                  cancelToken,
+                  signal,
                 );
 
                 const runningTasksByDatasource = groupByAsMap(
@@ -530,12 +530,9 @@ GROUP BY 1, 2`;
               }
             });
           } else if (capabilities.hasOverlordAccess()) {
-            auxiliaryQueries.push(async (datasourcesAndDefaultRules, 
cancelToken) => {
+            auxiliaryQueries.push(async (datasourcesAndDefaultRules, signal) 
=> {
               try {
-                const taskList = await getApiArray(
-                  `/druid/indexer/v1/tasks?state=running`,
-                  cancelToken,
-                );
+                const taskList = await 
getApiArray(`/druid/indexer/v1/tasks?state=running`, signal);
 
                 const runningTasksByDatasource = groupByAsMap(
                   taskList,
@@ -588,11 +585,11 @@ GROUP BY 1, 2`;
           }
 
           // Rules
-          auxiliaryQueries.push(async (datasourcesAndDefaultRules, 
cancelToken) => {
+          auxiliaryQueries.push(async (datasourcesAndDefaultRules, signal) => {
             try {
               const rules = (
                 await Api.instance.get<Record<string, 
Rule[]>>('/druid/coordinator/v1/rules', {
-                  cancelToken,
+                  signal,
                 })
               ).data;
 
@@ -614,12 +611,12 @@ GROUP BY 1, 2`;
           });
 
           // Compaction
-          auxiliaryQueries.push(async (datasourcesAndDefaultRules, 
cancelToken) => {
+          auxiliaryQueries.push(async (datasourcesAndDefaultRules, signal) => {
             try {
               const compactionConfigsAndMore = (
                 await Api.instance.get<CompactionConfigs>(
                   '/druid/indexer/v1/compaction/config/datasources',
-                  { cancelToken },
+                  { signal },
                 )
               ).data;
               const compactionConfigs = lookupBy(
@@ -629,7 +626,7 @@ GROUP BY 1, 2`;
 
               const compactionStatusesResp = await Api.instance.get<{
                 latestStatus: CompactionStatus[];
-              }>('/druid/indexer/v1/compaction/status/datasources', { 
cancelToken });
+              }>('/druid/indexer/v1/compaction/status/datasources', { signal 
});
               const compactionStatuses = lookupBy(
                 compactionStatusesResp.data.latestStatus || [],
                 c => c.dataSource,
diff --git 
a/web-console/src/views/explore-view/components/filter-pane/filter-menu/contains-filter-control/contains-filter-control.tsx
 
b/web-console/src/views/explore-view/components/filter-pane/filter-menu/contains-filter-control/contains-filter-control.tsx
index 15b9a75cadc..75f4d8afebe 100644
--- 
a/web-console/src/views/explore-view/components/filter-pane/filter-menu/contains-filter-control/contains-filter-control.tsx
+++ 
b/web-console/src/views/explore-view/components/filter-pane/filter-menu/contains-filter-control/contains-filter-control.tsx
@@ -18,7 +18,6 @@
 
 import { FormGroup, InputGroup, Menu, MenuItem } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import type { CancelToken } from 'axios';
 import type { ContainsFilterPattern, QueryResult, SqlQuery } from 
'druid-query-toolkit';
 import { C, F, filterPatternToExpression, SqlExpression } from 
'druid-query-toolkit';
 import React, { useMemo } from 'react';
@@ -34,7 +33,7 @@ export interface ContainsFilterControlProps {
   filter: SqlExpression;
   filterPattern: ContainsFilterPattern;
   setFilterPattern(filterPattern: ContainsFilterPattern): void;
-  runSqlQuery(query: string | SqlQuery, cancelToken?: CancelToken): 
Promise<QueryResult>;
+  runSqlQuery(query: string | SqlQuery, signal?: AbortSignal): 
Promise<QueryResult>;
 }
 
 export const ContainsFilterControl = React.memo(function ContainsFilterControl(
@@ -65,8 +64,8 @@ export const ContainsFilterControl = React.memo(function 
ContainsFilterControl(
     query: previewQuery,
     debounceIdle: 100,
     debounceLoading: 500,
-    processQuery: async (query, cancelToken) => {
-      const vs = await runSqlQuery(query, cancelToken);
+    processQuery: async (query, signal) => {
+      const vs = await runSqlQuery(query, signal);
       return (vs.getColumnByName('c') || []).map(String);
     },
   });
diff --git 
a/web-console/src/views/explore-view/components/filter-pane/filter-menu/filter-menu.tsx
 
b/web-console/src/views/explore-view/components/filter-pane/filter-menu/filter-menu.tsx
index 39cff40d2a9..b885d9f05cd 100644
--- 
a/web-console/src/views/explore-view/components/filter-pane/filter-menu/filter-menu.tsx
+++ 
b/web-console/src/views/explore-view/components/filter-pane/filter-menu/filter-menu.tsx
@@ -29,7 +29,6 @@ import {
   Position,
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import type { CancelToken } from 'axios';
 import { Timezone } from 'chronoshift';
 import type {
   Column,
@@ -113,7 +112,7 @@ export interface FilterMenuProps {
   initPattern?: FilterPattern;
   onPatternChange(newPattern: FilterPattern): void;
   onClose(): void;
-  runSqlQuery(query: string | SqlQuery, cancelToken?: CancelToken): 
Promise<QueryResult>;
+  runSqlQuery(query: string | SqlQuery, signal?: AbortSignal): 
Promise<QueryResult>;
   timeBounds?: [Date, Date];
   onAddToSourceQueryAsColumn?(expression: SqlExpression): void;
   onMoveToSourceQueryAsClause?(expression: SqlExpression): void;
diff --git 
a/web-console/src/views/explore-view/components/filter-pane/filter-menu/regexp-filter-control/regexp-filter-control.tsx
 
b/web-console/src/views/explore-view/components/filter-pane/filter-menu/regexp-filter-control/regexp-filter-control.tsx
index fa0820667e2..cb0ed2443f2 100644
--- 
a/web-console/src/views/explore-view/components/filter-pane/filter-menu/regexp-filter-control/regexp-filter-control.tsx
+++ 
b/web-console/src/views/explore-view/components/filter-pane/filter-menu/regexp-filter-control/regexp-filter-control.tsx
@@ -18,7 +18,6 @@
 
 import { FormGroup, InputGroup, Menu, MenuItem } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import type { CancelToken } from 'axios';
 import type { QueryResult, RegexpFilterPattern, SqlQuery } from 
'druid-query-toolkit';
 import { C, F, filterPatternToExpression, SqlExpression } from 
'druid-query-toolkit';
 import React, { useMemo } from 'react';
@@ -43,7 +42,7 @@ export interface RegexpFilterControlProps {
   filter: SqlExpression;
   filterPattern: RegexpFilterPattern;
   setFilterPattern(filterPattern: RegexpFilterPattern): void;
-  runSqlQuery(query: string | SqlQuery, cancelToken?: CancelToken): 
Promise<QueryResult>;
+  runSqlQuery(query: string | SqlQuery, signal?: AbortSignal): 
Promise<QueryResult>;
 }
 
 export const RegexpFilterControl = React.memo(function RegexpFilterControl(
@@ -74,8 +73,8 @@ export const RegexpFilterControl = React.memo(function 
RegexpFilterControl(
     query: previewQuery,
     debounceIdle: 100,
     debounceLoading: 500,
-    processQuery: async (query, cancelToken) => {
-      const vs = await runSqlQuery(query, cancelToken);
+    processQuery: async (query, signal) => {
+      const vs = await runSqlQuery(query, signal);
       return (vs.getColumnByName('c') || []).map(String);
     },
   });
diff --git 
a/web-console/src/views/explore-view/components/filter-pane/filter-menu/values-filter-control/values-filter-control.tsx
 
b/web-console/src/views/explore-view/components/filter-pane/filter-menu/values-filter-control/values-filter-control.tsx
index cf4701fe456..f8761bcada8 100644
--- 
a/web-console/src/views/explore-view/components/filter-pane/filter-menu/values-filter-control/values-filter-control.tsx
+++ 
b/web-console/src/views/explore-view/components/filter-pane/filter-menu/values-filter-control/values-filter-control.tsx
@@ -18,7 +18,6 @@
 
 import { ContextMenu, FormGroup, Menu, MenuItem } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import type { CancelToken } from 'axios';
 import type { QueryResult, SqlQuery, ValuesFilterPattern } from 
'druid-query-toolkit';
 import { C, F, L, SqlExpression } from 'druid-query-toolkit';
 import React, { useMemo, useState } from 'react';
@@ -37,7 +36,7 @@ export interface ValuesFilterControlProps {
   filter: SqlExpression;
   filterPattern: ValuesFilterPattern;
   setFilterPattern(filterPattern: ValuesFilterPattern): void;
-  runSqlQuery(query: string | SqlQuery, cancelToken?: CancelToken): 
Promise<QueryResult>;
+  runSqlQuery(query: string | SqlQuery, signal?: AbortSignal): 
Promise<QueryResult>;
 }
 
 export const ValuesFilterControl = React.memo(function ValuesFilterControl(
@@ -70,8 +69,8 @@ export const ValuesFilterControl = React.memo(function 
ValuesFilterControl(
     query: valuesQuery,
     debounceIdle: 100,
     debounceLoading: 500,
-    processQuery: async (query, cancelToken) => {
-      const vs = await runSqlQuery(query, cancelToken);
+    processQuery: async (query, signal) => {
+      const vs = await runSqlQuery(query, signal);
       return vs.getColumnByName('c') || [];
     },
   });
diff --git 
a/web-console/src/views/explore-view/components/filter-pane/filter-pane.tsx 
b/web-console/src/views/explore-view/components/filter-pane/filter-pane.tsx
index fa62e0d65cd..4402af2439c 100644
--- a/web-console/src/views/explore-view/components/filter-pane/filter-pane.tsx
+++ b/web-console/src/views/explore-view/components/filter-pane/filter-pane.tsx
@@ -18,7 +18,6 @@
 
 import { Button, Popover } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import type { CancelToken } from 'axios';
 import type { Timezone } from 'chronoshift';
 import classNames from 'classnames';
 import { isDate } from 'date-fns';
@@ -52,7 +51,7 @@ export interface FilterPaneProps {
   timezone: Timezone;
   filter: SqlExpression;
   onFilterChange(filter: SqlExpression): void;
-  runSqlQuery(query: string | SqlQuery, cancelToken?: CancelToken): 
Promise<QueryResult>;
+  runSqlQuery(query: string | SqlQuery, signal?: AbortSignal): 
Promise<QueryResult>;
   onAddToSourceQueryAsColumn?: (expression: SqlExpression) => void;
   onMoveToSourceQueryAsClause?: (expression: SqlExpression, changeWhere?: 
SqlExpression) => void;
 }
@@ -82,8 +81,8 @@ export const FilterPane = forwardRef(function 
FilterPane(props: FilterPaneProps,
 
   const [boundsState] = useQueryManager<string, [Date, Date]>({
     query: boundsQuery,
-    processQuery: async (query, cancelToken) => {
-      const boundsData = await runSqlQuery(query, cancelToken);
+    processQuery: async (query, signal) => {
+      const boundsData = await runSqlQuery(query, signal);
       const startEndRecord = boundsData.toObjectArray()[0];
       if (!startEndRecord || !isDate(startEndRecord.start) || 
!isDate(startEndRecord.end)) {
         throw new Error('Unexpected result');
diff --git 
a/web-console/src/views/explore-view/components/helper-table/helper-table.tsx 
b/web-console/src/views/explore-view/components/helper-table/helper-table.tsx
index 2f6ee09153c..147ed686ea9 100644
--- 
a/web-console/src/views/explore-view/components/helper-table/helper-table.tsx
+++ 
b/web-console/src/views/explore-view/components/helper-table/helper-table.tsx
@@ -18,7 +18,6 @@
 
 import { Button, ButtonGroup } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import type { CancelToken } from 'axios';
 import classNames from 'classnames';
 import type { LiteralValue, QueryResult, SqlQuery, ValuesFilterPattern } from 
'druid-query-toolkit';
 import {
@@ -56,7 +55,7 @@ export interface HelperTableProps {
   where: SqlExpression;
   setWhere(where: SqlExpression): void;
   expression: ExpressionMeta;
-  runSqlQuery(query: string | SqlQuery, cancelToken?: CancelToken): 
Promise<QueryResult>;
+  runSqlQuery(query: string | SqlQuery, signal?: AbortSignal): 
Promise<QueryResult>;
   onDelete(): void;
 }
 
@@ -94,8 +93,8 @@ export const HelperTable = React.memo(function 
HelperTable(props: HelperTablePro
     query: valuesQuery,
     debounceIdle: 100,
     debounceLoading: 500,
-    processQuery: async (query, cancelToken) => {
-      const vs = await runSqlQuery(query, cancelToken);
+    processQuery: async (query, signal) => {
+      const vs = await runSqlQuery(query, signal);
       return (vs.toObjectArray() as any) || [];
     },
   });
diff --git a/web-console/src/views/explore-view/explore-view.tsx 
b/web-console/src/views/explore-view/explore-view.tsx
index c73237af02a..9339adf5a2f 100644
--- a/web-console/src/views/explore-view/explore-view.tsx
+++ b/web-console/src/views/explore-view/explore-view.tsx
@@ -20,7 +20,6 @@ import './modules';
 
 import { Button, Intent, Menu, MenuDivider, MenuItem } from 
'@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import type { CancelToken } from 'axios';
 import type { Timezone } from 'chronoshift';
 import classNames from 'classnames';
 import copy from 'copy-to-clipboard';
@@ -59,17 +58,17 @@ const QUERY_LOG = new QueryLog();
 
 const queryRunner = new QueryRunner({
   inflateDateStrategy: 'fromSqlTypes',
-  executor: async (sqlQueryPayload, isSql, cancelToken) => {
+  executor: async ({ payload, isSql, signal }) => {
     if (!isSql) throw new Error('should never get here');
-    QUERY_LOG.addQuery(sqlQueryPayload.query);
-    return Api.instance.post('/druid/v2/sql', sqlQueryPayload, { cancelToken 
});
+    QUERY_LOG.addQuery(payload.query);
+    return Api.instance.post('/druid/v2/sql', payload, { signal });
   },
 });
 
 async function runSqlQuery(
   query: string | SqlQuery,
   timezone: Timezone | undefined,
-  cancelToken?: CancelToken,
+  signal?: AbortSignal,
 ): Promise<QueryResult> {
   try {
     return await queryRunner.runQuery({
@@ -78,28 +77,28 @@ async function runSqlQuery(
         sqlStringifyArrays: false,
       },
       extraQueryContext: timezone ? { sqlTimeZone: timezone.toString() } : 
undefined,
-      cancelToken,
+      signal,
     });
   } catch (e) {
     throw new DruidError(e);
   }
 }
 
-async function introspectSource(source: string, cancelToken?: CancelToken): 
Promise<QuerySource> {
+async function introspectSource(source: string, signal?: AbortSignal): 
Promise<QuerySource> {
   const query = SqlQuery.parse(source);
   const introspectResult = await runSqlQuery(
     QuerySource.makeLimitZeroIntrospectionQuery(query),
     undefined,
-    cancelToken,
+    signal,
   );
 
-  cancelToken?.throwIfRequested();
+  signal?.throwIfAborted();
   const baseIntrospectResult = QuerySource.isSingleStarQuery(query)
     ? introspectResult
     : await runSqlQuery(
         
QuerySource.makeLimitZeroIntrospectionQuery(QuerySource.stripToBaseSource(query)),
         undefined,
-        cancelToken,
+        signal,
       );
 
   return QuerySource.fromIntrospectResult(
@@ -213,7 +212,7 @@ export const ExploreView = React.memo(function 
ExploreView({ capabilities }: Exp
   const runSqlPlusQuery = useMemo(() => {
     return async (
       query: string | SqlQuery | { query: string | SqlQuery; timezone?: 
Timezone },
-      cancelToken?: CancelToken,
+      signal?: AbortSignal,
     ) => {
       if (!querySource) throw new Error('no querySource');
       let parsedQuery: SqlQuery;
@@ -231,7 +230,7 @@ export const ExploreView = React.memo(function 
ExploreView({ capabilities }: Exp
       const { query: rewrittenQuery, maxTime } = await rewriteMaxDataTime(
         rewriteAggregate(parsedQuery, querySource.measures),
       );
-      const results = await runSqlQuery(rewrittenQuery, queryTimezone, 
cancelToken);
+      const results = await runSqlQuery(rewrittenQuery, queryTimezone, signal);
 
       return results
         .attachQuery({ query: '' }, parsedQuery)
diff --git 
a/web-console/src/views/explore-view/module-repository/module-repository.ts 
b/web-console/src/views/explore-view/module-repository/module-repository.ts
index 698dcf03672..905f4b8fc76 100644
--- a/web-console/src/views/explore-view/module-repository/module-repository.ts
+++ b/web-console/src/views/explore-view/module-repository/module-repository.ts
@@ -17,7 +17,6 @@
  */
 
 import type { IconName } from '@blueprintjs/icons';
-import type { CancelToken } from 'axios';
 import type { Timezone } from 'chronoshift';
 import type { QueryResult, SqlExpression, SqlQuery } from 
'druid-query-toolkit';
 
@@ -43,7 +42,7 @@ interface ModuleComponentProps<P> {
   setParameterValues: (parameters: Partial<P>) => void;
   runSqlQuery(
     query: string | SqlQuery | { query: string | SqlQuery; timezone?: Timezone 
},
-    cancelToken?: CancelToken,
+    signal?: AbortSignal,
   ): Promise<QueryResult>;
 }
 
diff --git 
a/web-console/src/views/explore-view/modules/bar-chart-module/bar-chart-module.tsx
 
b/web-console/src/views/explore-view/modules/bar-chart-module/bar-chart-module.tsx
index 6d08c77f987..dac24da809e 100644
--- 
a/web-console/src/views/explore-view/modules/bar-chart-module/bar-chart-module.tsx
+++ 
b/web-console/src/views/explore-view/modules/bar-chart-module/bar-chart-module.tsx
@@ -150,8 +150,8 @@ ModuleRepository.registerModule<BarChartParameterValues>({
 
     const [sourceDataState, queryManager] = useQueryManager({
       query: dataQuery,
-      processQuery: async (query, cancelToken) => {
-        return (await runSqlQuery(query, cancelToken)).toObjectArray();
+      processQuery: async (query, signal) => {
+        return (await runSqlQuery(query, signal)).toObjectArray();
       },
     });
 
diff --git 
a/web-console/src/views/explore-view/modules/grouping-table-module/grouping-table-module.tsx
 
b/web-console/src/views/explore-view/modules/grouping-table-module/grouping-table-module.tsx
index a06b6152722..62e6314b62d 100644
--- 
a/web-console/src/views/explore-view/modules/grouping-table-module/grouping-table-module.tsx
+++ 
b/web-console/src/views/explore-view/modules/grouping-table-module/grouping-table-module.tsx
@@ -274,10 +274,10 @@ 
ModuleRepository.registerModule<GroupingTableParameterValues>({
 
     const [resultState] = useQueryManager({
       query: queryAndMore,
-      processQuery: async (queryAndMore, cancelToken) => {
+      processQuery: async (queryAndMore, signal) => {
         const { timezone, globalWhere, queryAndHints } = queryAndMore;
         const { query, columnHints } = queryAndHints;
-        let result = await runSqlQuery({ query, timezone }, cancelToken);
+        let result = await runSqlQuery({ query, timezone }, signal);
         if (result.sqlQuery) {
           result = result.attachQuery(
             { query: '' },
diff --git 
a/web-console/src/views/explore-view/modules/multi-axis-chart-module/multi-axis-chart-module.tsx
 
b/web-console/src/views/explore-view/modules/multi-axis-chart-module/multi-axis-chart-module.tsx
index 2dff7e42eeb..f945e028345 100644
--- 
a/web-console/src/views/explore-view/modules/multi-axis-chart-module/multi-axis-chart-module.tsx
+++ 
b/web-console/src/views/explore-view/modules/multi-axis-chart-module/multi-axis-chart-module.tsx
@@ -109,12 +109,12 @@ 
ModuleRepository.registerModule<MultiAxisChartParameterValues>({
 
     const [sourceDataState, queryManager] = useQueryManager({
       query: dataQuery,
-      processQuery: async (query, cancelToken) => {
+      processQuery: async (query, signal) => {
         if (!timeColumnName) {
           throw new Error(`Must have a column of type TIMESTAMP for the 
multi-axis chart to work`);
         }
 
-        return (await runSqlQuery(query, cancelToken)).toObjectArray();
+        return (await runSqlQuery(query, signal)).toObjectArray();
       },
     });
 
diff --git 
a/web-console/src/views/explore-view/modules/pie-chart-module/pie-chart-module.tsx
 
b/web-console/src/views/explore-view/modules/pie-chart-module/pie-chart-module.tsx
index cdc6e4df00d..81873f0d87a 100644
--- 
a/web-console/src/views/explore-view/modules/pie-chart-module/pie-chart-module.tsx
+++ 
b/web-console/src/views/explore-view/modules/pie-chart-module/pie-chart-module.tsx
@@ -129,11 +129,8 @@ ModuleRepository.registerModule<PieChartParameterValues>({
 
     const [sourceDataState, queryManager] = useQueryManager({
       query: dataQueries,
-      processQuery: async (
-        { mainQuery, limit, splitExpression, othersPartialQuery },
-        cancelToken,
-      ) => {
-        const result = await runSqlQuery({ query: mainQuery }, cancelToken);
+      processQuery: async ({ mainQuery, limit, splitExpression, 
othersPartialQuery }, signal) => {
+        const result = await runSqlQuery({ query: mainQuery }, signal);
         const data = result.toObjectArray();
 
         if (splitExpression && othersPartialQuery) {
diff --git 
a/web-console/src/views/explore-view/modules/time-chart-module/time-chart-module.tsx
 
b/web-console/src/views/explore-view/modules/time-chart-module/time-chart-module.tsx
index f08dbc4f12c..a8d46d02b57 100644
--- 
a/web-console/src/views/explore-view/modules/time-chart-module/time-chart-module.tsx
+++ 
b/web-console/src/views/explore-view/modules/time-chart-module/time-chart-module.tsx
@@ -243,7 +243,7 @@ ModuleRepository.registerModule<TimeChartParameterValues>({
           showOthers,
           oneExtra,
         },
-        cancelToken,
+        signal,
       ) => {
         if (!timeColumnName) {
           throw new Error(`Must have a column of type TIMESTAMP for the time 
chart to work`);
@@ -265,12 +265,12 @@ 
ModuleRepository.registerModule<TimeChartParameterValues>({
                     .changeLimitValue(maxFacets + (showOthers ? 1 : 0)), // If 
we want to show others add 1 to check if we need to query for them
                   timezone,
                 },
-                cancelToken,
+                signal,
               )
             ).getColumnByIndex(0)!
           : undefined;
 
-        cancelToken.throwIfRequested();
+        signal.throwIfAborted();
 
         if (detectedFacets?.length === 0) {
           // If detectedFacets is empty then there is no data at all and no 
need to do a larger query
@@ -322,7 +322,7 @@ ModuleRepository.registerModule<TimeChartParameterValues>({
               ),
             timezone,
           },
-          cancelToken,
+          signal,
         );
 
         const dataset = result.toObjectArray().map(
diff --git 
a/web-console/src/views/home-view/datasources-card/datasources-card.tsx 
b/web-console/src/views/home-view/datasources-card/datasources-card.tsx
index 099e2928404..e80c5cadd3f 100644
--- a/web-console/src/views/home-view/datasources-card/datasources-card.tsx
+++ b/web-console/src/views/home-view/datasources-card/datasources-card.tsx
@@ -31,17 +31,17 @@ export interface DatasourcesCardProps {
 export const DatasourcesCard = React.memo(function DatasourcesCard(props: 
DatasourcesCardProps) {
   const [datasourceCountState] = useQueryManager<Capabilities, number>({
     initQuery: props.capabilities,
-    processQuery: async (capabilities, cancelToken) => {
+    processQuery: async (capabilities, signal) => {
       let datasources: string[];
       if (capabilities.hasSql()) {
         datasources = await queryDruidSql(
           {
             query: `SELECT datasource FROM sys.segments GROUP BY 1`,
           },
-          cancelToken,
+          signal,
         );
       } else if (capabilities.hasCoordinatorAccess()) {
-        datasources = await 
getApiArray<string>('/druid/coordinator/v1/datasources', cancelToken);
+        datasources = await 
getApiArray<string>('/druid/coordinator/v1/datasources', signal);
       } else {
         throw new Error(`must have SQL or coordinator access`);
       }
diff --git a/web-console/src/views/home-view/lookups-card/lookups-card.tsx 
b/web-console/src/views/home-view/lookups-card/lookups-card.tsx
index abf1bff8159..edb81a5de56 100644
--- a/web-console/src/views/home-view/lookups-card/lookups-card.tsx
+++ b/web-console/src/views/home-view/lookups-card/lookups-card.tsx
@@ -33,10 +33,10 @@ export interface LookupsCardProps {
 export const LookupsCard = React.memo(function LookupsCard(props: 
LookupsCardProps) {
   const [lookupsCountState] = useQueryManager<Capabilities, number>({
     initQuery: props.capabilities,
-    processQuery: async (capabilities, cancelToken) => {
+    processQuery: async (capabilities, signal) => {
       if (capabilities.hasCoordinatorAccess()) {
         const resp = await 
Api.instance.get('/druid/coordinator/v1/lookups/status', {
-          cancelToken,
+          signal,
         });
         const data = resp.data;
         return sum(Object.keys(data).map(k => Object.keys(data[k]).length));
diff --git a/web-console/src/views/home-view/segments-card/segments-card.tsx 
b/web-console/src/views/home-view/segments-card/segments-card.tsx
index 78d9f430632..8278ff86a3d 100644
--- a/web-console/src/views/home-view/segments-card/segments-card.tsx
+++ b/web-console/src/views/home-view/segments-card/segments-card.tsx
@@ -40,7 +40,7 @@ export interface SegmentsCardProps {
 export const SegmentsCard = React.memo(function SegmentsCard(props: 
SegmentsCardProps) {
   const [segmentCountState] = useQueryManager<Capabilities, SegmentCounts>({
     initQuery: props.capabilities,
-    processQuery: async (capabilities, cancelToken) => {
+    processQuery: async (capabilities, signal) => {
       if (capabilities.hasSql()) {
         const segments = await queryDruidSql(
           {
@@ -52,19 +52,19 @@ export const SegmentsCard = React.memo(function 
SegmentsCard(props: SegmentsCard
 FROM sys.segments
 WHERE is_active = 1`,
           },
-          cancelToken,
+          signal,
         );
         return segments.length === 1 ? segments[0] : null;
       } else if (capabilities.hasCoordinatorAccess()) {
         const loadstatusResp = await 
Api.instance.get('/druid/coordinator/v1/loadstatus?simple', {
-          cancelToken,
+          signal,
         });
         const loadstatus = loadstatusResp.data;
         const unavailableSegmentNum = sum(Object.keys(loadstatus), key => 
loadstatus[key]);
 
         const datasourcesMeta = await getApiArray(
           '/druid/coordinator/v1/datasources?simple',
-          cancelToken,
+          signal,
         );
         const availableSegmentNum = sum(datasourcesMeta, (curr: any) =>
           deepGet(curr, 'properties.segments.count'),
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 07f0e15d966..4689a8861bf 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
@@ -42,7 +42,7 @@ export interface ServicesCardProps {
 
 export const ServicesCard = React.memo(function ServicesCard(props: 
ServicesCardProps) {
   const [serviceCountState] = useQueryManager<Capabilities, ServiceCounts>({
-    processQuery: async (capabilities, cancelToken) => {
+    processQuery: async (capabilities, signal) => {
       if (capabilities.hasSql()) {
         const serviceCountsFromQuery = await queryDruidSql<{
           service_type: string;
@@ -51,7 +51,7 @@ export const ServicesCard = React.memo(function 
ServicesCard(props: ServicesCard
           {
             query: `SELECT server_type AS "service_type", COUNT(*) as "count" 
FROM sys.servers GROUP BY 1`,
           },
-          cancelToken,
+          signal,
         );
         return lookupBy(
           serviceCountsFromQuery,
@@ -59,10 +59,10 @@ export const ServicesCard = React.memo(function 
ServicesCard(props: ServicesCard
           x => x.count,
         );
       } else if (capabilities.hasCoordinatorAccess()) {
-        const services = await 
getApiArray('/druid/coordinator/v1/servers?simple', cancelToken);
+        const services = await 
getApiArray('/druid/coordinator/v1/servers?simple', signal);
 
         const middleManager = capabilities.hasOverlordAccess()
-          ? await getApiArray('/druid/indexer/v1/workers', cancelToken)
+          ? await getApiArray('/druid/indexer/v1/workers', signal)
           : [];
 
         return {
diff --git a/web-console/src/views/home-view/status-card/status-card.tsx 
b/web-console/src/views/home-view/status-card/status-card.tsx
index 65785f27e48..15d5881df60 100644
--- a/web-console/src/views/home-view/status-card/status-card.tsx
+++ b/web-console/src/views/home-view/status-card/status-card.tsx
@@ -34,8 +34,8 @@ export const StatusCard = React.memo(function StatusCard() {
   const [showStatusDialog, setShowStatusDialog] = useState(false);
   const [statusSummaryState] = useQueryManager<null, StatusSummary>({
     initQuery: null,
-    processQuery: async (_, cancelToken) => {
-      const statusResp = await Api.instance.get('/status', { cancelToken });
+    processQuery: async (_, signal) => {
+      const statusResp = await Api.instance.get('/status', { signal });
       return {
         version: statusResp.data.version,
         extensionCount: statusResp.data.modules.length,
diff --git 
a/web-console/src/views/home-view/supervisors-card/supervisors-card.tsx 
b/web-console/src/views/home-view/supervisors-card/supervisors-card.tsx
index bd1671a9fec..cfd45ccadce 100644
--- a/web-console/src/views/home-view/supervisors-card/supervisors-card.tsx
+++ b/web-console/src/views/home-view/supervisors-card/supervisors-card.tsx
@@ -36,7 +36,7 @@ export interface SupervisorsCardProps {
 
 export const SupervisorsCard = React.memo(function SupervisorsCard(props: 
SupervisorsCardProps) {
   const [supervisorCountState] = useQueryManager<Capabilities, 
SupervisorCounts>({
-    processQuery: async (capabilities, cancelToken) => {
+    processQuery: async (capabilities, signal) => {
       if (capabilities.hasSql()) {
         return (
           await queryDruidSql(
@@ -46,13 +46,13 @@ export const SupervisorsCard = React.memo(function 
SupervisorsCard(props: Superv
   COUNT(*) FILTER (WHERE "suspended" = 1) AS "suspended"
 FROM sys.supervisors`,
             },
-            cancelToken,
+            signal,
           )
         )[0];
       } else if (capabilities.hasOverlordAccess()) {
         const supervisors = await getApiArray<{ spec: IngestionSpec }>(
           '/druid/indexer/v1/supervisor?full',
-          cancelToken,
+          signal,
         );
         const [running, suspended] = partition(supervisors, d => 
!d.spec.suspended);
         return {
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 3eb229e3bf0..40493e52275 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
@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-import type { CancelToken } from 'axios';
 import React from 'react';
 
 import { PluralPairIfNeeded } from '../../../components';
@@ -40,10 +39,7 @@ export interface TaskCounts {
   waiting?: number;
 }
 
-async function getTaskCounts(
-  capabilities: Capabilities,
-  cancelToken: CancelToken,
-): Promise<TaskCounts> {
+async function getTaskCounts(capabilities: Capabilities, signal: AbortSignal): 
Promise<TaskCounts> {
   if (capabilities.hasSql()) {
     const taskCountsFromQuery = await queryDruidSql<{ status: string; count: 
number }>(
       {
@@ -53,7 +49,7 @@ async function getTaskCounts(
 FROM sys.tasks
 GROUP BY 1`,
       },
-      cancelToken,
+      signal,
     );
     return lookupBy(
       taskCountsFromQuery,
@@ -61,7 +57,7 @@ GROUP BY 1`,
       x => x.count,
     );
   } else if (capabilities.hasOverlordAccess()) {
-    const tasks: any[] = await getApiArray('/druid/indexer/v1/tasks', 
cancelToken);
+    const tasks: any[] = await getApiArray('/druid/indexer/v1/tasks', signal);
     return groupByAsMap(
       tasks,
       d => getTaskStatus(d).toLowerCase(),
@@ -81,8 +77,8 @@ export interface TasksCardProps {
 export const TasksCard = React.memo(function TasksCard(props: TasksCardProps) {
   const [cardState] = useQueryManager<Capabilities, TaskCountsAndCapacity>({
     initQuery: props.capabilities,
-    processQuery: async (capabilities, cancelToken) => {
-      const taskCounts = await getTaskCounts(capabilities, cancelToken);
+    processQuery: async (capabilities, signal) => {
+      const taskCounts = await getTaskCounts(capabilities, signal);
       if (!capabilities.hasOverlordAccess()) return taskCounts;
 
       const capacity = await getClusterCapacity();
diff --git a/web-console/src/views/lookups-view/lookups-view.tsx 
b/web-console/src/views/lookups-view/lookups-view.tsx
index 384305744e0..e66efbed062 100644
--- a/web-console/src/views/lookups-view/lookups-view.tsx
+++ b/web-console/src/views/lookups-view/lookups-view.tsx
@@ -124,16 +124,16 @@ export class LookupsView extends 
React.PureComponent<LookupsViewProps, LookupsVi
     };
 
     this.lookupsQueryManager = new QueryManager({
-      processQuery: async (_, cancelToken) => {
+      processQuery: async (_, signal) => {
         const tiersResp = await getApiArray(
           '/druid/coordinator/v1/lookups/config?discover=true',
-          cancelToken,
+          signal,
         );
         const tiers =
           tiersResp.length > 0 ? tiersResp.sort(tierNameCompare) : 
[DEFAULT_LOOKUP_TIER];
 
         const lookupResp = await 
Api.instance.get('/druid/coordinator/v1/lookups/config/all', {
-          cancelToken,
+          signal,
         });
         const lookupData = lookupResp.data;
 
diff --git a/web-console/src/views/segments-view/segments-view.tsx 
b/web-console/src/views/segments-view/segments-view.tsx
index 967b3e55755..61ff034e7bb 100644
--- a/web-console/src/views/segments-view/segments-view.tsx
+++ b/web-console/src/views/segments-view/segments-view.tsx
@@ -299,7 +299,7 @@ export class SegmentsView extends 
React.PureComponent<SegmentsViewProps, Segment
 
     this.segmentsQueryManager = new QueryManager({
       debounceIdle: 500,
-      processQuery: async (query: SegmentsQuery, cancelToken, 
setIntermediateQuery) => {
+      processQuery: async (query: SegmentsQuery, signal, setIntermediateQuery) 
=> {
         const { page, pageSize, filtered, sorted, visibleColumns, 
capabilities, groupByInterval } =
           query;
 
@@ -373,10 +373,7 @@ export class SegmentsView extends 
React.PureComponent<SegmentsViewProps, Segment
           }
           const sqlQuery = queryParts.join('\n');
           setIntermediateQuery(sqlQuery);
-          let result = await queryDruidSql(
-            { query: sqlQuery, context: sqlQueryContext },
-            cancelToken,
-          );
+          let result = await queryDruidSql({ query: sqlQuery, context: 
sqlQueryContext }, signal);
 
           if (visibleColumns.shown('Shard type', 'Shard spec')) {
             result = result.map(sr => ({
@@ -387,7 +384,7 @@ export class SegmentsView extends 
React.PureComponent<SegmentsViewProps, Segment
 
           segments = result as SegmentQueryResultRow[];
 
-          auxiliaryQueries.push(async (segmentsWithAuxiliaryInfo, cancelToken) 
=> {
+          auxiliaryQueries.push(async (segmentsWithAuxiliaryInfo, signal) => {
             const sqlQuery = assemble(
               'SELECT COUNT(*) AS "cnt"',
               'FROM "sys"."segments"',
@@ -398,7 +395,7 @@ export class SegmentsView extends 
React.PureComponent<SegmentsViewProps, Segment
                 {
                   query: sqlQuery,
                 },
-                cancelToken,
+                signal,
               )
             )[0].cnt;
             return {
@@ -411,7 +408,7 @@ export class SegmentsView extends 
React.PureComponent<SegmentsViewProps, Segment
           const datasourceFilter = filtered.find(({ id }) => id === 
'datasource');
           if (datasourceFilter) {
             datasourceList = (
-              await getApiArray('/druid/coordinator/v1/metadata/datasources', 
cancelToken)
+              await getApiArray('/druid/coordinator/v1/metadata/datasources', 
signal)
             ).filter((datasource: string) =>
               booleanCustomTableFilter(datasourceFilter, datasource),
             );
@@ -422,7 +419,7 @@ export class SegmentsView extends 
React.PureComponent<SegmentsViewProps, Segment
               
`/druid/coordinator/v1/metadata/segments?includeOvershadowedStatus&includeRealtimeSegments${datasourceList
                 .map(d => `&datasources=${Api.encodePath(d)}`)
                 .join('')}`,
-              cancelToken,
+              signal,
             )
           ).map((segment: any) => {
             const [start, end] = segment.interval.split('/');
diff --git a/web-console/src/views/services-view/services-view.tsx 
b/web-console/src/views/services-view/services-view.tsx
index 408d4ddb274..ea9c5653e9d 100644
--- a/web-console/src/views/services-view/services-view.tsx
+++ b/web-console/src/views/services-view/services-view.tsx
@@ -267,12 +267,12 @@ ORDER BY
     };
 
     this.serviceQueryManager = new QueryManager({
-      processQuery: async ({ capabilities, visibleColumns }, cancelToken) => {
+      processQuery: async ({ capabilities, visibleColumns }, signal) => {
         let services: ServiceResultRow[];
         if (capabilities.hasSql()) {
-          services = await queryDruidSql({ query: ServicesView.SERVICE_SQL }, 
cancelToken);
+          services = await queryDruidSql({ query: ServicesView.SERVICE_SQL }, 
signal);
         } else if (capabilities.hasCoordinatorAccess()) {
-          services = (await 
getApiArray('/druid/coordinator/v1/servers?simple', cancelToken)).map(
+          services = (await 
getApiArray('/druid/coordinator/v1/servers?simple', signal)).map(
             (s: any): ServiceResultRow => {
               const hostParts = s.host.split(':');
               const port = parseInt(hostParts[1], 10);
@@ -297,12 +297,12 @@ ORDER BY
         const auxiliaryQueries: AuxiliaryQueryFn<ServicesWithAuxiliaryInfo>[] 
= [];
 
         if (capabilities.hasCoordinatorAccess() && 
visibleColumns.shown('Detail')) {
-          auxiliaryQueries.push(async (servicesWithAuxiliaryInfo, cancelToken) 
=> {
+          auxiliaryQueries.push(async (servicesWithAuxiliaryInfo, signal) => {
             try {
               const loadQueueInfos = (
                 await Api.instance.get<Record<string, LoadQueueInfo>>(
                   '/druid/coordinator/v1/loadqueue?simple',
-                  { cancelToken },
+                  { signal },
                 )
               ).data;
               return {
@@ -321,11 +321,11 @@ ORDER BY
         }
 
         if (capabilities.hasOverlordAccess()) {
-          auxiliaryQueries.push(async (servicesWithAuxiliaryInfo, cancelToken) 
=> {
+          auxiliaryQueries.push(async (servicesWithAuxiliaryInfo, signal) => {
             try {
               const workerInfos = await getApiArray<WorkerInfo>(
                 '/druid/indexer/v1/workers',
-                cancelToken,
+                signal,
               );
 
               const workerInfoLookup: Record<string, WorkerInfo> = lookupBy(
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
index bfdca3c79c8..d383a5d3459 100644
--- 
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
@@ -48,10 +48,10 @@ export const IngestionProgressDialog = React.memo(function 
IngestionProgressDial
 
   const [insertResultState, ingestQueryManager] = useQueryManager<string, 
Execution, Execution>({
     initQuery: taskId,
-    processQuery: async (id, cancelToken) => {
+    processQuery: async (id, signal) => {
       return await reattachTaskExecution({
         id,
-        cancelToken,
+        signal,
         preserveOnTermination: true,
       });
     },
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
index e93ec9e9a00..89c67ed7039 100644
--- 
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
@@ -18,7 +18,6 @@
 
 import { Button, Callout, Intent, Tag } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import type { CancelToken } from 'axios';
 import type { QueryResult, SqlQuery } from 'druid-query-toolkit';
 import { F, SqlExpression, SqlFunction } from 'druid-query-toolkit';
 import type { JSX } from 'react';
@@ -152,7 +151,7 @@ export const RollupAnalysisPane = React.memo(function 
RollupAnalysisPane(
     AnalyzeResult,
     Execution
   >({
-    processQuery: async (analyzeQuery: AnalyzeQuery, cancelToken) => {
+    processQuery: async (analyzeQuery: AnalyzeQuery, signal) => {
       const { expressions, deep } = analyzeQuery;
 
       const groupedAsStrings = expressions.map(ex =>
@@ -179,7 +178,7 @@ export const RollupAnalysisPane = React.memo(function 
RollupAnalysisPane(
       const res = await submitTaskQuery({
         query: queryString,
         context: {},
-        cancelToken,
+        signal,
       });
 
       if (res instanceof IntermediateQueryState) return res;
@@ -193,9 +192,9 @@ export const RollupAnalysisPane = React.memo(function 
RollupAnalysisPane(
     backgroundStatusCheck: async (
       execution: Execution,
       analyzeQuery: AnalyzeQuery,
-      cancelToken: CancelToken,
+      signal: AbortSignal,
     ) => {
-      const res = await executionBackgroundStatusCheck(execution, 
analyzeQuery, cancelToken);
+      const res = await executionBackgroundStatusCheck(execution, 
analyzeQuery, signal);
       if (res instanceof IntermediateQueryState) return res;
 
       if (res.result) {
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
index dd5bdd89da5..14a8e59e98f 100644
--- 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
@@ -401,14 +401,14 @@ export const SchemaStep = function SchemaStep(props: 
SchemaStepProps) {
 
   const [existingTableState] = useQueryManager<string, string[]>({
     initQuery: '',
-    processQuery: async (_, cancelToken) => {
+    processQuery: async (_, signal) => {
       // 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',
         },
-        cancelToken,
+        signal,
       );
 
       return tables.map(t => t[0]);
@@ -423,7 +423,7 @@ export const SchemaStep = function SchemaStep(props: 
SchemaStepProps) {
 
   const [sampleState] = useQueryManager<ExternalConfig, QueryResult, 
Execution>({
     query: sampleExternalConfig,
-    processQuery: async (sampleExternalConfig, cancelToken) => {
+    processQuery: async (sampleExternalConfig, signal) => {
       const sampleResponse = await postToSampler(
         {
           type: 'index_parallel',
@@ -466,7 +466,7 @@ export const SchemaStep = function SchemaStep(props: 
SchemaStepProps) {
           },
         },
         'sample',
-        cancelToken,
+        signal,
       );
 
       const columns = getHeaderFromSampleResponse(sampleResponse).map(({ name, 
type }) => {
@@ -501,7 +501,7 @@ export const SchemaStep = function SchemaStep(props: 
SchemaStepProps) {
 
   const [previewResultState] = useQueryManager<string, QueryResult, 
Execution>({
     query: previewQueryString,
-    processQuery: async (previewQueryString, cancelToken) => {
+    processQuery: async (previewQueryString, signal) => {
       if (WorkbenchQuery.isTaskEngineNeeded(previewQueryString)) {
         return extractResult(
           await submitTaskQuery({
@@ -511,7 +511,7 @@ export const SchemaStep = function SchemaStep(props: 
SchemaStepProps) {
               finalizeAggregations: false,
               sqlOuterLimit: 25,
             },
-            cancelToken,
+            signal,
           }),
         );
       } else {
@@ -520,7 +520,7 @@ export const SchemaStep = function SchemaStep(props: 
SchemaStepProps) {
           result = await queryRunner.runQuery({
             query: previewQueryString,
             extraQueryContext: { sqlOuterLimit: 25, sqlStringifyArrays: false 
},
-            cancelToken,
+            signal,
           });
         } catch (e) {
           throw new DruidError(e);
diff --git a/web-console/src/views/supervisors-view/supervisors-view.tsx 
b/web-console/src/views/supervisors-view/supervisors-view.tsx
index 4c28493f360..3da20ee8ec3 100644
--- a/web-console/src/views/supervisors-view/supervisors-view.tsx
+++ b/web-console/src/views/supervisors-view/supervisors-view.tsx
@@ -281,7 +281,7 @@ export class SupervisorsView extends React.PureComponent<
     this.supervisorQueryManager = new QueryManager({
       processQuery: async (
         { capabilities, visibleColumns, filtered, sorted, page, pageSize },
-        cancelToken,
+        signal,
         setIntermediateQuery,
       ) => {
         let supervisors: SupervisorQueryResultRow[];
@@ -318,7 +318,7 @@ export class SupervisorsView extends React.PureComponent<
               {
                 query: sqlQuery,
               },
-              cancelToken,
+              signal,
             )
           ).map(supervisor => {
             const spec: any = supervisor.spec;
@@ -326,7 +326,7 @@ export class SupervisorsView extends React.PureComponent<
             return { ...supervisor, spec: JSONBig.parse(spec) };
           });
 
-          auxiliaryQueries.push(async (supervisorsWithAuxiliaryInfo, 
cancelToken) => {
+          auxiliaryQueries.push(async (supervisorsWithAuxiliaryInfo, signal) 
=> {
             const sqlQuery = assemble(
               'SELECT COUNT(*) AS "cnt"',
               'FROM "sys"."supervisors"',
@@ -337,7 +337,7 @@ export class SupervisorsView extends React.PureComponent<
                 {
                   query: sqlQuery,
                 },
-                cancelToken,
+                signal,
               )
             )[0].cnt;
             return {
@@ -346,7 +346,7 @@ export class SupervisorsView extends React.PureComponent<
             };
           });
         } else if (capabilities.hasOverlordAccess()) {
-          supervisors = (await 
getApiArray('/druid/indexer/v1/supervisor?full', cancelToken)).map(
+          supervisors = (await 
getApiArray('/druid/indexer/v1/supervisor?full', signal)).map(
             (sup: any) => {
               return {
                 supervisor_id: deepGet(sup, 'id'),
@@ -384,13 +384,13 @@ export class SupervisorsView extends React.PureComponent<
             auxiliaryQueries.push(
               ...supervisors.map(
                 (supervisor): AuxiliaryQueryFn<SupervisorsWithAuxiliaryInfo> =>
-                  async (supervisorsWithAuxiliaryInfo, cancelToken) => {
+                  async (supervisorsWithAuxiliaryInfo, signal) => {
                     const status = (
                       await Api.instance.get(
                         `/druid/indexer/v1/supervisor/${Api.encodePath(
                           supervisor.supervisor_id,
                         )}/status`,
-                        { cancelToken, timeout: STATUS_API_TIMEOUT },
+                        { signal, timeout: STATUS_API_TIMEOUT },
                       )
                     ).data;
                     return {
@@ -411,13 +411,13 @@ export class SupervisorsView extends React.PureComponent<
                 supervisors,
                 (supervisor): AuxiliaryQueryFn<SupervisorsWithAuxiliaryInfo> | 
undefined => {
                   if (oneOf(supervisor.type, 'autocompact', 
'scheduled_batch')) return; // These supervisors do not report stats
-                  return async (supervisorsWithAuxiliaryInfo, cancelToken) => {
+                  return async (supervisorsWithAuxiliaryInfo, signal) => {
                     const stats = (
                       await Api.instance.get(
                         `/druid/indexer/v1/supervisor/${Api.encodePath(
                           supervisor.supervisor_id,
                         )}/stats`,
-                        { cancelToken, timeout: STATS_API_TIMEOUT },
+                        { signal, timeout: STATS_API_TIMEOUT },
                       )
                     ).data;
                     return {
diff --git a/web-console/src/views/tasks-view/tasks-view.tsx 
b/web-console/src/views/tasks-view/tasks-view.tsx
index 216345d8aaa..bc32ba8c4a4 100644
--- a/web-console/src/views/tasks-view/tasks-view.tsx
+++ b/web-console/src/views/tasks-view/tasks-view.tsx
@@ -177,16 +177,16 @@ ORDER BY
     };
 
     this.taskQueryManager = new QueryManager({
-      processQuery: async (capabilities, cancelToken) => {
+      processQuery: async (capabilities, signal) => {
         if (capabilities.hasSql()) {
           return await queryDruidSql(
             {
               query: TasksView.TASK_SQL,
             },
-            cancelToken,
+            signal,
           );
         } else if (capabilities.hasOverlordAccess()) {
-          return (await getApiArray(`/druid/indexer/v1/tasks`, 
cancelToken)).map(d => {
+          return (await getApiArray(`/druid/indexer/v1/tasks`, signal)).map(d 
=> {
             return {
               task_id: d.id,
               group_id: d.groupId,
diff --git 
a/web-console/src/views/workbench-view/current-dart-panel/current-dart-panel.tsx
 
b/web-console/src/views/workbench-view/current-dart-panel/current-dart-panel.tsx
index 51ea233ab0b..2160bbbf654 100644
--- 
a/web-console/src/views/workbench-view/current-dart-panel/current-dart-panel.tsx
+++ 
b/web-console/src/views/workbench-view/current-dart-panel/current-dart-panel.tsx
@@ -61,9 +61,9 @@ export const CurrentDartPanel = React.memo(function 
CurrentViberPanel(
 
   const [dartQueryEntriesState, queryManager] = useQueryManager<number, 
DartQueryEntry[]>({
     query: useStore(WORK_STATE_STORE, getMsqDartVersion),
-    processQuery: async (_, cancelToken) => {
+    processQuery: async (_, signal) => {
       return (
-        (await Api.instance.get('/druid/v2/sql/queries', { cancelToken })).data
+        (await Api.instance.get('/druid/v2/sql/queries', { signal })).data
           .queries as DartQueryEntry[]
       ).filter(q => q.engine === 'msq-dart');
     },
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
index 69c84e57d35..8a06877f6bf 100644
--- 
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
@@ -41,8 +41,8 @@ export const ExecutionDetailsPaneLoader = React.memo(function 
ExecutionDetailsPa
   const [executionState, queryManager] = useQueryManager<string, Execution>({
     initQuery: initExecution ? undefined : id,
     initState: initExecution ? new QueryState({ data: initExecution }) : 
undefined,
-    processQuery: (id, cancelToken) => {
-      return getTaskExecution(id, undefined, cancelToken);
+    processQuery: (id, signal) => {
+      return getTaskExecution(id, undefined, signal);
     },
   });
 
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
index 37dbb0b3577..a02841b9b5d 100644
--- 
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
@@ -36,8 +36,8 @@ export const ExecutionStagesPaneLoader = React.memo(function 
ExecutionStagesPane
 
   const [executionState, queryManager] = useQueryManager<string, Execution>({
     initQuery: id,
-    processQuery: (id, cancelToken) => {
-      return getTaskExecution(id, undefined, cancelToken);
+    processQuery: (id, signal) => {
+      return getTaskExecution(id, undefined, signal);
     },
   });
 
diff --git 
a/web-console/src/views/workbench-view/explain-dialog/explain-dialog.tsx 
b/web-console/src/views/workbench-view/explain-dialog/explain-dialog.tsx
index 52d098e913e..7e9a30fbe3b 100644
--- a/web-console/src/views/workbench-view/explain-dialog/explain-dialog.tsx
+++ b/web-console/src/views/workbench-view/explain-dialog/explain-dialog.tsx
@@ -67,7 +67,7 @@ export const ExplainDialog = React.memo(function 
ExplainDialog(props: ExplainDia
 
   const [explainState] = useQueryManager<QueryContextEngine, 
QueryExplanation[] | string>({
     initQuery: queryWithContext,
-    processQuery: async (queryWithContext, cancelToken) => {
+    processQuery: async (queryWithContext, signal) => {
       const { engine, queryString, queryContext, wrapQueryLimit } = 
queryWithContext;
 
       let context: QueryContext | undefined;
@@ -91,12 +91,12 @@ export const ExplainDialog = React.memo(function 
ExplainDialog(props: ExplainDia
       switch (engine) {
         case 'sql-native':
         case 'sql-msq-dart':
-          result = await queryDruidSql(payload, cancelToken);
+          result = await queryDruidSql(payload, signal);
           break;
 
         case 'sql-msq-task':
           try {
-            result = (await Api.instance.post(`/druid/v2/sql/task`, payload, { 
cancelToken })).data;
+            result = (await Api.instance.post(`/druid/v2/sql/task`, payload, { 
signal })).data;
           } catch (e) {
             throw new Error(getDruidErrorMessage(e));
           }
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
index cd9e961ec0c..d7e9829708f 100644
--- 
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
@@ -105,7 +105,7 @@ export const InputFormatStep = React.memo(function 
InputFormatStep(props: InputF
 
   const [previewState] = useQueryManager<InputSourceAndFormat, 
SampleResponse>({
     query: inputSourceAndFormatToSample,
-    processQuery: async ({ inputSource, inputFormat }, cancelToken) => {
+    processQuery: async ({ inputSource, inputFormat }, signal) => {
       const fixedFormatSource = inputSource.type === 'delta';
       if (!fixedFormatSource && !isValidInputFormat(inputFormat))
         throw new Error('invalid input format');
@@ -138,7 +138,7 @@ export const InputFormatStep = React.memo(function 
InputFormatStep(props: InputF
         },
       };
 
-      return await postToSampler(sampleSpec, 'input-format-step', cancelToken);
+      return await postToSampler(sampleSpec, 'input-format-step', signal);
     },
   });
 
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
index b5ef35146d6..8847d071448 100644
--- 
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
@@ -90,7 +90,7 @@ export const InputSourceStep = React.memo(function 
InputSourceStep(props: InputS
     InputFormat,
     Execution
   >({
-    processQuery: async ({ inputSource, suggestedInputFormat }, cancelToken) 
=> {
+    processQuery: async ({ inputSource, suggestedInputFormat }, signal) => {
       const fixedFormat = FIXED_FORMAT_FOR_SOURCE[inputSource.type];
 
       const sampleSpec: SampleSpec = {
@@ -123,7 +123,7 @@ export const InputSourceStep = React.memo(function 
InputSourceStep(props: InputS
         },
       };
 
-      const sampleResponse = await postToSampler(sampleSpec, 
'input-source-step', cancelToken);
+      const sampleResponse = await postToSampler(sampleSpec, 
'input-source-step', signal);
       const sampleLines = filterMap(
         sampleResponse.data,
         fixedFormat ? l => l.input : l => (l.input ? l.input.raw : undefined),
@@ -151,8 +151,8 @@ export const InputSourceStep = React.memo(function 
InputSourceStep(props: InputS
 
       return guessedInputFormat;
     },
-    backgroundStatusCheck: async (execution, query, cancelToken) => {
-      const result = await executionBackgroundResultStatusCheck(execution, 
query, cancelToken);
+    backgroundStatusCheck: async (execution, query, signal) => {
+      const result = await executionBackgroundResultStatusCheck(execution, 
query, signal);
       if (result instanceof IntermediateQueryState) return result;
       return resultToInputFormat(result);
     },
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
index d07cdef58a2..0bbc26024d9 100644
--- a/web-console/src/views/workbench-view/query-tab/query-tab.tsx
+++ b/web-console/src/views/workbench-view/query-tab/query-tab.tsx
@@ -18,7 +18,6 @@
 
 import { Code, Intent } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import axios from 'axios';
 import { QueryResult, QueryRunner, SqlQuery } from 'druid-query-toolkit';
 import type { JSX } from 'react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
@@ -201,7 +200,7 @@ export const QueryTab = React.memo(function QueryTab(props: 
QueryTabProps) {
   >({
     initQuery: cachedExecutionState ? undefined : currentRunningPromise || 
query.getLastExecution(),
     initState: cachedExecutionState,
-    processQuery: async (q, cancelToken) => {
+    processQuery: async (q, signal) => {
       if (q instanceof WorkbenchQuery) {
         ExecutionStateCache.deleteState(id);
         const { engine, query, prefixLines, cancelQueryId } = q.getApiQuery();
@@ -214,7 +213,7 @@ export const QueryTab = React.memo(function QueryTab(props: 
QueryTabProps) {
               context: mandatoryQueryContext,
               baseQueryContext,
               prefixLines,
-              cancelToken,
+              signal,
               preserveOnTermination: true,
               onSubmitted: id => {
                 onQueryChange(props.query.changeLastExecution({ engine, id }));
@@ -224,28 +223,28 @@ export const QueryTab = React.memo(function 
QueryTab(props: QueryTabProps) {
           case 'native':
           case 'sql-native': {
             if (cancelQueryId) {
-              void cancelToken.promise
-                .then(cancel => {
-                  if (cancel.message === QueryManager.TERMINATION_MESSAGE) 
return;
-                  return Api.instance.delete(
+              signal.addEventListener('abort', () => {
+                if (signal.reason === QueryManager.TERMINATION_MESSAGE) return;
+                Api.instance
+                  .delete(
                     `/druid/v2${engine === 'sql-native' ? '/sql' : 
''}/${Api.encodePath(
                       cancelQueryId,
                     )}`,
-                  );
-                })
-                .catch(() => {});
+                  )
+                  .catch(() => {});
+              });
             }
 
             onQueryChange(props.query.changeLastExecution(undefined));
 
+            const controller = new AbortController();
+            nativeQueryCancelFnRef.current = () => controller.abort();
             const executionPromise = queryRunner
               .runQuery({
                 query,
                 extraQueryContext: mandatoryQueryContext,
                 defaultQueryContext: baseQueryContext,
-                cancelToken: new axios.CancelToken(cancelFn => {
-                  nativeQueryCancelFnRef.current = cancelFn;
-                }),
+                signal: controller.signal,
               })
               .then(
                 queryResult => Execution.fromResult(engine, queryResult),
@@ -275,21 +274,21 @@ export const QueryTab = React.memo(function 
QueryTab(props: QueryTabProps) {
 
           case 'sql-msq-dart': {
             if (cancelQueryId) {
-              void cancelToken.promise
-                .then(cancel => {
-                  if (cancel.message === QueryManager.TERMINATION_MESSAGE) 
return;
-                  return 
Api.instance.delete(`/druid/v2/sql/${Api.encodePath(cancelQueryId)}`);
-                })
-                .catch(() => {});
+              signal.addEventListener('abort', () => {
+                if (signal.reason === QueryManager.TERMINATION_MESSAGE) return;
+                Api.instance
+                  .delete(`/druid/v2/sql/${Api.encodePath(cancelQueryId)}`)
+                  .catch(() => {});
+              });
             }
 
             onQueryChange(props.query.changeLastExecution(undefined));
 
+            const controller = new AbortController();
+            nativeQueryCancelFnRef.current = () => controller.abort();
             const executionPromise = Api.instance
               .post(`/druid/v2/sql`, query, {
-                cancelToken: new axios.CancelToken(cancelFn => {
-                  nativeQueryCancelFnRef.current = cancelFn;
-                }),
+                signal: controller.signal,
               })
               .then(
                 ({ data: dartResponse }) => {
@@ -342,7 +341,7 @@ export const QueryTab = React.memo(function QueryTab(props: 
QueryTabProps) {
           case 'sql-msq-task':
             return await reattachTaskExecution({
               id: q.id,
-              cancelToken,
+              signal,
               preserveOnTermination: true,
             });
 
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
index da1b31392cf..2e07b60bd64 100644
--- 
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
@@ -90,7 +90,7 @@ export const RecentQueryTaskPanel = React.memo(function 
RecentQueryTaskPanel(
 
   const [queryTaskHistoryState, queryManager] = useQueryManager<number, 
RecentQueryEntry[]>({
     query: useStore(WORK_STATE_STORE, getMsqTaskVersion),
-    processQuery: async (_, cancelToken) => {
+    processQuery: async (_, signal) => {
       return await queryDruidSql<RecentQueryEntry>(
         {
           query: `SELECT
@@ -105,7 +105,7 @@ WHERE "type" = 'query_controller'
 ORDER BY "created_time" DESC
 LIMIT 100`,
         },
-        cancelToken,
+        signal,
       );
     },
   });
diff --git a/web-console/src/views/workbench-view/workbench-view.tsx 
b/web-console/src/views/workbench-view/workbench-view.tsx
index 567fd51d4c8..0f4f02edfc1 100644
--- a/web-console/src/views/workbench-view/workbench-view.tsx
+++ b/web-console/src/views/workbench-view/workbench-view.tsx
@@ -220,12 +220,12 @@ export class WorkbenchView extends 
React.PureComponent<WorkbenchViewProps, Workb
 
   componentDidMount(): void {
     this.metadataQueryManager = new QueryManager({
-      processQuery: async (_, cancelToken) => {
+      processQuery: async (_, signal) => {
         return await queryDruidSql<ColumnMetadata>(
           {
             query: `SELECT TABLE_SCHEMA, TABLE_NAME, COLUMN_NAME, DATA_TYPE 
FROM INFORMATION_SCHEMA.COLUMNS`,
           },
-          cancelToken,
+          signal,
         );
       },
       onStateChange: columnMetadataState => {


---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to