mirror of
https://github.com/dograh-hq/dograh.git
synced 2026-06-16 08:25:18 +02:00
chore: UI enhancements for workflow runs view (#142)
* add local state in filters * feat: add sorting feature by duration * chore: refactor workfow run view
This commit is contained in:
Abhishek
GitHub
parent
6827744327
commit
5fe1c8ce2f
23 changed files with 1014 additions and 479 deletions
197
ui/src/components/workflow-runs/CampaignRuns.tsx
Normal file
197
ui/src/components/workflow-runs/CampaignRuns.tsx
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
"use client";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
|
||||
import { getCampaignRunsApiV1CampaignCampaignIdRunsGet } from "@/client/sdk.gen";
|
||||
import { WorkflowRunResponseSchema } from "@/client/types.gen";
|
||||
import { WorkflowRunsTable } from "@/components/workflow-runs";
|
||||
import { useAuth } from "@/lib/auth";
|
||||
import { decodeFiltersFromURL, encodeFiltersToURL } from "@/lib/filters";
|
||||
import { ActiveFilter, availableAttributes, FilterAttribute } from "@/types/filters";
|
||||
|
||||
interface CampaignRunsProps {
|
||||
campaignId: number;
|
||||
workflowId: number;
|
||||
searchParams?: URLSearchParams;
|
||||
}
|
||||
|
||||
export function CampaignRuns({ campaignId, workflowId, searchParams }: CampaignRunsProps) {
|
||||
const router = useRouter();
|
||||
const { getAccessToken } = useAuth();
|
||||
const [runs, setRuns] = useState<WorkflowRunResponseSchema[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [currentPage, setCurrentPage] = useState(() => {
|
||||
const pageParam = searchParams?.get('page');
|
||||
return pageParam ? parseInt(pageParam, 10) : 1;
|
||||
});
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
const [totalCount, setTotalCount] = useState(0);
|
||||
const [isExecutingFilters, setIsExecutingFilters] = useState(false);
|
||||
const [accessToken, setAccessToken] = useState<string | null>(null);
|
||||
|
||||
// Sort state
|
||||
const [sortBy, setSortBy] = useState<string | null>(null);
|
||||
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
|
||||
|
||||
// Initialize filters from URL
|
||||
const [activeFilters, setActiveFilters] = useState<ActiveFilter[]>(() => {
|
||||
return searchParams ? decodeFiltersFromURL(searchParams, availableAttributes) : [];
|
||||
});
|
||||
|
||||
// Get access token on mount
|
||||
useEffect(() => {
|
||||
const fetchToken = async () => {
|
||||
const token = await getAccessToken();
|
||||
setAccessToken(token);
|
||||
};
|
||||
fetchToken();
|
||||
}, [getAccessToken]);
|
||||
|
||||
const fetchCampaignRuns = useCallback(async (
|
||||
page: number,
|
||||
filters?: ActiveFilter[],
|
||||
sortByParam?: string | null,
|
||||
sortOrderParam?: 'asc' | 'desc'
|
||||
) => {
|
||||
if (!accessToken) return;
|
||||
try {
|
||||
setLoading(true);
|
||||
// Prepare filter data for API
|
||||
let filterParam = undefined;
|
||||
if (filters && filters.length > 0) {
|
||||
const filterData = filters.map(filter => ({
|
||||
attribute: filter.attribute.id,
|
||||
type: filter.attribute.type,
|
||||
value: filter.value
|
||||
}));
|
||||
filterParam = JSON.stringify(filterData);
|
||||
}
|
||||
|
||||
const response = await getCampaignRunsApiV1CampaignCampaignIdRunsGet({
|
||||
path: { campaign_id: campaignId },
|
||||
query: {
|
||||
page: page,
|
||||
limit: 50,
|
||||
...(filterParam && { filters: filterParam }),
|
||||
...(sortByParam && { sort_by: sortByParam }),
|
||||
...(sortOrderParam && { sort_order: sortOrderParam }),
|
||||
},
|
||||
headers: {
|
||||
'Authorization': `Bearer ${accessToken}`,
|
||||
}
|
||||
});
|
||||
|
||||
if (response.error) {
|
||||
throw new Error("Failed to fetch campaign runs");
|
||||
}
|
||||
|
||||
if (response.data) {
|
||||
// The API returns runs as array of dicts, convert to WorkflowRunResponseSchema
|
||||
setRuns((response.data.runs || []) as unknown as WorkflowRunResponseSchema[]);
|
||||
setTotalPages(response.data.total_pages || 1);
|
||||
setTotalCount(response.data.total_count || 0);
|
||||
setCurrentPage(response.data.page || 1);
|
||||
}
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
console.error("Error fetching campaign runs:", err);
|
||||
setError("Failed to load campaign runs");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [campaignId, accessToken]);
|
||||
|
||||
const updatePageInUrl = useCallback((page: number, filters?: ActiveFilter[]) => {
|
||||
const params = new URLSearchParams();
|
||||
params.set('page', page.toString());
|
||||
|
||||
// Add filters to URL if present
|
||||
if (filters && filters.length > 0) {
|
||||
const filterString = encodeFiltersToURL(filters);
|
||||
if (filterString) {
|
||||
const filterParams = new URLSearchParams(filterString);
|
||||
filterParams.forEach((value, key) => params.set(key, value));
|
||||
}
|
||||
}
|
||||
|
||||
router.push(`/campaigns/${campaignId}?${params.toString()}`, { scroll: false });
|
||||
}, [router, campaignId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (accessToken) {
|
||||
fetchCampaignRuns(currentPage, activeFilters, sortBy, sortOrder);
|
||||
}
|
||||
}, [currentPage, activeFilters, fetchCampaignRuns, accessToken, sortBy, sortOrder]);
|
||||
|
||||
const handleApplyFilters = useCallback(async () => {
|
||||
setIsExecutingFilters(true);
|
||||
setCurrentPage(1);
|
||||
updatePageInUrl(1, activeFilters);
|
||||
await fetchCampaignRuns(1, activeFilters, sortBy, sortOrder);
|
||||
setIsExecutingFilters(false);
|
||||
}, [activeFilters, fetchCampaignRuns, updatePageInUrl, sortBy, sortOrder]);
|
||||
|
||||
const handleFiltersChange = useCallback((filters: ActiveFilter[]) => {
|
||||
setActiveFilters(filters);
|
||||
}, []);
|
||||
|
||||
const handleClearFilters = useCallback(async () => {
|
||||
setIsExecutingFilters(true);
|
||||
setCurrentPage(1);
|
||||
setActiveFilters([]);
|
||||
updatePageInUrl(1, []);
|
||||
await fetchCampaignRuns(1, [], sortBy, sortOrder);
|
||||
setIsExecutingFilters(false);
|
||||
}, [fetchCampaignRuns, updatePageInUrl, sortBy, sortOrder]);
|
||||
|
||||
const handlePageChange = useCallback((page: number) => {
|
||||
setCurrentPage(page);
|
||||
updatePageInUrl(page, activeFilters);
|
||||
}, [updatePageInUrl, activeFilters]);
|
||||
|
||||
const handleSort = useCallback((field: string) => {
|
||||
// Reset to first page when sort changes
|
||||
setCurrentPage(1);
|
||||
|
||||
if (sortBy === field) {
|
||||
// Toggle order if same field
|
||||
setSortOrder(prev => prev === 'asc' ? 'desc' : 'asc');
|
||||
} else {
|
||||
// New field, default to desc
|
||||
setSortBy(field);
|
||||
setSortOrder('desc');
|
||||
}
|
||||
}, [sortBy]);
|
||||
|
||||
// Use a subset of filter attributes relevant for campaigns
|
||||
const campaignFilterAttributes: FilterAttribute[] = availableAttributes.filter(
|
||||
attr => ['dateRange', 'dispositionCode', 'duration', 'status', 'tokenUsage'].includes(attr.id)
|
||||
);
|
||||
|
||||
return (
|
||||
<WorkflowRunsTable
|
||||
runs={runs}
|
||||
loading={loading}
|
||||
error={error}
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
totalCount={totalCount}
|
||||
onPageChange={handlePageChange}
|
||||
availableAttributes={campaignFilterAttributes}
|
||||
activeFilters={activeFilters}
|
||||
onFiltersChange={handleFiltersChange}
|
||||
onApplyFilters={handleApplyFilters}
|
||||
onClearFilters={handleClearFilters}
|
||||
isExecutingFilters={isExecutingFilters}
|
||||
sortBy={sortBy}
|
||||
sortOrder={sortOrder}
|
||||
onSort={handleSort}
|
||||
workflowId={workflowId}
|
||||
accessToken={accessToken}
|
||||
title="Campaign Workflow Runs"
|
||||
emptyMessage="No workflow runs found for this campaign"
|
||||
/>
|
||||
);
|
||||
}
|
||||
251
ui/src/components/workflow-runs/WorkflowRunsTable.tsx
Normal file
251
ui/src/components/workflow-runs/WorkflowRunsTable.tsx
Normal file
|
|
@ -0,0 +1,251 @@
|
|||
"use client";
|
||||
|
||||
import { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight, ExternalLink } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
import { WorkflowRunResponseSchema } from "@/client/types.gen";
|
||||
import { FilterBuilder } from "@/components/filters/FilterBuilder";
|
||||
import { MediaPreviewButtons, MediaPreviewDialog } from "@/components/MediaPreviewDialog";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { ActiveFilter, FilterAttribute } from "@/types/filters";
|
||||
|
||||
export interface WorkflowRunsTableProps {
|
||||
// Data
|
||||
runs: WorkflowRunResponseSchema[];
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
|
||||
// Pagination
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
totalCount: number;
|
||||
onPageChange: (page: number) => void;
|
||||
|
||||
// Filters
|
||||
availableAttributes: FilterAttribute[];
|
||||
activeFilters: ActiveFilter[];
|
||||
onFiltersChange: (filters: ActiveFilter[]) => void;
|
||||
onApplyFilters: () => void;
|
||||
onClearFilters: () => void;
|
||||
isExecutingFilters: boolean;
|
||||
|
||||
// Sorting
|
||||
sortBy?: string | null;
|
||||
sortOrder?: 'asc' | 'desc';
|
||||
onSort?: (field: string) => void;
|
||||
|
||||
// Navigation & Actions
|
||||
workflowId: number;
|
||||
accessToken: string | null;
|
||||
|
||||
// Optional customization
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
showFilters?: boolean;
|
||||
emptyMessage?: string;
|
||||
}
|
||||
|
||||
export function WorkflowRunsTable({
|
||||
runs,
|
||||
loading,
|
||||
error,
|
||||
currentPage,
|
||||
totalPages,
|
||||
totalCount,
|
||||
onPageChange,
|
||||
availableAttributes,
|
||||
activeFilters,
|
||||
onFiltersChange,
|
||||
onApplyFilters,
|
||||
onClearFilters,
|
||||
isExecutingFilters,
|
||||
sortBy,
|
||||
sortOrder = 'desc',
|
||||
onSort,
|
||||
workflowId,
|
||||
accessToken,
|
||||
title = "Workflow Run History",
|
||||
subtitle,
|
||||
showFilters = true,
|
||||
emptyMessage = "No workflow runs found",
|
||||
}: WorkflowRunsTableProps) {
|
||||
const [selectedRowId, setSelectedRowId] = useState<number | null>(null);
|
||||
|
||||
// Media preview dialog
|
||||
const mediaPreview = MediaPreviewDialog({ accessToken });
|
||||
|
||||
const formatDate = (dateString: string) => new Date(dateString).toLocaleString();
|
||||
|
||||
const handleRowClick = (runId: number) => {
|
||||
window.open(`/workflow/${workflowId}/run/${runId}`, '_blank');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Title and Filters */}
|
||||
{showFilters && (
|
||||
<div className="mb-6">
|
||||
<h1 className="text-2xl font-bold mb-4">{title}</h1>
|
||||
<FilterBuilder
|
||||
availableAttributes={availableAttributes}
|
||||
activeFilters={activeFilters}
|
||||
onFiltersChange={onFiltersChange}
|
||||
onApplyFilters={onApplyFilters}
|
||||
onClearFilters={onClearFilters}
|
||||
isExecuting={isExecutingFilters}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Loading State */}
|
||||
{loading ? (
|
||||
<div className="flex justify-center">
|
||||
<div className="animate-pulse">Loading workflow runs...</div>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="bg-destructive/10 border border-destructive/30 text-destructive px-4 py-3 rounded">
|
||||
{error}
|
||||
</div>
|
||||
) : runs.length === 0 ? (
|
||||
<div className="text-center py-8">
|
||||
<p className="text-muted-foreground">{emptyMessage}</p>
|
||||
</div>
|
||||
) : (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Workflow Runs</CardTitle>
|
||||
<CardDescription>
|
||||
{subtitle || `Showing ${runs.length} of ${totalCount} total runs`}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="bg-card border border-border rounded-lg overflow-hidden shadow-sm">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-muted/50">
|
||||
<TableHead className="font-semibold">ID</TableHead>
|
||||
<TableHead className="font-semibold">Status</TableHead>
|
||||
<TableHead className="font-semibold">Created At</TableHead>
|
||||
<TableHead className="font-semibold">Call Type</TableHead>
|
||||
<TableHead
|
||||
className="font-semibold cursor-pointer hover:bg-muted/50 select-none"
|
||||
onClick={() => onSort?.('duration')}
|
||||
>
|
||||
<div className="flex items-center gap-1">
|
||||
Duration
|
||||
{sortBy === 'duration' ? (
|
||||
sortOrder === 'asc' ? <ArrowUp className="h-4 w-4" /> : <ArrowDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ArrowUpDown className="h-4 w-4 text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
</TableHead>
|
||||
<TableHead className="font-semibold">Disposition</TableHead>
|
||||
<TableHead className="font-semibold">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{runs.map((run) => (
|
||||
<TableRow
|
||||
key={run.id}
|
||||
className={`cursor-pointer hover:bg-muted/50 ${selectedRowId === run.id ? "bg-primary/20 ring-1 ring-primary/50" : ""}`}
|
||||
onClick={() => handleRowClick(run.id)}
|
||||
>
|
||||
<TableCell className="font-mono text-sm">#{run.id}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={run.is_completed ? "default" : "secondary"}>
|
||||
{run.is_completed ? "Completed" : "In Progress"}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-sm">{formatDate(run.created_at)}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={run.call_type === 'inbound' ? "secondary" : "default"}>
|
||||
{run.call_type === 'inbound' ? 'Inbound' : 'Outbound'}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-sm">
|
||||
{typeof run.cost_info?.call_duration_seconds === 'number'
|
||||
? `${run.cost_info.call_duration_seconds.toFixed(1)}s`
|
||||
: "-"}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{run.gathered_context?.mapped_call_disposition ? (
|
||||
<Badge variant="default">
|
||||
{run.gathered_context.mapped_call_disposition as string}
|
||||
</Badge>
|
||||
) : (
|
||||
<span className="text-sm text-muted-foreground">-</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex space-x-2" onClick={(e) => e.stopPropagation()}>
|
||||
<MediaPreviewButtons
|
||||
recordingUrl={run.recording_url}
|
||||
transcriptUrl={run.transcript_url}
|
||||
runId={run.id}
|
||||
onOpenAudio={mediaPreview.openAudioModal}
|
||||
onOpenTranscript={mediaPreview.openTranscriptModal}
|
||||
onSelect={setSelectedRowId}
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => window.open(`/workflow/${workflowId}/run/${run.id}`, '_blank')}
|
||||
>
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-between mt-6">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Page {currentPage} of {totalPages}
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onPageChange(currentPage - 1)}
|
||||
disabled={currentPage === 1}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
Previous
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onPageChange(currentPage + 1)}
|
||||
disabled={currentPage === totalPages}
|
||||
>
|
||||
Next
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Media Preview Dialog */}
|
||||
{mediaPreview.dialog}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
3
ui/src/components/workflow-runs/index.ts
Normal file
3
ui/src/components/workflow-runs/index.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export { CampaignRuns } from "./CampaignRuns";
|
||||
export type { WorkflowRunsTableProps } from "./WorkflowRunsTable";
|
||||
export { WorkflowRunsTable } from "./WorkflowRunsTable";
|
||||
Loading…
Add table
Add a link
Reference in a new issue