Add ability to delete traces

frontend/app/api/projects/[projectId]/spans/route.ts

@@ -128,3 +128,35 @@ export async function GET(req: NextRequest, props: { params: Promise<{ projectId
 
   return new Response(JSON.stringify(spanData), { status: 200 });
 }
+
+
+export async function DELETE(
+  req: NextRequest,
+  props: { params: Promise<{ projectId: string; spanId: string }> }
+): Promise<Response> {
+  const params = await props.params;
+  const projectId = params.projectId;
+
+  const { searchParams } = new URL(req.url);
+  const spanId = searchParams.get('spanId')?.split(',');
+
+  if (!spanId) {
+    return new Response('At least one Span ID is required', { status: 400 });
+  }
+
+  try {
+    await db.delete(spans)
+      .where(
+        and(
+          inArray(spans.spanId, spanId),
+          eq(spans.projectId, projectId)
+        )
+      );
+
+    return new Response('Spans deleted successfully', { status: 200 });
+  } catch (error) {
+    return new Response('Error deleting spans', { status: 500 });
+  }
+}
+
+

frontend/app/api/projects/[projectId]/traces/route.ts

@@ -1,7 +1,10 @@
+import { and, eq, inArray} from 'drizzle-orm';
 import { NextRequest } from 'next/server';
 import { getServerSession } from 'next-auth';
 
 import { authOptions } from '@/lib/auth';
+import { db } from '@/lib/db/drizzle';
+import { traces } from '@/lib/db/migrations/schema';
 import { fetcher } from '@/lib/utils';
 
 export async function GET(req: NextRequest, props: { params: Promise<{ projectId: string }> }): Promise<Response> {
@@ -21,3 +24,33 @@ export async function GET(req: NextRequest, props: { params: Promise<{ projectId
     }
   );
 }
+
+
+export async function DELETE(
+  req: NextRequest,
+  props: { params: Promise<{ projectId: string; traceId: string }> }
+): Promise<Response> {
+  const params = await props.params;
+  const projectId = params.projectId;
+
+  const { searchParams } = new URL(req.url);
+  const traceId = searchParams.get('traceId')?.split(',');
+
+  if (!traceId) {
+    return new Response('At least one Trace ID is required', { status: 400 });
+  }
+
+  try {
+    await db.delete(traces)
+      .where(
+        and(
+          inArray(traces.id, traceId),
+          eq(traces.projectId, projectId)
+        )
+      );
+
+    return new Response('Traces deleted successfully', { status: 200 });
+  } catch (error) {
+    return new Response('Error deleting traces', { status: 500 });
+  }
+}

frontend/components/dataset/dataset.tsx

@@ -1,30 +1,20 @@
 'use client';
 
 import { ColumnDef } from '@tanstack/react-table';
-import { Loader2, Trash2 } from 'lucide-react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { Resizable } from 're-resizable';
 import { useEffect, useState } from 'react';
 import useSWR from 'swr';
 
-import { Button } from '@/components/ui/button';
 import { DataTable } from '@/components/ui/datatable';
+import DeleteSelectedRows from '@/components/ui/DeleteSelectedRows';
 import { useProjectContext } from '@/contexts/project-context';
 import { Datapoint, Dataset as DatasetType } from '@/lib/dataset/types';
 import { useToast } from '@/lib/hooks/use-toast';
 import { PaginatedResponse } from '@/lib/types';
 import { swrFetcher } from '@/lib/utils';
 
 import ClientTimestampFormatter from '../client-timestamp-formatter';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger
-} from '../ui/dialog';
 import DownloadButton from '../ui/download-button';
 import Header from '../ui/header';
 import MonoWithCopy from '../ui/mono-with-copy';
@@ -44,8 +34,6 @@ export default function Dataset({ dataset }: DatasetProps) {
   const { projectId } = useProjectContext();
   const { toast } = useToast();
   const [datapoints, setDatapoints] = useState<Datapoint[] | undefined>(undefined);
-  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
-  const [isDeleting, setIsDeleting] = useState(false);
 
   // Get datapointId from URL params
   const datapointId = searchParams.get('datapointId');
@@ -115,7 +103,6 @@ export default function Dataset({ dataset }: DatasetProps) {
   ];
 
   const handleDeleteDatapoints = async (datapointIds: string[]) => {
-    setIsDeleting(true);
     const response = await fetch(
       `/api/projects/${projectId}/datasets/${dataset.id}/datapoints` +
       `?datapointIds=${datapointIds.join(',')}` +
@@ -143,9 +130,6 @@ export default function Dataset({ dataset }: DatasetProps) {
     if (selectedDatapoint && datapointIds.includes(selectedDatapoint.id)) {
       handleDatapointSelect(null);
     }
-
-    setIsDeleting(false);
-    setIsDeleteDialogOpen(false);
   };
 
   // Update URL when datapoint is selected
@@ -218,31 +202,11 @@ export default function Dataset({ dataset }: DatasetProps) {
           enableRowSelection
           selectionPanel={(selectedRowIds) => (
             <div className="flex flex-col space-y-2">
-              <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
-                <DialogTrigger asChild>
-                  <Button variant="ghost">
-                    <Trash2 size={12} />
-                  </Button>
-                </DialogTrigger>
-                <DialogContent>
-                  <DialogHeader>
-                    <DialogTitle>Delete Datapoints</DialogTitle>
-                    <DialogDescription>
-                      Are you sure you want to delete
-                      {selectedRowIds.length} datapoint(s)? This action cannot be undone.
-                    </DialogDescription>
-                  </DialogHeader>
-                  <DialogFooter>
-                    <Button variant="outline" onClick={() => setIsDeleteDialogOpen(false)} disabled={isDeleting}>
-                      Cancel
-                    </Button>
-                    <Button onClick={() => handleDeleteDatapoints(selectedRowIds)} disabled={isDeleting}>
-                      {isDeleting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                      Delete
-                    </Button>
-                  </DialogFooter>
-                </DialogContent>
-              </Dialog>
+              <DeleteSelectedRows
+                selectedRowIds={selectedRowIds}
+                onDelete={handleDeleteDatapoints}
+                entityName="datapoints"
+              />
             </div>
           )}
         />

frontend/components/datasets/datasets.tsx

@@ -1,20 +1,10 @@
 'use client';
 
 import { ColumnDef } from '@tanstack/react-table';
-import { Loader2, Trash2 } from 'lucide-react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
-import { Button } from '@/components/ui/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger
-} from '@/components/ui/dialog';
+import DeleteSelectedRows from '@/components/ui/DeleteSelectedRows';
 import { useProjectContext } from '@/contexts/project-context';
 import { DatasetInfo } from '@/lib/dataset/types';
 import { useToast } from '@/lib/hooks/use-toast';
@@ -63,12 +53,9 @@ export default function Datasets() {
 
   const pageCount = Math.ceil(totalCount / pageSize);
 
-  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
-  const [isDeleting, setIsDeleting] = useState(false);
   const { toast } = useToast();
 
   const handleDeleteDatasets = async (datasetIds: string[]) => {
-    setIsDeleting(true);
     try {
       const res = await fetch(
         `/api/projects/${projectId}/datasets?datasetIds=${datasetIds.join(',')}`,
@@ -93,8 +80,6 @@ export default function Datasets() {
         variant: 'destructive',
       });
     }
-    setIsDeleting(false);
-    setIsDeleteDialogOpen(false);
   };
 
   const columns: ColumnDef<DatasetInfo>[] = [
@@ -153,30 +138,11 @@ export default function Datasets() {
           totalItemsCount={totalCount}
           selectionPanel={(selectedRowIds) => (
             <div className="flex flex-col space-y-2">
-              <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
-                <DialogTrigger asChild>
-                  <Button variant="ghost">
-                    <Trash2 size={12} />
-                  </Button>
-                </DialogTrigger>
-                <DialogContent>
-                  <DialogHeader>
-                    <DialogTitle>Delete Datasets</DialogTitle>
-                    <DialogDescription>
-                      Are you sure you want to delete {selectedRowIds.length} dataset(s)? This action cannot be undone.
-                    </DialogDescription>
-                  </DialogHeader>
-                  <DialogFooter>
-                    <Button variant="outline" onClick={() => setIsDeleteDialogOpen(false)} disabled={isDeleting}>
-                      Cancel
-                    </Button>
-                    <Button onClick={() => handleDeleteDatasets(selectedRowIds)} disabled={isDeleting}>
-                      {isDeleting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                      Delete
-                    </Button>
-                  </DialogFooter>
-                </DialogContent>
-              </Dialog>
+              <DeleteSelectedRows
+                selectedRowIds={selectedRowIds}
+                onDelete={handleDeleteDatasets}
+                entityName="datasets"
+              />
             </div>
           )}
           emptyRow={

frontend/components/evaluations/evaluations.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { ColumnDef } from '@tanstack/react-table';
-import { Loader2, Trash2 } from 'lucide-react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { usePostHog } from 'posthog-js/react';
 import { useState } from 'react';
 import useSWR from 'swr';
 
+import DeleteSelectedRows from '@/components/ui/DeleteSelectedRows';
 import { useProjectContext } from '@/contexts/project-context';
 import { useUserContext } from '@/contexts/user-context';
 import { AggregationFunction } from '@/lib/clickhouse/utils';
@@ -17,17 +17,7 @@ import { PaginatedResponse } from '@/lib/types';
 import { swrFetcher } from '@/lib/utils';
 
 import ClientTimestampFormatter from '../client-timestamp-formatter';
-import { Button } from '../ui/button';
 import { DataTable } from '../ui/datatable';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '../ui/dialog';
 import Header from '../ui/header';
 import Mono from '../ui/mono';
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../ui/resizable';
@@ -82,12 +72,9 @@ export default function Evaluations() {
     }
   ];
 
-  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
-  const [isDeleting, setIsDeleting] = useState(false);
   const { toast } = useToast();
 
   const handleDeleteEvaluations = async (selectedRowIds: string[]) => {
-    setIsDeleting(true);
     try {
       const response = await fetch(
         `/api/projects/${projectId}/evaluations?evaluationIds=${selectedRowIds.join(',')}`,
@@ -116,8 +103,6 @@ export default function Evaluations() {
         variant: 'destructive',
       });
     }
-    setIsDeleting(false);
-    setIsDeleteDialogOpen(false);
   };
 
   return (
@@ -166,31 +151,11 @@ export default function Evaluations() {
                 manualPagination
                 selectionPanel={(selectedRowIds) => (
                   <div className="flex flex-col space-y-2">
-                    <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
-                      <DialogTrigger asChild>
-                        <Button variant="ghost">
-                          <Trash2 size={12} />
-                        </Button>
-                      </DialogTrigger>
-                      <DialogContent>
-                        <DialogHeader>
-                          <DialogTitle>Delete Evaluations</DialogTitle>
-                          <DialogDescription>
-                            Are you sure you want to delete {selectedRowIds.length} evaluation(s)?
-                            This action cannot be undone.
-                          </DialogDescription>
-                        </DialogHeader>
-                        <DialogFooter>
-                          <Button variant="outline" onClick={() => setIsDeleteDialogOpen(false)} disabled={isDeleting}>
-                            Cancel
-                          </Button>
-                          <Button onClick={() => handleDeleteEvaluations(selectedRowIds)} disabled={isDeleting}>
-                            {isDeleting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                            Delete
-                          </Button>
-                        </DialogFooter>
-                      </DialogContent>
-                    </Dialog>
+                    <DeleteSelectedRows
+                      selectedRowIds={selectedRowIds}
+                      onDelete={handleDeleteEvaluations}
+                      entityName="evaluations"
+                    />
                   </div>
                 )}
               />