diff --git a/src/components/DiskStateProgressBar/DiskStateProgressBar.scss b/src/components/DiskStateProgressBar/DiskStateProgressBar.scss index cdb2a2074e..bb3ae13ab4 100644 --- a/src/components/DiskStateProgressBar/DiskStateProgressBar.scss +++ b/src/components/DiskStateProgressBar/DiskStateProgressBar.scss @@ -35,6 +35,10 @@ background-color: unset; } + &_inactive { + opacity: 0.5; + } + &_empty { color: var(--g-color-text-hint); border-style: dashed; diff --git a/src/components/DiskStateProgressBar/DiskStateProgressBar.tsx b/src/components/DiskStateProgressBar/DiskStateProgressBar.tsx index d7c47283db..9ffccb66b2 100644 --- a/src/components/DiskStateProgressBar/DiskStateProgressBar.tsx +++ b/src/components/DiskStateProgressBar/DiskStateProgressBar.tsx @@ -14,6 +14,7 @@ interface DiskStateProgressBarProps { severity?: number; compact?: boolean; faded?: boolean; + inactive?: boolean; empty?: boolean; content?: React.ReactNode; className?: string; @@ -24,13 +25,14 @@ export function DiskStateProgressBar({ severity, compact, faded, + inactive, empty, content, className, }: DiskStateProgressBarProps) { const [inverted] = useSetting(INVERTED_DISKS_KEY); - const mods: Record = {inverted, compact, faded, empty}; + const mods: Record = {inverted, compact, faded, empty, inactive}; const color = severity !== undefined && getSeverityColor(severity); if (color) { diff --git a/src/components/VDisk/VDisk.tsx b/src/components/VDisk/VDisk.tsx index fce2d399ce..25ca543966 100644 --- a/src/components/VDisk/VDisk.tsx +++ b/src/components/VDisk/VDisk.tsx @@ -21,6 +21,7 @@ export interface VDiskProps { data?: PreparedVDisk; nodes?: NodesMap; compact?: boolean; + inactive?: boolean; showPopup?: boolean; onShowPopup?: VoidFunction; onHidePopup?: VoidFunction; @@ -31,6 +32,7 @@ export const VDisk = ({ data = {}, nodes, compact, + inactive, showPopup, onShowPopup, onHidePopup, @@ -87,6 +89,7 @@ export const VDisk = ({ diskAllocatedPercent={data.AllocatedPercent} severity={data.Severity} compact={compact} + inactive={inactive} className={progressBarClassName} /> diff --git a/src/containers/Storage/PDisk/PDisk.tsx b/src/containers/Storage/PDisk/PDisk.tsx index eb02b2fde5..1d34d7e15c 100644 --- a/src/containers/Storage/PDisk/PDisk.tsx +++ b/src/containers/Storage/PDisk/PDisk.tsx @@ -6,11 +6,10 @@ import {PDiskPopup} from '../../../components/PDiskPopup/PDiskPopup'; import {VDiskWithDonorsStack} from '../../../components/VDisk/VDiskWithDonorsStack'; import routes, {createHref, getPDiskPagePath} from '../../../routes'; import {useDiskPagesAvailable} from '../../../store/reducers/capabilities/hooks'; -import type {TVDiskStateInfo} from '../../../types/api/vdisk'; import {valueIsDefined} from '../../../utils'; import {cn} from '../../../utils/cn'; import {stringifyVdiskId} from '../../../utils/dataFormatters/dataFormatters'; -import type {PreparedPDisk} from '../../../utils/disks/types'; +import type {PreparedPDisk, PreparedVDisk} from '../../../utils/disks/types'; import {STRUCTURE} from '../../Node/NodePages'; import './PDisk.scss'; @@ -19,7 +18,8 @@ const b = cn('pdisk-storage'); interface PDiskProps { data?: PreparedPDisk; - vDisks?: TVDiskStateInfo[]; + vDisks?: PreparedVDisk[]; + inactiveVdisks?: PreparedVDisk[]; showPopup?: boolean; onShowPopup?: VoidFunction; onHidePopup?: VoidFunction; @@ -30,6 +30,7 @@ interface PDiskProps { export const PDisk = ({ data = {}, vDisks, + inactiveVdisks, showPopup, onShowPopup, onHidePopup, @@ -75,8 +76,9 @@ export const PDisk = ({ > ); diff --git a/src/containers/Storage/PaginatedStorage.tsx b/src/containers/Storage/PaginatedStorage.tsx index 1034cfa7d4..b41708a282 100644 --- a/src/containers/Storage/PaginatedStorage.tsx +++ b/src/containers/Storage/PaginatedStorage.tsx @@ -19,10 +19,16 @@ import {useStorageNodesSelectedColumns} from './StorageNodes/columns/hooks'; interface PaginatedStorageProps { database?: string; nodeId?: string; + groupId?: string; parentContainer?: Element | null; } -export const PaginatedStorage = ({database, nodeId, parentContainer}: PaginatedStorageProps) => { +export const PaginatedStorage = ({ + database, + nodeId, + groupId, + parentContainer, +}: PaginatedStorageProps) => { const {balancer} = useClusterBaseInfo(); const {additionalNodesProps} = useAdditionalNodeProps({balancer}); @@ -48,6 +54,7 @@ export const PaginatedStorage = ({database, nodeId, parentContainer}: PaginatedS additionalNodesProps, visibleEntities, database, + groupId, }); const { diff --git a/src/containers/Storage/Storage.tsx b/src/containers/Storage/Storage.tsx index b901221fdb..8a27a50f2f 100644 --- a/src/containers/Storage/Storage.tsx +++ b/src/containers/Storage/Storage.tsx @@ -109,6 +109,7 @@ export const Storage = ({database, nodeId, groupId, pDiskId}: StorageProps) => { additionalNodesProps, visibleEntities, database, + groupId: groupId?.toString(), }); const { diff --git a/src/containers/Storage/StorageNodes/StorageNodes.tsx b/src/containers/Storage/StorageNodes/StorageNodes.tsx index 14e13395fa..e70670848e 100644 --- a/src/containers/Storage/StorageNodes/StorageNodes.tsx +++ b/src/containers/Storage/StorageNodes/StorageNodes.tsx @@ -18,8 +18,8 @@ interface StorageNodesProps { tableSettings: Settings; visibleEntities: VisibleEntities; nodesUptimeFilter: NodesUptimeFilterValues; - onShowAll?: VoidFunction; sort?: SortOrder; + onShowAll?: VoidFunction; handleSort?: HandleSort; } @@ -28,9 +28,9 @@ export function StorageNodes({ columns, tableSettings, visibleEntities, - onShowAll, nodesUptimeFilter, sort, + onShowAll, handleSort, }: StorageNodesProps) { if ( diff --git a/src/containers/Storage/StorageNodes/columns/columns.tsx b/src/containers/Storage/StorageNodes/columns/columns.tsx index 8d998e6c3c..49ae2e9fa1 100644 --- a/src/containers/Storage/StorageNodes/columns/columns.tsx +++ b/src/containers/Storage/StorageNodes/columns/columns.tsx @@ -17,6 +17,7 @@ const b = cn('ydb-storage-nodes-columns'); const getStorageNodesColumns = ( additionalNodesProps: AdditionalNodesProps | undefined, database?: string, + groupId?: string, ) => { const getNodeRef = additionalNodesProps?.getNodeRef; @@ -79,9 +80,17 @@ const getStorageNodesColumns = ( (vdisk) => vdisk.PDiskId === pDisk.PDiskId, ); + const inactiveVdisks = vDisks?.filter( + (vdisk) => groupId && vdisk.VDiskId?.GroupID !== Number(groupId), + ); + return (
- +
); })} @@ -101,8 +110,9 @@ const getStorageNodesColumns = ( export const getPreparedStorageNodesColumns = ({ additionalNodesProps, database, + groupId, }: GetStorageNodesColumnsParams) => { - const rawColumns = getStorageNodesColumns(additionalNodesProps, database); + const rawColumns = getStorageNodesColumns(additionalNodesProps, database, groupId); const sortableColumns = rawColumns.map((column) => ({ ...column, diff --git a/src/containers/Storage/StorageNodes/columns/hooks.ts b/src/containers/Storage/StorageNodes/columns/hooks.ts index 419f4d94df..0e09430461 100644 --- a/src/containers/Storage/StorageNodes/columns/hooks.ts +++ b/src/containers/Storage/StorageNodes/columns/hooks.ts @@ -17,10 +17,11 @@ export function useStorageNodesSelectedColumns({ visibleEntities, database, additionalNodesProps, + groupId, }: GetStorageNodesColumnsParams) { const columns = React.useMemo(() => { - return getPreparedStorageNodesColumns({database, additionalNodesProps}); - }, [database, additionalNodesProps]); + return getPreparedStorageNodesColumns({database, additionalNodesProps, groupId}); + }, [database, additionalNodesProps, groupId]); const requiredColumns = React.useMemo(() => { if (visibleEntities === VISIBLE_ENTITIES.missing) { diff --git a/src/containers/Storage/StorageNodes/columns/types.ts b/src/containers/Storage/StorageNodes/columns/types.ts index 25dc6408a6..5db463c2c3 100644 --- a/src/containers/Storage/StorageNodes/columns/types.ts +++ b/src/containers/Storage/StorageNodes/columns/types.ts @@ -11,4 +11,5 @@ export interface GetStorageNodesColumnsParams { additionalNodesProps: AdditionalNodesProps | undefined; visibleEntities?: VisibleEntities; database?: string; + groupId?: string; }