feat: show vdisks of selected group in a special color (#1336)

Author: astandrik

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;

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<boolean | undefined>(INVERTED_DISKS_KEY);
 
-    const mods: Record<string, boolean | undefined> = {inverted, compact, faded, empty};
+    const mods: Record<string, boolean | undefined> = {inverted, compact, faded, empty, inactive};
 
     const color = severity !== undefined && getSeverityColor(severity);
     if (color) {

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}
                     />
                 </InternalLink>

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 = ({
                         >
                             <VDiskWithDonorsStack
                                 data={vdisk}
-                                compact={true}
+                                inactive={inactiveVdisks?.includes(vdisk)}
                                 stackClassName={b('donors-stack')}
+                                compact
                             />
                         </div>
                     );

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 {

src/containers/Storage/Storage.tsx

@@ -109,6 +109,7 @@ export const Storage = ({database, nodeId, groupId, pDiskId}: StorageProps) => {
         additionalNodesProps,
         visibleEntities,
         database,
+        groupId: groupId?.toString(),
     });
 
     const {

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 (

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 (
                                 <div className={b('pdisks-item')} key={pDisk.PDiskId}>
-                                    <PDisk data={pDisk} vDisks={vDisks} />
+                                    <PDisk
+                                        data={pDisk}
+                                        vDisks={vDisks}
+                                        inactiveVdisks={inactiveVdisks}
+                                    />
                                 </div>
                             );
                         })}
@@ -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,

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

src/containers/Storage/StorageNodes/columns/types.ts

@@ -11,4 +11,5 @@ export interface GetStorageNodesColumnsParams {
     additionalNodesProps: AdditionalNodesProps | undefined;
     visibleEntities?: VisibleEntities;
     database?: string;
+    groupId?: string;
 }