ydb-embedded-ui 22.5.0 → 22.6.0

package/src/containers/Storage/PaginatedStorageNodes/GroupedStorageNodesComponent.tsx

@@ -7,6 +7,7 @@ import {NODES_COLUMNS_TO_DATA_FIELDS} from '../../../components/nodesColumns/con
 import {storageApi} from '../../../store/reducers/storage/storage';
 import type {NodesGroupByField, NodesRequiredField} from '../../../types/api/nodes';
 import {useAutoRefreshInterval} from '../../../utils/hooks';
+import {useHideUnavailableNodes} from '../../../utils/hooks/useHideUnavailableNodes';
 import {NodesUptimeFilterValues} from '../../../utils/nodes';
 import {renderPaginatedTableErrorMessage} from '../../../utils/renderPaginatedTableErrorMessage';
 import {getRequiredDataFields} from '../../../utils/tableUtils/getRequiredDataFields';
@@ -105,6 +106,7 @@ export function GroupedStorageNodesComponent({
     scrollContainerRef,
 }: PaginatedStorageProps) {
     const [autoRefreshInterval] = useAutoRefreshInterval();
+    const {hideUnavailable} = useHideUnavailableNodes();
 
     const {nodesSearchValue, storageNodesGroupByParam, handleShowAllNodes} =
         useStorageQueryParams();
@@ -131,6 +133,7 @@ export function GroupedStorageNodesComponent({
     const {currentData, isFetching, error} = storageApi.useGetStorageNodesInfoQuery(
         {
             database,
+            alive: hideUnavailable || undefined,
             with: 'all',
             filter: nodesSearchValue.trim(),
             node_id: nodeId,

package/src/containers/Storage/PaginatedStorageNodes/StorageNodesComponent.tsx

@@ -1,6 +1,7 @@
 import {PaginatedTableWithLayout} from '../../../components/PaginatedTable/PaginatedTableWithLayout';
 import {TableColumnSetup} from '../../../components/TableColumnSetup/TableColumnSetup';
 import {useViewerNodesHandlerHasGrouping} from '../../../store/reducers/capabilities/hooks';
+import {useHideUnavailableNodes} from '../../../utils/hooks/useHideUnavailableNodes';
 import {renderPaginatedTableErrorMessage} from '../../../utils/renderPaginatedTableErrorMessage';
 import type {PaginatedStorageProps} from '../PaginatedStorage';
 import {PaginatedStorageNodesTable} from '../PaginatedStorageNodesTable/PaginatedStorageNodesTable';
@@ -22,6 +23,7 @@ export function StorageNodesComponent({
         useStorageQueryParams();
 
     const viewerNodesHandlerHasGrouping = useViewerNodesHandlerHasGrouping();
+    const {hideUnavailable} = useHideUnavailableNodes();
 
     const expertMode = useIsStorageExpertMode();
     const {handleDataFetched, columnsSettings, rowHeight} = useStorageColumnsSettings({
@@ -69,7 +71,12 @@ export function StorageNodesComponent({
             }
             tableWrapperProps={{
                 scrollContainerRef,
-                scrollDependencies: [nodesSearchValue, visibleEntities, nodesUptimeFilter],
+                scrollDependencies: [
+                    nodesSearchValue,
+                    visibleEntities,
+                    nodesUptimeFilter,
+                    hideUnavailable,
+                ],
             }}
         />
     );

package/src/containers/Storage/PaginatedStorageNodes/StorageNodesControls.tsx

@@ -4,6 +4,7 @@ import {ChartTreemap} from '@gravity-ui/icons';
 import {Button, Flex, Icon, Select, Text} from '@gravity-ui/uikit';
 
 import {EntitiesCount} from '../../../components/EntitiesCount/EntitiesCount';
+import {HideUnavailableNodesSwitch} from '../../../components/HideUnavailableNodesSwitch/HideUnavailableNodesSwitch';
 import {usePaginatedTableState} from '../../../components/PaginatedTable/PaginatedTableContext';
 import {Search} from '../../../components/Search/Search';
 import {UptimeFilter} from '../../../components/UptimeFIlter';
@@ -127,6 +128,7 @@ export function StorageNodesControls({
                         {i18n('controls_expert-mode')}
                     </Button>
                 ) : null}
+                <HideUnavailableNodesSwitch className={b('hide-unavailable')} />
             </Flex>
             {canUseStorageExpertMode && isStorageExpertMode ? (
                 <StorageNodesExpertModePanel />

package/src/containers/Storage/PaginatedStorageNodesTable/PaginatedStorageNodesTable.tsx

@@ -14,6 +14,7 @@ import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
 import type {PreparedStorageNode, VisibleEntities} from '../../../store/reducers/storage/types';
 import type {NodesGroupByField} from '../../../types/api/nodes';
 import {cn} from '../../../utils/cn';
+import {useHideUnavailableNodes} from '../../../utils/hooks/useHideUnavailableNodes';
 import {NodesUptimeFilterValues, isUnavailableNode} from '../../../utils/nodes';
 import {STORAGE_NODES_DEFAULT_ROW_HEIGHT} from '../PaginatedStorageNodes/nodeExpertModeLayout';
 
@@ -69,9 +70,11 @@ export const PaginatedStorageNodesTable = ({
     onDataFetched,
 }: PaginatedStorageNodesTableProps) => {
     const history = useHistory();
+    const {hideUnavailable} = useHideUnavailableNodes();
     const tableFilters = React.useMemo(() => {
         return {
             searchValue,
+            hideUnavailable,
             visibleEntities,
             nodesUptimeFilter,
             database,
@@ -81,6 +84,7 @@ export const PaginatedStorageNodesTable = ({
             filterGroupBy,
         };
     }, [
+        hideUnavailable,
         searchValue,
         visibleEntities,
         nodesUptimeFilter,

package/src/containers/Storage/PaginatedStorageNodesTable/getNodes.ts

@@ -29,6 +29,7 @@ export const getStorageNodes: FetchData<
     } = params;
     const {
         searchValue,
+        hideUnavailable,
         nodesUptimeFilter,
         visibleEntities,
         database,
@@ -51,6 +52,7 @@ export const getStorageNodes: FetchData<
         offset,
         sort,
         filter: searchValue?.trim(),
+        alive: hideUnavailable || undefined,
         uptime: getUptimeParamValue(nodesUptimeFilter),
         with: visibleEntities,
         database,

package/src/containers/Storage/Storage.scss

@@ -1,6 +1,10 @@
 @use '../../styles/mixins.scss';
 
 .global-storage {
+    &__hide-unavailable {
+        margin-inline-start: var(--g-spacing-1);
+    }
+
     &__search {
         @include mixins.search();
     }

package/src/containers/StorageGroupPage/StorageGroupPage.scss

@@ -1,4 +1,8 @@
+@use '../../styles/mixins.scss';
+
 .ydb-storage-group-page {
+    --sticky-tabs-height: 40px;
+    --data-table-start: var(--sticky-tabs-height);
     position: relative;
 
     overflow: auto;
@@ -15,16 +19,12 @@
     }
 
     &__summary {
-        margin-top: var(--g-spacing-4);
         margin-bottom: var(--g-spacing-6);
     }
 
-    &__meta {
-        margin-bottom: var(--g-spacing-4);
-    }
-
     &__title {
         margin-bottom: var(--g-spacing-4);
+        padding-right: 125px;
     }
 
     &__title-content {
@@ -33,11 +33,16 @@
         min-width: 0;
     }
 
-    &__refresh-control {
-        flex-shrink: 0;
-    }
-
     &__storage-title {
+        z-index: 3;
+
+        display: flex;
+        align-items: center;
+
+        height: var(--sticky-tabs-height);
         margin: 0;
+        padding-right: 125px;
+
+        @include mixins.sticky-top();
     }
 }

package/src/containers/StorageGroupPage/StorageGroupPage.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
 
-import {ArrowLeft} from '@gravity-ui/icons';
-import {Button, Flex, Icon, Text} from '@gravity-ui/uikit';
+import {Flex, Text} from '@gravity-ui/uikit';
 import {skipToken} from '@reduxjs/toolkit/query';
 import {Helmet} from 'react-helmet-async';
-import {useHistory} from 'react-router-dom';
 import {StringParam, useQueryParams} from 'use-query-params';
 
-import {AutoRefreshControl} from '../../components/AutoRefreshControl/AutoRefreshControl';
+import {StickyAutoRefreshControl} from '../../components/AutoRefreshControl/StickyAutoRefreshControl';
 import {CopyableValue} from '../../components/CopyableValue/CopyableValue';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {InfoViewerSkeleton} from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
@@ -32,13 +30,10 @@ const storageGroupPageCn = cn('ydb-storage-group-page');
 
 export function StorageGroupPage() {
     const dispatch = useTypedDispatch();
-    const history = useHistory();
     const database = useDatabaseFromQuery();
     const containerRef = React.useRef<HTMLDivElement>(null);
 
     const [{groupId}] = useQueryParams({groupId: StringParam});
-    const showBackButton = Boolean(groupId) && history.length > 1;
-    const showRefreshInTitle = Boolean(groupId) && !showBackButton;
 
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const capabilitiesLoaded = useCapabilitiesLoaded();
@@ -75,27 +70,6 @@ export function StorageGroupPage() {
         );
     };
 
-    const renderPageMeta = () => {
-        if (!showBackButton) {
-            return null;
-        }
-
-        return (
-            <Flex
-                className={storageGroupPageCn('meta')}
-                alignItems="center"
-                justifyContent="space-between"
-                gap={2}
-            >
-                <Button view="outlined" onClick={() => history.goBack()}>
-                    <Icon data={ArrowLeft} />
-                    {storageGroupPageKeyset('action_back')}
-                </Button>
-                <AutoRefreshControl className={storageGroupPageCn('refresh-control')} />
-            </Flex>
-        );
-    };
-
     const renderPageTitle = () => {
         return (
             <Flex
@@ -122,9 +96,6 @@ export function StorageGroupPage() {
                     </CopyableValue>
                     <StorageGroupStateLabel state={state} />
                 </Flex>
-                {showRefreshInTitle && (
-                    <AutoRefreshControl className={storageGroupPageCn('refresh-control')} />
-                )}
             </Flex>
         );
     };
@@ -167,8 +138,8 @@ export function StorageGroupPage() {
     return (
         <div className={storageGroupPageCn(null)} ref={containerRef}>
             {renderHelmet()}
+            {groupId ? <StickyAutoRefreshControl /> : null}
             <div className={storageGroupPageCn('summary')}>
-                {renderPageMeta()}
                 {renderPageTitle()}
                 {renderError()}
                 {renderInfo()}

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

@@ -1,6 +1,5 @@
 {
   "storage-group": "Storage Group",
   "storage": "Storage",
-  "action_back": "Back",
   "action_copy-group-id-from-title": "Copy Storage Group ID from page title"
 }

package/src/containers/Tablet/Tablet.scss

@@ -2,10 +2,24 @@
 
 .ydb-tablet-page {
     $_: &;
+    position: relative;
+
+    overflow: auto;
+
     height: 100%;
-    padding: 20px;
+    padding: 0 20px 20px;
     @include mixins.body-2-typography();
 
+    &__content {
+        // The sticky refresh wrapper already supplies the initial 20px page inset.
+        min-height: calc(100% - 20px);
+    }
+
+    &__meta {
+        min-height: 28px;
+        padding-right: 121px;
+    }
+
     &__placeholder {
         display: flex;
         flex: 1 1 auto;

package/src/containers/Tablet/Tablet.tsx

@@ -7,12 +7,13 @@ import {useParams} from 'react-router-dom';
 import {useQueryParams} from 'use-query-params';
 import {z} from 'zod';
 
+import {StickyAutoRefreshControl} from '../../components/AutoRefreshControl/StickyAutoRefreshControl';
 import {EmptyStateWrapper} from '../../components/EmptyState';
 import {EntityPageTitle} from '../../components/EntityPageTitle/EntityPageTitle';
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {InternalLink} from '../../components/InternalLink';
 import {LoaderWrapper} from '../../components/LoaderWrapper/LoaderWrapper';
-import {PageMetaWithAutorefresh} from '../../components/PageMeta/PageMeta';
+import {PageMeta} from '../../components/PageMeta/PageMeta';
 import {tabletPageQueryParams, useTabletPagePath} from '../../routes';
 import {useTabletDevUiSecurePath} from '../../store/reducers/capabilities/hooks';
 import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
@@ -106,25 +107,30 @@ export function Tablet() {
     }
 
     return (
-        <Flex gap={5} direction="column" className={b()}>
+        <div className={b()}>
             <Helmet>
                 <title>{`${id} — ${i18n('tablet.header')} — ${
                     databaseFullPath || queryClusterName || CLUSTER_DEFAULT_TITLE
                 }`}</title>
             </Helmet>
-            <PageMetaWithAutorefresh items={metaItems} />
-            <LoaderWrapper loading={loading} size="l">
-                {error ? <ResponseError error={error} /> : null}
-                {currentData ? (
-                    <TabletContent
-                        id={id}
-                        tablet={tablet}
-                        history={history}
-                        database={database || databaseFullPath}
-                    />
-                ) : null}
-            </LoaderWrapper>
-        </Flex>
+            <StickyAutoRefreshControl />
+            <Flex gap={5} direction="column" className={b('content')}>
+                <Flex alignItems="center" className={b('meta')}>
+                    <PageMeta items={metaItems} />
+                </Flex>
+                <LoaderWrapper loading={loading} size="l">
+                    {error ? <ResponseError error={error} /> : null}
+                    {currentData ? (
+                        <TabletContent
+                            id={id}
+                            tablet={tablet}
+                            history={history}
+                            database={database || databaseFullPath}
+                        />
+                    ) : null}
+                </LoaderWrapper>
+            </Flex>
+        </div>
     );
 }
 

package/src/containers/VDiskPage/VDiskPage.scss

@@ -1,4 +1,8 @@
+@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;
 
@@ -6,9 +10,8 @@
     overflow-anchor: none;
 
     height: 100%;
-    padding: 20px 20px 0;
+    padding: 0 20px;
 
-    &__meta,
     &__title,
     &__controls,
     &__storage-details,
@@ -36,8 +39,8 @@
         min-width: 0;
     }
 
-    &__refresh-control {
-        flex-shrink: 0;
+    &__title {
+        padding-right: 125px;
     }
 
     &__controls {
@@ -53,5 +56,21 @@
 
     &__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,13 +1,12 @@
 import React from 'react';
 
-import {ArrowLeft, Wrench} from '@gravity-ui/icons';
-import {Button, Flex, Icon, Tab, TabList, TabProvider, Text} 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 {useHistory} from 'react-router-dom';
 
-import {AutoRefreshControl} from '../../components/AutoRefreshControl/AutoRefreshControl';
+import {StickyAutoRefreshControl} from '../../components/AutoRefreshControl/StickyAutoRefreshControl';
 import {CopyableValue} from '../../components/CopyableValue/CopyableValue';
 import {DiskTypeLabel} from '../../components/DiskStatus/DiskStatus';
 import {ResponseError} from '../../components/Errors/ResponseError';
@@ -48,8 +47,6 @@ const vDiskPageCn = cn('ydb-vdisk-page');
 
 export function VDiskPage() {
     const dispatch = useTypedDispatch();
-    const history = useHistory();
-    const showBackButton = history.length > 1;
     const getVDiskPagePath = useVDiskPagePath();
 
     const containerRef = React.useRef<HTMLDivElement>(null);
@@ -114,27 +111,6 @@ export function VDiskPage() {
         );
     };
 
-    const renderPageMeta = () => {
-        if (!showBackButton) {
-            return null;
-        }
-
-        return (
-            <Flex
-                className={vDiskPageCn('meta')}
-                alignItems="center"
-                justifyContent="space-between"
-                gap={1}
-            >
-                <Button size="m" view="outlined" onClick={() => history.goBack()}>
-                    <Icon data={ArrowLeft} size={16} />
-                    {vDiskPageKeyset('action_back')}
-                </Button>
-                <AutoRefreshControl className={vDiskPageCn('refresh-control')} />
-            </Flex>
-        );
-    };
-
     const renderTitleMeta = () => {
         return (
             <Flex gap={2} wrap="wrap" alignItems="center">
@@ -182,9 +158,6 @@ export function VDiskPage() {
                         </CopyableValue>
                     </Flex>
                 </Flex>
-                {!showBackButton && (
-                    <AutoRefreshControl className={vDiskPageCn('refresh-control')} />
-                )}
             </Flex>
         );
     };
@@ -334,7 +307,7 @@ export function VDiskPage() {
     return (
         <div className={vDiskPageCn(null)} ref={containerRef}>
             {renderHelmet()}
-            {renderPageMeta()}
+            <StickyAutoRefreshControl />
             {renderPageTitle()}
             {renderControls()}
             {renderContent()}

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

@@ -4,7 +4,6 @@
   "vdisk": "VDisk",
   "storage": "Storage",
   "tablets": "Tablets",
-  "action_back": "Back",
   "action_go-to-pdisk": "Go to PDisk",
   "action_open-in-developer-ui": "Open in Developer UI",
   "tablet-id": "Tablet ID",

package/src/store/reducers/capabilities/hooks.ts

@@ -106,6 +106,10 @@ export const useStorageGroupsHandlerHasGrouping = () => {
     return useGetFeatureVersion('/storage/groups') > 4;
 };
 
+export const useViewerNodesAliveFilterAvailable = () => {
+    return useGetFeatureVersion('/viewer/nodes/alive') >= 1;
+};
+
 export const useViewerNodesHandlerHasGrouping = () => {
     return useGetFeatureVersion('/viewer/nodes') > 6;
 };

package/src/store/reducers/nodes/types.ts

@@ -3,6 +3,7 @@ import type {NodesUptimeFilterValues} from '../../../utils/nodes';
 
 export interface NodesFilters {
     searchValue: string;
+    hideUnavailable?: boolean;
     withProblems: boolean;
     uptimeFilter: NodesUptimeFilterValues;
     peerRoleFilter?: NodesPeerRole;

package/src/store/reducers/storage/types.ts

@@ -16,6 +16,7 @@ export type StorageType = z.infer<typeof storageTypeSchema>;
 
 export interface PreparedStorageNodeFilters {
     searchValue: string;
+    hideUnavailable?: boolean;
     nodesUptimeFilter: NodesUptimeFilterValues;
     visibleEntities: VisibleEntities;
 

package/src/types/api/capabilities.ts

@@ -27,6 +27,7 @@ export type Capability =
     | '/viewer/cluster'
     | '/vdisk/blobindexstat'
     | '/viewer/nodes'
+    | '/viewer/nodes/alive'
     | '/viewer/peers'
     | '/viewer/acl'
     | '/viewer/topic_data'

package/src/types/api/nodes.ts

@@ -363,6 +363,8 @@ export interface NodesRequestParams {
     uptime?: number;
     /** return nodes with SystemState !== EFlag.Green */
     problems_only?: boolean;
+    /** exclude disconnected nodes; requires /viewer/nodes/alive capability */
+    alive?: boolean;
     /** filter nodes by id or host */
     filter?: string;
     filter_peer_role?: NodesPeerRole; // v14

package/src/utils/hooks/useHideUnavailableNodes.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import {BooleanParam, useQueryParam} from 'use-query-params';
+import {z} from 'zod';
+
+import {
+    useCapabilitiesLoaded,
+    useViewerNodesAliveFilterAvailable,
+} from '../../store/reducers/capabilities/hooks';
+
+const hideUnavailableSchema = z.boolean().catch(false);
+
+export function useHideUnavailableNodes() {
+    const [value, setValue] = useQueryParam('hideUnavailable', BooleanParam);
+    const available = useViewerNodesAliveFilterAvailable();
+    const capabilitiesLoaded = useCapabilitiesLoaded();
+    const hideUnavailable = available && hideUnavailableSchema.parse(value);
+
+    React.useEffect(() => {
+        if (capabilitiesLoaded && !available && value !== undefined) {
+            setValue(undefined, 'replaceIn');
+        }
+    }, [available, capabilitiesLoaded, setValue, value]);
+
+    const handleHideUnavailableChange = React.useCallback(
+        (checked: boolean) => {
+            setValue(checked || undefined, 'replaceIn');
+        },
+        [setValue],
+    );
+
+    return {available, hideUnavailable, handleHideUnavailableChange};
+}