105 lines
2.9 KiB
JavaScript
Executable File
105 lines
2.9 KiB
JavaScript
Executable File
import React, { lazy, Suspense } from "react";
|
||
import Skeleton from '@mui/material/Skeleton';
|
||
import Box from '@mui/material/Box';
|
||
|
||
const PrometheusChart = lazy(() => import('../../Charts2/PrometheusChart'));
|
||
import LazyChartBatchRenderer from "../hooks/LazyChartBatchRender";
|
||
|
||
// Функция для генерации названия метрики на основе id
|
||
const getMetricName = (id) => {
|
||
return `zvks_apiforsnmp_measure_${id}`;
|
||
};
|
||
|
||
const getAllChildIds = (node) => {
|
||
let ids = [];
|
||
if (node.id) {
|
||
ids.push(node.id);
|
||
}
|
||
if (node.items && node.items.length > 0) {
|
||
node.items.forEach((child) => {
|
||
ids = ids.concat(getAllChildIds(child));
|
||
});
|
||
}
|
||
return ids;
|
||
};
|
||
|
||
// Компонент Skeleton для графика
|
||
const ChartSkeleton = () => (
|
||
<Box sx={{ width: '100%' }}>
|
||
<Skeleton variant="text" width="60%" height={30} />
|
||
<Skeleton variant="rectangular" width="100%" height={300} sx={{ mt: 2 }} />
|
||
</Box>
|
||
);
|
||
|
||
// Компонент Skeleton для родительского контейнера
|
||
const ContainerSkeleton = () => (
|
||
<Box sx={{ width: '100%' }}>
|
||
<Skeleton variant="text" width="40%" height={40} /> {/* Заголовок */}
|
||
<Skeleton variant="text" width="80%" height={20} sx={{ mt: 1 }} />
|
||
<Box sx={{ mt: 2 }}>
|
||
{[...Array(3)].map((_, i) => (
|
||
<ChartSkeleton key={i} />
|
||
))}
|
||
</Box>
|
||
</Box>
|
||
);
|
||
|
||
const tabContent = (data) => {
|
||
const tabContent = {};
|
||
|
||
// Функция для рекурсивного обхода и сбора данных
|
||
const generateContent = (nodes) => {
|
||
nodes.forEach((node) => {
|
||
if (node.items && node.items.length > 0) {
|
||
const childrenContent = generateContent(node.items);
|
||
|
||
const content = (
|
||
<div>
|
||
<h2>{node.title}</h2>
|
||
<Suspense fallback={<ContainerSkeleton />}>
|
||
<LazyChartBatchRenderer charts={node.items.map((child) => tabContent[child.id].content)} />
|
||
</Suspense>
|
||
<p>Контент для {node.title}.</p>
|
||
</div>
|
||
);
|
||
|
||
tabContent[node.id] = {
|
||
title: node.title,
|
||
content: content,
|
||
};
|
||
} else {
|
||
const metricName = getMetricName(node.id);
|
||
const content = (
|
||
<div key={node.id}>
|
||
<h3>{node.title}</h3>
|
||
<Suspense fallback={<ChartSkeleton />}>
|
||
<PrometheusChart metricName={metricName} />
|
||
</Suspense>
|
||
</div>
|
||
);
|
||
tabContent[node.id] = {
|
||
title: node.title,
|
||
content: content,
|
||
};
|
||
}
|
||
});
|
||
|
||
return (
|
||
<div>
|
||
{nodes.map((node) => (
|
||
<div key={node.id}>{tabContent[node.id].content}</div>
|
||
))}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
if (data.items && data.items.length > 0) {
|
||
generateContent(data.items);
|
||
} else {
|
||
console.warn("Данные отсутствуют или массив items пуст");
|
||
}
|
||
|
||
return tabContent;
|
||
};
|
||
|
||
export default tabContent; |