|
|
import React, { useState, useRef, useEffect } from 'react';
|
|
|
import { ResizeBox, Tabs } from '@arco-design/web-react';
|
|
|
import styles from './style/logBar.module.less';
|
|
|
import { updateLogBarStatus } from '@/store/ideContainer';
|
|
|
import { useSelector, useDispatch } from 'react-redux';
|
|
|
import { getNodeData } from '@/api/appIns';
|
|
|
import RunTimeData from './components/runTimeData';
|
|
|
import { getCurrentAppKey } from '@/utils/flow/runtime';
|
|
|
|
|
|
const TabPane = Tabs.TabPane;
|
|
|
|
|
|
interface LogMessage {
|
|
|
id: number;
|
|
|
type: string;
|
|
|
message: string;
|
|
|
timestamp: string;
|
|
|
}
|
|
|
|
|
|
// 添加运行数据接口
|
|
|
interface RuntimeData {
|
|
|
[appId: string]: any;
|
|
|
}
|
|
|
|
|
|
interface LogBarProps {
|
|
|
a?: string;
|
|
|
}
|
|
|
|
|
|
const data = [
|
|
|
{
|
|
|
key: '1',
|
|
|
title: '运行日志',
|
|
|
content: '运行时日志...',
|
|
|
},
|
|
|
{
|
|
|
key: '2',
|
|
|
title: '校验日志',
|
|
|
content: '校验日志...',
|
|
|
},
|
|
|
{
|
|
|
key: '3',
|
|
|
title: '运行数据',
|
|
|
content: '运行数据日志...',
|
|
|
},
|
|
|
// {
|
|
|
// key: '4',
|
|
|
// title: '组件日志',
|
|
|
// content: '组件日志...'
|
|
|
// }
|
|
|
];
|
|
|
|
|
|
const LogBar: React.FC<LogBarProps> = () => {
|
|
|
const [tabs] = useState(data);
|
|
|
const [activeTab, setActiveTab] = useState('1');
|
|
|
const resizeBoxRef = useRef<HTMLDivElement>(null); // 引用 ResizeBox 容器
|
|
|
const [validationLogs, setValidationLogs] = useState<LogMessage[]>([]);
|
|
|
const [runtimeLogs, setruntimeLogs] = useState<LogMessage[]>([]); // 添加运行时日志状态
|
|
|
const [logContainerHeight, setLogContainerHeight] = useState('250px'); // 添加日志容器高度状态
|
|
|
const [runtimeData, setRuntimeData] = useState<RuntimeData>({}); // 添加运行数据状态
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
const { logBarStatus, appRuntimeData, currentAppData } = useSelector(
|
|
|
(state: any) => state.ideContainer
|
|
|
);
|
|
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
|
|
// 处理 Tab 点击事件
|
|
|
const handleTabClick = (key: string) => {
|
|
|
// 如果点击当前激活的 tab，则切换收起状态
|
|
|
if (key === activeTab) {
|
|
|
dispatch(updateLogBarStatus(!logBarStatus));
|
|
|
} else {
|
|
|
// 如果点击的是其他 tab，则切换到该 tab 并展开
|
|
|
setActiveTab(key);
|
|
|
dispatch(updateLogBarStatus(true));
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 当 collapsed 状态改变时，直接更新元素的样式
|
|
|
useEffect(() => {
|
|
|
if (resizeBoxRef.current) {
|
|
|
resizeBoxRef.current.style.height = logBarStatus
|
|
|
? logContainerHeight
|
|
|
: '0px';
|
|
|
}
|
|
|
}, [logBarStatus, logContainerHeight]);
|
|
|
|
|
|
// 处理 ResizeBox 手动调整大小事件
|
|
|
const handleResize = (
|
|
|
e: MouseEvent,
|
|
|
size: {
|
|
|
width: number;
|
|
|
height: number;
|
|
|
}
|
|
|
) => {
|
|
|
// 当高度接近收起状态的高度时，同步更新 logBarStatus 状态
|
|
|
if (size.height <= 40) {
|
|
|
dispatch(updateLogBarStatus(false));
|
|
|
} else {
|
|
|
dispatch(updateLogBarStatus(true));
|
|
|
// 更新日志容器高度状态
|
|
|
setLogContainerHeight(`${size.height}px`);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 监听日志消息事件
|
|
|
useEffect(() => {
|
|
|
const handleLogMessage = (event: CustomEvent) => {
|
|
|
const { type, message, timestamp, appId } = event.detail;
|
|
|
|
|
|
// 如果是校验类型的消息且当前校验日志tab可见，则添加到校验日志中
|
|
|
if (type === 'validation') {
|
|
|
const newLog: LogMessage = {
|
|
|
id: Date.now(),
|
|
|
type,
|
|
|
message,
|
|
|
timestamp,
|
|
|
};
|
|
|
|
|
|
setValidationLogs((prev) => [...prev, newLog]);
|
|
|
|
|
|
// 自动切换到校验日志tab并展开logBar
|
|
|
// setActiveTab('2');
|
|
|
dispatch(updateLogBarStatus(true));
|
|
|
}
|
|
|
// 如果是运行时日志
|
|
|
else if (type === 'runtime') {
|
|
|
const newLog: LogMessage = {
|
|
|
id: Date.now(),
|
|
|
type,
|
|
|
message,
|
|
|
timestamp,
|
|
|
};
|
|
|
|
|
|
setruntimeLogs((prev) => [...prev, newLog]);
|
|
|
|
|
|
// 自动切换到运行日志tab并展开logBar
|
|
|
dispatch(updateLogBarStatus(true));
|
|
|
|
|
|
// 同时将日志添加到对应应用的运行日志中
|
|
|
// 如果提供了 appId，优先使用提供的 appId；否则使用当前激活的应用
|
|
|
const targetAppKey = appId || getCurrentAppKey(currentAppData);
|
|
|
if (targetAppKey) {
|
|
|
dispatch({
|
|
|
type: 'ideContainer/addRuntimeLog',
|
|
|
payload: {
|
|
|
log: newLog,
|
|
|
appId: targetAppKey,
|
|
|
},
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 添加事件监听器
|
|
|
document.addEventListener('logMessage', handleLogMessage as EventListener);
|
|
|
|
|
|
// 清理事件监听器
|
|
|
return () => {
|
|
|
document.removeEventListener(
|
|
|
'logMessage',
|
|
|
handleLogMessage as EventListener
|
|
|
);
|
|
|
};
|
|
|
}, [dispatch, currentAppData]);
|
|
|
|
|
|
// 获取当前应用的运行状态
|
|
|
const currentAppKey = getCurrentAppKey(currentAppData);
|
|
|
const isRunning = currentAppKey && appRuntimeData[currentAppKey]?.isRunning;
|
|
|
|
|
|
// 实现轮询获取运行数据 - 只在应用运行时轮询
|
|
|
useEffect(() => {
|
|
|
let intervalId: NodeJS.Timeout | null = null;
|
|
|
const appKey = getCurrentAppKey(currentAppData);
|
|
|
|
|
|
// 只有在应用正在运行且有 runId 时才开始轮询
|
|
|
if (
|
|
|
appKey &&
|
|
|
appRuntimeData[appKey]?.isRunning &&
|
|
|
appRuntimeData[appKey]?.runId
|
|
|
) {
|
|
|
const fetchRuntimeData = async () => {
|
|
|
try {
|
|
|
setLoading(true);
|
|
|
const response = await getNodeData(appRuntimeData[appKey].runId);
|
|
|
setRuntimeData((prev) => ({
|
|
|
...prev,
|
|
|
[appKey]: response.data,
|
|
|
}));
|
|
|
} catch (error) {
|
|
|
console.error('获取运行数据失败:', error);
|
|
|
} finally {
|
|
|
setLoading(false);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 立即获取一次数据
|
|
|
fetchRuntimeData();
|
|
|
|
|
|
// 设置轮询，每3秒获取一次数据
|
|
|
intervalId = setInterval(fetchRuntimeData, 3000);
|
|
|
}
|
|
|
|
|
|
// 清理函数，组件卸载或应用停止运行时清除定时器
|
|
|
return () => {
|
|
|
if (intervalId) {
|
|
|
clearInterval(intervalId);
|
|
|
}
|
|
|
};
|
|
|
}, [currentAppData, appRuntimeData]);
|
|
|
|
|
|
// 当应用停止运行时，清除运行数据
|
|
|
useEffect(() => {
|
|
|
const appKey = getCurrentAppKey(currentAppData);
|
|
|
if (appKey && !appRuntimeData[appKey]?.isRunning) {
|
|
|
// 清除当前应用的运行数据
|
|
|
setRuntimeData((prev) => {
|
|
|
const newData = { ...prev };
|
|
|
delete newData[appKey];
|
|
|
return newData;
|
|
|
});
|
|
|
}
|
|
|
}, [isRunning, currentAppData]);
|
|
|
|
|
|
// 渲染校验日志内容
|
|
|
const renderValidationLogs = () => {
|
|
|
return (
|
|
|
<div
|
|
|
style={{
|
|
|
padding: '10px',
|
|
|
height: 'calc(100% - 40px)',
|
|
|
overflowY: 'auto',
|
|
|
}}
|
|
|
>
|
|
|
{validationLogs.length === 0 ? (
|
|
|
<p>暂无校验日志</p>
|
|
|
) : (
|
|
|
validationLogs.map((log) => (
|
|
|
<div
|
|
|
key={log.id}
|
|
|
style={{
|
|
|
marginBottom: '8px',
|
|
|
padding: '4px',
|
|
|
borderBottom: '1px solid #eee',
|
|
|
}}
|
|
|
>
|
|
|
<div style={{ fontSize: '12px', color: '#999' }}>
|
|
|
{new Date(log.timestamp).toLocaleString()}
|
|
|
</div>
|
|
|
<div style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
|
|
|
{log.message}
|
|
|
</div>
|
|
|
</div>
|
|
|
))
|
|
|
)}
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
// 渲染运行时日志内容
|
|
|
const renderRuntimeLogs = () => {
|
|
|
// 获取当前应用的运行日志
|
|
|
const currentAppKey = getCurrentAppKey(currentAppData);
|
|
|
const currentAppLogs =
|
|
|
currentAppKey && appRuntimeData[currentAppKey]
|
|
|
? appRuntimeData[currentAppKey].logs || []
|
|
|
: [];
|
|
|
|
|
|
return (
|
|
|
<div
|
|
|
style={{
|
|
|
padding: '10px',
|
|
|
height: 'calc(100% - 40px)',
|
|
|
overflowY: 'auto',
|
|
|
}}
|
|
|
>
|
|
|
{currentAppLogs.length === 0 ? (
|
|
|
<p>暂无运行时日志</p>
|
|
|
) : (
|
|
|
currentAppLogs.map((log: LogMessage) => (
|
|
|
<div
|
|
|
key={log.id}
|
|
|
style={{
|
|
|
marginBottom: '8px',
|
|
|
padding: '4px',
|
|
|
borderBottom: '1px solid #eee',
|
|
|
}}
|
|
|
>
|
|
|
<div style={{ fontSize: '12px', color: '#999' }}>
|
|
|
{new Date(log.timestamp).toLocaleString()}
|
|
|
</div>
|
|
|
<div style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
|
|
|
{log.message}
|
|
|
</div>
|
|
|
</div>
|
|
|
))
|
|
|
)}
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
// 渲染运行数据内容
|
|
|
const renderRuntimeData = () => {
|
|
|
const currentAppKey = getCurrentAppKey(currentAppData);
|
|
|
const currentAppDataContent = currentAppKey
|
|
|
? runtimeData[currentAppKey]
|
|
|
: null;
|
|
|
|
|
|
return (
|
|
|
<div
|
|
|
style={{
|
|
|
padding: '10px',
|
|
|
height: 'calc(100% - 40px)',
|
|
|
overflowY: 'auto',
|
|
|
}}
|
|
|
>
|
|
|
{!currentAppDataContent ? (
|
|
|
<p>暂无运行数据</p>
|
|
|
) : (
|
|
|
<RunTimeData logData={currentAppDataContent} />
|
|
|
)}
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
<>
|
|
|
<ResizeBox
|
|
|
ref={resizeBoxRef}
|
|
|
className={styles.logBar}
|
|
|
directions={['top']}
|
|
|
style={{
|
|
|
height: logBarStatus ? logContainerHeight : '0px',
|
|
|
}}
|
|
|
onMoving={handleResize}
|
|
|
>
|
|
|
<Tabs
|
|
|
type="card-gutter"
|
|
|
activeTab={activeTab}
|
|
|
onClickTab={handleTabClick}
|
|
|
justify={true}
|
|
|
>
|
|
|
{tabs.map((x) => (
|
|
|
<TabPane destroyOnHide key={x.key} title={x.title}>
|
|
|
{x.key === '1'
|
|
|
? renderRuntimeLogs()
|
|
|
: x.key === '2'
|
|
|
? renderValidationLogs()
|
|
|
: x.key === '3'
|
|
|
? renderRuntimeData() // 添加运行数据渲染
|
|
|
: x.content}
|
|
|
</TabPane>
|
|
|
))}
|
|
|
</Tabs>
|
|
|
</ResizeBox>
|
|
|
</>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
export default LogBar;
|