fix: add more info to creationtime format (#10286) (#10493)

* fix: add more info to creationtime format Signed-off-by: Ashutosh <mail.ashutosh8@gmail.com> * lint issue Signed-off-by: ashutosh16 <mail.ashutosh8@gmail.com> * fix: add more info to creationtime format Signed-off-by: ashutosh16 <11219262+ashutosh16@users.noreply.github.com> Signed-off-by: Ashutosh <mail.ashutosh8@gmail.com> Signed-off-by: ashutosh16 <mail.ashutosh8@gmail.com> Signed-off-by: ashutosh16 <11219262+ashutosh16@users.noreply.github.com> Co-authored-by: Ashutosh <mail.ashutosh8@gmail.com>
argoproj · Sep 9, 2022 · 9fac0f6 · 9fac0f6
1 parent ed9cddb
commit 9fac0f6
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 12 deletions.
diff --git a/ui/src/app/applications/components/application-node-info/application-node-info.tsx b/ui/src/app/applications/components/application-node-info/application-node-info.tsx
@@ -7,7 +7,7 @@ import {YamlEditor} from '../../../shared/components';
 import * as models from '../../../shared/models';
 import {services} from '../../../shared/services';
 import {ApplicationResourcesDiff} from '../application-resources-diff/application-resources-diff';
-import {ComparisonStatusIcon, getPodStateReason, HealthStatusIcon} from '../utils';
+import {ComparisonStatusIcon, formatCreationTimestamp, getPodStateReason, HealthStatusIcon} from '../utils';
 
 require('./application-node-info.scss');
 
@@ -25,10 +25,7 @@ export const ApplicationNodeInfo = (props: {
     if (props.node.createdAt) {
         attributes.push({
             title: 'CREATED_AT',
-            value: moment
-                .utc(props.node.createdAt)
-                .local()
-                .format('MM/DD/YYYY HH:mm:ss')
+            value: formatCreationTimestamp(props.node.createdAt)
         });
     }
     if ((props.node.images || []).length) {

diff --git a/ui/src/app/applications/components/application-summary/application-summary.tsx b/ui/src/app/applications/components/application-summary/application-summary.tsx
@@ -19,10 +19,9 @@ import {Consumer, ContextApis} from '../../../shared/context';
 import * as models from '../../../shared/models';
 import {services} from '../../../shared/services';
 
-import * as moment from 'moment';
-import {ApplicationSyncOptionsField, REPLACE_WARNING} from '../application-sync-options/application-sync-options';
+import {ApplicationSyncOptionsField} from '../application-sync-options/application-sync-options';
 import {RevisionFormField} from '../revision-form-field/revision-form-field';
-import {ComparisonStatusIcon, HealthStatusIcon, syncStatusMessage, urlPattern} from '../utils';
+import {ComparisonStatusIcon, HealthStatusIcon, syncStatusMessage, urlPattern, formatCreationTimestamp} from '../utils';
 import {ApplicationRetryOptions} from '../application-retry-options/application-retry-options';
 import {ApplicationRetryView} from '../application-retry-view/application-retry-view';
 import {Link} from 'react-router-dom';
@@ -137,10 +136,7 @@ export const ApplicationSummary = (props: {app: models.Application; updateApp: (
         },
         {
             title: 'CREATED_AT',
-            view: moment
-                .utc(app.metadata.creationTimestamp)
-                .local()
-                .format('MM/DD/YYYY HH:mm:ss')
+            view: formatCreationTimestamp(app.metadata.creationTimestamp)
         },
         {
             title: 'REPO URL',

diff --git a/ui/src/app/applications/components/utils.tsx b/ui/src/app/applications/components/utils.tsx
@@ -1120,3 +1120,20 @@ export function appQualifiedName(app: appModels.Application): string {
 export function appInstanceName(app: appModels.Application): string {
     return app.metadata.namespace + '_' + app.metadata.name;
 }
+
+export function formatCreationTimestamp(creationTimestamp: string) {
+    const createdAt = moment
+        .utc(creationTimestamp)
+        .local()
+        .format('MM/DD/YYYY HH:mm:ss');
+    const fromNow = moment
+        .utc(creationTimestamp)
+        .local()
+        .fromNow();
+    return (
+        <span>
+            {createdAt}
+            <i style={{padding: '2px'}} /> ({fromNow})
+        </span>
+    );
+}