refactor: change public summary display logic

old is recent data, now is monthly data

src/client/components/HealthBar.tsx

@@ -3,7 +3,7 @@ import { cn } from '@/utils/style';
 import clsx from 'clsx';
 import React from 'react';
 
-type HealthStatus = 'health' | 'error' | 'warning' | 'none';
+export type HealthStatus = 'health' | 'error' | 'warning' | 'none';
 
 export interface HealthBarBeat {
   title?: string;

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

@@ -4,6 +4,10 @@ import { bodySchema } from './schema';
 import { Empty } from 'antd';
 import { useTranslation } from '@i18next-toolkit/react';
 import { MonitorListItem } from '../MonitorListItem';
+import { cn } from '@/utils/style';
+import { Tooltip } from '@/components/ui/tooltip';
+import { MonitorHealthBar } from '../MonitorHealthBar';
+import { HealthBar, HealthStatus } from '@/components/HealthBar';
 
 interface StatusPageBodyProps {
   workspaceId: string;
@@ -62,29 +66,90 @@ export const StatusItemMonitor: React.FC<{
   showCurrent: boolean;
   workspaceId: string;
 }> = React.memo((props) => {
-  const { data: list = [], isLoading } = trpc.monitor.getPublicInfo.useQuery({
-    monitorIds: [props.id],
+  const { t } = useTranslation();
+  const { data: info } = trpc.monitor.getPublicInfo.useQuery(
+    {
+      monitorIds: [props.id],
+    },
+    {
+      select: (data) => data[0],
+    }
+  );
+
+  const { data: list = [], isLoading } = trpc.monitor.publicSummary.useQuery({
+    workspaceId: props.workspaceId,
+    monitorId: props.id,
   });
 
   if (isLoading) {
     return null;
   }
 
-  const item = list[0];
-
-  if (!item) {
-    return null;
-  }
-
   return (
-    <MonitorListItem
-      key={item.id}
-      workspaceId={props.workspaceId}
-      monitorId={item.id}
-      monitorName={item.name}
-      monitorType={item.type}
-      showCurrentResponse={props.showCurrent}
-    />
+    <div
+      className={cn(
+        'mb-1 flex items-center overflow-hidden rounded-lg bg-green-500 bg-opacity-0 px-4 py-3 hover:bg-opacity-10'
+      )}
+    >
+      {/* <div>
+        <span
+          className={cn(
+            'inline-block min-w-[62px] rounded-full p-0.5 text-center text-white',
+            upPercent === 100 ? 'bg-green-400' : 'bg-amber-400'
+          )}
+        >
+          {upPercent}%
+        </span>
+      </div> */}
+
+      <div className="flex-1 pl-2">
+        <div className="text-nowrap text-base">{info?.name}</div>
+      </div>
+
+      {/* {props.showCurrent && latestResponse && (
+        <Tooltip title={t('Current')}>
+          <div className="px-2 text-sm text-gray-800 dark:text-gray-400">
+            {latestResponse}
+          </div>
+        </Tooltip>
+      )} */}
+
+      <div className="flex-shrink basis-[260px] items-center overflow-hidden px-1">
+        <HealthBar
+          className="justify-end"
+          size="small"
+          beats={[...list].reverse().map((item) => {
+            let status: HealthStatus = 'none';
+
+            if (item.upRate === 1) {
+              status = 'health';
+            } else if (item.upRate === 0 && item.totalCount === 0) {
+              status = 'none';
+            } else if (item.upCount === 0 && item.totalCount !== 0) {
+              status = 'error';
+            } else {
+              status = 'warning';
+            }
+
+            return {
+              status,
+              title: `${item.day} | (${item.upCount}/${item.totalCount}) ${item.upRate}%`,
+            };
+          })}
+        />
+      </div>
+    </div>
   );
+
+  // return (
+  //   <MonitorListItem
+  //     key={item.id}
+  //     workspaceId={props.workspaceId}
+  //     monitorId={item.id}
+  //     monitorName={item.name}
+  //     monitorType={item.type}
+  //     showCurrentResponse={props.showCurrent}
+  //   />
+  // );
 });
 StatusItemMonitor.displayName = 'StatusItemMonitor';

src/server/model/monitor/index.ts

@@ -1,3 +1,4 @@
+import dayjs from 'dayjs';
 import { prisma } from '../_client.js';
 import { monitorPublicInfoSchema } from '../_schema/monitor.js';
 import { MonitorManager } from './manager.js';
@@ -68,7 +69,7 @@ export function getMonitorRecentData(
     .then((arr) => arr.reverse());
 }
 
-export function getMonitorSummaryWithDay(
+export async function getMonitorSummaryWithDay(
   monitorId: string,
   beforeDay: number = 30
 ) {
@@ -79,7 +80,7 @@ export function getMonitorSummaryWithDay(
     up_rate: number;
   }
 
-  return prisma.$queryRaw<MonitorSummaryItem[]>`
+  const list = await prisma.$queryRaw<MonitorSummaryItem[]>`
     SELECT
       DATE("createdAt") AS day,
       COUNT(1) AS total_count,
@@ -94,4 +95,30 @@ export function getMonitorSummaryWithDay(
       DATE("createdAt")
     ORDER BY
       day;`;
+
+  const map: Record<string, MonitorSummaryItem> = {};
+  for (const item of list) {
+    const date = dayjs(item.day).format('YYYY-MM-DD');
+    map[date] = item;
+  }
+
+  return Array.from({ length: beforeDay }).map((_, i) => {
+    const target = dayjs().subtract(i, 'days').format('YYYY-MM-DD');
+
+    if (map[target]) {
+      return {
+        day: target,
+        totalCount: Number(map[target].total_count),
+        upCount: Number(map[target].up_count),
+        upRate: Number(Number(map[target].up_rate).toFixed(1)),
+      };
+    } else {
+      return {
+        day: target,
+        totalCount: 0,
+        upCount: 0,
+        upRate: 0,
+      };
+    }
+  });
 }

src/server/trpc/routers/monitor.ts

@@ -11,6 +11,7 @@ import {
   getMonitorData,
   getMonitorPublicInfos,
   getMonitorRecentData,
+  getMonitorSummaryWithDay,
   monitorManager,
 } from '../../model/monitor/index.js';
 import dayjs from 'dayjs';
@@ -330,6 +331,36 @@ export const monitorRouter = router({
 
       return getMonitorRecentData(workspaceId, monitorId, take);
     }),
+  publicSummary: publicProcedure
+    .meta(
+      buildMonitorOpenapi({
+        method: 'GET',
+        protect: false,
+        path: '/{monitorId}/publicSummary',
+      })
+    )
+    .input(
+      z.object({
+        workspaceId: z.string().cuid2(),
+        monitorId: z.string().cuid2(),
+      })
+    )
+    .output(
+      z.array(
+        z.object({
+          day: z.string(),
+          totalCount: z.number(),
+          upCount: z.number(),
+          upRate: z.number(),
+        })
+      )
+    )
+    .query(async ({ input }) => {
+      const { monitorId } = input;
+      const summary = await getMonitorSummaryWithDay(monitorId, 30);
+
+      return summary;
+    }),
   dataMetrics: workspaceProcedure
     .meta(
       buildMonitorOpenapi({