feat: add monitor edit feature

src/client/api/model/monitor.ts

@@ -1,16 +1,12 @@
-import { useQueryClient } from '@tanstack/react-query';
+import { defaultErrorHandler, defaultSuccessHandler, trpc } from '../trpc';
-import {
-  defaultErrorHandler,
-  defaultSuccessHandler,
-  getQueryKey,
-  trpc,
-} from '../trpc';
 
 export function useMonitorUpsert() {
-  const queryClient = useQueryClient();
+  const context = trpc.useContext();
   const mutation = trpc.monitor.upsert.useMutation({
     onSuccess: (data) => {
-      queryClient.resetQueries(getQueryKey(trpc.monitor.all));
+      context.monitor.all.reset({
+        workspaceId: data.workspaceId,
+      });
 
       defaultSuccessHandler();
     },

src/client/components/monitor/MonitorInfo.tsx

@@ -1,4 +1,4 @@
-import { Card, Select, Space } from 'antd';
+import { Button, Card, Select, Space, Spin } from 'antd';
 import dayjs, { Dayjs } from 'dayjs';
 import React, { useMemo, useState } from 'react';
 import { trpc } from '../../api/trpc';
@@ -13,6 +13,7 @@ import { useSocketSubscribeList } from '../../api/socketio';
 import { last, uniqBy } from 'lodash-es';
 import { ErrorTip } from '../ErrorTip';
 import { ColorTag } from '../ColorTag';
+import { useNavigate } from 'react-router';
 
 interface MonitorInfoProps {
   monitorId: string;
@@ -21,13 +22,18 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
   const workspaceId = useCurrentWorkspaceId();
   const { monitorId } = props;
   const [currectResponse, setCurrentResponse] = useState(0);
+  const navigate = useNavigate();
 
-  const { data: monitorInfo, isLoading } = trpc.monitor.get.useQuery({
+  const {
+    data: monitorInfo,
+    isInitialLoading,
+    isLoading,
+  } = trpc.monitor.get.useQuery({
     workspaceId,
     id: monitorId,
   });
 
-  if (isLoading) {
+  if (isInitialLoading) {
     return <Loading />;
   }
 
@@ -36,7 +42,7 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
   }
 
   return (
-    <div>
+    <Spin spinning={isLoading}>
       <Space className="w-full" direction="vertical">
         <div className="flex justify-between">
           <Space direction="vertical">
@@ -56,6 +62,17 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
           </div>
         </div>
 
+        <div>
+          <Button
+            type="primary"
+            onClick={() => {
+              navigate(`/monitor/${monitorInfo.id}/edit`);
+            }}
+          >
+            Edit
+          </Button>
+        </div>
+
         <Card>
           <MonitorHealthBar
             monitorId={monitorId}
@@ -79,7 +96,7 @@ export const MonitorInfo: React.FC<MonitorInfoProps> = React.memo((props) => {
           <MonitorDataChart monitorId={monitorId} />
         </Card>
       </Space>
-    </div>
+    </Spin>
   );
 });
 MonitorInfo.displayName = 'MonitorInfo';

src/client/pages/Monitor/Edit.tsx

@@ -33,11 +33,11 @@ export const MonitorEdit: React.FC = React.memo(() => {
       <MonitorInfoEditor
         initialValues={monitor as MonitorInfoEditorValues}
         onSave={async (value) => {
-          await mutation.mutateAsync({
+          const monitor = await mutation.mutateAsync({
             ...value,
             workspaceId: currentWorkspaceId,
           });
-          navigate('/monitor', { replace: true });
+          navigate(`/monitor/${monitor.id}`, { replace: true });
         }}
       />
     </div>