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 <[email protected]> --------- Co-authored-by: Adithya Krishna <[email protected]>
tensorlakeai · Dec 1, 2024 · 4cab1d0 · 4cab1d0
1 parent 28e8994
commit 4cab1d0
Showing 1 changed file with 28 additions and 0 deletions.
diff --git 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,13 +179,21 @@ function InvocationOutputTable({ indexifyServiceURL, invocationId, namespace, co
                   <TableRow>
                     <TableCell>ID</TableCell>
                     <TableCell>Created At</TableCell>
+                    <TableCell>Output</TableCell>
                   </TableRow>
                 </TableHead>
                 <TableBody>
                   {outputs.map((output, idx) => (
                     <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>