From e47161acd1097f035c5e10084923f0269702c523 Mon Sep 17 00:00:00 2001
From: DmitriyA <faleo1999@mail.ru>
Date: Tue, 22 Apr 2025 08:59:35 -0400
Subject: [PATCH] fixed a bug with collapsing the menu, improved the MUI
 skeleton, fixed several visual bugs

---
 src/App.jsx                                   | 65 +++++++--------
 src/Charts/PrometheusChart.jsx                | 45 ++++++++++-
 src/Components/Layout/Dashboard.jsx           |  7 +-
 src/Components/Layout/SidebarMenu.jsx         |  9 +--
 src/Components/UI/LoginModal.jsx              |  5 +-
 src/Components/UI/TreeTable.jsx               |  2 +-
 src/Components/UI/auth.jsx                    | 27 +++----
 src/Components/hooks/LazyChartBatchRender.jsx | 79 +++++++++++++++----
 src/Style/theme.jsx                           |  2 +-
 9 files changed, 156 insertions(+), 85 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index c2372e5..dfe1af0 100755
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,11 +1,10 @@
 import React, { useState, useMemo, useEffect } from "react";
-import { ThemeProvider, CssBaseline, Switch, Box, CircularProgress } from "@mui/material";
+import { ThemeProvider, CssBaseline, Switch, Box, CircularProgress, Typography } from "@mui/material";
 import Dashboard from "./Components/Layout/Dashboard";
 import LoginModal from "./Components/UI/LoginModal";
 import { lightTheme, darkTheme } from "./Style/theme";
 import Logo from './assets/images/logo.svg?react';
-import { checkAuth } from "./Components/UI/auth"; 
-import axios from 'axios';
+import { checkAuth } from "./Components/UI/auth";
 
 function App() {
     const [authState, setAuthState] = useState({
@@ -24,13 +23,11 @@ function App() {
         const verifyAuth = async () => {
             try {
                 const authStatus = await checkAuth();
-
                 setAuthState({
                     isAuthenticated: authStatus.isAuthenticated,
                     isLoading: false,
                     user: authStatus.user || null
                 });
-
                 setShowLoginModal(!authStatus.isAuthenticated);
             } catch (error) {
                 console.error('Auth verification error:', error);
@@ -42,7 +39,6 @@ function App() {
                 setShowLoginModal(true);
             }
         };
-
         verifyAuth();
     }, []);
 
@@ -57,7 +53,7 @@ function App() {
 
     const handleLogout = async () => {
         try {
-            await axios.get(`${import.meta.env.VITE_BACK_URL}/api/metrics`, {
+            await fetch('http://192.168.2.39:3000/api/auth/logout', {
                 method: 'POST',
                 credentials: 'include'
             });
@@ -73,20 +69,25 @@ function App() {
         }
     };
 
+    // Полноэкранный лоадер во время проверки авторизации
     if (authState.isLoading) {
         return (
             <ThemeProvider theme={theme}>
                 <CssBaseline />
                 <Box sx={{
+                    position: 'fixed',
+                    top: 0, left: 0, right: 0, bottom: 0,
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
-                    height: '100vh',
                     flexDirection: 'column',
-                    gap: 2
+                    zIndex: 9999,
+                    bgcolor: 'background.default'
                 }}>
                     <CircularProgress />
-                    <p>Проверка авторизации...</p>
+                    <Typography sx={{ mt: 2 }}>
+                        Проверка авторизации...
+                    </Typography>
                 </Box>
             </ThemeProvider>
         );
@@ -95,26 +96,20 @@ function App() {
     return (
         <ThemeProvider theme={theme}>
             <CssBaseline />
-            {!authState.isAuthenticated && showLoginModal ? (
+            {!authState.isAuthenticated ? (
                 <>
-                    <Box
-                        component="div"
-                        sx={{
-                            position: "fixed",
-                            top: 24,
-                            left: "50%",
-                            transform: "translateX(-50%)",
-                            zIndex: 1200,
-                            '& svg': {
-                                width: 400,
-                                height: 'auto'
-                            }
-                        }}
-                    >
+                    <Box sx={{
+                        position: "fixed",
+                        top: 24,
+                        left: "50%",
+                        transform: "translateX(-50%)",
+                        zIndex: 1200,
+                        '& svg': { width: 400, height: 'auto' }
+                    }}>
                         <Logo />
                     </Box>
-
                     <LoginModal
+                        open={showLoginModal}
                         onLogin={handleLogin}
                         onClose={() => setShowLoginModal(false)}
                     />
@@ -124,19 +119,15 @@ function App() {
                     display: "flex",
                     height: "100vh",
                     overflow: "hidden",
-                    bgcolor: "background.default",
-                    color: "text.primary"
+                    bgcolor: "background.default"
                 }}>
-                    <Dashboard
-                        user={authState.user}
-                        onLogout={handleLogout}
+                    <Dashboard user={authState.user} onLogout={handleLogout} />
+                    
+                    <Switch
+                        checked={isDarkMode}
+                        onChange={() => setIsDarkMode(!isDarkMode)}
+                        sx={{ position: "absolute", top: 10, right: 10 }}
                     />
-                    <Box sx={{ position: "absolute", top: 10, right: 10 }}>
-                        <Switch
-                            checked={isDarkMode}
-                            onChange={() => setIsDarkMode((prev) => !prev)}
-                        />
-                    </Box>
                 </Box>
             )}
         </ThemeProvider>
diff --git a/src/Charts/PrometheusChart.jsx b/src/Charts/PrometheusChart.jsx
index 420fd75..0b1ae11 100755
--- a/src/Charts/PrometheusChart.jsx
+++ b/src/Charts/PrometheusChart.jsx
@@ -6,6 +6,37 @@ import { ConnectionStatusIndicator } from './Components/ConnectionStatusIndicato
 import { CurrentRangeDisplay } from './Components/CurrentRangeDisplay';
 import { TIME_RANGES, COLORS, SECOND, MINUTE, HOUR, DAY } from './Components/constants';
 import axios from 'axios';
+import Skeleton from '@mui/material/Skeleton';
+import Box from '@mui/material/Box';
+
+
+// Компонент Skeleton для графика
+const ChartSkeleton = () => (
+    <Box sx={{
+        backgroundColor: '#fff',
+        borderRadius: '8px',
+        padding: '20px',
+        marginBottom: '20px',
+        position: 'relative'
+    }}>
+        <Box sx={{ position: 'absolute', right: '20px', top: '20px' }}>
+            <Skeleton variant="circular" width={16} height={16} />
+        </Box>
+
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
+            <Skeleton variant="text" width="40%" height={30} />
+            <Skeleton variant="text" width="30%" height={30} />
+        </Box>
+
+        <Skeleton variant="rectangular" width="100%" height={300} />
+
+        <Box sx={{ display: 'flex', justifyContent: 'center', mt: 2, gap: 2 }}>
+            {[1, 2, 3, 4].map((_, i) => (
+                <Skeleton key={i} variant="rounded" width={80} height={36} />
+            ))}
+        </Box>
+    </Box>
+);
 
 const PrometheusChart = ({ metricName }) => {
     const [chartData, setChartData] = useState(null);
@@ -395,11 +426,21 @@ const PrometheusChart = ({ metricName }) => {
     }, [selectedGraphRange, chartData, interpolateData]);
 
     if (chartData === null) {
-        return <div style={{ padding: '20px', textAlign: 'center' }}>Loading data...</div>;
+        return <ChartSkeleton />;
     }
 
     if (Object.keys(chartData).length === 0) {
-        return <div style={{ padding: '20px', textAlign: 'center' }}>No data available</div>;
+        return (
+            <Box sx={{
+                backgroundColor: '#fff',
+                borderRadius: '8px',
+                padding: '20px',
+                marginBottom: '20px',
+                textAlign: 'center'
+            }}>
+                No data available
+            </Box>
+        );
     }
 
     return (
diff --git a/src/Components/Layout/Dashboard.jsx b/src/Components/Layout/Dashboard.jsx
index 9b66e58..a747672 100755
--- a/src/Components/Layout/Dashboard.jsx
+++ b/src/Components/Layout/Dashboard.jsx
@@ -58,10 +58,11 @@ const Content = styled(Box)(({ theme }) => ({
 
 const Dashboard = () => {
   const { tabs, activeTab, handleOpenTab, handleCloseTab, setActiveTab } = useTabs("Главная");
-  const { sidebarWidth, startResizing } = useSidebarResize(250);
+  const { sidebarWidth, startResizing } = useSidebarResize(290);
   const [tabContent, setTabContent] = useState({});
   const [treeData1, setTreeData1] = useState(menuData);
   const [treeData2, setTreeData2] = useState(menuData);
+  const [collapsed, setCollapsed] = useState(false);
   const [statusHistories, setStatusHistories] = useState({
     history1: [],
     history2: [],
@@ -103,12 +104,14 @@ const Dashboard = () => {
   return (
     <DashboardContainer>
       {/* Сайдбар */}
-      <SidebarWrapper sx={{ width: sidebarWidth }}>
+      <SidebarWrapper sx={{ width: collapsed ? 64 : sidebarWidth }}>
         <SidebarMenu
           data={treeData1}
           onOpenTab={handleOpenTab}
           sidebarWidth={sidebarWidth}
           startResizing={startResizing}
+          collapsed={collapsed}
+          setCollapsed={setCollapsed}
         />
         <SidebarResizer onMouseDown={startResizing} />
       </SidebarWrapper>
diff --git a/src/Components/Layout/SidebarMenu.jsx b/src/Components/Layout/SidebarMenu.jsx
index 7efd192..98e7962 100644
--- a/src/Components/Layout/SidebarMenu.jsx
+++ b/src/Components/Layout/SidebarMenu.jsx
@@ -32,8 +32,7 @@ const SidebarResizer = styled('div')(({ theme }) => ({
     zIndex: 2
 }));
 
-const SidebarMenu = ({ data, onOpenTab, sidebarWidth, startResizing }) => {
-    const [collapsed, setCollapsed] = useState(false);
+const SidebarMenu = ({ data, onOpenTab, sidebarWidth, startResizing, collapsed, setCollapsed }) => {
     const [hovered, setHovered] = useState(false);
     const [menuData, setMenuData] = useState(data);
 
@@ -105,11 +104,7 @@ const SidebarMenu = ({ data, onOpenTab, sidebarWidth, startResizing }) => {
                                 }
                             }}
                         >
-                            {collapsed ? (
-                                hovered ? <ChevronRight /> : <MenuIcon />
-                            ) : (
-                                <ChevronLeft />
-                            )}
+                            {collapsed ? <ChevronRight /> : <ChevronLeft />}
                         </IconButton>
                     </Tooltip>
                 </Box>
diff --git a/src/Components/UI/LoginModal.jsx b/src/Components/UI/LoginModal.jsx
index d38d7b7..22559d6 100755
--- a/src/Components/UI/LoginModal.jsx
+++ b/src/Components/UI/LoginModal.jsx
@@ -17,8 +17,7 @@ const LoginModal = ({ onLogin, onClose }) => {
     e.preventDefault();
 
     try {
-      const response = await axios.post(
-        `${import.meta.env.VITE_BACK_URL}/api/auth/login`, {
+      const response = await fetch('http://192.168.2.39:3000/api/auth/login', {
         method: 'POST',
         credentials: 'include',
         headers: {
@@ -31,7 +30,7 @@ const LoginModal = ({ onLogin, onClose }) => {
 
       if (data.success) {
         localStorage.setItem('access_token', data.access_token);
-        onLogin(data.user); // Передаем данные пользователя
+        onLogin(data.user); 
         onClose();
       } else {
         setError(data.message || "Неверный логин или пароль");
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 }) => {
                     </Typography>
                     <Box component="ul" sx={{
                         pl: 2,
-                        maxHeight: 200,
+                        maxHeight: 400,
                         overflow: 'auto',
                         listStyle: 'none'
                     }}>
diff --git a/src/Components/UI/auth.jsx b/src/Components/UI/auth.jsx
index 7532538..6d3699c 100644
--- a/src/Components/UI/auth.jsx
+++ b/src/Components/UI/auth.jsx
@@ -2,24 +2,21 @@ import axios from 'axios';
 
 export const checkAuth = async () => {
   try {
-    const response = await axios.get(
-      `${import.meta.env.VITE_BACK_URL}/api/auth/check`,
-      {
-        withCredentials: true, // аналог `credentials: 'include'` в fetch
+    const response = await fetch('http://192.168.2.39:3000/api/auth/check', {
+        method: 'GET',
+        credentials: 'include', // Важно для отправки cookies
         headers: {
-          Authorization: `Bearer ${localStorage.getItem('access_token') || ''}`,
+            'Authorization': `Bearer ${localStorage.getItem('access_token') || ''}`,
         },
-      }
-    );
+    });
 
-    // У axios нет свойства .ok, проверяем статус 200-299
-    if (response.status >= 200 && response.status < 300) {
-      return response.data; // Данные уже в JSON, не нужно .json()
-    } else {
+    if (!response.ok) {
       throw new Error('Not authenticated');
-    }
-  } catch (err) {
-    console.error('Auth check failed:', err);
-    return { isAuthenticated: false };
+  }
+
+  return await response.json();
+} 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..d9f1dca 100644
--- a/src/Components/hooks/LazyChartBatchRender.jsx
+++ b/src/Components/hooks/LazyChartBatchRender.jsx
@@ -1,28 +1,73 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } 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 ChartSkeleton = () => (
+    <Box sx={{ backgroundColor: '#fff', borderRadius: '8px', padding: '20px', marginBottom: '20px', position: 'relative', height: '500px' }}>
+      <Box sx={{ position: 'absolute', right: '20px', top: '20px' }}>
+        <Skeleton variant="circular" width={16} height={16} />
+      </Box>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
+        <Skeleton variant="text" width="40%" height={30} />
+        <Skeleton variant="text" width="30%" height={30} />
+      </Box>
+      <Skeleton variant="rectangular" width="100%" height={300} />
+      <Box sx={{ display: 'flex', justifyContent: 'center', mt: 2, gap: 2 }}>
+        {[1, 2, 3, 4].map((_, i) => (
+          <Skeleton key={i} variant="rounded" width={80} height={36} />
+        ))}
+      </Box>
+    </Box>
+  );
 
   useEffect(() => {
-    let index = 0;
-    const timer = setInterval(() => {
-      setVisibleCharts((prev) => [
-        ...prev,
-        ...charts.slice(index, index + batchSize),
-      ]);
-      index += batchSize;
-      if (index >= charts.length) clearInterval(timer);
-    }, delay);
+    const observer = new IntersectionObserver(
+      (entries) => {
+        setVisibleIndices((prev) => {
+          const updated = new Set(prev);
+          entries.forEach((entry) => {
+            const index = parseInt(entry.target.dataset.index, 10);
+            if (entry.isIntersecting) {
+              updated.add(index);
+            } else {
+              updated.delete(index);
+            }
+          });
+          return updated;
+        });
+      },
+      {
+        root: null,
+        rootMargin: '200px',
+        threshold: 0.1,
+      }
+    );
 
-    return () => clearInterval(timer);
+    placeholderRefs.current.forEach((ref) => {
+      if (ref) observer.observe(ref);
+    });
+
+    return () => {
+      observer.disconnect();
+    };
   }, [charts]);
 
   return (
-    <>
-      {visibleCharts.map((chart, idx) => (
-        <div key={idx}>{chart}</div>
+    <div>
+      {charts.map((chart, index) => (
+        <div
+          key={index}
+          ref={(el) => (placeholderRefs.current[index] = el)}
+          data-index={index}
+        >
+          {visibleIndices.has(index) ? chart : <ChartSkeleton />}
+        </div>
       ))}
-    </>
+    </div>
   );
 };
 
diff --git a/src/Style/theme.jsx b/src/Style/theme.jsx
index 017bc36..6d33a29 100644
--- a/src/Style/theme.jsx
+++ b/src/Style/theme.jsx
@@ -139,7 +139,7 @@ export const darkTheme = createTheme({
 
         // Фоновые цвета
         background: {
-            default: "#1E1E1E", // Основной фон приложения
+            default: "#2d2d2d", // Основной фон приложения
             paper: "#2d2d2d",   // Фон "бумажных" поверхностей
         },