Added tooltip with extra pod data

dashboard/src/main/home/cluster-dashboard/expanded-chart/status/ControllerTab.tsx

@@ -6,6 +6,7 @@ import ResourceTab from "components/ResourceTab";
 import ConfirmOverlay from "components/ConfirmOverlay";
 import { NewWebsocketOptions, useWebsockets } from "shared/hooks/useWebsockets";
 import PodRow from "./PodRow";
+import { timeFormat } from "d3-time-format";
 
 type Props = {
   controller: any;
@@ -24,9 +25,13 @@ export type ControllerTabPodType = {
   phase: string;
   status: any;
   replicaSetName: string;
-  hash: string;
+  restartCount: number | string;
+  podAge: string;
+  revisionNumber?: number;
 };
 
+const formatCreationTimestamp = timeFormat("%H:%M:%S %b %d, '%y");
+
 const ControllerTabFC: React.FunctionComponent<Props> = ({
   controller,
   selectPod,
@@ -101,14 +106,27 @@ const ControllerTabFC: React.FunctionComponent<Props> = ({
           const replicaSetName =
             Array.isArray(pod?.metadata?.ownerReferences) &&
             pod?.metadata?.ownerReferences[0]?.name;
-          const [hash] = (pod?.metadata?.name as string).split("-").reverse();
+          const containerStatus =
+            Array.isArray(pod?.status?.containerStatuses) &&
+            pod?.status?.containerStatuses[0];
+
+          const restartCount = containerStatus
+            ? containerStatus.restartCount
+            : "N/A";
+
+          const podAge = formatCreationTimestamp(
+            new Date(pod?.metadata?.creationTimestamp)
+          );
+
           return {
             namespace: pod?.metadata?.namespace,
             name: pod?.metadata?.name,
             phase: pod?.status?.phase,
             status: pod?.status,
             replicaSetName,
-            hash,
+            restartCount,
+            podAge: pod?.metadata?.creationTimestamp ? podAge : "N/A",
+            revisionNumber: pod?.metadata?.revisionNumber || "N/A",
           };
         });
 
@@ -355,16 +373,14 @@ const ControllerTabFC: React.FunctionComponent<Props> = ({
       {!!replicaSetArray.length &&
         replicaSetArray.map((subArray, index) => {
           const firstItem = subArray[0];
-          const [replicaSetHash] = firstItem.replicaSetName
-            .split("-")
-            .reverse();
+
           return (
             <div key={firstItem.replicaSetName + index}>
               <ReplicaSetContainer>
                 <ReplicaSetName>
-                  ReplicaSet hash: {replicaSetHash}
+                  Replicaset: {firstItem.replicaSetName}
                 </ReplicaSetName>
-                <div> Revision: V1.0</div>
+                <div> Revision: {firstItem.revisionNumber}</div>
               </ReplicaSetContainer>
               {mapPods(subArray)}
             </div>

dashboard/src/main/home/cluster-dashboard/expanded-chart/status/PodRow.tsx

@@ -20,6 +20,8 @@ const PodRow: React.FunctionComponent<PodRowProps> = ({
   podStatus,
 }) => {
   const [showTooltip, setShowTooltip] = useState(false);
+  const [showInfoTooltip, setShowInfoTooltip] = useState(false);
+
   return (
     <Tab key={pod?.name} selected={isSelected} onClick={onTabClick}>
       <Gutter>
@@ -35,21 +37,40 @@ const PodRow: React.FunctionComponent<PodRowProps> = ({
           setShowTooltip(false);
         }}
       >
-        Pod hash: {pod?.hash}
+        {pod?.name}
       </Name>
       {showTooltip && <Tooltip>{pod?.name}</Tooltip>}
-      <Status>
-        <StatusColor status={podStatus} />
-        {podStatus}
-        {podStatus === "failed" && (
-          <CloseIcon
-            className="material-icons-outlined"
-            onClick={onDeleteClick}
-          >
-            close
-          </CloseIcon>
+      <DetailsWrapper
+        onMouseOver={() => {
+          setShowInfoTooltip(true);
+        }}
+        onMouseOut={() => {
+          setShowInfoTooltip(false);
+        }}
+      >
+        <div>
+          <i className="material-icons">info</i>
+        </div>
+        {showInfoTooltip && (
+          <DetailsTooltip>
+            <span>Restart count: {pod.restartCount}</span>
+            <span>Created on: {pod.podAge}</span>
+          </DetailsTooltip>
         )}
-      </Status>
+
+        <Status>
+          <StatusColor status={podStatus} />
+          {podStatus}
+          {podStatus === "failed" && (
+            <CloseIcon
+              className="material-icons-outlined"
+              onClick={onDeleteClick}
+            >
+              close
+            </CloseIcon>
+          )}
+        </Status>
+      </DetailsWrapper>
     </Tab>
   );
 };
@@ -199,3 +220,37 @@ const Name = styled.div`
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 `;
+
+const DetailsWrapper = styled.div`
+  position: relative;
+  display: flex;
+`;
+
+const DetailsTooltip = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 1px;
+  right: 90px;
+
+  width: 200px;
+  padding: 2px 5px;
+  background: #383842dd;
+  color: white;
+  text-transform: none;
+  font-size: 12px;
+  font-family: "Work Sans", sans-serif;
+  word-wrap: unset;
+  outline: 1px solid #ffffff55;
+  opacity: 0;
+  animation: faded-in 0.1s 0.05s;
+  animation-fill-mode: forwards;
+  @keyframes faded-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;