feat: add visual indication for disks with no valid mounts

fixes #1001
MauriceNino · Jan 19, 2024 · 4f81ab6 · 4f81ab6
1 parent 711ed39
commit 4f81ab6
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 30 deletions.
diff --git a/apps/server/__TESTS__/test-cases.ts b/apps/server/__TESTS__/test-cases.ts
@@ -2561,8 +2561,8 @@ export const TEST_CASE_19 = {
     },
   ],
   output: [
-    129281941504, 463235125248, 6725234688, 11665897328640, 8001563222016,
-    7387794038784, 3932021096448, 2528710115328, 3757356335104, 3790988312576,
+    129281941504, 463235125248, 6725234688, 11665897328640, -1, 7387794038784,
+    3932021096448, 2528710115328, 3757356335104, 3790988312576,
   ],
 } as any as TestCase;
 
@@ -2893,7 +2893,7 @@ export const TEST_CASE_20 = {
       size: 4000787030016,
     },
   ],
-  output: [512110190592, 20198055936, 1478133694464],
+  output: [-1, 20198055936, 1478133694464],
 } as any as TestCase;
 
 // https://github.com/MauriceNino/dashdot/issues/883

diff --git a/apps/server/src/data/storage/dynamic.ts b/apps/server/src/data/storage/dynamic.ts
@@ -10,7 +10,6 @@ type Size = si.Systeminformation.FsSizeData;
 export class DynamicStorageMapper {
   private validSizes: Size[];
   private validBlocks: Block[];
-  private hasExplicitHost = false;
 
   constructor(
     private hostWin32: boolean,
@@ -20,7 +19,6 @@ export class DynamicStorageMapper {
   ) {
     this.validSizes = this.getValidSizes();
     this.validBlocks = this.getValidBlocks();
-    this.hasExplicitHost = this.getHasExplicitHost();
   }
 
   // Setup local values
@@ -37,14 +35,6 @@ export class DynamicStorageMapper {
     return this.blocks.filter(({ type }) => type === 'part' || type === 'disk');
   }
 
-  private getIsExplicitHost(deviceBlocks: Block[]) {
-    return deviceBlocks.some(({ mount }) => this.isRootMount(mount));
-  }
-
-  private getHasExplicitHost() {
-    return this.getIsExplicitHost(this.validBlocks);
-  }
-
   // Helpers
   private getBlocksForDisks(disks: StorageInfo[number]['disks']) {
     return this.blocks.filter(({ name, device }) =>
@@ -95,6 +85,10 @@ export class DynamicStorageMapper {
       })
     );
 
+    if (sizes.length === 0) {
+      return -1;
+    }
+
     const calculatedSize = sumUp(sizes, 'used');
     const isLvm = deviceBlocks.some(({ fsType }) => fsType === 'LVM2_member');
 

diff --git a/apps/view/src/widgets/storage.tsx b/apps/view/src/widgets/storage.tsx
@@ -91,25 +91,31 @@ export const StorageChart: FC<StorageChartProps> = ({
 
   const shownData = useDataWithOverrides(data, config);
   const layoutNoVirtual = shownData.filter(l => !l.virtual);
+  const loadNoVirtual = load?.slice(0, layoutNoVirtual.length) ?? [];
 
   const totalSize = layoutNoVirtual.reduce((acc, s) => (acc = acc + s.size), 0);
   const totalUsed =
-    load
-      ?.slice(0, layoutNoVirtual.length)
-      .reduce((acc, curr) => acc + curr, 0) ?? 0;
-  const totalAvailable = Math.max(0, totalSize - totalUsed);
+    loadNoVirtual.reduce((acc, curr) => acc + (curr >= 0 ? curr : 0), 0) ?? 0;
+  const totalInvalid =
+    loadNoVirtual.reduce(
+      (acc, curr, i) => acc + (curr === -1 ? layoutNoVirtual[i].size : 0),
+      0
+    ) ?? 0;
+  const totalAvailable = Math.max(0, totalSize - totalUsed - totalInvalid);
 
   const usageArr = useMemo(() => {
     if (!multiView) return [];
 
     return shownData.map((d, i) => {
-      const used = load?.[i] ?? 0;
+      const invalid = load?.[i] === -1;
+      const used = invalid ? 0 : load?.[i] ?? 0;
       const available = d.size - used;
       const realPercent = used / d.size,
         usedPercent = Math.min(realPercent, 1);
 
       return {
         used,
+        invalid,
         available,
         realPercent,
         usedPercent,
@@ -118,6 +124,15 @@ export const StorageChart: FC<StorageChartProps> = ({
     });
   }, [shownData, load, multiView]);
 
+  const activeUsageArr =
+    index != null
+      ? usageArr.slice(
+          index * config.storage_widget_items_per_page,
+          index * config.storage_widget_items_per_page +
+            config.storage_widget_items_per_page
+        )
+      : usageArr;
+
   return (
     <MultiChartContainer layout>
       {multiView ? (
@@ -132,15 +147,7 @@ export const StorageChart: FC<StorageChartProps> = ({
             <DefaultVertBarChart
               width={size.width}
               height={size.height}
-              data={
-                index != null
-                  ? usageArr.slice(
-                      index * config.storage_widget_items_per_page,
-                      index * config.storage_widget_items_per_page +
-                        config.storage_widget_items_per_page
-                    )
-                  : usageArr
-              }
+              data={activeUsageArr}
               tooltipRenderer={x => {
                 const value = x.payload?.[0]?.payload as
                   | (typeof usageArr)[0]
@@ -150,6 +157,9 @@ export const StorageChart: FC<StorageChartProps> = ({
                   return <ThemedText>? % Used</ThemedText>;
                 }
 
+                if (value.invalid)
+                  return <ThemedText>No mount found</ThemedText>;
+
                 return (
                   <>
                     <ThemedText>
@@ -190,11 +200,32 @@ export const StorageChart: FC<StorageChartProps> = ({
               <Bar
                 dataKey='availablePercent'
                 stackId='stack'
-                fill={theme.colors.text}
-                style={{ stroke: theme.colors.surface, strokeWidth: 4 }}
                 opacity={0.2}
                 radius={10}
-              />
+              >
+                {activeUsageArr.map((entry, index) => (
+                  <Cell
+                    fill={
+                      entry.invalid ? theme.colors.surface : theme.colors.text
+                    }
+                    style={
+                      entry.invalid
+                        ? {
+                            //TODO: Find out how to make the stroke width inset
+                            stroke: theme.colors.text,
+                            strokeWidth: 2,
+                            paintOrder: 'fill',
+                            strokeDasharray: '10',
+                          }
+                        : {
+                            stroke: theme.colors.surface,
+                            strokeWidth: 4,
+                          }
+                    }
+                    key={`cell-${index}`}
+                  />
+                ))}
+              </Bar>
             </DefaultVertBarChart>
           )}
         ></ChartContainer>
@@ -224,6 +255,10 @@ export const StorageChart: FC<StorageChartProps> = ({
                   name: 'Free',
                   value: totalAvailable,
                 },
+                {
+                  name: 'No mount found',
+                  value: totalInvalid,
+                },
               ]}
               width={size.width}
               height={size.height}
@@ -251,6 +286,19 @@ export const StorageChart: FC<StorageChartProps> = ({
                   transition: 'all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
                 }}
               />
+              <Cell
+                key='cell-invalid'
+                fill={theme.colors.surface}
+                style={{
+                  //TODO: Find out how to make the stroke width inset
+                  stroke: theme.colors.text,
+                  strokeWidth: 2,
+                  paintOrder: 'fill',
+                  strokeDasharray: '10',
+                  transition: 'all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+                }}
+                opacity={0.2}
+              />
             </DefaultPieChart>
           )}
         ></ChartContainer>