fix: merge fixes

Author: astandrik

src/components/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -35,7 +35,7 @@
         background-color: unset;
     }
 
-    &#{&}_compact#{&}_faded {
+    &_inactive {
         opacity: 0.5;
     }
 

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;
     faded?: boolean;
     showPopup?: boolean;
     onShowPopup?: VoidFunction;
@@ -32,6 +33,7 @@ export const VDisk = ({
     data = {},
     nodes,
     compact,
+    inactive,
     faded,
     showPopup,
     onShowPopup,
@@ -90,6 +92,7 @@ export const VDisk = ({
                         severity={data.Severity}
                         compact={compact}
                         faded={faded}
+                        inactive={inactive}
                         className={progressBarClassName}
                     />
                 </InternalLink>

src/containers/Storage/PDisk/PDisk.tsx

@@ -19,23 +19,23 @@ const b = cn('pdisk-storage');
 interface PDiskProps {
     data?: PreparedPDisk;
     vDisks?: PreparedVDisk[];
+    inactiveVdisks?: PreparedVDisk[];
     showPopup?: boolean;
     onShowPopup?: VoidFunction;
     onHidePopup?: VoidFunction;
     className?: string;
     progressBarClassName?: string;
-    groupId?: string;
 }
 
 export const PDisk = ({
     data = {},
     vDisks,
+    inactiveVdisks,
     showPopup,
     onShowPopup,
     onHidePopup,
     className,
     progressBarClassName,
-    groupId,
 }: PDiskProps) => {
     const [isPopupVisible, setIsPopupVisible] = React.useState(false);
 
@@ -76,9 +76,7 @@ export const PDisk = ({
                         >
                             <VDiskWithDonorsStack
                                 data={vdisk}
-                                faded={
-                                    groupId ? groupId !== vdisk.VDiskId?.GroupID?.toString() : false
-                                }
+                                inactive={inactiveVdisks?.includes(vdisk)}
                                 stackClassName={b('donors-stack')}
                                 compact
                             />

src/containers/Storage/PaginatedStorage.tsx

@@ -19,7 +19,7 @@ import {useStorageNodesSelectedColumns} from './StorageNodes/columns/hooks';
 interface PaginatedStorageProps {
     database?: string;
     nodeId?: string;
-    groupId: string;
+    groupId?: string;
     parentContainer?: Element | null;
 }
 
@@ -54,6 +54,7 @@ export const PaginatedStorage = ({
         additionalNodesProps,
         visibleEntities,
         database,
+        groupId,
     });
 
     const {

src/containers/Storage/Storage.tsx

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

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

@@ -17,9 +17,9 @@ const b = cn('ydb-storage-nodes-columns');
 const getStorageNodesColumns = (
     additionalNodesProps: AdditionalNodesProps | undefined,
     database?: string,
+    groupId?: string,
 ) => {
     const getNodeRef = additionalNodesProps?.getNodeRef;
-    const groupId = additionalNodesProps?.groupId;
 
     const columns: StorageNodesColumn[] = [
         {
@@ -80,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} groupId={groupId} />
+                                    <PDisk
+                                        data={pDisk}
+                                        vDisks={vDisks}
+                                        inactiveVdisks={inactiveVdisks}
+                                    />
                                 </div>
                             );
                         })}
@@ -102,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;
 }

src/types/additionalProps.ts

@@ -28,6 +28,5 @@ 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;
 }