update log in web app

This commit is contained in:
Yi 2024-09-03 17:27:32 +08:00
parent 36d95e49b0
commit 6bee121ebe
5 changed files with 31 additions and 18 deletions

View File

@ -31,6 +31,7 @@ const WorkflowProcessItem = ({
grayBg, grayBg,
expand = false, expand = false,
hideInfo = false, hideInfo = false,
hideProcessDetail = false,
}: WorkflowProcessProps) => { }: WorkflowProcessProps) => {
const { t } = useTranslation() const { t } = useTranslation()
const [collapse, setCollapse] = useState(!expand) const [collapse, setCollapse] = useState(!expand)
@ -109,6 +110,8 @@ const WorkflowProcessItem = ({
<TracingPanel <TracingPanel
list={data.tracing} list={data.tracing}
onShowIterationDetail={showIterationDetail} onShowIterationDetail={showIterationDetail}
hideNodeInfo={hideInfo}
hideNodeProcessDetail={hideProcessDetail}
/> />
} }
</div> </div>

View File

@ -255,7 +255,7 @@ export const useWorkflowRun = () => {
setWorkflowRunningData(produce(workflowRunningData!, (draft) => { setWorkflowRunningData(produce(workflowRunningData!, (draft) => {
const tracing = draft.tracing! const tracing = draft.tracing!
const iterations = tracing[tracing.length - 1] const iterations = tracing[tracing.length - 1]
const currIteration = [iterations.details![iterations.details!.length - 1]] const currIteration = iterations.details![iterations.details!.length - 1]
currIteration.push({ currIteration.push({
...data, ...data,
status: NodeRunningStatus.Running, status: NodeRunningStatus.Running,

View File

@ -74,7 +74,7 @@ const NodePanel: FC<Props> = ({
onShowIterationDetail?.(nodeInfo.details || []) onShowIterationDetail?.(nodeInfo.details || [])
} }
return ( return (
<div className={cn('px-2 py-1', className, hideInfo && '!p-0')}> <div className={cn('px-2 py-1', className)}>
<div className='group transition-all bg-background-default border border-components-panel-border rounded-[10px] shadows-shadow-xs hover:shadow-md'> <div className='group transition-all bg-background-default border border-components-panel-border rounded-[10px] shadows-shadow-xs hover:shadow-md'>
<div <div
className={cn( className={cn(
@ -127,7 +127,7 @@ const NodePanel: FC<Props> = ({
onClick={handleOnShowIterationDetail} onClick={handleOnShowIterationDetail}
> >
<Iteration className='w-4 h-4 text-components-button-tertiary-text flex-shrink-0' /> <Iteration className='w-4 h-4 text-components-button-tertiary-text flex-shrink-0' />
<div className='flex-1 text-left system-sm-medium text-components-button-tertiary-text'>{t('workflow.nodes.iteration.iteration', { count: nodeInfo.metadata?.iterator_length || nodeInfo.details?.length })}</div> <div className='flex-1 text-left system-sm-medium text-components-button-tertiary-text'>{t('workflow.nodes.iteration.iteration', { count: nodeInfo.metadata?.iterator_index || nodeInfo.details?.length })}</div>
{justShowIterationNavArrow {justShowIterationNavArrow
? ( ? (
<RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text flex-shrink-0' /> <RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text flex-shrink-0' />
@ -142,7 +142,7 @@ const NodePanel: FC<Props> = ({
<Split className='mt-2' /> <Split className='mt-2' />
</div> </div>
)} )}
<div className={cn('px-[10px] py-1', hideInfo && '!px-2 !py-0.5')}> <div className={cn('px-[10px]', hideInfo && '!px-2 !py-0.5')}>
{nodeInfo.status === 'stopped' && ( {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: nodeInfo.created_by ? nodeInfo.created_by.name : 'N/A' })}</div> <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: nodeInfo.created_by ? nodeInfo.created_by.name : 'N/A' })}</div>
)} )}

View File

@ -21,6 +21,8 @@ type TracingPanelProps = {
list: NodeTracing[] list: NodeTracing[]
onShowIterationDetail?: (detail: NodeTracing[][]) => void onShowIterationDetail?: (detail: NodeTracing[][]) => void
className?: string className?: string
hideNodeInfo?: boolean
hideNodeProcessDetail?: boolean
} }
type TracingNodeProps = { type TracingNodeProps = {
@ -30,6 +32,8 @@ type TracingNodeProps = {
children: TracingNodeProps[] children: TracingNodeProps[]
parallelTitle?: string parallelTitle?: string
branchTitle?: string branchTitle?: string
hideNodeInfo?: boolean
hideNodeProcessDetail?: boolean
} }
function buildLogTree(nodes: NodeTracing[]): TracingNodeProps[] { function buildLogTree(nodes: NodeTracing[]): TracingNodeProps[] {
@ -62,8 +66,8 @@ function buildLogTree(nodes: NodeTracing[]): TracingNodeProps[] {
// Count parallel children (for figuring out if we need to use letters) // Count parallel children (for figuring out if we need to use letters)
for (const node of nodes) { for (const node of nodes) {
const parent_parallel_id = node.execution_metadata?.parent_parallel_id ?? null const parent_parallel_id = node.parent_parallel_id ?? node.execution_metadata?.parent_parallel_id ?? null
const parallel_id = node.execution_metadata?.parallel_id ?? null const parallel_id = node.parallel_id ?? node.execution_metadata?.parallel_id ?? null
if (parallel_id) { if (parallel_id) {
const parentKey = parent_parallel_id || 'root' const parentKey = parent_parallel_id || 'root'
@ -75,15 +79,10 @@ function buildLogTree(nodes: NodeTracing[]): TracingNodeProps[] {
} }
for (const node of nodes) { for (const node of nodes) {
let parallel_id = node.execution_metadata?.parallel_id ?? null const parallel_id = node.parallel_id ?? node.execution_metadata?.parallel_id ?? null
const parent_parallel_id = node.execution_metadata?.parent_parallel_id ?? null const parent_parallel_id = node.parent_parallel_id ?? node.execution_metadata?.parent_parallel_id ?? null
let parallel_start_node_id = node.execution_metadata?.parallel_start_node_id ?? null const parallel_start_node_id = node.parallel_start_node_id ?? node.execution_metadata?.parallel_start_node_id ?? null
const parent_parallel_start_node_id = node.execution_metadata?.parent_parallel_start_node_id ?? null const parent_parallel_start_node_id = node.parent_parallel_start_node_id ?? node.execution_metadata?.parent_parallel_start_node_id ?? null
if (node.node_type === BlockEnum.Iteration) {
parallel_id = node.parallel_id ?? null
parallel_start_node_id = node.parallel_start_node_id ?? null
}
if (!parallel_id || node.node_type === BlockEnum.End) { if (!parallel_id || node.node_type === BlockEnum.End) {
rootNodes.push({ rootNodes.push({
@ -106,7 +105,7 @@ function buildLogTree(nodes: NodeTracing[]): TracingNodeProps[] {
if (parent_parallel_id && parallelStacks[parent_parallel_id]) { if (parent_parallel_id && parallelStacks[parent_parallel_id]) {
const sameBranchIndex = parallelStacks[parent_parallel_id].children.findLastIndex(c => const sameBranchIndex = parallelStacks[parent_parallel_id].children.findLastIndex(c =>
c.data?.execution_metadata.parallel_start_node_id === parent_parallel_start_node_id, c.data?.execution_metadata?.parallel_start_node_id === parent_parallel_start_node_id || c.data?.parallel_start_node_id === parent_parallel_start_node_id,
) )
parallelStacks[parent_parallel_id].children.splice(sameBranchIndex + 1, 0, newParallelGroup) parallelStacks[parent_parallel_id].children.splice(sameBranchIndex + 1, 0, newParallelGroup)
newParallelGroup.parallelTitle = getParallelTitle(parent_parallel_id) newParallelGroup.parallelTitle = getParallelTitle(parent_parallel_id)
@ -128,7 +127,7 @@ function buildLogTree(nodes: NodeTracing[]): TracingNodeProps[] {
} }
else { else {
let sameBranchIndex = parallelStacks[parallel_id].children.findLastIndex(c => let sameBranchIndex = parallelStacks[parallel_id].children.findLastIndex(c =>
c.data?.execution_metadata.parallel_start_node_id === parallel_start_node_id, c.data?.execution_metadata?.parallel_start_node_id === parallel_start_node_id || c.data?.parallel_start_node_id === parallel_start_node_id,
) )
if (parallelStacks[parallel_id].children[sameBranchIndex + 1]?.isParallel) if (parallelStacks[parallel_id].children[sameBranchIndex + 1]?.isParallel)
sameBranchIndex++ sameBranchIndex++
@ -147,7 +146,13 @@ function buildLogTree(nodes: NodeTracing[]): TracingNodeProps[] {
return rootNodes return rootNodes
} }
const TracingPanel: FC<TracingPanelProps> = ({ list, onShowIterationDetail, className }) => { const TracingPanel: FC<TracingPanelProps> = ({
list,
onShowIterationDetail,
className,
hideNodeInfo = false,
hideNodeProcessDetail = false,
}) => {
const treeNodes = buildLogTree(list) const treeNodes = buildLogTree(list)
const [collapsedNodes, setCollapsedNodes] = useState<Set<string>>(new Set()) const [collapsedNodes, setCollapsedNodes] = useState<Set<string>>(new Set())
const [hoveredParallel, setHoveredParallel] = useState<string | null>(null) const [hoveredParallel, setHoveredParallel] = useState<string | null>(null)
@ -235,6 +240,8 @@ const TracingPanel: FC<TracingPanelProps> = ({ list, onShowIterationDetail, clas
nodeInfo={node.data!} nodeInfo={node.data!}
onShowIterationDetail={onShowIterationDetail} onShowIterationDetail={onShowIterationDetail}
justShowIterationNavArrow={true} justShowIterationNavArrow={true}
hideInfo={hideNodeInfo}
hideProcessDetail={hideNodeProcessDetail}
/> />
</div> </div>
) )

View File

@ -33,6 +33,7 @@ export type NodeTracing = {
} }
metadata: { metadata: {
iterator_length: number iterator_length: number
iterator_index: number
} }
created_at: number created_at: number
created_by: { created_by: {
@ -46,6 +47,8 @@ export type NodeTracing = {
details?: NodeTracing[][] // iteration detail details?: NodeTracing[][] // iteration detail
parallel_id?: string parallel_id?: string
parallel_start_node_id?: string parallel_start_node_id?: string
parent_parallel_id?: string
parent_parallel_start_node_id?: string
} }
export type FetchWorkflowDraftResponse = { export type FetchWorkflowDraftResponse = {