-
- {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 (