ydb-embedded-ui 22.0.0 → 22.2.0

package/src/components/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -51,28 +51,23 @@
     &_expert-mode {
         --entity-state-compact-background-color: var(--entity-state-background-color);
 
-        &#{$block}_grey {
-            --entity-state-background-color: var(--g-color-base-generic-medium);
-            --entity-state-border-color: none;
-            --entity-state-fill-color: var(--g-color-base-neutral-medium);
-
-            border: none;
-
-            &#{$block}_highlighted {
-                --entity-state-background-color: var(--g-color-base-generic-medium-hover);
-                --entity-state-fill-color: var(--g-color-base-neutral-medium-hover);
-            }
-        }
-
         &#{$block}_light-grey {
+            --entity-state-font-color: var(--g-color-text-secondary);
             --entity-state-border-color: var(--g-color-line-generic);
             --entity-state-background-color: var(--g-color-base-neutral-light);
+            --entity-state-fill-color: var(--g-color-base-neutral-light);
             --entity-state-icon-color: var(--g-color-text-secondary);
 
             border: $border-width solid var(--entity-state-border-color);
 
+            &#{$block}_striped,
+            &#{$block}_borderless {
+                border: none;
+            }
+
             &#{$block}_highlighted {
                 --entity-state-background-color: var(--g-color-base-neutral-light-hover);
+                --entity-state-fill-color: var(--g-color-base-neutral-light-hover);
             }
 
             &#{$block}_mode-space {
@@ -104,7 +99,7 @@
         }
     }
 
-    &_legend-inactive {
+    &_borderless {
         border: none;
     }
 
@@ -139,6 +134,36 @@
         --entity-state-icon-color: var(--g-color-text-info);
     }
 
+    &_mode-drivetype {
+        @each $type, $theme, $intensity in (ssd misc medium, hdd utility light, nvme info light) {
+            &#{$block}_#{$type} {
+                --entity-state-background-color: var(--g-color-base-#{$theme}-#{$intensity});
+                --ydb-progress-bar-font-color: var(--g-color-text-#{$theme});
+
+                &#{$block}_highlighted {
+                    --entity-state-background-color: var(
+                        --g-color-base-#{$theme}-#{$intensity}-hover
+                    );
+                }
+            }
+        }
+        #{$block}__text-label {
+            overflow: hidden;
+            flex-shrink: 1;
+
+            min-width: 0;
+            padding-right: var(--g-spacing-1);
+
+            white-space: nowrap;
+
+            mask-image: linear-gradient(
+                to right,
+                #000 calc(100% - var(--g-spacing-1)),
+                transparent
+            );
+        }
+    }
+
     &_mode-all {
         &#{$block}_green {
             --entity-state-background-color: transparent;
@@ -193,22 +218,6 @@
             }
         }
 
-        &#{$block}_grey {
-            --entity-state-background-color: var(--g-color-base-neutral-medium);
-            --entity-state-border-color: none;
-            --entity-state-fill-color: var(--g-color-base-neutral-medium);
-
-            border: none;
-
-            &#{$block}_highlighted {
-                --entity-state-background-color: var(--g-color-base-neutral-medium-hover);
-                --entity-state-border-color: none;
-                --entity-state-fill-color: var(--g-color-base-neutral-medium-hover);
-
-                border: none;
-            }
-        }
-
         #{$block}__fill-bar {
             border-radius: calc(var(--disk-border-radius, var(--g-border-radius-m)) - 1px) 0 0
                 calc(var(--disk-border-radius, var(--g-border-radius-m)) - 1px);
@@ -224,7 +233,9 @@
     }
 
     &_mode-space {
-        &:not(#{$block}_legend-inactive):not(#{$block}_darkgrey) {
+        --entity-state-font-color: var(--ydb-progress-bar-font-color);
+
+        &:not(#{$block}_borderless):not(#{$block}_darkgrey) {
             --entity-state-stripe-border-color: var(--entity-state-border-color);
         }
 
@@ -315,16 +326,6 @@
             }
         }
 
-        &#{$block}_grey {
-            --entity-state-background-color: var(--ydb-space-no-data-bg);
-            --entity-state-fill-color: var(--ydb-space-no-data-fill-color);
-
-            &#{$block}_highlighted {
-                --entity-state-background-color: var(--ydb-space-no-data-bg-hover);
-                --entity-state-fill-color: var(--ydb-space-no-data-fill-color-hover);
-            }
-        }
-
         &#{$block}_light-grey {
             --entity-state-icon-color: var(--ydb-progress-bar-font-color);
         }
@@ -386,6 +387,24 @@
         }
     }
 
+    // Keep N/D colors independent from expert mode-specific backgrounds.
+    &_grey {
+        --ydb-progress-bar-font-color: var(--g-color-text-primary);
+        --entity-state-font-color: var(--g-color-text-primary);
+        --entity-state-icon-color: var(--g-color-text-secondary);
+        --entity-state-border-color: none;
+        --entity-state-background-color: var(--g-color-base-neutral-medium);
+        --entity-state-fill-color: var(--g-color-base-neutral-medium);
+
+        color: var(--g-color-text-primary);
+        border: none;
+
+        &#{$block}_highlighted {
+            --entity-state-background-color: var(--g-color-base-neutral-medium-hover);
+            --entity-state-fill-color: var(--g-color-base-neutral-medium-hover);
+        }
+    }
+
     &_compact {
         min-width: 8px;
         height: var(--progress-bar-compact-height);
@@ -478,6 +497,8 @@
     }
 
     &__all-mode-indicators {
+        --all-mode-indicators-padding: var(--g-spacing-1);
+
         position: absolute;
         z-index: 2;
         inset: 0;
@@ -488,13 +509,20 @@
         column-gap: var(--g-spacing-1);
 
         box-sizing: border-box;
-        padding-inline: calc(var(--g-spacing-1) - $border-width);
+        padding-inline: calc(var(--all-mode-indicators-padding) - $border-width);
 
         pointer-events: none;
 
         #{$block}_grey &,
         #{$block}_striped & {
-            padding-inline: var(--g-spacing-1);
+            padding-inline: var(--all-mode-indicators-padding);
+        }
+
+        &_size_s {
+            --all-mode-indicators-padding: var(--g-spacing-half);
+
+            grid-template-columns: 14px 8px 13px;
+            column-gap: var(--g-spacing-half);
         }
     }
 
@@ -524,10 +552,15 @@
         display: inline-flex;
         justify-content: center;
         align-items: center;
+
+        &_size_s {
+            font-size: 10px;
+            line-height: 12px;
+        }
     }
 
-    &__all-mode-capacity-alert-indicator-icon {
-        color: rgba(162, 162, 162, 1);
+    &__all-mode-missing-data-indicator-icon {
+        color: var(--g-color-text-hint);
     }
 
     &__all-mode-front-queues-indicator-slot {
@@ -575,13 +608,22 @@
 
         color: var(--ydb-progress-bar-font-color);
 
+        &_text,
+        &_compact {
+            color: var(--g-color-text-primary);
+            @include mixins.text-caption-2();
+        }
+
         &_text {
             margin-right: var(--g-spacing-1);
         }
 
         &_compact {
+            overflow: hidden;
+
+            min-width: 0;
             margin-right: auto;
-            margin-left: var(--g-spacing-1);
+            margin-left: var(--progress-bar-compact-placeholder-margin-left, var(--g-spacing-1));
         }
     }
 
@@ -605,6 +647,10 @@
         }
     }
 
+    &__all-mode-compaction-icons_size_s {
+        margin-left: 0;
+    }
+
     &__icon {
         position: relative;
         z-index: 2;
@@ -613,6 +659,10 @@
 
         color: var(--entity-state-icon-color, var(--entity-state-border-color));
 
+        &_missing-data {
+            color: var(--g-color-text-hint);
+        }
+
         &_overlap-top-left {
             position: absolute;
             z-index: 3;

package/src/components/DiskStateProgressBar/DiskStateProgressBar.tsx

@@ -67,8 +67,8 @@ export function DiskStateProgressBar({
         striped,
         filled,
         highlighted,
+        borderless,
         'all-mode-has-issues': mode === 'all' && strongFill,
-        'legend-inactive': borderless,
         'overlap-icon-at-top-left': overflowVisible,
         [getToneModifier(tone)]: true,
     };

package/src/components/DiskStateProgressBar/PDiskAllModeIndicators.tsx

@@ -1,4 +1,6 @@
+import {CircleQuestionFill} from '@gravity-ui/icons';
 import {Icon, Text} from '@gravity-ui/uikit';
+import type {IconData} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 import type {PDiskAllModeIndicatorsState} from '../../utils/disks/displayState';
@@ -12,6 +14,17 @@ interface PDiskAllModeIndicatorsProps {
     indicators: PDiskAllModeIndicatorsState;
 }
 
+function PDiskAllModeStatusIndicator({indicator}: {indicator?: IconData}) {
+    if (!indicator) {
+        return null;
+    }
+
+    const className =
+        indicator === CircleQuestionFill ? b('all-mode-missing-data-indicator-icon') : undefined;
+
+    return <Icon className={className} data={indicator} size={12} />;
+}
+
 export function PDiskAllModeIndicators({indicators}: PDiskAllModeIndicatorsProps) {
     return (
         <div className={b('pdisk-all-mode-indicators')}>
@@ -24,13 +37,13 @@ export function PDiskAllModeIndicators({indicators}: PDiskAllModeIndicatorsProps
                 <AllModeCapacityAlertIndicator indicator={indicators.capacityAlert} />
             </Text>
             <span className={b('pdisk-all-mode-drive-indicator-slot')}>
-                {indicators.drive && <Icon data={indicators.drive} size={12} />}
+                <PDiskAllModeStatusIndicator indicator={indicators.drive} />
             </span>
             <span className={b('pdisk-all-mode-decommit-indicator-slot')}>
-                {indicators.decommit && <Icon data={indicators.decommit} size={12} />}
+                <PDiskAllModeStatusIndicator indicator={indicators.decommit} />
             </span>
             <span className={b('pdisk-all-mode-maintenance-indicator-slot')}>
-                {indicators.maintenance && <Icon data={indicators.maintenance} size={12} />}
+                <PDiskAllModeStatusIndicator indicator={indicators.maintenance} />
             </span>
             <span className={b('pdisk-all-mode-device-indicator-slot')}>
                 {indicators.device && <DiskIconGroup icons={indicators.device} />}

package/src/components/EvictVDiskButton/EvictVDiskButton.tsx

@@ -4,7 +4,10 @@ import {ArrowsOppositeToDots} from '@gravity-ui/icons';
 import {Icon} from '@gravity-ui/uikit';
 import {isNil} from 'lodash';
 
-import {useDiskPagesAvailable} from '../../store/reducers/capabilities/hooks';
+import {
+    useDiskPagesAvailable,
+    useTabletDevUiSecurePath,
+} from '../../store/reducers/capabilities/hooks';
 import type {ModifyDiskResponse} from '../../types/api/modifyDisk';
 import type {TVDiskID} from '../../types/api/vdisk';
 import {useIsUserAllowedToMakeChanges} from '../../utils/hooks/useIsUserAllowedToMakeChanges';
@@ -37,6 +40,7 @@ export const EvictVDiskButton = ({
 }: EvictVDiskButtonProps) => {
     const isUserAllowedToMakeChanges = useIsUserAllowedToMakeChanges();
     const newDiskApiAvailable = useDiskPagesAvailable();
+    const useSecurePath = useTabletDevUiSecurePath();
 
     const handleEvictVDisk = React.useCallback(
         async (isRetry?: boolean) => {
@@ -54,7 +58,10 @@ export const EvictVDiskButton = ({
             if (newDiskApiAvailable) {
                 response = await window.api.vdisk.evictVDisk(requestParams);
             } else {
-                response = await window.api.tablets.evictVDiskOld(requestParams);
+                response = await window.api.tablets.evictVDiskOld({
+                    ...requestParams,
+                    useSecurePath,
+                });
             }
 
             if (response?.result === false) {
@@ -65,7 +72,7 @@ export const EvictVDiskButton = ({
                 throw err;
             }
         },
-        [vDiskId, newDiskApiAvailable],
+        [vDiskId, newDiskApiAvailable, useSecurePath],
     );
 
     return (

package/src/components/FullNodeViewer/FullNodeViewer.scss

@@ -17,10 +17,10 @@
 
             grid-template-columns: 110px 110px;
         }
-    }
 
-    .info-viewer__label {
-        min-width: 100px;
+        &_ram {
+            align-items: flex-start;
+        }
     }
 
     &__section-title {

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,6 +5,7 @@ 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';
 
@@ -62,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(
         () =>
@@ -101,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();

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",