Web console: Better manual capabilities detection indication

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="Capabilty detection"
           >
-            <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="Manually set Coordinator/Overlord mode"
+            />
+            <Blueprint4.MenuItem
+              active={false}
+              disabled={false}
+              multiline={false}
+              onClick={[Function]}
+              popoverProps={{}}
+              selected={false}
+              shouldDismissPopover={true}
+              text="Manually set Coordinator mode"
+            />
+            <Blueprint4.MenuItem
+              active={false}
+              disabled={false}
+              multiline={false}
+              onClick={[Function]}
+              popoverProps={{}}
+              selected={false}
+              shouldDismissPopover={true}
+              text="Manually set Overlord mode"
+            />
+            <Blueprint4.MenuItem
+              active={false}
+              disabled={false}
+              multiline={false}
+              onClick={[Function]}
+              popoverProps={{}}
+              selected={false}
+              shouldDismissPopover={true}
+              text="Manually set Router with no management proxy mode"
+            />
           </Blueprint4.MenuItem>
         </Blueprint4.Menu>
       }

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;
@@ -324,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 {
@@ -360,39 +223,46 @@ 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="Capabilty detection"
+        intent={capabilitiesOverride ? Intent.DANGER : undefined}
+      >
+        {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="Use automatic capabilty detection"
+              onClick={() => setCapabilitiesOverride(undefined)}
+              intent={Intent.PRIMARY}
+            />
+            <MenuDivider />
           </>
         )}
+        {capabilitiesMode !== 'coordinator-overlord' && (
+          <MenuItem
+            text="Manually set Coordinator/Overlord mode"
+            onClick={() => setCapabilitiesOverride(Capabilities.COORDINATOR_OVERLORD)}
+          />
+        )}
+        {capabilitiesMode !== 'coordinator' && (
+          <MenuItem
+            text="Manually set Coordinator mode"
+            onClick={() => setCapabilitiesOverride(Capabilities.COORDINATOR)}
+          />
+        )}
+        {capabilitiesMode !== 'overlord' && (
+          <MenuItem
+            text="Manually set Overlord mode"
+            onClick={() => setCapabilitiesOverride(Capabilities.OVERLORD)}
+          />
+        )}
+        {capabilitiesMode !== 'no-proxy' && (
+          <MenuItem
+            text="Manually set Router with no management proxy mode"
+            onClick={() => setCapabilitiesOverride(Capabilities.NO_PROXY)}
+          />
+        )}
       </MenuItem>
     </Menu>
   );
@@ -495,7 +365,48 @@ 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 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>
+                  If you are unsure why the console is in this mode, revert to using automatic
+                  capability detection.
+                </p>
+                <p>
+                  <Button
+                    text="Use automatic capability detection"
+                    onClick={() => setCapabilitiesOverride(undefined)}
+                    intent={Intent.PRIMARY}
+                  />
+                </p>
+              </PopoverText>
+            }
+            position={Position.BOTTOM_RIGHT}
+          >
+            <Button
+              icon={IconNames.HIGH_PRIORITY}
+              text="Manual capabilty detection"
+              intent={Intent.DANGER}
+              minimal
+            />
+          </Popover2>
+        )}
         <Popover2 content={configMenu} position={Position.BOTTOM_RIGHT}>
           <Button className="header-entry" minimal icon={IconNames.COG} />
         </Popover2>