Style change on how node usage shows values

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

@@ -20,37 +20,22 @@ const NodeUsage: React.FunctionComponent<NodeUsageProps> = ({ node }) => {
       <Wrapper>
         <UsageWrapper>
           <span>
-            <Bolded>Cpu Requested:</Bolded> {node?.cpu_reqs || "Loading..."}
+            <Bolded>CPU:</Bolded>{" "}
+            {!node?.cpu_reqs && !node?.allocatable_cpu
+              ? "Loading..."
+              : `${node?.cpu_reqs} / ${
+                  node?.allocatable_cpu
+                }m - ${percentFormatter(node?.fraction_cpu_reqs)}`}
           </span>
           <span>
-            <Bolded>Memory Requested:</Bolded>{" "}
-            {node?.memory_reqs || "Loading..."}
+            <Bolded>RAM:</Bolded>{" "}
+            {!node?.memory_reqs && !node?.allocatable_memory
+              ? "Loading..."
+              : `${node?.memory_reqs} / ${
+                  node?.allocatable_memory
+                } - ${percentFormatter(node?.fraction_memory_reqs)}`}
           </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>
     </NodeUsageWrapper>
   );
@@ -65,15 +50,12 @@ const UsageWrapper = styled.div`
   flex-direction: column;
   font-size: 14px;
   line-height: 24px;
+  user-select: text;
   :not(last-child) {
     margin-right: 20px;
   }
 `;
 
-const AllocatableWrapper = styled(UsageWrapper)``;
-
-const FractionUsageWrapper = styled(UsageWrapper)``;
-
 const Bolded = styled.span`
   font-weight: 500;
   color: #ffffff44;

internal/kubernetes/nodes/nodes.go

@@ -88,7 +88,7 @@ func getPodsForNode(clientset kubernetes.Interface, nodeName string) *v1.PodList
 type NodeDetails struct {
 	NodeWithUsageData
 	Labels            map[string]string `json:"labels"`
-	AllocatableCpu    string            `json:"allocatable_cpu"`
+	AllocatableCpu    int64             `json:"allocatable_cpu"`
 	AllocatableMemory string            `json:"allocatable_memory"`
 }
 
@@ -102,7 +102,7 @@ func DescribeNode(clientset kubernetes.Interface, nodeName string) *NodeDetails
 	return &NodeDetails{
 		NodeWithUsageData: *extNodeUsage,
 		Labels:            node.Labels,
-		AllocatableCpu:    node.Status.Allocatable.Cpu().String(),
+		AllocatableCpu:    node.Status.Allocatable.Cpu().MilliValue(),
 		AllocatableMemory: node.Status.Allocatable.Memory().String(),
 	}
 }