fix: add pod age icon details in tooltip (argoproj#10290) (argoproj#1…

…1170) * pod-age-icon details added in tooltip Signed-off-by: schakradari <58915923+schakrad@users.noreply.github.com> * Tooltip change Signed-off-by: schakradari <58915923+schakrad@users.noreply.github.com> Signed-off-by: schakradari <58915923+schakrad@users.noreply.github.com> Signed-off-by: emirot <emirot.nolan@gmail.com>
emirot · Dec 13, 2022 · 48e62d1 · 48e62d1
1 parent 586c00d
commit 48e62d1
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/ui/src/app/applications/components/application-pod-view/pod-view.scss b/ui/src/app/applications/components/application-pod-view/pod-view.scss
@@ -7,6 +7,13 @@ $pods-per-column: 4;
 $max-rows: 5;
 $num-stats: 2;
 
+$pod-age-icon-clr: #ffce25;
+
+.circle-icon {
+    color: $pod-age-icon-clr;
+    font-size: 10px;
+}
+
 .pod-view {
     &__settings {
         align-items: center;
@@ -67,7 +74,7 @@ $num-stats: 2;
             margin: 1em 0;
             padding: 10px;
             border-radius: 3px;
-            background-color: $argo-color-gray-3;                            
+            background-color: $argo-color-gray-3;
             color: $argo-color-gray-6;
             div {
                 display: flex;
@@ -149,7 +156,7 @@ $num-stats: 2;
             }
             &__new-pod-icon {
                 background: none;
-                color: #FFCE25;
+                color: $pod-age-icon-clr;
                 display: block;
                 left: 20px;
                 margin: 0px;
@@ -238,4 +245,4 @@ $num-stats: 2;
             }
         }
     }
-}
+}
diff --git a/ui/src/app/applications/components/application-pod-view/pod-view.tsx b/ui/src/app/applications/components/application-pod-view/pod-view.tsx
@@ -171,6 +171,14 @@ export class PodView extends React.Component<PodViewProps> {
                                                                                                 {pod.createdAt}
                                                                                             </Moment>
                                                                                             <span> ago ({<Moment local={true}>{pod.createdAt}</Moment>})</span>
+                                                                                            <div>
+                                                                                                {isYoungerThanXMinutes(pod, 30) && (
+                                                                                                    <span>
+                                                                                                        <i className='fas fa-circle circle-icon' /> &nbsp;
+                                                                                                        <span>pod age less than 30min</span>
+                                                                                                    </span>
+                                                                                                )}
+                                                                                            </div>
                                                                                         </span>
                                                                                     )}
                                                                                 </div>