run and history

web/app/components/rag-pipeline/components/rag-pipeline-header/index.tsx

@@ -1,25 +1,35 @@
 import {
   memo,
+  useCallback,
   useMemo,
 } from 'react'
 import type { HeaderProps } from '@/app/components/workflow/header'
 import Header from '@/app/components/workflow/header'
 import { fetchWorkflowRunHistory } from '@/service/workflow'
-import { useStore } from '@/app/components/workflow/store'
+import {
+  useStore,
+  useWorkflowStore,
+} from '@/app/components/workflow/store'
 import InputFieldButton from './input-field-button'
 import Publisher from './publisher'
 
 const RagPipelineHeader = () => {
+  const workflowStore = useWorkflowStore()
   const pipelineId = useStore(s => s.pipelineId)
+  const showDebugAndPreviewPanel = useStore(s => s.showDebugAndPreviewPanel)
 
   const viewHistoryProps = useMemo(() => {
     return {
-      historyUrl: '',
+      historyUrl: `/rag/pipelines/${pipelineId}/workflow-runs`,
-      // historyUrl: `/rag/pipeline/${pipelineId}/workflow-runs`,
       historyFetcher: fetchWorkflowRunHistory,
     }
   }, [pipelineId])
 
+  const handleStopRun = useCallback(() => {
+    const { setShowDebugAndPreviewPanel } = workflowStore.getState()
+    setShowDebugAndPreviewPanel(false)
+  }, [workflowStore])
+
   const headerProps: HeaderProps = useMemo(() => {
     return {
       normal: {
@@ -31,13 +41,15 @@ const RagPipelineHeader = () => {
           showRunButton: true,
           runButtonText: 'Test Run',
           viewHistoryProps,
+          isRunning: showDebugAndPreviewPanel,
+          onStopRun: handleStopRun,
         },
       },
       viewHistory: {
         viewHistoryProps,
       },
     }
-  }, [viewHistoryProps])
+  }, [viewHistoryProps, showDebugAndPreviewPanel, handleStopRun])
 
   return (
     <Header {...headerProps} />

web/app/components/rag-pipeline/hooks/use-nodes-sync-draft.ts

@@ -93,8 +93,8 @@ export const useNodesSyncDraft = () => {
   ) => {
     if (getNodesReadOnly())
       return
-    const postParams = getPostParams()
 
+    const postParams = getPostParams()
     if (postParams) {
       const {
         setSyncWorkflowDraftHash,

web/app/components/rag-pipeline/hooks/use-pipeline-start-run.tsx

@@ -1,21 +1,16 @@
 import { useCallback } from 'react'
-import { useStoreApi } from 'reactflow'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import {
-  BlockEnum,
   WorkflowRunningStatus,
 } from '@/app/components/workflow/types'
 import { useWorkflowInteractions } from '@/app/components/workflow/hooks'
 import {
   useNodesSyncDraft,
-  usePipelineRun,
 } from '.'
 
 export const usePipelineStartRun = () => {
-  const store = useStoreApi()
   const workflowStore = useWorkflowStore()
   const { handleCancelDebugAndPreviewPanel } = useWorkflowInteractions()
-  const { handleRun } = usePipelineRun()
   const { doSyncWorkflowDraft } = useNodesSyncDraft()
 
   const handleWorkflowStartRunInWorkflow = useCallback(async () => {
@@ -26,13 +21,8 @@ export const usePipelineStartRun = () => {
     if (workflowRunningData?.result.status === WorkflowRunningStatus.Running)
       return
 
-    const { getNodes } = store.getState()
-    const nodes = getNodes()
-    const startNode = nodes.find(node => node.data.type === BlockEnum.Start)
-    const startVariables = startNode?.data.variables || []
     const {
       showDebugAndPreviewPanel,
-      setShowInputsPanel,
       setShowEnvPanel,
       setShowDebugAndPreviewPanel,
     } = workflowStore.getState()
@@ -44,17 +34,9 @@ export const usePipelineStartRun = () => {
       return
     }
 
-    if (!startVariables.length) {
     await doSyncWorkflowDraft()
-      handleRun({ inputs: {}, files: [] })
     setShowDebugAndPreviewPanel(true)
-      setShowInputsPanel(false)
+  }, [workflowStore, handleCancelDebugAndPreviewPanel, doSyncWorkflowDraft])
-    }
-    else {
-      setShowDebugAndPreviewPanel(true)
-      setShowInputsPanel(true)
-    }
-  }, [store, workflowStore, handleCancelDebugAndPreviewPanel, handleRun, doSyncWorkflowDraft])
 
   const handleStartWorkflowRun = useCallback(() => {
     handleWorkflowStartRunInWorkflow()

web/app/components/workflow/header/run-and-history.tsx

@@ -21,30 +21,36 @@ import {
 
 type RunModeProps = {
   text?: string
+  isRunning?: boolean
+  onStopRun?: () => void
 }
 const RunMode = memo(({
   text,
+  isRunning: running,
+  onStopRun,
 }: RunModeProps) => {
   const { t } = useTranslation()
   const { handleWorkflowStartRunInWorkflow } = useWorkflowStartRun()
   const { handleStopRun } = useWorkflowRun()
   const workflowRunningData = useStore(s => s.workflowRunningData)
   const isRunning = workflowRunningData?.result.status === WorkflowRunningStatus.Running
+  const mergedRunning = isRunning || running
 
   return (
     <>
       <div
         className={cn(
-          'flex h-7 items-center rounded-md px-2.5 text-[13px] font-medium text-components-button-secondary-accent-text',
+          'flex h-7 items-center px-2.5 text-[13px] font-medium text-components-button-secondary-accent-text',
           'cursor-pointer hover:bg-state-accent-hover',
-          isRunning && '!cursor-not-allowed bg-state-accent-hover',
+          mergedRunning && 'cursor-not-allowed bg-state-accent-hover',
+          mergedRunning ? 'rounded-l-md' : 'rounded-md',
         )}
         onClick={() => {
           handleWorkflowStartRunInWorkflow()
         }}
       >
         {
-          isRunning
+          mergedRunning
             ? (
               <>
                 <RiLoader2Line className='mr-1 h-4 w-4 animate-spin' />
@@ -60,12 +66,14 @@ const RunMode = memo(({
         }
       </div>
       {
-        isRunning && (
+        mergedRunning && (
           <div
-            className='ml-0.5 flex h-7 w-7 cursor-pointer items-center justify-center rounded-md hover:bg-black/5'
+            className={cn(
-            onClick={() => handleStopRun(workflowRunningData?.task_id || '')}
+              'ml-[1px] flex h-7 w-7 cursor-pointer items-center justify-center rounded-r-md bg-state-accent-active',
+            )}
+            onClick={() => onStopRun ? onStopRun() : handleStopRun(workflowRunningData?.task_id || '')}
           >
-            <StopCircle className='h-4 w-4 text-components-button-ghost-text' />
+            <StopCircle className='h-4 w-4 text-text-accent' />
           </div>
         )
       }
@@ -94,12 +102,16 @@ const PreviewMode = memo(() => {
 export type RunAndHistoryProps = {
   showRunButton?: boolean
   runButtonText?: string
+  isRunning?: boolean
+  onStopRun?: () => void
   showPreviewButton?: boolean
   viewHistoryProps?: ViewHistoryProps
 }
 const RunAndHistory = ({
   showRunButton,
   runButtonText,
+  isRunning,
+  onStopRun,
   showPreviewButton,
   viewHistoryProps,
 }: RunAndHistoryProps) => {
@@ -108,7 +120,7 @@ const RunAndHistory = ({
   return (
     <div className='flex h-8 items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-0.5 shadow-xs'>
       {
-        showRunButton && <RunMode text={runButtonText} />
+        showRunButton && <RunMode text={runButtonText} isRunning={isRunning} onStopRun={onStopRun} />
       }
       {
         showPreviewButton && <PreviewMode />