feat(dashboard): improve pods visibility (argoproj#3483)

This commit adds two improvements to the Pods view: * Show spinner (pending status) while the pod is not ready (like ArgoCD UI does) * Show the `ready` property on the tooltip Signed-off-by: Alejandro López Sánchez <[email protected]>
codefresh-io · Mar 29, 2024 · 190c42a · 190c42a
1 parent 47f579c
commit 190c42a
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/USERS.md b/USERS.md
@@ -16,6 +16,7 @@ Organizations below are **officially** using Argo Rollouts. Please send a PR wit
 1. [DaoCloud](https://daocloud.io)
 1. [Databricks](https://github.com/databricks)
 1. [Devtron Labs](https://github.com/devtron-labs/devtron)
+1. [Factorial](https://factorialhr.com)
 1. [Farfetch](https://www.farfetch.com/)
 1. [Flipkart](https://flipkart.com)
 1. [GetYourGuide](https://www.getyourguide.com)

diff --git a/ui/src/app/components/pods/pods.tsx b/ui/src/app/components/pods/pods.tsx
@@ -20,7 +20,17 @@ export enum PodStatus {
     Unknown = 'unknown',
 }
 
-export const ParsePodStatus = (status: string): PodStatus => {
+const isPodReady = (ready: string) => {
+    // Ready is a string in the format "0/1", "1/1", etc.
+    const [current, total] = ready.split('/');
+    return current === total;
+};
+
+export const ParsePodStatus = (status: string, ready: string): PodStatus => {
+    if (status === 'Running' && !isPodReady(ready)) {
+        return PodStatus.Pending;
+    }
+
     switch (status) {
         case 'Pending':
         case 'Terminating':
@@ -101,10 +111,12 @@ export const ReplicaSet = (props: {rs: RolloutReplicaSetInfo; showRevision?: boo
                               key={pod.objectMeta?.uid}
                               name={pod.objectMeta?.name}
                               status={pod.status}
+                              ready={pod.ready}
                               tooltip={
                                   <div>
-                                      <div>Status: {pod.status}</div>
                                       <div>{pod.objectMeta?.name}</div>
+                                      <div>Status: {pod.status}</div>
+                                      <div>Ready: {pod.ready}</div>
                                   </div>
                               }
                           />
@@ -115,7 +127,7 @@ export const ReplicaSet = (props: {rs: RolloutReplicaSetInfo; showRevision?: boo
     );
 };
 
-export const PodWidget = ({name, status, tooltip, customIcon}: {name: string; status: string; tooltip: React.ReactNode; customIcon?: IconDefinition}) => {
+export const PodWidget = ({name, status, ready, tooltip, customIcon}: {name: string; status: string; ready: string; tooltip: React.ReactNode; customIcon?: IconDefinition}) => {
     let icon: IconDefinition;
     let spin = false;
     if (status.startsWith('Init:')) {
@@ -129,7 +141,7 @@ export const PodWidget = ({name, status, tooltip, customIcon}: {name: string; st
         icon = faExclamationTriangle;
     }
 
-    const className = ParsePodStatus(status);
+    const className = ParsePodStatus(status, ready);
 
     if (customIcon) {
         icon = customIcon;

diff --git a/ui/src/app/components/rollout-grid-widget/rollout-grid-widget.tsx b/ui/src/app/components/rollout-grid-widget/rollout-grid-widget.tsx
@@ -21,7 +21,7 @@ import './rollout-grid-widget.scss';
 export const isInProgress = (rollout: RolloutInfo): boolean => {
     for (const rs of rollout.replicaSets || []) {
         for (const p of rs.pods || []) {
-            const status = ParsePodStatus(p.status);
+            const status = ParsePodStatus(p.status, p.ready);
             if (status === PodStatus.Pending) {
                 return true;
             }