refactor: change status page data scope

src/client/api/socketio.ts

@@ -4,6 +4,7 @@ import type { SubscribeEventMap, SocketEventMap } from '../../server/ws/shared';
 import { create } from 'zustand';
 import { useEvent } from '../hooks/useEvent';
 import { useEffect, useReducer, useState } from 'react';
+import { useIsLogined, useUserInfo } from '../store/user';
 
 const useSocketStore = create<{
   socket: Socket | null;
@@ -120,6 +121,7 @@ export function useSocketSubscribeList<
 >(name: K, options: UseSocketSubscribeListOptions<K, T> = {}): T[] {
   const { filter = defaultFilter } = options;
   const { subscribe } = useSocket();
+  const isLogined = useIsLogined();
   const [list, push] = useReducer(
     (state: T[], data: T) => [...state, data],
     [] as T[]
@@ -132,6 +134,11 @@ export function useSocketSubscribeList<
   });
 
   useEffect(() => {
+    if (!isLogined) {
+      console.warn('Skip socket subscribe login because of not login');
+      return;
+    }
+
     const unsubscribe = subscribe(name, cb);
 
     return () => {

src/client/components/monitor/MonitorListItem.tsx

@@ -37,7 +37,8 @@ export const MonitorListItem: React.FC<{
     <div
       className={clsx(
         className,
-        'flex rounded-lg py-3 px-4 cursor-pointer mb-1 bg-green-500 bg-opacity-0 hover:bg-opacity-10'
+        'flex rounded-lg py-3 px-4 mb-1 bg-green-500 bg-opacity-0 hover:bg-opacity-10',
+        onClick && 'cursor-pointer'
       )}
       onClick={onClick}
     >

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

@@ -24,13 +24,12 @@ export const StatusPageServices: React.FC<StatusPageServicesProps> = React.memo(
       <div className="shadow-2xl p-2.5 flex flex-col gap-4">
         {list.length > 0 ? (
           list.map((item) => (
-            <div key={item.id} className="hover:bg-black hover:bg-opacity-20">
             <MonitorListItem
+              key={item.id}
               workspaceId={workspaceId}
               monitorId={item.id}
               monitorName={item.name}
             />
-            </div>
           ))
         ) : (
           <Empty description="No any monitor has been set" />

src/client/store/user.ts

@@ -35,6 +35,10 @@ export function useUserInfo(): UserLoginInfo | null {
   return useUserStore((state) => state.info);
 }
 
+export function useIsLogined() {
+  return !!useUserInfo();
+}
+
 export function useCurrentWorkspace() {
   const currentWorkspace = useUserStore(
     (state) => state.info?.currentWorkspace

src/server/trpc/routers/monitor.ts

@@ -256,15 +256,18 @@ export const monitorRouter = router({
 
       return monitor;
     }),
-  recentData: workspaceProcedure
-    .meta(
-      buildMonitorOpenapi({
+  recentData: publicProcedure
+    .meta({
+      openapi: {
+        tags: [OPENAPI_TAG.MONITOR],
+        protect: false,
         method: 'GET',
-        path: '/{monitorId}/recentData',
+        path: `/monitor/{monitorId}/recentData`,
+      },
     })
-    )
     .input(
       z.object({
+        workspaceId: z.string().cuid2(),
         monitorId: z.string().cuid2(),
         take: z.number(),
       })