feat: add time util calculate duration

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

ui/apps/dashboard/src/main.tsx

@@ -1,57 +1,60 @@
 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 { 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);
 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(() => {});

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

@@ -0,0 +1,9 @@
+import dayjs from 'dayjs';
+
+export function calculateDuration(start: string | undefined) {
+  if (!start) return '-';
+  const startDate = dayjs(start);
+  const endDate = dayjs(); // 当前时间
+  const duration = dayjs.duration(endDate.diff(startDate));
+  return duration.humanize();
+}