feat: add MonitorLatestResponse and up status summary

src/client/components/HealthBar.tsx

@@ -1,10 +1,9 @@
 import { useResizeObserver } from '@/hooks/useResizeObserver';
+import { getStatusBgColorClassName, HealthStatus } from '@/utils/health';
 import { cn } from '@/utils/style';
 import clsx from 'clsx';
 import React from 'react';
 
-export type HealthStatus = 'health' | 'error' | 'warning' | 'none';
-
 export interface HealthBarBeat {
   title?: string;
   status: HealthStatus;
@@ -52,12 +51,7 @@ export const HealthBar: React.FC<HealthBarProps> = React.memo((props) => {
                 'h-4 w-[5px]': size === 'small',
                 'h-8 w-2': size === 'large',
               },
-              {
-                'bg-green-500': beat.status === 'health',
-                'bg-red-600': beat.status === 'error',
-                'bg-yellow-400': beat.status === 'warning',
-                'bg-gray-400': beat.status === 'none',
-              }
+              getStatusBgColorClassName(beat.status)
             )}
           />
         ))}

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

@@ -3,11 +3,18 @@ import React, { useMemo } from 'react';
 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';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { HealthBar } from '@/components/HealthBar';
+import { getMonitorProvider, getProviderDisplay } from '../provider';
+import {
+  getStatusBgColorClassName,
+  parseHealthStatusByPercent,
+} from '@/utils/health';
 
 interface StatusPageBodyProps {
   workspaceId: string;
@@ -66,7 +73,6 @@ export const StatusItemMonitor: React.FC<{
   showCurrent: boolean;
   workspaceId: string;
 }> = React.memo((props) => {
-  const { t } = useTranslation();
   const { data: info } = trpc.monitor.getPublicInfo.useQuery(
     {
       monitorIds: [props.id],
@@ -81,6 +87,22 @@ export const StatusItemMonitor: React.FC<{
     monitorId: props.id,
   });
 
+  const { summaryStatus, summaryPercent } = useMemo(() => {
+    let upCount = 0;
+    let totalCount = 0;
+    list.forEach((item) => {
+      upCount += item.upCount;
+      totalCount += item.totalCount;
+    });
+
+    const percent = Number(((upCount / totalCount) * 100).toFixed(1));
+
+    return {
+      summaryPercent: percent,
+      summaryStatus: parseHealthStatusByPercent(percent, totalCount),
+    };
+  }, [list]);
+
   if (isLoading) {
     return null;
   }
@@ -91,45 +113,38 @@ export const StatusItemMonitor: React.FC<{
         'mb-1 flex items-center overflow-hidden rounded-lg bg-green-500 bg-opacity-0 px-4 py-3 hover:bg-opacity-10'
       )}
     >
-      {/* <div>
+      <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'
+            getStatusBgColorClassName(summaryStatus)
           )}
         >
-          {upPercent}%
+          {summaryPercent}%
         </span>
-      </div> */}
+      </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>
-      )} */}
+      {props.showCurrent && info && (
+        <MonitorLatestResponse
+          workspaceId={props.workspaceId}
+          monitorId={info.id}
+          monitorType={info.type}
+        />
+      )}
 
-      <div className="flex-shrink basis-[260px] items-center overflow-hidden px-1">
+      <div className="flex-shrink basis-[250px] 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';
-            }
+            const status = parseHealthStatusByPercent(
+              item.upRate,
+              item.totalCount
+            );
 
             return {
               status,
@@ -140,16 +155,47 @@ export const StatusItemMonitor: React.FC<{
       </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';
+
+const MonitorLatestResponse: React.FC<{
+  workspaceId: string;
+  monitorId: string;
+  monitorType: string;
+}> = React.memo((props) => {
+  const { t } = useTranslation();
+  const { data: recentText } = trpc.monitor.recentData.useQuery(
+    {
+      workspaceId: props.workspaceId,
+      monitorId: props.monitorId,
+      take: 1,
+    },
+    {
+      select: (data) => {
+        const provider = getMonitorProvider(props.monitorType);
+
+        const value = data[0].value;
+
+        if (!value) {
+          return '';
+        }
+
+        const { text } = getProviderDisplay(value, provider);
+
+        return text;
+      },
+    }
+  );
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild={true}>
+        <div className="px-2 text-sm text-gray-800 dark:text-gray-400">
+          {recentText}
+        </div>
+      </TooltipTrigger>
+      <TooltipContent>{t('Current')}</TooltipContent>
+    </Tooltip>
+  );
+});
+MonitorLatestResponse.displayName = 'MonitorLatestResponse';

src/client/utils/health.spec.ts

@@ -0,0 +1,45 @@
+import { describe, test, expect } from 'vitest';
+import {
+  parseHealthStatusByPercent,
+  getStatusBgColorClassName,
+} from './health';
+
+describe('parseHealthStatusByPercent', () => {
+  test('should return "health" when percent is 100', () => {
+    expect(parseHealthStatusByPercent(100, 0)).toEqual('health');
+  });
+
+  test('should return "none" when percent is 0 and count is 0', () => {
+    expect(parseHealthStatusByPercent(0, 0)).toEqual('none');
+  });
+
+  test('should return "error" when percent is 0 and count is not 0', () => {
+    expect(parseHealthStatusByPercent(0, 1)).toEqual('error');
+  });
+
+  test('should return "warning" for other cases', () => {
+    expect(parseHealthStatusByPercent(50, 1)).toEqual('warning');
+  });
+});
+
+describe('getStatusBgColorClassName', () => {
+  test('should return bg-green-500 for health status', () => {
+    expect(getStatusBgColorClassName('health')).toEqual('bg-green-500');
+  });
+
+  test('should return bg-red-600 for error status', () => {
+    expect(getStatusBgColorClassName('error')).toEqual('bg-red-600');
+  });
+
+  test('should return bg-yellow-400 for warning status', () => {
+    expect(getStatusBgColorClassName('warning')).toEqual('bg-yellow-400');
+  });
+
+  test('should return bg-gray-400 for none status', () => {
+    expect(getStatusBgColorClassName('none')).toEqual('bg-gray-400');
+  });
+
+  test('should return empty string for other status', () => {
+    expect(getStatusBgColorClassName('other' as any)).toEqual('');
+  });
+});

src/client/utils/health.ts

@@ -0,0 +1,36 @@
+export type HealthStatus = 'health' | 'error' | 'warning' | 'none';
+
+/**
+ *
+ * @param percent 0 - 100
+ * @param count
+ * @returns
+ */
+export function parseHealthStatusByPercent(
+  percent: number,
+  count: number
+): HealthStatus {
+  if (percent === 100) {
+    return 'health';
+  } else if (percent === 0 && count === 0) {
+    return 'none';
+  } else if (percent === 0 && count !== 0) {
+    return 'error';
+  } else {
+    return 'warning';
+  }
+}
+
+export function getStatusBgColorClassName(status: HealthStatus): string {
+  if (status === 'health') {
+    return 'bg-green-500';
+  } else if (status === 'error') {
+    return 'bg-red-600';
+  } else if (status === 'warning') {
+    return 'bg-yellow-400';
+  } else if (status === 'none') {
+    return 'bg-gray-400';
+  } else {
+    return '';
+  }
+}