From bc90fc885f459a8d3df7304cd7379713eb16936b Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Sat, 9 Mar 2024 11:06:25 +0800
Subject: [PATCH] tracing node style update

---
 web/app/components/workflow/run/node.tsx    | 46 +++++++++++++++++----
 web/app/components/workflow/run/result.tsx  |  2 +-
 web/app/components/workflow/run/tracing.tsx |  3 +-
 web/i18n/en-US/workflow.ts                  |  3 ++
 web/i18n/zh-Hans/workflow.ts                |  3 ++
 5 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/web/app/components/workflow/run/node.tsx b/web/app/components/workflow/run/node.tsx
index 79b1dda0f5..181adbca1e 100644
--- a/web/app/components/workflow/run/node.tsx
+++ b/web/app/components/workflow/run/node.tsx
@@ -1,9 +1,12 @@
 'use client'
+import { useTranslation } from 'react-i18next'
 import type { FC } from 'react'
 import cn from 'classnames'
 import BlockIcon from '../block-icon'
 import type { BlockEnum } from '../types'
-import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
+import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
+import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
+import { AlertCircle, AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import { CheckCircle, Loading02 } from '@/app/components/base/icons/src/vender/line/general'
 import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 
@@ -23,12 +26,15 @@ type Props = {
 }
 
 const NodePanel: FC<Props> = ({ nodeInfo, collapsed, collapseHandle }) => {
+  const { t } = useTranslation()
+
   const getTime = (time: number) => {
     if (time < 1)
       return `${time * 1000} ms`
     if (time > 60)
       return `${parseInt(Math.round(time / 60).toString())} m ${(time % 60).toFixed(3)} s`
   }
+
   const getTokenCount = (tokens: number) => {
     if (tokens < 1000)
       return tokens
@@ -37,14 +43,16 @@ const NodePanel: FC<Props> = ({ nodeInfo, collapsed, collapseHandle }) => {
     if (tokens >= 1000000)
       return `${parseFloat((tokens / 1000000).toFixed(3))}M`
   }
+
   return (
     <div className='px-4 py-1'>
-      <div className='group transition-all bg-white border border-gray-100 rounded-2xl shadow-xs cursor-pointer hover:shadow-md' onClick={collapseHandle}>
+      <div className='group transition-all bg-white border border-gray-100 rounded-2xl shadow-xs hover:shadow-md'>
         <div
           className={cn(
-            'flex items-center pl-[6px] py-3 pr-3',
+            'flex items-center pl-[6px] py-3 pr-3 cursor-pointer',
             !collapsed && 'pb-2',
           )}
+          onClick={collapseHandle}
         >
           <ChevronRight
             className={cn(
@@ -59,10 +67,10 @@ const NodePanel: FC<Props> = ({ nodeInfo, collapsed, collapseHandle }) => {
             <CheckCircle className='shrink-0 ml-2 w-3.5 h-3.5 text-[#12B76A]' />
           )}
           {nodeInfo.status === 'failed' && (
-            <AlertTriangle className='shrink-0 ml-2 w-3 h-3 text-[#F79009]' />
+            <AlertCircle className='shrink-0 ml-2 w-3.5 h-3.5 text-[#F04438]' />
           )}
           {nodeInfo.status === 'stopped' && (
-            <AlertTriangle className='shrink-0 ml-2 w-3 h-3 text-[#F79009]' />
+            <AlertTriangle className='shrink-0 ml-2 w-3.5 h-3.5 text-[#F79009]' />
           )}
           {nodeInfo.status === 'running' && (
             <div className='shrink-0 text-primary-600 text-[13px] leading-[16px] font-medium'>
@@ -73,12 +81,34 @@ const NodePanel: FC<Props> = ({ nodeInfo, collapsed, collapseHandle }) => {
         </div>
         {!collapsed && (
           <div className='pb-2'>
-            {/* TODO */}
             <div className='px-[10px] py-1'>
-              <div className='p-3 bg-gray-50 rounded-lg h-[120px] text-gray-700'>INPUT</div>
+              {/* ###TODO### no data */}
+              {nodeInfo.status === 'stopped' && (
+                <div className='px-3 py-[10px] bg-[#fffaeb] rounded-lg border-[0.5px] border-[rbga(0,0,0,0.05)] text-xs leading-[18px] text-[#dc6803] shadow-xs'>{t('workflow.tracing.stopBy', { user: 'Evan' })}</div>
+              )}
+              {nodeInfo.status === 'failed' && (
+                <div className='px-3 py-[10px] bg-[#fef3f2] rounded-lg border-[0.5px] border-[rbga(0,0,0,0.05)] text-xs leading-[18px] text-[#d92d20] shadow-xs'>{nodeInfo.error}</div>
+              )}
             </div>
             <div className='px-[10px] py-1'>
-              <div className='p-3 bg-gray-50 rounded-lg h-[120px] text-gray-700'>OUPUT</div>
+              {/* ###TODO### value */}
+              <CodeEditor
+                readOnly
+                title={<div>INPUT</div>}
+                language={CodeLanguage.json}
+                value={''}
+                onChange={() => {}}
+              />
+            </div>
+            <div className='px-[10px] py-1'>
+              {/* ###TODO### value */}
+              <CodeEditor
+                readOnly
+                title={<div>OUTPUT</div>}
+                language={CodeLanguage.json}
+                value={''}
+                onChange={() => {}}
+              />
             </div>
           </div>
         )}
diff --git a/web/app/components/workflow/run/result.tsx b/web/app/components/workflow/run/result.tsx
index 10c75f3c40..afe7f32418 100644
--- a/web/app/components/workflow/run/result.tsx
+++ b/web/app/components/workflow/run/result.tsx
@@ -5,8 +5,8 @@ import StatusPanel from './status'
 import MetaData from './meta'
 import Loading from '@/app/components/base/loading'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
-import { fetchRunDetail } from '@/service/log'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
+import { fetchRunDetail } from '@/service/log'
 import type { WorkflowRunDetailResponse } from '@/models/log'
 import { useStore as useAppStore } from '@/app/components/app/store'
 
diff --git a/web/app/components/workflow/run/tracing.tsx b/web/app/components/workflow/run/tracing.tsx
index cb4dbe8aa6..21185447d7 100644
--- a/web/app/components/workflow/run/tracing.tsx
+++ b/web/app/components/workflow/run/tracing.tsx
@@ -15,7 +15,8 @@ const nodeInfoFake = {
   title: 'START',
   time: 67.349,
   tokens: 2708,
-  status: 'succeeded',
+  status: 'failed',
+  error: 'lvlvlvlv',
 }
 
 const Tracing: FC<TracingProps> = ({ runID }) => {
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index 712ebb59a9..c8f627b701 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -256,6 +256,9 @@ const translation = {
       instructionPlaceholder: 'Write your instruction',
     },
   },
+  tracing: {
+    stopBy: 'Stop by {{user}}',
+  },
 }
 
 export default translation
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index ebfc83012e..b0cbd1c46e 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -256,6 +256,9 @@ const translation = {
       instructionPlaceholder: '在这里输入你的指令',
     },
   },
+  tracing: {
+    stopBy: '由{{user}}终止',
+  },
 }
 
 export default translation