flowyml 1.1.0__py3-none-any.whl

flowyml/ui/frontend/src/app/runs/page.jsx

@@ -0,0 +1,470 @@
+import React, { useState, useEffect } from 'react';
+import { fetchApi } from '../../utils/api';
+import { Link } from 'react-router-dom';
+import { Play, Clock, Calendar, TrendingUp, Activity, ArrowRight, Search, CheckCircle, XCircle, Loader, FolderPlus } from 'lucide-react';
+import { Card } from '../../components/ui/Card';
+import { Badge } from '../../components/ui/Badge';
+import { format } from 'date-fns';
+import { motion } from 'framer-motion';
+import { DataView } from '../../components/ui/DataView';
+import { useProject } from '../../contexts/ProjectContext';
+import { ExecutionStatus, StatusBadge } from '../../components/ui/ExecutionStatus';
+import { EmptyState } from '../../components/ui/EmptyState';
+
+export function Runs() {
+    const [runs, setRuns] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [filter, setFilter] = useState('all'); // all, completed, failed, running
+    const [selectedRunIds, setSelectedRunIds] = useState([]);
+    const { selectedProject } = useProject();
+
+    const fetchRuns = async () => {
+        setLoading(true);
+        try {
+            const url = selectedProject
+                ? `/api/runs?project=${encodeURIComponent(selectedProject)}`
+                : '/api/runs';
+            const res = await fetchApi(url);
+            const data = await res.json();
+            setRuns(data.runs || []);
+        } catch (err) {
+            console.error(err);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchRuns();
+    }, [selectedProject]);
+
+    const filteredRuns = runs.filter(run => {
+        if (filter === 'all') return true;
+        return run.status === filter;
+    });
+
+    const stats = {
+        total: runs.length,
+        completed: runs.filter(r => r.status === 'completed').length,
+        failed: runs.filter(r => r.status === 'failed').length,
+        running: runs.filter(r => r.status === 'running').length,
+    };
+
+    const columns = [
+        {
+            header: (
+                <input
+                    type="checkbox"
+                    checked={selectedRunIds.length === filteredRuns.length && filteredRuns.length > 0}
+                    onChange={(e) => {
+                        if (e.target.checked) {
+                            setSelectedRunIds(filteredRuns.map(r => r.run_id));
+                        } else {
+                            setSelectedRunIds([]);
+                        }
+                    }}
+                    className="w-4 h-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500"
+                />
+            ),
+            key: 'select',
+            render: (run) => (
+                <input
+                    type="checkbox"
+                    checked={selectedRunIds.includes(run.run_id)}
+                    onChange={(e) => {
+                        if (e.target.checked) {
+                            setSelectedRunIds([...selectedRunIds, run.run_id]);
+                        } else {
+                            setSelectedRunIds(selectedRunIds.filter(id => id !== run.run_id));
+                        }
+                    }}
+                    onClick={(e) => e.stopPropagation()}
+                    className="w-4 h-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500"
+                />
+            )
+        },
+        {
+            header: 'Status',
+            key: 'status',
+            sortable: true,
+            render: (run) => <StatusBadge status={run.status} />
+        },
+        {
+            header: 'Pipeline',
+            key: 'pipeline_name',
+            sortable: true,
+            render: (run) => (
+                <span className="font-medium text-slate-900 dark:text-white">{run.pipeline_name}</span>
+            )
+        },
+        {
+            header: 'Project',
+            key: 'project',
+            sortable: true,
+            render: (run) => (
+                <span className="text-sm text-slate-600 dark:text-slate-400">
+                    {run.project || '-'}
+                </span>
+            )
+        },
+        {
+            header: 'Run ID',
+            key: 'run_id',
+            render: (run) => (
+                <span className="font-mono text-xs bg-slate-100 dark:bg-slate-700 px-2 py-1 rounded text-slate-600 dark:text-slate-300">
+                    {run.run_id.substring(0, 8)}...
+                </span>
+            )
+        },
+        {
+            header: 'Start Time',
+            key: 'start_time',
+            sortable: true,
+            render: (run) => (
+                <div className="flex items-center gap-2 text-slate-500">
+                    <Calendar size={14} />
+                    {run.start_time ? format(new Date(run.start_time), 'MMM d, HH:mm:ss') : '-'}
+                </div>
+            )
+        },
+        {
+            header: 'Duration',
+            key: 'duration',
+            sortable: true,
+            render: (run) => (
+                <div className="flex items-center gap-2 text-slate-500">
+                    <Clock size={14} />
+                    {run.duration ? `${run.duration.toFixed(2)}s` : '-'}
+                </div>
+            )
+        },
+        {
+            header: 'Actions',
+            key: 'actions',
+            render: (run) => (
+                <Link
+                    to={`/runs/${run.run_id}`}
+                    className="text-primary-600 hover:text-primary-700 font-medium text-sm flex items-center gap-1"
+                >
+                    Details <ArrowRight size={14} />
+                </Link>
+            )
+        }
+    ];
+
+    const renderGrid = (run) => {
+        const statusConfig = {
+            completed: {
+                icon: <CheckCircle size={20} />,
+                color: 'text-emerald-500',
+                bg: 'bg-emerald-50',
+                border: 'border-emerald-200',
+                badge: 'success'
+            },
+            failed: {
+                icon: <XCircle size={20} />,
+                color: 'text-rose-500',
+                bg: 'bg-rose-50',
+                border: 'border-rose-200',
+                badge: 'danger'
+            },
+            running: {
+                icon: <Loader size={20} className="animate-spin" />,
+                color: 'text-amber-500',
+                bg: 'bg-amber-50',
+                border: 'border-amber-200',
+                badge: 'warning'
+            }
+        };
+
+        const config = statusConfig[run.status] || statusConfig.completed;
+
+        return (
+            <Link to={`/runs/${run.run_id}`}>
+                <Card className={`group hover:shadow-lg transition-all duration-200 border-l-4 ${config.border} hover:border-l-primary-400 h-full`}>
+                    <div className="flex items-center justify-between mb-4">
+                        <div className="flex items-center gap-3">
+                            <div className={`p-2 rounded-lg ${config.bg} ${config.color}`}>
+                                {config.icon}
+                            </div>
+                            <div>
+                                <h3 className="font-bold text-slate-900 dark:text-white truncate max-w-[150px]" title={run.pipeline_name}>
+                                    {run.pipeline_name}
+                                </h3>
+                                <div className="text-xs text-slate-500 font-mono">
+                                    {run.run_id.substring(0, 8)}
+                                </div>
+                            </div>
+                        </div>
+                        <Badge variant={config.badge} className="text-xs uppercase tracking-wide">
+                            {run.status}
+                        </Badge>
+                    </div>
+
+                    <div className="space-y-2 text-sm text-slate-500 dark:text-slate-400">
+                        <div className="flex items-center justify-between">
+                            <span className="flex items-center gap-2"><Calendar size={14} /> Started</span>
+                            <span>{run.start_time ? format(new Date(run.start_time), 'MMM d, HH:mm') : '-'}</span>
+                        </div>
+                        <div className="flex items-center justify-between">
+                            <span className="flex items-center gap-2"><Clock size={14} /> Duration</span>
+                            <span>{run.duration ? `${run.duration.toFixed(2)}s` : '-'}</span>
+                        </div>
+                    </div>
+
+                    {/* Steps Progress */}
+                    {run.steps && (
+                        <div className="mt-4 pt-4 border-t border-slate-100 dark:border-slate-700">
+                            <div className="flex justify-between text-xs mb-1">
+                                <span className="text-slate-500">Progress</span>
+                                <span className="font-medium text-slate-900 dark:text-white">
+                                    {Object.values(run.steps).filter(s => s.success).length} / {Object.keys(run.steps).length}
+                                </span>
+                            </div>
+                            <div className="w-full h-1.5 bg-slate-100 dark:bg-slate-700 rounded-full overflow-hidden">
+                                <div
+                                    className={`h-full ${config.color.replace('text-', 'bg-')} transition-all duration-300`}
+                                    style={{
+                                        width: `${(Object.values(run.steps).filter(s => s.success).length / Object.keys(run.steps).length) * 100}%`
+                                    }}
+                                />
+                            </div>
+                        </div>
+                    )}
+                </Card>
+            </Link>
+        );
+    };
+
+    if (loading) {
+        return (
+            <div className="flex items-center justify-center h-96">
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="p-6 max-w-7xl mx-auto space-y-8">
+            {/* Stats Cards */}
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+                <StatsCard
+                    label="Total Runs"
+                    value={stats.total}
+                    icon={<Activity size={20} />}
+                    color="slate"
+                    active={filter === 'all'}
+                    onClick={() => setFilter('all')}
+                />
+                <StatsCard
+                    label="Completed"
+                    value={stats.completed}
+                    icon={<CheckCircle size={20} />}
+                    color="emerald"
+                    active={filter === 'completed'}
+                    onClick={() => setFilter('completed')}
+                />
+                <StatsCard
+                    label="Failed"
+                    value={stats.failed}
+                    icon={<XCircle size={20} />}
+                    color="rose"
+                    active={filter === 'failed'}
+                    onClick={() => setFilter('failed')}
+                />
+                <StatsCard
+                    label="Running"
+                    value={stats.running}
+                    icon={<Loader size={20} />}
+                    color="amber"
+                    active={filter === 'running'}
+                    onClick={() => setFilter('running')}
+                />
+            </div>
+
+            <DataView
+                title="Pipeline Runs"
+                subtitle="Monitor and track all your pipeline executions"
+                items={filteredRuns}
+                loading={loading}
+                columns={columns}
+                renderGrid={renderGrid}
+                initialView="table" // Default to table for runs as it's usually more useful
+                actions={
+                    <div className="flex items-center gap-2">
+                        {/* Add to Project Action */}
+                        <ProjectSelector
+                            selectedRuns={selectedRunIds}
+                            onComplete={() => {
+                                // Call fetchRuns from parent scope
+                                fetchRuns();
+                                setSelectedRunIds([]);
+                            }}
+                        />
+                    </div>
+                }
+                emptyState={
+                    <EmptyState
+                        icon={Activity}
+                        title="No runs found"
+                        description={filter === 'all'
+                            ? 'Run a pipeline to see it here'
+                            : `No ${filter} runs found. Try a different filter.`
+                        }
+                    />
+                }
+            />
+        </div>
+    );
+}
+
+function ProjectSelector({ selectedRuns, onComplete }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [projects, setProjects] = useState([]);
+    const [updating, setUpdating] = useState(false);
+
+    useEffect(() => {
+        if (isOpen) {
+            fetch('/api/projects/')
+                .then(res => res.json())
+                .then(data => setProjects(data))
+                .catch(err => console.error('Failed to load projects:', err));
+        }
+    }, [isOpen]);
+
+    const handleSelectProject = async (projectName) => {
+        setUpdating(true);
+        try {
+            // Update all selected runs
+            const updates = selectedRuns.map(runId =>
+                fetch(`/api/runs/${runId}/project`, {
+                    method: 'PUT',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ project_name: projectName })
+                })
+            );
+
+            await Promise.all(updates);
+
+            // Show success notification
+            showNotification('success', `Added ${selectedRuns.length} run(s) to project ${projectName}`);
+
+            setIsOpen(false);
+            if (onComplete) onComplete();
+        } catch (error) {
+            console.error('Failed to update projects:', error);
+            showNotification('error', 'Failed to update project attribution');
+        } finally {
+            setUpdating(false);
+        }
+    };
+
+    const showNotification = (type, message) => {
+        // Simple toast notification
+        const toast = document.createElement('div');
+        toast.className = `fixed top-4 right-4 px-4 py-3 rounded-lg shadow-lg z-50 ${type === 'success' ? 'bg-green-500' : 'bg-red-500'
+            } text-white animate-in slide-in-from-right`;
+        toast.textContent = message;
+        document.body.appendChild(toast);
+        setTimeout(() => {
+            toast.classList.add('animate-out', 'fade-out');
+            setTimeout(() => document.body.removeChild(toast), 300);
+        }, 3000);
+    };
+
+    return (
+        <div className="relative">
+            <button
+                onClick={() => setIsOpen(!isOpen)}
+                disabled={updating || selectedRuns.length === 0}
+                className="flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-slate-600 dark:text-slate-300 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+                <FolderPlus size={16} />
+                {updating ? 'Updating...' : `Add to Project (${selectedRuns.length})`}
+            </button>
+
+            {isOpen && (
+                <>
+                    <div
+                        className="fixed inset-0 z-10"
+                        onClick={() => setIsOpen(false)}
+                    />
+                    <div className="absolute right-0 mt-2 w-56 bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 z-20 overflow-hidden animate-in fade-in zoom-in-95 duration-100">
+                        <div className="p-2 border-b border-slate-100 dark:border-slate-700">
+                            <span className="text-xs font-semibold text-slate-500 px-2">Select Project</span>
+                        </div>
+                        <div className="max-h-64 overflow-y-auto p-1">
+                            {projects.length > 0 ? (
+                                projects.map(p => (
+                                    <button
+                                        key={p.name}
+                                        onClick={() => handleSelectProject(p.name)}
+                                        disabled={updating}
+                                        className="w-full text-left px-3 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 rounded-lg transition-colors disabled:opacity-50"
+                                    >
+                                        {p.name}
+                                    </button>
+                                ))
+                            ) : (
+                                <div className="px-3 py-2 text-sm text-slate-400 italic">No projects found</div>
+                            )}
+                        </div>
+                    </div>
+                </>
+            )}
+        </div>
+    );
+}
+
+function StatsCard({ label, value, icon, color, active, onClick }) {
+    const colorClasses = {
+        slate: {
+            bg: "bg-slate-50",
+            text: "text-slate-600",
+            border: "border-slate-200",
+            activeBg: "bg-slate-100",
+            activeBorder: "border-slate-300"
+        },
+        emerald: {
+            bg: "bg-emerald-50",
+            text: "text-emerald-600",
+            border: "border-emerald-200",
+            activeBg: "bg-emerald-100",
+            activeBorder: "border-emerald-300"
+        },
+        rose: {
+            bg: "bg-rose-50",
+            text: "text-rose-600",
+            border: "border-rose-200",
+            activeBg: "bg-rose-100",
+            activeBorder: "border-rose-300"
+        },
+        amber: {
+            bg: "bg-amber-50",
+            text: "text-amber-600",
+            border: "border-amber-200",
+            activeBg: "bg-amber-100",
+            activeBorder: "border-amber-300"
+        }
+    };
+
+    const colors = colorClasses[color];
+
+    return (
+        <Card
+            className={`cursor-pointer transition-all duration-200 hover:shadow-md border-2 ${active ? colors.activeBorder : 'border-transparent'
+                }`}
+            onClick={onClick}
+        >
+            <div className="flex items-center justify-between">
+                <div>
+                    <p className="text-sm text-slate-500 font-medium mb-1">{label}</p>
+                    <p className="text-3xl font-bold text-slate-900 dark:text-white">{value}</p>
+                </div>
+                <div className={`p-3 rounded-xl ${active ? colors.activeBg : colors.bg} ${colors.text}`}>
+                    {icon}
+                </div>
+            </div>
+        </Card>
+    );
+}