Added help link to kubernetes documentation and added dynamic tab selection

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

@@ -64,6 +64,14 @@ export const ExpandedNodeView = () => {
     return "";
   }, [node?.labels]);
 
+  const currentTabPage = useMemo(() => {
+    switch (currentTab) {
+      case "conditions":
+      default:
+        return <ConditionsTable node={node} />;
+    }
+  }, [currentTab, node]);
+
   return (
     <>
       <CloseOverlay onClick={closeNodeView} />
@@ -89,7 +97,7 @@ export const ExpandedNodeView = () => {
             currentTab={currentTab}
             setCurrentTab={(value: TabEnum) => setCurrentTab(value)}
           />
-          <ConditionsTable node={node} />
+          {currentTabPage}
         </BodyWrapper>
       </StyledExpandedChart>
     </>

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

@@ -9,45 +9,54 @@ const NodeUsage: React.FunctionComponent<NodeUsageProps> = ({ node }) => {
   const percentFormatter = (number: number) => `${Number(number).toFixed(2)}%`;
 
   return (
-    <Wrapper>
-      <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>
+    <NodeUsageWrapper>
+      <Help
+        href="https://kubernetes.io/docs/concepts/configuration/manage-resources-containers/#meaning-of-cpu"
+        target="_blank"
+      >
+        <span>How to read memory and cpu units</span>
+        <i className="material-icons">help_outline</i>
+      </Help>
+      <Wrapper>
+        <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>
+    </NodeUsageWrapper>
   );
 };
 
 const Wrapper = styled.div`
-  margin: 16px 0px;
   display: flex;
 `;
 
@@ -57,7 +66,7 @@ const UsageWrapper = styled.div`
   font-size: 14px;
   line-height: 24px;
   :not(last-child) {
-    margin-left: 20px;
+    margin-right: 20px;
   }
 `;
 
@@ -71,4 +80,24 @@ const Bolded = styled.span`
   margin-right: 6px;
 `;
 
+const Help = styled.a`
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  margin-bottom: 5px;
+  width: fit-content;
+  :hover {
+    color: #ffffff;
+  }
+
+  > i {
+    margin-left: 5px;
+    font-size: 16px;
+  }
+`;
+
+const NodeUsageWrapper = styled.div`
+  margin: 16px 0px;
+`;
+
 export default NodeUsage;