Add uptime value in Camel App Detail tab

Author: gansheer

src/components/camel-app-details/CamelAppStatusPod.tsx

@@ -14,6 +14,7 @@ import { podGVK } from '../../const';
 import { ResourceLink, ResourceStatus } from '@openshift-console/dynamic-plugin-sdk';
 import { useTranslation } from 'react-i18next';
 import Status from '@openshift-console/dynamic-plugin-sdk/lib/app/components/status/Status';
+import { formatDuration } from '../../date-utils';
 
 type CamelAppStatusPodProps = {
   obj: CamelAppKind;
@@ -23,6 +24,9 @@ type CamelAppStatusPodProps = {
 const CamelAppStatusPod: React.FC<CamelAppStatusPodProps> = ({ obj: camelInt, pod: camelPod }) => {
   const { t } = useTranslation('plugin__camel-openshift-console-plugin');
 
+  // Golang time.Time is in nanoseconds
+  const durationFull = formatDuration(Number(camelPod.uptime) / 1000000, { omitSuffix: false });
+
   return (
     <>
       <Card>
@@ -48,6 +52,10 @@ const CamelAppStatusPod: React.FC<CamelAppStatusPodProps> = ({ obj: camelInt, po
               <DescriptionListTerm>{t('Internal IP')}:</DescriptionListTerm>
               <DescriptionListDescription>{camelPod.internalIp}</DescriptionListDescription>
             </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>{t('Uptime')}:</DescriptionListTerm>
+              <DescriptionListDescription>{durationFull}</DescriptionListDescription>
+            </DescriptionListGroup>
             <DescriptionListGroup>
               <DescriptionListTerm>{t('Runtime')}:</DescriptionListTerm>
               <DescriptionListDescription>

src/date-utils.ts

@@ -0,0 +1,94 @@
+import { useTranslation } from 'react-i18next';
+
+
+export const LAST_LANGUAGE_LOCAL_STORAGE_KEY = 'bridge/last-language';
+
+export const getLastLanguage = (): string =>
+  localStorage.getItem(LAST_LANGUAGE_LOCAL_STORAGE_KEY) ?? navigator.language;
+
+export type Duration = {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+};
+
+export const relativeTimeFormatter = (langArg: string) =>
+  Intl.RelativeTimeFormat ? new Intl.RelativeTimeFormat(langArg) : null;
+
+export const dateTimeFormatter = (langArg: string) =>
+  new Intl.DateTimeFormat(langArg, {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    year: 'numeric',
+  });
+
+function getDuration(ms: number): Duration {
+  let seconds = Math.floor(ms / 1000);
+  let minutes = Math.floor(seconds / 60);
+  seconds %= 60;
+  let hours = Math.floor(minutes / 60);
+  minutes %= 60;
+  const days = Math.floor(hours / 24);
+  hours %= 24;
+  return { days, hours, minutes, seconds };
+}
+
+export const formatDuration = (ms: number, options?) => {
+  const { t } = useTranslation('plugin__camel-openshift-console-plugin');
+  const langArg = getLastLanguage();
+  const duration = getDuration(ms);
+
+  // Check for null. If dateTime is null, it returns incorrect date Jan 1 1970.
+  if (!duration) {
+    return '-';
+  }
+
+  const d = new Date(ms);
+  const justNow = t('Just now');
+
+  // If the event occurred less than one minute in the future, assume it's clock drift and show "Just now."
+  if (!options?.omitSuffix && ms < 60000 && ms > -60000) {
+    return justNow;
+  }
+
+  // Do not attempt to handle other dates in the future.
+  if (ms < 0) {
+    return '-';
+  }
+
+  const { days, hours, minutes } = getDuration(ms);
+
+  if (options?.omitSuffix) {
+    if (days) {
+      return t('{{count}} day', { count: days });
+    }
+    if (hours) {
+      return t('{{count}} hour', { count: hours });
+    }
+    return t('{{count}} minute', { count: minutes });
+  }
+
+  // Fallback to normal date/time formatting if Intl.RelativeTimeFormat is not
+  // available. This is the case for older Safari versions.
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat#browser_compatibility
+  if (!relativeTimeFormatter(langArg)) {
+    return dateTimeFormatter(langArg).format(d);
+  }
+
+  if (!days && !hours && !minutes) {
+    return justNow;
+  }
+
+  if (days) {
+    return relativeTimeFormatter(langArg).format(-days, 'day');
+  }
+
+  if (hours) {
+    return relativeTimeFormatter(langArg).format(-hours, 'hour');
+  }
+
+  return relativeTimeFormatter(langArg).format(-minutes, 'minute');
+};

src/types.ts

@@ -11,6 +11,8 @@ export type CamelAppKind = K8sResourceKind & {
 export type CamelAppStatusPod = {
   name: string;
   internalIp: string;
+  /** Format: date-time - in nanoseconds */
+  uptime: string;
   observe: CamelAppObservability;
   ready: boolean;
   runtime: CamelAppRuntime;