From 4cab1d03e892538c0b317a85086ac266ca5a8eb6 Mon Sep 17 00:00:00 2001
From: Default28 <soumyasaurav@gmail.com>
Date: Mon, 2 Dec 2024 00:33:06 +0530
Subject: [PATCH] ui(feat): Download output of a function from the UI (#1055)

* ui(feat): Download output of a function from the UI

* Removed log statements.

Co-authored-by: Adithya Krishna  <aadithya794@gmail.com>

---------

Co-authored-by: Adithya Krishna <aadithya794@gmail.com>
---
 .../tables/InvocationOutputTable.tsx          | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/server/ui/src/components/tables/InvocationOutputTable.tsx b/server/ui/src/components/tables/InvocationOutputTable.tsx
index 65379d636..5932570e7 100644
--- a/server/ui/src/components/tables/InvocationOutputTable.tsx
+++ b/server/ui/src/components/tables/InvocationOutputTable.tsx
@@ -16,6 +16,7 @@ import {
   Alert,
   TextField,
   InputAdornment,
+  Button,
 } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import SearchIcon from '@mui/icons-material/Search';
@@ -67,6 +68,25 @@ function InvocationOutputTable({ indexifyServiceURL, invocationId, namespace, co
     }
   }, [indexifyServiceURL, invocationId, namespace, computeGraph]);
 
+  const fetchFunctionOutputPayload = useCallback(async (function_name: string, output_id: string) => {
+    try {
+      const url = `${indexifyServiceURL}/namespaces/${namespace}/compute_graphs/${computeGraph}/invocations/${invocationId}/fn/${function_name}/output/${output_id}`;
+      const response = await axios.get(url);
+      const content_type = response.headers['content-type']
+      const fileExtension = content_type === 'application/json' ? 'json' : 
+          content_type === 'application/octet-stream' ? 'bin' : 'txt';
+      const blob = new Blob([response.data], { type: content_type });
+      const downloadLink = document.createElement('a');
+      downloadLink.href = URL.createObjectURL(blob);
+      downloadLink.download = `${function_name}_${output_id}_output.${fileExtension}`;
+      document.body.appendChild(downloadLink);
+      downloadLink.click();
+      document.body.removeChild(downloadLink);
+    } catch(error) {
+      toast.error(`Failed to fetch output for function: ${function_name} for output id: ${output_id}`)
+    }
+  }, [indexifyServiceURL, invocationId, namespace, computeGraph])
+
   const handleSearch = useCallback((computeFn: string, term: string) => {
     const filtered = outputs.filter(output => 
       output.compute_fn === computeFn && 
@@ -159,6 +179,7 @@ function InvocationOutputTable({ indexifyServiceURL, invocationId, namespace, co
                   <TableRow>
                     <TableCell>ID</TableCell>
                     <TableCell>Created At</TableCell>
+                    <TableCell>Output</TableCell>
                   </TableRow>
                 </TableHead>
                 <TableBody>
@@ -166,6 +187,13 @@ function InvocationOutputTable({ indexifyServiceURL, invocationId, namespace, co
                     <TableRow key={idx}>
                       <TableCell>{output.id}</TableCell>
                       <TableCell>{formatTimestamp(output.created_at)}</TableCell>
+                      <TableCell>
+                        <Button
+                          onClick={() => fetchFunctionOutputPayload(computeFn, output.id)}
+                        >
+                        Download output  
+                        </Button>
+                      </TableCell>
                     </TableRow>
                   ))}
                 </TableBody>