81 lines
3.4 KiB
JavaScript
81 lines
3.4 KiB
JavaScript
import SystemStatusChart from "../../Charts/SystemStatusChart";
|
|
import TreeTable from "../UI/TreeTable";
|
|
import FlowChart from "../TreeChart/FlowChart";
|
|
import { getStatusColor } from "../TreeChart/dataUtils";
|
|
import MetricsAnalyzer from "./MetricsAnalyzer"; // Импортируем новый компонент
|
|
|
|
const TabContent = ({ activeTab, tabs, statusHistories, treeData1, tabContent, handleOpenTab }) => {
|
|
const countStatuses = (data) => {
|
|
const counts = { green: 0, yellow: 0, orange: 0, red: 0 };
|
|
|
|
const countRecursive = (node) => {
|
|
if (node.status) {
|
|
counts[node.status]++;
|
|
}
|
|
if (node.items && node.items.length > 0) {
|
|
node.items.forEach(child => countRecursive(child));
|
|
}
|
|
};
|
|
|
|
countRecursive(data);
|
|
return counts;
|
|
};
|
|
|
|
if (activeTab === "Главная") {
|
|
const statusCounts = treeData1 ? countStatuses(treeData1) : { green: 0, yellow: 0, orange: 0, red: 0 };
|
|
|
|
return (
|
|
<div>
|
|
<h2 style={{ textAlign: 'center' }}>Общий мониторинг состояния системы</h2>
|
|
<div>
|
|
<div style={{ display: 'inline-block', width: '48%', marginRight: '2%' }}>
|
|
<label>Надежность системы</label>
|
|
<SystemStatusChart data={statusHistories.history1} />
|
|
</div>
|
|
<div style={{ display: 'inline-block', width: '48%' }}>
|
|
<label>Функциональность системы</label>
|
|
<SystemStatusChart data={statusHistories.history2} />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Контейнер для индикаторов статусов */}
|
|
<div style={{
|
|
display: 'flex',
|
|
justifyContent: 'flex-end',
|
|
marginTop: '20px',
|
|
gap: '10px'
|
|
}}>
|
|
{Object.entries(statusCounts).map(([status, count]) => (
|
|
<div key={status} style={{
|
|
width: '30px',
|
|
height: '30px',
|
|
backgroundColor: getStatusColor(status),
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
color: 'white',
|
|
fontWeight: 'bold',
|
|
borderRadius: '5px',
|
|
boxShadow: '0 2px 5px rgba(0,0,0,0.2)'
|
|
}}>
|
|
{count}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<label>Статус компонентов системы</label>
|
|
<TreeTable data={treeData1} />
|
|
|
|
{/* Добавляем кнопку анализа
|
|
<MetricsAnalyzer />*/}
|
|
</div>
|
|
);
|
|
} else if (activeTab === "Визуализация") {
|
|
return <FlowChart data={treeData1} onNodeClick={(id, title) => handleOpenTab(id, title)} />;
|
|
} else {
|
|
const tabData = tabs.find(t => t.id === activeTab);
|
|
return tabData ? tabData.content : <p>Нет данных</p>;
|
|
}
|
|
};
|
|
|
|
export default TabContent; |