From c5b3a17604ef25e248f696d7d8fcd7d17275494f Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Thu, 31 Oct 2024 12:21:36 +0100
Subject: [PATCH] fix(frontend): enabled delete trace feature

---
 .../components/DeleteTraceModal.tsx           | 29 +++++++++++++++++--
 .../observability/drawer/TraceHeader.tsx      |  2 +-
 .../src/services/observability/core/index.ts  |  4 +++
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/agenta-web/src/components/pages/observability/components/DeleteTraceModal.tsx b/agenta-web/src/components/pages/observability/components/DeleteTraceModal.tsx
index e3ed5dfddc..284bc1301a 100644
--- a/agenta-web/src/components/pages/observability/components/DeleteTraceModal.tsx
+++ b/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.
diff --git a/agenta-web/src/components/pages/observability/drawer/TraceHeader.tsx b/agenta-web/src/components/pages/observability/drawer/TraceHeader.tsx
index 9821459ade..95dd7be690 100644
--- a/agenta-web/src/components/pages/observability/drawer/TraceHeader.tsx
+++ b/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}
             />
         </>
diff --git a/agenta-web/src/services/observability/core/index.ts b/agenta-web/src/services/observability/core/index.ts
index 06c4e340ed..a867c9af2a 100644
--- a/agenta-web/src/services/observability/core/index.ts
+++ b/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}`)
+}