fix: add opacity to unavailable nodes

Author: artemmufazalov

src/containers/Nodes/Nodes.scss

@@ -39,4 +39,8 @@
         @include table-styles;
         @include table-sticky-styles;
     }
+
+    &__node_unavailable {
+        opacity: 0.6;
+    }
 }

src/containers/Nodes/Nodes.tsx

@@ -21,7 +21,7 @@ import {
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
 } from '../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
-import {NodesUptimeFilterValues} from '../../utils/nodes';
+import {isUnavailableNode, NodesUptimeFilterValues} from '../../utils/nodes';
 
 import {setHeader} from '../../store/reducers/header';
 import {
@@ -166,6 +166,7 @@ export const Nodes = ({tenantPath, className, additionalNodesInfo = {}}: NodesPr
                             order: DataTable.ASCENDING,
                         }}
                         emptyDataMessage={i18n('empty.default')}
+                        rowClassName={(row) => b('node', {unavailable: isUnavailableNode(row)})}
                     />
                 </div>
             </div>

src/containers/Storage/StorageNodes/StorageNodes.scss

@@ -35,4 +35,8 @@
     &__group-id {
         font-weight: 500;
     }
+
+    &__node_unavailable {
+        opacity: 0.6;
+    }
 }

src/containers/Storage/StorageNodes/StorageNodes.tsx

@@ -5,7 +5,7 @@ import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-tab
 import {Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
 import {VisibleEntities} from '../../../store/reducers/storage';
-import {NodesUptimeFilterValues} from '../../../utils/nodes';
+import {isUnavailableNode, NodesUptimeFilterValues} from '../../../utils/nodes';
 
 import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
 import {PDisk} from '../PDisk';
@@ -190,6 +190,7 @@ function StorageNodes({
             }}
             initialSortOrder={setSortOrder(visibleEntities)}
             emptyDataMessage={i18n('empty.default')}
+            rowClassName={(row) => b('node', {unavailable: isUnavailableNode(row)})}
         />
     ) : null;
 }

src/store/reducers/storage.js

@@ -313,6 +313,7 @@ export const getFlatListStorageNodes = createSelector([getStorageNodes], (storag
         }).length;
         return {
             NodeId: node.NodeId,
+            SystemState: systemState.SystemState,
             FQDN: systemState.Host,
             DataCenter: systemState.DataCenter,
             Rack: systemState.Rack,

src/types/api/nodes.ts

@@ -7,7 +7,7 @@ import {TVDiskStateInfo} from './vdisk';
 // source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/protos/viewer.proto
 
 export interface TNodesInfo {
-    Overall: EFlag;
+    Overall?: EFlag;
     Nodes?: TNodeInfo[];
 
     /** uint64 */

src/utils/nodes.ts

@@ -1,3 +1,7 @@
+import type {TSystemStateInfo} from '../types/api/nodes';
+import type {INodesPreparedEntity} from '../types/store/nodes';
+import {EFlag} from '../types/api/enums';
+
 export enum NodesUptimeFilterValues {
     'All' = 'All',
     'SmallUptime' = 'SmallUptime',
@@ -7,3 +11,6 @@ export const NodesUptimeFilterTitles = {
     [NodesUptimeFilterValues.All]: 'All',
     [NodesUptimeFilterValues.SmallUptime]: 'Uptime < 1h',
 };
+
+export const isUnavailableNode = (node: INodesPreparedEntity | TSystemStateInfo) =>
+    !node.SystemState || node.SystemState === EFlag.Grey;