feat: how vdisks of selected group in a special color

Author: astandrik

public/index.html

@@ -23,7 +23,7 @@
       window.systemSettings = {};
       window.userSettings = {};
       window.web_version = !'%REACT_APP_BACKEND%';
-      window.custom_backend = '%NODE_ENV%' === 'development' && '%REACT_APP_BACKEND%';
+      window.custom_backend = 'http://ydb-vla-dev02-000.search.yandex.net:8765';
       window.meta_backend = '%REACT_APP_META_BACKEND%'
     </script>
   </head>

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/AppWithClusters/useClusterData.ts

@@ -28,10 +28,14 @@ export function useClusterData() {
     };
 }
 
-export function useAdditionalNodeProps({balancer}: {balancer?: string}) {
+export function useAdditionalNodeProps({balancer, groupId}: {balancer?: string; groupId?: string}) {
     const [useClusterBalancerAsBackend] = useSetting<boolean>(USE_CLUSTER_BALANCER_AS_BACKEND_KEY);
 
-    const additionalNodesProps = getAdditionalNodesProps(balancer, useClusterBalancerAsBackend);
+    const additionalNodesProps = getAdditionalNodesProps({
+        balancer,
+        groupId,
+        useClusterBalancerAsBackend,
+    });
 
     return {additionalNodesProps, useClusterBalancerAsBackend};
 }

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/PaginatedStorage.tsx

@@ -19,12 +19,18 @@ 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});
+    const additionalNodesProps = useAdditionalNodeProps({balancer, groupId});
 
     const [queryParams, setQueryParams] = useQueryParams({
         type: StringParam,

src/containers/Storage/Storage.tsx

@@ -67,7 +67,10 @@ interface StorageProps {
 
 export const Storage = ({database, nodeId, groupId, pDiskId}: StorageProps) => {
     const {balancer} = useClusterBaseInfo();
-    const additionalNodesProps = useAdditionalNodeProps({balancer});
+    const additionalNodesProps = useAdditionalNodeProps({
+        balancer,
+        groupId: valueIsDefined(groupId) ? groupId.toString() : undefined,
+    });
 
     const capabilitiesLoaded = useCapabilitiesLoaded();
     const groupsHandlerAvailable = useStorageGroupsHandlerAvailable();

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

@@ -19,6 +19,7 @@ const getStorageNodesColumns = (
     database?: string,
 ) => {
     const getNodeRef = additionalNodesProps?.getNodeRef;
+    const groupId = additionalNodesProps?.groupId;
 
     const columns: StorageNodesColumn[] = [
         {
@@ -81,7 +82,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/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;
 }

src/utils/additionalProps.ts

@@ -3,11 +3,17 @@ import type {AdditionalNodesProps, NodeAddress} from '../types/additionalProps';
 
 import {getBackendFromRawNodeData} from './prepareBackend';
 
-export const getAdditionalNodesProps = (
+export const getAdditionalNodesProps = ({
     balancer = backend,
-    useClusterBalancerAsBackend?: boolean,
-): AdditionalNodesProps => {
+    useClusterBalancerAsBackend,
+    groupId,
+}: {
+    balancer?: string;
+    useClusterBalancerAsBackend?: boolean;
+    groupId?: string;
+}): AdditionalNodesProps => {
     return {
+        groupId,
         getNodeRef: (node: NodeAddress = {}) =>
             getBackendFromRawNodeData(node, balancer ?? '', useClusterBalancerAsBackend),
     };