ydb-embedded-ui 21.1.0 → 22.1.0

package/src/components/FullNodeViewer/FullNodeViewer.tsx

@@ -2,13 +2,16 @@ import {Flex} from '@gravity-ui/uikit';
 
 import type {PreparedNode} from '../../store/reducers/node/types';
 import {cn} from '../../utils/cn';
+import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
+import {formatStorageValues} from '../../utils/dataFormatters/dataFormatters';
 import {useNodeDeveloperUIHref} from '../../utils/hooks/useNodeDeveloperUIHref';
-import {InfoViewer} from '../InfoViewer/InfoViewer';
-import type {InfoViewerItem} from '../InfoViewer/InfoViewer';
+import {isNumeric} from '../../utils/utils';
 import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
 import {PoolUsage} from '../PoolUsage/PoolUsage';
 import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
 import {NodeUptime} from '../UptimeViewer/UptimeViewer';
+import type {YDBDefinitionListItem} from '../YDBDefinitionList/YDBDefinitionList';
+import {YDBDefinitionList} from '../YDBDefinitionList/YDBDefinitionList';
 
 import i18n from './i18n';
 
@@ -24,68 +27,108 @@ const getLoadAverageIntervalTitle = (index: number) => {
     return [i18n('la-interval-1m'), i18n('la-interval-5m'), i18n('la-interval-15m')][index];
 };
 
+const formatMemoryValues = (value?: number, total?: number) =>
+    formatStorageValues(value, total, 'gb', undefined, true);
+
 // eslint-disable-next-line complexity
 export const FullNodeViewer = ({node, className}: FullNodeViewerProps) => {
     const developerUIHref = useNodeDeveloperUIHref(node);
 
-    const commonInfo: InfoViewerItem[] = [];
+    const commonInfo: YDBDefinitionListItem[] = [];
 
     if (node?.Tenants?.length) {
-        commonInfo.push({label: i18n('database'), value: node.Tenants[0]});
+        commonInfo.push({
+            name: i18n('database'),
+            content: node.Tenants[0] || EMPTY_DATA_PLACEHOLDER,
+        });
     }
 
     commonInfo.push(
-        {label: i18n('version'), value: node?.Version},
+        {name: i18n('version'), content: node?.Version || EMPTY_DATA_PLACEHOLDER},
         {
-            label: i18n('uptime'),
-            value: <NodeUptime StartTime={node?.StartTime} DisconnectTime={node?.DisconnectTime} />,
+            name: i18n('uptime'),
+            content: (
+                <NodeUptime StartTime={node?.StartTime} DisconnectTime={node?.DisconnectTime} />
+            ),
+        },
+        {
+            name: i18n('dc'),
+            content: node?.DataCenterDescription || node?.DC || EMPTY_DATA_PLACEHOLDER,
         },
-        {label: i18n('dc'), value: node?.DataCenterDescription || node?.DC},
     );
 
     if (node?.Rack) {
-        commonInfo.push({label: i18n('rack'), value: node?.Rack});
+        commonInfo.push({name: i18n('rack'), content: node.Rack});
     }
 
     if (developerUIHref) {
         commonInfo.push({
-            label: i18n('links'),
-            value: <LinkWithIcon url={developerUIHref} title={i18n('developer-ui')} />,
+            name: i18n('links'),
+            content: <LinkWithIcon url={developerUIHref} title={i18n('developer-ui')} />,
         });
     }
 
     const endpointsInfo = node?.Endpoints?.map(({Name, Address}) => ({
-        label: Name,
-        value: Address,
+        name: Name || EMPTY_DATA_PLACEHOLDER,
+        content: Address || EMPTY_DATA_PLACEHOLDER,
     }));
 
-    const averageInfo = node?.LoadAveragePercents?.map((load, loadIndex) => ({
-        label: getLoadAverageIntervalTitle(loadIndex),
-        value: (
-            <ProgressViewer value={load} percents={true} colorizeProgress={true} capacity={100} />
-        ),
-    }));
+    const averageInfo =
+        node?.LoadAveragePercents?.map((load, loadIndex) => ({
+            name: getLoadAverageIntervalTitle(loadIndex),
+            content: (
+                <ProgressViewer
+                    value={load}
+                    percents={true}
+                    colorizeProgress={true}
+                    capacity={100}
+                />
+            ),
+        })) ?? [];
 
     if (!node) {
         return <div className="error">{i18n('no-data')}</div>;
     }
 
+    const memoryUsed = isNumeric(node.MemoryUsed) ? Number(node.MemoryUsed) : undefined;
+    const memoryLimit = isNumeric(node.MemoryLimit) ? Number(node.MemoryLimit) : undefined;
+    const hasMemoryUsed =
+        memoryUsed !== undefined && Number.isFinite(memoryUsed) && memoryUsed >= 0;
+    const hasMemoryLimit =
+        memoryLimit !== undefined && Number.isFinite(memoryLimit) && memoryLimit > 0;
+
+    const renderMemory = () => {
+        if (!hasMemoryUsed) {
+            return EMPTY_DATA_PLACEHOLDER;
+        }
+        if (!hasMemoryLimit) {
+            return formatMemoryValues(memoryUsed)[0];
+        }
+
+        return (
+            <ProgressViewer
+                value={memoryUsed}
+                capacity={memoryLimit}
+                formatValues={formatMemoryValues}
+                colorizeProgress
+            />
+        );
+    };
+
     return (
         <div className={b(null, className)}>
             <Flex wrap gap={4}>
                 <Flex direction="column" gap={2}>
-                    <InfoViewer
-                        title={i18n('title.common-info')}
-                        className={b('section')}
-                        info={commonInfo}
-                    />
+                    <div className={b('section')}>
+                        <div className={b('section-title')}>{i18n('title.common-info')}</div>
+                        <YDBDefinitionList items={commonInfo} nameMaxWidth={100} compact />
+                    </div>
 
                     {endpointsInfo && endpointsInfo.length ? (
-                        <InfoViewer
-                            title={i18n('title.endpoints')}
-                            className={b('section')}
-                            info={endpointsInfo}
-                        />
+                        <div className={b('section')}>
+                            <div className={b('section-title')}>{i18n('title.endpoints')}</div>
+                            <YDBDefinitionList items={endpointsInfo} nameMaxWidth={100} compact />
+                        </div>
                     ) : null}
                 </Flex>
 
@@ -99,11 +142,15 @@ export const FullNodeViewer = ({node, className}: FullNodeViewerProps) => {
                         </div>
                     </div>
 
-                    <InfoViewer
-                        title={i18n('title.load-average')}
-                        className={b('section', {average: true})}
-                        info={averageInfo}
-                    />
+                    <div className={b('section', {average: true})}>
+                        <div className={b('section-title')}>{i18n('title.load-average')}</div>
+                        <YDBDefinitionList items={averageInfo} nameMaxWidth={100} compact />
+                    </div>
+
+                    <div className={b('section', {ram: true})} data-qa="node-ram">
+                        <div className={b('section-title')}>{i18n('title_ram')}</div>
+                        {renderMemory()}
+                    </div>
                 </Flex>
 
                 {node.Roles && node.Roles.length ? (

package/src/components/FullNodeViewer/i18n/en.json

@@ -17,5 +17,6 @@
   "title.endpoints": "Endpoints",
   "title.roles": "Roles",
   "title.pools": "Pools",
-  "title.load-average": "Load average"
+  "title.load-average": "Load average",
+  "title_ram": "RAM"
 }

package/src/components/HoverPopup/HoverPopup.tsx

@@ -5,9 +5,31 @@ import {Popup} from '@gravity-ui/uikit';
 import debounce from 'lodash/debounce';
 
 import {YDB_POPOVER_CLASS_NAME} from '../../utils/constants';
+import {useEventHandler} from '../../utils/hooks/useEventHandler';
+
+import {getPopupScrollContainer} from './getPopupScrollContainer';
 
 const DEBOUNCE_TIMEOUT = 100;
 
+function useVisibleAnchor(anchorElement: HTMLElement | null, open: boolean) {
+    const [visibleAnchor, setVisibleAnchor] = React.useState<HTMLElement | null>(null);
+
+    React.useLayoutEffect(() => {
+        setVisibleAnchor(null);
+        if (!open || !anchorElement) {
+            return undefined;
+        }
+
+        const observer = new IntersectionObserver(([entry]) => {
+            setVisibleAnchor(entry.isIntersecting ? anchorElement : null);
+        });
+        observer.observe(anchorElement);
+        return () => observer.disconnect();
+    }, [anchorElement, open]);
+
+    return anchorElement !== null && visibleAnchor === anchorElement;
+}
+
 type HoverPopupProps = {
     children: React.ReactNode;
     renderPopupContent: (controls: {onClose: VoidFunction}) => React.ReactNode;
@@ -28,7 +50,7 @@ export const HoverPopup = ({
     anchorRef,
     onShowPopup,
     onHidePopup,
-    placement = ['top', 'bottom'],
+    placement = ['top', 'bottom', 'left', 'right'],
     contentClassName,
     delayClose = DEBOUNCE_TIMEOUT,
     delayOpen = DEBOUNCE_TIMEOUT,
@@ -41,22 +63,19 @@ export const HoverPopup = ({
 
     const reportedOpenRef = React.useRef(false);
 
-    const reportOpen = React.useCallback(
-        (nextOpen: boolean, force = false) => {
-            if (!force && reportedOpenRef.current === nextOpen) {
-                return;
-            }
-
-            reportedOpenRef.current = nextOpen;
-
-            if (nextOpen) {
-                onShowPopup?.();
-            } else {
-                onHidePopup?.();
-            }
-        },
-        [onShowPopup, onHidePopup],
-    );
+    const reportOpen = useEventHandler((nextOpen: boolean, force = false) => {
+        if (!force && reportedOpenRef.current === nextOpen) {
+            return;
+        }
+
+        reportedOpenRef.current = nextOpen;
+
+        if (nextOpen) {
+            onShowPopup?.();
+        } else {
+            onHidePopup?.();
+        }
+    });
 
     const debouncedHandleShowPopup = React.useMemo(
         () =>
@@ -80,6 +99,13 @@ export const HoverPopup = ({
         [delayClose, reportOpen, hidePopup],
     );
 
+    React.useEffect(() => {
+        return () => {
+            debouncedHandleShowPopup.cancel();
+            debouncedHandleHidePopup.cancel();
+        };
+    }, [debouncedHandleShowPopup, debouncedHandleHidePopup]);
+
     const closePopup = React.useCallback(() => {
         debouncedHandleShowPopup.cancel();
         debouncedHandleHidePopup.cancel();
@@ -124,9 +150,12 @@ export const HoverPopup = ({
     }, [closePopup]);
 
     const internalOpen = isPopupVisible || isPopupContentHovered || isFocused;
-    const open = internalOpen || showPopup;
+    const open = Boolean(internalOpen || showPopup);
 
     const anchorElement = anchorRef?.current || anchor.current;
+    // Clipping a paired disk must not clear the shared hover state via onHidePopup.
+    const isAnchorVisible = useVisibleAnchor(anchorElement, open);
+    const container = getPopupScrollContainer(anchorElement);
 
     return (
         <React.Fragment>
@@ -135,6 +164,9 @@ export const HoverPopup = ({
             </span>
             {anchorElement ? (
                 <Popup
+                    container={container}
+                    // Keep portal typography when the page uses a different font.
+                    floatingStyles={{fontFamily: 'var(--g-text-body-font-family)'}}
                     anchorElement={anchorElement}
                     onOpenChange={(_open, _event, reason) => {
                         if (reason === 'escape-key') {
@@ -142,9 +174,11 @@ export const HoverPopup = ({
                         }
                     }}
                     placement={placement}
+                    // Exiting popups must not expand the page when their anchors scroll offscreen.
+                    strategy="fixed"
                     returnFocus={false}
                     hasArrow
-                    open={open}
+                    open={open && isAnchorVisible}
                     // bigger offset for easier switching to neighbour nodes
                     // matches the default offset for popup with arrow out of a sense of beauty
                     offset={offset || {mainAxis: 12, crossAxis: 0}}

package/src/components/HoverPopup/getPopupScrollContainer.ts

@@ -0,0 +1,20 @@
+export function getPopupScrollContainer(anchor: HTMLElement | null) {
+    if (!anchor) {
+        return undefined;
+    }
+    const doc = anchor.ownerDocument;
+    let parent = anchor.parentElement;
+    while (parent) {
+        if (
+            parent === doc.fullscreenElement ||
+            parent.classList.contains('ydb-fullscreen_fullscreen') ||
+            (/auto|scroll/.test(doc.defaultView?.getComputedStyle(parent).overflowY ?? '') &&
+                parent.scrollHeight > parent.clientHeight)
+        ) {
+            // Document scrolling already works through the default portal.
+            return parent === doc.scrollingElement ? undefined : parent;
+        }
+        parent = parent.parentElement;
+    }
+    return undefined;
+}

package/src/components/InfoViewer/InfoViewer.tsx

@@ -47,7 +47,7 @@ export const InfoViewer = ({
             {info && info.length > 0 ? (
                 <div className={b('items')}>
                     {info.map((data, infoIndex) => (
-                        <div className={b('row')} key={infoIndex}>
+                        <div className={b('row')} key={infoIndex} data-qa="info-viewer-row">
                             <div className={b('label')}>
                                 <div className={b('label-text', {multiline: multilineLabels})}>
                                     {data.label}
@@ -55,7 +55,9 @@ export const InfoViewer = ({
                                 {dots && <div className={b('dots')} />}
                             </div>
 
-                            <div className={b('value')}>{data.value}</div>
+                            <div className={b('value')} data-qa="info-viewer-value">
+                                {data.value}
+                            </div>
                         </div>
                     ))}
                 </div>

package/src/components/InfoViewer/formatters/pqGroup.ts

@@ -26,8 +26,12 @@ export const formatPQGroupItem = createInfoFormatter<TPersQueueGroupDescription>
     values: {
         Partitions: (value) => formatNumber(value?.length || 0),
         PQTabletConfig: (value) => {
-            const hours =
-                Math.round((value.PartitionConfig.LifetimeSeconds / HOUR_IN_SECONDS) * 100) / 100;
+            const lifetimeSeconds = value?.PartitionConfig?.LifetimeSeconds;
+            if (typeof lifetimeSeconds !== 'number' || !Number.isFinite(lifetimeSeconds)) {
+                return EMPTY_DATA_PLACEHOLDER;
+            }
+
+            const hours = Math.round((lifetimeSeconds / HOUR_IN_SECONDS) * 100) / 100;
             return `${formatNumber(hours)} hours`;
         },
     },

package/src/components/InfoViewer/schemaInfo/i18n/en.json

@@ -34,6 +34,7 @@
   "field_filter_length_min": "Filter Length Min",
   "field_filter_length_max": "Filter Length Max",
   "field_use_filter_snowball": "Filter Snowball",
+  "field_use_filter_superlemmer": "Filter Superlemmer",
   "filter_enabled": "Enabled",
   "filter_disabled": "Disabled",
 

package/src/components/InfoViewer/schemaInfo/utils.tsx

@@ -184,6 +184,8 @@ export function buildFulltextIndexSettingsInfo(
             filter_length_max: (v) => (typeof v === 'number' ? formatNumber(v) : v),
             use_filter_snowball: (v) =>
                 v === true ? i18n('filter_enabled') : i18n('filter_disabled'),
+            use_filter_superlemmer: (v) =>
+                v === true ? i18n('filter_enabled') : i18n('filter_disabled'),
         },
         labels: {
             tokenizer: i18n('field_tokenizer'),
@@ -198,6 +200,7 @@ export function buildFulltextIndexSettingsInfo(
             filter_length_min: i18n('field_filter_length_min'),
             filter_length_max: i18n('field_filter_length_max'),
             use_filter_snowball: i18n('field_use_filter_snowball'),
+            use_filter_superlemmer: i18n('field_use_filter_superlemmer'),
         },
     });
 
@@ -216,6 +219,7 @@ export function buildFulltextIndexSettingsInfo(
         filter_length_min,
         filter_length_max,
         use_filter_snowball,
+        use_filter_superlemmer,
     } = analyzers ?? {};
     if (tokenizer !== undefined) {
         info.push(fulltextIndexAnalyzersFormatter('tokenizer', tokenizer));
@@ -257,6 +261,11 @@ export function buildFulltextIndexSettingsInfo(
     if (use_filter_snowball !== undefined) {
         info.push(fulltextIndexAnalyzersFormatter('use_filter_snowball', use_filter_snowball));
     }
+    if (use_filter_superlemmer !== undefined) {
+        info.push(
+            fulltextIndexAnalyzersFormatter('use_filter_superlemmer', use_filter_superlemmer),
+        );
+    }
 
     return info;
 }

package/src/components/NodeHostWrapper/NodeHostWrapper.tsx

@@ -4,6 +4,7 @@ import type {NodeAddress} from '../../types/additionalProps';
 import type {TNodeInfo, TSystemStateInfo} from '../../types/api/nodes';
 import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {checkIsStorageNode, isUnavailableNode} from '../../utils/nodes';
+import type {PreparedNodeSystemState} from '../../utils/nodes';
 import {EntityName} from '../EntityName/EntityName';
 import {StatusColor} from '../StatusColor/StatusColor';
 import {NodeEndpointsTooltipContent} from '../TooltipsContent';
@@ -21,6 +22,27 @@ interface NodeHostWrapperProps {
     statusForIcon?: 'SystemState' | 'ConnectStatus';
 }
 
+export function getNodeHostPath(node: PreparedNodeSystemState, database?: string) {
+    if (!node.Host || node.NodeId === undefined || isUnavailableNode(node)) {
+        return undefined;
+    }
+
+    const databaseInPath = checkIsStorageNode(node) ? undefined : (database ?? node.TenantName);
+
+    return getDefaultNodePath(
+        {id: node.NodeId, activeTab: node.TenantName ? 'tablets' : 'storage'},
+        {database: databaseInPath},
+    );
+}
+
+export function getNodeHostLabel(node: PreparedNodeSystemState) {
+    return (
+        [node.NodeId, node.Host]
+            .filter((value) => value !== undefined && value !== null && value !== '')
+            .join(', ') || EMPTY_DATA_PLACEHOLDER
+    );
+}
+
 export const NodeHostWrapper = ({
     node,
     database,
@@ -34,19 +56,7 @@ export const NodeHostWrapper = ({
 
     const isNodeAvailable = !isUnavailableNode(node);
 
-    // Storage nodes do not belong to any specific database.
-    // Including a database in the path would filter data on the node page by that database,
-    // but for storage nodes this would result in no data being shown.
-    // Database from node data cannot be used, because we use database ids when uiFactory.useDatabaseId
-    // https://github.com/ydb-platform/ydb-embedded-ui/issues/3006
-    const databaseInPath = checkIsStorageNode(node) ? undefined : (database ?? node.TenantName);
-
-    const nodePath = isNodeAvailable
-        ? getDefaultNodePath(
-              {id: node.NodeId, activeTab: node.TenantName ? 'tablets' : 'storage'},
-              {database: databaseInPath},
-          )
-        : undefined;
+    const nodePath = getNodeHostPath(node, database);
 
     return (
         <EntityName

package/src/components/PaginatedTable/KeyboardNavigation.tsx

@@ -0,0 +1,30 @@
+import type React from 'react';
+
+import {KEYBOARD_FOCUS_ACTIVE_CLASS_NAME} from '../TableKeyboardNavigation/utils';
+
+import {KeyboardRowContext, useKeyboardNavigation} from './useKeyboardNavigation';
+import type {KeyboardNavigationParams} from './useKeyboardNavigation';
+
+interface KeyboardNavigationProps extends Omit<KeyboardNavigationParams, 'tableRef'> {
+    tableRef: React.RefObject<HTMLDivElement>;
+    children: React.ReactNode;
+    className?: string;
+}
+
+export function KeyboardNavigation({children, className, ...params}: KeyboardNavigationProps) {
+    const keyboard = useKeyboardNavigation(params);
+    const tableClassName = [
+        className,
+        keyboard.focusedIndex !== undefined ? KEYBOARD_FOCUS_ACTIVE_CLASS_NAME : undefined,
+    ]
+        .filter(Boolean)
+        .join(' ');
+
+    return (
+        <div className={tableClassName} {...keyboard.tableProps}>
+            <KeyboardRowContext.Provider value={keyboard.focusedIndex}>
+                {children}
+            </KeyboardRowContext.Provider>
+        </div>
+    );
+}

package/src/components/PaginatedTable/PaginatedTable.scss

@@ -57,6 +57,16 @@
         }
     }
 
+    .ydb-keyboard-focused-row {
+        background: var(--paginated-table-hover-color);
+    }
+
+    &.ydb-keyboard-focus-active {
+        #{$block}__row:hover:not(.ydb-keyboard-focused-row) {
+            background: transparent !important;
+        }
+    }
+
     &__head {
         z-index: 2;
         @include mixins.sticky-top();