ydb-embedded-ui 22.3.0 → 22.5.0

package/src/containers/Clusters/Clusters.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {Magnifier} from '@gravity-ui/icons';
 import DataTable from '@gravity-ui/react-data-table';
-import {Icon, Select, Text} from '@gravity-ui/uikit';
+import {Flex, Icon, Select, Text} from '@gravity-ui/uikit';
 
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {ResizeableDataTable} from '../../components/ResizeableDataTable/ResizeableDataTable';
@@ -13,13 +13,14 @@ import {useEmMetaAvailable} from '../../store/reducers/capabilities/hooks';
 import {changeClustersFilters, clustersApi} from '../../store/reducers/clusters/clusters';
 import {
     filterClusters,
+    selectAvailabilityFilter,
     selectClusterNameFilter,
     selectGalaxyFilter,
     selectServiceFilter,
     selectStatusFilter,
     selectVersionFilter,
 } from '../../store/reducers/clusters/selectors';
-import type {PreparedCluster} from '../../store/reducers/clusters/types';
+import type {ClusterAvailability, PreparedCluster} from '../../store/reducers/clusters/types';
 import {uiFactory} from '../../uiFactory/uiFactory';
 import {DEFAULT_TABLE_SETTINGS, EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../utils/hooks';
@@ -61,6 +62,7 @@ export function Clusters({scrollContainerRef}: ClustersProps) {
     const service = useTypedSelector(selectServiceFilter);
     const version = useTypedSelector(selectVersionFilter);
     const galaxy = useTypedSelector(selectGalaxyFilter);
+    const availability = useTypedSelector(selectAvailabilityFilter);
 
     const changeStatus = (value: string[]) => {
         dispatch(changeClustersFilters({status: value}));
@@ -77,6 +79,16 @@ export function Clusters({scrollContainerRef}: ClustersProps) {
     const changeGalaxy = (value: string[]) => {
         dispatch(changeClustersFilters({galaxy: value}));
     };
+    const changeAvailability = (value: string[]) => {
+        dispatch(
+            changeClustersFilters({
+                availability: value.filter(
+                    (item): item is ClusterAvailability =>
+                        item === 'available' || item === 'unavailable',
+                ),
+            }),
+        );
+    };
 
     const [healthcheckClusterName, setHealthcheckClusterName] = React.useState<string | undefined>(
         undefined,
@@ -101,6 +113,19 @@ export function Clusters({scrollContainerRef}: ClustersProps) {
     }, [isDeleteClusterAvailable, isEditClusterAvailable, handleStatusClick]);
 
     const clusters = query.data;
+    const hasUnavailableClusters = clusters?.some(
+        (cluster) => cluster.settings?.unavailable === true,
+    );
+    const showAvailabilityFilter =
+        hasUnavailableClusters || availability.length !== 1 || availability[0] !== 'available';
+    const availabilityOptions = [
+        {value: 'available', content: i18n('value_available')},
+        {value: 'unavailable', content: i18n('value_unavailable')},
+    ];
+    const availabilitySummary =
+        availability.length === availabilityOptions.length
+            ? i18n('controls_select-placeholder')
+            : availabilityOptions.find((option) => option.value === availability[0])?.content;
 
     // Check which columns have data across all clusters
     const {hasAnyStatus, hasAnyService, hasAnyGalaxy} = React.useMemo(() => {
@@ -184,8 +209,15 @@ export function Clusters({scrollContainerRef}: ClustersProps) {
     }, [clusters]);
 
     const filteredClusters = React.useMemo(() => {
-        return filterClusters(clusters ?? [], {clusterName, status, service, version, galaxy});
-    }, [clusterName, clusters, service, status, version, galaxy]);
+        return filterClusters(clusters ?? [], {
+            clusterName,
+            status,
+            service,
+            version,
+            galaxy,
+            availability,
+        });
+    }, [clusterName, clusters, service, status, version, galaxy, availability]);
 
     const statuses = React.useMemo(() => {
         return Array.from(
@@ -260,6 +292,37 @@ export function Clusters({scrollContainerRef}: ClustersProps) {
                         width={200}
                     />
                 ) : null}
+                {showAvailabilityFilter ? (
+                    <Select
+                        multiple
+                        label={i18n('controls_availability-select-label')}
+                        placeholder={i18n('value_none')}
+                        value={availability}
+                        options={availabilityOptions}
+                        onUpdate={changeAvailability}
+                        width={200}
+                        popupWidth={280}
+                        popupClassName={b('availability-popup')}
+                        hasCounter={false}
+                        qa="clusters-availability"
+                        getOptionHeight={(option) => (option.value === 'unavailable' ? 56 : 36)}
+                        renderOption={(option) => (
+                            <Flex direction="column">
+                                <Text>{option.content}</Text>
+                                {option.value === 'unavailable' ? (
+                                    <Text color="secondary" variant="body-1">
+                                        {i18n('context_unavailable-admin')}
+                                    </Text>
+                                ) : null}
+                            </Flex>
+                        )}
+                        renderSelectedOption={(_option, index) => (
+                            <React.Fragment>
+                                {index === 0 ? availabilitySummary : null}
+                            </React.Fragment>
+                        )}
+                    />
+                ) : null}
             </React.Fragment>
         );
     };
@@ -320,7 +383,13 @@ export function Clusters({scrollContainerRef}: ClustersProps) {
                 <TableWithControlsLayout
                     fullHeight
                     className={b(null)}
-                    keyboardNavigationResetKey={JSON.stringify([status, service, version, galaxy])}
+                    keyboardNavigationResetKey={JSON.stringify([
+                        status,
+                        service,
+                        version,
+                        galaxy,
+                        availability,
+                    ])}
                 >
                     <TableWithControlsLayout.Controls
                         className={b('controls')}

package/src/containers/Clusters/columns.tsx

@@ -1,13 +1,15 @@
-import {Pencil, TrashBin} from '@gravity-ui/icons';
+import {CircleXmark, Pencil, TrashBin} from '@gravity-ui/icons';
 import DataTable from '@gravity-ui/react-data-table';
 import type {Column} from '@gravity-ui/react-data-table';
 import {
     ClipboardButton,
     Link as ExternalLink,
     Flex,
+    Icon,
     Label,
     Progress,
     Text,
+    Tooltip,
 } from '@gravity-ui/uikit';
 
 import type {DropdownMenuItemWithDescription} from '../../components/DropdownMenu';
@@ -240,9 +242,9 @@ function getTitleColumn({
 
             return (
                 <Flex direction={'column'} gap={0.5}>
-                    <Flex alignItems={'flex-start'} justifyContent={'space-between'} gap={1}>
+                    <Flex alignItems="center" justifyContent="space-between" gap={1}>
                         {renderName()}
-                        <Flex gap={1}>
+                        <Flex alignItems="center" gap={1}>
                             {renderStatus()}
                             {renderActions()}
                         </Flex>
@@ -262,9 +264,37 @@ function ClusterName({row}: ClusterNameProps) {
     const clusterPath = calculateClusterPath(row);
 
     return (
-        <div className={b('cluster-name')}>
-            <ExternalLink href={clusterPath}>{row.title || row.name}</ExternalLink>
-        </div>
+        <Flex alignItems="center" gap={1} className={b('cluster-name-wrapper')}>
+            <ExternalLink
+                href={clusterPath}
+                className={b('cluster-name')}
+                title={row.title || row.name}
+            >
+                {row.title || row.name}
+            </ExternalLink>
+            {row.settings?.unavailable === true ? (
+                <Tooltip content={i18n('tooltip_unavailable')}>
+                    <span
+                        className={b('unavailable-label')}
+                        tabIndex={0}
+                        data-qa="cluster-unavailable-label"
+                        onKeyDown={(event) => {
+                            if (['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key)) {
+                                event.stopPropagation();
+                            }
+                        }}
+                    >
+                        <Label
+                            theme="unknown"
+                            size="xs"
+                            icon={<Icon data={CircleXmark} size={12} />}
+                        >
+                            {i18n('value_unavailable')}
+                        </Label>
+                    </span>
+                </Tooltip>
+            ) : null}
+        </Flex>
     );
 }
 

package/src/containers/Clusters/i18n/en.json

@@ -3,6 +3,11 @@
   "controls_service-select-label": "Service:",
   "controls_version-select-label": "Version:",
   "controls_galaxy-select-label": "Galaxy:",
+  "controls_availability-select-label": "Availability:",
+  "value_available": "Available",
+  "value_unavailable": "Unavailable",
+  "value_none": "None",
+  "context_unavailable-admin": "Marked by an administrator",
 
   "controls_search-placeholder": "Cluster name, version, domain, host...",
   "controls_select-placeholder": "All",
@@ -14,6 +19,7 @@
   "statistics_storage": "Storage",
 
   "tooltip_no-cluster-data": "No cluster data",
+  "tooltip_unavailable": "Marked as unavailable by an administrator. This is independent of healthcheck. You can still open the cluster",
 
   "clusters-count": {
     "one": "{{count}} cluster found",

package/src/containers/Header/Header.tsx

@@ -1,6 +1,9 @@
 import {HeaderBreadcrumbs} from './HeaderBreadcrumbs';
 import {HeaderLeftControls} from './HeaderLeftControls';
 import {HeaderRightControls} from './HeaderRightControls';
+import {PDiskLeftControls} from './PDiskLeftControls';
+import {StorageGroupLeftControls} from './StorageGroupLeftControls';
+import {VDiskLeftControls} from './VDiskLeftControls';
 import {b} from './constants';
 import {useHeaderBreadcrumbs} from './hooks/useHeaderBreadcrumbs';
 import {useHeaderData} from './hooks/useHeaderData';
@@ -66,18 +69,31 @@ export function Header() {
         return null;
     }
 
-    const leftControls =
-        database && isDatabasePage && isV2NavigationEnabled ? (
+    const renderLeftControls = () => {
+        if (page === 'storageGroup') {
+            return <StorageGroupLeftControls />;
+        }
+        if (page === 'vDisk') {
+            return <VDiskLeftControls />;
+        }
+        if (page === 'pDisk') {
+            return <PDiskLeftControls />;
+        }
+        return database && isDatabasePage && isV2NavigationEnabled ? (
             <HeaderLeftControls
                 database={database}
                 databaseData={databaseData}
                 isDatabaseDataLoading={isDatabaseDataLoading}
             />
         ) : null;
+    };
 
     return (
         <header className={b()}>
-            <HeaderBreadcrumbs breadcrumbItems={breadcrumbItems} endContent={leftControls} />
+            <HeaderBreadcrumbs
+                breadcrumbItems={breadcrumbItems}
+                endContent={renderLeftControls()}
+            />
 
             <HeaderRightControls
                 clusterName={clusterName}

package/src/containers/Header/HeaderLeftControls.tsx

@@ -4,6 +4,7 @@ import {ActionTooltip, Button, ClipboardButton, Flex, Icon} from '@gravity-ui/ui
 import {getConnectToDBDialog} from '../../components/ConnectToDB/ConnectToDBDialog';
 import {ServerlessDBLabel} from '../../components/ServerlessDBLabel/ServerlessDBLabel';
 import type {PreparedTenant} from '../../store/reducers/tenants/types';
+import {useDatabaseHealthcheckAvailable} from '../../utils/hooks/useDatabaseHealthcheckAvailable';
 import {HealthcheckPreview} from '../Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview';
 
 import {b} from './constants';
@@ -20,9 +21,10 @@ export function HeaderLeftControls({
     databaseData,
     isDatabaseDataLoading,
 }: HeaderLeftControlsProps) {
+    const healthcheckAvailable = useDatabaseHealthcheckAvailable(databaseData?.Type);
     const showCopyButton = Boolean(databaseData?.Name);
     const isServerless = databaseData?.Type === 'Serverless';
-    const showHealthcheck = !isServerless && !isDatabaseDataLoading;
+    const showHealthcheck = healthcheckAvailable && !isDatabaseDataLoading;
 
     return (
         <Flex direction="row" alignItems={'center'} gap={2} className={b('left-controls')}>

package/src/containers/Header/PDiskLeftControls.tsx

@@ -0,0 +1,41 @@
+import {ClipboardButton, Flex} from '@gravity-ui/uikit';
+import {skipToken} from '@reduxjs/toolkit/query';
+import {StringParam, useQueryParams} from 'use-query-params';
+
+import {DiskStatusLabel} from '../../components/DiskStatus/DiskStatus';
+import {getPDiskStateLabel} from '../../components/PDiskInfo/statuses';
+import {pDiskApi} from '../../store/reducers/pdisk/pdisk';
+import {valueIsDefined} from '../../utils';
+import {getPDiskId} from '../../utils/disks/helpers';
+
+import {b} from './constants';
+import {headerKeyset} from './i18n';
+
+export function PDiskLeftControls() {
+    const [{nodeId, pDiskId}] = useQueryParams({
+        nodeId: StringParam,
+        pDiskId: StringParam,
+    });
+    const {currentData} = pDiskApi.endpoints.getPdiskInfo.useQueryState(
+        valueIsDefined(nodeId) && valueIsDefined(pDiskId) ? {nodeId, pDiskId} : skipToken,
+    );
+    const diskId = getPDiskId({nodeId, pDiskId});
+
+    if (!diskId) {
+        return null;
+    }
+
+    return (
+        <Flex alignItems="center" gap={2} className={b('left-controls')}>
+            <ClipboardButton
+                text={diskId}
+                size="s"
+                view="flat-secondary"
+                color="secondary"
+                aria-label={headerKeyset('action_copy-pdisk-id-from-breadcrumb')}
+                tooltipInitialText={headerKeyset('action_copy-pdisk-id')}
+            />
+            <DiskStatusLabel {...getPDiskStateLabel(currentData?.State)} size="xs" iconSize={12} />
+        </Flex>
+    );
+}

package/src/containers/Header/StorageGroupLeftControls.tsx

@@ -0,0 +1,38 @@
+import {ClipboardButton, Flex} from '@gravity-ui/uikit';
+import {skipToken} from '@reduxjs/toolkit/query';
+import {StringParam, useQueryParams} from 'use-query-params';
+
+import {storageApi} from '../../store/reducers/storage/storage';
+import {valueIsDefined} from '../../utils';
+import {useDatabaseFromQuery} from '../../utils/hooks/useDatabaseFromQuery';
+import {StorageGroupStateLabel} from '../Storage/StorageGroupStateLabel';
+
+import {b} from './constants';
+import {headerKeyset} from './i18n';
+
+export function StorageGroupLeftControls() {
+    const [{groupId}] = useQueryParams({groupId: StringParam});
+    const database = useDatabaseFromQuery();
+    const {currentData} = storageApi.endpoints.getStorageGroupsInfo.useQueryState(
+        valueIsDefined(groupId)
+            ? {groupId, with: 'all', fieldsRequired: 'all', database}
+            : skipToken,
+    );
+
+    if (!groupId) {
+        return null;
+    }
+
+    return (
+        <Flex alignItems="center" gap={2} className={b('left-controls')}>
+            <ClipboardButton
+                text={groupId}
+                view="flat-secondary"
+                size="s"
+                aria-label={headerKeyset('action_copy-group-id-from-breadcrumb')}
+                tooltipInitialText={headerKeyset('action_copy-group-id')}
+            />
+            <StorageGroupStateLabel state={currentData?.groups?.[0]?.State} size="xs" />
+        </Flex>
+    );
+}

package/src/containers/Header/VDiskLeftControls.tsx

@@ -0,0 +1,40 @@
+import {ClipboardButton, Flex} from '@gravity-ui/uikit';
+import {skipToken} from '@reduxjs/toolkit/query';
+import {StringParam, useQueryParams} from 'use-query-params';
+
+import {VDiskStateLabel} from '../../components/VDiskStatus';
+import {vDiskApi} from '../../store/reducers/vdisk/vdisk';
+
+import {b} from './constants';
+import {headerKeyset} from './i18n';
+
+export function VDiskLeftControls() {
+    const [{vDiskId, nodeId, database}] = useQueryParams({
+        vDiskId: StringParam,
+        nodeId: StringParam,
+        database: StringParam,
+    });
+    const {currentData} = vDiskApi.endpoints.getVDiskData.useQueryState(
+        vDiskId
+            ? {vDiskId, nodeId: nodeId ?? undefined, database: database ?? undefined}
+            : skipToken,
+    );
+
+    if (!vDiskId) {
+        return null;
+    }
+
+    return (
+        <Flex alignItems="center" gap={2} className={b('left-controls')}>
+            <ClipboardButton
+                text={vDiskId}
+                size="s"
+                view="flat-secondary"
+                color="secondary"
+                aria-label={headerKeyset('action_copy-vdisk-id')}
+                tooltipInitialText={headerKeyset('action_copy-vdisk-id')}
+            />
+            <VDiskStateLabel state={currentData?.VDiskState} size="xs" />
+        </Flex>
+    );
+}

package/src/containers/Header/breadcrumbs.tsx

@@ -35,6 +35,7 @@ import {
     TENANT_PAGES_IDS,
 } from '../../store/reducers/tenant/constants';
 import {CLUSTER_DEFAULT_TITLE, UNBREAKABLE_GAP, getTabletLabel} from '../../utils/constants';
+import {getPDiskId} from '../../utils/disks/helpers';
 import {TenantTabsGroups} from '../Tenant/TenantPages';
 
 import {headerKeyset} from './i18n';
@@ -205,8 +206,9 @@ const getPDiskBreadcrumbs: GetBreadcrumbs<PDiskBreadcrumbsOptions> = (options, q
     });
 
     let text = headerKeyset('breadcrumbs.pDisk');
-    if (pDiskId) {
-        text += ` ${pDiskId}`;
+    const diskId = getPDiskId({nodeId, pDiskId}) ?? pDiskId;
+    if (diskId) {
+        text += ` ${diskId}`;
     }
 
     const hasLink = pDiskId && nodeId;

package/src/containers/Header/i18n/en.json

@@ -24,5 +24,10 @@
   "description_connect-to-db": "Connect to database",
 
   "title_monitoring": "Open in {{system}}",
-  "action_copy-path": "Copy path"
+  "action_copy-path": "Copy path",
+  "action_copy-group-id": "Copy Storage Group ID",
+  "action_copy-group-id-from-breadcrumb": "Copy Storage Group ID from breadcrumb",
+  "action_copy-vdisk-id": "Copy VDisk ID",
+  "action_copy-pdisk-id": "Copy PDisk ID",
+  "action_copy-pdisk-id-from-breadcrumb": "Copy PDisk ID from breadcrumb"
 }

package/src/containers/Nodes/NodesControls/NodesControls.tsx

@@ -68,6 +68,7 @@ export function NodesControls({
         <React.Fragment>
             <Search
                 tableFilter
+                debounce={0}
                 onChange={handleSearchQueryChange}
                 placeholder={i18n('controls_search-placeholder')}
                 width={238}

package/src/containers/Nodes/PaginatedNodes/GroupedNodesComponent.tsx

@@ -22,6 +22,7 @@ import {NodesControls} from '../NodesControls/NodesControls';
 import {NodesTable} from '../NodesTable';
 import i18n from '../i18n';
 import {b} from '../shared';
+import {useDebouncedSearch} from '../useDebouncedSearch';
 import {useNodesPageQueryParams} from '../useNodesPageQueryParams';
 
 interface NodeGroupProps {
@@ -123,6 +124,7 @@ export function GroupedNodesComponent({
         groupByParams,
         withPeerRoleFilter,
     );
+    const searchFilter = useDebouncedSearch(searchValue);
     const useMetaProxy = useClusterWithProxy();
     const [autoRefreshInterval] = useAutoRefreshInterval();
 
@@ -145,7 +147,7 @@ export function GroupedNodesComponent({
         {
             path: schemaPathParam,
             database,
-            filter: searchValue.trim(),
+            filter: searchFilter.trim(),
             filter_peer_role: peerRoleFilter,
             group: groupByParam,
             limit: 0,
@@ -185,7 +187,7 @@ export function GroupedNodesComponent({
                         path={path}
                         databaseFullPath={databaseFullPath}
                         database={database}
-                        searchValue={searchValue}
+                        searchValue={searchFilter}
                         peerRoleFilter={peerRoleFilter}
                         groupByParam={groupByParam}
                         columns={columnsToShow}
@@ -225,7 +227,7 @@ export function GroupedNodesComponent({
             table={renderGroups()}
             tableWrapperProps={{
                 scrollContainerRef,
-                scrollDependencies: [searchValue, groupByParam, tableGroups, peerRoleFilter],
+                scrollDependencies: [searchFilter, groupByParam, tableGroups, peerRoleFilter],
                 loading: isLoading,
                 className: b('groups-wrapper'),
             }}

package/src/containers/Nodes/PaginatedNodes/NodesComponent.tsx

@@ -11,6 +11,7 @@ import type {PreparedStorageNode} from '../../../store/reducers/storage/types';
 import type {NodesGroupByField} from '../../../types/api/nodes';
 import {useSelectedColumns} from '../../../utils/hooks/useSelectedColumns';
 import {NodesTable} from '../NodesTable';
+import {useDebouncedSearch} from '../useDebouncedSearch';
 import {useNodesPageQueryParams} from '../useNodesPageQueryParams';
 
 import {NodesControlsWithTableState} from './NodesControlsWithTableState';
@@ -46,6 +47,7 @@ export function NodesComponent({
         groupByParams,
         withPeerRoleFilter,
     );
+    const searchFilter = useDebouncedSearch(searchValue);
     const viewerNodesHandlerHasGrouping = useViewerNodesHandlerHasGrouping();
 
     const {columnsToShow, columnsToSelect, setColumns} = useSelectedColumns(
@@ -78,7 +80,7 @@ export function NodesComponent({
                     path={path}
                     database={database}
                     databaseFullPath={databaseFullPath}
-                    searchValue={searchValue}
+                    searchValue={searchFilter}
                     withProblems={withProblems}
                     uptimeFilter={uptimeFilter}
                     peerRoleFilter={peerRoleFilter}
@@ -89,7 +91,7 @@ export function NodesComponent({
             }
             tableWrapperProps={{
                 scrollContainerRef,
-                scrollDependencies: [searchValue, withProblems, uptimeFilter, peerRoleFilter],
+                scrollDependencies: [searchFilter, withProblems, uptimeFilter, peerRoleFilter],
             }}
         />
     );

package/src/containers/Nodes/useDebouncedSearch.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+
+/** Debounce the table filter, never the input or its URL value. */
+export function useDebouncedSearch(searchValue: string) {
+    const [debouncedSearch, setDebouncedSearch] = React.useState(searchValue);
+
+    React.useEffect(() => {
+        const timer = window.setTimeout(() => setDebouncedSearch(searchValue), 200);
+        return () => window.clearTimeout(timer);
+    }, [searchValue]);
+
+    return debouncedSearch;
+}

package/src/containers/PDiskPage/PDiskPage.scss

@@ -4,12 +4,14 @@
     position: relative;
 
     overflow: auto;
+    overflow-anchor: none;
 
     height: 100%;
-    padding: 0 20px;
+    padding: 20px 20px 0;
 
     &__meta,
     &__title,
+    &__storage-details,
     &__info,
     &__controls,
     &__tabs {
@@ -19,8 +21,23 @@
         margin-bottom: 20px;
     }
 
-    &__meta {
-        margin-top: 20px;
+    &__heading {
+        margin: 0;
+        overflow-wrap: anywhere;
+    }
+
+    &__title-content {
+        flex: 1;
+
+        min-width: 0;
+    }
+
+    &__refresh-control {
+        flex-shrink: 0;
+    }
+
+    &__storage-details {
+        margin-bottom: var(--g-spacing-4);
     }
 
     &__tabs {
@@ -31,17 +48,11 @@
         padding: 20px 0;
     }
 
-    &__title {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: var(--g-spacing-2);
-    }
-
     &__controls {
         display: flex;
+        flex-wrap: wrap;
         align-items: center;
-        gap: var(--g-spacing-2);
+        gap: var(--g-spacing-3);
     }
 
     &__tabs {