feat(Storage): red progress bars for unavailable disks

Author: ariser

src/containers/Storage/Pdisk/Pdisk.tsx

@@ -13,6 +13,8 @@ import DiskStateProgressBar, {
 } from '../DiskStateProgressBar/DiskStateProgressBar';
 import {STRUCTURE} from '../../Node/NodePages';
 
+import {colorSeverity, NOT_AVAILABLE_SEVERITY} from '../utils';
+
 import './Pdisk.scss';
 
 const b = cn('pdisk-storage');
@@ -34,14 +36,6 @@ const stateSeverity = {
     DeviceIoError: 5,
 };
 
-const colorSeverity = {
-    Grey: 0,
-    Green: 1,
-    Blue: 2,
-    Yellow: 3,
-    Orange: 4,
-    Red: 5,
-};
 type PDiskState = keyof typeof stateSeverity;
 
 interface PDiskProps {
@@ -57,7 +51,7 @@ interface PDiskProps {
 }
 
 const getStateSeverity = (pDiskState?: PDiskState) => {
-    return pDiskState ? stateSeverity[pDiskState] : colorSeverity.Grey;
+    return pDiskState ? stateSeverity[pDiskState] : NOT_AVAILABLE_SEVERITY;
 };
 
 function Pdisk(props: PDiskProps) {

src/containers/Storage/Vdisk/Vdisk.js

@@ -12,6 +12,8 @@ import DiskStateProgressBar, {
 } from '../DiskStateProgressBar/DiskStateProgressBar';
 import {STRUCTURE} from '../../Node/NodePages';
 
+import {colorSeverity, NOT_AVAILABLE_SEVERITY} from '../utils';
+
 import './Vdisk.scss';
 
 const b = cn('vdisk-storage');
@@ -34,17 +36,8 @@ const stateSeverity = {
     OK: 1,
 };
 
-const colorSeverity = {
-    Grey: 0,
-    Green: 1,
-    Blue: 2,
-    Yellow: 3,
-    Orange: 4,
-    Red: 5,
-};
-
 const getStateSeverity = (vDiskState) => {
-    return stateSeverity[vDiskState] ?? colorSeverity.Grey;
+    return stateSeverity[vDiskState] ?? NOT_AVAILABLE_SEVERITY;
 };
 
 const getColorSeverity = (color) => {
@@ -57,15 +50,25 @@ function Vdisk(props) {
 
     const anchor = useRef();
 
+    // determine disk status severity
     useEffect(() => {
         const {DiskSpace, VDiskState, FrontQueues, Replicated} = props;
+
+        // if the disk is not available, this determines its status severity regardless of other features
+        if (!VDiskState) {
+            setSeverity(NOT_AVAILABLE_SEVERITY);
+            return;
+        }
+
         const DiskSpaceSeverity = getColorSeverity(DiskSpace);
         const VDiskSpaceSeverity = getStateSeverity(VDiskState);
         const FrontQueuesSeverity = Math.min(colorSeverity.Orange, getColorSeverity(FrontQueues));
+
         let newSeverity = Math.max(DiskSpaceSeverity, VDiskSpaceSeverity, FrontQueuesSeverity);
         if (!Replicated && newSeverity === colorSeverity.Green) {
             newSeverity = colorSeverity.Blue;
         }
+
         setSeverity(newSeverity);
     }, [props.VDiskState, props.DiskSpace, props.FrontQueues, props.Replicated]);
 

src/containers/Storage/utils/constants.ts

@@ -0,0 +1,10 @@
+export const colorSeverity = {
+    Grey: 0,
+    Green: 1,
+    Blue: 2,
+    Yellow: 3,
+    Orange: 4,
+    Red: 5,
+};
+
+export const NOT_AVAILABLE_SEVERITY = colorSeverity.Red;

src/containers/Storage/utils/index.ts

@@ -0,0 +1 @@
+export * from './constants';