Привел граф в рвбочее состояние, улучшил интерфейс
parent
f525d216e3
commit
306ac00efe
13
index.html
13
index.html
|
|
@ -1,13 +1,16 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/system_monitor_icon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Модуль доверия</title>
|
||||
</head>
|
||||
<body>
|
||||
<title>Модуль устойчивого функционирования</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -109,7 +109,7 @@ const Dashboard = () => {
|
|||
return (
|
||||
<div>
|
||||
<h2>Общий мониторинг состояния системы</h2>
|
||||
<label>Процент доверия системы</label>
|
||||
<label>Надежность системы</label>
|
||||
<SystemStatusChart data={statusHistories.history1} />
|
||||
<label>Функциональность системы</label>
|
||||
<SystemStatusChart data={statusHistories.history2} />
|
||||
|
|
|
|||
|
|
@ -7,25 +7,23 @@ const MenuItem = ({ item, onSelectItem, sidebarWidth }) => {
|
|||
const hasChildren = Array.isArray(item.items) && item.items.length > 0;
|
||||
const statusColor = getStatusColor(item.status);
|
||||
|
||||
// Обработчик одинарного клика (разворачивание/сворачивание или открытие элемента)
|
||||
const handleSingleClick = () => {
|
||||
if (hasChildren) {
|
||||
setIsOpen(!isOpen); // Разворачиваем/сворачиваем дочерние элементы
|
||||
setIsOpen(!isOpen);
|
||||
} else {
|
||||
onSelectItem(item); // Если нет потомков, открываем элемент как вкладку
|
||||
onSelectItem(item);
|
||||
}
|
||||
};
|
||||
|
||||
// Обработчик клика для открытия родителя
|
||||
const handleOpenParent = (e) => {
|
||||
e.stopPropagation(); // Останавливаем всплытие события, чтобы не сработал handleSingleClick
|
||||
onSelectItem(item); // Открываем родителя
|
||||
e.stopPropagation();
|
||||
onSelectItem(item);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="menu-item" style={{ width: sidebarWidth - 20 }}> {/* Динамическая ширина */}
|
||||
<div className={`menu-item ${hasChildren ? "has-children" : ""}`} style={{ width: sidebarWidth - 20 }}>
|
||||
<div
|
||||
onClick={handleSingleClick} // Одинарный клик для разворачивания/сворачивания или открытия
|
||||
onClick={handleSingleClick}
|
||||
className="menu-item-header"
|
||||
>
|
||||
{/* Круглый индикатор статуса */}
|
||||
|
|
@ -33,10 +31,13 @@ const MenuItem = ({ item, onSelectItem, sidebarWidth }) => {
|
|||
className={`status-indicator ${statusColor === "red" ? "blinking" : ""}`}
|
||||
style={{ backgroundColor: statusColor }}
|
||||
/>
|
||||
{/* Текст элемента меню */}
|
||||
<span>{item.title}</span>
|
||||
|
||||
{/* Иконка для открытия родителя */}
|
||||
{/* Иконки */}
|
||||
{hasChildren && (
|
||||
<div style={{ display: "flex", alignItems: "center" }}>
|
||||
{/* Иконка для открытия родителя */}
|
||||
<span
|
||||
onClick={handleOpenParent}
|
||||
className="open-parent-icon"
|
||||
|
|
@ -44,10 +45,12 @@ const MenuItem = ({ item, onSelectItem, sidebarWidth }) => {
|
|||
>
|
||||
📂
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Иконка для разворачивания/сворачивания */}
|
||||
{hasChildren && <span>{isOpen ? "▲" : "▼"}</span>}
|
||||
<span className="toggle-icon">
|
||||
{isOpen ? "▲" : "▼"}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{isOpen && hasChildren && (
|
||||
<div className="submenu">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import { getStatusColor } from "./dataUtils";
|
|||
|
||||
const TreeChart = ({ data, onNodeClick }) => {
|
||||
const chartRef = useRef();
|
||||
const simulationRef = useRef(null);
|
||||
const nodePositions = useRef(new Map());
|
||||
|
||||
const { root, nodes, links } = useMemo(() => {
|
||||
|
|
@ -23,22 +22,63 @@ const TreeChart = ({ data, onNodeClick }) => {
|
|||
target: d,
|
||||
}));
|
||||
|
||||
// Применяем сохраненные позиции к узлам
|
||||
// Размещаем узлы иерархически
|
||||
const center = { x: 0, y: 0 }; // Центральная точка
|
||||
const baseRadius = 150; // Базовый радиус для 1-го уровня
|
||||
const branchOffset = 80; // Смещение узлов вдоль ветки
|
||||
const angleOffset = Math.PI / 4; // Угол смещения для дочерних ветвей
|
||||
const spreadFactor = 1.5; // Коэффициент растяжения для последних узлов
|
||||
|
||||
nodes.forEach((node) => {
|
||||
const prev = nodePositions.current.get(node.data.id);
|
||||
if (prev) {
|
||||
node.x = prev.x;
|
||||
node.y = prev.y;
|
||||
node.fx = prev.fx ?? null;
|
||||
node.fy = prev.fy ?? null;
|
||||
} else {
|
||||
if (node.depth === 0) {
|
||||
// Центральный узел
|
||||
node.x = center.x;
|
||||
node.y = center.y;
|
||||
} else if (node.depth === 1) {
|
||||
// Первый уровень - равномерно по окружности
|
||||
const parent = node.parent;
|
||||
node.x = parent ? parent.x + Math.random() * 50 - 25 : Math.random() * 1000;
|
||||
node.y = parent ? parent.y + Math.random() * 50 - 25 : Math.random() * 1000;
|
||||
const index = parent.children.indexOf(node);
|
||||
const totalSiblings = parent.children.length;
|
||||
|
||||
const radius = baseRadius * node.depth;
|
||||
const sectorAngle = (Math.PI * 2) / totalSiblings;
|
||||
const angle = index * sectorAngle;
|
||||
|
||||
node.x = parent.x + radius * Math.cos(angle);
|
||||
node.y = parent.y + radius * Math.sin(angle);
|
||||
node.angle = angle; // Запоминаем угол для веток
|
||||
} else {
|
||||
// Второй уровень и дальше - ветка растет в направлении родителя
|
||||
const parent = node.parent;
|
||||
const siblings = parent.children || [];
|
||||
const index = siblings.indexOf(node);
|
||||
const totalSiblings = siblings.length;
|
||||
|
||||
const direction = parent.angle || 0;
|
||||
const offsetAngle = ((index - (totalSiblings - 1) / 2) * angleOffset) / totalSiblings;
|
||||
|
||||
let distance = branchOffset;
|
||||
if (!node.children || node.children.length === 0) {
|
||||
// Если это последний узел, увеличиваем расстояние
|
||||
distance *= spreadFactor + node.depth * 0.2; // Чем глубже, тем больше разброс
|
||||
}
|
||||
nodePositions.current.set(node.data.id, { x: node.x, y: node.y, fx: node.fx, fy: node.fy });
|
||||
|
||||
node.x = parent.x + distance * Math.cos(direction + offsetAngle);
|
||||
node.y = parent.y + distance * Math.sin(direction + offsetAngle);
|
||||
node.angle = direction + offsetAngle;
|
||||
}
|
||||
}
|
||||
nodePositions.current.set(node.data.id, { x: node.x, y: node.y });
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
return { root, nodes, links };
|
||||
}, [data]);
|
||||
|
||||
|
|
@ -55,48 +95,26 @@ const TreeChart = ({ data, onNodeClick }) => {
|
|||
svg.append("g").attr("class", "nodes");
|
||||
svg.append("g").attr("class", "labels");
|
||||
|
||||
// Инициализация симуляции
|
||||
simulationRef.current = d3.forceSimulation()
|
||||
.force("link", d3.forceLink().id((d) => d.data.id).distance(80).strength(1))
|
||||
.force("charge", d3.forceManyBody().strength(-200))
|
||||
.force("center", d3.forceCenter(0, 0))
|
||||
.force("collision", d3.forceCollide().radius(20))
|
||||
.force("x", d3.forceX(0).strength(0.05))
|
||||
.force("y", d3.forceY(0).strength(0.05))
|
||||
.force("radial", d3.forceRadial(200, 0, 0).strength(0.02))
|
||||
.alphaDecay(0.02)
|
||||
.alphaTarget(0.1);
|
||||
// Очищаем предыдущие элементы
|
||||
svg.selectAll(".links line").remove();
|
||||
svg.selectAll(".nodes circle").remove();
|
||||
svg.selectAll(".labels text").remove();
|
||||
|
||||
// Запускаем симуляцию на 15 секунд, затем отключаем
|
||||
setTimeout(() => {
|
||||
if (simulationRef.current) {
|
||||
simulationRef.current.stop(); // Останавливаем симуляцию
|
||||
nodes.forEach((node) => {
|
||||
node.fx = node.x; // Фиксируем текущие позиции узлов
|
||||
node.fy = node.y;
|
||||
});
|
||||
}
|
||||
}, 15000); // 15 секунд
|
||||
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!root || !chartRef.current || !simulationRef.current) return; // Проверяем, что симуляция инициализирована
|
||||
|
||||
const svg = d3.select(chartRef.current);
|
||||
// Рисуем связи
|
||||
const linkGroup = svg.select(".links");
|
||||
const nodeGroup = svg.select(".nodes");
|
||||
const labelGroup = svg.select(".labels");
|
||||
|
||||
// Обновляем связи
|
||||
const link = linkGroup
|
||||
.selectAll("line")
|
||||
.data(links, (d) => `${d.source.data.id}-${d.target.data.id}`)
|
||||
.join("line")
|
||||
.attr("stroke", "#999")
|
||||
.attr("stroke-opacity", 0.6);
|
||||
.attr("stroke-opacity", 0.6)
|
||||
.attr("x1", (d) => d.source.x)
|
||||
.attr("y1", (d) => d.source.y)
|
||||
.attr("x2", (d) => d.target.x)
|
||||
.attr("y2", (d) => d.target.y);
|
||||
|
||||
// Обновляем узлы
|
||||
// Рисуем узлы
|
||||
const nodeGroup = svg.select(".nodes");
|
||||
const node = nodeGroup
|
||||
.selectAll("circle")
|
||||
.data(nodes, (d) => d.data.id)
|
||||
|
|
@ -104,6 +122,8 @@ const TreeChart = ({ data, onNodeClick }) => {
|
|||
.attr("fill", (d) => getStatusColor(d.data.status))
|
||||
.attr("stroke", "#fff")
|
||||
.attr("r", 7)
|
||||
.attr("cx", (d) => d.x)
|
||||
.attr("cy", (d) => d.y)
|
||||
.call(drag());
|
||||
|
||||
node.on("click", (event, d) => {
|
||||
|
|
@ -112,7 +132,8 @@ const TreeChart = ({ data, onNodeClick }) => {
|
|||
}
|
||||
});
|
||||
|
||||
// Обновляем текстовые метки
|
||||
// Рисуем текстовые метки
|
||||
const labelGroup = svg.select(".labels");
|
||||
const text = labelGroup
|
||||
.selectAll("text")
|
||||
.data(nodes, (d) => d.data.id)
|
||||
|
|
@ -121,46 +142,42 @@ const TreeChart = ({ data, onNodeClick }) => {
|
|||
.attr("dx", 12)
|
||||
.attr("dy", 4)
|
||||
.style("user-select", "none") // Запрет выделения текста
|
||||
.style("pointer-events", "none"); // Запрет взаимодействия с текстом
|
||||
|
||||
// Обновляем симуляцию
|
||||
simulationRef.current.nodes(nodes);
|
||||
simulationRef.current.force("link").links(links);
|
||||
simulationRef.current.alphaTarget(0.1).restart();
|
||||
|
||||
simulationRef.current.on("tick", () => {
|
||||
link
|
||||
.attr("x1", (d) => d.source.x)
|
||||
.attr("y1", (d) => d.source.y)
|
||||
.attr("x2", (d) => d.target.x)
|
||||
.attr("y2", (d) => d.target.y);
|
||||
|
||||
node
|
||||
.attr("cx", (d) => d.x)
|
||||
.attr("cy", (d) => d.y);
|
||||
|
||||
text
|
||||
.style("pointer-events", "none") // Запрет взаимодействия с текстом
|
||||
.style("fill", "var(--TreeChart-text-color)") // Используем переменную для цвета текста
|
||||
.attr("x", (d) => d.x + 12)
|
||||
.attr("y", (d) => d.y + 4);
|
||||
});
|
||||
|
||||
}, [root, links, nodes, onNodeClick]);
|
||||
|
||||
const drag = () => {
|
||||
function dragstarted(event, d) {
|
||||
if (!event.active && simulationRef.current) simulationRef.current.alphaTarget(0.3).restart();
|
||||
d.fx = d.x;
|
||||
d.fy = d.y;
|
||||
d3.select(this).raise().attr("stroke", "#000");
|
||||
}
|
||||
|
||||
function dragged(event, d) {
|
||||
d.fx = event.x;
|
||||
d.fy = event.y;
|
||||
d.x = event.x;
|
||||
d.y = event.y;
|
||||
d3.select(this).attr("cx", d.x).attr("cy", d.y);
|
||||
|
||||
// Обновляем текстовую метку
|
||||
d3.select(this.parentNode)
|
||||
.select("text")
|
||||
.attr("x", d.x + 12)
|
||||
.attr("y", d.y + 4);
|
||||
|
||||
// Обновляем связи
|
||||
d3.select(chartRef.current)
|
||||
.selectAll(".links line")
|
||||
.filter((link) => link.source === d || link.target === d)
|
||||
.attr("x1", (link) => link.source.x)
|
||||
.attr("y1", (link) => link.source.y)
|
||||
.attr("x2", (link) => link.target.x)
|
||||
.attr("y2", (link) => link.target.y);
|
||||
}
|
||||
|
||||
function dragended(event, d) {
|
||||
if (!event.active && simulationRef.current) simulationRef.current.alphaTarget(0);
|
||||
nodePositions.current.set(d.data.id, { x: d.x, y: d.y, fx: d.fx, fy: d.fy });
|
||||
d3.select(this).attr("stroke", "#fff");
|
||||
nodePositions.current.set(d.data.id, { x: d.x, y: d.y });
|
||||
}
|
||||
|
||||
return d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended);
|
||||
|
|
|
|||
|
|
@ -36,14 +36,6 @@
|
|||
"id": "4",
|
||||
"title": "OS Linux (module$4) АО",
|
||||
"items": [
|
||||
{
|
||||
"id": "188",
|
||||
"title": "Наименование"
|
||||
},
|
||||
{
|
||||
"id": "189",
|
||||
"title": "Время работы"
|
||||
},
|
||||
{
|
||||
"id": "190",
|
||||
"title": "Загрузка процессора за 1 минуту"
|
||||
|
|
@ -153,21 +145,13 @@
|
|||
]
|
||||
},
|
||||
{
|
||||
"id": "261",
|
||||
"id": "280",
|
||||
"title": "Сетевой адаптер №1 (port$261) Eth_1",
|
||||
"items": [
|
||||
{
|
||||
"id": "206",
|
||||
"title": "Наименование порта Eth_1"
|
||||
},
|
||||
{
|
||||
"id": "207",
|
||||
"title": "Скорость порта Eth_1"
|
||||
},
|
||||
{
|
||||
"id": "208",
|
||||
"title": "Физический адрес порта Eth_1"
|
||||
},
|
||||
{
|
||||
"id": "209",
|
||||
"title": "Административное состояние порта Eth_1"
|
||||
|
|
@ -227,21 +211,13 @@
|
|||
]
|
||||
},
|
||||
{
|
||||
"id": "262",
|
||||
"id": "281",
|
||||
"title": "Сетевой адаптер №2 (port$262) Eth_2",
|
||||
"items": [
|
||||
{
|
||||
"id": "223",
|
||||
"title": "Наименование порта Eth_2"
|
||||
},
|
||||
{
|
||||
"id": "224",
|
||||
"title": "Скорость порта Eth_2"
|
||||
},
|
||||
{
|
||||
"id": "225",
|
||||
"title": "Физический адрес порта Eth_2"
|
||||
},
|
||||
{
|
||||
"id": "226",
|
||||
"title": "Административное состояние порта Eth_2"
|
||||
|
|
@ -301,21 +277,13 @@
|
|||
]
|
||||
},
|
||||
{
|
||||
"id": "263",
|
||||
"id": "282",
|
||||
"title": "Сетевой адаптер №3 (port$263) Eth_3",
|
||||
"items": [
|
||||
{
|
||||
"id": "240",
|
||||
"title": "Наименование порта Eth_3"
|
||||
},
|
||||
{
|
||||
"id": "241",
|
||||
"title": "Скорость порта Eth_3"
|
||||
},
|
||||
{
|
||||
"id": "242",
|
||||
"title": "Физический адрес порта Eth_3"
|
||||
},
|
||||
{
|
||||
"id": "243",
|
||||
"title": "Административное состояние порта Eth_3"
|
||||
|
|
@ -375,21 +343,13 @@
|
|||
]
|
||||
},
|
||||
{
|
||||
"id": "264",
|
||||
"id": "283",
|
||||
"title": "Сетевой адаптер №4 (port$264) Eth_4",
|
||||
"items": [
|
||||
{
|
||||
"id": "257",
|
||||
"title": "Наименование порта Eth_4"
|
||||
},
|
||||
{
|
||||
"id": "258",
|
||||
"title": "Скорость порта Eth_4"
|
||||
},
|
||||
{
|
||||
"id": "259",
|
||||
"title": "Физический адрес порта Eth_4"
|
||||
},
|
||||
{
|
||||
"id": "260",
|
||||
"title": "Административное состояние порта Eth_4"
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
height: 100vh;
|
||||
background-color: var(--sidebar-color);
|
||||
color: var(--sidebar-text-color);
|
||||
/* Используем переменную для цвета текста */
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
|
@ -20,6 +19,8 @@
|
|||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 20px;
|
||||
padding-right: 10px;
|
||||
/* Отступ справа для скроллбара */
|
||||
}
|
||||
|
||||
/* Заголовок меню */
|
||||
|
|
@ -28,7 +29,6 @@
|
|||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: var(--sidebar-text-color);
|
||||
/* Используем переменную для цвета текста */
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -36,7 +36,6 @@
|
|||
.menu-item {
|
||||
margin-bottom: 10px;
|
||||
color: var(--sidebar-text-color);
|
||||
/* Используем переменную для цвета текста */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -57,13 +56,42 @@
|
|||
background-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* Стили для заголовка элемента меню */
|
||||
.menu-item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
/* Распределяем пространство между элементами */
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
width: 100%;
|
||||
/* Занимаем всю доступную ширину */
|
||||
box-sizing: border-box;
|
||||
/* Учитываем padding в ширине */
|
||||
}
|
||||
|
||||
/* Стили для текста элемента меню */
|
||||
.menu-item-header span {
|
||||
flex: 1;
|
||||
/* Текст занимает все доступное пространство */
|
||||
margin-right: 14px;
|
||||
/* Отступ справа для текста */
|
||||
overflow: hidden;
|
||||
/* Скрываем текст, который не помещается */
|
||||
text-overflow: ellipsis;
|
||||
/* Добавляем многоточие, если текст не помещается */
|
||||
}
|
||||
|
||||
/* Стили для иконок */
|
||||
.menu-item-header .open-parent-icon,
|
||||
.menu-item-header .toggle-icon {
|
||||
flex-shrink: 0;
|
||||
/* Запрещаем сжатие иконок */
|
||||
margin-left: 1px;
|
||||
/* Отступ между иконками */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-item-header:hover {
|
||||
|
|
@ -82,9 +110,18 @@
|
|||
/* Подменю */
|
||||
.submenu {
|
||||
margin-left: 20px;
|
||||
/* Отступ слева для вложенных элементов */
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Стили для элементов нижнего уровня вложенности */
|
||||
|
||||
/* Дополнительные отступы для элементов без иконок */
|
||||
.menu-item:not(.has-children) .menu-item-header {
|
||||
padding-right: 25px;
|
||||
/* Добавляем отступ справа для элементов без иконок */
|
||||
}
|
||||
|
||||
/* Футер сайдбара */
|
||||
.sidebar-footer {
|
||||
padding: 10px;
|
||||
|
|
@ -98,7 +135,6 @@
|
|||
.help,
|
||||
.settings {
|
||||
color: var(--sidebar-text-color);
|
||||
/* Используем переменную для цвета текста */
|
||||
margin: 5px 0;
|
||||
overflow-x: hidden;
|
||||
text-align: left;
|
||||
|
|
|
|||
|
|
@ -15,5 +15,7 @@
|
|||
--table-cell-background: #333333;
|
||||
--table-text-color: #E0E0E0;
|
||||
/* Светлый текст в таблице */
|
||||
--TreeChart-text-color: #ffffff;
|
||||
--scrollbar-track-color: #333;
|
||||
}
|
||||
}
|
||||
|
|
@ -75,24 +75,32 @@ button:focus-visible {
|
|||
|
||||
/* Глобальный стиль для WebKit-браузеров (Chrome, Edge, Safari) */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px; /* Толщина вертикального скролла */
|
||||
height: 10px; /* Толщина горизонтального скролла */
|
||||
width: 10px;
|
||||
/* Толщина вертикального скролла */
|
||||
height: 10px;
|
||||
/* Толщина горизонтального скролла */
|
||||
}
|
||||
|
||||
/* Фон скроллбара */
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1; /* Цвет фона */
|
||||
border-radius: 10px; /* Скругление углов */
|
||||
background: var(--scrollbar-track-color, #f1f1f1);
|
||||
/* Цвет фона */
|
||||
border-radius: 10px;
|
||||
/* Скругление углов */
|
||||
}
|
||||
|
||||
/* Ползунок */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #3d74c7; /* Основной цвет */
|
||||
border-radius: 10px; /* Скругляем края */
|
||||
border: 1px solid #1c36c9; /* Белая обводка */
|
||||
background: #3d74c7;
|
||||
/* Основной цвет */
|
||||
border-radius: 10px;
|
||||
/* Скругляем края */
|
||||
border: 1px solid #1c36c9;
|
||||
/* Белая обводка */
|
||||
}
|
||||
|
||||
/* Эффект при наведении */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #2b5aa5; /* Чуть темнее при наведении */
|
||||
background: #2b5aa5;
|
||||
/* Чуть темнее при наведении */
|
||||
}
|
||||
Loading…
Reference in New Issue