ydb-embedded-ui 22.4.0 → 22.6.0

package/src/containers/Tenant/TenantDrawerHealthcheck.tsx

@@ -5,6 +5,7 @@ import {
     selectCheckStatus,
 } from '../../store/reducers/healthcheckInfo/healthcheckInfo';
 import {useTypedSelector} from '../../utils/hooks';
+import {useDatabaseHealthcheckAvailable} from '../../utils/hooks/useDatabaseHealthcheckAvailable';
 
 import {Healthcheck} from './Healthcheck/Healthcheck';
 import {HealthcheckDrawer} from './Healthcheck/components/HealthcheckDrawer';
@@ -19,12 +20,15 @@ interface TenantDrawerHealthcheckProps {
 }
 
 export function TenantDrawerHealthcheck({children, clusterName}: TenantDrawerHealthcheckProps) {
+    const healthcheckAvailable = useDatabaseHealthcheckAvailable();
     const {database} = useCurrentSchema();
     const {
         handleShowHealthcheckChange,
         showHealthcheck,
         handleIssuesFilterChange,
         handleHealthcheckViewChange,
+        issuesFilter,
+        view,
     } = useTenantQueryParams();
 
     const healthcheckStatus = useTypedSelector((state) =>
@@ -41,6 +45,15 @@ export function TenantDrawerHealthcheck({children, clusterName}: TenantDrawerHea
         handleHealthcheckViewChange(undefined);
     }, [handleShowHealthcheckChange, handleIssuesFilterChange, handleHealthcheckViewChange]);
 
+    React.useEffect(() => {
+        if (
+            healthcheckAvailable === false &&
+            (showHealthcheck !== undefined || view !== undefined || issuesFilter !== undefined)
+        ) {
+            handleCloseDrawer();
+        }
+    }, [healthcheckAvailable, showHealthcheck, view, issuesFilter, handleCloseDrawer]);
+
     const renderDrawerContent = React.useCallback(() => {
         return <Healthcheck database={database} clusterName={clusterName} />;
     }, [database, clusterName]);
@@ -56,7 +69,7 @@ export function TenantDrawerHealthcheck({children, clusterName}: TenantDrawerHea
                       })
                     : undefined
             }
-            isDrawerVisible={Boolean(showHealthcheck)}
+            isDrawerVisible={Boolean(healthcheckAvailable && showHealthcheck)}
             onCloseDrawer={handleCloseDrawer}
             renderDrawerContent={renderDrawerContent}
             drawerId="tenant-healthcheck-details"

package/src/containers/VDiskPage/VDiskPage.scss

@@ -1,17 +1,20 @@
-@use '../../styles//mixins.scss';
+@use '../../styles/mixins.scss';
 
 .ydb-vdisk-page {
+    --sticky-tabs-height: 40px;
+    --data-table-start: var(--sticky-tabs-height);
     --g-definition-list-item-gap: var(--g-spacing-3);
     position: relative;
 
     overflow: auto;
+    overflow-anchor: none;
 
     height: 100%;
     padding: 0 20px;
 
-    &__meta,
     &__title,
     &__controls,
+    &__storage-details,
     &__info,
     &__tabs {
         position: sticky;
@@ -20,25 +23,54 @@
         margin-bottom: 20px;
     }
 
-    &__info {
-        @include mixins.body-2-typography();
+    &__heading {
+        margin: 0;
+        overflow-wrap: anywhere;
     }
 
-    &__meta {
-        margin-top: 20px;
+    &__pool-name {
+        min-width: 0;
+        overflow-wrap: anywhere;
+    }
+
+    &__title-content {
+        flex: 1;
+
+        min-width: 0;
+    }
+
+    &__title {
+        padding-right: 125px;
     }
 
     &__controls {
         display: flex;
+        flex-wrap: wrap;
         align-items: center;
         gap: var(--g-spacing-2);
     }
 
     &__storage-details {
-        margin-bottom: var(--g-spacing-5);
+        margin-bottom: var(--g-spacing-4);
     }
 
     &__tablets-content {
         margin-top: var(--g-spacing-4);
+
+        .data-table__sticky_moving {
+            // Override the table's inline sticky offset.
+            top: var(--sticky-tabs-height) !important;
+        }
+    }
+
+    &__tabs {
+        z-index: 3;
+
+        height: var(--sticky-tabs-height);
+        margin-bottom: 0;
+        padding-right: 125px;
+
+        @include mixins.sticky-top();
+        @include mixins.tabs-wrapper-styles();
     }
 }

package/src/containers/VDiskPage/VDiskPage.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 
-import {Flex, Icon, Label, Tab, TabList, TabProvider} from '@gravity-ui/uikit';
+import {Wrench} from '@gravity-ui/icons';
+import {Flex, Tab, TabList, TabProvider, Text} from '@gravity-ui/uikit';
 import {skipToken} from '@reduxjs/toolkit/query';
 import {isNil} from 'lodash';
 import {Helmet} from 'react-helmet-async';
 
-import {EntityPageTitle} from '../../components/EntityPageTitle/EntityPageTitle';
+import {StickyAutoRefreshControl} from '../../components/AutoRefreshControl/StickyAutoRefreshControl';
+import {CopyableValue} from '../../components/CopyableValue/CopyableValue';
+import {DiskTypeLabel} from '../../components/DiskStatus/DiskStatus';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {
     EvictVDiskButton,
@@ -13,18 +16,22 @@ import {
 } from '../../components/EvictVDiskButton/EvictVDiskButton';
 import {InfoViewerSkeleton} from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
 import {InternalLink} from '../../components/InternalLink/InternalLink';
-import {PageMetaWithAutorefresh} from '../../components/PageMeta/PageMeta';
+import {LinkWithIcon} from '../../components/LinkWithIcon/LinkWithIcon';
 import {VDiskInfo} from '../../components/VDiskInfo/VDiskInfo';
+import {vDiskInfoKeyset} from '../../components/VDiskInfo/i18n';
+import {
+    VDiskDonorLabel,
+    VDiskReplicationStatus,
+    VDiskStateLabel,
+} from '../../components/VDiskStatus';
 import {useVDiskPagePath} from '../../routes';
 import {api} from '../../store/reducers/api';
-import {useNewStorageViewEnabled} from '../../store/reducers/capabilities/hooks';
 import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 import {vDiskApi} from '../../store/reducers/vdisk/vdisk';
 import {cn} from '../../utils/cn';
+import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {parseVdiskId} from '../../utils/dataFormatters/dataFormatters';
-import {VDISK_LABEL_CONFIG} from '../../utils/disks/constants';
-import {formatPDiskType} from '../../utils/disks/getPDiskType';
-import {getDataSeverityColor} from '../../utils/disks/helpers';
+import {createVDiskDeveloperUILink, useHasDeveloperUi} from '../../utils/developerUI/developerUI';
 import {useAutoRefreshInterval, useTypedDispatch} from '../../utils/hooks';
 import {useAppTitle} from '../App/AppTitleContext';
 import {PaginatedStorage} from '../Storage/PaginatedStorage';
@@ -45,7 +52,7 @@ export function VDiskPage() {
     const containerRef = React.useRef<HTMLDivElement>(null);
 
     const {nodeId, vDiskId: vDiskIdParam, database, vDiskTab, vDiskTabs} = useVDiskQueryParams();
-    const newStorageViewEnabled = useNewStorageViewEnabled();
+    const hasDeveloperUi = useHasDeveloperUi();
 
     const [autoRefreshInterval] = useAutoRefreshInterval();
 
@@ -77,17 +84,7 @@ export function VDiskPage() {
     }, [dispatch, database, vDiskData?.VDiskId?.GroupID, vDiskData?.StringifiedId]);
 
     const loading = isFetching && vDiskData === undefined;
-    const {
-        NodeHost,
-        NodeId,
-        NodeType,
-        NodeDC,
-        PDiskId,
-        PDiskType,
-        Severity,
-        VDiskId,
-        StringifiedId,
-    } = vDiskData || {};
+    const {NodeHost, NodeId, PDiskId, PDiskType, VDiskId, StringifiedId} = vDiskData || {};
 
     const resolvedVDiskId = VDiskId || (!loading && parseVdiskId(vDiskIdParam)) || undefined;
     const {GroupID} = resolvedVDiskId || {};
@@ -114,53 +111,53 @@ export function VDiskPage() {
         );
     };
 
-    const renderPageMeta = () => {
-        const hostItem = NodeHost ? `${vDiskPageKeyset('fqdn')}: ${NodeHost}` : undefined;
-        const nodeIdItem = NodeId ? `${vDiskPageKeyset('node')}: ${NodeId}` : undefined;
-        const pDiskIdItem = NodeId ? `${vDiskPageKeyset('pdisk')}: ${PDiskId}` : undefined;
-
-        return (
-            <PageMetaWithAutorefresh
-                className={vDiskPageCn('meta')}
-                loading={loading}
-                items={[
-                    hostItem,
-                    nodeIdItem,
-                    NodeType,
-                    NodeDC,
-                    pDiskIdItem,
-                    formatPDiskType(PDiskType),
-                ]}
-            />
-        );
-    };
-
     const renderTitleMeta = () => {
-        if (!vDiskData?.DonorMode) {
-            return null;
-        }
-        const donorLabelConfig = VDISK_LABEL_CONFIG.donor;
         return (
-            <Label
-                theme={donorLabelConfig.theme}
-                icon={donorLabelConfig.icon ? <Icon data={donorLabelConfig.icon} /> : undefined}
-                size="m"
-            >
-                {vDiskPageKeyset('label_donor')}
-            </Label>
+            <Flex gap={2} wrap="wrap" alignItems="center">
+                <VDiskStateLabel state={vDiskData?.VDiskState} size="s" />
+                {vDiskData?.DonorMode ? (
+                    <VDiskDonorLabel donorMode size="s" />
+                ) : (
+                    <VDiskReplicationStatus data={vDiskData || {}} size="s" />
+                )}
+                <DiskTypeLabel type={PDiskType} size="s" />
+            </Flex>
         );
     };
 
     const renderPageTitle = () => {
         return (
-            <Flex gap={2} alignItems="center">
-                <EntityPageTitle
-                    className={vDiskPageCn('title')}
-                    entityName={vDiskPageKeyset('vdisk')}
-                    status={getDataSeverityColor(Severity)}
-                    id={vDiskId}
-                    metaInfo={renderTitleMeta()}
-                />
+            <Flex
+                className={vDiskPageCn('title')}
+                alignItems="flex-start"
+                gap={2}
+                wrap="nowrap"
+                qa="vdisk-header"
+            >
+                <Flex direction="column" gap={1} className={vDiskPageCn('title-content')}>
+                    <Flex gap={3} alignItems="center" wrap="wrap">
+                        <CopyableValue copyText={vDiskId} fieldName={vDiskPageKeyset('vdisk')}>
+                            <Text as="h1" variant="header-1" className={vDiskPageCn('heading')}>
+                                {vDiskPageKeyset('vdisk')}{' '}
+                                <Text color="hint" variant="header-1">
+                                    {vDiskId || EMPTY_DATA_PLACEHOLDER}
+                                </Text>
+                            </Text>
+                        </CopyableValue>
+                        {renderTitleMeta()}
+                    </Flex>
+                    <Flex gap={1} alignItems="center" className={vDiskPageCn('pool')}>
+                        <Text color="secondary">{vDiskInfoKeyset('pool-name')}:</Text>
+                        <CopyableValue
+                            copyText={vDiskData?.StoragePoolName}
+                            fieldName={vDiskInfoKeyset('pool-name')}
+                        >
+                            <Text color="secondary" className={vDiskPageCn('pool-name')}>
+                                {vDiskData?.StoragePoolName || EMPTY_DATA_PLACEHOLDER}
+                            </Text>
+                        </CopyableValue>
+                    </Flex>
+                </Flex>
             </Flex>
         );
     };
@@ -178,29 +175,44 @@ export function VDiskPage() {
     }, [dispatch, vDiskId]);
 
     const renderControls = () => {
-        if (!isAllVdiskParamsDefined(resolvedVDiskId)) {
+        const canEvict = isAllVdiskParamsDefined(resolvedVDiskId) && !vDiskData?.DonorMode;
+        const developerUILink =
+            hasDeveloperUi && !isNil(NodeId) && !isNil(PDiskId) && !isNil(vDiskSlotId)
+                ? createVDiskDeveloperUILink({
+                      nodeId: NodeId,
+                      pDiskId: PDiskId,
+                      vDiskSlotId,
+                  })
+                : undefined;
+        if (!canEvict && !developerUILink) {
             return null;
         }
         return (
             <div className={vDiskPageCn('controls')} data-qa="vdisk-controls">
-                <EvictVDiskButton
-                    vDiskId={resolvedVDiskId}
-                    donorMode={vDiskData?.DonorMode}
-                    onSuccess={handleAfterEvictVDisk}
-                />
+                {canEvict && isAllVdiskParamsDefined(resolvedVDiskId) && (
+                    <EvictVDiskButton
+                        vDiskId={resolvedVDiskId}
+                        view="action"
+                        onSuccess={handleAfterEvictVDisk}
+                    />
+                )}
+                {developerUILink && (
+                    <LinkWithIcon
+                        title={vDiskPageKeyset('action_open-in-developer-ui')}
+                        url={developerUILink}
+                        icon={Wrench}
+                        hideEndIcon
+                    />
+                )}
             </div>
         );
     };
 
     const renderInfo = () => {
-        return <VDiskInfo data={vDiskData} className={vDiskPageCn('info')} wrap />;
+        return <VDiskInfo key={vDiskId} data={vDiskData} className={vDiskPageCn('info')} />;
     };
 
     const renderStorageDetails = () => {
-        if (!newStorageViewEnabled) {
-            return null;
-        }
-
         return <VDiskStorageDetails data={vDiskData} className={vDiskPageCn('storage-details')} />;
     };
 
@@ -284,8 +296,8 @@ export function VDiskPage() {
         return (
             <React.Fragment>
                 {error ? <ResponseError error={error} /> : null}
-                {renderInfo()}
                 {renderStorageDetails()}
+                {renderInfo()}
                 {renderTabs()}
                 {renderTabsContent()}
             </React.Fragment>
@@ -295,7 +307,7 @@ export function VDiskPage() {
     return (
         <div className={vDiskPageCn(null)} ref={containerRef}>
             {renderHelmet()}
-            {renderPageMeta()}
+            <StickyAutoRefreshControl />
             {renderPageTitle()}
             {renderControls()}
             {renderContent()}

package/src/containers/VDiskPage/VDiskStorageDetails.scss

@@ -1,129 +1,60 @@
 .ydb-vdisk-storage-details {
-    &__title {
-        margin-bottom: var(--g-spacing-4);
-    }
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--g-spacing-1);
 
-    &__cards {
+    &__card {
         display: flex;
         flex-wrap: wrap;
-        align-items: flex-start;
-        gap: var(--g-spacing-1);
-
-        width: fit-content;
-        max-width: 100%;
-    }
+        align-items: center;
+        gap: var(--g-spacing-5);
 
-    &__card {
         min-width: 0;
-        padding: var(--g-spacing-4) var(--g-spacing-5);
+        padding: var(--g-spacing-3) var(--g-spacing-5);
 
         border-radius: var(--g-border-radius-m) var(--g-border-radius-xs) var(--g-border-radius-xs)
             var(--g-border-radius-m);
         background-color: var(--g-color-base-generic);
 
-        &_metrics {
-            display: flex;
-            flex: 0 0 auto;
-            align-items: stretch;
-            gap: var(--g-spacing-5);
-
-            width: max-content;
-            max-width: 100%;
-            min-height: 74px;
-        }
-
-        &_details {
-            display: flex;
-            flex: 0 1 auto;
-            flex-wrap: wrap;
-            justify-content: flex-start;
-            align-items: center;
-            gap: var(--g-spacing-4);
-
-            width: fit-content;
-            max-width: 100%;
-            min-height: 74px;
-
+        &_ids {
             border-radius: var(--g-border-radius-xs) var(--g-border-radius-m)
                 var(--g-border-radius-m) var(--g-border-radius-xs);
         }
     }
 
-    &__details {
-        display: flex;
-        flex: 0 1 auto;
-        flex-wrap: wrap;
-        align-items: stretch;
-        gap: var(--g-spacing-4);
-
-        min-width: 0;
-        max-width: 100%;
-    }
-
-    &__metric,
     &__detail {
         display: flex;
         flex-direction: column;
-        justify-content: center;
-        align-items: flex-start;
-        gap: var(--g-spacing-1);
+        gap: var(--g-spacing-half);
 
         min-width: 0;
-        padding-right: var(--g-spacing-4);
-    }
+        max-width: 250px;
 
-    &__detail {
-        flex: 0 1 auto;
-
-        min-width: 100px;
-        max-width: 200px;
-    }
-
-    &__value,
-    &__label {
-        display: block;
-
-        white-space: nowrap;
-    }
-
-    &__value-row &__value {
-        overflow: hidden;
-
-        text-overflow: ellipsis;
-    }
-
-    &__value-row {
-        flex-wrap: nowrap;
-
-        width: 100%;
-        min-width: 0;
-        height: 20px;
-
-        &_copyable {
-            width: auto;
-            max-width: 100%;
+        &_location {
+            min-width: 100px;
+            max-width: 200px;
         }
     }
 
     &__value-popover {
-        flex: 1 1 auto;
+        flex: 0 1 auto;
 
         min-width: 0;
-
-        &_copyable {
-            flex: 0 1 auto;
-
-            max-width: 100%;
-        }
+        max-width: 100%;
     }
 
     &__value-popover-content {
-        width: 100%;
+        width: auto;
         min-width: 0;
+        max-width: 100%;
+
+        &_with-left-trim {
+            text-align: end;
+            direction: rtl;
 
-        &_copyable {
-            width: auto;
-            max-width: 100%;
+            > span {
+                unicode-bidi: plaintext;
+            }
         }
     }
 }