refactor: use MonitorListItem to replace MonitorHealthBar to show more info

src/client/components/monitor/StatusPage/Services.tsx

@@ -1,6 +1,8 @@
 import { Empty } from 'antd';
 import React from 'react';
-import { MonitorHealthBar } from '../MonitorHealthBar';
+import { trpc } from '../../../api/trpc';
+import { Loading } from '../../Loading';
+import { MonitorListItem } from '../MonitorListItem';
 
 interface StatusPageServicesProps {
   workspaceId: string;
@@ -10,17 +12,23 @@ export const StatusPageServices: React.FC<StatusPageServicesProps> = React.memo(
   (props) => {
     const { workspaceId, monitorList } = props;
 
+    const { data: list = [], isLoading } = trpc.monitor.getPublicInfo.useQuery({
+      monitorIds: monitorList.map((item) => item.id),
+    });
+
+    if (isLoading) {
+      return <Loading />;
+    }
+
     return (
       <div className="shadow-2xl p-2.5 flex flex-col gap-4">
-        {monitorList.length > 0 ? (
+        {list.length > 0 ? (
-          monitorList.map((item) => (
+          list.map((item) => (
             <div key={item.id} className="hover:bg-black hover:bg-opacity-20">
-              <MonitorHealthBar
+              <MonitorListItem
                 workspaceId={workspaceId}
                 monitorId={item.id}
-                count={40}
+                monitorName={item.name}
-                size="large"
-                showCurrentStatus={true}
               />
             </div>
           ))

src/server/trpc/routers/monitor.ts

@@ -8,7 +8,10 @@ import {
 import { prisma } from '../../model/_client';
 import { z } from 'zod';
 import { monitorManager } from '../../model/monitor';
-import { MonitorInfoWithNotificationIds } from '../../../types';
+import {
+  MonitorInfoWithNotificationIds,
+  MonitorPublicInfoSchema,
+} from '../../../types';
 import dayjs from 'dayjs';
 import {
   monitorEventSchema,
@@ -77,6 +80,33 @@ export const monitorRouter = router({
 
       return monitor;
     }),
+  getPublicInfo: publicProcedure
+    .meta({
+      openapi: {
+        tags: [OPENAPI_TAG.MONITOR],
+        protect: false,
+        method: 'POST',
+        path: '/monitor/getPublicInfo',
+      },
+    })
+    .input(
+      z.object({
+        monitorIds: z.array(z.string()),
+      })
+    )
+    .output(z.array(MonitorPublicInfoSchema))
+    .query(async ({ input }) => {
+      const { monitorIds } = input;
+      const res = await prisma.monitor.findMany({
+        where: {
+          id: {
+            in: monitorIds,
+          },
+        },
+      });
+
+      return res.map((item) => MonitorPublicInfoSchema.parse(item));
+    }),
   upsert: workspaceOwnerProcedure
     .meta(
       buildMonitorOpenapi({

src/types/index.ts

@@ -1,7 +1,7 @@
+export * as schemas from '../../prisma/zod/index';
 export * from './server';
 export * from './monitor';
 export * from './utils';
-export * as schemas from '../../prisma/zod/index';
 
 declare global {
   namespace PrismaJson {

src/types/monitor.ts

@@ -1,5 +1,6 @@
 import type { Monitor } from '@prisma/client';
 import { ExactType } from './utils';
+import { schemas } from '.';
 
 export type MonitorInfo = ExactType<
   Monitor,
@@ -11,3 +12,8 @@ export type MonitorInfo = ExactType<
 export type MonitorInfoWithNotificationIds = MonitorInfo & {
   notifications: { id: string }[];
 };
+
+export const MonitorPublicInfoSchema = schemas.MonitorModelSchema.pick({
+  id: true,
+  name: true,
+});