90 lines
3.0 KiB
JavaScript
Executable File
90 lines
3.0 KiB
JavaScript
Executable File
import React, { lazy, Suspense } from "react";
|
||
|
||
const PrometheusChart = lazy(() => import('../../Charts/PrometheusChart'));
|
||
import LazyChartBatchRenderer from "../hooks/LazyChartBatchRender";
|
||
|
||
// Функция для генерации названия метрики на основе id
|
||
const getMetricName = (id) => {
|
||
return `zvks_apiforsnmp_measure_${id}`;
|
||
};
|
||
|
||
// Функция для рекурсивного сбора всех id потомков
|
||
const getAllChildIds = (node) => {
|
||
let ids = [];
|
||
if (node.id) {
|
||
ids.push(node.id); // Добавляем id текущего узла
|
||
}
|
||
if (node.items && node.items.length > 0) {
|
||
node.items.forEach((child) => {
|
||
ids = ids.concat(getAllChildIds(child)); // Рекурсивно собираем id потомков
|
||
});
|
||
}
|
||
return ids;
|
||
};
|
||
|
||
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>
|
||
<LazyChartBatchRenderer charts={node.items.map((child) => tabContent[child.id].content)} />
|
||
<p>Контент для {node.title}.</p>
|
||
{childrenContent}
|
||
</div>
|
||
);
|
||
|
||
// Сохраняем контент для текущего id
|
||
tabContent[node.id] = {
|
||
title: node.title,
|
||
content: content,
|
||
};
|
||
} else {
|
||
// Если у узла нет вложенных элементов, это самый нижний уровень
|
||
const metricName = getMetricName(node.id);
|
||
const content = (
|
||
<div key={node.id}>
|
||
<h3>{node.title}</h3> {/* Используем title узла */}
|
||
<Suspense fallback={<div>Загрузка графика...</div>}>
|
||
<PrometheusChart metricName={metricName} />
|
||
</Suspense>
|
||
</div>
|
||
);
|
||
|
||
// Сохраняем контент для текущего id
|
||
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; |