ydb-embedded-ui 20.3.0 → 20.4.0

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);
     }
 }