Feat: Displays the loading status of the data flow log #9869 (#10347)

### What problem does this PR solve?

Feat: Displays the loading status of the data flow log #9869

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/data-flow/hooks/use-cancel-dataflow.ts

@@ -3,19 +3,19 @@ import { useCallback } from 'react';
 
 export function useCancelCurrentDataflow({
   messageId,
-  setMessageId,
+  stopFetchTrace,
 }: {
   messageId: string;
-  setMessageId: (messageId: string) => void;
+  stopFetchTrace(): void;
 }) {
   const { cancelDataflow } = useCancelDataflow();
 
   const handleCancel = useCallback(async () => {
     const code = await cancelDataflow(messageId);
     if (code === 0) {
-      setMessageId('');
+      stopFetchTrace();
     }
-  }, [cancelDataflow, messageId, setMessageId]);
+  }, [cancelDataflow, messageId, stopFetchTrace]);
 
   return { handleCancel };
 }