From 29cd635cf430b98c7b3133307c3ba5b29dfe5fd9 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Fri, 13 Aug 2021 19:23:58 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=9C=8D=E5=8A=A1=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 shared/cache/utils.ts                         |  4 +-
 shared/index.tsx                              |  1 +
 shared/model/common.ts                        | 19 +++++
 .../components/modals/SettingsView/Status.tsx | 69 +++++++++++++++++++
 .../components/modals/SettingsView/index.tsx  |  6 ++
 5 files changed, 97 insertions(+), 2 deletions(-)
 create mode 100644 shared/model/common.ts
 create mode 100644 web/src/components/modals/SettingsView/Status.tsx

diff --git a/shared/cache/utils.ts b/shared/cache/utils.ts
index 2389d711..e52d2690 100644
--- a/shared/cache/utils.ts
+++ b/shared/cache/utils.ts
@@ -14,10 +14,10 @@ import { queryClient } from './';
 export function buildCachedRequest<
   R extends any,
   F extends (...args: any) => Promise<R>
->(prefix: string, fn: F, options?: FetchQueryOptions): F {
+>(name: string, fn: F, options?: FetchQueryOptions): F {
   return ((...args: any) => {
     return queryClient.fetchQuery(
-      [prefix, JSON.stringify(args)],
+      [name, JSON.stringify(args)],
       () => fn(...args),
       options
     );
diff --git a/shared/index.tsx b/shared/index.tsx
index 322a5b5c..7aa233d0 100644
--- a/shared/index.tsx
+++ b/shared/index.tsx
@@ -47,6 +47,7 @@ export {
 } from './manager/ui';
 
 // model
+export { fetchAvailableServices } from './model/common';
 export { createDMConverse } from './model/converse';
 export {
   addFriendRequest,
diff --git a/shared/model/common.ts b/shared/model/common.ts
new file mode 100644
index 00000000..62267458
--- /dev/null
+++ b/shared/model/common.ts
@@ -0,0 +1,19 @@
+import { request } from '../api/request';
+import { buildCachedRequest } from '../cache/utils';
+
+/**
+ * 获取可用的微服务列表
+ */
+export const fetchAvailableServices = buildCachedRequest(
+  'fetchAvailableServices',
+  async (): Promise<string[]> => {
+    const { data } = await request.get<{
+      nodeID: string;
+      cpu: unknown;
+      memory: unknown;
+      services: string[];
+    }>('/api/gateway/health');
+
+    return data.services;
+  }
+);
diff --git a/web/src/components/modals/SettingsView/Status.tsx b/web/src/components/modals/SettingsView/Status.tsx
new file mode 100644
index 00000000..87338c0f
--- /dev/null
+++ b/web/src/components/modals/SettingsView/Status.tsx
@@ -0,0 +1,69 @@
+import { LoadingSpinner } from '@/components/LoadingSpinner';
+import { Icon } from '@iconify/react';
+import React from 'react';
+import { fetchAvailableServices, t, useAsync } from 'tailchat-shared';
+
+/**
+ * 检查服务列表
+ */
+const SERVICES = [
+  {
+    name: 'user',
+    label: t('用户服务'),
+  },
+  {
+    name: 'chat.message',
+    label: t('聊天服务'),
+  },
+  {
+    name: 'chat.converse',
+    label: t('会话服务'),
+  },
+  {
+    name: 'friend',
+    label: t('好友服务'),
+  },
+  {
+    name: 'group',
+    label: t('群组服务'),
+  },
+  {
+    name: 'group.invite',
+    label: t('群组邀请服务'),
+  },
+];
+
+/**
+ * 服务状态
+ */
+export const SettingsStatus: React.FC = React.memo(() => {
+  const { loading, value: availableServices } = useAsync(async () => {
+    const services = await fetchAvailableServices();
+
+    return services;
+  }, []);
+
+  if (loading) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <div>
+      {SERVICES.map((service) => (
+        <div key={service.name} className="flex items-center">
+          <span className="mr-1">{service.label}:</span>
+          {availableServices?.includes(service.name) ? (
+            <span title={t('当前服务可用')}>
+              <Icon icon="emojione:white-heavy-check-mark" />
+            </span>
+          ) : (
+            <span title={t('服务异常')}>
+              <Icon icon="emojione:cross-mark-button" />
+            </span>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+});
+SettingsStatus.displayName = 'SettingsStatus';
diff --git a/web/src/components/modals/SettingsView/index.tsx b/web/src/components/modals/SettingsView/index.tsx
index c87b8b25..588be1a8 100644
--- a/web/src/components/modals/SettingsView/index.tsx
+++ b/web/src/components/modals/SettingsView/index.tsx
@@ -3,6 +3,7 @@ import { SidebarView, SidebarViewMenuType } from '@/components/SidebarView';
 import React, { useCallback, useMemo } from 'react';
 import { t } from 'tailchat-shared';
 import { SettingsAbout } from './About';
+import { SettingsStatus } from './Status';
 
 interface SettingsViewProps {
   onClose: () => void;
@@ -23,6 +24,11 @@ export const SettingsView: React.FC<SettingsViewProps> = React.memo((props) => {
         type: 'group',
         title: t('通用'),
         children: [
+          {
+            type: 'item',
+            title: t('服务状态'),
+            content: <SettingsStatus />,
+          },
           {
             type: 'item',
             title: t('关于'),