From 4897731e376b80c37ea7713419bd89c7835809b9 Mon Sep 17 00:00:00 2001 From: Vadim Ogievetsky Date: Wed, 10 Mar 2021 19:59:50 -0800 Subject: [PATCH] Make web console fast around sys.segments (#10909) * do not load all the segments * fix filtering * update datasource view * updated tests * remove trimmedSegments * Availability detail * be smart about when showing smart modes * fix tests * add coordinator overlord mode --- .../__snapshots__/header-bar.spec.tsx.snap | 36 ++ .../src/components/header-bar/header-bar.tsx | 59 ++- .../table-column-selector.tsx | 18 +- web-console/src/singletons/api.ts | 2 +- web-console/src/utils/capabilities.ts | 10 + web-console/src/utils/general.tsx | 9 +- web-console/src/utils/local-storage-keys.tsx | 5 + .../datasource-view.spec.tsx.snap | 13 +- .../views/datasource-view/datasource-view.tsx | 256 +++++---- .../__snapshots__/segments-view.spec.tsx.snap | 15 + .../src/views/segments-view/segments-view.tsx | 487 ++++++++++-------- 11 files changed, 567 insertions(+), 343 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 0aadb182e0a..c2448c78a32 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 @@ -119,6 +119,42 @@ exports[`header bar matches snapshot 1`] = ` shouldDismissPopover={true} text="Lookups" /> + + + + + + + + } defaultIsOpen={false} diff --git a/web-console/src/components/header-bar/header-bar.tsx b/web-console/src/components/header-bar/header-bar.tsx index 76bb378fe78..b068e66847a 100644 --- a/web-console/src/components/header-bar/header-bar.tsx +++ b/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 = ( +

+ 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. +

+ ); + break; + case 'coordinator': label = 'Coordinator mode'; message = ( @@ -216,6 +236,16 @@ export const HeaderBar = React.memo(function HeaderBar(props: HeaderBarProps) { ); + 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 = ( + + + {capabilitiesOverride ? ( + setForcedMode(undefined)} /> + ) : ( + <> + {capabilitiesMode !== 'coordinator-overlord' && ( + setForcedMode(Capabilities.COORDINATOR_OVERLORD)} + /> + )} + {capabilitiesMode !== 'coordinator' && ( + setForcedMode(Capabilities.COORDINATOR)} + /> + )} + {capabilitiesMode !== 'overlord' && ( + setForcedMode(Capabilities.OVERLORD)} + /> + )} + + )} + ); diff --git a/web-console/src/components/table-column-selector/table-column-selector.tsx b/web-console/src/components/table-column-selector/table-column-selector.tsx index 6cdd9510fb9..5ce6db555d8 100644 --- a/web-console/src/components/table-column-selector/table-column-selector.tsx +++ b/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); + }} /> ))} @@ -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); + }} >