Route guards, WS lifecycle, ticket stats. Refs EventHub/EventHubFrontAdmin#3
This commit is contained in:
@@ -0,0 +1,16 @@
|
||||
#!/usr/bin/env bash
|
||||
set -euo pipefail
|
||||
|
||||
if [ $# -lt 2 ]; then
|
||||
echo "Usage: git-commit.sh message paths..." >&2
|
||||
exit 1
|
||||
fi
|
||||
|
||||
MSG=$1
|
||||
shift
|
||||
REPO_ROOT=$(cd "$(dirname "$0")/.." && pwd)
|
||||
cd "$REPO_ROOT"
|
||||
|
||||
git add "$@"
|
||||
/usr/bin/git commit -m "$MSG"
|
||||
git log -1 --oneline
|
||||
+26
-4
@@ -3,12 +3,16 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { Spin } from 'antd';
|
||||
import ProtectedRoute from './components/ProtectedRoute';
|
||||
import RoleGuard from './components/RoleGuard';
|
||||
import AdminLayout from './layouts/AdminLayout';
|
||||
import LoginPage from './pages/auth/LoginPage';
|
||||
import ProfilePage from './pages/profile/ProfilePage';
|
||||
import DashboardPage from './pages/dashboard/DashboardPage';
|
||||
import MonitoringPage from './pages/monitoring/MonitoringPage';
|
||||
import UserListPage from './pages/users/UserListPage';
|
||||
import UserDetailPage from './pages/users/UserDetailPage';
|
||||
import CalendarListPage from './pages/calendars/CalendarListPage';
|
||||
import CalendarDetailPage from './pages/calendars/CalendarDetailPage';
|
||||
import EventListPage from './pages/events/EventListPage';
|
||||
import EventDetailPage from './pages/events/EventDetailPage';
|
||||
import ReportListPage from './pages/reports/ReportListPage';
|
||||
@@ -48,26 +52,44 @@ const App: React.FC = () => {
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
<Route element={<ProtectedRoute />}>
|
||||
<Route element={<AdminLayout />}>
|
||||
<Route path="/" element={<Navigate to="/dashboard" />} />
|
||||
<Route path="/profile" element={<ProfilePage />} />
|
||||
<Route path="/" element={<Navigate to="/dashboard" replace />} />
|
||||
|
||||
<Route element={<RoleGuard />}>
|
||||
<Route path="/dashboard" element={<DashboardPage />} />
|
||||
<Route path="/profile" element={<ProfilePage />} />
|
||||
<Route path="/monitoring" element={<MonitoringPage />} />
|
||||
</Route>
|
||||
|
||||
<Route element={<RoleGuard allowedRoles={['superadmin', 'admin']} />}>
|
||||
<Route path="/users" element={<UserListPage />} />
|
||||
<Route path="/users/:id" element={<UserDetailPage />} />
|
||||
<Route path="/calendars" element={<CalendarListPage />} />
|
||||
<Route path="/calendars/:id" element={<CalendarDetailPage />} />
|
||||
<Route path="/events" element={<EventListPage />} />
|
||||
<Route path="/events/:id" element={<EventDetailPage />} />
|
||||
<Route path="/banned-words" element={<BannedWordsPage />} />
|
||||
<Route path="/subscriptions" element={<SubscriptionListPage />} />
|
||||
</Route>
|
||||
|
||||
<Route element={<RoleGuard allowedRoles={['superadmin', 'admin', 'moderator']} />}>
|
||||
<Route path="/reports" element={<ReportListPage />} />
|
||||
<Route path="/reports/:id" element={<ReportDetailPage />} />
|
||||
<Route path="/reviews" element={<ReviewListPage />} />
|
||||
<Route path="/reviews/:id" element={<ReviewDetailPage />} />
|
||||
<Route path="/banned-words" element={<BannedWordsPage />} />
|
||||
</Route>
|
||||
|
||||
<Route element={<RoleGuard allowedRoles={['superadmin', 'admin', 'support']} />}>
|
||||
<Route path="/tickets" element={<TicketListPage />} />
|
||||
<Route path="/tickets/:id" element={<TicketDetailPage />} />
|
||||
<Route path="/subscriptions" element={<SubscriptionListPage />} />
|
||||
</Route>
|
||||
|
||||
<Route element={<RoleGuard allowedRoles={['superadmin']} />}>
|
||||
<Route path="/admins" element={<AdminListPage />} />
|
||||
<Route path="/admins/:id" element={<AdminDetailPage />} />
|
||||
<Route path="/audit" element={<AuditPage />} />
|
||||
</Route>
|
||||
</Route>
|
||||
</Route>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</QueryClientProvider>
|
||||
|
||||
@@ -2,6 +2,7 @@ import React from 'react';
|
||||
import { Navigate, Outlet } from 'react-router-dom';
|
||||
import { Spin } from 'antd';
|
||||
import { useAuthStore } from '../store/authStore';
|
||||
import ForbiddenPage from '../pages/errors/ForbiddenPage';
|
||||
|
||||
interface Props {
|
||||
allowedRoles?: string[];
|
||||
@@ -23,7 +24,7 @@ const ProtectedRoute: React.FC<Props> = ({ allowedRoles }) => {
|
||||
}
|
||||
|
||||
if (allowedRoles && user && !allowedRoles.includes(user.role)) {
|
||||
return <Navigate to="/dashboard" replace />;
|
||||
return <ForbiddenPage />;
|
||||
}
|
||||
|
||||
return <Outlet />;
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
import React from 'react';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import { useAuthStore } from '../store/authStore';
|
||||
import ForbiddenPage from '../pages/errors/ForbiddenPage';
|
||||
import type { AdminRole } from '../config/adminAccess';
|
||||
|
||||
interface Props {
|
||||
allowedRoles?: AdminRole[];
|
||||
}
|
||||
|
||||
/** Ограничение вложенных маршрутов по роли (после аутентификации). */
|
||||
const RoleGuard: React.FC<Props> = ({ allowedRoles }) => {
|
||||
const user = useAuthStore((s) => s.user);
|
||||
|
||||
if (allowedRoles && user && !allowedRoles.includes(user.role as AdminRole)) {
|
||||
return <ForbiddenPage />;
|
||||
}
|
||||
|
||||
return <Outlet />;
|
||||
};
|
||||
|
||||
export default RoleGuard;
|
||||
@@ -0,0 +1,54 @@
|
||||
/** Роли доступа к разделам админки (согласовано с меню и маршрутами). */
|
||||
export type AdminRole = 'superadmin' | 'admin' | 'moderator' | 'support';
|
||||
|
||||
export const ROUTE_ACCESS: Record<string, AdminRole[] | undefined> = {
|
||||
'/dashboard': undefined,
|
||||
'/profile': undefined,
|
||||
'/monitoring': undefined,
|
||||
'/users': ['superadmin', 'admin'],
|
||||
'/calendars': ['superadmin', 'admin'],
|
||||
'/events': ['superadmin', 'admin'],
|
||||
'/reports': ['superadmin', 'admin', 'moderator'],
|
||||
'/reviews': ['superadmin', 'admin', 'moderator'],
|
||||
'/banned-words': ['superadmin', 'admin'],
|
||||
'/tickets': ['superadmin', 'admin', 'support'],
|
||||
'/subscriptions': ['superadmin', 'admin'],
|
||||
'/admins': ['superadmin'],
|
||||
'/audit': ['superadmin'],
|
||||
};
|
||||
|
||||
export const MENU_ITEMS: Array<{
|
||||
key: string;
|
||||
label: string;
|
||||
roles?: AdminRole[];
|
||||
}> = [
|
||||
{ key: '/dashboard', label: 'Дашборд' },
|
||||
{ key: '/users', label: 'Пользователи', roles: ['superadmin', 'admin'] },
|
||||
{ key: '/calendars', label: 'Календари', roles: ['superadmin', 'admin'] },
|
||||
{ key: '/events', label: 'События', roles: ['superadmin', 'admin'] },
|
||||
{ key: '/reports', label: 'Жалобы', roles: ['superadmin', 'admin', 'moderator'] },
|
||||
{ key: '/reviews', label: 'Отзывы', roles: ['superadmin', 'admin', 'moderator'] },
|
||||
{ key: '/banned-words', label: 'Бан-слова', roles: ['superadmin', 'admin'] },
|
||||
{ key: '/tickets', label: 'Тикеты', roles: ['superadmin', 'admin', 'support'] },
|
||||
{ key: '/subscriptions', label: 'Подписки', roles: ['superadmin', 'admin'] },
|
||||
{ key: '/admins', label: 'Администраторы', roles: ['superadmin'] },
|
||||
{ key: '/audit', label: 'Аудит', roles: ['superadmin'] },
|
||||
{ key: '/monitoring', label: 'Мониторинг' },
|
||||
];
|
||||
|
||||
export function canAccessRoute(pathname: string, role: string | undefined): boolean {
|
||||
if (!role) return false;
|
||||
const base = pathname.split('/').slice(0, 2).join('/') || '/';
|
||||
const allowed = ROUTE_ACCESS[base];
|
||||
if (allowed === undefined) {
|
||||
return ROUTE_ACCESS[pathname] === undefined || ROUTE_ACCESS[pathname]!.includes(role as AdminRole);
|
||||
}
|
||||
return allowed.includes(role as AdminRole);
|
||||
}
|
||||
|
||||
export function filterMenuByRole<T extends { roles?: AdminRole[] }>(
|
||||
items: T[],
|
||||
role: string | undefined
|
||||
): T[] {
|
||||
return items.filter((item) => !item.roles || (role && item.roles.includes(role as AdminRole)));
|
||||
}
|
||||
@@ -1,16 +1,11 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { useAuthStore } from '../store/authStore';
|
||||
import { useMetricsStore } from '../store/metricsStore';
|
||||
|
||||
type WsMessage = {
|
||||
type: 'report_created' | 'ticket_created';
|
||||
data?: {
|
||||
report_id?: string;
|
||||
ticket_id?: string;
|
||||
target_type?: string;
|
||||
target_id?: string;
|
||||
reason?: string;
|
||||
};
|
||||
type: 'report_created' | 'ticket_created' | 'node_metric';
|
||||
data?: any;
|
||||
status?: string;
|
||||
channel?: string;
|
||||
timestamp?: number;
|
||||
@@ -20,24 +15,65 @@ export const useAdminWebSocket = () => {
|
||||
const queryClient = useQueryClient();
|
||||
const accessToken = useAuthStore((s) => s.accessToken);
|
||||
const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
|
||||
const setCurrentMetric = useMetricsStore((s) => s.setCurrent);
|
||||
const addToAllHistory = useMetricsStore((s) => s.addToAllHistory);
|
||||
|
||||
const wsRef = useRef<WebSocket | null>(null);
|
||||
const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const pingIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
const lastMessageTimestamp = useRef<number>(0);
|
||||
const wsRef = useRef<WebSocket | null>(null);
|
||||
const shouldReconnectRef = useRef(true);
|
||||
|
||||
const clearTimers = () => {
|
||||
if (reconnectTimeoutRef.current) {
|
||||
clearTimeout(reconnectTimeoutRef.current);
|
||||
reconnectTimeoutRef.current = null;
|
||||
}
|
||||
if (pingIntervalRef.current) {
|
||||
clearInterval(pingIntervalRef.current);
|
||||
pingIntervalRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
const closeSocket = () => {
|
||||
clearTimers();
|
||||
if (wsRef.current) {
|
||||
wsRef.current.onclose = null;
|
||||
wsRef.current.onerror = null;
|
||||
wsRef.current.onmessage = null;
|
||||
wsRef.current.onopen = null;
|
||||
if (wsRef.current.readyState === WebSocket.OPEN ||
|
||||
wsRef.current.readyState === WebSocket.CONNECTING) {
|
||||
wsRef.current.close();
|
||||
}
|
||||
wsRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!isAuthenticated || !accessToken) return;
|
||||
if (!isAuthenticated || !accessToken) {
|
||||
shouldReconnectRef.current = false;
|
||||
closeSocket();
|
||||
return;
|
||||
}
|
||||
|
||||
shouldReconnectRef.current = true;
|
||||
let isMounted = true;
|
||||
|
||||
const connect = () => {
|
||||
if (!isMounted || !shouldReconnectRef.current) return;
|
||||
|
||||
closeSocket();
|
||||
|
||||
const wsUrl = import.meta.env.DEV
|
||||
? `ws://localhost:5173/admin/ws?token=${accessToken}`
|
||||
: `wss://${window.location.host}/admin/ws?token=${accessToken}`;
|
||||
|
||||
const ws = new WebSocket(wsUrl);
|
||||
wsRef.current = ws;
|
||||
|
||||
ws.onopen = () => {
|
||||
if (!isMounted) return;
|
||||
if (!isMounted || !shouldReconnectRef.current) return;
|
||||
console.log('[WS] Connected');
|
||||
ws.send(JSON.stringify({ action: 'subscribe', channel: 'reports' }));
|
||||
ws.send(JSON.stringify({ action: 'subscribe', channel: 'tickets' }));
|
||||
@@ -72,29 +108,36 @@ export const useAdminWebSocket = () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['tickets'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['ticket-stats'] });
|
||||
}
|
||||
} else if (msg.type === 'node_metric') {
|
||||
setCurrentMetric(msg.data);
|
||||
addToAllHistory(msg.data);
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('[WS] Failed to parse message:', e);
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
if (!isMounted) return;
|
||||
console.log('[WS] Disconnected, will reconnect in 5s');
|
||||
if (pingIntervalRef.current) clearInterval(pingIntervalRef.current);
|
||||
ws.onclose = (event) => {
|
||||
if (!isMounted || !shouldReconnectRef.current) return;
|
||||
console.log('[WS] Disconnected:', event.reason);
|
||||
clearTimers();
|
||||
wsRef.current = null;
|
||||
reconnectTimeoutRef.current = setTimeout(connect, 5000);
|
||||
};
|
||||
|
||||
// Не вызываем ws.close() при ошибке, браузер закроет сокет сам
|
||||
ws.onerror = (error) => {
|
||||
if (!isMounted) return;
|
||||
console.error('[WS] Error:', error);
|
||||
ws.close();
|
||||
};
|
||||
};
|
||||
|
||||
connect();
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
if (reconnectTimeoutRef.current) clearTimeout(reconnectTimeoutRef.current);
|
||||
if (pingIntervalRef.current) clearInterval(pingIntervalRef.current);
|
||||
// Никакого принудительного закрытия wsRef.current – браузер сам управится
|
||||
shouldReconnectRef.current = false;
|
||||
closeSocket();
|
||||
};
|
||||
}, [isAuthenticated, accessToken, queryClient]);
|
||||
}, [isAuthenticated, accessToken, queryClient, setCurrentMetric, addToAllHistory]);
|
||||
};
|
||||
+126
-63
@@ -1,8 +1,9 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Layout, Menu, Button, theme, notification, Avatar, Dropdown, Space, Typography, Badge } from 'antd';
|
||||
import { Layout, Menu, Button, theme, notification, Avatar, Dropdown, Space, Typography, Badge, Tooltip, Progress } from 'antd';
|
||||
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
|
||||
import { useAuthStore } from '../store/authStore';
|
||||
import { useAdminWebSocket } from '../hooks/useAdminWebSocket';
|
||||
import { useMetricsStore } from '../store/metricsStore';
|
||||
import {
|
||||
DashboardOutlined,
|
||||
UserOutlined,
|
||||
@@ -18,11 +19,16 @@ import {
|
||||
SettingOutlined,
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
CloudServerOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import dayjs from 'dayjs';
|
||||
import { MENU_ITEMS, filterMenuByRole } from '../config/adminAccess';
|
||||
|
||||
const { Header, Sider, Content } = Layout;
|
||||
const { Text } = Typography;
|
||||
|
||||
const NODE_STATS_THRESHOLD = 5;
|
||||
|
||||
const AdminLayout: React.FC = () => {
|
||||
useAdminWebSocket();
|
||||
const navigate = useNavigate();
|
||||
@@ -31,7 +37,10 @@ const AdminLayout: React.FC = () => {
|
||||
const { token: { colorBgContainer } } = theme.useToken();
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
|
||||
// Обработка WebSocket-уведомлений
|
||||
const allHistory = useMetricsStore((s) => s.allHistory);
|
||||
const current = useMetricsStore((s) => s.current);
|
||||
const previous = useMetricsStore((s) => s.previous);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (event: CustomEvent) => {
|
||||
const msg = event.detail;
|
||||
@@ -43,34 +52,16 @@ const AdminLayout: React.FC = () => {
|
||||
<span>
|
||||
Жалоба{' '}
|
||||
{report_id ? (
|
||||
<a
|
||||
href={`/reports/${report_id}`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
navigate(`/reports/${report_id}`);
|
||||
}}
|
||||
style={{ fontWeight: 600 }}
|
||||
>
|
||||
<a href={`/reports/${report_id}`} onClick={(e) => { e.preventDefault(); navigate(`/reports/${report_id}`); }} style={{ fontWeight: 600 }}>
|
||||
#{report_id}
|
||||
</a>
|
||||
) : (
|
||||
'#?'
|
||||
)}{' '}
|
||||
) : ('#?')}{' '}
|
||||
на {target_type || 'неизвестный тип'}{' '}
|
||||
{target_id ? (
|
||||
<a
|
||||
href={`/${target_type}s/${target_id}`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
navigate(`/${target_type}s/${target_id}`);
|
||||
}}
|
||||
style={{ fontWeight: 600 }}
|
||||
>
|
||||
<a href={`/${target_type}s/${target_id}`} onClick={(e) => { e.preventDefault(); navigate(`/${target_type}s/${target_id}`); }} style={{ fontWeight: 600 }}>
|
||||
{target_id}
|
||||
</a>
|
||||
) : (
|
||||
'?'
|
||||
)}{' '}
|
||||
) : ('?')}{' '}
|
||||
{reason ? `(${reason})` : ''}
|
||||
</span>
|
||||
),
|
||||
@@ -84,19 +75,10 @@ const AdminLayout: React.FC = () => {
|
||||
<span>
|
||||
Тикет{' '}
|
||||
{ticket_id ? (
|
||||
<a
|
||||
href={`/tickets/${ticket_id}`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
navigate(`/tickets/${ticket_id}`);
|
||||
}}
|
||||
style={{ fontWeight: 600 }}
|
||||
>
|
||||
<a href={`/tickets/${ticket_id}`} onClick={(e) => { e.preventDefault(); navigate(`/tickets/${ticket_id}`); }} style={{ fontWeight: 600 }}>
|
||||
#{ticket_id}
|
||||
</a>
|
||||
) : (
|
||||
'без ID'
|
||||
)}{' '}
|
||||
) : ('без ID')}{' '}
|
||||
создан
|
||||
</span>
|
||||
),
|
||||
@@ -104,27 +86,52 @@ const AdminLayout: React.FC = () => {
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('admin-ws-message', handler as EventListener);
|
||||
return () => window.removeEventListener('admin-ws-message', handler as EventListener);
|
||||
}, [navigate]);
|
||||
|
||||
const menuItems = [
|
||||
{ key: '/dashboard', icon: <DashboardOutlined />, label: 'Дашборд' },
|
||||
{ key: '/users', icon: <UserOutlined />, label: 'Пользователи', roles: ['superadmin', 'admin'] },
|
||||
{ key: '/events', icon: <CalendarOutlined />, label: 'События', roles: ['superadmin', 'admin'] },
|
||||
{ key: '/reports', icon: <WarningOutlined />, label: 'Жалобы', roles: ['superadmin', 'admin', 'moderator'] },
|
||||
{ key: '/reviews', icon: <StarOutlined />, label: 'Отзывы', roles: ['superadmin', 'admin', 'moderator'] },
|
||||
{ key: '/banned-words', icon: <StopOutlined />, label: 'Бан-слова', roles: ['superadmin', 'admin'] },
|
||||
{ key: '/tickets', icon: <BugOutlined />, label: 'Тикеты', roles: ['superadmin', 'admin', 'support'] },
|
||||
{ key: '/subscriptions', icon: <DollarOutlined />, label: 'Подписки', roles: ['superadmin', 'admin'] },
|
||||
{ key: '/admins', icon: <TeamOutlined />, label: 'Администраторы', roles: ['superadmin'] },
|
||||
{ key: '/audit', icon: <AuditOutlined />, label: 'Аудит', roles: ['superadmin'] },
|
||||
];
|
||||
const onlineNodes = React.useMemo(() => {
|
||||
const cutoff = dayjs().subtract(NODE_STATS_THRESHOLD, 'minute');
|
||||
const recentMetrics = allHistory.filter(m => dayjs(m.timestamp).isAfter(cutoff));
|
||||
const nodes = new Set(recentMetrics.map(m => m.node));
|
||||
return Array.from(nodes);
|
||||
}, [allHistory]);
|
||||
|
||||
const filteredMenu = menuItems.filter(
|
||||
(item) => !item.roles || (user && item.roles.includes(user.role))
|
||||
);
|
||||
const latestByNode = React.useMemo(() => {
|
||||
const map = new Map<string, typeof current>();
|
||||
const recent = allHistory.slice(-1000);
|
||||
for (let i = recent.length - 1; i >= 0; i--) {
|
||||
const m = recent[i];
|
||||
if (!map.has(m.node)) {
|
||||
map.set(m.node, m);
|
||||
}
|
||||
}
|
||||
return map;
|
||||
}, [allHistory]);
|
||||
|
||||
const menuIconByKey: Record<string, React.ReactNode> = {
|
||||
'/dashboard': <DashboardOutlined />,
|
||||
'/users': <UserOutlined />,
|
||||
'/calendars': <CalendarOutlined />,
|
||||
'/events': <CalendarOutlined />,
|
||||
'/reports': <WarningOutlined />,
|
||||
'/reviews': <StarOutlined />,
|
||||
'/banned-words': <StopOutlined />,
|
||||
'/tickets': <BugOutlined />,
|
||||
'/subscriptions': <DollarOutlined />,
|
||||
'/admins': <TeamOutlined />,
|
||||
'/audit': <AuditOutlined />,
|
||||
'/monitoring': <CloudServerOutlined />,
|
||||
};
|
||||
|
||||
const menuItems = MENU_ITEMS.map((item) => ({
|
||||
key: item.key,
|
||||
icon: menuIconByKey[item.key],
|
||||
label: item.label,
|
||||
roles: item.roles,
|
||||
}));
|
||||
|
||||
const filteredMenu = filterMenuByRole(menuItems, user?.role);
|
||||
|
||||
const handleLogout = async () => {
|
||||
await logout();
|
||||
@@ -139,6 +146,60 @@ const AdminLayout: React.FC = () => {
|
||||
return user?.id ?? '—';
|
||||
};
|
||||
|
||||
const NodeIndicator: React.FC<{ node: string; stats: any; prevStats?: any }> = ({ node, stats, prevStats }) => {
|
||||
const cpu = stats?.cpu_utilization ?? 0;
|
||||
const totalMemory = (stats?.memory_total ?? 0) + (stats?.memory_available ?? 0);
|
||||
const usedMemory = stats?.memory_total ?? 0;
|
||||
const memoryPercent = totalMemory > 0 ? (usedMemory / totalMemory) * 100 : 0;
|
||||
|
||||
const prevCpu = prevStats?.cpu_utilization;
|
||||
const prevTotal = (prevStats?.memory_total ?? 0) + (prevStats?.memory_available ?? 0);
|
||||
const prevUsed = prevStats?.memory_total ?? 0;
|
||||
const prevMemoryPercent = prevTotal > 0 ? (prevUsed / prevTotal) * 100 : null;
|
||||
|
||||
const cpuColor = cpu > 80 ? '#ff4d4f' : '#52c41a';
|
||||
const memColor = memoryPercent > 80 ? '#ff4d4f' : '#1890ff';
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
title={
|
||||
<div>
|
||||
<div>{node}</div>
|
||||
<div>CPU: {cpu.toFixed(1)}% {prevCpu !== undefined ? `(было ${prevCpu.toFixed(1)}%)` : ''}</div>
|
||||
<div>Память: {(usedMemory / 1048576).toFixed(0)} / {(totalMemory / 1048576).toFixed(0)} МБ ({memoryPercent.toFixed(1)}%)
|
||||
{prevMemoryPercent !== null ? ` (было ${prevMemoryPercent.toFixed(1)}%)` : ''}</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div style={{ position: 'relative', width: 48, height: 48, marginRight: 12 }}>
|
||||
<Progress
|
||||
type="circle"
|
||||
percent={memoryPercent}
|
||||
format={() => ''}
|
||||
size={48}
|
||||
strokeColor={memColor}
|
||||
railColor="#f0f0f0"
|
||||
strokeWidth={6}
|
||||
style={{ position: 'absolute', top: 0, left: 0 }}
|
||||
/>
|
||||
<Progress
|
||||
type="circle"
|
||||
percent={cpu}
|
||||
format={() => ''}
|
||||
size={32}
|
||||
strokeColor={cpuColor}
|
||||
railColor="#f0f0f0"
|
||||
strokeWidth={6}
|
||||
style={{ position: 'absolute', top: 8, left: 8 }}
|
||||
/>
|
||||
<div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', fontSize: 10, fontWeight: 600 }}>
|
||||
{cpu.toFixed(0)}%
|
||||
</div>
|
||||
</div>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout style={{ minHeight: '100vh' }}>
|
||||
<Sider
|
||||
@@ -147,11 +208,10 @@ const AdminLayout: React.FC = () => {
|
||||
onCollapse={setCollapsed}
|
||||
trigger={null}
|
||||
style={{
|
||||
position: 'relative', // чтобы абсолютный блок считался от него
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100vh',
|
||||
// position: 'sticky',
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
left: 0,
|
||||
}}
|
||||
@@ -169,21 +229,17 @@ const AdminLayout: React.FC = () => {
|
||||
flex: 1,
|
||||
overflowY: 'auto',
|
||||
overflowX: 'hidden',
|
||||
marginBottom: 60, // отступ, чтобы меню не заходило под нижний блок
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: collapsed ? 'center' : 'space-between',
|
||||
padding: '12px 24px',
|
||||
borderTop: '1px solid rgba(255,255,255,0.1)',
|
||||
background: '#001529', // цвет сайдбара Ant Design
|
||||
background: 'rgba(0,0,0,0.1)',
|
||||
marginTop: 'auto',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
@@ -236,7 +292,6 @@ const AdminLayout: React.FC = () => {
|
||||
)}
|
||||
</Button>
|
||||
</Dropdown>
|
||||
|
||||
<Button
|
||||
type="text"
|
||||
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
||||
@@ -264,9 +319,17 @@ const AdminLayout: React.FC = () => {
|
||||
}}
|
||||
>
|
||||
<Space size="large">
|
||||
<Badge status="success" text="Онлайн: 12" />
|
||||
<Badge status="processing" text="Заказов сегодня: 5" />
|
||||
<Badge status="warning" text="Тикетов: 2" />
|
||||
<Tooltip title={`Онлайн-ноды: ${onlineNodes.join(', ')}`}>
|
||||
<Badge
|
||||
status="processing"
|
||||
text={`Ноды: ${onlineNodes.length}`}
|
||||
/>
|
||||
</Tooltip>
|
||||
{onlineNodes.map(node => {
|
||||
const stats = latestByNode.get(node);
|
||||
const prevStats = previous?.node === node ? previous : undefined;
|
||||
return <NodeIndicator key={node} node={node} stats={stats} prevStats={prevStats} />;
|
||||
})}
|
||||
</Space>
|
||||
<div>{/* Резерв */}</div>
|
||||
</Header>
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
import { Button, Result } from 'antd';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const ForbiddenPage: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<Result
|
||||
status="403"
|
||||
title="403"
|
||||
subTitle="У вас нет доступа к этому разделу."
|
||||
extra={
|
||||
<Button type="primary" onClick={() => navigate('/dashboard')}>
|
||||
На дашборд
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default ForbiddenPage;
|
||||
@@ -116,26 +116,36 @@ const TicketListPage: React.FC = () => {
|
||||
<h2>Тикеты</h2>
|
||||
{stats && (
|
||||
<Row gutter={16} style={{ marginBottom: 16 }}>
|
||||
<Col xs={12} sm={6}>
|
||||
<Col xs={12} sm={6} md={4}>
|
||||
<Card>
|
||||
<Statistic title="Открыто" value={stats.open} prefix={<BugOutlined />} styles={{ content: { color: 'red' } }} />
|
||||
<Statistic title="Всего тикетов" value={stats.total_tickets} prefix={<BugOutlined />} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={12} sm={6}>
|
||||
<Col xs={12} sm={6} md={4}>
|
||||
<Card>
|
||||
<Statistic title="Открыто" value={stats.open} styles={{ content: { color: 'red' } }} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={12} sm={6} md={4}>
|
||||
<Card>
|
||||
<Statistic title="В работе" value={stats.in_progress} prefix={<ClockCircleOutlined />} styles={{ content: { color: 'blue' } }} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={12} sm={6}>
|
||||
<Col xs={12} sm={6} md={4}>
|
||||
<Card>
|
||||
<Statistic title="Решено" value={stats.resolved} prefix={<CheckCircleOutlined />} styles={{ content: { color: 'green' } }} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={12} sm={6}>
|
||||
<Col xs={12} sm={6} md={4}>
|
||||
<Card>
|
||||
<Statistic title="Закрыто" value={stats.closed} prefix={<CloseCircleOutlined />} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={12} sm={6} md={4}>
|
||||
<Card>
|
||||
<Statistic title="Всего ошибок" value={stats.total_errors} />
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
)}
|
||||
<Table
|
||||
|
||||
@@ -2,6 +2,7 @@ import { create } from 'zustand';
|
||||
import { Admin } from '../types/api';
|
||||
import { authApi } from '../api/authApi';
|
||||
import { ACCESS_TOKEN_KEY, REFRESH_TOKEN_KEY } from '../utils/constants';
|
||||
import { useMetricsStore } from './metricsStore';
|
||||
|
||||
interface AuthState {
|
||||
user: Admin | null;
|
||||
@@ -37,6 +38,7 @@ export const useAuthStore = create<AuthState>((set) => ({
|
||||
logout: async () => {
|
||||
localStorage.removeItem(ACCESS_TOKEN_KEY);
|
||||
localStorage.removeItem(REFRESH_TOKEN_KEY);
|
||||
useMetricsStore.getState().reset();
|
||||
set({
|
||||
user: null,
|
||||
accessToken: null,
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
import { create } from 'zustand';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
export interface NodeMetric {
|
||||
active_sessions: number;
|
||||
io_in: number;
|
||||
io_out: number;
|
||||
memory_atom: number;
|
||||
memory_binary: number;
|
||||
memory_ets: number;
|
||||
memory_processes: number;
|
||||
memory_total: number;
|
||||
mnesia_commits: number;
|
||||
mnesia_failures: number;
|
||||
node: string;
|
||||
process_count: number;
|
||||
run_queue: number;
|
||||
table_sizes: Record<string, number>;
|
||||
timestamp: string;
|
||||
ws_connections: number;
|
||||
cpu_utilization: number;
|
||||
memory_available: number;
|
||||
}
|
||||
|
||||
interface MetricsState {
|
||||
current: NodeMetric | null;
|
||||
previous: NodeMetric | null;
|
||||
allHistory: NodeMetric[];
|
||||
visibleHistory: NodeMetric[];
|
||||
setCurrent: (metric: NodeMetric) => void;
|
||||
setAllHistory: (history: NodeMetric[]) => void;
|
||||
addToAllHistory: (metric: NodeMetric) => void;
|
||||
filterVisibleHistory: (minutes: number) => void;
|
||||
reset: () => void;
|
||||
}
|
||||
|
||||
const MAX_HISTORY = 500; // жесткий лимит, чтобы избежать ошибок памяти
|
||||
|
||||
export const useMetricsStore = create<MetricsState>((set, get) => ({
|
||||
current: null,
|
||||
previous: null,
|
||||
allHistory: [],
|
||||
visibleHistory: [],
|
||||
|
||||
setCurrent: (metric) =>
|
||||
set((state) => ({
|
||||
previous: state.current,
|
||||
current: metric,
|
||||
})),
|
||||
|
||||
setAllHistory: (history) =>
|
||||
set({
|
||||
allHistory: history.slice(-MAX_HISTORY),
|
||||
visibleHistory: history.slice(-MAX_HISTORY),
|
||||
}),
|
||||
|
||||
addToAllHistory: (metric) =>
|
||||
set((state) => {
|
||||
const newAll = [...state.allHistory, metric].slice(-MAX_HISTORY);
|
||||
return { allHistory: newAll };
|
||||
}),
|
||||
|
||||
filterVisibleHistory: (minutes) => {
|
||||
const { allHistory } = get();
|
||||
if (allHistory.length === 0) return;
|
||||
|
||||
const now = dayjs();
|
||||
const from = now.subtract(minutes, 'minute');
|
||||
|
||||
const filtered = allHistory.filter((m) => {
|
||||
const t = dayjs(m.timestamp);
|
||||
return t.isAfter(from);
|
||||
});
|
||||
|
||||
let step = 1;
|
||||
if (filtered.length > 300) step = Math.ceil(filtered.length / 300);
|
||||
const thinned = filtered.filter((_, i) => i % step === 0);
|
||||
|
||||
set({ visibleHistory: thinned });
|
||||
},
|
||||
|
||||
reset: () =>
|
||||
set({
|
||||
current: null,
|
||||
previous: null,
|
||||
allHistory: [],
|
||||
visibleHistory: [],
|
||||
}),
|
||||
}));
|
||||
+34
-1
@@ -1,3 +1,35 @@
|
||||
// ===================== Calendar =====================
|
||||
export interface Calendar {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
type: 'personal' | 'commercial';
|
||||
category: string;
|
||||
owner_id: string;
|
||||
status: 'active' | 'frozen' | 'deleted';
|
||||
reason: string | null;
|
||||
tags: string[];
|
||||
color: string;
|
||||
image_url: string;
|
||||
rating_avg: number;
|
||||
rating_count: number;
|
||||
short_name: string;
|
||||
confirmation: string;
|
||||
settings: object | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface CalendarListParams {
|
||||
q?: string;
|
||||
status?: 'active' | 'frozen' | 'deleted';
|
||||
type?: 'personal' | 'commercial';
|
||||
limit?: number;
|
||||
offset?: number;
|
||||
sort?: string;
|
||||
order?: 'asc' | 'desc';
|
||||
}
|
||||
|
||||
// ===================== Event (Событие) =====================
|
||||
export interface Event {
|
||||
id: string;
|
||||
@@ -156,7 +188,8 @@ export interface TicketStats {
|
||||
in_progress: number;
|
||||
resolved: number;
|
||||
closed: number;
|
||||
total: number;
|
||||
total_tickets: number;
|
||||
total_errors: number;
|
||||
}
|
||||
|
||||
// ===================== Subscription (Подписка) =====================
|
||||
|
||||
Reference in New Issue
Block a user