Merge pull request 'rc' (#2) from rc into main

Reviewed-on: http://192.168.2.61/DmitriyA/trust-module-frontend/pulls/2

package.json

@@ -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",

public/data.json

@@ -1,9 +1,22 @@
+[
   {
-  "labels": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+    "timestamp": "2025-02-18 12:00",
-  "datasets": [
+    "value": 10
+  },
   {
-      "data": [50, 52, 55, 53, 60, 58, 65, 62, 66, 72],
+    "timestamp": "2025-02-18 12:05",
-      "data2": [20,56,74,45,21,20,56,74,45,21]   
+    "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
   }
 ]
-}

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 LoginModal from "./Components/LoginModal"; // Импортируем компонент авторизации
-import NetworkSpeedChart2 from './Charts/TestCharts2'
+import "./Style/LoginModal.css"; // Импортируем стили
-import NetworkSpeedChart3 from './Charts/TestCharts3'
 
 function App() {
-    /*return (
+    const [isAuthenticated, setIsAuthenticated] = useState(false); // Состояние авторизации
-        <div style={{ display: "flex", height: "100vh", overflow: "hidden" }}>
+    const [showLoginModal, setShowLoginModal] = useState(true); // Показывать ли модальное окно
-            <Dashboard />
+
-            <h1>График</h1>
+    const handleLogin = () => {
-            <CpuChart />
+        setIsAuthenticated(true); // Устанавливаем авторизацию
-        </div> 
+        setShowLoginModal(false); // Скрываем модальное окно
-    ); */
+    };
 
     return (
-        <div style={{ padding: "20px" }}>
+        <div style={{ display: "flex", height: "100vh", overflow: "hidden" }}>
-            <h1>Dashboard</h1>
+            {!isAuthenticated && showLoginModal && (
-            <Dashboard />
+                <LoginModal onLogin={handleLogin} onClose={() => setShowLoginModal(false)} />
-            <div style={{ marginBottom: "40px" }}>
+            )}
-                <h2>Примеры импорта данных</h2>
+
-                <NetworkSpeedChart />
+            {isAuthenticated && <Dashboard />}
-                <NetworkSpeedChart2 />
-                <NetworkSpeedChart3 />
-            </div>
         </div>
     );
 }

src/Charts/TestCharts2.jsx

@@ -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({
+    const [chartData, setChartData] = useState({ labels: [], datasets: [] });
-        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[entry.device]) acc[entry.device] = [];
-                    if (!acc[device]) {
+                    acc[entry.device].push({ x: new Date(entry.timestamp), y: entry.value });
-                        acc[device] = [];
-                    }
-                    acc[device].push(entry);
                     return acc;
                 }, {});
 
-                // Создаем новый набор данных
                 const newDatasets = Object.keys(newGroupedData).map((device, index) => {
-                    // Находим существующий dataset для этого устройства
+                    const existingDataset = prevChartData.datasets.find((d) => d.label === `Device: ${device}`);
-                    const existingDataset = prevChartData.datasets.find((dataset) => dataset.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) => ({
+                        data: updatedData.slice(-MAX_DATA_POINTS),
-                            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 (метки времени)
+                return { labels: newDatasets[0]?.data.map((d) => d.x) || [], datasets: newDatasets };
-                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);
-
+        return () => clearInterval(interval);
-        // Очищаем интервал и уничтожаем график при размонтировании компонента
-        return () => {
-            clearInterval(interval);
-            if (chartRef.current) {
-                chartRef.current.destroy();
-            }
-        };
     }, []);
 
-    // Опции графика
     const options = {
         responsive: true,
         plugins: {
-            legend: {
+            legend: { position: 'top' },
-                position: 'top',
+            title: { display: true, text: 'node_time_seconds' },
-            },
-            title: {
-                display: true,
-                text: 'node_time_seconds',
-            },
         },
         scales: {
             x: {
-                type: 'time', // Используем временную шкалу
+                type: 'time',
-                time: {
+                time: { unit: 'second', displayFormats: { second: 'HH:mm:ss' } },
-                    unit: 'second', // Единица времени
+                title: { display: true, text: 'Time' },
-                    displayFormats: {
-                        second: 'HH:mm:ss', // Формат отображения времени
             },
+            y: { title: { display: true, text: 'Value' } },
         },
-                title: {
+        animation: { duration: 1000, easing: 'linear' },
-                    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} />
+            <Line data={chartData} options={options} />
         </div>
     );
 };

src/Charts/TestCharts3.jsx

@@ -1,165 +1,68 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState } from 'react';
-import axios from 'axios';
 import { Line } from 'react-chartjs-2';
-import {
+import axios from 'axios';
-    Chart as ChartJS,
+import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale } from 'chart.js';
-    CategoryScale,
-    LinearScale,
-    PointElement,
-    LineElement,
-    Title,
-    Tooltip,
-    Legend,
-    TimeScale,
-} from 'chart.js';
-import 'chartjs-adapter-date-fns'; // Импортируем адаптер дат
 
-// Регистрируем компоненты Chart.js
+// Регистрация компонентов Chart.js
-ChartJS.register(
+ChartJS.register(Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale);
-    CategoryScale,
-    LinearScale,
-    PointElement,
-    LineElement,
-    Title,
-    Tooltip,
-    Legend,
-    TimeScale // Регистрируем временную шкалу
-);
 
-const NetworkSpeedChart3 = () => {
+const SimpleGraph = () => {
-    const [chartData, setChartData] = useState({
+    const [data, setData] = useState([]);
-        labels: [],
-        datasets: [],
-    });
 
-    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');
+                // Загружаем данные из файла с использованием axios
-            const newData = response.data;
+                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,
+                    }));
 
-            // Обновляем состояние, добавляя новые данные к существующим
+                    setData(chartData);
-            setChartData((prevChartData) => {
+                } else {
-                // Группируем новые данные по устройству (device)
+                    throw new Error('Ошибка: Данные не являются массивом.');
-                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);
+                console.error('Error fetching data:', error);
             }
         };
 
-    // Загружаем данные при монтировании компонента и обновляем каждые 5 секунд
-    useEffect(() => {
         fetchData();
-        const interval = setInterval(fetchData, 5000);
-
-        // Очищаем интервал и уничтожаем график при размонтировании компонента
-        return () => {
-            clearInterval(interval);
-            if (chartRef.current) {
-                chartRef.current.destroy();
-            }
-        };
     }, []);
 
-    // Опции графика
+    if (data.length === 0) return <div>Loading...</div>;
-    const options = {
+
+    // Настройки графика
+    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 (
+    const chartData = {
-        <div style={{ width: '800px', height: '400px' }}>
+        labels: data.map(item => item.timestamp), // Массив меток для оси X
-            <Line ref={chartRef} data={chartData} options={options} />
+        datasets: [
-        </div>
+            {
-    );
+                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,
+            },
+        ],
     };
 
-export default NetworkSpeedChart3;
+    return <Line data={chartData} options={chartOptions} />;
+};
+
+export default SimpleGraph;

src/Components/Dashboard.jsx

@@ -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";
-
+import tabContentData from "./tabContent";
-const tabContent = {
+import menuData from "./menuData.json"; // Загружаем новое меню
-  "Сервис ВКС": <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>,
-};
 
 const Dashboard = () => {
-  const [tabs, setTabs] = useState([]); // Открытые вкладки
+  const [tabs, setTabs] = useState([]);
-  const [activeTab, setActiveTab] = useState("Главная"); // Текущая активная вкладка
+  const [activeTab, setActiveTab] = useState("Главная");
+  const [tabContent, setTabContent] = useState({});
+  const [treeData, setTreeData] = useState(null);
 
-  const handleOpenTab = (tabName) => {
+  useEffect(() => {
-    if (!tabs.includes(tabName)) {
+    setTabContent(tabContentData);
-      setTabs([...tabs, tabName]);
+    setTreeData(menuData); // Теперь menuData - объект, а не массив
+  }, []);
+
+  const handleOpenTab = (id, title) => {
+    if (!tabs.includes(id)) {
+      setTabs([...tabs, id]);
     }
-    setActiveTab(tabName);
+    setActiveTab(id);
   };
 
-  const handleCloseTab = (tabName) => {
+  const handleCloseTab = (id) => {
-    const newTabs = tabs.filter(tab => tab !== tabName);
+    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 === "Главная" ? (
+          {renderTabContent()}
-            <div>
-              <h2>Общий мониторинг</h2>
-              <ErrorIndicator />
-              <SystemStatusTable />
-              <SystemStatusTableSoftware />
-            </div>
-          ) : (
-            tabContent[activeTab] || <p>Нет контента</p>
-          )}
         </div>
       </div>
     </div>

src/Components/LoginModal.jsx

@@ -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;

src/Components/SidebarMenu.jsx

@@ -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
+                        <MenuItem key={index} item={child} onSelectItem={onSelectItem} />
-                            key={index}
-                            item={typeof child === "string" ? { title: child } : 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 item={menuData} onSelectItem={handleSelectItem} />
-                <MenuItem key={index} item={section} onSelectItem={handleSelectItem} />
-            ))}
         </div>
     );
 }

src/Components/TreeChart.jsx

@@ -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;

src/Components/menuData.json

@@ -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"
+                }
+            ]
+        }
+    ]
+}

src/Components/tabContent.jsx

@@ -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;

src/Style/LoginModal.css

@@ -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;
+}

src/Style/SystemStatusTable.css

@@ -1,13 +1,17 @@
 table {
   width: 100%;
-    table-layout: fixed; /* Фиксированная ширина столбцов */
+  table-layout: fixed;
+  /* Фиксированная ширина столбцов */
 }
 
-  th, td {
+th,
-    width: 25%; /* Равномерное распределение ширины для 4 столбцов */
+td {
+  width: 25%;
+  /* Равномерное распределение ширины для 4 столбцов */
   padding: 10px;
   text-align: left;
   border-bottom: 1px solid #ddd;
+  color: #333;
 }
 
 .status {