fix(Storage): properly display usage for 0 storage

Author: ariser

src/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -126,16 +126,19 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes}: StorageGro
             width: 100,
             render: ({row}) => {
                 const usage = getUsage(row, 5);
-                return (
+                // without a limit the usage can be evaluated as 0,
+                // but the absence of a value is more clear
+                return row.Limit ? (
                     <Label
                         theme={getUsageSeverity(usage)}
                         className={b('usage-label', {overload: usage >= 100})}
                     >
                         ≥ {usage}%
                     </Label>
-                );
+                ) : '-';
             },
-            sortAccessor: getUsage,
+            // without a limit exclude usage from sort to display at the bottom
+            sortAccessor: (row) => row.Limit ? getUsage(row) : null,
             align: DataTable.LEFT,
         },
         {

src/containers/Storage/utils/index.ts

@@ -44,7 +44,8 @@ export const getDegradedSeverity = (group: IStoragePoolGroup) => {
 export const getUsageSeverity = generateEvaluator(80, 85);
 
 export const getUsage = (data: IStoragePoolGroup, step = 1) => {
-    const usage = Math.round((data.Used * 100) / data.Limit);
+    // if limit is 0, display 0
+    const usage = Math.round((data.Used * 100) / data.Limit) || 0;
 
     return Math.floor(usage / step) * step;
 };