fix: correct lastUpdate calculation & proper format for age timestamps (kyma-project#4630)

Author: chriskari

public/i18n/en.yaml

@@ -427,9 +427,13 @@ common:
   value-units:
     days: days
     days-ago: days ago
+    days-old: days old
     hours-ago: hours ago
+    hours-old: hours old
     minutes-ago: minutes ago
+    minutes-old: minutes old
     seconds-ago: seconds ago
+    seconds-old: seconds old
   'yes': 'yes'
 components:
   accessible-name:

src/shared/components/CertificateDate/CertificateDate.jsx

@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { FormattedDatetime } from 'shared/components/FormattedDate/FormattedDate';
 import { Tooltip } from 'shared/components/Tooltip/Tooltip';
 import { Icon } from '@ui5/webcomponents-react';
-import useDateNow from 'shared/hooks/dateNow';
+import useDateNow from 'shared/hooks/useDateNow';
 
 export function CertificateDate({ date, lang }) {
   const { t } = useTranslation();

src/shared/components/ReadableElapsedTimeFromNow/ReadableElapsedTimeFromNow.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { EMPTY_TEXT_PLACEHOLDER } from 'shared/constants';
-import useDateNow from 'shared/hooks/dateNow';
+import useDateNow from 'shared/hooks/useDateNow';
 
 const toSeconds = 1000;
 const toMinutes = 60;
@@ -12,11 +12,17 @@ const formatResult = (value: number, valueUnit: string) => {
   return <>{Math.round(value).toString() + ' ' + valueUnit}</>;
 };
 
+type TimeFormat = 'elapsed' | 'age';
+
+interface ReadableElapsedTimeFromNowProps {
+  timestamp: string;
+  format?: TimeFormat;
+}
+
 export const ReadableElapsedTimeFromNow = ({
   timestamp,
-}: {
-  timestamp: string;
-}): JSX.Element => {
+  format = 'elapsed',
+}: ReadableElapsedTimeFromNowProps): JSX.Element => {
   const { t } = useTranslation();
   const now = useDateNow(10_000);
 
@@ -26,21 +32,23 @@ export const ReadableElapsedTimeFromNow = ({
     }
 
     const startDate = new Date(timestamp);
-    const timeDiff = now - startDate.valueOf();
+    const timeDiff = Math.max(0, now - startDate.valueOf());
 
     const seconds = timeDiff / toSeconds;
     const minutes = seconds / toMinutes;
     const hours = minutes / toHours;
     const days = hours / toDays;
 
+    const suffix = format === 'age' ? 'old' : 'ago';
+
     if (seconds < 60)
-      return formatResult(seconds, t('common.value-units.seconds-ago'));
+      return formatResult(seconds, t(`common.value-units.seconds-${suffix}`));
     else if (minutes < 60)
-      return formatResult(minutes, t('common.value-units.minutes-ago'));
+      return formatResult(minutes, t(`common.value-units.minutes-${suffix}`));
     else if (hours < 24)
-      return formatResult(hours, t('common.value-units.hours-ago'));
-    else return formatResult(days, t('common.value-units.days-ago'));
-  }, [timestamp, t, now]);
+      return formatResult(hours, t(`common.value-units.hours-${suffix}`));
+    else return formatResult(days, t(`common.value-units.days-${suffix}`));
+  }, [timestamp, t, now, format]);
 
   return result;
 };

src/shared/components/ResourceDetails/ResourceDetails.jsx

@@ -332,12 +332,16 @@ function Resource({
     </>
   );
 
-  // https://stackoverflow.com/questions/70330862/how-to-get-the-latest-change-time-of-a-resource-instance-in-k8s
   let lastUpdate;
   const managedFields = resource.metadata?.managedFields;
   if (managedFields && Array.isArray(managedFields)) {
-    const lastOp = managedFields[managedFields.length - 1];
-    lastUpdate = lastOp.time;
+    const latestEntry = managedFields.reduce((latest, current) => {
+      if (!current.time) return latest;
+      if (!latest || !latest.time) return current;
+      return new Date(current.time) > new Date(latest.time) ? current : latest;
+    }, null);
+
+    lastUpdate = latestEntry?.time;
   }
 
   const renderUpdateDate = (lastUpdate) => {
@@ -417,6 +421,7 @@ function Resource({
           >
             <ReadableElapsedTimeFromNow
               timestamp={resource.metadata.creationTimestamp}
+              format="age"
             />
           </DynamicPageComponent.Column>
           {!hideLastUpdate && (

src/shared/hooks/dateNow.ts src/shared/hooks/useDateNow.tssrc/shared/hooks/dateNow.ts renamed to src/shared/hooks/useDateNow.ts

@@ -9,6 +9,6 @@ export default function useDateNow(refreshInterval: number = 1_000) {
     };
     const interval = setInterval(handler, refreshInterval);
     return () => clearInterval(interval);
-  });
+  }, [refreshInterval]);
   return time;
 }