feat: display the version and backend service status on the page (#848)

### What problem does this PR solve?

#643 feat: display the version and backend service status on the page

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/constants/setting.ts

@@ -4,6 +4,7 @@ export enum UserSettingRouteKey {
   Profile = 'profile',
   Password = 'password',
   Model = 'model',
+  System = 'system',
   Team = 'team',
   Logout = 'logout',
 }
@@ -12,6 +13,7 @@ export const UserSettingRouteMap = {
   [UserSettingRouteKey.Profile]: 'Profile',
   [UserSettingRouteKey.Password]: 'Password',
   [UserSettingRouteKey.Model]: 'Model Providers',
+  [UserSettingRouteKey.System]: 'System Version',
   [UserSettingRouteKey.Team]: 'Team',
   [UserSettingRouteKey.Logout]: 'Log out',
 };

web/src/hooks/userSettingHook.ts

@@ -1,7 +1,8 @@
 import { ITenantInfo } from '@/interfaces/database/knowledge';
-import { IUserInfo } from '@/interfaces/database/userSetting';
+import { ISystemStatus, IUserInfo } from '@/interfaces/database/userSetting';
+import userService from '@/services/userService';
 import authorizationUtil from '@/utils/authorizationUtil';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { history, useDispatch, useSelector } from 'umi';
 
 export const useFetchUserInfo = () => {
@@ -92,3 +93,41 @@ export const useSaveSetting = () => {
 
   return saveSetting;
 };
+
+export const useFetchSystemVersion = () => {
+  const [version, setVersion] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const fetchSystemVersion = useCallback(async () => {
+    setLoading(true);
+    const { data } = await userService.getSystemVersion();
+    if (data.retcode === 0) {
+      setVersion(data.data);
+      setLoading(false);
+    }
+  }, []);
+
+  return { fetchSystemVersion, version, loading };
+};
+
+export const useFetchSystemStatus = () => {
+  const [systemStatus, setSystemStatus] = useState<ISystemStatus>(
+    {} as ISystemStatus,
+  );
+  const [loading, setLoading] = useState(false);
+
+  const fetchSystemStatus = useCallback(async () => {
+    setLoading(true);
+    const { data } = await userService.getSystemStatus();
+    if (data.retcode === 0) {
+      setSystemStatus(data.data);
+      setLoading(false);
+    }
+  }, []);
+
+  return {
+    systemStatus,
+    fetchSystemStatus,
+    loading,
+  };
+};

web/src/interfaces/database/userSetting.ts

@@ -19,3 +19,31 @@ export interface IUserInfo {
   update_date: string;
   update_time: number;
 }
+
+export interface ISystemStatus {
+  es: Es;
+  minio: Minio;
+  mysql: Minio;
+  redis: Redis;
+}
+
+interface Redis {
+  status: string;
+  elapsed: number;
+  error: string;
+  pending: number;
+}
+
+export interface Minio {
+  status: string;
+  elapsed: number;
+  error: string;
+}
+
+interface Es {
+  status: string;
+  elapsed: number;
+  error: string;
+  number_of_nodes: number;
+  active_shards: number;
+}

web/src/locales/en.ts

@@ -393,6 +393,7 @@ export default {
       model: 'Model Providers',
       modelDescription: 'Set the model parameter and API Key here.',
       team: 'Team',
+      system: 'System',
       logout: 'Log out',
       username: 'Username',
       usernameMessage: 'Please input your username!',

web/src/locales/zh-traditional.ts

@@ -364,6 +364,7 @@ export default {
       modelDescription: '在此設置模型參數和 API Key。',
       team: '團隊',
       logout: '登出',
+      system: '系統',
       username: '使用者名稱',
       usernameMessage: '請輸入用戶名',
       photo: '頭像',

web/src/locales/zh.ts

@@ -380,6 +380,7 @@ export default {
       model: '模型提供商',
       modelDescription: '在此设置模型参数和 API Key。',
       team: '团队',
+      system: '系统',
       logout: '登出',
       username: '用户名',
       usernameMessage: '请输入用户名',

web/src/pages/user-setting/constants.tsx

@@ -4,11 +4,13 @@ import { ReactComponent as PasswordIcon } from '@/assets/svg/password.svg';
 import { ReactComponent as ProfileIcon } from '@/assets/svg/profile.svg';
 import { ReactComponent as TeamIcon } from '@/assets/svg/team.svg';
 import { UserSettingRouteKey } from '@/constants/setting';
+import { MonitorOutlined } from '@ant-design/icons';
 
 export const UserSettingIconMap = {
   [UserSettingRouteKey.Profile]: <ProfileIcon />,
   [UserSettingRouteKey.Password]: <PasswordIcon />,
   [UserSettingRouteKey.Model]: <ModelIcon />,
+  [UserSettingRouteKey.System]: <MonitorOutlined style={{ fontSize: 24 }} />,
   [UserSettingRouteKey.Team]: <TeamIcon />,
   [UserSettingRouteKey.Logout]: <LogoutIcon />,
 };

web/src/pages/user-setting/index.less

@@ -3,6 +3,8 @@
 
   .outletWrapper {
     padding: 32px 32px 0;
+    height: 100%;
+    overflow-y: auto;
   }
 
   .itemDescription {

web/src/pages/user-setting/setting-system/index.less

@@ -0,0 +1,20 @@
+.systemInfo {
+  width: 100%;
+  .title {
+    font-size: 20px;
+    font-weight: 600;
+  }
+  .text {
+    height: 26px;
+    line-height: 26px;
+  }
+  .badge {
+    :global(.ant-badge-status-dot) {
+      width: 10px;
+      height: 10px;
+    }
+  }
+  .error {
+    color: red;
+  }
+}

web/src/pages/user-setting/setting-system/index.tsx

@@ -0,0 +1,94 @@
+import SvgIcon from '@/components/svg-icon';
+import { useFetchSystemStatus } from '@/hooks/userSettingHook';
+import { ISystemStatus, Minio } from '@/interfaces/database/userSetting';
+import { Badge, Card, Flex, Spin, Typography } from 'antd';
+import classNames from 'classnames';
+import lowerCase from 'lodash/lowerCase';
+import upperFirst from 'lodash/upperFirst';
+import { useEffect } from 'react';
+
+import { toFixed } from '@/utils/commonUtil';
+import styles from './index.less';
+
+const { Text } = Typography;
+
+enum Status {
+  'green' = 'success',
+  'red' = 'error',
+  'yellow' = 'warning',
+}
+
+const TitleMap = {
+  es: 'Elasticsearch',
+  minio: 'MinIO Object Storage',
+  redis: 'Redis',
+  mysql: 'Mysql',
+};
+
+const SystemInfo = () => {
+  const {
+    systemStatus,
+    fetchSystemStatus,
+    loading: statusLoading,
+  } = useFetchSystemStatus();
+
+  useEffect(() => {
+    fetchSystemStatus();
+  }, [fetchSystemStatus]);
+
+  return (
+    <section className={styles.systemInfo}>
+      <Spin spinning={statusLoading}>
+        <Flex gap={16} vertical>
+          {Object.keys(systemStatus).map((key) => {
+            const info = systemStatus[key as keyof ISystemStatus];
+
+            return (
+              <Card
+                type="inner"
+                title={
+                  <Flex align="center" gap={10}>
+                    <SvgIcon name={key} width={26}></SvgIcon>
+                    <span className={styles.title}>
+                      {TitleMap[key as keyof typeof TitleMap]}
+                    </span>
+                    <Badge
+                      className={styles.badge}
+                      status={Status[info.status as keyof typeof Status]}
+                    />
+                  </Flex>
+                }
+                key={key}
+              >
+                {Object.keys(info)
+                  .filter((x) => x !== 'status')
+                  .map((x) => {
+                    return (
+                      <Flex
+                        key={x}
+                        align="center"
+                        gap={16}
+                        className={styles.text}
+                      >
+                        <b>{upperFirst(lowerCase(x))}:</b>
+                        <Text
+                          className={classNames({
+                            [styles.error]: x === 'error',
+                          })}
+                        >
+                          {toFixed(info[x as keyof Minio]) as any}
+                          {x === 'elapsed' && ' ms'}
+                        </Text>
+                      </Flex>
+                    );
+                  })}
+              </Card>
+            );
+          })}
+        </Flex>
+      </Spin>
+    </section>
+  );
+};
+
+export default SystemInfo;

web/src/pages/user-setting/sidebar/index.less

@@ -1,3 +1,6 @@
 .sideBarWrapper {
   padding-top: 32px;
+  .version {
+    color: rgb(17, 206, 17);
+  }
 }

web/src/pages/user-setting/sidebar/index.tsx

@@ -1,7 +1,7 @@
 import { useSecondPathName } from '@/hooks/routeHook';
 import type { MenuProps } from 'antd';
-import { Menu } from 'antd';
-import React, { useMemo } from 'react';
+import { Flex, Menu } from 'antd';
+import React, { useEffect, useMemo } from 'react';
 import { useNavigate } from 'umi';
 import {
   UserSettingBaseKey,
@@ -10,7 +10,7 @@ import {
 } from '../constants';
 
 import { useTranslate } from '@/hooks/commonHooks';
-import { useLogout } from '@/hooks/userSettingHook';
+import { useFetchSystemVersion, useLogout } from '@/hooks/userSettingHook';
 import styles from './index.less';
 
 type MenuItem = Required<MenuProps>['items'][number];
@@ -20,6 +20,11 @@ const SideBar = () => {
   const pathName = useSecondPathName();
   const logout = useLogout();
   const { t } = useTranslate('setting');
+  const { version, fetchSystemVersion } = useFetchSystemVersion();
+
+  useEffect(() => {
+    fetchSystemVersion();
+  }, [fetchSystemVersion]);
 
   function getItem(
     label: string,
@@ -32,7 +37,14 @@ const SideBar = () => {
       key,
       icon,
       children,
-      label: t(label),
+      label: (
+        <Flex justify={'space-between'}>
+          {t(label)}
+          <span className={styles.version}>
+            {label === 'system' && version}
+          </span>
+        </Flex>
+      ),
       type,
     } as MenuItem;
   }

web/src/routes.ts

@@ -78,6 +78,10 @@ const routes = [
             path: '/user-setting/team',
             component: '@/pages/user-setting/setting-team',
           },
+          {
+            path: '/user-setting/system',
+            component: '@/pages/user-setting/setting-system',
+          },
         ],
       },
       {