feat: add time util, calculate duration dynamically

Signed-off-by: warjiang <[email protected]>

Author: warjiang

ui/apps/dashboard/src/main.tsx

@@ -1,57 +1,66 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.tsx';
-import i18nInstance, {getLang} from '@/utils/i18n';
-import {initReactI18next} from 'react-i18next';
-import {loader} from '@monaco-editor/react';
+import i18nInstance, { getLang } from '@/utils/i18n';
+import { initReactI18next } from 'react-i18next';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import { loader } from '@monaco-editor/react';
 import * as monaco from 'monaco-editor';
 import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 // https://github.com/remcohaszing/monaco-yaml/issues/150
 import yamlWorker from '@/utils/workaround-yaml.worker?worker';
 import enTexts from '../locales/en-US.json';
 import zhTexts from '../locales/zh-CN.json';
-import {initRoute} from '@/routes/route.tsx';
+import { initRoute } from '@/routes/route.tsx';
 
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
+dayjs.extend(utc);
+dayjs.extend(timezone);
 window.MonacoEnvironment = {
-    getWorker(_, label) {
-        if (label === 'yaml') {
-            return new yamlWorker();
-        }
-        return new editorWorker();
-    },
+  getWorker(_, label) {
+    if (label === 'yaml') {
+      return new yamlWorker();
+    }
+    return new editorWorker();
+  },
 };
-loader.config({monaco});
+loader.config({ monaco });
 
 i18nInstance
-    .use(initReactI18next) // passes i18n down to react-i18next
-    .init({
-        debug: true,
-        lng: getLang(), // if you're using a language detector, do not define the lng option
-        fallbackLng: ['zh-CN'],
-        resources: {
-            zh: {
-                translation: zhTexts,
-            },
-            en: {
-                translation: enTexts,
-            },
-        },
-        interpolation: {
-            escapeValue: false, // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
-        },
-        saveMissing: true, // send not translated keys to endpoint,
-        react: {
-            useSuspense: false,
-        },
-    })
-    .then(() => {
-        initRoute();
-        ReactDOM.createRoot(document.getElementById('root')!).render(
-            <React.StrictMode>
-                <App/>
-            </React.StrictMode>,
-        );
-    })
-    .catch(() => {
-
-    })
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    debug: true,
+    lng: getLang(), // if you're using a language detector, do not define the lng option
+    fallbackLng: ['zh-CN'],
+    resources: {
+      zh: {
+        translation: zhTexts,
+      },
+      en: {
+        translation: enTexts,
+      },
+    },
+    interpolation: {
+      escapeValue: false, // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
+    },
+    saveMissing: true, // send not translated keys to endpoint,
+    react: {
+      useSuspense: false,
+    },
+  })
+  .then(() => {
+    initRoute();
+    ReactDOM.createRoot(document.getElementById('root')!).render(
+      <React.StrictMode>
+        <App />
+      </React.StrictMode>,
+    );
+  })
+  .catch((err) => {
+    console.error('initialization failed:', err);
+  });

ui/apps/dashboard/src/pages/multicloud-resource-manage/workload/workload-detail-drawer.tsx

@@ -19,6 +19,7 @@ import styles from './index.module.less';
 import { WorkloadKind } from '@/services/base.ts';
 import { cn } from '@/utils/cn';
 import TagList, { convertLabelToTags } from '@/components/tag-list';
+import { calculateDuration } from '@/utils/time.ts';
 
 export interface WorkloadDetailDrawerProps {
   open: boolean;
@@ -140,7 +141,7 @@ const WorkloadDetailDrawer: FC<WorkloadDetailDrawerProps> = (props) => {
               '4a6341a8bcc68e0b7120dbc89014b6a2',
               '持续时间',
             )}
-            value="2h"
+            value={calculateDuration(detailData?.objectMeta?.creationTimestamp)}
           />
           <Statistic
             className={styles['no-value']}

ui/apps/dashboard/src/utils/time.ts

@@ -0,0 +1,25 @@
+/*
+Copyright 2025 The Karmada Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import dayjs from 'dayjs';
+
+export function calculateDuration(start: string | undefined) {
+  if (!start) return '-';
+  const startDate = dayjs.utc(start).local();
+  const endDate = dayjs();
+  const duration = dayjs.duration(endDate.diff(startDate));
+  return duration.humanize();
+}