Show allocatable data and fraction data on NodeUsage

dashboard/src/main/home/cluster-dashboard/dashboard/node-view/NodeUsage.tsx

@@ -6,26 +6,65 @@ type NodeUsageProps = {
 };
 
 const NodeUsage: React.FunctionComponent<NodeUsageProps> = ({ node }) => {
+  const percentFormatter = (number: number) => `${Number(number).toFixed(2)}%`;
+
   return (
     <Wrapper>
-      <span>
-        <Bolded>Cpu Usage:</Bolded> {node?.cpu_reqs || "Loading..."}
-      </span>
-      <span>
-        <Bolded>Memory Usage:</Bolded> {node?.memory_reqs || "Loading..."}
-      </span>
+      <UsageWrapper>
+        <span>
+          <Bolded>Cpu Requested:</Bolded> {node?.cpu_reqs || "Loading..."}
+        </span>
+        <span>
+          <Bolded>Memory Requested:</Bolded> {node?.memory_reqs || "Loading..."}
+        </span>
+      </UsageWrapper>
+      <AllocatableWrapper>
+        <span>
+          <Bolded>Cpu Allocatable:</Bolded>{" "}
+          {node?.allocatable_cpu || "Loading..."}
+        </span>
+        <span>
+          <Bolded>Memory Allocatable:</Bolded>{" "}
+          {node?.allocatable_memory || "Loading..."}
+        </span>
+      </AllocatableWrapper>
+      <FractionUsageWrapper>
+        <span>
+          <Bolded>Cpu Usage:</Bolded>{" "}
+          {node?.fraction_cpu_reqs
+            ? percentFormatter(node?.fraction_cpu_reqs)
+            : "Loading..."}
+        </span>
+        <span>
+          <Bolded>Memory Usage:</Bolded>{" "}
+          {node?.fraction_memory_reqs
+            ? percentFormatter(node?.fraction_memory_reqs)
+            : "Loading..."}
+        </span>
+      </FractionUsageWrapper>
     </Wrapper>
   );
 };
 
 const Wrapper = styled.div`
-  display: flex;
   margin: 16px 0px;
-  font-size: 14px;
+  display: flex;
+`;
+
+const UsageWrapper = styled.div`
+  display: flex;
   flex-direction: column;
+  font-size: 14px;
   line-height: 24px;
+  :not(last-child) {
+    margin-left: 20px;
+  }
 `;
 
+const AllocatableWrapper = styled(UsageWrapper)``;
+
+const FractionUsageWrapper = styled(UsageWrapper)``;
+
 const Bolded = styled.span`
   font-weight: 500;
   color: #ffffff44;

internal/kubernetes/nodes/nodes.go

@@ -87,6 +87,8 @@ func getPodsForNode(clientset kubernetes.Interface, nodeName string) *v1.PodList
 
 type NodeDetails struct {
 	NodeWithUsageData
+	AllocatableCpu    string `json:"allocatable_cpu"`
+	AllocatableMemory string `json:"allocatable_memory"`
 }
 
 func DescribeNode(clientset kubernetes.Interface, nodeName string) *NodeDetails {
@@ -98,5 +100,7 @@ func DescribeNode(clientset kubernetes.Interface, nodeName string) *NodeDetails
 
 	return &NodeDetails{
 		NodeWithUsageData: *extNodeUsage,
+		AllocatableCpu:    node.Status.Allocatable.Cpu().String(),
+		AllocatableMemory: node.Status.Allocatable.Memory().String(),
 	}
 }