diff --git a/src/containers/Cluster/Cluster.tsx b/src/containers/Cluster/Cluster.tsx index b77a5cb500..d9f559c4cc 100644 --- a/src/containers/Cluster/Cluster.tsx +++ b/src/containers/Cluster/Cluster.tsx @@ -173,10 +173,7 @@ export function Cluster({ getLocationObjectFromHref(getClusterPath(clusterTabsIds.storage)).pathname } > - + { - return preparePDiskStorageResponse(currentData, pDiskId, nodeId) || []; - }, [currentData, pDiskId, nodeId]); - - const pDiskStorageColumns = useGetDiskStorageColumns(); - - if (loading || !capabilitiesLoaded) { - return ; - } - - return ( - - ); -} diff --git a/src/containers/PDiskPage/PDiskGroups/utils.ts b/src/containers/PDiskPage/PDiskGroups/utils.ts deleted file mode 100644 index 447faa0db1..0000000000 --- a/src/containers/PDiskPage/PDiskGroups/utils.ts +++ /dev/null @@ -1,19 +0,0 @@ -import type {PreparedStorageResponse} from '../../../store/reducers/storage/types'; - -export function preparePDiskStorageResponse( - data?: PreparedStorageResponse, - pDiskId?: number | string, - nodeId?: number | string, -) { - return data?.groups?.filter((group) => { - return group.VDisks?.some((vdisk) => { - // If VDisk has PDisk inside, PDiskId and NodeId fields could be only inside PDisk and vice versa - const groupPDiskId = vdisk.PDiskId ?? vdisk.PDisk?.PDiskId; - const groupNodeId = vdisk.NodeId ?? vdisk.PDisk?.NodeId; - - return ( - Number(groupPDiskId) === Number(pDiskId) && Number(groupNodeId) === Number(nodeId) - ); - }); - }); -} diff --git a/src/containers/PDiskPage/PDiskPage.scss b/src/containers/PDiskPage/PDiskPage.scss index 1cc67d8f16..72cf55a0ba 100644 --- a/src/containers/PDiskPage/PDiskPage.scss +++ b/src/containers/PDiskPage/PDiskPage.scss @@ -6,29 +6,29 @@ overflow: auto; height: 100%; + padding: 0 20px; - &__info-content { + &__meta, + &__title, + &__info, + &__controls, + &__tabs { position: sticky; left: 0; - display: flex; - flex-direction: column; - gap: 20px; - - padding: 20px; + margin-bottom: 20px; } - &__tabs-content { - padding-left: 20px; + &__meta { + margin-top: 20px; } - &__meta, - &__title, - &__info, - &__controls, &__tabs { - position: sticky; - left: 0; + margin-bottom: 0; + } + + &__disk-distribution { + padding: 20px 0; } &__title { diff --git a/src/containers/PDiskPage/PDiskPage.tsx b/src/containers/PDiskPage/PDiskPage.tsx index 88c302c9ea..150046556c 100644 --- a/src/containers/PDiskPage/PDiskPage.tsx +++ b/src/containers/PDiskPage/PDiskPage.tsx @@ -24,10 +24,10 @@ import {valueIsDefined} from '../../utils'; import {cn} from '../../utils/cn'; import {getPDiskId, getSeverityColor} from '../../utils/disks/helpers'; import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../utils/hooks'; +import {Storage} from '../Storage/Storage'; import {DecommissionButton} from './DecommissionButton/DecommissionButton'; import {DecommissionLabel} from './DecommissionLabel/DecommissionLabel'; -import {PDiskGroups} from './PDiskGroups/PDiskGroups'; import {PDiskSpaceDistribution} from './PDiskSpaceDistribution/PDiskSpaceDistribution'; import {pDiskPageKeyset} from './i18n'; @@ -37,7 +37,7 @@ const pdiskPageCn = cn('ydb-pdisk-page'); const PDISK_TABS_IDS = { diskDistribution: 'diskDistribution', - groups: 'groups', + storage: 'storage', } as const; const PDISK_PAGE_TABS = [ @@ -48,9 +48,9 @@ const PDISK_PAGE_TABS = [ }, }, { - id: PDISK_TABS_IDS.groups, + id: PDISK_TABS_IDS.storage, get title() { - return pDiskPageKeyset('groups'); + return pDiskPageKeyset('storage'); }, }, ]; @@ -231,13 +231,15 @@ export function PDiskPage() { const renderTabsContent = () => { switch (pDiskTab) { case 'diskDistribution': { - return pDiskData ? : null; - } - case 'groups': { - return pDiskParamsDefined ? ( - + return pDiskData ? ( +
+ +
) : null; } + case 'storage': { + return pDiskParamsDefined ? : null; + } default: return null; } @@ -252,16 +254,14 @@ export function PDiskPage() { return (
-
- {renderHelmet()} - {renderPageMeta()} - {renderPageTitle()} - {renderControls()} - {renderError()} - {renderInfo()} - {renderTabs()} -
-
{renderTabsContent()}
+ {renderHelmet()} + {renderPageMeta()} + {renderPageTitle()} + {renderControls()} + {renderError()} + {renderInfo()} + {renderTabs()} + {renderTabsContent()}
); } diff --git a/src/containers/PDiskPage/i18n/en.json b/src/containers/PDiskPage/i18n/en.json index 3360607626..df65b30aa1 100644 --- a/src/containers/PDiskPage/i18n/en.json +++ b/src/containers/PDiskPage/i18n/en.json @@ -3,7 +3,7 @@ "pdisk": "PDisk", "node": "Node", - "groups": "Groups", + "storage": "Storage", "disk-distribution": "Disk distribution", "empty-slot": "Empty slot", diff --git a/src/containers/Storage/PaginatedStorage.tsx b/src/containers/Storage/PaginatedStorage.tsx index 5c5320a566..bc8863da15 100644 --- a/src/containers/Storage/PaginatedStorage.tsx +++ b/src/containers/Storage/PaginatedStorage.tsx @@ -3,31 +3,29 @@ import {StringParam, useQueryParams} from 'use-query-params'; import {AccessDenied} from '../../components/Errors/403/AccessDenied'; import {ResponseError} from '../../components/Errors/ResponseError/ResponseError'; import type {RenderControls, RenderErrorMessage} from '../../components/PaginatedTable'; -import {STORAGE_TYPES, VISIBLE_ENTITIES} from '../../store/reducers/storage/constants'; +import {useClusterBaseInfo} from '../../store/reducers/cluster/cluster'; +import {VISIBLE_ENTITIES} from '../../store/reducers/storage/constants'; import {storageTypeSchema, visibleEntitiesSchema} from '../../store/reducers/storage/types'; import type {StorageType, VisibleEntities} from '../../store/reducers/storage/types'; -import type {AdditionalNodesProps} from '../../types/additionalProps'; import {NodesUptimeFilterValues, nodesUptimeFilterValuesSchema} from '../../utils/nodes'; +import {useAdditionalNodeProps} from '../AppWithClusters/useClusterData'; import {StorageControls} from './StorageControls/StorageControls'; import {PaginatedStorageGroups} from './StorageGroups/PaginatedStorageGroups'; +import {useStorageGroupsSelectedColumns} from './StorageGroups/columns/hooks'; import {PaginatedStorageNodes} from './StorageNodes/PaginatedStorageNodes'; - -import './Storage.scss'; +import {useStorageNodesSelectedColumns} from './StorageNodes/columns/hooks'; interface PaginatedStorageProps { database?: string; nodeId?: string; parentContainer?: Element | null; - additionalNodesProps?: AdditionalNodesProps; } -export const PaginatedStorage = ({ - database, - nodeId, - parentContainer, - additionalNodesProps, -}: PaginatedStorageProps) => { +export const PaginatedStorage = ({database, nodeId, parentContainer}: PaginatedStorageProps) => { + const {balancer} = useClusterBaseInfo(); + const additionalNodesProps = useAdditionalNodeProps({balancer}); + const [queryParams, setQueryParams] = useQueryParams({ type: StringParam, visible: StringParam, @@ -35,10 +33,29 @@ export const PaginatedStorage = ({ uptimeFilter: StringParam, }); const storageType = storageTypeSchema.parse(queryParams.type); + const isGroups = storageType === 'groups'; + const isNodes = storageType === 'nodes'; + const visibleEntities = visibleEntitiesSchema.parse(queryParams.visible); const searchValue = queryParams.search ?? ''; const nodesUptimeFilter = nodesUptimeFilterValuesSchema.parse(queryParams.uptimeFilter); + const { + columnsToShow: storageNodesColumnsToShow, + columnsToSelect: storageNodesColumnsToSelect, + setColumns: setStorageNodesSelectedColumns, + } = useStorageNodesSelectedColumns({ + additionalNodesProps, + visibleEntities, + database, + }); + + const { + columnsToShow: storageGroupsColumnsToShow, + columnsToSelect: storageGroupsColumnsToSelect, + setColumns: setStorageGroupsSelectedColumns, + } = useStorageGroupsSelectedColumns(visibleEntities); + const handleTextFilterChange = (value: string) => { setQueryParams({search: value || undefined}, 'replaceIn'); }; @@ -70,11 +87,19 @@ export const PaginatedStorage = ({ }; const renderControls: RenderControls = ({totalEntities, foundEntities, inited}) => { + const columnsToSelect = isGroups + ? storageGroupsColumnsToSelect + : storageNodesColumnsToSelect; + + const handleSelectedColumnsUpdate = isGroups + ? setStorageGroupsSelectedColumns + : setStorageNodesSelectedColumns; + return ( ); }; @@ -97,18 +124,18 @@ export const PaginatedStorage = ({ return ; }; - if (storageType === STORAGE_TYPES.nodes) { + if (isNodes) { return ( ); } @@ -123,6 +150,7 @@ export const PaginatedStorage = ({ parentContainer={parentContainer} renderControls={renderControls} renderErrorMessage={renderErrorMessage} + columns={storageGroupsColumnsToShow} /> ); }; diff --git a/src/containers/Storage/Storage.tsx b/src/containers/Storage/Storage.tsx index ca28193569..bb90f6366f 100644 --- a/src/containers/Storage/Storage.tsx +++ b/src/containers/Storage/Storage.tsx @@ -10,8 +10,9 @@ import { useCapabilitiesLoaded, useStorageGroupsHandlerAvailable, } from '../../store/reducers/capabilities/hooks'; +import {useClusterBaseInfo} from '../../store/reducers/cluster/cluster'; import type {NodesSortParams} from '../../store/reducers/nodes/types'; -import {STORAGE_TYPES, VISIBLE_ENTITIES} from '../../store/reducers/storage/constants'; +import {VISIBLE_ENTITIES} from '../../store/reducers/storage/constants'; import { filterGroups, filterNodes, @@ -24,14 +25,17 @@ import type { StorageType, VisibleEntities, } from '../../store/reducers/storage/types'; -import type {AdditionalNodesProps} from '../../types/additionalProps'; +import {valueIsDefined} from '../../utils'; import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants'; import {useAutoRefreshInterval, useTableSort} from '../../utils/hooks'; import {NodesUptimeFilterValues, nodesUptimeFilterValuesSchema} from '../../utils/nodes'; +import {useAdditionalNodeProps} from '../AppWithClusters/useClusterData'; import {StorageControls} from './StorageControls/StorageControls'; import {StorageGroups} from './StorageGroups/StorageGroups'; +import {useStorageGroupsSelectedColumns} from './StorageGroups/columns/hooks'; import {StorageNodes} from './StorageNodes/StorageNodes'; +import {useStorageNodesSelectedColumns} from './StorageNodes/columns/hooks'; import {b} from './shared'; import {defaultSortNode, getDefaultSortGroup} from './utils'; @@ -55,12 +59,16 @@ const UsageFilterParam = withDefault( ); interface StorageProps { - additionalNodesProps?: AdditionalNodesProps; database?: string; - nodeId?: string; + nodeId?: string | number; + groupId?: string | number; + pDiskId?: string | number; } -export const Storage = ({additionalNodesProps, database, nodeId}: StorageProps) => { +export const Storage = ({database, nodeId, groupId, pDiskId}: StorageProps) => { + const {balancer} = useClusterBaseInfo(); + const additionalNodesProps = useAdditionalNodeProps({balancer}); + const capabilitiesLoaded = useCapabilitiesLoaded(); const groupsHandlerAvailable = useStorageGroupsHandlerAvailable(); const [autoRefreshInterval] = useAutoRefreshInterval(); @@ -73,6 +81,9 @@ export const Storage = ({additionalNodesProps, database, nodeId}: StorageProps) usageFilter: UsageFilterParam, }); const storageType = storageTypeSchema.parse(queryParams.type); + const isGroups = storageType === 'groups'; + const isNodes = storageType === 'nodes'; + const visibleEntities = visibleEntitiesSchema.parse(queryParams.visible); const filter = queryParams.search ?? ''; const uptimeFilter = nodesUptimeFilterValuesSchema.parse(queryParams.uptimeFilter); @@ -90,23 +101,51 @@ export const Storage = ({additionalNodesProps, database, nodeId}: StorageProps) }); const groupsSortParams = groupSort.sortOrder ? groupSort : getDefaultSortGroup(visibleEntities); + const { + columnsToShow: storageNodesColumnsToShow, + columnsToSelect: storageNodesColumnsToSelect, + setColumns: setStorageNodesSelectedColumns, + } = useStorageNodesSelectedColumns({ + additionalNodesProps, + visibleEntities, + database, + }); + + const { + columnsToShow: storageGroupsColumnsToShow, + columnsToSelect: storageGroupsColumnsToSelect, + setColumns: setStorageGroupsSelectedColumns, + } = useStorageGroupsSelectedColumns(visibleEntities); + const nodesQuery = storageApi.useGetStorageNodesInfoQuery( - {database, with: visibleEntities, node_id: nodeId}, { - skip: storageType !== STORAGE_TYPES.nodes, + database, + with: visibleEntities, + node_id: nodeId, + // node_id and group_id params don't work together + group_id: valueIsDefined(nodeId) ? undefined : groupId, + }, + { + skip: !isNodes, pollingInterval: autoRefreshInterval, }, ); const groupsQuery = storageApi.useGetStorageGroupsInfoQuery( - {database, with: visibleEntities, nodeId, shouldUseGroupsHandler: groupsHandlerAvailable}, { - skip: storageType !== STORAGE_TYPES.groups || !capabilitiesLoaded, + database, + with: visibleEntities, + nodeId, + groupId, + pDiskId, + shouldUseGroupsHandler: groupsHandlerAvailable, + }, + { + skip: !isGroups || !capabilitiesLoaded, pollingInterval: autoRefreshInterval, }, ); - const {currentData, isFetching, error} = - storageType === STORAGE_TYPES.nodes ? nodesQuery : groupsQuery; + const {currentData, isFetching, error} = isNodes ? nodesQuery : groupsQuery; const {currentData: {nodes = []} = {}} = nodesQuery; const {currentData: {groups = []} = {}} = groupsQuery; @@ -160,7 +199,7 @@ export const Storage = ({additionalNodesProps, database, nodeId}: StorageProps) const renderDataTable = () => { return ( - {storageType === STORAGE_TYPES.groups && ( + {isGroups ? ( handleGroupVisibilityChange(VISIBLE_ENTITIES.all)} sort={groupsSort} handleSort={handleGroupsSort} + columns={storageGroupsColumnsToShow} /> - )} - {storageType === STORAGE_TYPES.nodes && ( + ) : null} + {isNodes ? ( - )} + ) : null} ); }; const renderControls = () => { + const entitiesCountCurrent = isGroups ? storageGroups.length : storageNodes.length; + + const columnsToSelect = isGroups + ? storageGroupsColumnsToSelect + : storageNodesColumnsToSelect; + + const handleSelectedColumnsUpdate = isGroups + ? setStorageGroupsSelectedColumns + : setStorageNodesSelectedColumns; + return ( ); }; diff --git a/src/containers/Storage/StorageControls/StorageControls.tsx b/src/containers/Storage/StorageControls/StorageControls.tsx index 48476bbe22..bb348359df 100644 --- a/src/containers/Storage/StorageControls/StorageControls.tsx +++ b/src/containers/Storage/StorageControls/StorageControls.tsx @@ -1,5 +1,8 @@ import React from 'react'; +import type {TableColumnSetupItem} from '@gravity-ui/uikit'; +import {TableColumnSetup} from '@gravity-ui/uikit'; + import {EntitiesCount} from '../../../components/EntitiesCount/EntitiesCount'; import {Search} from '../../../components/Search/Search'; import {UptimeFilter} from '../../../components/UptimeFIlter'; @@ -35,6 +38,9 @@ interface StorageControlsProps { entitiesCountCurrent: number; entitiesCountTotal?: number; entitiesLoading: boolean; + + columnsToSelect: TableColumnSetupItem[]; + handleSelectedColumnsUpdate: (updated: TableColumnSetupItem[]) => void; } export const StorageControls = ({ @@ -59,8 +65,12 @@ export const StorageControls = ({ entitiesCountCurrent, entitiesCountTotal, entitiesLoading, + + columnsToSelect, + handleSelectedColumnsUpdate, }: StorageControlsProps) => { const isNodes = storageType === STORAGE_TYPES.nodes; + const isGroups = storageType === STORAGE_TYPES.groups; const entityName = isNodes ? i18n('nodes') : i18n('groups'); return ( @@ -86,7 +96,7 @@ export const StorageControls = ({ {isNodes && ( )} - {!isNodes && withGroupsUsageFilter && ( + {isGroups && withGroupsUsageFilter && ( + ); }; diff --git a/src/containers/Storage/StorageGroups/PaginatedStorageGroups.tsx b/src/containers/Storage/StorageGroups/PaginatedStorageGroups.tsx index ee7d3b807e..f850411dd5 100644 --- a/src/containers/Storage/StorageGroups/PaginatedStorageGroups.tsx +++ b/src/containers/Storage/StorageGroups/PaginatedStorageGroups.tsx @@ -12,11 +12,13 @@ import type {VisibleEntities} from '../../../store/reducers/storage/types'; import {StorageGroupsEmptyDataMessage} from './StorageGroupsEmptyDataMessage'; import {STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY} from './columns/constants'; -import {useGetStorageGroupsColumns} from './columns/hooks'; +import type {StorageGroupsColumn} from './columns/types'; import {useGroupsGetter} from './getGroups'; import i18n from './i18n'; interface PaginatedStorageGroupsProps { + columns: StorageGroupsColumn[]; + searchValue: string; visibleEntities: VisibleEntities; database?: string; @@ -30,6 +32,7 @@ interface PaginatedStorageGroupsProps { } export const PaginatedStorageGroups = ({ + columns, searchValue, visibleEntities, database, @@ -39,8 +42,6 @@ export const PaginatedStorageGroups = ({ renderControls, renderErrorMessage, }: PaginatedStorageGroupsProps) => { - const columns = useGetStorageGroupsColumns(visibleEntities); - const capabilitiesLoaded = useCapabilitiesLoaded(); const groupsHandlerAvailable = useStorageGroupsHandlerAvailable(); diff --git a/src/containers/Storage/StorageGroups/StorageGroups.tsx b/src/containers/Storage/StorageGroups/StorageGroups.tsx index 2872e3e1ac..744668720b 100644 --- a/src/containers/Storage/StorageGroups/StorageGroups.tsx +++ b/src/containers/Storage/StorageGroups/StorageGroups.tsx @@ -7,11 +7,12 @@ import type {HandleSort} from '../../../utils/hooks/useTableSort'; import {StorageGroupsEmptyDataMessage} from './StorageGroupsEmptyDataMessage'; import {STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY} from './columns/constants'; -import {useGetStorageGroupsColumns} from './columns/hooks'; +import type {StorageGroupsColumn} from './columns/types'; import i18n from './i18n'; interface StorageGroupsProps { data: PreparedStorageGroup[]; + columns: StorageGroupsColumn[]; tableSettings: Settings; visibleEntities: VisibleEntities; onShowAll?: VoidFunction; @@ -21,14 +22,13 @@ interface StorageGroupsProps { export function StorageGroups({ data, + columns, tableSettings, visibleEntities, onShowAll, sort, handleSort, }: StorageGroupsProps) { - const columns = useGetStorageGroupsColumns(visibleEntities); - if (!data.length && visibleEntities !== VISIBLE_ENTITIES.all) { return ( { }); }; -export const getDiskPageStorageColumns: StorageColumnsGetter = (data, options) => { - const disksColumn = options?.useAdvancedStorage - ? getDisksColumn() - : getVDisksColumn(data?.nodes); - - return [ - poolNameColumn, - typeColumn, - erasureColumn, - degradedColumn, - groupIdColumn, - usageColumn, - usedColumn, - disksColumn, - ]; -}; - -const getStorageGroupsColumns: StorageColumnsGetter = (data, options) => { - const disksColumn = options?.useAdvancedStorage - ? getDisksColumn() - : getVDisksColumn(data?.nodes); - - return [ +export const getStorageGroupsColumns: StorageColumnsGetter = (data) => { + const columns = [ poolNameColumn, typeColumn, erasureColumn, @@ -275,36 +252,11 @@ const getStorageGroupsColumns: StorageColumnsGetter = (data, options) => { usedSpaceFlagColumn, readColumn, writeColumn, - disksColumn, + getVDisksColumn(data?.nodes), + getDisksColumn(data?.nodes), ]; -}; - -const filterStorageGroupsColumns = ( - columns: StorageGroupsColumn[], - visibleEntities?: VisibleEntities, -) => { - if (visibleEntities === VISIBLE_ENTITIES.space) { - return columns.filter((col) => col.name !== STORAGE_GROUPS_COLUMNS_IDS.Degraded); - } - - if (visibleEntities === VISIBLE_ENTITIES.missing) { - return columns.filter((col) => col.name !== STORAGE_GROUPS_COLUMNS_IDS.DiskSpace); - } - - return columns.filter((col) => { - return ( - col.name !== STORAGE_GROUPS_COLUMNS_IDS.Degraded && - col.name !== STORAGE_GROUPS_COLUMNS_IDS.DiskSpace - ); - }); -}; - -export const getPreparedStorageGroupsColumns: StorageColumnsGetter = (data, options) => { - const rawColumns = getStorageGroupsColumns(data, options); - - const filteredColumns = filterStorageGroupsColumns(rawColumns, options?.visibleEntities); - return filteredColumns.map((column) => ({ + return columns.map((column) => ({ ...column, sortable: isSortableStorageProperty(column.name), })); diff --git a/src/containers/Storage/StorageGroups/columns/constants.ts b/src/containers/Storage/StorageGroups/columns/constants.ts index 73e38d71cb..2be1c916f3 100644 --- a/src/containers/Storage/StorageGroups/columns/constants.ts +++ b/src/containers/Storage/StorageGroups/columns/constants.ts @@ -3,6 +3,7 @@ import type {ValueOf} from '../../../../types/common'; import i18n from './i18n'; export const STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY = 'storageGroupsColumnsWidth'; +export const STORAGE_GROUPS_SELECTED_COLUMNS_LS_KEY = 'storageGroupsSelectedColumns'; export const STORAGE_GROUPS_COLUMNS_IDS = { PoolName: 'PoolName', @@ -22,6 +23,21 @@ export const STORAGE_GROUPS_COLUMNS_IDS = { type StorageGroupsColumnId = ValueOf; +export const DEFAULT_STORAGE_GROUPS_COLUMNS: StorageGroupsColumnId[] = [ + 'PoolName', + 'MediaType', + 'Erasure', + 'GroupId', + 'Used', + 'Limit', + 'Usage', + 'Read', + 'Write', + 'VDisks', +]; + +export const REQUIRED_STORAGE_GROUPS_COLUMNS: StorageGroupsColumnId[] = ['GroupId']; + // This code is running when module is initialized and correct language may not be set yet // get functions guarantee that i18n fields will be inited on render with current render language export const STORAGE_GROUPS_COLUMNS_TITLES = { diff --git a/src/containers/Storage/StorageGroups/columns/hooks.ts b/src/containers/Storage/StorageGroups/columns/hooks.ts index 9e56af3096..0b3e809dff 100644 --- a/src/containers/Storage/StorageGroups/columns/hooks.ts +++ b/src/containers/Storage/StorageGroups/columns/hooks.ts @@ -1,29 +1,48 @@ import React from 'react'; import {selectNodesMap} from '../../../../store/reducers/nodesList'; +import {VISIBLE_ENTITIES} from '../../../../store/reducers/storage/constants'; import type {VisibleEntities} from '../../../../store/reducers/storage/types'; -import {USE_ADVANCED_STORAGE_KEY} from '../../../../utils/constants'; -import {useSetting, useTypedSelector} from '../../../../utils/hooks'; +import {useTypedSelector} from '../../../../utils/hooks'; +import {useSelectedColumns} from '../../../../utils/hooks/useSelectedColumns'; -import {getDiskPageStorageColumns, getPreparedStorageGroupsColumns} from './columns'; -import type {StorageColumnsGetter} from './types'; +import {getStorageGroupsColumns} from './columns'; +import { + DEFAULT_STORAGE_GROUPS_COLUMNS, + REQUIRED_STORAGE_GROUPS_COLUMNS, + STORAGE_GROUPS_COLUMNS_IDS, + STORAGE_GROUPS_COLUMNS_TITLES, + STORAGE_GROUPS_SELECTED_COLUMNS_LS_KEY, +} from './constants'; -const useGetStorageColumns = ( - columnsGetter: StorageColumnsGetter, - visibleEntities?: VisibleEntities, -) => { - const [useAdvancedStorage] = useSetting(USE_ADVANCED_STORAGE_KEY, false); +export function useGetStorageGroupsColumns() { const nodes = useTypedSelector(selectNodesMap); return React.useMemo(() => { - return columnsGetter({nodes}, {useAdvancedStorage, visibleEntities}); - }, [columnsGetter, nodes, useAdvancedStorage, visibleEntities]); -}; + return getStorageGroupsColumns({nodes}); + }, [nodes]); +} -export const useGetStorageGroupsColumns = (visibleEntities?: VisibleEntities) => { - return useGetStorageColumns(getPreparedStorageGroupsColumns, visibleEntities); -}; +export function useStorageGroupsSelectedColumns(visibleEntities?: VisibleEntities) { + const columns = useGetStorageGroupsColumns(); -export const useGetDiskStorageColumns = () => { - return useGetStorageColumns(getDiskPageStorageColumns); -}; + const requiredColumns = React.useMemo(() => { + if (visibleEntities === VISIBLE_ENTITIES.missing) { + return [...REQUIRED_STORAGE_GROUPS_COLUMNS, STORAGE_GROUPS_COLUMNS_IDS.Degraded]; + } + + if (visibleEntities === VISIBLE_ENTITIES.space) { + return [...REQUIRED_STORAGE_GROUPS_COLUMNS, STORAGE_GROUPS_COLUMNS_IDS.DiskSpace]; + } + + return REQUIRED_STORAGE_GROUPS_COLUMNS; + }, [visibleEntities]); + + return useSelectedColumns( + columns, + STORAGE_GROUPS_SELECTED_COLUMNS_LS_KEY, + STORAGE_GROUPS_COLUMNS_TITLES, + DEFAULT_STORAGE_GROUPS_COLUMNS, + requiredColumns, + ); +} diff --git a/src/containers/Storage/StorageGroups/columns/types.ts b/src/containers/Storage/StorageGroups/columns/types.ts index e47bdd26eb..88beb92d71 100644 --- a/src/containers/Storage/StorageGroups/columns/types.ts +++ b/src/containers/Storage/StorageGroups/columns/types.ts @@ -1,7 +1,7 @@ import type {Column as DataTableColumn} from '@gravity-ui/react-data-table'; import type {Column as PaginatedTableColumn} from '../../../../components/PaginatedTable'; -import type {PreparedStorageGroup, VisibleEntities} from '../../../../store/reducers/storage/types'; +import type {PreparedStorageGroup} from '../../../../store/reducers/storage/types'; import type {NodesMap} from '../../../../types/store/nodesList'; export type StorageGroupsColumn = PaginatedTableColumn & @@ -11,12 +11,4 @@ interface GetStorageColumnsData { nodes?: NodesMap; } -interface GetStorageColumnsOptions { - useAdvancedStorage?: boolean; - visibleEntities?: VisibleEntities; -} - -export type StorageColumnsGetter = ( - data?: GetStorageColumnsData, - options?: GetStorageColumnsOptions, -) => StorageGroupsColumn[]; +export type StorageColumnsGetter = (data?: GetStorageColumnsData) => StorageGroupsColumn[]; diff --git a/src/containers/Storage/StorageNodes/PaginatedStorageNodes.tsx b/src/containers/Storage/StorageNodes/PaginatedStorageNodes.tsx index 2366e5b04e..f29827d417 100644 --- a/src/containers/Storage/StorageNodes/PaginatedStorageNodes.tsx +++ b/src/containers/Storage/StorageNodes/PaginatedStorageNodes.tsx @@ -4,25 +4,23 @@ import type {RenderControls, RenderErrorMessage} from '../../../components/Pagin import {ResizeablePaginatedTable} from '../../../components/PaginatedTable'; import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants'; import type {VisibleEntities} from '../../../store/reducers/storage/types'; -import type {AdditionalNodesProps} from '../../../types/additionalProps'; import {NodesUptimeFilterValues} from '../../../utils/nodes'; import {StorageNodesEmptyDataMessage} from './StorageNodesEmptyDataMessage'; import {STORAGE_NODES_COLUMNS_WIDTH_LS_KEY} from './columns/constants'; -import {useGetStorageNodesColumns} from './columns/hooks'; +import type {StorageNodesColumn} from './columns/types'; import {getStorageNodes} from './getNodes'; import i18n from './i18n'; import {getRowUnavailableClassName} from './shared'; -import './StorageNodes.scss'; - interface PaginatedStorageNodesProps { + columns: StorageNodesColumn[]; + searchValue: string; visibleEntities: VisibleEntities; nodesUptimeFilter: NodesUptimeFilterValues; database?: string; - additionalNodesProps?: AdditionalNodesProps; onShowAll: VoidFunction; parentContainer?: Element | null; @@ -31,11 +29,11 @@ interface PaginatedStorageNodesProps { } export const PaginatedStorageNodes = ({ + columns, searchValue, visibleEntities, nodesUptimeFilter, database, - additionalNodesProps, onShowAll, parentContainer, renderControls, @@ -45,8 +43,6 @@ export const PaginatedStorageNodes = ({ return {searchValue, visibleEntities, nodesUptimeFilter, database}; }, [searchValue, visibleEntities, nodesUptimeFilter, database]); - const columns = useGetStorageNodesColumns({additionalNodesProps, visibleEntities, database}); - const renderEmptyDataMessage = () => { if ( visibleEntities !== VISIBLE_ENTITIES.all || diff --git a/src/containers/Storage/StorageNodes/StorageNodes.tsx b/src/containers/Storage/StorageNodes/StorageNodes.tsx index f81aec1652..14e13395fa 100644 --- a/src/containers/Storage/StorageNodes/StorageNodes.tsx +++ b/src/containers/Storage/StorageNodes/StorageNodes.tsx @@ -3,43 +3,36 @@ import type {Settings, SortOrder} from '@gravity-ui/react-data-table'; import {ResizeableDataTable} from '../../../components/ResizeableDataTable/ResizeableDataTable'; import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants'; import type {PreparedStorageNode, VisibleEntities} from '../../../store/reducers/storage/types'; -import type {AdditionalNodesProps} from '../../../types/additionalProps'; import type {HandleSort} from '../../../utils/hooks/useTableSort'; import {NodesUptimeFilterValues} from '../../../utils/nodes'; import {StorageNodesEmptyDataMessage} from './StorageNodesEmptyDataMessage'; import {STORAGE_NODES_COLUMNS_WIDTH_LS_KEY} from './columns/constants'; -import {useGetStorageNodesColumns} from './columns/hooks'; +import type {StorageNodesColumn} from './columns/types'; import i18n from './i18n'; import {getRowUnavailableClassName} from './shared'; -import './StorageNodes.scss'; - interface StorageNodesProps { data: PreparedStorageNode[]; + columns: StorageNodesColumn[]; tableSettings: Settings; visibleEntities: VisibleEntities; nodesUptimeFilter: NodesUptimeFilterValues; onShowAll?: VoidFunction; - additionalNodesProps?: AdditionalNodesProps; sort?: SortOrder; handleSort?: HandleSort; - database?: string; } export function StorageNodes({ data, + columns, tableSettings, visibleEntities, onShowAll, nodesUptimeFilter, - additionalNodesProps, sort, handleSort, - database, }: StorageNodesProps) { - const columns = useGetStorageNodesColumns({additionalNodesProps, visibleEntities, database}); - if ( !data.length && (visibleEntities !== VISIBLE_ENTITIES.all || diff --git a/src/containers/Storage/StorageNodes/columns/columns.tsx b/src/containers/Storage/StorageNodes/columns/columns.tsx index 50d22e45bb..8d998e6c3c 100644 --- a/src/containers/Storage/StorageNodes/columns/columns.tsx +++ b/src/containers/Storage/StorageNodes/columns/columns.tsx @@ -1,7 +1,6 @@ import DataTable from '@gravity-ui/react-data-table'; import {NodeHostWrapper} from '../../../../components/NodeHostWrapper/NodeHostWrapper'; -import {VISIBLE_ENTITIES} from '../../../../store/reducers/storage/constants'; import type {AdditionalNodesProps} from '../../../../types/additionalProps'; import {cn} from '../../../../utils/cn'; import {EMPTY_DATA_PLACEHOLDER} from '../../../../utils/constants'; @@ -101,7 +100,6 @@ const getStorageNodesColumns = ( export const getPreparedStorageNodesColumns = ({ additionalNodesProps, - visibleEntities, database, }: GetStorageNodesColumnsParams) => { const rawColumns = getStorageNodesColumns(additionalNodesProps, database); @@ -111,9 +109,5 @@ export const getPreparedStorageNodesColumns = ({ sortable: isSortableNodesProperty(column.name), })); - if (visibleEntities !== VISIBLE_ENTITIES.missing) { - return sortableColumns.filter((col) => col.name !== STORAGE_NODES_COLUMNS_IDS.Missing); - } - return sortableColumns; }; diff --git a/src/containers/Storage/StorageNodes/columns/constants.ts b/src/containers/Storage/StorageNodes/columns/constants.ts index df7fdcdd3a..787a62e10c 100644 --- a/src/containers/Storage/StorageNodes/columns/constants.ts +++ b/src/containers/Storage/StorageNodes/columns/constants.ts @@ -3,6 +3,7 @@ import type {ValueOf} from '../../../../types/common'; import i18n from './i18n'; export const STORAGE_NODES_COLUMNS_WIDTH_LS_KEY = 'storageNodesColumnsWidth'; +export const STORAGE_NODES_SELECTED_COLUMNS_LS_KEY = 'storageNodesSelectedColumns'; export const STORAGE_NODES_COLUMNS_IDS = { NodeId: 'NodeId', @@ -16,6 +17,16 @@ export const STORAGE_NODES_COLUMNS_IDS = { type StorageNodesColumnId = ValueOf; +export const DEFAULT_STORAGE_NODES_COLUMNS: StorageNodesColumnId[] = [ + 'NodeId', + 'Host', + 'DC', + 'Rack', + 'Uptime', + 'PDisks', +]; +export const REQUIRED_STORAGE_NODES_COLUMNS: StorageNodesColumnId[] = ['NodeId']; + // This code is running when module is initialized and correct language may not be set yet // get functions guarantee that i18n fields will be inited on render with current render language export const STORAGE_NODES_COLUMNS_TITLES = { diff --git a/src/containers/Storage/StorageNodes/columns/hooks.ts b/src/containers/Storage/StorageNodes/columns/hooks.ts index 8c192fb298..419f4d94df 100644 --- a/src/containers/Storage/StorageNodes/columns/hooks.ts +++ b/src/containers/Storage/StorageNodes/columns/hooks.ts @@ -1,10 +1,39 @@ import React from 'react'; +import {VISIBLE_ENTITIES} from '../../../../store/reducers/storage/constants'; +import {useSelectedColumns} from '../../../../utils/hooks/useSelectedColumns'; + import {getPreparedStorageNodesColumns} from './columns'; +import { + DEFAULT_STORAGE_NODES_COLUMNS, + REQUIRED_STORAGE_NODES_COLUMNS, + STORAGE_NODES_COLUMNS_IDS, + STORAGE_NODES_COLUMNS_TITLES, + STORAGE_NODES_SELECTED_COLUMNS_LS_KEY, +} from './constants'; import type {GetStorageNodesColumnsParams} from './types'; -export const useGetStorageNodesColumns = (params: GetStorageNodesColumnsParams) => { - return React.useMemo(() => { - return getPreparedStorageNodesColumns(params); - }, [params]); -}; +export function useStorageNodesSelectedColumns({ + visibleEntities, + database, + additionalNodesProps, +}: GetStorageNodesColumnsParams) { + const columns = React.useMemo(() => { + return getPreparedStorageNodesColumns({database, additionalNodesProps}); + }, [database, additionalNodesProps]); + + const requiredColumns = React.useMemo(() => { + if (visibleEntities === VISIBLE_ENTITIES.missing) { + return [...REQUIRED_STORAGE_NODES_COLUMNS, STORAGE_NODES_COLUMNS_IDS.Missing]; + } + return REQUIRED_STORAGE_NODES_COLUMNS; + }, [visibleEntities]); + + return useSelectedColumns( + columns, + STORAGE_NODES_SELECTED_COLUMNS_LS_KEY, + STORAGE_NODES_COLUMNS_TITLES, + DEFAULT_STORAGE_NODES_COLUMNS, + requiredColumns, + ); +} diff --git a/src/containers/Storage/StorageWrapper.tsx b/src/containers/Storage/StorageWrapper.tsx index 15cd05c695..d2c64aa32b 100644 --- a/src/containers/Storage/StorageWrapper.tsx +++ b/src/containers/Storage/StorageWrapper.tsx @@ -1,4 +1,3 @@ -import type {AdditionalNodesProps} from '../../types/additionalProps'; import {USE_PAGINATED_TABLES_KEY} from '../../utils/constants'; import {useSetting} from '../../utils/hooks'; @@ -9,7 +8,6 @@ interface StorageWrapperProps { database?: string; nodeId?: string; parentContainer?: Element | null; - additionalNodesProps?: AdditionalNodesProps; } export const StorageWrapper = ({parentContainer, ...props}: StorageWrapperProps) => { diff --git a/src/containers/StorageGroupPage/StorageGroupPage.scss b/src/containers/StorageGroupPage/StorageGroupPage.scss index e82656ff41..34d6c80e08 100644 --- a/src/containers/StorageGroupPage/StorageGroupPage.scss +++ b/src/containers/StorageGroupPage/StorageGroupPage.scss @@ -6,35 +6,32 @@ overflow: auto; height: 100%; + padding: 0 20px; - &__info-content { + &__meta, + &__title, + &__info, + &__storage-title { position: sticky; left: 0; - display: flex; - flex-direction: column; - gap: 20px; + margin-bottom: 20px; + } - padding: 20px; + &__meta { + margin-top: 20px; } - &__tabs-content { - padding-left: 20px; + &__title { + margin-bottom: 60px; } - &__meta, - &__title, - &__info, - &__tabs { - position: sticky; - left: 0; + &__storage-title { + margin-bottom: 0; + @include header-1-typography(); } &__info { margin-top: var(--g-spacing-10); } - - &__tabs { - @include tabs-wrapper-styles(); - } } diff --git a/src/containers/StorageGroupPage/StorageGroupPage.tsx b/src/containers/StorageGroupPage/StorageGroupPage.tsx index a49fd14002..14ff38806e 100644 --- a/src/containers/StorageGroupPage/StorageGroupPage.tsx +++ b/src/containers/StorageGroupPage/StorageGroupPage.tsx @@ -1,63 +1,36 @@ import React from 'react'; -import {Tabs} from '@gravity-ui/uikit'; import {skipToken} from '@reduxjs/toolkit/query'; import {Helmet} from 'react-helmet-async'; import {StringParam, useQueryParams} from 'use-query-params'; -import {z} from 'zod'; import {EntityPageTitle} from '../../components/EntityPageTitle/EntityPageTitle'; import {ResponseError} from '../../components/Errors/ResponseError'; import {InfoViewerSkeleton} from '../../components/InfoViewerSkeleton/InfoViewerSkeleton'; -import {InternalLink} from '../../components/InternalLink'; import {PageMetaWithAutorefresh} from '../../components/PageMeta/PageMeta'; import {StorageGroupInfo} from '../../components/StorageGroupInfo/StorageGroupInfo'; -import {getStorageGroupPath} from '../../routes'; -import {useStorageGroupsHandlerAvailable} from '../../store/reducers/capabilities/hooks'; +import { + useCapabilitiesLoaded, + useStorageGroupsHandlerAvailable, +} from '../../store/reducers/capabilities/hooks'; import {setHeaderBreadcrumbs} from '../../store/reducers/header/header'; -import {STORAGE_TYPES} from '../../store/reducers/storage/constants'; import {storageApi} from '../../store/reducers/storage/storage'; import {EFlag} from '../../types/api/enums'; import {valueIsDefined} from '../../utils'; import {cn} from '../../utils/cn'; -import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants'; import {useAutoRefreshInterval, useTypedDispatch} from '../../utils/hooks'; -import {NodesUptimeFilterValues} from '../../utils/nodes'; -import {StorageGroups} from '../Storage/StorageGroups/StorageGroups'; -import {StorageNodes} from '../Storage/StorageNodes/StorageNodes'; +import {Storage} from '../Storage/Storage'; import {storageGroupPageKeyset} from './i18n'; import './StorageGroupPage.scss'; -const STORAGE_GROUP_PAGE_TABS = [ - { - id: STORAGE_TYPES.groups, - get title() { - return storageGroupPageKeyset('group'); - }, - }, - { - id: STORAGE_TYPES.nodes, - get title() { - return storageGroupPageKeyset('nodes'); - }, - }, -]; - const storageGroupPageCn = cn('ydb-storage-group-page'); -const storageGroupTabSchema = z.nativeEnum(STORAGE_TYPES).catch(STORAGE_TYPES.groups); - export function StorageGroupPage() { const dispatch = useTypedDispatch(); - const [{groupId, activeTab}] = useQueryParams({ - groupId: StringParam, - activeTab: StringParam, - }); - - const storageGroupTab = storageGroupTabSchema.parse(activeTab); + const [{groupId}] = useQueryParams({groupId: StringParam}); React.useEffect(() => { dispatch(setHeaderBreadcrumbs('storageGroup', {groupId})); @@ -65,22 +38,16 @@ export function StorageGroupPage() { const [autoRefreshInterval] = useAutoRefreshInterval(); const shouldUseGroupsHandler = useStorageGroupsHandlerAvailable(); + const capabilitiesLoaded = useCapabilitiesLoaded(); const groupQuery = storageApi.useGetStorageGroupsInfoQuery( - valueIsDefined(groupId) ? {groupId, shouldUseGroupsHandler} : skipToken, - { - pollingInterval: autoRefreshInterval, - }, - ); - - const nodesQuery = storageApi.useGetStorageNodesInfoQuery( - groupId && storageGroupTab === STORAGE_TYPES.nodes ? {group_id: groupId} : skipToken, + valueIsDefined(groupId) ? {groupId, shouldUseGroupsHandler, with: 'all'} : skipToken, { pollingInterval: autoRefreshInterval, + skip: !capabilitiesLoaded, }, ); const storageGroupData = groupQuery.data?.groups?.[0]; - const nodesData = nodesQuery.data?.nodes; const loading = groupQuery.isFetching && storageGroupData === undefined; @@ -131,73 +98,35 @@ export function StorageGroupPage() { return ; }; - const renderTabs = () => { + const renderStorage = () => { + if (!groupId) { + return null; + } return ( -
- { - const path = groupId - ? getStorageGroupPath(groupId, {activeTab: id}) - : undefined; - - return ( - - {tabNode} - - ); - }} - /> -
+ +
+ {storageGroupPageKeyset('storage')} +
+ +
); }; - const renderTabsContent = () => { - switch (storageGroupTab) { - case 'groups': { - return storageGroupData ? ( - - ) : null; - } - case 'nodes': { - return nodesData ? ( - - ) : null; - } - default: - return null; - } - }; - const renderError = () => { - if (!groupQuery.error && !nodesQuery.error) { + if (!groupQuery.error) { return null; } - return ; + return ; }; return (
-
- {renderHelmet()} - {renderPageMeta()} - {renderPageTitle()} - {renderError()} - {renderInfo()} - {renderTabs()} -
-
{renderTabsContent()}
+ {renderHelmet()} + {renderPageMeta()} + {renderPageTitle()} + {renderError()} + {renderInfo()} + {renderStorage()}
); } diff --git a/src/containers/StorageGroupPage/i18n/en.json b/src/containers/StorageGroupPage/i18n/en.json index 3f35d8fd35..52fd154719 100644 --- a/src/containers/StorageGroupPage/i18n/en.json +++ b/src/containers/StorageGroupPage/i18n/en.json @@ -1,6 +1,5 @@ { "storage-group": "Storage Group", - "group": "Group", - "nodes": "Nodes", + "storage": "Storage", "pool-name": "Pool Name" } diff --git a/src/containers/UserSettings/i18n/en.json b/src/containers/UserSettings/i18n/en.json index 4ebd8d4f9b..775a1c660b 100644 --- a/src/containers/UserSettings/i18n/en.json +++ b/src/containers/UserSettings/i18n/en.json @@ -30,9 +30,6 @@ "settings.invertedDisks.title": "Inverted disks space indicators", - "settings.useAdvancedStorage.title": "Use advanced storage", - "settings.useAdvancedStorage.description": "Display additional data in Storage table", - "settings.usePaginatedTables.title": "Use paginated tables", "settings.usePaginatedTables.description": " Use table with data load on scroll for Nodes and Storage tabs. It will increase performance, but could work unstable", diff --git a/src/containers/UserSettings/settings.tsx b/src/containers/UserSettings/settings.tsx index ce8ed90a8e..d110827af5 100644 --- a/src/containers/UserSettings/settings.tsx +++ b/src/containers/UserSettings/settings.tsx @@ -11,7 +11,6 @@ import { QUERY_USE_MULTI_SCHEMA_KEY, SHOW_DOMAIN_DATABASE_KEY, THEME_KEY, - USE_ADVANCED_STORAGE_KEY, USE_CLUSTER_BALANCER_AS_BACKEND_KEY, USE_PAGINATED_TABLES_KEY, } from '../../utils/constants'; @@ -90,11 +89,6 @@ export const invertedDisksSetting: SettingProps = { settingKey: INVERTED_DISKS_KEY, title: i18n('settings.invertedDisks.title'), }; -export const useAdvancedStorageSetting: SettingProps = { - settingKey: USE_ADVANCED_STORAGE_KEY, - title: i18n('settings.useAdvancedStorage.title'), - description: i18n('settings.useAdvancedStorage.description'), -}; export const usePaginatedTables: SettingProps = { settingKey: USE_PAGINATED_TABLES_KEY, title: i18n('settings.usePaginatedTables.title'), @@ -149,7 +143,7 @@ export const appearanceSection: SettingsSection = { export const experimentsSection: SettingsSection = { id: 'experimentsSection', title: i18n('section.experiments'), - settings: [useAdvancedStorageSetting, usePaginatedTables, queryUseMultiSchemaSetting], + settings: [usePaginatedTables, queryUseMultiSchemaSetting], }; export const devSettingsSection: SettingsSection = { id: 'devSettingsSection', diff --git a/src/containers/VDiskPage/VDiskPage.scss b/src/containers/VDiskPage/VDiskPage.scss index 376ccdad9d..fba6f02b72 100644 --- a/src/containers/VDiskPage/VDiskPage.scss +++ b/src/containers/VDiskPage/VDiskPage.scss @@ -3,21 +3,24 @@ .ydb-vdisk-page { position: relative; - display: flex; overflow: auto; - flex-direction: column; - gap: 20px; height: 100%; - padding: 20px; + padding: 0 20px; &__meta, &__title, &__controls, &__info, - &__group-title { + &__storage-title { position: sticky; left: 0; + + margin-bottom: 20px; + } + + &__meta { + margin-top: 20px; } &__controls { @@ -26,20 +29,8 @@ gap: var(--g-spacing-2); } - &__group-title { + &__storage-title { + margin-bottom: 0; @include header-1-typography(); } - - &__group-disks { - display: flex; - flex-grow: 1; - flex-flow: row wrap; - gap: 10px; - - margin-top: 20px; - } - - &__group-disk { - width: 150px; - } } diff --git a/src/containers/VDiskPage/VDiskPage.tsx b/src/containers/VDiskPage/VDiskPage.tsx index 9142c99d8f..04e6ad41e3 100644 --- a/src/containers/VDiskPage/VDiskPage.tsx +++ b/src/containers/VDiskPage/VDiskPage.tsx @@ -11,28 +11,19 @@ import {EntityPageTitle} from '../../components/EntityPageTitle/EntityPageTitle' import {ResponseError} from '../../components/Errors/ResponseError'; import {InfoViewerSkeleton} from '../../components/InfoViewerSkeleton/InfoViewerSkeleton'; import {PageMetaWithAutorefresh} from '../../components/PageMeta/PageMeta'; -import {ResizeableDataTable} from '../../components/ResizeableDataTable/ResizeableDataTable'; import {VDiskInfo} from '../../components/VDiskInfo/VDiskInfo'; import {api} from '../../store/reducers/api'; import {selectIsUserAllowedToMakeChanges} from '../../store/reducers/authentication/authentication'; -import { - useCapabilitiesLoaded, - useStorageGroupsHandlerAvailable, -} from '../../store/reducers/capabilities/hooks'; import {setHeaderBreadcrumbs} from '../../store/reducers/header/header'; -import {storageApi} from '../../store/reducers/storage/storage'; import {vDiskApi} from '../../store/reducers/vdisk/vdisk'; import {valueIsDefined} from '../../utils'; import {cn} from '../../utils/cn'; -import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants'; import {stringifyVdiskId} from '../../utils/dataFormatters/dataFormatters'; import {getSeverityColor, getVDiskSlotBasedId} from '../../utils/disks/helpers'; import {useAutoRefreshInterval, useTypedDispatch, useTypedSelector} from '../../utils/hooks'; -import {STORAGE_GROUPS_COLUMNS_WIDTH_LS_KEY} from '../Storage/StorageGroups/columns/constants'; -import {useGetDiskStorageColumns} from '../Storage/StorageGroups/columns/hooks'; +import {Storage} from '../Storage/Storage'; import {vDiskPageKeyset} from './i18n'; -import {prepareVDiskGroupResponse} from './utils'; import './VDiskPage.scss'; @@ -182,9 +173,14 @@ export function VDiskPage() { return ; }; - const renderGroupInfo = () => { - if (valueIsDefined(GroupID)) { - return ; + const renderStorageInfo = () => { + if (valueIsDefined(GroupID) && valueIsDefined(nodeId)) { + return ( + +
{vDiskPageKeyset('storage')}
+ +
+ ); } return null; @@ -199,7 +195,7 @@ export function VDiskPage() { {error ? : null} {renderInfo()} - {renderGroupInfo()} + {renderStorageInfo()} ); }; @@ -214,41 +210,3 @@ export function VDiskPage() { ); } - -export function VDiskGroup({groupId}: {groupId: string | number}) { - const capabilitiesLoaded = useCapabilitiesLoaded(); - const groupsHandlerAvailable = useStorageGroupsHandlerAvailable(); - const [autoRefreshInterval] = useAutoRefreshInterval(); - - const {currentData} = storageApi.useGetStorageGroupsInfoQuery( - {groupId, shouldUseGroupsHandler: groupsHandlerAvailable}, - { - pollingInterval: autoRefreshInterval, - skip: !capabilitiesLoaded, - }, - ); - - const preparedGroups = React.useMemo(() => { - const group = prepareVDiskGroupResponse(currentData, groupId); - - return group ? [group] : undefined; - }, [currentData, groupId]); - - const vDiskStorageColumns = useGetDiskStorageColumns(); - - if (!preparedGroups) { - return null; - } - - return ( - -
{vDiskPageKeyset('group')}
- -
- ); -} diff --git a/src/containers/VDiskPage/i18n/en.json b/src/containers/VDiskPage/i18n/en.json index b88fbba322..fe10fe8f47 100644 --- a/src/containers/VDiskPage/i18n/en.json +++ b/src/containers/VDiskPage/i18n/en.json @@ -3,7 +3,7 @@ "node": "Node", "pdisk": "PDisk", "vdisk": "VDisk", - "group": "Group", + "storage": "Storage", "evict-vdisk-button": "Evict VDisk", "force-evict-vdisk-button": "Evict anyway", diff --git a/src/containers/VDiskPage/utils.ts b/src/containers/VDiskPage/utils.ts deleted file mode 100644 index 0db218a8f6..0000000000 --- a/src/containers/VDiskPage/utils.ts +++ /dev/null @@ -1,10 +0,0 @@ -import type {PreparedStorageResponse} from '../../store/reducers/storage/types'; - -export function prepareVDiskGroupResponse( - data?: PreparedStorageResponse, - groupId?: string | number, -) { - return data?.groups?.find((group) => { - return Number(group.GroupId) === Number(groupId); - }); -} diff --git a/src/services/settings.ts b/src/services/settings.ts index 2221004156..db276e4fcf 100644 --- a/src/services/settings.ts +++ b/src/services/settings.ts @@ -18,7 +18,6 @@ import { SHOW_DOMAIN_DATABASE_KEY, TENANT_INITIAL_PAGE_KEY, THEME_KEY, - USE_ADVANCED_STORAGE_KEY, USE_CLUSTER_BALANCER_AS_BACKEND_KEY, USE_PAGINATED_TABLES_KEY, } from '../utils/constants'; @@ -32,7 +31,6 @@ export const DEFAULT_USER_SETTINGS = { [THEME_KEY]: 'system', [LANGUAGE_KEY]: undefined, [INVERTED_DISKS_KEY]: false, - [USE_ADVANCED_STORAGE_KEY]: false, [QUERY_USE_MULTI_SCHEMA_KEY]: true, [BINARY_DATA_IN_PLAIN_TEXT_DISPLAY]: true, [SAVED_QUERIES_KEY]: [], diff --git a/src/utils/constants.ts b/src/utils/constants.ts index a5dc07c150..6c4df62041 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -149,5 +149,3 @@ export const AUTOCOMPLETE_ON_ENTER = 'autocompleteOnEnter'; export const IS_HOTKEYS_HELP_HIDDEN_KEY = 'isHotKeysHelpHidden'; export const DEV_ENABLE_TRACING_FOR_ALL_REQUESTS = 'enable_tracing_for_all_requests'; - -export const USE_ADVANCED_STORAGE_KEY = 'use_advanced_storage';