feat: how vdisks of selected group in a special color

Author: astandrik

src/components/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -35,6 +35,10 @@
         background-color: unset;
     }
 
+    &#{&}_compact#{&}_faded {
+        opacity: 0.5;
+    }
+
     &_empty {
         color: var(--g-color-text-hint);
         border-style: dashed;

src/components/VDisk/VDisk.tsx

@@ -21,6 +21,7 @@ export interface VDiskProps {
     data?: PreparedVDisk;
     nodes?: NodesMap;
     compact?: boolean;
+    faded?: boolean;
     showPopup?: boolean;
     onShowPopup?: VoidFunction;
     onHidePopup?: VoidFunction;
@@ -31,6 +32,7 @@ export const VDisk = ({
     data = {},
     nodes,
     compact,
+    faded,
     showPopup,
     onShowPopup,
     onHidePopup,
@@ -87,6 +89,7 @@ export const VDisk = ({
                         diskAllocatedPercent={data.AllocatedPercent}
                         severity={data.Severity}
                         compact={compact}
+                        faded={faded}
                         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,12 +18,13 @@ const b = cn('pdisk-storage');
 
 interface PDiskProps {
     data?: PreparedPDisk;
-    vDisks?: TVDiskStateInfo[];
+    vDisks?: PreparedVDisk[];
     showPopup?: boolean;
     onShowPopup?: VoidFunction;
     onHidePopup?: VoidFunction;
     className?: string;
     progressBarClassName?: string;
+    groupId?: string;
 }
 
 export const PDisk = ({
@@ -35,6 +35,7 @@ export const PDisk = ({
     onHidePopup,
     className,
     progressBarClassName,
+    groupId,
 }: PDiskProps) => {
     const [isPopupVisible, setIsPopupVisible] = React.useState(false);
 
@@ -75,8 +76,11 @@ export const PDisk = ({
                         >
                             <VDiskWithDonorsStack
                                 data={vdisk}
-                                compact={true}
+                                faded={
+                                    groupId ? groupId !== vdisk.VDiskId?.GroupID?.toString() : false
+                                }
                                 stackClassName={b('donors-stack')}
+                                compact
                             />
                         </div>
                     );

src/containers/Storage/StorageNodes/columns/columns.tsx

@@ -20,6 +20,7 @@ const getStorageNodesColumns = (
     database?: string,
 ) => {
     const getNodeRef = additionalNodesProps?.getNodeRef;
+    const groupId = additionalNodesProps?.groupId;
 
     const columns: StorageNodesColumn[] = [
         {
@@ -82,7 +83,7 @@ const getStorageNodesColumns = (
 
                             return (
                                 <div className={b('pdisks-item')} key={pDisk.PDiskId}>
-                                    <PDisk data={pDisk} vDisks={vDisks} />
+                                    <PDisk data={pDisk} vDisks={vDisks} groupId={groupId} />
                                 </div>
                             );
                         })}

src/containers/StorageGroupPage/StorageGroupPage.tsx

@@ -172,6 +172,7 @@ export function StorageGroupPage() {
                         tableSettings={DEFAULT_TABLE_SETTINGS}
                         visibleEntities="all"
                         nodesUptimeFilter={NodesUptimeFilterValues.All}
+                        additionalNodesProps={{groupId: groupId || undefined}}
                     />
                 ) : null;
             }

src/types/additionalProps.ts

@@ -28,5 +28,6 @@ export type NodeAddress = Pick<TSystemStateInfo, 'Host' | 'Endpoints' | 'NodeId'
 export type GetNodeRefFunc = (node?: NodeAddress) => string | null;
 
 export interface AdditionalNodesProps extends Record<string, unknown> {
+    groupId?: string;
     getNodeRef?: GetNodeRefFunc;
 }