feat: show app age in application list view (argoproj#11209) (argopro…

…j#11502) Signed-off-by: Alex Eftimie <[email protected]>
venky-personal-new · Dec 6, 2022 · cf7bf14 · cf7bf14
1 parent 5bb937c
commit cf7bf14
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/ui/src/app/applications/components/applications-list/applications-table.tsx b/ui/src/app/applications/components/applications-list/applications-table.tsx
@@ -1,5 +1,6 @@
 import {DataLoader, DropDownMenu, Tooltip} from 'argo-ui';
 import * as React from 'react';
+import Moment from 'react-moment';
 import {Key, KeybindingContext, useNav} from 'argo-ui/v2';
 import {Cluster} from '../../../shared/components';
 import {Consumer, Context} from '../../../shared/context';
@@ -92,7 +93,16 @@ export const ApplicationsTable = (props: {
                                                     <div className=' columns small-2' />
                                                     <div className='show-for-xxlarge columns small-4'>Name:</div>
                                                     <div className='columns small-12 xxlarge-6'>
-                                                        <Tooltip content={app.metadata.name}>
+                                                        <Tooltip
+                                                            content={
+                                                                <>
+                                                                    {app.metadata.name}
+                                                                    <br />
+                                                                    <Moment fromNow={true} ago={true}>
+                                                                        {app.metadata.creationTimestamp}
+                                                                    </Moment>
+                                                                </>
+                                                            }>
                                                             <span>{app.metadata.name}</span>
                                                         </Tooltip>
                                                     </div>
@@ -118,6 +128,7 @@ export const ApplicationsTable = (props: {
                                                     </div>
                                                 </div>
                                             </div>
+
                                             <div className='columns small-2'>
                                                 <AppUtils.HealthStatusIcon state={app.status.health} /> <span>{app.status.health.status}</span> <br />
                                                 <AppUtils.ComparisonStatusIcon status={app.status.sync.status} />

diff --git a/ui/src/app/applications/components/applications-list/applications-tiles.tsx b/ui/src/app/applications/components/applications-list/applications-tiles.tsx
@@ -256,6 +256,12 @@ export const ApplicationTiles = ({applications, syncApplication, refreshApplicat
                                                         </div>
                                                         <div className='columns small-9'>{app.spec.destination.namespace}</div>
                                                     </div>
+                                                    <div className='row'>
+                                                        <div className='columns small-3' title='Age:'>
+                                                            Created At:
+                                                        </div>
+                                                        <div className='columns small-9'>{AppUtils.formatCreationTimestamp(app.metadata.creationTimestamp)}</div>
+                                                    </div>
                                                     <div className='row'>
                                                         <div className='columns applications-list__entry--actions'>
                                                             <a