- {nodes.map((node) => (
-
{tabContent[node.id].content}
- ))}
+ return { content, context: currentContext };
+ }
+
+ if (node.metric) {
+ const chartKey = `${node.metric}-${currentContext.device || "all"}-${currentContext.module || "all"}-${pathId}`;
+
+ const content = (
+
+
{node.title}
+ {currentContext.device &&
Устройство: {currentContext.device}
}
+ {currentContext.module &&
Модуль: {currentContext.module}
}
+
}>
+
+
+
+ );
+
+ tabContentMap[pathId] = {
+ title: node.title,
+ content,
+ context: currentContext,
+ };
+
+ return { content, context: currentContext };
+ }
+
+ // Узел без метрики и без вложенных — просто заголовок
+ const content = (
+
+
{node.title}
);
+
+ tabContentMap[pathId] = {
+ title: node.title,
+ content,
+ context: currentContext,
+ };
+
+ return { content, context: currentContext };
};
- // Начинаем обработку с корневого уровня
- if (data.items && data.items.length > 0) {
- generateContent(data.items);
- } else {
- console.warn("Данные отсутствуют или массив items пуст");
+ try {
+ processNode(data);
+ } catch (error) {
+ console.error("Ошибка обработки данных:", error);
}
- return tabContent;
+ return tabContentMap;
};
export default tabContent;
\ No newline at end of file
diff --git a/src/Components/UI/LoginModal.jsx b/src/Components/UI/LoginModal.jsx
index 3e29de2..f76b7b3 100755
--- a/src/Components/UI/LoginModal.jsx
+++ b/src/Components/UI/LoginModal.jsx
@@ -3,6 +3,7 @@ import Modal from "./Modal";
import "../../Style/LoginModal.css";
import Logo from '../../assets/images/logo.svg?react';
import TextField from '@mui/material/TextField';
+import axios from 'axios';
const LoginModal = ({ onLogin, onClose }) => {
const [username, setUsername] = useState("");
@@ -16,26 +17,27 @@ const LoginModal = ({ onLogin, onClose }) => {
e.preventDefault();
try {
- // Отправляем данные на бэкенд
- const response = await fetch(`${import.meta.env.VITE_BACK_URL}/api/auth/login`, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify({ login: username, password }),
- });
-
- const data = await response.json();
+ const { data } = await axios.post(
+ `${import.meta.env.VITE_BACK_URL}/api/auth/login`,
+ { login: username, password },
+ {
+ withCredentials: true,
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ }
+ );
if (data.success) {
- onLogin(); // Успешная авторизация
- onClose(); // Закрыть модальное окно
+ localStorage.setItem('access_token', data.access_token);
+ onLogin(data.user);
+ onClose();
} else {
setError(data.message || "Неверный логин или пароль");
}
} catch (err) {
console.error('Ошибка при отправке запроса:', err);
- setError("Ошибка при подключении к серверу");
+ setError(err.response?.data?.message || "Ошибка при подключении к серверу");
}
};
diff --git a/src/Components/UI/MUItabs.jsx b/src/Components/UI/MUItabs.jsx
index 0ea89aa..173b492 100644
--- a/src/Components/UI/MUItabs.jsx
+++ b/src/Components/UI/MUItabs.jsx
@@ -1,9 +1,11 @@
import React from "react";
-import { Tabs, Tab, Box, styled } from "@mui/material";
+import { Tabs, Tab, Box, styled, Typography } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
const StyledTab = styled(Tab)(({ theme }) => ({
minHeight: 48,
+ padding: theme.spacing(1, 2),
+ textTransform: 'none',
'&.Mui-selected': {
color: theme.palette.primary.main,
fontWeight: theme.typography.fontWeightMedium,
@@ -14,9 +16,43 @@ const StyledTab = styled(Tab)(({ theme }) => ({
},
}));
+const TabLabel = ({ title, onClose }) => {
+ return (
+
+
+ {title}
+
+
+
+ );
+};
+
const CustomTabs = ({ tabs, activeTab, onTabClick, onCloseTab }) => {
const handleMouseDown = (e, id) => {
- if (e.button === 1) { // Middle mouse button
+ if (e.button === 1) { // Средняя кнопка мыши
e.preventDefault();
onCloseTab(id);
}
@@ -26,6 +62,12 @@ const CustomTabs = ({ tabs, activeTab, onTabClick, onCloseTab }) => {
onTabClick(newValue);
};
+ // Статические вкладки (сохраняем оригинальные id)
+ const staticTabs = [
+ { id: "Главная", title: "Главная" },
+ { id: "Визуализация", title: "Визуализация" }
+ ];
+
return (
{
onChange={handleChange}
variant="scrollable"
scrollButtons="auto"
+ allowScrollButtonsMobile
aria-label="tabs"
>
{/* Статические вкладки */}
- handleMouseDown(e, "Главная")}
- />
- handleMouseDown(e, "Визуализация")}
- />
+ {staticTabs.map(tab => (
+ handleMouseDown(e, tab.id)}
+ />
+ ))}
{/* Динамические вкладки */}
{tabs.map((tab) => (
- {tab.title}
- {
- e.stopPropagation();
- onCloseTab(tab.id);
- }}
- />
-
+
{
+ e.stopPropagation();
+ onCloseTab(tab.id);
+ }}
+ />
}
value={tab.id}
onMouseDown={(e) => handleMouseDown(e, tab.id)}
diff --git a/src/Components/UI/TreeTable.jsx b/src/Components/UI/TreeTable.jsx
index bbc86b1..3087ddb 100755
--- a/src/Components/UI/TreeTable.jsx
+++ b/src/Components/UI/TreeTable.jsx
@@ -324,7 +324,7 @@ const TreeTable = ({ data }) => {
diff --git a/src/Components/UI/auth.jsx b/src/Components/UI/auth.jsx
new file mode 100644
index 0000000..c0beca8
--- /dev/null
+++ b/src/Components/UI/auth.jsx
@@ -0,0 +1,20 @@
+import axios from 'axios';
+
+export const checkAuth = async () => {
+ try {
+ const { data } = await axios.get(
+ `${import.meta.env.VITE_BACK_URL}/api/auth/check`,
+ {
+ withCredentials: true,
+ headers: {
+ 'Authorization': `Bearer ${localStorage.getItem('access_token') || ''}`,
+ },
+ }
+ );
+
+ return data;
+ } catch (err) {
+ console.error('Auth check failed:', err);
+ return { isAuthenticated: false };
+ }
+};
\ No newline at end of file
diff --git a/src/Components/hooks/LazyChartBatchRender.jsx b/src/Components/hooks/LazyChartBatchRender.jsx
index a12f491..ed351e7 100644
--- a/src/Components/hooks/LazyChartBatchRender.jsx
+++ b/src/Components/hooks/LazyChartBatchRender.jsx
@@ -1,29 +1,167 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import Box from '@mui/material/Box';
+import Skeleton from '@mui/material/Skeleton';
-const LazyChartBatchRenderer = ({ charts, batchSize = 3, delay = 150 }) => {
- const [visibleCharts, setVisibleCharts] = useState([]);
+const LazyChartBatchRenderer = ({ charts }) => {
+ const [visibleIndices, setVisibleIndices] = useState(new Set());
+ const placeholderRefs = useRef([]);
+ const observerRef = useRef(null);
+ const cleanupTimeoutRef = useRef(null);
+
+ const ChartSkeleton = () => (
+
+
+
+
+
+
+
+
+
+
+ {[1, 2, 3, 4].map((_, i) => (
+
+ ))}
+
+
+ );
+
+
+ const isElementFarFromViewport = useCallback((element) => {
+ if (!element) return true;
+
+ const rect = element.getBoundingClientRect();
+ const buffer = window.innerHeight * 1.5;
+
+
+ return rect.bottom < -buffer || rect.top > window.innerHeight + buffer;
+ }, []);
+
+
+ const updateVisibleIndices = useCallback(() => {
+ const newVisibleIndices = new Set();
+
+ placeholderRefs.current.forEach((ref, index) => {
+ if (ref && !isElementFarFromViewport(ref)) {
+ newVisibleIndices.add(index);
+ }
+ });
+
+ setVisibleIndices(prev => {
+ if (newVisibleIndices.size === prev.size &&
+ Array.from(newVisibleIndices).every(i => prev.has(i))) {
+ return prev;
+ }
+ return newVisibleIndices;
+ });
+ }, [isElementFarFromViewport]);
useEffect(() => {
- let index = 0;
- const timer = setInterval(() => {
- setVisibleCharts((prev) => [
- ...prev,
- ...charts.slice(index, index + batchSize),
- ]);
- index += batchSize;
- if (index >= charts.length) clearInterval(timer);
- }, delay);
+ observerRef.current = new IntersectionObserver(
+ (entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ updateVisibleIndices();
+ }
+ });
+ },
+ {
+ root: null,
+ rootMargin: '500px 0px',
+ threshold: 0.01
+ }
+ );
- return () => clearInterval(timer);
- }, [charts]);
+ placeholderRefs.current.forEach(ref => {
+ if (ref) observerRef.current.observe(ref);
+ });
+
+ const handleScroll = () => {
+ if (cleanupTimeoutRef.current) {
+ clearTimeout(cleanupTimeoutRef.current);
+ }
+
+ cleanupTimeoutRef.current = setTimeout(() => {
+ updateVisibleIndices();
+
+ setVisibleIndices(prev => {
+ const updated = new Set(prev);
+ let changed = false;
+
+ placeholderRefs.current.forEach((ref, index) => {
+ if (ref && isElementFarFromViewport(ref) && prev.has(index)) {
+ updated.delete(index);
+ changed = true;
+ }
+ });
+
+ return changed ? updated : prev;
+ });
+ }, 150);
+ };
+
+ window.addEventListener('scroll', handleScroll, { passive: true });
+ window.addEventListener('resize', updateVisibleIndices, { passive: true });
+
+ updateVisibleIndices();
+
+ return () => {
+ if (cleanupTimeoutRef.current) clearTimeout(cleanupTimeoutRef.current);
+ if (observerRef.current) observerRef.current.disconnect();
+ window.removeEventListener('scroll', handleScroll);
+ window.removeEventListener('resize', updateVisibleIndices);
+ };
+ }, [updateVisibleIndices]);
+
+ const shouldShowChart = (index) => {
+ return visibleIndices.has(index) ||
+ visibleIndices.has(index - 1) ||
+ visibleIndices.has(index + 1);
+ };
return (
- <>
- {visibleCharts.map((chart, idx) => (
- {chart}
+
+ {charts.map((chart, index) => (
+
(placeholderRefs.current[index] = el)}
+ data-index={index}
+ style={{
+ minHeight: '400px',
+ marginBottom: '20px',
+ transition: 'opacity 0.3s ease',
+ }}
+ >
+ {shouldShowChart(index) ? chart : }
+
))}
-
+
-
Общий мониторинг состояния системы
+
Общий мониторинг состояния системы
@@ -17,6 +38,32 @@ const TabContent = ({ activeTab, statusHistories, treeData1, tabContent, handleO
+
+ {/* Контейнер для индикаторов статусов */}
+
+ {Object.entries(statusCounts).map(([status, count]) => (
+
+ {count}
+
+ ))}
+
+
Нет данных
;
}
};
diff --git a/src/Components/hooks/useTabs.jsx b/src/Components/hooks/useTabs.jsx
index 188cdf5..6c403fd 100644
--- a/src/Components/hooks/useTabs.jsx
+++ b/src/Components/hooks/useTabs.jsx
@@ -4,23 +4,43 @@ const useTabs = (initialTab) => {
const [tabs, setTabs] = useState([]);
const [activeTab, setActiveTab] = useState(initialTab);
- const handleOpenTab = useCallback((id, title) => {
- setTabs((prevTabs) =>
- prevTabs.some((tab) => tab.id === id)
- ? prevTabs
- : [...prevTabs, { id, title }]
- );
- setActiveTab(id);
+ const handleOpenTab = useCallback((newTab) => {
+ setTabs((prevTabs) => {
+ const exists = prevTabs.some((tab) => tab.id === newTab.id);
+ if (!exists) {
+ return [...prevTabs, newTab];
+ }
+ return prevTabs;
+ });
+ setActiveTab(newTab.id);
}, []);
const handleCloseTab = useCallback((id) => {
- setTabs((prevTabs) => prevTabs.filter((tab) => tab.id !== id));
- if (activeTab === id) {
- setActiveTab(tabs.length > 1 ? tabs[tabs.length - 2].id : initialTab);
- }
- }, [activeTab, tabs, initialTab]);
+ setTabs((prevTabs) => {
+ const newTabs = prevTabs.filter((tab) => tab.id !== id);
+ if (activeTab === id) {
+ setActiveTab(newTabs.length > 0 ? newTabs[newTabs.length - 1].id : initialTab);
+ }
+ return newTabs;
+ });
+ }, [activeTab, initialTab]);
- return { tabs, activeTab, handleOpenTab, handleCloseTab, setActiveTab };
+ const updateTabContent = useCallback((id, content) => {
+ setTabs(prevTabs =>
+ prevTabs.map(tab =>
+ tab.id === id ? { ...tab, content } : tab
+ )
+ );
+ }, []);
+
+ return {
+ tabs,
+ activeTab,
+ handleOpenTab,
+ handleCloseTab,
+ setActiveTab,
+ updateTabContent
+ };
};
-export default useTabs;
\ No newline at end of file
+export default useTabs;
diff --git a/src/Style/theme.jsx b/src/Style/theme.jsx
index 40c405d..6d33a29 100644
--- a/src/Style/theme.jsx
+++ b/src/Style/theme.jsx
@@ -76,7 +76,7 @@ export const lightTheme = createTheme({
// Фоновые цвета
background: {
- default: "#6CACE4", // Основной фон приложения
+ default: "#FFFFFF", // Основной фон приложения
paper: "#FFFFFF", // Фон "бумажных" поверхностей (карточек, панелей)
},
@@ -139,7 +139,7 @@ export const darkTheme = createTheme({
// Фоновые цвета
background: {
- default: "#1E1E1E", // Основной фон приложения
+ default: "#2d2d2d", // Основной фон приложения
paper: "#2d2d2d", // Фон "бумажных" поверхностей
},
diff --git a/src/assets/images/system_monitor_icon.svg b/src/assets/images/system_monitor_icon.svg
new file mode 100644
index 0000000..ba02f29
--- /dev/null
+++ b/src/assets/images/system_monitor_icon.svg
@@ -0,0 +1,11 @@
+
diff --git a/src/main.jsx b/src/main.jsx
index e373476..b9a1a6d 100755
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -2,8 +2,6 @@ import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
-//import './Style/light-theme.css'; // Подключаем светлую тему по умолчанию
-//import './Style/dark-theme.css'; // Подключаем темную тему
createRoot(document.getElementById('root')).render(