Добавил окно авторизации и визуализацию меню в виде древа
parent
f8eab83bb4
commit
517d3893be
|
|
@ -1,9 +1,22 @@
|
|||
{
|
||||
"labels": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
|
||||
"datasets": [
|
||||
{
|
||||
"data": [50, 52, 55, 53, 60, 58, 65, 62, 66, 72],
|
||||
"data2": [20,56,74,45,21,20,56,74,45,21]
|
||||
}
|
||||
]
|
||||
}
|
||||
[
|
||||
{
|
||||
"timestamp": "2025-02-18 12:00",
|
||||
"value": 10
|
||||
},
|
||||
{
|
||||
"timestamp": "2025-02-18 12:05",
|
||||
"value": 12
|
||||
},
|
||||
{
|
||||
"timestamp": "2025-02-18 12:10",
|
||||
"value": 15
|
||||
},
|
||||
{
|
||||
"timestamp": "2025-02-18 12:15",
|
||||
"value": 13
|
||||
},
|
||||
{
|
||||
"timestamp": "2025-02-18 12:20",
|
||||
"value": 17
|
||||
}
|
||||
]
|
||||
35
src/App.jsx
35
src/App.jsx
|
|
@ -1,29 +1,26 @@
|
|||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import Dashboard from "./Components/Dashboard";
|
||||
import NetworkSpeedChart from './Charts/TestCharts';
|
||||
import NetworkSpeedChart2 from './Charts/TestCharts2'
|
||||
import NetworkSpeedChart3 from './Charts/TestCharts3'
|
||||
import LoginModal from "./Components/LoginModal"; // Импортируем компонент авторизации
|
||||
import "./Style/LoginModal.css"; // Импортируем стили
|
||||
|
||||
function App() {
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(false); // Состояние авторизации
|
||||
const [showLoginModal, setShowLoginModal] = useState(true); // Показывать ли модальное окно
|
||||
|
||||
const handleLogin = () => {
|
||||
setIsAuthenticated(true); // Устанавливаем авторизацию
|
||||
setShowLoginModal(false); // Скрываем модальное окно
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", height: "100vh", overflow: "hidden" }}>
|
||||
<Dashboard />
|
||||
{!isAuthenticated && showLoginModal && (
|
||||
<LoginModal onLogin={handleLogin} onClose={() => setShowLoginModal(false)} />
|
||||
)}
|
||||
|
||||
{isAuthenticated && <Dashboard />}
|
||||
</div>
|
||||
);
|
||||
/*
|
||||
return (
|
||||
<div style={{ padding: "20px" }}>
|
||||
<h1>Dashboard</h1>
|
||||
<Dashboard />
|
||||
<div style={{ marginBottom: "40px" }}>
|
||||
<h2>Примеры импорта данных</h2>
|
||||
<NetworkSpeedChart />
|
||||
<NetworkSpeedChart2 />
|
||||
<NetworkSpeedChart3 />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
*/
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
@ -12,9 +12,8 @@ import {
|
|||
Legend,
|
||||
TimeScale,
|
||||
} from 'chart.js';
|
||||
import 'chartjs-adapter-date-fns'; // Импортируем адаптер дат
|
||||
import 'chartjs-adapter-date-fns';
|
||||
|
||||
// Регистрируем компоненты Chart.js
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
|
|
@ -23,143 +22,74 @@ ChartJS.register(
|
|||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
TimeScale // Регистрируем временную шкалу
|
||||
TimeScale
|
||||
);
|
||||
|
||||
const MAX_DATA_POINTS = 50;
|
||||
|
||||
const NetworkSpeedChart2 = () => {
|
||||
const [chartData, setChartData] = useState({
|
||||
labels: [],
|
||||
datasets: [],
|
||||
});
|
||||
const [chartData, setChartData] = useState({ labels: [], datasets: [] });
|
||||
|
||||
const chartRef = useRef(null); // Референс на график
|
||||
|
||||
// Функция для загрузки данных
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const response = await axios.get('http://192.168.2.33:3000/metrics?metric=node_time_seconds');
|
||||
const newData = response.data;
|
||||
|
||||
console.log('New data from backend:', newData); // Проверяем новые данные
|
||||
|
||||
// Обновляем состояние, добавляя новые данные к существующим
|
||||
setChartData((prevChartData) => {
|
||||
// Группируем новые данные по устройству (device)
|
||||
const newGroupedData = newData.reduce((acc, entry) => {
|
||||
const device = entry.device;
|
||||
if (!acc[device]) {
|
||||
acc[device] = [];
|
||||
}
|
||||
acc[device].push(entry);
|
||||
if (!acc[entry.device]) acc[entry.device] = [];
|
||||
acc[entry.device].push({ x: new Date(entry.timestamp), y: entry.value });
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
// Создаем новый набор данных
|
||||
const newDatasets = Object.keys(newGroupedData).map((device, index) => {
|
||||
// Находим существующий dataset для этого устройства
|
||||
const existingDataset = prevChartData.datasets.find((dataset) => dataset.label === `Device: ${device}`);
|
||||
const existingDataset = prevChartData.datasets.find((d) => d.label === `Device: ${device}`);
|
||||
const updatedData = existingDataset ? [...existingDataset.data, ...newGroupedData[device]] : newGroupedData[device];
|
||||
|
||||
// Если dataset уже существует, добавляем новые данные к нему
|
||||
if (existingDataset) {
|
||||
return {
|
||||
...existingDataset,
|
||||
data: [
|
||||
...existingDataset.data,
|
||||
...newGroupedData[device].map((entry) => ({
|
||||
x: new Date(entry.timestamp), // Временная метка
|
||||
y: entry.value, // Значение
|
||||
})),
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
// Если dataset не существует, создаем новый
|
||||
return {
|
||||
label: `Device: ${device}`,
|
||||
data: newGroupedData[device].map((entry) => ({
|
||||
x: new Date(entry.timestamp),
|
||||
y: entry.value,
|
||||
})),
|
||||
data: updatedData.slice(-MAX_DATA_POINTS),
|
||||
borderColor: `hsl(${(index * 360) / Object.keys(newGroupedData).length}, 70%, 50%)`,
|
||||
backgroundColor: `hsla(${(index * 360) / Object.keys(newGroupedData).length}, 70%, 50%, 0.2)`,
|
||||
tension: 0.2,
|
||||
};
|
||||
});
|
||||
|
||||
// Обновляем labels (метки времени)
|
||||
const newLabels = [
|
||||
...prevChartData.labels,
|
||||
...newData.map((entry) => new Date(entry.timestamp)),
|
||||
];
|
||||
|
||||
return {
|
||||
labels: newLabels,
|
||||
datasets: newDatasets,
|
||||
};
|
||||
return { labels: newDatasets[0]?.data.map((d) => d.x) || [], datasets: newDatasets };
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Ошибка при загрузке метрик:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Загружаем данные при монтировании компонента и обновляем каждые 5 секунд
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
const interval = setInterval(fetchData, 5000);
|
||||
|
||||
// Очищаем интервал и уничтожаем график при размонтировании компонента
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
if (chartRef.current) {
|
||||
chartRef.current.destroy();
|
||||
}
|
||||
};
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
// Опции графика
|
||||
const options = {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top',
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'node_time_seconds',
|
||||
},
|
||||
legend: { position: 'top' },
|
||||
title: { display: true, text: 'node_time_seconds' },
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
type: 'time', // Используем временную шкалу
|
||||
time: {
|
||||
unit: 'second', // Единица времени
|
||||
displayFormats: {
|
||||
second: 'HH:mm:ss', // Формат отображения времени
|
||||
},
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Time',
|
||||
},
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Данные',
|
||||
},
|
||||
type: 'time',
|
||||
time: { unit: 'second', displayFormats: { second: 'HH:mm:ss' } },
|
||||
title: { display: true, text: 'Time' },
|
||||
},
|
||||
y: { title: { display: true, text: 'Value' } },
|
||||
},
|
||||
animation: {
|
||||
duration: 1000, // Длительность анимации
|
||||
easing: 'linear', // Тип анимации
|
||||
},
|
||||
animation: { duration: 1000, easing: 'linear' },
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ width: '800px', height: '400px' }}>
|
||||
<Line ref={chartRef} data={chartData} options={options} />
|
||||
<Line data={chartData} options={options} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NetworkSpeedChart2;
|
||||
export default NetworkSpeedChart2;
|
||||
|
|
|
|||
|
|
@ -1,165 +1,68 @@
|
|||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import axios from 'axios';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Line } from 'react-chartjs-2';
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
TimeScale,
|
||||
} from 'chart.js';
|
||||
import 'chartjs-adapter-date-fns'; // Импортируем адаптер дат
|
||||
import axios from 'axios';
|
||||
import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale } from 'chart.js';
|
||||
|
||||
// Регистрируем компоненты Chart.js
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
TimeScale // Регистрируем временную шкалу
|
||||
);
|
||||
// Регистрация компонентов Chart.js
|
||||
ChartJS.register(Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale);
|
||||
|
||||
const NetworkSpeedChart3 = () => {
|
||||
const [chartData, setChartData] = useState({
|
||||
labels: [],
|
||||
datasets: [],
|
||||
});
|
||||
const SimpleGraph = () => {
|
||||
const [data, setData] = useState([]);
|
||||
|
||||
const chartRef = useRef(null); // Референс на график
|
||||
|
||||
// Функция для загрузки данных
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const response = await axios.get('http://192.168.2.33:3000/metrics?metric=node_memory_MemAvailable_bytes');
|
||||
const newData = response.data;
|
||||
|
||||
console.log('New data from backend:', newData); // Проверяем новые данные
|
||||
|
||||
// Обновляем состояние, добавляя новые данные к существующим
|
||||
setChartData((prevChartData) => {
|
||||
// Группируем новые данные по устройству (device)
|
||||
const newGroupedData = newData.reduce((acc, entry) => {
|
||||
const device = entry.device;
|
||||
if (!acc[device]) {
|
||||
acc[device] = [];
|
||||
}
|
||||
acc[device].push(entry);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
// Создаем новый набор данных
|
||||
const newDatasets = Object.keys(newGroupedData).map((device, index) => {
|
||||
// Находим существующий dataset для этого устройства
|
||||
const existingDataset = prevChartData.datasets.find((dataset) => dataset.label === `Device: ${device}`);
|
||||
|
||||
// Если dataset уже существует, добавляем новые данные к нему
|
||||
if (existingDataset) {
|
||||
return {
|
||||
...existingDataset,
|
||||
data: [
|
||||
...existingDataset.data,
|
||||
...newGroupedData[device].map((entry) => ({
|
||||
x: new Date(entry.timestamp), // Временная метка
|
||||
y: entry.value, // Значение
|
||||
})),
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
// Если dataset не существует, создаем новый
|
||||
return {
|
||||
label: `Device: ${device}`,
|
||||
data: newGroupedData[device].map((entry) => ({
|
||||
x: new Date(entry.timestamp),
|
||||
y: entry.value,
|
||||
})),
|
||||
borderColor: `hsl(${(index * 360) / Object.keys(newGroupedData).length}, 70%, 50%)`,
|
||||
backgroundColor: `hsla(${(index * 360) / Object.keys(newGroupedData).length}, 70%, 50%, 0.2)`,
|
||||
tension: 0.2,
|
||||
};
|
||||
});
|
||||
|
||||
// Обновляем labels (метки времени)
|
||||
const newLabels = [
|
||||
...prevChartData.labels,
|
||||
...newData.map((entry) => new Date(entry.timestamp)),
|
||||
];
|
||||
|
||||
return {
|
||||
labels: newLabels,
|
||||
datasets: newDatasets,
|
||||
};
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Ошибка при загрузке метрик:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Загружаем данные при монтировании компонента и обновляем каждые 5 секунд
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
const interval = setInterval(fetchData, 5000);
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
// Загружаем данные из файла с использованием axios
|
||||
const response = await axios.get('/data.json'); // Путь должен быть относительно папки public
|
||||
const rawData = response.data;
|
||||
|
||||
// Очищаем интервал и уничтожаем график при размонтировании компонента
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
if (chartRef.current) {
|
||||
chartRef.current.destroy();
|
||||
// Проверяем, что данные действительно массив
|
||||
if (Array.isArray(rawData)) {
|
||||
const chartData = rawData.map(item => ({
|
||||
timestamp: item.timestamp,
|
||||
value: item.value,
|
||||
}));
|
||||
|
||||
setData(chartData);
|
||||
} else {
|
||||
throw new Error('Ошибка: Данные не являются массивом.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
// Опции графика
|
||||
const options = {
|
||||
if (data.length === 0) return <div>Loading...</div>;
|
||||
|
||||
// Настройки графика
|
||||
const chartOptions = {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top',
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'node_memory_MemAvailable_bytes',
|
||||
text: 'Simple Data Graph',
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
type: 'time', // Используем временную шкалу
|
||||
time: {
|
||||
unit: 'second', // Единица времени
|
||||
displayFormats: {
|
||||
second: 'HH:mm:ss', // Формат отображения времени
|
||||
},
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Time',
|
||||
},
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Данные',
|
||||
},
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
duration: 1000, // Длительность анимации
|
||||
easing: 'linear', // Тип анимации
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ width: '800px', height: '400px' }}>
|
||||
<Line ref={chartRef} data={chartData} options={options} />
|
||||
</div>
|
||||
);
|
||||
const chartData = {
|
||||
labels: data.map(item => item.timestamp), // Массив меток для оси X
|
||||
datasets: [
|
||||
{
|
||||
label: 'Value',
|
||||
data: data.map(item => item.value), // Массив значений для оси Y
|
||||
borderColor: 'rgb(75, 192, 192)',
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||||
fill: false,
|
||||
tension: 0.1,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return <Line data={chartData} options={chartOptions} />;
|
||||
};
|
||||
|
||||
export default NetworkSpeedChart3;
|
||||
export default SimpleGraph;
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@ import React, { useState, useEffect } from "react";
|
|||
import SidebarMenu from "./SidebarMenu";
|
||||
import SystemStatusTable from "../Charts/SystemStatusTable";
|
||||
import SystemStatusTableSoftware from "../Charts/SystemStatusTableSoftware";
|
||||
import TreeChart from "./TreeChart"; // Подключаем граф
|
||||
import TreeChart from "./TreeChart";
|
||||
import "../Style/Dashboard.css";
|
||||
import ErrorIndicator from "./ErrorIndicator";
|
||||
import tabContentData from "./tabContent";
|
||||
import menuData from "./menuData.json"; // Загружаем меню
|
||||
import menuData from "./menuData.json"; // Загружаем новое меню
|
||||
|
||||
const Dashboard = () => {
|
||||
const [tabs, setTabs] = useState([]);
|
||||
|
|
@ -16,24 +16,42 @@ const Dashboard = () => {
|
|||
|
||||
useEffect(() => {
|
||||
setTabContent(tabContentData);
|
||||
setTreeData({ title: "Меню", items: menuData }); // Передаём данные в граф
|
||||
setTreeData(menuData); // Теперь menuData - объект, а не массив
|
||||
}, []);
|
||||
|
||||
const handleOpenTab = (tabName) => {
|
||||
if (!tabs.includes(tabName)) {
|
||||
setTabs([...tabs, tabName]);
|
||||
const handleOpenTab = (id, title) => {
|
||||
if (!tabs.includes(id)) {
|
||||
setTabs([...tabs, id]);
|
||||
}
|
||||
setActiveTab(tabName);
|
||||
setActiveTab(id);
|
||||
};
|
||||
|
||||
const handleCloseTab = (tabName) => {
|
||||
const newTabs = tabs.filter((tab) => tab !== tabName);
|
||||
const handleCloseTab = (id) => {
|
||||
const newTabs = tabs.filter((tab) => tab !== id);
|
||||
setTabs(newTabs);
|
||||
if (activeTab === tabName) {
|
||||
if (activeTab === id) {
|
||||
setActiveTab(newTabs.length > 0 ? newTabs[newTabs.length - 1] : "Главная");
|
||||
}
|
||||
};
|
||||
|
||||
const renderTabContent = () => {
|
||||
if (activeTab === "Главная") {
|
||||
return (
|
||||
<div>
|
||||
<h2>Общий мониторинг</h2>
|
||||
<ErrorIndicator />
|
||||
<SystemStatusTable />
|
||||
<SystemStatusTableSoftware />
|
||||
</div>
|
||||
);
|
||||
} else if (activeTab === "Визуализация") {
|
||||
return <TreeChart data={treeData} onNodeClick={(id, title) => handleOpenTab(id, title)} />;
|
||||
} else {
|
||||
const tabData = tabContent[activeTab];
|
||||
return tabData ? tabData.content : <p>Нет данных</p>;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="dashboard-container">
|
||||
<SidebarMenu onOpenTab={handleOpenTab} />
|
||||
|
|
@ -73,22 +91,11 @@ const Dashboard = () => {
|
|||
</div>
|
||||
|
||||
<div className="content">
|
||||
{activeTab === "Главная" ? (
|
||||
<div>
|
||||
<h2>Общий мониторинг</h2>
|
||||
<ErrorIndicator />
|
||||
<SystemStatusTable />
|
||||
<SystemStatusTableSoftware />
|
||||
</div>
|
||||
) : activeTab === "Визуализация" ? (
|
||||
<TreeChart data={treeData} onNodeClick={(node) => handleOpenTab(node.title)} />
|
||||
) : (
|
||||
<div dangerouslySetInnerHTML={{ __html: tabContent[activeTab] || "<p>Нет данных</p>" }} />
|
||||
)}
|
||||
{renderTabContent()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
export default Dashboard;
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
import React, { useState } from "react";
|
||||
|
||||
const Login = ({ onLogin, onClose }) => {
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
if (username === "admin" && password === "admin") {
|
||||
onLogin(); // Успешная авторизация
|
||||
onClose(); // Закрыть модальное окно
|
||||
} else {
|
||||
setError("Неверный логин или пароль");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="modal-overlay">
|
||||
<div className="modal">
|
||||
<h2>Авторизация</h2>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<label>Логин:</label>
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label>Пароль:</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
{error && <p className="error">{error}</p>}
|
||||
<button type="submit">Войти</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Login;
|
||||
|
|
@ -2,19 +2,15 @@ import React, { useState } from "react";
|
|||
import "../Style/SidebarMenu.css";
|
||||
import menuData from "./menuData.json";
|
||||
|
||||
|
||||
|
||||
// Рекурсивный компонент для отображения меню
|
||||
const MenuItem = ({ item, onSelectItem }) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const hasChildren = Array.isArray(item.items) && item.items.length > 0;
|
||||
|
||||
const handleClick = () => {
|
||||
if (hasChildren) {
|
||||
setIsOpen(!isOpen); // Раскрываем/сворачиваем подменю
|
||||
setIsOpen(!isOpen);
|
||||
} else {
|
||||
onSelectItem(item); // Выбираем конечный элемент
|
||||
onSelectItem(item);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -27,34 +23,25 @@ const MenuItem = ({ item, onSelectItem }) => {
|
|||
{isOpen && hasChildren && (
|
||||
<div className="submenu">
|
||||
{item.items.map((child, index) => (
|
||||
<MenuItem
|
||||
key={index}
|
||||
item={typeof child === "string" ? { title: child, id: child } : child}
|
||||
onSelectItem={onSelectItem}
|
||||
/>
|
||||
<MenuItem key={index} item={child} onSelectItem={onSelectItem} />
|
||||
))}
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Основной компонент SidebarMenu
|
||||
function SidebarMenu({ onOpenTab }) {
|
||||
const handleSelectItem = (item) => {
|
||||
onOpenTab(item.id, item.title); // Передаем и ID, и название
|
||||
};
|
||||
onOpenTab(item.id, item.title); // Передаем id и title
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="sidebar">
|
||||
<h2 className="sidebar-title">Уровень доверия:</h2>
|
||||
<h2 className="sidebar-title">Меню</h2>
|
||||
{menuData.map((section, index) => ( // Используем menuData вместо menuItems
|
||||
<MenuItem key={index} item={section} onSelectItem={handleSelectItem} />
|
||||
))}
|
||||
<MenuItem item={menuData} onSelectItem={handleSelectItem} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SidebarMenu;
|
||||
export default SidebarMenu;
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ const TreeChart = ({ data, onNodeClick }) => {
|
|||
|
||||
node.on("click", (event, d) => {
|
||||
if (onNodeClick) {
|
||||
onNodeClick(d.data);
|
||||
onNodeClick(d.data.id, d.data.title); // Передаем id и title
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,69 +1,55 @@
|
|||
[
|
||||
{
|
||||
"title": "Выбор сервиса",
|
||||
"items": [
|
||||
{
|
||||
"id": "service1",
|
||||
"title": "Сервис ВКС"
|
||||
},
|
||||
{
|
||||
"id": "service2",
|
||||
"title": "Сервис 2"
|
||||
},
|
||||
{
|
||||
"id": "service3",
|
||||
"title": "Сервис 3"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Функциональные задачи",
|
||||
"items": [
|
||||
{
|
||||
"id": "system_control",
|
||||
"title": "Контроль системы"
|
||||
},
|
||||
{
|
||||
"id": "system_management",
|
||||
"title": "Система управления"
|
||||
},
|
||||
{
|
||||
"id": "conference",
|
||||
"title": "Проведение ВКС"
|
||||
},
|
||||
{
|
||||
"id": "backup",
|
||||
"title": "Резервное копирование"
|
||||
},
|
||||
{
|
||||
"id": "relay_info",
|
||||
"title": "Ретрансляция информации"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Аппаратное ПО",
|
||||
"items": [
|
||||
{
|
||||
"id": "hardware_software_1",
|
||||
"title": "ПО1"
|
||||
},
|
||||
{
|
||||
"id": "hardware_software_2",
|
||||
"title": "ПО2"
|
||||
},
|
||||
{
|
||||
"id": "hardware_software_3",
|
||||
"title": "ПО3"
|
||||
},
|
||||
{
|
||||
"id": "hardware_software_4",
|
||||
"title": "ПО4"
|
||||
},
|
||||
{
|
||||
"id": "hardware_software_5",
|
||||
"title": "ПО5"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
{
|
||||
"title": "Сервис ВКС",
|
||||
"items": [
|
||||
{
|
||||
"title": "Функциональные задачи",
|
||||
"items": [
|
||||
{
|
||||
"id": "system_control",
|
||||
"title": "Контроль системы"
|
||||
},
|
||||
{
|
||||
"id": "system_management",
|
||||
"title": "Система управления"
|
||||
},
|
||||
{
|
||||
"id": "conference",
|
||||
"title": "Проведение ВКС"
|
||||
},
|
||||
{
|
||||
"id": "backup",
|
||||
"title": "Резервное копирование"
|
||||
},
|
||||
{
|
||||
"id": "relay_info",
|
||||
"title": "Ретрансляция информации"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Аппаратное ПО",
|
||||
"items": [
|
||||
{
|
||||
"id": "hardware_software_1",
|
||||
"title": "ПО1"
|
||||
},
|
||||
{
|
||||
"id": "hardware_software_2",
|
||||
"title": "ПО2"
|
||||
},
|
||||
{
|
||||
"id": "hardware_software_3",
|
||||
"title": "ПО3"
|
||||
},
|
||||
{
|
||||
"id": "hardware_software_4",
|
||||
"title": "ПО4"
|
||||
},
|
||||
{
|
||||
"id": "hardware_software_5",
|
||||
"title": "ПО5"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,18 @@
|
|||
import React from "react";
|
||||
import NetworkSpeedChart2 from '../Charts/TestCharts2';
|
||||
|
||||
const tabContent = {
|
||||
service1: <div><h2>Сервис ВКС</h2></div>,
|
||||
service2: <div><h2>Сервис 2</h2></div>,
|
||||
service3: <div><h2>Сервис 3</h2></div>,
|
||||
system_control: <div><h2>Контроль системы</h2><p>Описание контроля.</p></div>,
|
||||
system_management: <div><h2>Система управления</h2><p>Описание системы управления.</p></div>,
|
||||
conference: <div><h2>Проведение ВКС</h2><p>Информация о проведении ВКС.</p></div>,
|
||||
backup: <div><h2>Резервное копирование</h2><p>Процесс резервного копирования.</p></div>,
|
||||
relay_info: <div><h2>Ретрансляция информации</h2><p>Детали ретрансляции.</p></div>,
|
||||
service1: { title: "Сервис ВКС", content: <div><h2>Сервис ВКС</h2></div> },
|
||||
system_control: { title: "Контроль системы", content: <div><h2>Контроль системы</h2><p>Описание контроля.</p></div> },
|
||||
system_management: { title: "Система управления", content: <div><h2>Система управления</h2><p>Описание системы управления.</p></div> },
|
||||
conference: { title: "Проведение ВКС", content: <div><h2>Проведение ВКС</h2><p>Информация о проведении ВКС.</p></div> },
|
||||
backup: { title: "Резервное копирование", content: <div><h2>Резервное копирование</h2><p>Процесс резервного копирования.</p></div> },
|
||||
relay_info: { title: "Ретрансляция информации", content: <div><h2>Ретрансляция информации</h2><p>Детали ретрансляции.</p></div> },
|
||||
hardware_software_1: { title: "График скорости сети", content: <div><h2>График скорости сети</h2><NetworkSpeedChart2 /></div> },
|
||||
hardware_software_2: { title: "ПО2", content: <div><h2>ПО2</h2></div> },
|
||||
hardware_software_3: { title: "ПО3", content: <div><h2>ПО3</h2></div> },
|
||||
hardware_software_4: { title: "ПО4", content: <div><h2>ПО4</h2></div> },
|
||||
hardware_software_5: { title: "ПО5", content: <div><h2>ПО5</h2></div> },
|
||||
};
|
||||
|
||||
export default tabContent;
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.modal h2 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.modal label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.modal input {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.modal button {
|
||||
padding: 10px 20px;
|
||||
background: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal button:hover {
|
||||
background: #0056b3;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: red;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
@ -1,53 +1,57 @@
|
|||
table {
|
||||
width: 100%;
|
||||
table-layout: fixed; /* Фиксированная ширина столбцов */
|
||||
}
|
||||
|
||||
th, td {
|
||||
width: 25%; /* Равномерное распределение ширины для 4 столбцов */
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status.normal {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.status.warning {
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.status.critical {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.details {
|
||||
padding: 10px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
/* Фиксированная ширина столбцов */
|
||||
}
|
||||
|
||||
caption {
|
||||
position: relative;
|
||||
margin-right: 100% ;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
width: 25%;
|
||||
/* Равномерное распределение ширины для 4 столбцов */
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status.normal {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.status.warning {
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.status.critical {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.details {
|
||||
padding: 10px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
caption {
|
||||
position: relative;
|
||||
margin-right: 100%;
|
||||
}
|
||||
Loading…
Reference in New Issue