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

View File

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

View File

@ -74,7 +74,7 @@ const NodePanel: FC<Props> = ({
onShowIterationDetail?.(nodeInfo.details || [])
}
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={cn(
@ -127,7 +127,7 @@ const NodePanel: FC<Props> = ({
onClick={handleOnShowIterationDetail}
>
<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
? (
<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' />
</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' && (
<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[]
onShowIterationDetail?: (detail: NodeTracing[][]) => void
className?: string
hideNodeInfo?: boolean
hideNodeProcessDetail?: boolean
}
type TracingNodeProps = {
@ -30,6 +32,8 @@ type TracingNodeProps = {
children: TracingNodeProps[]
parallelTitle?: string
branchTitle?: string
hideNodeInfo?: boolean
hideNodeProcessDetail?: boolean
}
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)
for (const node of nodes) {
const parent_parallel_id = node.execution_metadata?.parent_parallel_id ?? null
const parallel_id = node.execution_metadata?.parallel_id ?? null
const parent_parallel_id = node.parent_parallel_id ?? node.execution_metadata?.parent_parallel_id ?? null
const parallel_id = node.parallel_id ?? node.execution_metadata?.parallel_id ?? null
if (parallel_id) {
const parentKey = parent_parallel_id || 'root'
@ -75,15 +79,10 @@ function buildLogTree(nodes: NodeTracing[]): TracingNodeProps[] {
}
for (const node of nodes) {
let parallel_id = node.execution_metadata?.parallel_id ?? null
const parent_parallel_id = node.execution_metadata?.parent_parallel_id ?? null
let 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
if (node.node_type === BlockEnum.Iteration) {
parallel_id = node.parallel_id ?? null
parallel_start_node_id = node.parallel_start_node_id ?? null
}
const parallel_id = node.parallel_id ?? node.execution_metadata?.parallel_id ?? null
const parent_parallel_id = node.parent_parallel_id ?? node.execution_metadata?.parent_parallel_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.parent_parallel_start_node_id ?? node.execution_metadata?.parent_parallel_start_node_id ?? null
if (!parallel_id || node.node_type === BlockEnum.End) {
rootNodes.push({
@ -106,7 +105,7 @@ function buildLogTree(nodes: NodeTracing[]): TracingNodeProps[] {
if (parent_parallel_id && parallelStacks[parent_parallel_id]) {
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)
newParallelGroup.parallelTitle = getParallelTitle(parent_parallel_id)
@ -128,7 +127,7 @@ function buildLogTree(nodes: NodeTracing[]): TracingNodeProps[] {
}
else {
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)
sameBranchIndex++
@ -147,7 +146,13 @@ function buildLogTree(nodes: NodeTracing[]): TracingNodeProps[] {
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 [collapsedNodes, setCollapsedNodes] = useState<Set<string>>(new Set())
const [hoveredParallel, setHoveredParallel] = useState<string | null>(null)
@ -235,6 +240,8 @@ const TracingPanel: FC<TracingPanelProps> = ({ list, onShowIterationDetail, clas
nodeInfo={node.data!}
onShowIterationDetail={onShowIterationDetail}
justShowIterationNavArrow={true}
hideInfo={hideNodeInfo}
hideProcessDetail={hideNodeProcessDetail}
/>
</div>
)

View File

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