Make web console fast around sys.segments

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

@@ -119,6 +119,42 @@ exports[`header bar matches snapshot 1`] = `
             shouldDismissPopover={true}
             text="Lookups"
           />
+          <Blueprint3.MenuDivider />
+          <Blueprint3.MenuItem
+            disabled={false}
+            icon="cog"
+            multiline={false}
+            popoverProps={Object {}}
+            shouldDismissPopover={true}
+            text="Console options"
+          >
+            <React.Fragment>
+              <Blueprint3.MenuItem
+                disabled={false}
+                multiline={false}
+                onClick={[Function]}
+                popoverProps={Object {}}
+                shouldDismissPopover={true}
+                text="Force Coordinator/Overlord mode"
+              />
+              <Blueprint3.MenuItem
+                disabled={false}
+                multiline={false}
+                onClick={[Function]}
+                popoverProps={Object {}}
+                shouldDismissPopover={true}
+                text="Force Coordinator mode"
+              />
+              <Blueprint3.MenuItem
+                disabled={false}
+                multiline={false}
+                onClick={[Function]}
+                popoverProps={Object {}}
+                shouldDismissPopover={true}
+                text="Force Overlord mode"
+              />
+            </React.Fragment>
+          </Blueprint3.MenuItem>
         </Blueprint3.Menu>
       }
       defaultIsOpen={false}

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

@@ -22,6 +22,7 @@ import {
   Button,
   Intent,
   Menu,
+  MenuDivider,
   MenuItem,
   Navbar,
   NavbarDivider,
@@ -39,12 +40,20 @@ import {
   OverlordDynamicConfigDialog,
 } from '../../dialogs';
 import { getLink } from '../../links';
-import { Capabilities } from '../../utils';
+import {
+  Capabilities,
+  localStorageGetJson,
+  LocalStorageKeys,
+  localStorageRemove,
+  localStorageSetJson,
+} from '../../utils';
 import { ExternalLink } from '../external-link/external-link';
 import { PopoverText } from '../popover-text/popover-text';
 
 import './header-bar.scss';
 
+const capabilitiesOverride = localStorageGetJson(LocalStorageKeys.CAPABILITIES_OVERRIDE);
+
 export type HeaderActiveTab =
   | null
   | 'load-data'
@@ -121,6 +130,17 @@ const RestrictedMode = React.memo(function RestrictedMode(props: RestrictedModeP
       );
       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 full version of the console can be accessed on the Router service.
+        </p>
+      );
+      break;
+
     case 'coordinator':
       label = 'Coordinator mode';
       message = (
@@ -216,6 +236,16 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
     </Menu>
   );
 
+  function setForcedMode(capabilities: Capabilities | undefined): void {
+    if (capabilities) {
+      localStorageSetJson(LocalStorageKeys.CAPABILITIES_OVERRIDE, capabilities);
+    } else {
+      localStorageRemove(LocalStorageKeys.CAPABILITIES_OVERRIDE);
+    }
+    location.reload();
+  }
+
+  const capabilitiesMode = capabilities.getModeExtended();
   const configMenu = (
     <Menu>
       <MenuItem
@@ -243,6 +273,33 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) {
         href="#lookups"
         disabled={!capabilities.hasCoordinatorAccess()}
       />
+      <MenuDivider />
+      <MenuItem icon={IconNames.COG} text="Console options">
+        {capabilitiesOverride ? (
+          <MenuItem text="Clear forced mode" onClick={() => setForcedMode(undefined)} />
+        ) : (
+          <>
+            {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)}
+              />
+            )}
+          </>
+        )}
+      </MenuItem>
     </Menu>
   );
 

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

@@ -18,7 +18,7 @@
 
 import { Button, Menu, Popover, Position } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import React from 'react';
+import React, { useState } from 'react';
 
 import { MenuCheckbox } from '../menu-checkbox/menu-checkbox';
 
@@ -27,13 +27,15 @@ import './table-column-selector.scss';
 interface TableColumnSelectorProps {
   columns: string[];
   onChange: (column: string) => void;
+  onClose?: (added: number) => void;
   tableColumnsHidden: string[];
 }
 
 export const TableColumnSelector = React.memo(function TableColumnSelector(
   props: TableColumnSelectorProps,
 ) {
-  const { columns, onChange, tableColumnsHidden } = props;
+  const { columns, onChange, onClose, tableColumnsHidden } = props;
+  const [added, setAdded] = useState(0);
 
   const isColumnShown = (column: string) => !tableColumnsHidden.includes(column);
 
@@ -44,7 +46,12 @@ export const TableColumnSelector = React.memo(function TableColumnSelector(
           text={column}
           key={column}
           checked={isColumnShown(column)}
-          onChange={() => onChange(column)}
+          onChange={() => {
+            if (!isColumnShown(column)) {
+              setAdded(added + 1);
+            }
+            onChange(column);
+          }}
         />
       ))}
     </Menu>
@@ -57,6 +64,11 @@ export const TableColumnSelector = React.memo(function TableColumnSelector(
       className="table-column-selector"
       content={checkboxes}
       position={Position.BOTTOM_RIGHT}
+      onOpened={() => setAdded(0)}
+      onClose={() => {
+        if (!onClose) return;
+        onClose(added);
+      }}
     >
       <Button rightIcon={IconNames.CARET_DOWN}>
         Columns <span className="counter">{counterText}</span>

web-console/src/singletons/api.ts

@@ -47,7 +47,7 @@ export class Api {
 
   static encodePath(path: string): string {
     return path.replace(
-      /[?#%&'\[\]]/g,
+      /[?#%&'\[\]\\]/g,
       c =>
         '%' +
         c

web-console/src/utils/capabilities.ts

@@ -27,6 +27,7 @@ export type CapabilitiesModeExtended =
   | 'no-sql'
   | 'no-proxy'
   | 'no-sql-no-proxy'
+  | 'coordinator-overlord'
   | 'coordinator'
   | 'overlord';
 
@@ -41,6 +42,7 @@ export interface CapabilitiesOptions {
 export class Capabilities {
   static STATUS_TIMEOUT = 2000;
   static FULL: Capabilities;
+  static COORDINATOR_OVERLORD: Capabilities;
   static COORDINATOR: Capabilities;
   static OVERLORD: Capabilities;
 
@@ -154,6 +156,9 @@ export class Capabilities {
         return 'no-sql-no-proxy';
       }
     } else {
+      if (coordinator && overlord) {
+        return 'coordinator-overlord';
+      }
       if (coordinator) {
         return 'coordinator';
       }
@@ -198,6 +203,11 @@ Capabilities.FULL = new Capabilities({
   coordinator: true,
   overlord: true,
 });
+Capabilities.COORDINATOR_OVERLORD = new Capabilities({
+  queryType: 'none',
+  coordinator: true,
+  overlord: true,
+});
 Capabilities.COORDINATOR = new Capabilities({
   queryType: 'none',
   coordinator: true,

web-console/src/utils/general.tsx

@@ -98,7 +98,8 @@ interface NeedleAndMode {
   mode: 'exact' | 'includes';
 }
 
-function getNeedleAndMode(input: string): NeedleAndMode {
+export function getNeedleAndMode(filter: Filter): NeedleAndMode {
+  const input = filter.value.toLowerCase();
   if (input.startsWith(`"`) && input.endsWith(`"`)) {
     return {
       needle: input.slice(1, -1),
@@ -114,7 +115,7 @@ function getNeedleAndMode(input: string): NeedleAndMode {
 export function booleanCustomTableFilter(filter: Filter, value: any): boolean {
   if (value == null) return false;
   const haystack = String(value).toLowerCase();
-  const needleAndMode: NeedleAndMode = getNeedleAndMode(filter.value.toLowerCase());
+  const needleAndMode: NeedleAndMode = getNeedleAndMode(filter);
   const needle = needleAndMode.needle;
   if (needleAndMode.mode === 'exact') {
     return needle === haystack;
@@ -123,13 +124,13 @@ export function booleanCustomTableFilter(filter: Filter, value: any): boolean {
 }
 
 export function sqlQueryCustomTableFilter(filter: Filter): SqlExpression {
-  const needleAndMode: NeedleAndMode = getNeedleAndMode(filter.value);
+  const needleAndMode: NeedleAndMode = getNeedleAndMode(filter);
   const needle = needleAndMode.needle;
   if (needleAndMode.mode === 'exact') {
     return SqlRef.columnWithQuotes(filter.id).equal(SqlLiteral.create(needle));
   } else {
     return SqlFunction.simple('LOWER', [SqlRef.columnWithQuotes(filter.id)]).like(
-      SqlLiteral.create(`%${needle.toLowerCase()}%`),
+      SqlLiteral.create(`%${needle}%`),
     );
   }
 }

web-console/src/utils/local-storage-keys.tsx

@@ -67,3 +67,8 @@ export function localStorageGetJson(key: LocalStorageKeys): any {
     return;
   }
 }
+
+export function localStorageRemove(key: LocalStorageKeys): void {
+  if (typeof localStorage === 'undefined') return;
+  return localStorage.removeItem(key);
+}

web-console/src/views/datasource-view/__snapshots__/datasource-view.spec.tsx.snap

@@ -26,7 +26,7 @@ exports[`data source view matches snapshot 1`] = `
       }
     >
       <Blueprint3.MenuItem
-        disabled={false}
+        disabled={true}
         icon="application"
         multiline={false}
         onClick={[Function]}
@@ -61,7 +61,7 @@ exports[`data source view matches snapshot 1`] = `
         Array [
           "Datasource name",
           "Availability",
-          "Segment load/drop queues",
+          "Availability detail",
           "Total data size",
           "Segment size",
           "Segment granularity",
@@ -76,6 +76,7 @@ exports[`data source view matches snapshot 1`] = `
         ]
       }
       onChange={[Function]}
+      onClose={[Function]}
       tableColumnsHidden={Array []}
     />
   </Memo(ViewControlBar)>
@@ -150,23 +151,21 @@ exports[`data source view matches snapshot 1`] = `
         Object {
           "Cell": [Function],
           "Header": "Availability",
-          "accessor": [Function],
+          "accessor": "num_segments",
           "filterable": false,
-          "id": "availability",
           "minWidth": 200,
           "show": true,
           "sortMethod": [Function],
         },
         Object {
           "Cell": [Function],
           "Header": <React.Fragment>
-            Segment load/drop
+            Availability
             <br />
-            queues
+            detail
           </React.Fragment>,
           "accessor": "num_segments_to_load",
           "filterable": false,
-          "id": "load-drop",
           "minWidth": 100,
           "show": true,
         },