Files
coze-studio/frontend/packages/workflow/test-run/src/components/log-detail/log-detail.tsx

107 lines
2.9 KiB
TypeScript

/*
* Copyright 2025 coze-dev Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React, { useLayoutEffect, useMemo, useState } from 'react';
import { type FlowNodeEntity } from '@flowgram-adapter/free-layout-editor';
import { type NodeResult } from '@coze-workflow/base/api';
import { type WorkflowLinkLogData } from '../../types';
import { useMarkdownModal } from '../../features/log';
import { LogDetailPagination } from './pagination';
import { type LogImages as LogImagesType } from './log-images';
import { LogFields } from './log-fields';
import useGetCurrentResult from './hooks/use-get-current-result';
import css from './log-detail.module.less';
interface LogDetailProps {
result: NodeResult;
node?: FlowNodeEntity;
paginationFixedCount?: number;
LogImages: LogImagesType;
spaceId: string;
workflowId: string;
onOpenWorkflowLink?: (data: WorkflowLinkLogData) => void;
}
export const LogDetail: React.FC<LogDetailProps> = ({
result,
node,
paginationFixedCount,
LogImages,
spaceId,
workflowId,
onOpenWorkflowLink,
}) => {
const { isBatch, nodeId } = result;
/** Start from 0 */
const [paging, setPaging] = useState(0);
/** Just look at the error. */
const [onlyShowError, setOnlyShowError] = useState(false);
const { current, batchData } = useGetCurrentResult({
result,
paging,
spaceId,
workflowId,
});
const echoCurrent = useMemo(() => {
if (!isBatch || !onlyShowError) {
return current;
}
return current?.errorInfo ? current : undefined;
}, [isBatch, onlyShowError, current]);
const { modal, open } = useMarkdownModal();
// When the paging data changes, re-select the first item
useLayoutEffect(() => {
setPaging(0);
}, [batchData]);
return (
<div className={css['log-detail']}>
{/* paging */}
{isBatch ? (
<LogDetailPagination
paging={paging}
data={batchData}
fixedCount={paginationFixedCount}
onlyShowError={onlyShowError}
onChange={setPaging}
onShowErrorChange={setOnlyShowError}
/>
) : null}
{echoCurrent ? (
<LogImages testRunResult={echoCurrent} nodeId={nodeId} />
) : null}
<LogFields
data={echoCurrent}
node={node}
onPreview={open}
onOpenWorkflowLink={onOpenWorkflowLink}
/>
{modal}
</div>
);
};