Feat: Exporting the results of data flow tests #9869 (#10209)

### What problem does this PR solve?

Feat: Exporting the results of data flow tests #9869

### Type of change


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

web/src/pages/data-flow/hooks/use-download-output.ts

@@ -0,0 +1,35 @@
+import { ITraceData } from '@/interfaces/database/agent';
+import { downloadJsonFile } from '@/utils/file-util';
+import { get, isEmpty } from 'lodash';
+import { useCallback } from 'react';
+
+export function findEndOutput(list?: ITraceData[]) {
+  if (Array.isArray(list)) {
+    const trace = list.find((x) => x.component_id === 'END')?.trace;
+
+    const str = get(trace, '0.message');
+
+    try {
+      if (!isEmpty(str)) {
+        const json = JSON.parse(str);
+        return json;
+      }
+    } catch (error) {}
+  }
+}
+
+export function isEndOutputEmpty(list?: ITraceData[]) {
+  return isEmpty(findEndOutput(list));
+}
+export function useDownloadOutput(data?: ITraceData[]) {
+  const handleDownloadJson = useCallback(() => {
+    const output = findEndOutput(data);
+    if (!isEndOutputEmpty(data)) {
+      downloadJsonFile(output, `output.json`);
+    }
+  }, [data]);
+
+  return {
+    handleDownloadJson,
+  };
+}

web/src/pages/data-flow/log-sheet/dataflow-timeline.tsx

@@ -8,9 +8,8 @@ import {
   TimelineSeparator,
   TimelineTitle,
 } from '@/components/originui/timeline';
-import { useFetchMessageTrace } from '@/hooks/use-agent-request';
+import { ITraceData } from '@/interfaces/database/agent';
 import { Aperture } from 'lucide-react';
-import { useEffect } from 'react';
 
 const items = [
   {
@@ -50,7 +49,9 @@ const items = [
   },
 ];
 
-export type DataflowTimelineProps = { messageId: string };
+export type DataflowTimelineProps = {
+  traceList?: ITraceData[];
+};
 
 interface DataflowTrace {
   datetime: string;
@@ -59,15 +60,7 @@ interface DataflowTrace {
   progress: number;
   timestamp: number;
 }
-export function DataflowTimeline({ messageId }: DataflowTimelineProps) {
+export function DataflowTimeline({ traceList }: DataflowTimelineProps) {
-  const { setMessageId, data } = useFetchMessageTrace(false);
-
-  useEffect(() => {
-    if (messageId) {
-      setMessageId(messageId);
-    }
-  }, [messageId, setMessageId]);
-
   return (
     <Timeline>
       {items.map((item) => (

web/src/pages/data-flow/log-sheet/index.tsx

@@ -1,28 +1,54 @@
+import { Button } from '@/components/ui/button';
 import {
   Sheet,
   SheetContent,
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { useFetchMessageTrace } from '@/hooks/use-agent-request';
 import { IModalProps } from '@/interfaces/common';
 import { cn } from '@/lib/utils';
-import { NotebookText } from 'lucide-react';
+import { NotebookText, SquareArrowOutUpRight } from 'lucide-react';
+import { useEffect } from 'react';
 import 'react18-json-view/src/style.css';
-import { DataflowTimeline, DataflowTimelineProps } from './dataflow-timeline';
+import {
+  isEndOutputEmpty,
+  useDownloadOutput,
+} from '../hooks/use-download-output';
+import { DataflowTimeline } from './dataflow-timeline';
 
-type LogSheetProps = IModalProps<any> & DataflowTimelineProps;
+type LogSheetProps = IModalProps<any> & { messageId?: string };
 
 export function LogSheet({ hideModal, messageId }: LogSheetProps) {
+  const { setMessageId, data } = useFetchMessageTrace(false);
+
+  const { handleDownloadJson } = useDownloadOutput(data);
+
+  useEffect(() => {
+    if (messageId) {
+      setMessageId(messageId);
+    }
+  }, [messageId, setMessageId]);
+
   return (
     <Sheet open onOpenChange={hideModal} modal={false}>
       <SheetContent className={cn('top-20 right-[620px]')}>
         <SheetHeader>
           <SheetTitle className="flex items-center gap-1">
             <NotebookText className="size-4" />
-            <DataflowTimeline messageId={messageId}></DataflowTimeline>
           </SheetTitle>
         </SheetHeader>
-        <section className="max-h-[82vh] overflow-auto mt-6"></section>
+        <section className="max-h-[82vh] overflow-auto mt-6">
+          <DataflowTimeline traceList={data}></DataflowTimeline>
+          <Button
+            onClick={handleDownloadJson}
+            disabled={isEndOutputEmpty(data)}
+            className="w-full mt-8"
+          >
+            <SquareArrowOutUpRight />
+            Export JSON
+          </Button>
+        </section>
       </SheetContent>
     </Sheet>
   );