From f0e072bc704f963542c372b927135c2f25c39e30 Mon Sep 17 00:00:00 2001
From: "andreas.dinauer" <andreas.j.dinauer@gmail.com>
Date: Sun, 16 Nov 2025 15:50:03 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Added=20Disk=20Usage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/NodeComponent.vue              | 23 +++++++++++++++++++++++
 components/inspect/resources/NodeList.vue |  5 +++--
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/components/NodeComponent.vue b/components/NodeComponent.vue
index ba8052d..ec0fbcf 100644
--- a/components/NodeComponent.vue
+++ b/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;
diff --git a/components/inspect/resources/NodeList.vue b/components/inspect/resources/NodeList.vue
index ea32798..e7f33db 100644
--- a/components/inspect/resources/NodeList.vue
+++ b/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>
\ No newline at end of file