ydb-embedded-ui 20.3.0 → 20.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "20.3.0",
+  "version": "20.5.0",
   "files": [
     "dist",
     "src"
@@ -50,7 +50,7 @@
     "numeral": "^2.0.6",
     "path-to-regexp": "^3.3.0",
     "qrcode": "^1.5.4",
-    "qs": "^6.15.2",
+    "qs": "^6.16.0",
     "react-error-boundary": "^4.1.2",
     "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.55.0",

package/src/components/Drawer/Drawer.tsx

@@ -30,6 +30,7 @@ type DrawerEvent = MouseEvent & {
 interface DrawerPaneContentWrapperProps {
     isVisible: boolean;
     onClose: () => void;
+    onTransitionInComplete?: () => void;
     children: React.ReactNode;
     drawerId?: string;
     storageKey?: string;
@@ -44,6 +45,7 @@ interface DrawerPaneContentWrapperProps {
 const DrawerPaneContentWrapper = ({
     isVisible,
     onClose,
+    onTransitionInComplete,
     children,
     drawerId = 'drawer',
     storageKey = DRAWER_WIDTH_KEY,
@@ -172,6 +174,7 @@ const DrawerPaneContentWrapper = ({
             qa={drawerId}
             open={isVisible}
             onOpenChange={handleOpenChange}
+            onTransitionInComplete={onTransitionInComplete}
             placement={direction}
             hideVeil={hideVeil}
             className={b('container', className)}
@@ -203,6 +206,7 @@ interface DrawerPaneProps {
     renderDrawerContent: () => React.ReactNode;
     isDrawerVisible: boolean;
     onCloseDrawer: () => void;
+    onTransitionInComplete?: () => void;
     drawerId?: string;
     storageKey?: string;
     defaultWidth?: number;
@@ -221,6 +225,7 @@ export const DrawerWrapper = ({
     renderDrawerContent,
     isDrawerVisible,
     onCloseDrawer,
+    onTransitionInComplete,
     drawerId,
     storageKey,
     defaultWidth,
@@ -289,6 +294,7 @@ export const DrawerWrapper = ({
                 hideVeil={hideVeil}
                 isVisible={isDrawerVisible}
                 onClose={onCloseDrawer}
+                onTransitionInComplete={onTransitionInComplete}
                 drawerId={drawerId}
                 storageKey={storageKey}
                 defaultWidth={defaultWidth}

package/src/components/EntityStatus/EntityStatus.tsx

@@ -48,20 +48,26 @@ interface EntityStatusLabelProps {
     status: EFlag;
     note?: React.ReactNode;
     children?: React.ReactNode;
+    className?: string;
+    endContent?: React.ReactNode;
     withStatusName?: boolean;
     size?: LabelProps['size'];
     iconSize?: number;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    qa?: string;
 }
 
 function EntityStatusLabel({
     children,
+    className,
+    endContent,
     status,
     withStatusName = true,
     note,
     size = 'm',
     iconSize = 14,
     onClick,
+    qa,
 }: EntityStatusLabelProps) {
     const theme = EFlagToLabelTheme[status];
     const isClickable = Boolean(onClick);
@@ -71,13 +77,15 @@ function EntityStatusLabel({
                 theme={theme}
                 icon={<StatusIcon size={iconSize} status={status} />}
                 size={size}
-                className={b({critical: status === EFlag.Red, clickable: isClickable})}
+                className={b({critical: status === EFlag.Red, clickable: isClickable}, className)}
                 onClick={onClick}
                 interactive={isClickable}
+                qa={qa}
             >
                 <Flex gap="2" wrap="nowrap">
                     {children}
                     {withStatusName ? EFlagToStatusName[status] : null}
+                    {endContent ? <Flex alignSelf="center">{endContent}</Flex> : null}
                     {note && <HelpMark className={b('note')}>{note}</HelpMark>}
                 </Flex>
             </Label>

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

@@ -1,11 +1,13 @@
 import type {
     TPQPartitionConfig,
+    TPQPartitionStrategy,
     TPQTabletConfig,
     TPersQueueGroupDescription,
 } from '../../../types/api/schema';
-import {EMeteringMode} from '../../../types/api/schema';
-import {HOUR_IN_SECONDS} from '../../../utils/constants';
+import {EMeteringMode, EPQPartitionStrategyType} from '../../../types/api/schema';
+import {EMPTY_DATA_PLACEHOLDER, HOUR_IN_SECONDS} from '../../../utils/constants';
 import {formatBps, formatBytes, formatNumber} from '../../../utils/dataFormatters/dataFormatters';
+import i18n from '../i18n';
 import {createInfoFormatter} from '../utils';
 
 const EMeteringModeToNames: Record<EMeteringMode, string> = {
@@ -13,6 +15,13 @@ const EMeteringModeToNames: Record<EMeteringMode, string> = {
     [EMeteringMode.METERING_MODE_RESERVED_CAPACITY]: 'reserved-capacity',
 };
 
+const EPQPartitionStrategyTypeToNames: Record<EPQPartitionStrategyType, string> = {
+    [EPQPartitionStrategyType.DISABLED]: i18n('value_autopartitioning-disabled'),
+    [EPQPartitionStrategyType.CAN_SPLIT]: i18n('value_autopartitioning-up'),
+    [EPQPartitionStrategyType.CAN_SPLIT_AND_MERGE]: i18n('value_autopartitioning-up-and-down'),
+    [EPQPartitionStrategyType.PAUSED]: i18n('value_autopartitioning-paused'),
+};
+
 export const formatPQGroupItem = createInfoFormatter<TPersQueueGroupDescription>({
     values: {
         Partitions: (value) => formatNumber(value?.length || 0),
@@ -48,3 +57,22 @@ export const formatPQPartitionConfig = createInfoFormatter<TPQPartitionConfig>({
         WriteSpeedInBytesPerSecond: 'Partitions write speed',
     },
 });
+
+const formatPartitionCount = (value?: number) =>
+    value === undefined ? EMPTY_DATA_PLACEHOLDER : formatNumber(value);
+
+export const formatPQPartitionStrategy = createInfoFormatter<TPQPartitionStrategy>({
+    values: {
+        // Fall back to the raw enum value so a strategy introduced by a newer YDB
+        // version still renders the Autopartitioning row instead of being dropped.
+        PartitionStrategyType: (value) =>
+            value && (EPQPartitionStrategyTypeToNames[value] ?? value),
+        MinPartitionCount: formatPartitionCount,
+        MaxPartitionCount: formatPartitionCount,
+    },
+    labels: {
+        PartitionStrategyType: i18n('field_autopartitioning'),
+        MinPartitionCount: i18n('field_min-partitions-count'),
+        MaxPartitionCount: i18n('field_max-partitions-count'),
+    },
+});

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

@@ -1,5 +1,12 @@
 {
   "common.created": "Created",
   "common.type": "Type",
-  "no-data": "No data"
+  "no-data": "No data",
+  "field_autopartitioning": "Autopartitioning",
+  "field_min-partitions-count": "Min partitions count",
+  "field_max-partitions-count": "Max partitions count",
+  "value_autopartitioning-disabled": "Disabled",
+  "value_autopartitioning-up": "Up",
+  "value_autopartitioning-up-and-down": "Up and down",
+  "value_autopartitioning-paused": "Paused"
 }

package/src/components/TenantNameWrapper/utils.ts

@@ -2,7 +2,7 @@ import type {PreparedTenant} from '../../store/reducers/tenants/types';
 import type {AdditionalTenantsProps} from '../../types/additionalProps';
 
 export function getTenantBackend(
-    tenant: PreparedTenant,
+    tenant: Pick<PreparedTenant, 'NodeIds'> & Partial<Pick<PreparedTenant, 'sharedNodeIds'>>,
     additionalTenantsProps?: AdditionalTenantsProps,
 ) {
     if (typeof additionalTenantsProps?.prepareTenantBackend !== 'function') {

package/src/containers/App/Content.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {connect} from 'react-redux';
 import type {RedirectProps} from 'react-router-dom';
-import {Redirect, Route, Switch} from 'react-router-dom';
+import {Redirect, Route, Switch, useLocation} from 'react-router-dom';
 
 import {Unauthenticated} from '../../components/Errors/401';
 import {AccessDenied} from '../../components/Errors/403';
@@ -41,6 +41,7 @@ import {
     TenantSlot,
     VDiskPageSlot,
 } from './appSlots';
+import {shouldRedirectClusterRouteToRoot} from './clusterRouteGuard';
 import {getLegacyClusterTenantsRedirect, getLegacyTenantRedirect} from './legacyRedirects';
 
 import './App.scss';
@@ -148,6 +149,12 @@ export function Content(props: ContentProps) {
     const {singleClusterMode} = props;
 
     const slots = useSlots(props);
+    const currentLocation = useLocation();
+    const shouldRedirectToRoot = shouldRedirectClusterRouteToRoot({
+        singleClusterMode,
+        pathname: currentLocation.pathname,
+        search: currentLocation.search,
+    });
 
     const additionalRoutes = slots.get(RoutesSlot);
 
@@ -158,6 +165,7 @@ export function Content(props: ContentProps) {
     return (
         <Switch>
             {additionalRoutes?.rendered}
+            {shouldRedirectToRoot ? <Redirect to="/" /> : null}
             <Route>
                 <Header />
                 <Switch>

package/src/containers/App/clusterRouteGuard.ts

@@ -0,0 +1,24 @@
+import {matchPath} from 'react-router-dom';
+
+import routes from '../../routes';
+
+export function shouldRedirectClusterRouteToRoot({
+    singleClusterMode,
+    pathname,
+    search,
+}: {
+    singleClusterMode: boolean;
+    pathname: string;
+    search: string;
+}) {
+    const clusterRouteMatch = matchPath(pathname, {
+        path: routes.cluster,
+        exact: false,
+    });
+
+    if (singleClusterMode || !clusterRouteMatch) {
+        return false;
+    }
+
+    return !new URLSearchParams(search).get('clusterName');
+}

package/src/containers/Cluster/Cluster.tsx

@@ -170,6 +170,7 @@ export function Cluster({additionalClusterProps, additionalTenantsProps}: Cluste
                         <div className={b('dashboard')}>
                             <ClusterOverview
                                 cluster={cluster ?? {}}
+                                clusterName={clusterName ?? undefined}
                                 groupStats={groupsStats}
                                 loading={infoLoading}
                                 error={clusterError || cluster?.error}

package/src/containers/Cluster/ClusterDrawerHealthcheck.tsx

@@ -19,10 +19,15 @@ interface ClusterDrawerHealthcheckProps {
 }
 
 export function useClusterHealthcheckQueryParams() {
-    const [{showHealthcheck, issuesFilter, view}, setQueryParams] = useQueryParams({
+    const [
+        {showHealthcheck, issuesFilter, view, healthcheckIssue, healthcheckLeaf},
+        setQueryParams,
+    ] = useQueryParams({
         showHealthcheck: BooleanParam,
         issuesFilter: StringParam,
         view: StringParam,
+        healthcheckIssue: StringParam,
+        healthcheckLeaf: StringParam,
     });
 
     const handleShowHealthcheckChange = React.useCallback(
@@ -46,6 +51,35 @@ export function useClusterHealthcheckQueryParams() {
         [setQueryParams],
     );
 
+    const handleOpenHealthcheckIssue = React.useCallback(
+        (target: {issueId: string; leafIssueId: string; view: string}) => {
+            setQueryParams(
+                {
+                    showHealthcheck: true,
+                    issuesFilter: undefined,
+                    view: target.view,
+                    healthcheckIssue: target.issueId,
+                    healthcheckLeaf: target.leafIssueId,
+                },
+                'replaceIn',
+            );
+        },
+        [setQueryParams],
+    );
+
+    const handleCloseHealthcheck = React.useCallback(() => {
+        setQueryParams(
+            {
+                showHealthcheck: undefined,
+                issuesFilter: undefined,
+                view: undefined,
+                healthcheckIssue: undefined,
+                healthcheckLeaf: undefined,
+            },
+            'replaceIn',
+        );
+    }, [setQueryParams]);
+
     return {
         showHealthcheck,
         handleShowHealthcheckChange,
@@ -53,6 +87,10 @@ export function useClusterHealthcheckQueryParams() {
         handleIssuesFilterChange,
         view,
         handleHealthcheckViewChange,
+        healthcheckIssue,
+        healthcheckLeaf,
+        handleOpenHealthcheckIssue,
+        handleCloseHealthcheck,
     };
 }
 
@@ -61,12 +99,8 @@ export function ClusterDrawerHealthcheck({
     database,
     clusterName,
 }: ClusterDrawerHealthcheckProps) {
-    const {
-        handleShowHealthcheckChange,
-        showHealthcheck,
-        handleIssuesFilterChange,
-        handleHealthcheckViewChange,
-    } = useClusterHealthcheckQueryParams();
+    const {showHealthcheck, healthcheckIssue, healthcheckLeaf, handleCloseHealthcheck} =
+        useClusterHealthcheckQueryParams();
 
     const healthcheckStatus = useTypedSelector((state) =>
         selectCheckStatus(state, database, clusterName),
@@ -75,21 +109,86 @@ export function ClusterDrawerHealthcheck({
     const healthcheckData = useTypedSelector((state) =>
         selectAllHealthcheckInfo(state, database, clusterName),
     );
+    const targetLeafIssueRef = React.useRef<HTMLDivElement | null>(null);
+    const drawerTransitionCompleteRef = React.useRef(false);
+    const scrolledTargetRef = React.useRef<{
+        issueId?: string;
+        leafIssueId?: string;
+    }>({});
+
+    const scrollToTargetIssue = React.useCallback(() => {
+        if (!drawerTransitionCompleteRef.current || !healthcheckIssue || !healthcheckLeaf) {
+            return;
+        }
+
+        if (
+            scrolledTargetRef.current.issueId === healthcheckIssue &&
+            scrolledTargetRef.current.leafIssueId === healthcheckLeaf
+        ) {
+            return;
+        }
+
+        const targetIssue = targetLeafIssueRef.current;
+        const scrollContainer = targetIssue?.closest<HTMLElement>('.ydb-fullscreen__content');
+        if (!targetIssue || !scrollContainer) {
+            return;
+        }
+
+        const controls = scrollContainer.querySelector<HTMLElement>('.ydb-healthcheck__controls');
+        const targetTop =
+            scrollContainer.scrollTop +
+            targetIssue.getBoundingClientRect().top -
+            scrollContainer.getBoundingClientRect().top -
+            (controls?.getBoundingClientRect().height ?? 0);
+
+        scrolledTargetRef.current = {
+            issueId: healthcheckIssue,
+            leafIssueId: healthcheckLeaf,
+        };
+        scrollContainer.scrollTo({top: Math.max(0, targetTop), behavior: 'smooth'});
+    }, [healthcheckIssue, healthcheckLeaf]);
+
+    const handleTargetLeafIssueRef = React.useCallback(
+        (element: HTMLDivElement | null) => {
+            targetLeafIssueRef.current = element;
+            if (element) {
+                window.requestAnimationFrame(scrollToTargetIssue);
+            }
+        },
+        [scrollToTargetIssue],
+    );
+
+    const handleTransitionInComplete = React.useCallback(() => {
+        drawerTransitionCompleteRef.current = true;
+        scrollToTargetIssue();
+    }, [scrollToTargetIssue]);
 
     const handleCloseDrawer = React.useCallback(() => {
-        handleShowHealthcheckChange(false);
-        handleIssuesFilterChange(undefined);
-        handleHealthcheckViewChange(undefined);
-    }, [handleShowHealthcheckChange, handleIssuesFilterChange, handleHealthcheckViewChange]);
+        drawerTransitionCompleteRef.current = false;
+        scrolledTargetRef.current = {};
+        handleCloseHealthcheck();
+    }, [handleCloseHealthcheck]);
 
     const renderDrawerContent = React.useCallback(() => {
-        return <Healthcheck database={database} clusterName={clusterName} scope="cluster" />;
-    }, [clusterName, database]);
+        return (
+            <Healthcheck
+                database={database}
+                clusterName={clusterName}
+                scope="cluster"
+                targetIssueId={healthcheckIssue ?? undefined}
+                targetLeafIssueId={healthcheckLeaf ?? undefined}
+                targetLeafIssueRef={handleTargetLeafIssueRef}
+            />
+        );
+    }, [clusterName, database, handleTargetLeafIssueRef, healthcheckIssue, healthcheckLeaf]);
 
     return (
         <HealthcheckDrawer
             isDrawerVisible={Boolean(showHealthcheck) && Boolean(database)}
             onCloseDrawer={handleCloseDrawer}
+            onTransitionInComplete={
+                healthcheckIssue && healthcheckLeaf ? handleTransitionInComplete : undefined
+            }
             renderDrawerContent={renderDrawerContent}
             drawerId="cluster-healthcheck-details"
             storageKey="cluster-healthcheck-details-drawer-width"

package/src/containers/Cluster/ClusterInfo/ClusterInfo.tsx

@@ -21,6 +21,7 @@ import './ClusterInfo.scss';
 
 interface ClusterInfoProps {
     cluster?: TClusterInfo;
+    clusterName?: string;
     loading?: boolean;
     error?: IResponseError | string;
     additionalClusterProps?: AdditionalClusterProps;
@@ -30,6 +31,7 @@ interface ClusterInfoProps {
 
 export const ClusterInfo = ({
     cluster,
+    clusterName,
     loading,
     error,
     additionalClusterProps = {},
@@ -131,7 +133,11 @@ export const ClusterInfo = ({
                         {formatNumber(bridgePiles.length)}
                     </Text>
                 </Text>
-                <BridgeInfoTable piles={bridgePiles} />
+                <BridgeInfoTable
+                    piles={bridgePiles}
+                    database={cluster?.Domain}
+                    clusterName={clusterName}
+                />
             </InfoSection>
         );
     };

package/src/containers/Cluster/ClusterOverview/ClusterOverview.tsx

@@ -32,6 +32,7 @@ import './ClusterOverview.scss';
 
 interface ClusterOverviewProps {
     cluster: TClusterInfo;
+    clusterName?: string;
     groupStats?: ClusterGroupsStats;
     loading?: boolean;
     error?: IResponseError | string;

package/src/containers/Cluster/ClusterOverview/components/BridgeInfoTable.scss

@@ -1,50 +1,29 @@
-@use '../../../../styles/mixins.scss';
-
-@mixin bridge-group-status-background {
-    &_theme_positive {
-        background-color: var(--g-color-text-positive);
-    }
-
-    &_theme_warning {
-        background-color: var(--g-color-text-warning);
-    }
-
-    &_theme_danger {
-        background-color: var(--g-color-text-danger);
-    }
-
-    &_theme_dark-complementary {
-        background-color: var(--g-color-text-dark-complementary);
-    }
-
-    &_theme_secondary {
-        background-color: var(--g-color-text-secondary);
-    }
-}
-
 .ydb-bridge-info-table {
+    gap: 10px;
+
     height: 100%;
 
     &__pile {
+        box-sizing: border-box;
         width: 321px;
-        padding: var(--g-spacing-3) var(--g-spacing-4);
+        min-height: 98px;
+        padding: var(--g-spacing-3);
 
         border-radius: var(--g-border-radius-s);
         background-color: var(--g-color-base-generic);
-
-        @include mixins.body-2-typography();
     }
 
-    &__pile-title {
+    &__pile-name {
         min-width: 0;
     }
 
-    &__state-label {
+    &__current-pile {
         flex-shrink: 0;
+    }
 
-        &_with-help .g-label__text {
-            margin-inline: var(--g-spacing-1) var(--g-spacing-1);
-        }
+    &__state-label,
+    &__healthcheck-status {
+        flex-shrink: 0;
     }
 
     &__state-help {
@@ -55,69 +34,25 @@
         white-space: pre-line;
     }
 
-    &__statuses {
-        width: 100%;
+    &__healthcheck-skeleton {
+        width: 72px;
+        height: 20px;
     }
-}
-
-.ydb-bridge-info-table-progress {
-    display: flex;
-    overflow: hidden;
-    align-items: center;
-    gap: var(--g-spacing-half);
 
-    height: 10px;
+    &__healthcheck-accessible-prefix {
+        position: absolute;
 
-    border-radius: var(--g-border-radius-xs);
-
-    &_empty {
-        background-color: var(--g-color-sfx-shadow);
-    }
-
-    &__item {
-        min-width: 8px;
-        height: 4px;
-
-        border-radius: var(--g-border-radius-xs);
-
-        @include bridge-group-status-background();
-    }
-}
-
-.ydb-bridge-info-table-legend {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--g-spacing-2);
-
-    min-width: 0;
-    margin: 0;
-    padding: 0;
-
-    list-style: none;
-
-    &__item {
-        display: inline-flex;
-        align-items: center;
-        gap: var(--g-spacing-1);
-
-        min-width: 0;
-    }
-
-    &__dot {
-        flex: 0 0 6px;
-
-        width: 6px;
-        height: 6px;
+        overflow: hidden;
+        clip: rect(0 0 0 0);
 
-        border-radius: 50%;
+        width: 1px;
+        height: 1px;
 
-        @include bridge-group-status-background();
+        white-space: nowrap;
+        clip-path: inset(50%);
     }
 
-    &__label {
-        overflow: hidden;
-
-        white-space: nowrap;
-        text-overflow: ellipsis;
+    &__nodes {
+        color: var(--g-color-text-secondary);
     }
 }