Update admin service status navigation

Author: sunnylqm

src/components/top-navigation.tsx

@@ -89,11 +89,55 @@ export default function TopNavigation({
   const { user } = useUserInfo();
   const { pathname } = useLocation();
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [appDrawerPlacement, setAppDrawerPlacementState] = useState(
+    getManageAppDrawerPlacement,
+  );
   const selectedKeys = useMemo(() => getSelectedKeys(pathname), [pathname]);
+  const shouldShowAppsTopTab =
+    showAuthenticatedChrome &&
+    user &&
+    !isMobile &&
+    appDrawerPlacement !== 'hidden';
+
+  useEffect(() => {
+    const syncPlacement = () => {
+      setAppDrawerPlacementState(getManageAppDrawerPlacement());
+    };
+
+    window.addEventListener(manageAppDrawerPlacementChangeEvent, syncPlacement);
+    window.addEventListener('storage', syncPlacement);
+    return () => {
+      window.removeEventListener(
+        manageAppDrawerPlacementChangeEvent,
+        syncPlacement,
+      );
+      window.removeEventListener('storage', syncPlacement);
+    };
+  }, []);
 
   const authenticatedItems: MenuItems =
     showAuthenticatedChrome && user
       ? [
+          ...(shouldShowAppsTopTab
+            ? [
+                {
+                  key: 'apps',
+                  icon: <AppstoreOutlined />,
+                  label: <Link to={rootRouterPath.apps}>应用列表</Link>,
+                },
+              ]
+            : []),
+          ...(user.admin
+            ? [
+                {
+                  key: 'admin-service-status',
+                  icon: <DashboardOutlined />,
+                  label: (
+                    <Link to={rootRouterPath.adminServiceStatus}>服务状态</Link>
+                  ),
+                },
+              ]
+            : []),
           {
             key: 'audit-logs',
             icon: <FileTextOutlined />,
@@ -140,15 +184,6 @@ export default function TopNavigation({
                         <Link to={rootRouterPath.adminMetrics}>全局统计</Link>
                       ),
                     },
-                    {
-                      key: 'admin-service-status',
-                      icon: <DashboardOutlined />,
-                      label: (
-                        <Link to={rootRouterPath.adminServiceStatus}>
-                          服务状态
-                        </Link>
-                      ),
-                    },
                   ],
                 },
               ]
@@ -174,7 +209,10 @@ export default function TopNavigation({
 
   return (
     <div className="flex min-h-16 w-full min-w-0 items-center gap-1.5 md:gap-3">
-      <Link to="/" className="flex shrink-0 items-center no-underline">
+      <Link
+        to={rootRouterPath.home}
+        className="flex shrink-0 items-center no-underline"
+      >
         <LogoH className="h-7 w-auto max-w-[88px] sm:max-w-[130px] md:max-w-[150px]" />
       </Link>
       {showAuthenticatedChrome && user && <AppSwitcher compact={isMobile} />}
@@ -660,6 +698,9 @@ function formatAppKey(appKey?: string | null) {
 }
 
 function getSelectedKeys(pathname: string) {
+  if (pathname === rootRouterPath.home || pathname === rootRouterPath.apps) {
+    return ['apps'];
+  }
   if (pathname === rootRouterPath.user) {
     return ['user'];
   }

src/globals.d.ts

@@ -23,21 +23,27 @@ declare module '*.css' {
 
 declare module 'bun:test' {
   type TestHandler = () => void | Promise<void>;
-
-  export function describe(name: string, fn: TestHandler): void;
-  export function it(name: string, fn: TestHandler): void;
-  export function test(name: string, fn: TestHandler): void;
-  export function expect<T>(actual: T): {
+  type ExpectAssertions = {
     toBe(expected: unknown): void;
+    toBeGreaterThan(expected: number): void;
     toBeNull(): void;
     toContain(expected: unknown): void;
+    toEqual(expected: unknown): void;
     toHaveBeenCalledWith(...args: unknown[]): void;
     toHaveBeenCalled(): void;
-    not: {
-      toHaveBeenCalledWith(...args: unknown[]): void;
-      toHaveBeenCalled(): void;
-    };
+    toHaveLength(expected: number): void;
+    toThrow(expected?: unknown): void;
+  };
+  type ExpectMatchers = ExpectAssertions & {
+    not: ExpectAssertions;
+    rejects: ExpectAssertions;
+    resolves: ExpectAssertions;
   };
+
+  export function describe(name: string, fn: TestHandler): void;
+  export function it(name: string, fn: TestHandler): void;
+  export function test(name: string, fn: TestHandler): void;
+  export function expect<T>(actual: T): ExpectMatchers;
   export function beforeEach(fn: () => void | Promise<void>): void;
   export function afterEach(fn: () => void | Promise<void>): void;
   export function setSystemTime(time: Date | number | null): void;

src/pages/admin-service-status.tsx

@@ -9,12 +9,13 @@ import {
   Spin,
   Statistic,
   Table,
+  Tabs,
   Tag,
   Typography,
 } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import dayjs from 'dayjs';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import {
   api,
   type InternalMetricCounter,
@@ -53,6 +54,48 @@ type EndpointRow = {
   total: number;
 };
 
+const SERVICE_STATUS_TARGETS = [
+  {
+    key: 'jd1',
+    label: 'jd1',
+    host: '1.rnupdate.online',
+    baseUrl: 'https://1.rnupdate.online/api',
+  },
+  {
+    key: 'jd2',
+    label: 'jd2',
+    host: '2.rnupdate.online',
+    baseUrl: 'https://2.rnupdate.online/api',
+  },
+  {
+    key: 'jd3',
+    label: 'jd3',
+    host: '3.rnupdate.online',
+    baseUrl: 'https://3.rnupdate.online/api',
+  },
+  {
+    key: 'jd4',
+    label: 'jd4',
+    host: '4.rnupdate.online',
+    baseUrl: 'https://4.rnupdate.online/api',
+  },
+  {
+    key: 's1',
+    label: 's1',
+    host: 's1.reactnative.cn',
+    baseUrl: 'https://s1.reactnative.cn/api',
+  },
+  {
+    key: 'p',
+    label: 'p',
+    host: 'p.reactnative.cn',
+    baseUrl: 'https://p.reactnative.cn/api',
+  },
+] as const;
+
+type ServiceStatusTarget = (typeof SERVICE_STATUS_TARGETS)[number];
+type ServiceStatusTargetKey = ServiceStatusTarget['key'];
+
 const counterLabels: Record<string, string> = {
   'api.request.error': '5xx',
   'api.request.total': '请求',
@@ -449,15 +492,19 @@ const endpointColumns: ColumnsType<EndpointRow> = [
   },
 ];
 
-export const Component = () => {
+function ServiceStatusPanel({ target }: { target: ServiceStatusTarget }) {
   const {
     data: snapshot,
     error,
     isFetching,
     refetch,
   } = useQuery({
-    queryFn: () => api.getInternalMetrics(),
-    queryKey: ['internalMetrics'],
+    queryFn: () =>
+      api.getInternalMetrics({
+        baseUrl: target.baseUrl,
+        suppressErrorToast: true,
+      }),
+    queryKey: ['internalMetrics', target.key],
     refetchInterval: 30_000,
   });
 
@@ -505,13 +552,14 @@ export const Component = () => {
       : 0;
 
   return (
-    <div className="page-section">
+    <>
       <div className="mb-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
         <div>
-          <Title level={4} className="m-0!">
-            服务状态
+          <Title level={5} className="m-0!">
+            {target.label}
           </Title>
           <div className="mt-1 flex flex-wrap gap-2">
+            <Tag>{target.host}</Tag>
             {snapshot?.generatedAt && (
               <Tag>
                 {dayjs(snapshot.generatedAt).format('YYYY-MM-DD HH:mm:ss')}
@@ -638,6 +686,42 @@ export const Component = () => {
           />
         </Card>
       </Spin>
+    </>
+  );
+}
+
+export const Component = () => {
+  const [activeTargetKey, setActiveTargetKey] =
+    useState<ServiceStatusTargetKey>(SERVICE_STATUS_TARGETS[0].key);
+  const activeTarget =
+    SERVICE_STATUS_TARGETS.find((target) => target.key === activeTargetKey) ??
+    SERVICE_STATUS_TARGETS[0];
+
+  return (
+    <div className="page-section">
+      <div className="mb-4">
+        <Title level={4} className="m-0!">
+          服务状态
+        </Title>
+        <Text type="secondary">按节点查看内部指标和运行状态。</Text>
+      </div>
+      <Tabs
+        activeKey={activeTarget.key}
+        className="mb-4"
+        items={SERVICE_STATUS_TARGETS.map((target) => ({
+          key: target.key,
+          label: (
+            <span className="inline-flex items-center gap-2">
+              <span>{target.label}</span>
+              <span className="hidden text-xs text-slate-400 md:inline">
+                {target.host}
+              </span>
+            </span>
+          ),
+        }))}
+        onChange={(key) => setActiveTargetKey(key as ServiceStatusTargetKey)}
+      />
+      <ServiceStatusPanel key={activeTarget.key} target={activeTarget} />
     </div>
   );
 };

src/pages/home.tsx

@@ -0,0 +1,23 @@
+import { Spin } from 'antd';
+import { Navigate } from 'react-router-dom';
+import { rootRouterPath } from '@/router';
+import { useUserInfo } from '@/utils/hooks';
+
+export const Component = () => {
+  const { isLoading, user } = useUserInfo();
+
+  if (isLoading || user === undefined) {
+    return (
+      <div className="page-section flex min-h-64 items-center justify-center">
+        <Spin />
+      </div>
+    );
+  }
+
+  return (
+    <Navigate
+      replace
+      to={user?.admin ? rootRouterPath.adminServiceStatus : rootRouterPath.apps}
+    />
+  );
+};

src/router.tsx

@@ -5,7 +5,8 @@ import { getToken } from './services/request';
 // import './utils/notice';
 
 export const rootRouterPath = {
-  apps: '/',
+  home: '/',
+  apps: '/apps',
   user: '/user',
   versions: (id: string) => `/apps/${id}`,
   resetPassword: (step: string) => `/reset-password/${step}`,
@@ -42,13 +43,13 @@ export const needAuthLoader = ({ request }: { request: Request }) => {
 
 function resolveAuthenticatedRedirect(loginFrom?: string | null) {
   if (!loginFrom?.startsWith('/') || loginFrom.startsWith('//')) {
-    return rootRouterPath.apps;
+    return rootRouterPath.home;
   }
   if (
     loginFrom === rootRouterPath.login ||
     loginFrom.startsWith(`${rootRouterPath.login}?`)
   ) {
-    return rootRouterPath.apps;
+    return rootRouterPath.home;
   }
   return loginFrom;
 }
@@ -72,7 +73,7 @@ export const router = createHashRouter([
       {
         index: true,
         loader: needAuthLoader,
-        lazy: () => import('./pages/apps'),
+        lazy: () => import('./pages/home'),
       },
       {
         path: 'apps',

src/services/api.ts

@@ -441,8 +441,14 @@ export const api = {
       'get',
       `/metrics/app?appKey=${encodeURIComponent(params.appKey)}&start=${encodeURIComponent(params.start)}&end=${encodeURIComponent(params.end)}`,
     ),
-  getInternalMetrics: () =>
-    request<InternalMetricsResponse>('get', '/metrics/internal'),
+  getInternalMetrics: (params?: {
+    baseUrl?: string;
+    suppressErrorToast?: boolean;
+  }) =>
+    request<InternalMetricsResponse>('get', '/metrics/internal', undefined, {
+      baseUrl: params?.baseUrl,
+      suppressErrorToast: params?.suppressErrorToast,
+    }),
   // API Token
   createApiToken: (params: {
     name: string;

src/services/auth.test.ts

@@ -16,7 +16,8 @@ const mockRouterObj = {
 
 mock.module('@/router', () => ({
   rootRouterPath: {
-    apps: '/',
+    apps: '/apps',
+    home: '/',
     inactivated: '/inactivated',
     login: '/login',
   },

src/services/auth.ts

@@ -18,13 +18,13 @@ function getSearchParam(name: string) {
 
 function resolveLoginFrom(loginFrom?: string | null) {
   if (!loginFrom?.startsWith('/') || loginFrom.startsWith('//')) {
-    return rootRouterPath.apps;
+    return rootRouterPath.home;
   }
   if (
     loginFrom === rootRouterPath.login ||
     loginFrom.startsWith(`${rootRouterPath.login}?`)
   ) {
-    return rootRouterPath.apps;
+    return rootRouterPath.home;
   }
   return loginFrom;
 }

src/services/request.ts

@@ -54,6 +54,7 @@ export class RequestError extends Error {
 }
 
 export interface RequestOptions {
+  baseUrl?: string;
   suppressErrorToast?: boolean;
 }
 
@@ -65,8 +66,8 @@ export default async function request<T extends Record<any, any>>(
 ) {
   const headers: HeadersInit = {};
   const options: RequestInit = { method, headers };
-  const baseUrl = await getBaseUrl;
-  let url = `${baseUrl}${path}`;
+  const baseUrl = requestOptions.baseUrl ?? (await getBaseUrl);
+  let url = `${baseUrl.replace(/\/$/, '')}${path}`;
   if (_token) {
     headers['x-accesstoken'] = _token;
   }