flowyml 1.2.0__py3-none-any.whl → 1.3.0__py3-none-any.whl

flowyml/ui/frontend/src/app/runs/[runId]/page.jsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState, useMemo } from 'react';
 import { fetchApi } from '../../../utils/api';
+import { downloadArtifactById } from '../../../utils/downloads';
 import { useParams, Link } from 'react-router-dom';
-import { CheckCircle, XCircle, Clock, Calendar, Package, ArrowRight, BarChart2, FileText, Database, Box, ChevronRight, Activity, Layers, Code2, Terminal, Info, X, Maximize2, TrendingUp, Download, ArrowDownCircle, ArrowUpCircle, Tag, Zap, AlertCircle, FolderPlus } from 'lucide-react';
+import { CheckCircle, XCircle, Clock, Calendar, Package, ArrowRight, BarChart2, FileText, Database, Box, ChevronRight, Activity, Layers, Code2, Terminal, Info, X, Maximize2, TrendingUp, Download, ArrowDownCircle, ArrowUpCircle, Tag, Zap, AlertCircle, FolderPlus, Cloud, Server } from 'lucide-react';
 import { Card } from '../../../components/ui/Card';
 import { Badge } from '../../../components/ui/Badge';
 import { Button } from '../../../components/ui/Button';
@@ -19,6 +20,43 @@ export function RunDetails() {
     const [selectedStep, setSelectedStep] = useState(null);
     const [activeTab, setActiveTab] = useState('overview');
     const [selectedArtifact, setSelectedArtifact] = useState(null);
+    const [cloudStatus, setCloudStatus] = useState(null);
+    const [isPolling, setIsPolling] = useState(false);
+
+    // Fetch cloud status for remote runs
+    useEffect(() => {
+        if (!run) return;
+
+        const fetchCloudStatus = async () => {
+            try {
+                const res = await fetchApi(`/api/runs/${runId}/cloud-status`);
+                const data = await res.json();
+                setCloudStatus(data);
+
+                // Continue polling if run is remote and not finished
+                if (data.is_remote && data.cloud_status && !data.cloud_status.is_finished) {
+                    setIsPolling(true);
+                } else {
+                    setIsPolling(false);
+                }
+            } catch (error) {
+                console.error('Failed to fetch cloud status:', error);
+                setIsPolling(false);
+            }
+        };
+
+        fetchCloudStatus();
+
+        // Poll every 5 seconds if remote and not finished
+        let interval;
+        if (isPolling) {
+            interval = setInterval(fetchCloudStatus, 5000);
+        }
+
+        return () => {
+            if (interval) clearInterval(interval);
+        };
+    }, [runId, run, isPolling]);
 
     useEffect(() => {
         const fetchData = async () => {
@@ -94,13 +132,25 @@ export function RunDetails() {
                     <p className="text-slate-500 mt-1 flex items-center gap-2">
                         <Layers size={16} />
                         Pipeline: <span className="font-medium text-slate-700">{run.pipeline_name}</span>
+                        {cloudStatus?.is_remote && (
+                            <Badge variant="secondary" className="text-xs bg-blue-50 text-blue-600 flex items-center gap-1">
+                                <Cloud size={12} />
+                                {cloudStatus.orchestrator_type}
+                            </Badge>
+                        )}
+                        {cloudStatus?.is_remote && isPolling && (
+                            <span className="text-xs text-amber-600 flex items-center gap-1 animate-pulse">
+                                <Activity size={12} />
+                                Live
+                            </span>
+                        )}
                     </p>
                 </div>
                 <div className="flex flex-col items-end gap-2">
                     <div className="flex items-center gap-2">
                         <SimpleProjectSelector runId={run.run_id} currentProject={run.project} />
                         <Badge variant={statusVariant} className="text-sm px-4 py-1.5 uppercase tracking-wide shadow-sm">
-                            {run.status}
+                            {cloudStatus?.cloud_status?.status || run.status}
                         </Badge>
                     </div>
                     <span className="text-xs text-slate-400 font-mono">ID: {run.run_id}</span>
@@ -480,6 +530,16 @@ function ArtifactsTab({ artifacts, onArtifactClick }) {
                                 <p className="text-xs text-slate-500 truncate">{art.type}</p>
                             </div>
                             <div className="flex items-center gap-2">
+                                <button
+                                    className="p-2 rounded-lg hover:bg-white transition-colors text-slate-400 hover:text-primary-600 disabled:opacity-40"
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        downloadArtifactById(art.artifact_id);
+                                    }}
+                                    disabled={!art.artifact_id}
+                                >
+                                    <Download size={14} />
+                                </button>
                                 <Maximize2 size={14} className="text-slate-300 group-hover:text-primary-400 transition-colors" />
                                 <ArrowRight size={14} className="text-slate-300 group-hover:text-primary-400 opacity-0 group-hover:opacity-100 transition-all" />
                             </div>
@@ -526,12 +586,21 @@ function ArtifactModal({ artifact, onClose }) {
                                 <p className="text-sm text-slate-500">{artifact.type}</p>
                             </div>
                         </div>
-                        <button
-                            onClick={onClose}
-                            className="p-2 hover:bg-white rounded-lg transition-colors"
-                        >
-                            <X size={20} className="text-slate-400" />
-                        </button>
+                        <div className="flex items-center gap-2">
+                            <button
+                                onClick={() => downloadArtifactById(artifact.artifact_id)}
+                                className="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-primary-600 text-white text-sm font-semibold hover:bg-primary-500 transition-colors disabled:opacity-50"
+                                disabled={!artifact.artifact_id}
+                            >
+                                <Download size={16} /> Download
+                            </button>
+                            <button
+                                onClick={onClose}
+                                className="p-2 hover:bg-white rounded-lg transition-colors"
+                            >
+                                <X size={20} className="text-slate-400" />
+                            </button>
+                        </div>
                     </div>
 
                     {/* Content */}
@@ -663,8 +732,8 @@ function SimpleProjectSelector({ runId, currentProject }) {
                                         onClick={() => handleSelectProject(p.name)}
                                         disabled={updating}
                                         className={`w-full text-left px-3 py-2 text-sm rounded-lg transition-colors ${p.name === currentProject
-                                                ? 'bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-300 font-medium'
-                                                : 'text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700'
+                                            ? 'bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-300 font-medium'
+                                            : 'text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700'
                                             }`}
                                     >
                                         {p.name} {p.name === currentProject && '✓'}