Commit bc90fc88 authored by JzoNg's avatar JzoNg

tracing node style update

parent 5afa5fb0
'use client' 'use client'
import { useTranslation } from 'react-i18next'
import type { FC } from 'react' import type { FC } from 'react'
import cn from 'classnames' import cn from 'classnames'
import BlockIcon from '../block-icon' import BlockIcon from '../block-icon'
import type { BlockEnum } from '../types' 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 { CheckCircle, Loading02 } from '@/app/components/base/icons/src/vender/line/general'
import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows' import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
...@@ -23,12 +26,15 @@ type Props = { ...@@ -23,12 +26,15 @@ type Props = {
} }
const NodePanel: FC<Props> = ({ nodeInfo, collapsed, collapseHandle }) => { const NodePanel: FC<Props> = ({ nodeInfo, collapsed, collapseHandle }) => {
const { t } = useTranslation()
const getTime = (time: number) => { const getTime = (time: number) => {
if (time < 1) if (time < 1)
return `${time * 1000} ms` return `${time * 1000} ms`
if (time > 60) if (time > 60)
return `${parseInt(Math.round(time / 60).toString())} m ${(time % 60).toFixed(3)} s` return `${parseInt(Math.round(time / 60).toString())} m ${(time % 60).toFixed(3)} s`
} }
const getTokenCount = (tokens: number) => { const getTokenCount = (tokens: number) => {
if (tokens < 1000) if (tokens < 1000)
return tokens return tokens
...@@ -37,14 +43,16 @@ const NodePanel: FC<Props> = ({ nodeInfo, collapsed, collapseHandle }) => { ...@@ -37,14 +43,16 @@ const NodePanel: FC<Props> = ({ nodeInfo, collapsed, collapseHandle }) => {
if (tokens >= 1000000) if (tokens >= 1000000)
return `${parseFloat((tokens / 1000000).toFixed(3))}M` return `${parseFloat((tokens / 1000000).toFixed(3))}M`
} }
return ( return (
<div className='px-4 py-1'> <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 <div
className={cn( 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', !collapsed && 'pb-2',
)} )}
onClick={collapseHandle}
> >
<ChevronRight <ChevronRight
className={cn( className={cn(
...@@ -59,10 +67,10 @@ const NodePanel: FC<Props> = ({ nodeInfo, collapsed, collapseHandle }) => { ...@@ -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]' /> <CheckCircle className='shrink-0 ml-2 w-3.5 h-3.5 text-[#12B76A]' />
)} )}
{nodeInfo.status === 'failed' && ( {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' && ( {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' && ( {nodeInfo.status === 'running' && (
<div className='shrink-0 text-primary-600 text-[13px] leading-[16px] font-medium'> <div className='shrink-0 text-primary-600 text-[13px] leading-[16px] font-medium'>
...@@ -73,12 +81,34 @@ const NodePanel: FC<Props> = ({ nodeInfo, collapsed, collapseHandle }) => { ...@@ -73,12 +81,34 @@ const NodePanel: FC<Props> = ({ nodeInfo, collapsed, collapseHandle }) => {
</div> </div>
{!collapsed && ( {!collapsed && (
<div className='pb-2'> <div className='pb-2'>
{/* TODO */}
<div className='px-[10px] py-1'> <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'>
{/* ###TODO### value */}
<CodeEditor
readOnly
title={<div>INPUT</div>}
language={CodeLanguage.json}
value={''}
onChange={() => {}}
/>
</div> </div>
<div className='px-[10px] py-1'> <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>OUTPUT</div>}
language={CodeLanguage.json}
value={''}
onChange={() => {}}
/>
</div> </div>
</div> </div>
)} )}
......
...@@ -5,8 +5,8 @@ import StatusPanel from './status' ...@@ -5,8 +5,8 @@ import StatusPanel from './status'
import MetaData from './meta' import MetaData from './meta'
import Loading from '@/app/components/base/loading' import Loading from '@/app/components/base/loading'
import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor' 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 { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
import { fetchRunDetail } from '@/service/log'
import type { WorkflowRunDetailResponse } from '@/models/log' import type { WorkflowRunDetailResponse } from '@/models/log'
import { useStore as useAppStore } from '@/app/components/app/store' import { useStore as useAppStore } from '@/app/components/app/store'
......
...@@ -15,7 +15,8 @@ const nodeInfoFake = { ...@@ -15,7 +15,8 @@ const nodeInfoFake = {
title: 'START', title: 'START',
time: 67.349, time: 67.349,
tokens: 2708, tokens: 2708,
status: 'succeeded', status: 'failed',
error: 'lvlvlvlv',
} }
const Tracing: FC<TracingProps> = ({ runID }) => { const Tracing: FC<TracingProps> = ({ runID }) => {
......
...@@ -256,6 +256,9 @@ const translation = { ...@@ -256,6 +256,9 @@ const translation = {
instructionPlaceholder: 'Write your instruction', instructionPlaceholder: 'Write your instruction',
}, },
}, },
tracing: {
stopBy: 'Stop by {{user}}',
},
} }
export default translation export default translation
...@@ -256,6 +256,9 @@ const translation = { ...@@ -256,6 +256,9 @@ const translation = {
instructionPlaceholder: '在这里输入你的指令', instructionPlaceholder: '在这里输入你的指令',
}, },
}, },
tracing: {
stopBy: '由{{user}}终止',
},
} }
export default translation export default translation
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment