Use allocatable instead of capacity for node resources. (#2098)

src/renderer/components/+nodes/node-charts.tsx

@@ -47,11 +47,14 @@ export const NodeCharts = observer(() => {
 
   const {
     memoryUsage,
+    workloadMemoryUsage,
     memoryRequests,
     memoryCapacity,
+    memoryAllocatableCapacity,
     cpuUsage,
     cpuRequests,
     cpuCapacity,
+    cpuAllocatableCapacity,
     podUsage,
     podCapacity,
     fsSize,
@@ -75,6 +78,13 @@ export const NodeCharts = observer(() => {
         borderColor: "#30b24d",
         data: cpuRequests.map(([x, y]) => ({ x, y }))
       },
+      {
+        id: `${id}-cpuAllocatableCapacity`,
+        label: `Allocatable Capacity`,
+        tooltip: `CPU allocatable capacity`,
+        borderColor: "#032b4d",
+        data: cpuAllocatableCapacity.map(([x, y]) => ({ x, y }))
+      },
       {
         id: `${id}-cpuCapacity`,
         label: `Capacity`,
@@ -92,6 +102,13 @@ export const NodeCharts = observer(() => {
         borderColor: "#c93dce",
         data: memoryUsage.map(([x, y]) => ({ x, y }))
       },
+      {
+        id: `${id}-workloadMemoryUsage`,
+        label: `Workload Memory Usage`,
+        tooltip: `Workload memory usage`,
+        borderColor: "#9cd3ce",
+        data: workloadMemoryUsage.map(([x, y]) => ({ x, y }))
+      },
       {
         id: "memoryRequests",
         label: `Requests`,
@@ -99,6 +116,13 @@ export const NodeCharts = observer(() => {
         borderColor: "#30b24d",
         data: memoryRequests.map(([x, y]) => ({ x, y }))
       },
+      {
+        id: `${id}-memoryAllocatableCapacity`,
+        label: `Allocatable Capacity`,
+        tooltip: `Memory allocatable capacity`,
+        borderColor: "#032b4d",
+        data: memoryAllocatableCapacity.map(([x, y]) => ({ x, y }))
+      },
       {
         id: `${id}-memoryCapacity`,
         label: `Capacity`,
@@ -148,7 +172,7 @@ export const NodeCharts = observer(() => {
       yAxes: [{
         ticks: {
           callback: value => value
-        }
+        } 
       }]
     },
     tooltips: {

src/renderer/components/+nodes/nodes.tsx

@@ -97,7 +97,7 @@ export class Nodes extends React.Component<Props> {
   }
 
   renderMemoryUsage(node: Node) {
-    const metrics = nodesStore.getLastMetricValues(node, ["memoryUsage", "memoryCapacity"]);
+    const metrics = nodesStore.getLastMetricValues(node, ["workloadMemoryUsage", "memoryAllocatableCapacity"]);
 
     if (!metrics || !metrics[1]) return <LineProgress value={0}/>;
     const usage = metrics[0];