From 12f41096544790d9e74fbeb8748e9533440a4d4f Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Fri, 22 Mar 2024 14:51:37 -0700
Subject: [PATCH 01/17] Better forced mode indication

---
 .../__snapshots__/header-bar.spec.tsx.snap    |  86 ++++---
 .../src/components/header-bar/header-bar.tsx  | 230 +++++-------------
 .../restricted-mode.spec.tsx.snap             |  69 ++++++
 .../restricted-mode/restricted-mode.spec.tsx  |  33 +++
 .../restricted-mode/restricted-mode.tsx       | 164 +++++++++++++
 web-console/src/helpers/capabilities.ts       |   2 +-
 web-console/src/helpers/capacity.ts           |   1 -
 7 files changed, 371 insertions(+), 214 deletions(-)
 create mode 100644 web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap
 create mode 100644 web-console/src/components/header-bar/restricted-mode/restricted-mode.spec.tsx
 create mode 100644 web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx

diff --git a/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap b/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap
index 18a352dbbc64..96e392f121bc 100644
--- a/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap
+++ b/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap
@@ -267,55 +267,53 @@ exports[`HeaderBar matches snapshot 1`] = `
           <Blueprint4.MenuItem
             active={false}
             disabled={false}
-            icon="cog"
+            icon="high-priority"
             multiline={false}
             popoverProps={{}}
             selected={false}
             shouldDismissPopover={true}
-            text="Console options"
+            text="Force specific console mode"
           >
-            <React.Fragment>
-              <Blueprint4.MenuItem
-                active={false}
-                disabled={false}
-                multiline={false}
-                onClick={[Function]}
-                popoverProps={{}}
-                selected={false}
-                shouldDismissPopover={true}
-                text="Force Coordinator/Overlord mode"
-              />
-              <Blueprint4.MenuItem
-                active={false}
-                disabled={false}
-                multiline={false}
-                onClick={[Function]}
-                popoverProps={{}}
-                selected={false}
-                shouldDismissPopover={true}
-                text="Force Coordinator mode"
-              />
-              <Blueprint4.MenuItem
-                active={false}
-                disabled={false}
-                multiline={false}
-                onClick={[Function]}
-                popoverProps={{}}
-                selected={false}
-                shouldDismissPopover={true}
-                text="Force Overlord mode"
-              />
-              <Blueprint4.MenuItem
-                active={false}
-                disabled={false}
-                multiline={false}
-                onClick={[Function]}
-                popoverProps={{}}
-                selected={false}
-                shouldDismissPopover={true}
-                text="Force no management proxy mode"
-              />
-            </React.Fragment>
+            <Blueprint4.MenuItem
+              active={false}
+              disabled={false}
+              multiline={false}
+              onClick={[Function]}
+              popoverProps={{}}
+              selected={false}
+              shouldDismissPopover={true}
+              text="Force Coordinator/Overlord mode"
+            />
+            <Blueprint4.MenuItem
+              active={false}
+              disabled={false}
+              multiline={false}
+              onClick={[Function]}
+              popoverProps={{}}
+              selected={false}
+              shouldDismissPopover={true}
+              text="Force Coordinator mode"
+            />
+            <Blueprint4.MenuItem
+              active={false}
+              disabled={false}
+              multiline={false}
+              onClick={[Function]}
+              popoverProps={{}}
+              selected={false}
+              shouldDismissPopover={true}
+              text="Force Overlord mode"
+            />
+            <Blueprint4.MenuItem
+              active={false}
+              disabled={false}
+              multiline={false}
+              onClick={[Function]}
+              popoverProps={{}}
+              selected={false}
+              shouldDismissPopover={true}
+              text="Force no management proxy mode"
+            />
           </Blueprint4.MenuItem>
         </Blueprint4.Menu>
       }
diff --git a/web-console/src/components/header-bar/header-bar.tsx b/web-console/src/components/header-bar/header-bar.tsx
index d3c58db6bb55..13759e92b3a9 100644
--- a/web-console/src/components/header-bar/header-bar.tsx
+++ b/web-console/src/components/header-bar/header-bar.tsx
@@ -32,7 +32,6 @@ import {
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { Popover2 } from '@blueprintjs/popover2';
-import type { JSX } from 'react';
 import React, { useState } from 'react';
 
 import {
@@ -51,9 +50,10 @@ import {
   localStorageSetJson,
   oneOf,
 } from '../../utils';
-import { ExternalLink } from '../external-link/external-link';
 import { PopoverText } from '../popover-text/popover-text';
 
+import { RestrictedMode } from './restricted-mode/restricted-mode';
+
 import './header-bar.scss';
 
 const capabilitiesOverride = localStorageGetJson(LocalStorageKeys.CAPABILITIES_OVERRIDE);
@@ -92,143 +92,6 @@ const DruidLogo = React.memo(function DruidLogo() {
   );
 });
 
-interface RestrictedModeProps {
-  capabilities: Capabilities;
-  onUnrestrict(capabilities: Capabilities): void;
-}
-
-const RestrictedMode = React.memo(function RestrictedMode(props: RestrictedModeProps) {
-  const { capabilities, onUnrestrict } = props;
-  const mode = capabilities.getModeExtended();
-
-  let label: string;
-  let message: JSX.Element;
-  switch (mode) {
-    case 'full':
-      return null; // Do not show anything
-
-    case 'no-sql':
-      label = 'No SQL mode';
-      message = (
-        <p>
-          It appears that the SQL endpoint is disabled. The console will fall back to{' '}
-          <ExternalLink href={getLink('DOCS_API')}>native Druid APIs</ExternalLink> and will be
-          limited in functionality. Look at{' '}
-          <ExternalLink href={getLink('DOCS_SQL')}>the SQL docs</ExternalLink> to enable the SQL
-          endpoint.
-        </p>
-      );
-      break;
-
-    case 'no-proxy':
-      label = 'No management proxy mode';
-      message = (
-        <p>
-          It appears that the management proxy is not enabled, the console will operate with limited
-          functionality.
-        </p>
-      );
-      break;
-
-    case 'no-sql-no-proxy':
-      label = 'No SQL mode';
-      message = (
-        <p>
-          It appears that the SQL endpoint and management proxy are disabled. The console can only
-          be used to make queries.
-        </p>
-      );
-      break;
-
-    case 'coordinator-overlord':
-      label = 'Coordinator/Overlord mode';
-      message = (
-        <p>
-          It appears that you are accessing the console on the Coordinator/Overlord shared service.
-          Due to the lack of access to some APIs on this service the console will operate in a
-          limited mode. The unrestricted version of the console can be accessed on the Router
-          service.
-        </p>
-      );
-      break;
-
-    case 'coordinator':
-      label = 'Coordinator mode';
-      message = (
-        <p>
-          It appears that you are accessing the console on the Coordinator service. Due to the lack
-          of access to some APIs on this service the console will operate in a limited mode. The
-          full version of the console can be accessed on the Router service.
-        </p>
-      );
-      break;
-
-    case 'overlord':
-      label = 'Overlord mode';
-      message = (
-        <p>
-          It appears that you are accessing the console on the Overlord service. Due to the lack of
-          access to some APIs on this service the console will operate in a limited mode. The
-          unrestricted version of the console can be accessed on the Router service.
-        </p>
-      );
-      break;
-
-    default:
-      label = 'Restricted mode';
-      message = (
-        <p>
-          Due to the lack of access to some APIs on this service the console will operate in a
-          limited mode. The unrestricted version of the console can be accessed on the Router
-          service.
-        </p>
-      );
-      break;
-  }
-
-  return (
-    <Popover2
-      content={
-        <PopoverText>
-          <p>The console is running in restricted mode.</p>
-          {message}
-          <p>
-            For more info check out the{' '}
-            <ExternalLink href={`${getLink('DOCS')}/operations/web-console.html`}>
-              web console documentation
-            </ExternalLink>
-            .
-          </p>
-          <p>
-            It is possible that there is an issue with the capability detection. You can enable the
-            unrestricted console but certain features might not work if the underlying APIs are not
-            available.
-          </p>
-          <p>
-            <Button
-              icon={IconNames.WARNING_SIGN}
-              text={`Temporarily unrestrict console${capabilities.hasSql() ? '' : ' (with SQL)'}`}
-              onClick={() => onUnrestrict(Capabilities.FULL)}
-            />
-          </p>
-          {!capabilities.hasSql() && (
-            <p>
-              <Button
-                icon={IconNames.WARNING_SIGN}
-                text="Temporarily unrestrict console (without SQL)"
-                onClick={() => onUnrestrict(Capabilities.NO_SQL)}
-              />
-            </p>
-          )}
-        </PopoverText>
-      }
-      position={Position.BOTTOM_RIGHT}
-    >
-      <Button icon={IconNames.WARNING_SIGN} text={label} intent={Intent.WARNING} minimal />
-    </Popover2>
-  );
-});
-
 export interface HeaderBarProps {
   active: HeaderActiveTab;
   capabilities: Capabilities;
@@ -360,39 +223,38 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
         onClick={() => setCompactionDynamicConfigDialogOpen(true)}
         disabled={!capabilities.hasCoordinatorAccess()}
       />
-
       <MenuDivider />
-      <MenuItem icon={IconNames.COG} text="Console options">
-        {capabilitiesOverride ? (
-          <MenuItem text="Clear forced mode" onClick={() => setForcedMode(undefined)} />
-        ) : (
+      <MenuItem icon={IconNames.HIGH_PRIORITY} text="Force specific console mode">
+        {capabilitiesOverride && (
           <>
-            {capabilitiesMode !== 'coordinator-overlord' && (
-              <MenuItem
-                text="Force Coordinator/Overlord mode"
-                onClick={() => setForcedMode(Capabilities.COORDINATOR_OVERLORD)}
-              />
-            )}
-            {capabilitiesMode !== 'coordinator' && (
-              <MenuItem
-                text="Force Coordinator mode"
-                onClick={() => setForcedMode(Capabilities.COORDINATOR)}
-              />
-            )}
-            {capabilitiesMode !== 'overlord' && (
-              <MenuItem
-                text="Force Overlord mode"
-                onClick={() => setForcedMode(Capabilities.OVERLORD)}
-              />
-            )}
-            {capabilitiesMode !== 'no-proxy' && (
-              <MenuItem
-                text="Force no management proxy mode"
-                onClick={() => setForcedMode(Capabilities.NO_PROXY)}
-              />
-            )}
+            <MenuItem text="Clear forced mode" onClick={() => setForcedMode(undefined)} />
+            <MenuDivider />
           </>
         )}
+        {capabilitiesMode !== 'coordinator-overlord' && (
+          <MenuItem
+            text="Force Coordinator/Overlord mode"
+            onClick={() => setForcedMode(Capabilities.COORDINATOR_OVERLORD)}
+          />
+        )}
+        {capabilitiesMode !== 'coordinator' && (
+          <MenuItem
+            text="Force Coordinator mode"
+            onClick={() => setForcedMode(Capabilities.COORDINATOR)}
+          />
+        )}
+        {capabilitiesMode !== 'overlord' && (
+          <MenuItem
+            text="Force Overlord mode"
+            onClick={() => setForcedMode(Capabilities.OVERLORD)}
+          />
+        )}
+        {capabilitiesMode !== 'no-proxy' && (
+          <MenuItem
+            text="Force no management proxy mode"
+            onClick={() => setForcedMode(Capabilities.NO_PROXY)}
+          />
+        )}
       </MenuItem>
     </Menu>
   );
@@ -496,6 +358,38 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
         <RestrictedMode capabilities={capabilities} onUnrestrict={onUnrestrict} />
+        {capabilitiesOverride && (
+          <Popover2
+            content={
+              <PopoverText>
+                <p>
+                  The console is running in a specific forced mode. Instead of detecting the
+                  capabilities of the cluster it is assuming a certain defined set of capabilities.
+                </p>
+                <p>
+                  This is an advanced feature used for testing and for working around issues in the
+                  capability detecting logic. If you are not sure why you are in this mode then
+                  clear it.
+                </p>
+                <p>
+                  <Button
+                    text="Clear forced mode"
+                    onClick={() => setForcedMode(undefined)}
+                    intent={Intent.PRIMARY}
+                  />
+                </p>
+              </PopoverText>
+            }
+            position={Position.BOTTOM_RIGHT}
+          >
+            <Button
+              icon={IconNames.HIGH_PRIORITY}
+              text="Forced mode"
+              intent={Intent.DANGER}
+              minimal
+            />
+          </Popover2>
+        )}
         <Popover2 content={configMenu} position={Position.BOTTOM_RIGHT}>
           <Button className="header-entry" minimal icon={IconNames.COG} />
         </Popover2>
diff --git a/web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap b/web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap
new file mode 100644
index 000000000000..4e62073f9996
--- /dev/null
+++ b/web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap
@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RestrictedMode matches snapshot 1`] = `
+<Blueprint4.Popover2
+  boundary="clippingParents"
+  captureDismiss={false}
+  content={
+    <Memo(PopoverText)>
+      <p>
+        The console is running in restricted mode.
+      </p>
+      <p>
+        It appears that you are accessing the console on the Coordinator/Overlord shared service. Due to the lack of access to some APIs on this service the console will operate in a limited mode. The unrestricted version of the console can be accessed on the Router service.
+      </p>
+      <p>
+        For more info check out the
+         
+        <Memo(ExternalLink)
+          href="https://druid.apache.org/docs/latest/operations/web-console.html"
+        >
+          web console documentation
+        </Memo(ExternalLink)>
+        .
+      </p>
+      <p>
+        It is possible that there is an issue with the capability detection. You can enable the unrestricted console but certain features might not work if the underlying APIs are not available.
+      </p>
+      <p>
+        <Blueprint4.Button
+          icon="warning-sign"
+          onClick={[Function]}
+          text="Temporarily unrestrict console (with SQL)"
+        />
+      </p>
+      <p>
+        <Blueprint4.Button
+          icon="warning-sign"
+          onClick={[Function]}
+          text="Temporarily unrestrict console (without SQL)"
+        />
+      </p>
+    </Memo(PopoverText)>
+  }
+  defaultIsOpen={false}
+  disabled={false}
+  fill={false}
+  hasBackdrop={false}
+  hoverCloseDelay={300}
+  hoverOpenDelay={150}
+  inheritDarkTheme={true}
+  interactionKind="click"
+  matchTargetWidth={false}
+  minimal={false}
+  openOnTargetFocus={true}
+  position="bottom-right"
+  positioningStrategy="absolute"
+  shouldReturnFocusOnClose={false}
+  targetTagName="span"
+  transitionDuration={300}
+  usePortal={true}
+>
+  <Blueprint4.Button
+    icon="warning-sign"
+    intent="warning"
+    minimal={true}
+    text="Coordinator/Overlord mode"
+  />
+</Blueprint4.Popover2>
+`;
diff --git a/web-console/src/components/header-bar/restricted-mode/restricted-mode.spec.tsx b/web-console/src/components/header-bar/restricted-mode/restricted-mode.spec.tsx
new file mode 100644
index 000000000000..2d853b28b337
--- /dev/null
+++ b/web-console/src/components/header-bar/restricted-mode/restricted-mode.spec.tsx
@@ -0,0 +1,33 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+import { Capabilities } from '../../../helpers';
+import { shallow } from '../../../utils/shallow-renderer';
+
+import { RestrictedMode } from './restricted-mode';
+
+describe('RestrictedMode', () => {
+  it('matches snapshot', () => {
+    const headerBar = shallow(
+      <RestrictedMode capabilities={Capabilities.COORDINATOR_OVERLORD} onUnrestrict={() => {}} />,
+    );
+    expect(headerBar).toMatchSnapshot();
+  });
+});
diff --git a/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx b/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
new file mode 100644
index 000000000000..e05f73d45c64
--- /dev/null
+++ b/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
@@ -0,0 +1,164 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Button, Intent, Position } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import { Popover2 } from '@blueprintjs/popover2';
+import React, { type JSX } from 'react';
+
+import { Capabilities } from '../../../helpers';
+import { getLink } from '../../../links';
+import { ExternalLink } from '../../external-link/external-link';
+import { PopoverText } from '../../popover-text/popover-text';
+
+export interface RestrictedModeProps {
+  capabilities: Capabilities;
+  onUnrestrict(capabilities: Capabilities): void;
+}
+
+export const RestrictedMode = React.memo(function RestrictedMode(props: RestrictedModeProps) {
+  const { capabilities, onUnrestrict } = props;
+  const mode = capabilities.getModeExtended();
+
+  let label: string;
+  let message: JSX.Element;
+  switch (mode) {
+    case 'full':
+      return null; // Do not show anything
+
+    case 'no-sql':
+      label = 'No SQL mode';
+      message = (
+        <p>
+          It appears that the SQL endpoint is disabled. The console will fall back to{' '}
+          <ExternalLink href={getLink('DOCS_API')}>native Druid APIs</ExternalLink> and will be
+          limited in functionality. Look at{' '}
+          <ExternalLink href={getLink('DOCS_SQL')}>the SQL docs</ExternalLink> to enable the SQL
+          endpoint.
+        </p>
+      );
+      break;
+
+    case 'no-proxy':
+      label = 'No management proxy mode';
+      message = (
+        <p>
+          It appears that the management proxy is not enabled, the console will operate with limited
+          functionality.
+        </p>
+      );
+      break;
+
+    case 'no-sql-no-proxy':
+      label = 'No SQL mode';
+      message = (
+        <p>
+          It appears that the SQL endpoint and management proxy are disabled. The console can only
+          be used to make queries.
+        </p>
+      );
+      break;
+
+    case 'coordinator-overlord':
+      label = 'Coordinator/Overlord mode';
+      message = (
+        <p>
+          It appears that you are accessing the console on the Coordinator/Overlord shared service.
+          Due to the lack of access to some APIs on this service the console will operate in a
+          limited mode. The unrestricted version of the console can be accessed on the Router
+          service.
+        </p>
+      );
+      break;
+
+    case 'coordinator':
+      label = 'Coordinator mode';
+      message = (
+        <p>
+          It appears that you are accessing the console on the Coordinator service. Due to the lack
+          of access to some APIs on this service the console will operate in a limited mode. The
+          full version of the console can be accessed on the Router service.
+        </p>
+      );
+      break;
+
+    case 'overlord':
+      label = 'Overlord mode';
+      message = (
+        <p>
+          It appears that you are accessing the console on the Overlord service. Due to the lack of
+          access to some APIs on this service the console will operate in a limited mode. The
+          unrestricted version of the console can be accessed on the Router service.
+        </p>
+      );
+      break;
+
+    default:
+      label = 'Restricted mode';
+      message = (
+        <p>
+          Due to the lack of access to some APIs on this service the console will operate in a
+          limited mode. The unrestricted version of the console can be accessed on the Router
+          service.
+        </p>
+      );
+      break;
+  }
+
+  return (
+    <Popover2
+      content={
+        <PopoverText>
+          <p>The console is running in restricted mode.</p>
+          {message}
+          <p>
+            For more info check out the{' '}
+            <ExternalLink href={`${getLink('DOCS')}/operations/web-console.html`}>
+              web console documentation
+            </ExternalLink>
+            .
+          </p>
+          <p>
+            It is possible that there is an issue with the capability detection. You can enable the
+            unrestricted console but certain features might not work if the underlying APIs are not
+            available.
+          </p>
+          <p>
+            <Button
+              icon={IconNames.WARNING_SIGN}
+              text={`Temporarily unrestrict console${capabilities.hasSql() ? '' : ' (with SQL)'}`}
+              onClick={() => onUnrestrict(Capabilities.FULL)}
+            />
+          </p>
+          {!capabilities.hasSql() && (
+            <p>
+              <Button
+                icon={IconNames.WARNING_SIGN}
+                text="Temporarily unrestrict console (without SQL)"
+                onClick={() => onUnrestrict(Capabilities.NO_SQL)}
+              />
+            </p>
+          )}
+        </PopoverText>
+      }
+      position={Position.BOTTOM_RIGHT}
+    >
+      <Button icon={IconNames.WARNING_SIGN} text={label} intent={Intent.WARNING} minimal />
+    </Popover2>
+  );
+});
diff --git a/web-console/src/helpers/capabilities.ts b/web-console/src/helpers/capabilities.ts
index 4c5c9357cc18..c861361ad15c 100644
--- a/web-console/src/helpers/capabilities.ts
+++ b/web-console/src/helpers/capabilities.ts
@@ -108,7 +108,7 @@ export class Capabilities {
     } catch (e) {
       const { response } = e;
       // If we detect error code 400 the management proxy is enabled but just does not know about the recently added /proxy/enabled route so treat this as a win.
-      return response.status === 400;
+      return response?.status === 400;
     }
 
     return true;
diff --git a/web-console/src/helpers/capacity.ts b/web-console/src/helpers/capacity.ts
index aa29efc68e9f..c990149385fc 100644
--- a/web-console/src/helpers/capacity.ts
+++ b/web-console/src/helpers/capacity.ts
@@ -25,7 +25,6 @@ export async function getClusterCapacity(): Promise<CapacityInfo> {
   });
 
   const usedTaskSlots = Number(workersResponse.data.usedClusterCapacity);
-
   const totalTaskSlots = Number(workersResponse.data.currentClusterCapacity);
 
   return {

From bb5a6272daeb0932cc831bd24ba04dd05e9935e2 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Fri, 22 Mar 2024 15:28:28 -0700
Subject: [PATCH 02/17] more robust

---
 web-console/src/console-application.tsx |  3 ++-
 web-console/src/helpers/capabilities.ts | 10 +++++-----
 web-console/src/singletons/api.ts       | 12 ++++++++----
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/web-console/src/console-application.tsx b/web-console/src/console-application.tsx
index 8955b1c9051c..08eaf74f4b7c 100644
--- a/web-console/src/console-application.tsx
+++ b/web-console/src/console-application.tsx
@@ -122,7 +122,8 @@ export class ConsoleApplication extends React.PureComponent<
 
         return await Capabilities.detectCapacity(capabilities);
       },
-      onStateChange: ({ data, loading }) => {
+      onStateChange: ({ data, loading, error }) => {
+        console.error('There was an error retrieving the capabilities', error);
         this.setState({
           capabilities: data || Capabilities.FULL,
           capabilitiesLoading: loading,
diff --git a/web-console/src/helpers/capabilities.ts b/web-console/src/helpers/capabilities.ts
index c861361ad15c..ce8509072f2a 100644
--- a/web-console/src/helpers/capabilities.ts
+++ b/web-console/src/helpers/capabilities.ts
@@ -65,8 +65,8 @@ export class Capabilities {
         { timeout: Capabilities.STATUS_TIMEOUT },
       );
     } catch (e) {
-      const { response } = e;
-      if (response.status !== 405 && response.status !== 404) {
+      const status = e.response?.status;
+      if (status !== 405 && status !== 404) {
         return; // other failure
       }
       try {
@@ -87,7 +87,7 @@ export class Capabilities {
           { timeout: Capabilities.STATUS_TIMEOUT },
         );
       } catch (e) {
-        if (response.status !== 405 && response.status !== 404) {
+        if (status !== 405 && status !== 404) {
           return; // other failure
         }
 
@@ -106,9 +106,9 @@ export class Capabilities {
         timeout: Capabilities.STATUS_TIMEOUT,
       });
     } catch (e) {
-      const { response } = e;
+      const status = e.response?.status;
       // If we detect error code 400 the management proxy is enabled but just does not know about the recently added /proxy/enabled route so treat this as a win.
-      return response?.status === 400;
+      return status === 400;
     }
 
     return true;
diff --git a/web-console/src/singletons/api.ts b/web-console/src/singletons/api.ts
index 6067dba39ae3..c7b123df76c7 100644
--- a/web-console/src/singletons/api.ts
+++ b/web-console/src/singletons/api.ts
@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-import type { AxiosError, AxiosInstance, CreateAxiosDefaults } from 'axios';
-import axios from 'axios';
+import type { AxiosInstance, CreateAxiosDefaults } from 'axios';
+import axios, { AxiosError } from 'axios';
 import * as JSONBig from 'json-bigint-native';
 
 import { nonEmptyString } from '../utils';
@@ -36,11 +36,15 @@ export class Api {
         const responseData = error.response?.data;
         const message = responseData?.message;
         if (nonEmptyString(message)) {
-          return Promise.reject(new Error(message));
+          return Promise.reject(
+            new AxiosError(message, error.code, error.config, error.request, error.response),
+          );
         }
 
         if (error.config?.method?.toLowerCase() === 'get' && nonEmptyString(responseData)) {
-          return Promise.reject(new Error(responseData));
+          return Promise.reject(
+            new AxiosError(responseData, error.code, error.config, error.request, error.response),
+          );
         }
 
         return Promise.reject(error);

From 52205b3533226332ab148ff00f85056e263b380c Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadimon@gmail.com>
Date: Fri, 22 Mar 2024 16:54:09 -0700
Subject: [PATCH 03/17] Update
 web-console/src/components/header-bar/header-bar.tsx

Co-authored-by: Charles Smith <techdocsmith@gmail.com>
---
 web-console/src/components/header-bar/header-bar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web-console/src/components/header-bar/header-bar.tsx b/web-console/src/components/header-bar/header-bar.tsx
index 13759e92b3a9..90f7c840f7ba 100644
--- a/web-console/src/components/header-bar/header-bar.tsx
+++ b/web-console/src/components/header-bar/header-bar.tsx
@@ -363,8 +363,8 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
             content={
               <PopoverText>
                 <p>
-                  The console is running in a specific forced mode. Instead of detecting the
-                  capabilities of the cluster it is assuming a certain defined set of capabilities.
+                  The console is running in a forced mode that assumes a limited set of capabilities rather
+                   than detecting all capabilities for the cluster.
                 </p>
                 <p>
                   This is an advanced feature used for testing and for working around issues in the

From f9ddbf316f37a85b4c9367e4a551d00dc29ad700 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadimon@gmail.com>
Date: Fri, 22 Mar 2024 16:54:59 -0700
Subject: [PATCH 04/17] Update
 web-console/src/components/header-bar/header-bar.tsx

Co-authored-by: Charles Smith <techdocsmith@gmail.com>
---
 web-console/src/components/header-bar/header-bar.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/web-console/src/components/header-bar/header-bar.tsx b/web-console/src/components/header-bar/header-bar.tsx
index 90f7c840f7ba..28d7572db0d2 100644
--- a/web-console/src/components/header-bar/header-bar.tsx
+++ b/web-console/src/components/header-bar/header-bar.tsx
@@ -367,9 +367,8 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
                    than detecting all capabilities for the cluster.
                 </p>
                 <p>
-                  This is an advanced feature used for testing and for working around issues in the
-                  capability detecting logic. If you are not sure why you are in this mode then
-                  clear it.
+                  Forced mode is an advanced feature used for testing and for working around issues with the
+                  capability detecting logic. If you are unsure why the console is in forced mode, clear it.
                 </p>
                 <p>
                   <Button

From 57cc41321b45adcee2213e058b8893c1d0b6b926 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadimon@gmail.com>
Date: Fri, 22 Mar 2024 16:55:07 -0700
Subject: [PATCH 05/17] Update
 web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap

Co-authored-by: Charles Smith <techdocsmith@gmail.com>
---
 .../restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap b/web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap
index 4e62073f9996..bc245e44bf9d 100644
--- a/web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap
+++ b/web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap
@@ -10,7 +10,7 @@ exports[`RestrictedMode matches snapshot 1`] = `
         The console is running in restricted mode.
       </p>
       <p>
-        It appears that you are accessing the console on the Coordinator/Overlord shared service. Due to the lack of access to some APIs on this service the console will operate in a limited mode. The unrestricted version of the console can be accessed on the Router service.
+        You are accessing the console on the Coordinator/Overlord shared service. Because this service lacks  access to some APIs, the console will operate in a limited mode. You can access the unrestricted version of the console on the Router service.
       </p>
       <p>
         For more info check out the

From 30b09357f62190ff6889dcd8d1b96023c94e20ae Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadimon@gmail.com>
Date: Fri, 22 Mar 2024 16:55:13 -0700
Subject: [PATCH 06/17] Update
 web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap

Co-authored-by: Charles Smith <techdocsmith@gmail.com>
---
 .../restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap b/web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap
index bc245e44bf9d..5383508fb4ad 100644
--- a/web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap
+++ b/web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap
@@ -23,7 +23,7 @@ exports[`RestrictedMode matches snapshot 1`] = `
         .
       </p>
       <p>
-        It is possible that there is an issue with the capability detection. You can enable the unrestricted console but certain features might not work if the underlying APIs are not available.
+        It is possible that the console is experiencing an issue with the capability detection. You can enable the unrestricted console, but certain features might not work if the underlying APIs are not available.
       </p>
       <p>
         <Blueprint4.Button

From 45a95747f47ae1f896f5a40ea439980e9b7657cd Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadimon@gmail.com>
Date: Fri, 22 Mar 2024 16:55:30 -0700
Subject: [PATCH 07/17] Update
 web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx

Co-authored-by: Charles Smith <techdocsmith@gmail.com>
---
 .../components/header-bar/restricted-mode/restricted-mode.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx b/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
index e05f73d45c64..01d4f8f5c161 100644
--- a/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
+++ b/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
@@ -58,7 +58,7 @@ export const RestrictedMode = React.memo(function RestrictedMode(props: Restrict
       label = 'No management proxy mode';
       message = (
         <p>
-          It appears that the management proxy is not enabled, the console will operate with limited
+         The management proxy is not enabled, the console will operate with limited
           functionality.
         </p>
       );

From 3b9dd9502baaf5e385982c1712b4a11a9d8477fa Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadimon@gmail.com>
Date: Fri, 22 Mar 2024 16:55:37 -0700
Subject: [PATCH 08/17] Update
 web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx

Co-authored-by: Charles Smith <techdocsmith@gmail.com>
---
 .../header-bar/restricted-mode/restricted-mode.tsx        | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx b/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
index 01d4f8f5c161..4bf9270373d7 100644
--- a/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
+++ b/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
@@ -45,10 +45,10 @@ export const RestrictedMode = React.memo(function RestrictedMode(props: Restrict
       label = 'No SQL mode';
       message = (
         <p>
-          It appears that the SQL endpoint is disabled. The console will fall back to{' '}
-          <ExternalLink href={getLink('DOCS_API')}>native Druid APIs</ExternalLink> and will be
-          limited in functionality. Look at{' '}
-          <ExternalLink href={getLink('DOCS_SQL')}>the SQL docs</ExternalLink> to enable the SQL
+          The SQL endpoint is disabled. The console will fall back to{' '}
+          <ExternalLink href={getLink('DOCS_API')}>native Druid APIs</ExternalLink> and will operate with
+          limited functionality. Refer to {' '}
+          <ExternalLink href={getLink('DOCS_SQL')}>the SQL docs</ExternalLink> for instructions to enable the SQL
           endpoint.
         </p>
       );

From ef980b95a4df43d9f4a84fafee2eff288cc5e78c Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadimon@gmail.com>
Date: Fri, 22 Mar 2024 16:55:44 -0700
Subject: [PATCH 09/17] Update
 web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx

Co-authored-by: Charles Smith <techdocsmith@gmail.com>
---
 .../components/header-bar/restricted-mode/restricted-mode.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx b/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
index 4bf9270373d7..8e219b7280be 100644
--- a/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
+++ b/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
@@ -112,8 +112,8 @@ export const RestrictedMode = React.memo(function RestrictedMode(props: Restrict
       label = 'Restricted mode';
       message = (
         <p>
-          Due to the lack of access to some APIs on this service the console will operate in a
-          limited mode. The unrestricted version of the console can be accessed on the Router
+          Due to the lack of access to some APIs on this service, the console will operate in a
+          limited mode. You can access the unrestricted version of the console on the Router
           service.
         </p>
       );

From d4efe155eb65b7b5518d961069961aec4e198d90 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadimon@gmail.com>
Date: Fri, 22 Mar 2024 16:55:51 -0700
Subject: [PATCH 10/17] Update
 web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx

Co-authored-by: Charles Smith <techdocsmith@gmail.com>
---
 .../components/header-bar/restricted-mode/restricted-mode.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx b/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
index 8e219b7280be..ca57f5d6f6ab 100644
--- a/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
+++ b/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
@@ -127,7 +127,7 @@ export const RestrictedMode = React.memo(function RestrictedMode(props: Restrict
           <p>The console is running in restricted mode.</p>
           {message}
           <p>
-            For more info check out the{' '}
+            For more info refer to the{' '}
             <ExternalLink href={`${getLink('DOCS')}/operations/web-console.html`}>
               web console documentation
             </ExternalLink>

From 65cc85dd6fd4bdafbbb4f34b2be0ba0cf059c999 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadimon@gmail.com>
Date: Fri, 22 Mar 2024 16:55:57 -0700
Subject: [PATCH 11/17] Update
 web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx

Co-authored-by: Charles Smith <techdocsmith@gmail.com>
---
 .../components/header-bar/restricted-mode/restricted-mode.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx b/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
index ca57f5d6f6ab..53c89ad20293 100644
--- a/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
+++ b/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
@@ -134,7 +134,7 @@ export const RestrictedMode = React.memo(function RestrictedMode(props: Restrict
             .
           </p>
           <p>
-            It is possible that there is an issue with the capability detection. You can enable the
+            There is an issue with the console capability detection. You can enable the
             unrestricted console but certain features might not work if the underlying APIs are not
             available.
           </p>

From 4d8d74ff6e7eee2ff6637f7fdd16f54ae1744b26 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadimon@gmail.com>
Date: Fri, 22 Mar 2024 16:59:58 -0700
Subject: [PATCH 12/17] Update
 web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx

Co-authored-by: Charles Smith <techdocsmith@gmail.com>
---
 .../components/header-bar/restricted-mode/restricted-mode.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx b/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
index 53c89ad20293..a64a81f68f81 100644
--- a/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
+++ b/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
@@ -68,8 +68,8 @@ export const RestrictedMode = React.memo(function RestrictedMode(props: Restrict
       label = 'No SQL mode';
       message = (
         <p>
-          It appears that the SQL endpoint and management proxy are disabled. The console can only
-          be used to make queries.
+          The SQL endpoint and management proxy are disabled.  You can only use the console
+          to make queries.
         </p>
       );
       break;

From d4bc0a9c6f42156ad32a7c1957768b246795905d Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadimon@gmail.com>
Date: Fri, 22 Mar 2024 17:00:14 -0700
Subject: [PATCH 13/17] Update
 web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx

Co-authored-by: Charles Smith <techdocsmith@gmail.com>
---
 .../header-bar/restricted-mode/restricted-mode.tsx           | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx b/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
index a64a81f68f81..550f9d03aa48 100644
--- a/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
+++ b/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
@@ -78,10 +78,7 @@ export const RestrictedMode = React.memo(function RestrictedMode(props: Restrict
       label = 'Coordinator/Overlord mode';
       message = (
         <p>
-          It appears that you are accessing the console on the Coordinator/Overlord shared service.
-          Due to the lack of access to some APIs on this service the console will operate in a
-          limited mode. The unrestricted version of the console can be accessed on the Router
-          service.
+          You are accessing the console on the Coordinator/Overlord shared service. Because this service lacks access to some APIs, the console will operate in a limited mode. You can access the unrestricted version of the console on the Router service.
         </p>
       );
       break;

From 72e15d41d5e71cc7cfcb0a1946ef03dbad969954 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Fri, 22 Mar 2024 17:12:40 -0700
Subject: [PATCH 14/17] reformat

---
 .../restricted-mode.spec.tsx.snap             |  4 +-
 .../restricted-mode/restricted-mode.tsx       | 37 ++++++++++---------
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap b/web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap
index 5383508fb4ad..19450319bb5f 100644
--- a/web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap
+++ b/web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap
@@ -10,10 +10,10 @@ exports[`RestrictedMode matches snapshot 1`] = `
         The console is running in restricted mode.
       </p>
       <p>
-        You are accessing the console on the Coordinator/Overlord shared service. Because this service lacks  access to some APIs, the console will operate in a limited mode. You can access the unrestricted version of the console on the Router service.
+        You are accessing the console on the Coordinator/Overlord shared service. Because this service lacks access to some APIs, the console will operate in a limited mode. You can access the unrestricted version of the console on the Router service.
       </p>
       <p>
-        For more info check out the
+        For more info refer to the
          
         <Memo(ExternalLink)
           href="https://druid.apache.org/docs/latest/operations/web-console.html"
diff --git a/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx b/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
index 550f9d03aa48..d46f14db5101 100644
--- a/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
+++ b/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
@@ -46,10 +46,10 @@ export const RestrictedMode = React.memo(function RestrictedMode(props: Restrict
       message = (
         <p>
           The SQL endpoint is disabled. The console will fall back to{' '}
-          <ExternalLink href={getLink('DOCS_API')}>native Druid APIs</ExternalLink> and will operate with
-          limited functionality. Refer to {' '}
-          <ExternalLink href={getLink('DOCS_SQL')}>the SQL docs</ExternalLink> for instructions to enable the SQL
-          endpoint.
+          <ExternalLink href={getLink('DOCS_API')}>native Druid APIs</ExternalLink> and will operate
+          with limited functionality. Refer to{' '}
+          <ExternalLink href={getLink('DOCS_SQL')}>the SQL docs</ExternalLink> for instructions to
+          enable the SQL endpoint.
         </p>
       );
       break;
@@ -58,8 +58,7 @@ export const RestrictedMode = React.memo(function RestrictedMode(props: Restrict
       label = 'No management proxy mode';
       message = (
         <p>
-         The management proxy is not enabled, the console will operate with limited
-          functionality.
+          The management proxy is disabled, the console will operate with limited functionality.
         </p>
       );
       break;
@@ -68,8 +67,8 @@ export const RestrictedMode = React.memo(function RestrictedMode(props: Restrict
       label = 'No SQL mode';
       message = (
         <p>
-          The SQL endpoint and management proxy are disabled.  You can only use the console
-          to make queries.
+          The SQL endpoint and management proxy are disabled. You can only use the console to make
+          JSON-based queries.
         </p>
       );
       break;
@@ -78,7 +77,9 @@ export const RestrictedMode = React.memo(function RestrictedMode(props: Restrict
       label = 'Coordinator/Overlord mode';
       message = (
         <p>
-          You are accessing the console on the Coordinator/Overlord shared service. Because this service lacks access to some APIs, the console will operate in a limited mode. You can access the unrestricted version of the console on the Router service.
+          You are accessing the console on the Coordinator/Overlord shared service. Because this
+          service lacks access to some APIs, the console will operate in a limited mode. You can
+          access the unrestricted version of the console on the Router service.
         </p>
       );
       break;
@@ -87,9 +88,9 @@ export const RestrictedMode = React.memo(function RestrictedMode(props: Restrict
       label = 'Coordinator mode';
       message = (
         <p>
-          It appears that you are accessing the console on the Coordinator service. Due to the lack
-          of access to some APIs on this service the console will operate in a limited mode. The
-          full version of the console can be accessed on the Router service.
+          You are accessing the console on the Coordinator service. Because this service lacks
+          access to some APIs, the console will operate in a limited mode. You can access the
+          unrestricted version of the console on the Router service.
         </p>
       );
       break;
@@ -98,9 +99,9 @@ export const RestrictedMode = React.memo(function RestrictedMode(props: Restrict
       label = 'Overlord mode';
       message = (
         <p>
-          It appears that you are accessing the console on the Overlord service. Due to the lack of
-          access to some APIs on this service the console will operate in a limited mode. The
-          unrestricted version of the console can be accessed on the Router service.
+          You are accessing the console on the Overlord service. Because this service lacks access
+          to some APIs, the console will operate in a limited mode. You can access the unrestricted
+          version of the console on the Router service.
         </p>
       );
       break;
@@ -131,9 +132,9 @@ export const RestrictedMode = React.memo(function RestrictedMode(props: Restrict
             .
           </p>
           <p>
-            There is an issue with the console capability detection. You can enable the
-            unrestricted console but certain features might not work if the underlying APIs are not
-            available.
+            It is possible that the console is experiencing an issue with the capability detection.
+            You can enable the unrestricted console, but certain features might not work if the
+            underlying APIs are not available.
           </p>
           <p>
             <Button

From e7bb23a3ca2e73029820d4c8699e67dea2efdaa3 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Mon, 25 Mar 2024 10:01:13 -0700
Subject: [PATCH 15/17] forced => manual capability detection

---
 .../__snapshots__/header-bar.spec.tsx.snap    | 10 +--
 .../src/components/header-bar/header-bar.tsx  | 56 ++++++++-----
 .../restricted-mode.spec.tsx.snap             | 84 +++++++++++++++++--
 .../restricted-mode/restricted-mode.spec.tsx  | 13 ++-
 .../restricted-mode/restricted-mode.tsx       | 48 ++++++++---
 5 files changed, 168 insertions(+), 43 deletions(-)

diff --git a/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap b/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap
index 96e392f121bc..6c7cf34cb70f 100644
--- a/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap
+++ b/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap
@@ -272,7 +272,7 @@ exports[`HeaderBar matches snapshot 1`] = `
             popoverProps={{}}
             selected={false}
             shouldDismissPopover={true}
-            text="Force specific console mode"
+            text="Capabilty detection"
           >
             <Blueprint4.MenuItem
               active={false}
@@ -282,7 +282,7 @@ exports[`HeaderBar matches snapshot 1`] = `
               popoverProps={{}}
               selected={false}
               shouldDismissPopover={true}
-              text="Force Coordinator/Overlord mode"
+              text="Manually set Coordinator/Overlord mode"
             />
             <Blueprint4.MenuItem
               active={false}
@@ -292,7 +292,7 @@ exports[`HeaderBar matches snapshot 1`] = `
               popoverProps={{}}
               selected={false}
               shouldDismissPopover={true}
-              text="Force Coordinator mode"
+              text="Manually set Coordinator mode"
             />
             <Blueprint4.MenuItem
               active={false}
@@ -302,7 +302,7 @@ exports[`HeaderBar matches snapshot 1`] = `
               popoverProps={{}}
               selected={false}
               shouldDismissPopover={true}
-              text="Force Overlord mode"
+              text="Manually set Overlord mode"
             />
             <Blueprint4.MenuItem
               active={false}
@@ -312,7 +312,7 @@ exports[`HeaderBar matches snapshot 1`] = `
               popoverProps={{}}
               selected={false}
               shouldDismissPopover={true}
-              text="Force no management proxy mode"
+              text="Manually set Router with no management proxy mode"
             />
           </Blueprint4.MenuItem>
         </Blueprint4.Menu>
diff --git a/web-console/src/components/header-bar/header-bar.tsx b/web-console/src/components/header-bar/header-bar.tsx
index 28d7572db0d2..45fb9a09d591 100644
--- a/web-console/src/components/header-bar/header-bar.tsx
+++ b/web-console/src/components/header-bar/header-bar.tsx
@@ -187,7 +187,7 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
     </Menu>
   );
 
-  function setForcedMode(capabilities: Capabilities | undefined): void {
+  function setCapabilitiesOverride(capabilities: Capabilities | undefined): void {
     if (capabilities) {
       localStorageSetJson(LocalStorageKeys.CAPABILITIES_OVERRIDE, capabilities);
     } else {
@@ -224,35 +224,43 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
         disabled={!capabilities.hasCoordinatorAccess()}
       />
       <MenuDivider />
-      <MenuItem icon={IconNames.HIGH_PRIORITY} text="Force specific console mode">
+      <MenuItem
+        icon={IconNames.HIGH_PRIORITY}
+        text="Capabilty detection"
+        intent={capabilitiesOverride ? Intent.DANGER : undefined}
+      >
         {capabilitiesOverride && (
           <>
-            <MenuItem text="Clear forced mode" onClick={() => setForcedMode(undefined)} />
+            <MenuItem
+              text="Use manual capabilty detection"
+              onClick={() => setCapabilitiesOverride(undefined)}
+              intent={Intent.PRIMARY}
+            />
             <MenuDivider />
           </>
         )}
         {capabilitiesMode !== 'coordinator-overlord' && (
           <MenuItem
-            text="Force Coordinator/Overlord mode"
-            onClick={() => setForcedMode(Capabilities.COORDINATOR_OVERLORD)}
+            text="Manually set Coordinator/Overlord mode"
+            onClick={() => setCapabilitiesOverride(Capabilities.COORDINATOR_OVERLORD)}
           />
         )}
         {capabilitiesMode !== 'coordinator' && (
           <MenuItem
-            text="Force Coordinator mode"
-            onClick={() => setForcedMode(Capabilities.COORDINATOR)}
+            text="Manually set Coordinator mode"
+            onClick={() => setCapabilitiesOverride(Capabilities.COORDINATOR)}
           />
         )}
         {capabilitiesMode !== 'overlord' && (
           <MenuItem
-            text="Force Overlord mode"
-            onClick={() => setForcedMode(Capabilities.OVERLORD)}
+            text="Manually set Overlord mode"
+            onClick={() => setCapabilitiesOverride(Capabilities.OVERLORD)}
           />
         )}
         {capabilitiesMode !== 'no-proxy' && (
           <MenuItem
-            text="Force no management proxy mode"
-            onClick={() => setForcedMode(Capabilities.NO_PROXY)}
+            text="Manually set Router with no management proxy mode"
+            onClick={() => setCapabilitiesOverride(Capabilities.NO_PROXY)}
           />
         )}
       </MenuItem>
@@ -357,23 +365,33 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
         </Popover2>
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
-        <RestrictedMode capabilities={capabilities} onUnrestrict={onUnrestrict} />
+        <RestrictedMode
+          capabilities={capabilities}
+          onUnrestrict={onUnrestrict}
+          onUseAutomaticCapabilityDetection={
+            capabilitiesOverride ? () => setCapabilitiesOverride(undefined) : undefined
+          }
+        />
         {capabilitiesOverride && (
           <Popover2
             content={
               <PopoverText>
                 <p>
-                  The console is running in a forced mode that assumes a limited set of capabilities rather
-                   than detecting all capabilities for the cluster.
+                  The console is running in a manual capability setting mode that assumes a limited
+                  set of capabilities rather than detecting all capabilities for the cluster.
+                </p>
+                <p>
+                  Manual capability setting mode is an advanced feature used for testing and for
+                  working around issues with the automatic capability detecting logic.
                 </p>
                 <p>
-                  Forced mode is an advanced feature used for testing and for working around issues with the
-                  capability detecting logic. If you are unsure why the console is in forced mode, clear it.
+                  If you are unsure why the console is in ths mode mode, revert to using automatic
+                  capability detection.
                 </p>
                 <p>
                   <Button
-                    text="Clear forced mode"
-                    onClick={() => setForcedMode(undefined)}
+                    text="Use automatic capability detection"
+                    onClick={() => setCapabilitiesOverride(undefined)}
                     intent={Intent.PRIMARY}
                   />
                 </p>
@@ -383,7 +401,7 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
           >
             <Button
               icon={IconNames.HIGH_PRIORITY}
-              text="Forced mode"
+              text="Manual capabilty detection"
               intent={Intent.DANGER}
               minimal
             />
diff --git a/web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap b/web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap
index 19450319bb5f..ed352ecbf5fe 100644
--- a/web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap
+++ b/web-console/src/components/header-bar/restricted-mode/__snapshots__/restricted-mode.spec.tsx.snap
@@ -1,9 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RestrictedMode matches snapshot 1`] = `
+exports[`RestrictedMode matches snapshot when in auto capability detection mode 1`] = `
 <Blueprint4.Popover2
   boundary="clippingParents"
   captureDismiss={false}
+  className="restricted-mode"
   content={
     <Memo(PopoverText)>
       <p>
@@ -22,16 +23,89 @@ exports[`RestrictedMode matches snapshot 1`] = `
         </Memo(ExternalLink)>
         .
       </p>
-      <p>
-        It is possible that the console is experiencing an issue with the capability detection. You can enable the unrestricted console, but certain features might not work if the underlying APIs are not available.
-      </p>
+      <React.Fragment>
+        <p>
+          It is possible that the console is experiencing an issue with the capability detection. You can enable the unrestricted console, but certain features might not work if the underlying APIs are not available.
+        </p>
+        <p>
+          <Blueprint4.Button
+            icon="warning-sign"
+            onClick={[Function]}
+            text="Temporarily unrestrict console (with SQL)"
+          />
+        </p>
+      </React.Fragment>
       <p>
         <Blueprint4.Button
           icon="warning-sign"
           onClick={[Function]}
-          text="Temporarily unrestrict console (with SQL)"
+          text="Temporarily unrestrict console (without SQL)"
         />
       </p>
+    </Memo(PopoverText)>
+  }
+  defaultIsOpen={false}
+  disabled={false}
+  fill={false}
+  hasBackdrop={false}
+  hoverCloseDelay={300}
+  hoverOpenDelay={150}
+  inheritDarkTheme={true}
+  interactionKind="click"
+  matchTargetWidth={false}
+  minimal={false}
+  openOnTargetFocus={true}
+  position="bottom-right"
+  positioningStrategy="absolute"
+  shouldReturnFocusOnClose={false}
+  targetTagName="span"
+  transitionDuration={300}
+  usePortal={true}
+>
+  <Blueprint4.Button
+    icon="warning-sign"
+    intent="warning"
+    minimal={true}
+    text="Coordinator/Overlord mode"
+  />
+</Blueprint4.Popover2>
+`;
+
+exports[`RestrictedMode matches snapshot when in manual capability detection mode 1`] = `
+<Blueprint4.Popover2
+  boundary="clippingParents"
+  captureDismiss={false}
+  className="restricted-mode"
+  content={
+    <Memo(PopoverText)>
+      <p>
+        The console is running in restricted mode.
+      </p>
+      <p>
+        You are accessing the console on the Coordinator/Overlord shared service. Because this service lacks access to some APIs, the console will operate in a limited mode. You can access the unrestricted version of the console on the Router service.
+      </p>
+      <p>
+        For more info refer to the
+         
+        <Memo(ExternalLink)
+          href="https://druid.apache.org/docs/latest/operations/web-console.html"
+        >
+          web console documentation
+        </Memo(ExternalLink)>
+        .
+      </p>
+      <React.Fragment>
+        <p>
+          The console did no perform its automatic capability detection because it is running in manual capability detection mode.
+        </p>
+        <p>
+          <Blueprint4.Button
+            intent="primary"
+            onClick={[Function]}
+            text="Use to automatic capability detection"
+          />
+        </p>
+      </React.Fragment>
       <p>
         <Blueprint4.Button
           icon="warning-sign"
diff --git a/web-console/src/components/header-bar/restricted-mode/restricted-mode.spec.tsx b/web-console/src/components/header-bar/restricted-mode/restricted-mode.spec.tsx
index 2d853b28b337..2469c11f6ff3 100644
--- a/web-console/src/components/header-bar/restricted-mode/restricted-mode.spec.tsx
+++ b/web-console/src/components/header-bar/restricted-mode/restricted-mode.spec.tsx
@@ -24,10 +24,21 @@ import { shallow } from '../../../utils/shallow-renderer';
 import { RestrictedMode } from './restricted-mode';
 
 describe('RestrictedMode', () => {
-  it('matches snapshot', () => {
+  it('matches snapshot when in auto capability detection mode', () => {
     const headerBar = shallow(
       <RestrictedMode capabilities={Capabilities.COORDINATOR_OVERLORD} onUnrestrict={() => {}} />,
     );
     expect(headerBar).toMatchSnapshot();
   });
+
+  it('matches snapshot when in manual capability detection mode', () => {
+    const headerBar = shallow(
+      <RestrictedMode
+        capabilities={Capabilities.COORDINATOR_OVERLORD}
+        onUnrestrict={() => {}}
+        onUseAutomaticCapabilityDetection={() => {}}
+      />,
+    );
+    expect(headerBar).toMatchSnapshot();
+  });
 });
diff --git a/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx b/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
index d46f14db5101..072d5b10e587 100644
--- a/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
+++ b/web-console/src/components/header-bar/restricted-mode/restricted-mode.tsx
@@ -29,10 +29,11 @@ import { PopoverText } from '../../popover-text/popover-text';
 export interface RestrictedModeProps {
   capabilities: Capabilities;
   onUnrestrict(capabilities: Capabilities): void;
+  onUseAutomaticCapabilityDetection?: () => void;
 }
 
 export const RestrictedMode = React.memo(function RestrictedMode(props: RestrictedModeProps) {
-  const { capabilities, onUnrestrict } = props;
+  const { capabilities, onUnrestrict, onUseAutomaticCapabilityDetection } = props;
   const mode = capabilities.getModeExtended();
 
   let label: string;
@@ -120,6 +121,7 @@ export const RestrictedMode = React.memo(function RestrictedMode(props: Restrict
 
   return (
     <Popover2
+      className="restricted-mode"
       content={
         <PopoverText>
           <p>The console is running in restricted mode.</p>
@@ -131,18 +133,38 @@ export const RestrictedMode = React.memo(function RestrictedMode(props: Restrict
             </ExternalLink>
             .
           </p>
-          <p>
-            It is possible that the console is experiencing an issue with the capability detection.
-            You can enable the unrestricted console, but certain features might not work if the
-            underlying APIs are not available.
-          </p>
-          <p>
-            <Button
-              icon={IconNames.WARNING_SIGN}
-              text={`Temporarily unrestrict console${capabilities.hasSql() ? '' : ' (with SQL)'}`}
-              onClick={() => onUnrestrict(Capabilities.FULL)}
-            />
-          </p>
+          {onUseAutomaticCapabilityDetection ? (
+            <>
+              <p>
+                The console did no perform its automatic capability detection because it is running
+                in manual capability detection mode.
+              </p>
+              <p>
+                <Button
+                  text="Use to automatic capability detection"
+                  onClick={onUseAutomaticCapabilityDetection}
+                  intent={Intent.PRIMARY}
+                />
+              </p>
+            </>
+          ) : (
+            <>
+              <p>
+                It is possible that the console is experiencing an issue with the capability
+                detection. You can enable the unrestricted console, but certain features might not
+                work if the underlying APIs are not available.
+              </p>
+              <p>
+                <Button
+                  icon={IconNames.WARNING_SIGN}
+                  text={`Temporarily unrestrict console${
+                    capabilities.hasSql() ? '' : ' (with SQL)'
+                  }`}
+                  onClick={() => onUnrestrict(Capabilities.FULL)}
+                />
+              </p>
+            </>
+          )}
           {!capabilities.hasSql() && (
             <p>
               <Button

From 3ded06e0e85058feaedf090cd0f342aae95d775d Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Mon, 25 Mar 2024 14:57:40 -0700
Subject: [PATCH 16/17] typo

---
 web-console/src/components/header-bar/header-bar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-console/src/components/header-bar/header-bar.tsx b/web-console/src/components/header-bar/header-bar.tsx
index 45fb9a09d591..68f3077915de 100644
--- a/web-console/src/components/header-bar/header-bar.tsx
+++ b/web-console/src/components/header-bar/header-bar.tsx
@@ -232,7 +232,7 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
         {capabilitiesOverride && (
           <>
             <MenuItem
-              text="Use manual capabilty detection"
+              text="Use automatic capabilty detection"
               onClick={() => setCapabilitiesOverride(undefined)}
               intent={Intent.PRIMARY}
             />

From b01367dddeb40dd6e98e1e331fce9213da5a0a64 Mon Sep 17 00:00:00 2001
From: Vadim Ogievetsky <vadim@ogievetsky.com>
Date: Mon, 1 Apr 2024 15:13:18 -0700
Subject: [PATCH 17/17] typo2

---
 web-console/src/components/header-bar/header-bar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-console/src/components/header-bar/header-bar.tsx b/web-console/src/components/header-bar/header-bar.tsx
index 68f3077915de..9a66dbaeace3 100644
--- a/web-console/src/components/header-bar/header-bar.tsx
+++ b/web-console/src/components/header-bar/header-bar.tsx
@@ -385,7 +385,7 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
                   working around issues with the automatic capability detecting logic.
                 </p>
                 <p>
-                  If you are unsure why the console is in ths mode mode, revert to using automatic
+                  If you are unsure why the console is in this mode, revert to using automatic
                   capability detection.
                 </p>
                 <p>