105 lines
4.3 KiB
JavaScript
105 lines
4.3 KiB
JavaScript
import TreeTable from "../UI/TreeTable";
|
||
import FlowChart from "../TreeChart/FlowChart";
|
||
import { getStatusColor } from "../TreeChart/dataUtils";
|
||
import SystemChart from "../../Charts/SystemChart";
|
||
|
||
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));
|
||
}
|
||
};
|
||
|
||
if (data) countRecursive(data);
|
||
return counts;
|
||
};
|
||
|
||
if (activeTab === "Главная") {
|
||
const statusCounts = countStatuses(treeData1);
|
||
|
||
// Конфигурация для метрики серверов (с несколькими линиями)
|
||
const serverMetric = {
|
||
name: "zvks_server_li",
|
||
title: "Надежность системы",
|
||
description: "Уровень надежности системы",
|
||
multipleLines: true,
|
||
lineKey: "device",
|
||
ranges: [
|
||
{ value: 15, color: 'green', label: 'Оптимально' },
|
||
{ value: 10, color: 'orange', label: 'Предупреждение' },
|
||
{ value: 5, color: 'red', label: 'Критично' }
|
||
]
|
||
};
|
||
|
||
// Конфигурация для метрики приложений (одна линия)
|
||
const appMetric = {
|
||
name: "zvks_application_li",
|
||
title: "Функциональность системы",
|
||
description: "Уровень функциональности системы",
|
||
multipleLines: false
|
||
};
|
||
|
||
return (
|
||
<div>
|
||
<h2 style={{ textAlign: 'center' }}>Общий мониторинг состояния системы</h2>
|
||
<div>
|
||
<div style={{ display: 'inline-block', width: '48%', marginRight: '2%' }}>
|
||
<label>Надежность серверов</label>
|
||
<SystemChart
|
||
metricInfo={serverMetric}
|
||
chartHeight={580}
|
||
/>
|
||
</div>
|
||
<div style={{ display: 'inline-block', width: '48%' }}>
|
||
<label>Функциональность приложений</label>
|
||
<SystemChart
|
||
metricInfo={appMetric}
|
||
chartHeight={580}
|
||
/>
|
||
</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} />
|
||
</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; |