Run view

backend/app/api/run_management.py

@@ -31,6 +31,12 @@ def list_runs(
     runs = query.order_by(RunModel.start_time.desc()).limit(last_k).all()
     return runs
 
+@router.get("/{run_id}/", response_model=RunResponseSchema)
+def get_run(run_id: str, db: Session = Depends(get_db)):
+    run = db.query(RunModel).filter(RunModel.id == run_id).first()
+    if not run:
+        raise HTTPException(status_code=404, detail="Run not found")
+    return run
 
 @router.get("/{run_id}/status/", response_model=RunStatusResponseSchema)
 def get_run_status(run_id: str, db: Session = Depends(get_db)):

frontend/src/components/Header.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import {
   Input,
@@ -9,23 +9,52 @@ import {
   Link,
   Button,
   Spinner,
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownItem,
 } from "@nextui-org/react";
 import { Icon } from "@iconify/react";
 import SettingsCard from './settings/Settings';
 import { setProjectName, updateNodeData, resetRun } from '../store/flowSlice'; // Ensure updateNodeData is imported
 import RunModal from './RunModal';
 import { getRunStatus, startRun, getWorkflow } from '../utils/api';
 import { Toaster, toast } from 'sonner'
+import { getWorkflowRuns } from '../utils/api';
+import { useRouter } from 'next/router';
 
 const Header = ({ activePage }) => {
   const dispatch = useDispatch();
   const nodes = useSelector((state) => state.flow.nodes);
   const projectName = useSelector((state) => state.flow.projectName);
   const [isRunning, setIsRunning] = useState(false);
   const [isDebugModalOpen, setIsDebugModalOpen] = useState(false);
+  const [workflowRuns, setWorkflowRuns] = useState([]);
+  const [isHistoryOpen, setIsHistoryOpen] = useState(false);
+  const workflowId = useSelector((state) => state.flow.workflowID);
+
+  const router = useRouter();
+  const { id } = router.query;
+  const isRun = id[0] == 'R';
 
   let currentStatusInterval = null;
 
+  const fetchWorkflowRuns = async () => {
+    try {
+      const response = await getWorkflowRuns(workflowId);
+      setWorkflowRuns(response);
+    }
+    catch (error) {
+      console.error('Error fetching workflow runs:', error);
+    }
+  };
+
+  useEffect(() => {
+    if (workflowId) {
+      fetchWorkflowRuns();
+    }
+  }, [workflowId]);
+
   const updateWorkflowStatus = async (runID) => {
     let pollCount = 0;
     if (currentStatusInterval) {
@@ -67,14 +96,14 @@ const Header = ({ activePage }) => {
     }, 1000);
   };
 
-  // get the workflow ID from the URL
-  const workflowID = typeof window !== 'undefined' ? window.location.pathname.split('/').pop() : null;
 
   const executeWorkflow = async (inputValues) => {
     try {
       toast('Starting workflow run...');
-      const result = await startRun(workflowID, inputValues, null, 'interactive');
+      const result = await startRun(workflowId, inputValues, null, 'interactive');
+      console.log('Workflow run started:', result);
       setIsRunning(true);
+      fetchWorkflowRuns();
       dispatch(resetRun());
       updateWorkflowStatus(result.id);
     } catch (error) {
@@ -102,7 +131,7 @@ const Header = ({ activePage }) => {
   const handleDownloadWorkflow = async () => {
     try {
       // Get the current workflow using the workflowID from Redux state
-      const workflow = await getWorkflow(workflowID);
+      const workflow = await getWorkflow(workflowId);
 
       const workflowDetails = {
         name: workflow.name,
@@ -208,24 +237,48 @@ const Header = ({ activePage }) => {
             justify="end"
             id="workflow-actions-buttons"
           >
-            {isRunning ? (
+            {!isRun && (
               <>
-                <NavbarItem className="hidden sm:flex">
-                  <Spinner size="sm" />
-                </NavbarItem>
-                <NavbarItem className="hidden sm:flex">
-                  <Button isIconOnly radius="full" variant="light" onClick={handleStopWorkflow}>
-                    <Icon className="text-default-500" icon="solar:stop-linear" width={22} />
-                  </Button>
-                </NavbarItem>
+                {isRunning ? (
+                  <>
+                    <NavbarItem className="hidden sm:flex">
+                      <Spinner size="sm" />
+                    </NavbarItem>
+                    <NavbarItem className="hidden sm:flex">
+                      <Button isIconOnly radius="full" variant="light" onClick={handleStopWorkflow}>
+                        <Icon className="text-default-500" icon="solar:stop-linear" width={22} />
+                      </Button>
+                    </NavbarItem>
+                  </>
+                ) : (
+                  <NavbarItem className="hidden sm:flex">
+                    <Button isIconOnly radius="full" variant="light" onClick={handleRunWorkflow}>
+                      <Icon className="text-default-500" icon="solar:play-linear" width={22} />
+                    </Button>
+                  </NavbarItem>
+                )}
               </>
-            ) : (
-              <NavbarItem className="hidden sm:flex">
-                <Button isIconOnly radius="full" variant="light" onClick={handleRunWorkflow}>
-                  <Icon className="text-default-500" icon="solar:play-linear" width={22} />
-                </Button>
-              </NavbarItem>
             )}
+            <NavbarItem className="hidden sm:flex">
+              <Dropdown isOpen={isHistoryOpen} onOpenChange={setIsHistoryOpen}>
+                <DropdownTrigger>
+                  <Button isIconOnly radius="full" variant="light">
+                    <Icon className="text-default-500" icon="solar:history-linear" width={22} />
+                  </Button>
+                </DropdownTrigger>
+                <DropdownMenu>
+                  {workflowRuns.map((run, index) => (
+                    <DropdownItem
+                      key={index}
+                      onClick={() => window.open(`/traces/${run.id}`, '_blank')}
+                      textValue={`Version ${index + 1}`}
+                    >
+                      Run {workflowRuns.length - index}
+                    </DropdownItem>
+                  ))}
+                </DropdownMenu>
+              </Dropdown>
+            </NavbarItem>
             <NavbarItem className="hidden sm:flex">
               <Button
                 isIconOnly

frontend/src/components/canvas/FlowCanvas.jsx

@@ -33,11 +33,10 @@ import LoadingSpinner from '../LoadingSpinner'; // Updated import
 import ConditionalNode from '../nodes/ConditionalNode';
 import dagre from '@dagrejs/dagre';
 
-
 const useNodeTypes = ({ nodeTypesConfig }) => {
   const nodeTypes = useMemo(() => {
     if (!nodeTypesConfig) return {};
-    return Object.keys(nodeTypesConfig).reduce((acc, category) => {
+    const types = Object.keys(nodeTypesConfig).reduce((acc, category) => {
       nodeTypesConfig[category].forEach(node => {
         if (node.name === 'InputNode') {
           acc[node.name] = InputNode;
@@ -51,6 +50,11 @@ const useNodeTypes = ({ nodeTypesConfig }) => {
       });
       return acc;
     }, {});
+
+    // Add the OutputNode component
+    // types['OutputNode'] = OutputNode;
+    return types;
+
   }, [nodeTypesConfig]);
 
   const isLoading = !nodeTypesConfig;