Spaces:
Sleeping
Sleeping
File size: 3,602 Bytes
01d5a5d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
import type { TrainStepOutput } from '@/service/train';
import { getStepOutputContent } from '@/service/train';
import { Modal, Table } from 'antd';
import { useEffect, useState } from 'react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { tomorrow } from 'react-syntax-highlighter/dist/cjs/styles/prism';
export interface IStepOutputInfo {
path?: string;
stepName: string;
}
interface IProps {
handleClose: () => void;
stepOutputInfo?: IStepOutputInfo;
}
const TrainExposureModel = (props: IProps) => {
const { handleClose, stepOutputInfo } = props;
const [outputContent, setOutputContent] = useState<TrainStepOutput | null>(null);
const [loading, setLoading] = useState<boolean>(true);
useEffect(() => {
if (!stepOutputInfo?.stepName) return;
setOutputContent(null);
setLoading(true);
getStepOutputContent(stepOutputInfo.stepName)
.then((res) => {
if (res.data.code == 0) {
const data = res.data.data;
setOutputContent(data);
} else {
console.error(res.data.message);
}
})
.finally(() => {
setLoading(false);
});
}, [stepOutputInfo?.stepName]);
const renderOutputContent = () => {
if (loading) {
return (
<div className="flex items-center justify-center w-full py-12">
<div className="flex flex-col items-center space-y-4">
<div className="relative w-12 h-12">
<div className="absolute w-12 h-12 rounded-full border-2 border-gray-200" />
<div
className="absolute w-12 h-12 rounded-full border-2 border-t-blue-500 animate-spin"
style={{ animationDuration: '1.2s' }}
/>
</div>
<p className="text-gray-500 text-sm">loading...</p>
</div>
</div>
);
}
if (!outputContent) return 'There are no resources for this step at this time';
if (outputContent.file_type == 'json') {
const showContent = JSON.stringify(outputContent.content, null, 2);
return (
<SyntaxHighlighter
customStyle={{
backgroundColor: 'transparent',
margin: 0,
padding: 0
}}
language="json"
style={tomorrow}
>
{showContent}
</SyntaxHighlighter>
);
}
if (outputContent.file_type == 'parquet') {
const columns = outputContent.columns.map((item, index) => ({
title: item,
dataIndex: item,
key: index
}));
const data = outputContent.content;
return (
<Table className="w-fit max-w-fit" columns={columns} dataSource={data} pagination={false} />
);
}
return 'There are no resources for this step at this time';
};
return (
<Modal
centered
closable={false}
footer={null}
onCancel={handleClose}
open={!!stepOutputInfo?.stepName}
width={800}
>
<div className="flex flex-col">
{stepOutputInfo?.path && (
<div className="flex items-center justify-between mb-4">
<span className="text-lg font-medium text-gray-900">{`path: ${stepOutputInfo.path}`}</span>
</div>
)}
<div className="bg-[#f5f5f5] flex flex-col max-h-[600px] w-full overflow-scroll border border-[#e0e0e0] rounded p-4 font-mono text-sm leading-6 text-[#333] shadow-sm transition-all duration-300 ease-in-out">
{renderOutputContent()}
</div>
</div>
</Modal>
);
};
export default TrainExposureModel;
|