(frontend)[Age 1177]: Delete trace functionality does not work

agenta-web/src/components/pages/observability/components/DeleteTraceModal.tsx

@@ -1,20 +1,43 @@
+import {useObservabilityData} from "@/contexts/observability.context"
+import {deleteTrace} from "@/services/observability/core"
 import {DeleteOutlined} from "@ant-design/icons"
 import {Modal} from "antd"
-import React from "react"
+import React, {useState} from "react"
 
 type DeleteTraceModalProps = {
     setSelectedTraceId: (val: string) => void
+    activeTraceNodeId: string
 } & React.ComponentProps<typeof Modal>
 
-const DeleteTraceModal = ({setSelectedTraceId, ...props}: DeleteTraceModalProps) => {
+const DeleteTraceModal = ({
+    setSelectedTraceId,
+    activeTraceNodeId,
+    ...props
+}: DeleteTraceModalProps) => {
+    const {fetchTraces} = useObservabilityData()
+    const [isLoading, setIsLoading] = useState(false)
+
+    const handleDelete = async () => {
+        try {
+            setIsLoading(true)
+            await deleteTrace(activeTraceNodeId)
+            fetchTraces()
+            setSelectedTraceId("")
+        } catch (error) {
+            console.error(error)
+        } finally {
+            setIsLoading(false)
+        }
+    }
     return (
         <Modal
             centered
             destroyOnClose
             width={380}
             title={"Are you sure you want to delete?"}
-            okButtonProps={{icon: <DeleteOutlined />, danger: true}}
+            okButtonProps={{icon: <DeleteOutlined />, danger: true, loading: isLoading}}
             okText={"Delete"}
+            onOk={handleDelete}
             {...props}
         >
             This action is not reversible.

agenta-web/src/components/pages/observability/drawer/TraceHeader.tsx

@@ -64,7 +64,7 @@ const TraceHeader = ({
             <DeleteTraceModal
                 open={isDeleteModalOpen}
                 onCancel={() => setIsDeleteModalOpen(false)}
-                onOk={() => setSelectedTraceId("")}
+                activeTraceNodeId={activeTrace.node.id}
                 setSelectedTraceId={setSelectedTraceId}
             />
         </>

agenta-web/src/services/observability/core/index.ts

@@ -17,3 +17,7 @@ export const fetchAllTraces = async ({appId, queries}: {appId: string; queries?:
     )
     return response.data
 }
+
+export const deleteTrace = async (nodeId: string) => {
+    return axios.delete(`${getAgentaApiUrl()}/api/observability/v1/traces?node_id=${nodeId}`)
+}