Merge pull request 'rc' (#2) from rc into main
Reviewed-on: http://192.168.2.61/DmitriyA/trust-module-frontend/pulls/2pull/3/head^2
YurijO
commit
1168bbd83a
|
|
@ -10,6 +10,8 @@
|
|||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"chartjs-adapter-date-fns": "^3.0.0",
|
||||
"d3": "^7.9.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"chart.js": "^4.0.0",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
36
src/App.jsx
36
src/App.jsx
|
|
@ -1,28 +1,24 @@
|
|||
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() {
|
||||
/*return (
|
||||
<div style={{ display: "flex", height: "100vh", overflow: "hidden" }}>
|
||||
<Dashboard />
|
||||
<h1>График</h1>
|
||||
<CpuChart />
|
||||
</div>
|
||||
); */
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(false); // Состояние авторизации
|
||||
const [showLoginModal, setShowLoginModal] = useState(true); // Показывать ли модальное окно
|
||||
|
||||
const handleLogin = () => {
|
||||
setIsAuthenticated(true); // Устанавливаем авторизацию
|
||||
setShowLoginModal(false); // Скрываем модальное окно
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ padding: "20px" }}>
|
||||
<h1>Dashboard</h1>
|
||||
<Dashboard />
|
||||
<div style={{ marginBottom: "40px" }}>
|
||||
<h2>Примеры импорта данных</h2>
|
||||
<NetworkSpeedChart />
|
||||
<NetworkSpeedChart2 />
|
||||
<NetworkSpeedChart3 />
|
||||
</div>
|
||||
<div style={{ display: "flex", height: "100vh", overflow: "hidden" }}>
|
||||
{!isAuthenticated && showLoginModal && (
|
||||
<LoginModal onLogin={handleLogin} onClose={() => setShowLoginModal(false)} />
|
||||
)}
|
||||
|
||||
{isAuthenticated && <Dashboard />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,141 +22,72 @@ 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', // Формат отображения времени
|
||||
type: 'time',
|
||||
time: { unit: 'second', displayFormats: { second: 'HH:mm:ss' } },
|
||||
title: { display: true, text: 'Time' },
|
||||
},
|
||||
y: { title: { display: true, text: 'Value' } },
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Time',
|
||||
},
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Данные',
|
||||
},
|
||||
},
|
||||
},
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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); // Референс на график
|
||||
|
||||
// Функция для загрузки данных
|
||||
useEffect(() => {
|
||||
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;
|
||||
// Загружаем данные из файла с использованием axios
|
||||
const response = await axios.get('/data.json'); // Путь должен быть относительно папки public
|
||||
const rawData = response.data;
|
||||
|
||||
console.log('New data from backend:', newData); // Проверяем новые данные
|
||||
// Проверяем, что данные действительно массив
|
||||
if (Array.isArray(rawData)) {
|
||||
const chartData = rawData.map(item => ({
|
||||
timestamp: item.timestamp,
|
||||
value: item.value,
|
||||
}));
|
||||
|
||||
// Обновляем состояние, добавляя новые данные к существующим
|
||||
setChartData((prevChartData) => {
|
||||
// Группируем новые данные по устройству (device)
|
||||
const newGroupedData = newData.reduce((acc, entry) => {
|
||||
const device = entry.device;
|
||||
if (!acc[device]) {
|
||||
acc[device] = [];
|
||||
setData(chartData);
|
||||
} else {
|
||||
throw new Error('Ошибка: Данные не являются массивом.');
|
||||
}
|
||||
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);
|
||||
console.error('Error fetching data:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Загружаем данные при монтировании компонента и обновляем каждые 5 секунд
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
const interval = setInterval(fetchData, 5000);
|
||||
|
||||
// Очищаем интервал и уничтожаем график при размонтировании компонента
|
||||
return () => {
|
||||
clearInterval(interval);
|
||||
if (chartRef.current) {
|
||||
chartRef.current.destroy();
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Опции графика
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -1,46 +1,62 @@
|
|||
import React, { useState } from "react";
|
||||
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 "../Style/Dashboard.css";
|
||||
import ErrorIndicator from "./ErrorIndicator";
|
||||
|
||||
const tabContent = {
|
||||
"Сервис ВКС": <div><h2>Сервис 1</h2></div>,
|
||||
"Сервис 2": <div><h2>Сервис 2</h2></div>,
|
||||
"Сервис 3": <div><h2>Сервис 3</h2></div>,
|
||||
"Контроль системы": <div><h2>Контроль системы</h2><p>Описание контроля.</p></div>,
|
||||
"Система управления": <div><h2>Система управления</h2><p>Описание системы управления.</p></div>,
|
||||
"Проведение ВКС": <div><h2>Проведение ВКС</h2><p>Информация о проведении ВКС.</p></div>,
|
||||
"Резервное копирование": <div><h2>Резервное копирование</h2><p>Процесс резервного копирования.</p></div>,
|
||||
"Ретрансляция информации": <div><h2>Ретрансляция информации</h2><p>Детали ретрансляции.</p></div>,
|
||||
};
|
||||
import tabContentData from "./tabContent";
|
||||
import menuData from "./menuData.json"; // Загружаем новое меню
|
||||
|
||||
const Dashboard = () => {
|
||||
const [tabs, setTabs] = useState([]); // Открытые вкладки
|
||||
const [activeTab, setActiveTab] = useState("Главная"); // Текущая активная вкладка
|
||||
const [tabs, setTabs] = useState([]);
|
||||
const [activeTab, setActiveTab] = useState("Главная");
|
||||
const [tabContent, setTabContent] = useState({});
|
||||
const [treeData, setTreeData] = useState(null);
|
||||
|
||||
const handleOpenTab = (tabName) => {
|
||||
if (!tabs.includes(tabName)) {
|
||||
setTabs([...tabs, tabName]);
|
||||
useEffect(() => {
|
||||
setTabContent(tabContentData);
|
||||
setTreeData(menuData); // Теперь menuData - объект, а не массив
|
||||
}, []);
|
||||
|
||||
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} />
|
||||
|
||||
<div className="main-content">
|
||||
{/* Вкладки */}
|
||||
<div className="tabs">
|
||||
<div
|
||||
className={`tab ${activeTab === "Главная" ? "active" : ""}`}
|
||||
|
|
@ -48,7 +64,13 @@ const Dashboard = () => {
|
|||
>
|
||||
Главная
|
||||
</div>
|
||||
{tabs.map(tab => (
|
||||
<div
|
||||
className={`tab ${activeTab === "Визуализация" ? "active" : ""}`}
|
||||
onClick={() => setActiveTab("Визуализация")}
|
||||
>
|
||||
Визуализация
|
||||
</div>
|
||||
{tabs.map((tab) => (
|
||||
<div
|
||||
key={tab}
|
||||
className={`tab ${activeTab === tab ? "active" : ""}`}
|
||||
|
|
@ -57,7 +79,10 @@ const Dashboard = () => {
|
|||
{tab}
|
||||
<button
|
||||
className="close-tab"
|
||||
onClick={(e) => { e.stopPropagation(); handleCloseTab(tab); }}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleCloseTab(tab);
|
||||
}}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
|
|
@ -65,18 +90,8 @@ const Dashboard = () => {
|
|||
))}
|
||||
</div>
|
||||
|
||||
{/* Контент */}
|
||||
<div className="content">
|
||||
{activeTab === "Главная" ? (
|
||||
<div>
|
||||
<h2>Общий мониторинг</h2>
|
||||
<ErrorIndicator />
|
||||
<SystemStatusTable />
|
||||
<SystemStatusTableSoftware />
|
||||
</div>
|
||||
) : (
|
||||
tabContent[activeTab] || <p>Нет контента</p>
|
||||
)}
|
||||
{renderTabContent()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -1,54 +1,16 @@
|
|||
import React, { useState } from "react";
|
||||
import "../Style/SidebarMenu.css";
|
||||
import menuData from "./menuData.json";
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
title: "Выбор сервиса",
|
||||
items: ["Сервис ВКС", "Сервис 2", "Сервис 3"],
|
||||
},
|
||||
{
|
||||
title: "Функциональные задачи",
|
||||
items: ["Контроль системы", "Система управления", "Проведение ВКС", "Резервное копирование", "Ретрансляция информации"],
|
||||
},
|
||||
{
|
||||
title: "Программное обеспечение",
|
||||
items: [
|
||||
{
|
||||
title: "ПО 1",
|
||||
items: ["компонент ПО1", "компонент ПО2"],
|
||||
},
|
||||
{
|
||||
title: "ПО 2",
|
||||
items: ["компонент ПО3"],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Аппаратное обеспечение",
|
||||
items: [
|
||||
{
|
||||
title: "Оборудование 1",
|
||||
items: ["компонент Оборудование 1"],
|
||||
},
|
||||
{
|
||||
title: "Оборудование 2",
|
||||
items: ["компонент Оборудование 2"],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// Рекурсивный компонент для отображения меню
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -61,11 +23,7 @@ const MenuItem = ({ item, onSelectItem }) => {
|
|||
{isOpen && hasChildren && (
|
||||
<div className="submenu">
|
||||
{item.items.map((child, index) => (
|
||||
<MenuItem
|
||||
key={index}
|
||||
item={typeof child === "string" ? { title: child } : child}
|
||||
onSelectItem={onSelectItem}
|
||||
/>
|
||||
<MenuItem key={index} item={child} onSelectItem={onSelectItem} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -73,19 +31,15 @@ const MenuItem = ({ item, onSelectItem }) => {
|
|||
);
|
||||
};
|
||||
|
||||
// Основной компонент SidebarMenu
|
||||
function SidebarMenu({ onOpenTab }) {
|
||||
const handleSelectItem = (item) => {
|
||||
onOpenTab(item.title); // Передаем название вкладки в родительский компонент
|
||||
onOpenTab(item.id, item.title); // Передаем id и title
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="sidebar">
|
||||
<h2 className="sidebar-title">Уровень доверия:</h2>
|
||||
<h2 className="sidebar-title">Меню</h2>
|
||||
{menuItems.map((section, index) => (
|
||||
<MenuItem key={index} item={section} onSelectItem={handleSelectItem} />
|
||||
))}
|
||||
<MenuItem item={menuData} onSelectItem={handleSelectItem} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,121 @@
|
|||
import React, { useRef, useEffect } from "react";
|
||||
import * as d3 from "d3";
|
||||
|
||||
const TreeChart = ({ data, onNodeClick }) => {
|
||||
const chartRef = useRef();
|
||||
|
||||
useEffect(() => {
|
||||
if (!data) return;
|
||||
|
||||
// Очищаем старый граф перед отрисовкой
|
||||
d3.select(chartRef.current).selectAll("*").remove();
|
||||
|
||||
const width = 928;
|
||||
const height = 600;
|
||||
|
||||
const root = d3.hierarchy(data, (d) => d.items);
|
||||
const links = root.links();
|
||||
const nodes = root.descendants();
|
||||
|
||||
const simulation = d3
|
||||
.forceSimulation(nodes)
|
||||
.force("link", d3.forceLink(links).id((d) => d.data.title).distance(80).strength(1)) // Увеличил дистанцию
|
||||
.force("charge", d3.forceManyBody().strength(-500)) // Увеличил отталкивание узлов
|
||||
.force("x", d3.forceX())
|
||||
.force("y", d3.forceY());
|
||||
|
||||
const svg = d3
|
||||
.select(chartRef.current)
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.attr("viewBox", [-width / 2, -height / 2, width, height])
|
||||
.attr("style", "max-width: 100%; height: auto;");
|
||||
|
||||
const link = svg
|
||||
.append("g")
|
||||
.attr("stroke", "#999")
|
||||
.attr("stroke-opacity", 0.6)
|
||||
.selectAll("line")
|
||||
.data(links)
|
||||
.join("line");
|
||||
|
||||
const node = svg
|
||||
.append("g")
|
||||
.attr("stroke", "#000")
|
||||
.attr("stroke-width", 1.5)
|
||||
.selectAll("circle")
|
||||
.data(nodes)
|
||||
.join("circle")
|
||||
.attr("fill", (d) => (d.children ? "#555" : "#000"))
|
||||
.attr("stroke", "#fff")
|
||||
.attr("r", 7) // Немного увеличил размер узлов для удобства клика
|
||||
.call(drag(simulation));
|
||||
|
||||
// Добавляем текстовые подписи
|
||||
const text = svg
|
||||
.append("g")
|
||||
.attr("fill", "#000")
|
||||
.attr("font-family", "Arial")
|
||||
.attr("font-size", 12)
|
||||
.attr("pointer-events", "none") // Отключаем обработку событий текста
|
||||
.selectAll("text")
|
||||
.data(nodes)
|
||||
.join("text")
|
||||
.text((d) => d.data.title)
|
||||
.attr("dx", 12) // Отодвигаем текст дальше от узла
|
||||
.attr("dy", 4) // Немного поднимаем текст
|
||||
|
||||
node.append("title").text((d) => d.data.title);
|
||||
|
||||
node.on("click", (event, d) => {
|
||||
if (onNodeClick) {
|
||||
onNodeClick(d.data.id, d.data.title); // Передаем id и title
|
||||
}
|
||||
});
|
||||
|
||||
simulation.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
|
||||
.attr("x", (d) => d.x + 12) // Смещаем текст правее узла
|
||||
.attr("y", (d) => d.y + 4);
|
||||
});
|
||||
|
||||
return () => {
|
||||
simulation.stop();
|
||||
};
|
||||
}, [data, onNodeClick]);
|
||||
|
||||
const drag = (simulation) => {
|
||||
function dragstarted(event, d) {
|
||||
if (!event.active) simulation.alphaTarget(0.3).restart();
|
||||
d.fx = d.x;
|
||||
d.fy = d.y;
|
||||
}
|
||||
|
||||
function dragged(event, d) {
|
||||
d.fx = event.x;
|
||||
d.fy = event.y;
|
||||
}
|
||||
|
||||
function dragended(event, d) {
|
||||
if (!event.active) simulation.alphaTarget(0);
|
||||
d.fx = null;
|
||||
d.fy = null;
|
||||
}
|
||||
|
||||
return d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended);
|
||||
};
|
||||
|
||||
return <svg ref={chartRef}></svg>;
|
||||
};
|
||||
|
||||
export default TreeChart;
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
{
|
||||
"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"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import React from "react";
|
||||
import NetworkSpeedChart2 from '../Charts/TestCharts2';
|
||||
|
||||
const tabContent = {
|
||||
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; /* Фиксированная ширина столбцов */
|
||||
}
|
||||
table-layout: fixed;
|
||||
/* Фиксированная ширина столбцов */
|
||||
}
|
||||
|
||||
th, td {
|
||||
width: 25%; /* Равномерное распределение ширины для 4 столбцов */
|
||||
th,
|
||||
td {
|
||||
width: 25%;
|
||||
/* Равномерное распределение ширины для 4 столбцов */
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.status {
|
||||
.status {
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.status.normal {
|
||||
.status.normal {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
|
||||
.status.warning {
|
||||
.status.warning {
|
||||
background-color: orange;
|
||||
}
|
||||
}
|
||||
|
||||
.status.critical {
|
||||
.status.critical {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
.details {
|
||||
padding: 10px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
button {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
button:hover {
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
}
|
||||
|
||||
caption {
|
||||
caption {
|
||||
position: relative;
|
||||
margin-right: 100% ;
|
||||
}
|
||||
margin-right: 100%;
|
||||
}
|
||||
Loading…
Reference in New Issue