✨ Added Disk Usage

components/NodeComponent.vue

@@ -14,6 +14,9 @@
         <div class="grid-element">
             <p class="usage" :class="ramUsageFlag(nodeStats.metrics.relativeMemory)">{{ nodeStats.metrics.relativeMemory }}%</p>
         </div>
+        <div class="grid-element">
+            <p class="usage" :class="diskUsageFlag(nodeStats.metrics.relativeDiskUsage)"><span v-if="nodeStats.metrics.relativeDiskUsage">{{ nodeStats.metrics.relativeDiskUsage }}%</span><span v-else>-</span></p>
+        </div>
     </div>
 </template>
 
@@ -75,6 +78,23 @@ function ramUsageFlag(usage: number | undefined)
     }
     return "red";
 }
+
+function diskUsageFlag(usage: number | undefined)
+{
+    if(!usage)
+    {
+        return undefined;
+    }
+    if(usage < 30)
+    {
+        return "green";
+    }
+    if(usage < 70)
+    {
+        return "orange";
+    }
+    return "red";
+}
 </script>
 
 <style scoped>
@@ -88,6 +108,9 @@ function ramUsageFlag(usage: number | undefined)
     background-color: rgb(179, 179, 179);
     border-radius: 0.25rem;
 }
+.usage * {
+    color: white;
+}
 .green {
     background-color: green;
     color: white;

components/inspect/resources/NodeList.vue

@@ -7,7 +7,8 @@
                 <p>Pods</p>
                 <p>Status</p>
                 <p>CPU</p>
-                <p>RAM</p>
+                <p>Memory</p>
+                <p>Disk Usage</p>
             </div>
             <NodeComponent :node-stats="ns" v-for="ns, index in node" class="resource" :class="{ even: index % 2 }"></NodeComponent>
         </div>
@@ -24,6 +25,6 @@ const node = ResourceRepo.init<Node>().load('nodes').get();
 
 <style>
 .node-container {
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr 10rem 10rem 10rem 8rem;
 }
 </style>