From b28022c63399fddc8b424057c54b1cb5ff80e7c1 Mon Sep 17 00:00:00 2001 From: Vyacheslav K Date: Wed, 7 May 2025 15:43:49 +0300 Subject: [PATCH] some updates --- src/dashboard/NetworkMonitor.js | 36 +++++++++++++++++ src/dashboard/SystemMonitor.js | 68 +++++++++++++++++++++++++-------- src/index.css | 17 ++++++++- src/misc/CpuChart.js | 30 ++++++++------- src/pages/Dashboard.js | 50 ++++++++++++++++++------ 5 files changed, 160 insertions(+), 41 deletions(-) create mode 100644 src/dashboard/NetworkMonitor.js diff --git a/src/dashboard/NetworkMonitor.js b/src/dashboard/NetworkMonitor.js new file mode 100644 index 0000000..4e5aff0 --- /dev/null +++ b/src/dashboard/NetworkMonitor.js @@ -0,0 +1,36 @@ +import React, { useState } from "react"; + +export default function NetworkMonitor(args) { + const [selectedTab, setSelectedTab] = useState("interfaces"); + const tabs = [ + { id: "interfaces", label: "Интерфейсы" }, + { id: "topology", label: "Топология сети" }, + ]; + const handleTabClick = (tabId) => { + setSelectedTab(tabId); + }; + return ( + <> +
+ {/* Контейнер для вкладок */} +
+ {tabs.map((tab) => ( + + ))} +
+
+
+ +
+ + ); +} \ No newline at end of file diff --git a/src/dashboard/SystemMonitor.js b/src/dashboard/SystemMonitor.js index 08f095c..b0c904f 100644 --- a/src/dashboard/SystemMonitor.js +++ b/src/dashboard/SystemMonitor.js @@ -4,17 +4,55 @@ import { InformationCircleIcon, ComputerDesktopIcon, CodeBracketIcon, CpuChipIco import CpuChart from "../misc/CpuChart"; -const Tabs = () => { +const SystemMonitor = () => { // Состояние для отслеживания выбранной вкладки const [selectedTab, setSelectedTab] = useState("system"); const [Percent, setPercent] = useState(80); window.setPercent = setPercent; // Данные для вкладок const tabs = [ - { id: "system", label: "Система" }, + { id: "system", label: "Основное" }, { id: "deviceManager", label: "Диспетчер устройств" }, ]; + function PercentColor(value) { + if (value <= 40) { + return "green"; + } + if (value <= 60) { + return "yellow"; + } + if (value <= 85) { + return "orange"; + } + + return "red"; + + } + const [SystemInfo, setSystemInfo] = useState({ + uptime: "1d 10:30:02", + os: "Windows", + hostname: "DESKTOP-380ABCDE", + os_version: "10.0.19049", + arch: "AMD64", + cpu_load: 20, + mem_load: 80, + cpu_model:"AMD Ryzen 5 5600x 6-core processor", + cpu_cores: 6, + cpu_threads: 12, + memory_gb: 32, + cpu_chart: + { + "10:00":40, + "11:00":34, + "12:00":56, + "13:00":60, + "14:00":80 + } + + + }); + // Функция для обработки клика по вкладке const handleTabClick = (tabId) => { setSelectedTab(tabId); @@ -50,48 +88,48 @@ const Tabs = () => { Время работы: - 1d 15:05:10 + {SystemInfo.uptime}
Система:
- Windows + {SystemInfo.os}
Hostname:
- DESKTOP-380ABCDE + {SystemInfo.hostname}
Версия:
- 10.0.19049 + {SystemInfo.os_version}
Архитектура:
- AMD64 + {SystemInfo.arch}

Загрузка CPU

- +

Занято ОЗУ

- +
@@ -103,7 +141,7 @@ const Tabs = () => { Процессор: - AMD Ryzen 5 5600x 6-core processor + {SystemInfo.cpu_model}
@@ -111,21 +149,21 @@ const Tabs = () => { Физические ядра:
- 6 + {SystemInfo.cpu_cores}
Логические ядра:
- 12 + {SystemInfo.cpu_threads}
ОЗУ:
- 32 ГБ + {SystemInfo.memory_gb} ГБ
@@ -134,7 +172,7 @@ const Tabs = () => {

График загрузки CPU

- +
@@ -149,4 +187,4 @@ const Tabs = () => { ); }; -export default Tabs; \ No newline at end of file +export default SystemMonitor; \ No newline at end of file diff --git a/src/index.css b/src/index.css index 96df524..cd3aa0b 100644 --- a/src/index.css +++ b/src/index.css @@ -4,4 +4,19 @@ body,html, #root{ height: 100%; -} \ No newline at end of file +} +@keyframes anim-pop { + 0% { + transform: scale(.95); + transform: scale(var(--btn-focus-scale, .98)); + } + + + 100% { + transform: scale(1); + } +} + +.anim-pop { + animation: anim-pop .3s ease-out; +} diff --git a/src/misc/CpuChart.js b/src/misc/CpuChart.js index 76d9e64..09bd958 100644 --- a/src/misc/CpuChart.js +++ b/src/misc/CpuChart.js @@ -21,7 +21,7 @@ ChartJS.register( Legend ); -export const options = { +const options = { responsive: true, plugins: { legend: { @@ -33,20 +33,22 @@ export const options = { }, }; -const labels = ['10:00',"11:00","12:00","13:00","14:00","15:00","16:00"]; -export const data = { - labels, - datasets: [ - { - label: 'Загрузка CPU', - data: [10,20,30,10,10,45,20], - borderColor: 'rgb(255, 99, 132)', - backgroundColor: 'rgba(255, 99, 132, 0.5)', - } - ], -}; -export default function CpuChart() { +export default function CpuChart({chart_dataset}) { + const labels = Object.keys(chart_dataset); + + const data = { + labels, + datasets: [ + { + label: 'Загрузка CPU', + data: Object.values(chart_dataset), + borderColor: '#ff9f43', + backgroundColor: 'rgba(255, 99, 132, 0.5)', + } + ], + }; + return ; } diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js index edf4644..62336f5 100644 --- a/src/pages/Dashboard.js +++ b/src/pages/Dashboard.js @@ -5,6 +5,8 @@ import { WifiIcon } from '@heroicons/react/16/solid' import { Link } from "react-router-dom"; import SystemMonitor from "../dashboard/SystemMonitor" +import NetworkMonitor from "../dashboard/NetworkMonitor" +import React, { useState, useEffect } from "react"; const user = { name: 'Administrator', @@ -13,8 +15,8 @@ const user = { 'https://api.dicebear.com/9.x/thumbs/svg?seed=Amaya', } const navigation = [ - { name: 'Системный мониторинг', href: '/dashboard', icon: ServerStackIcon, pageName: "dashboard" }, - { name: 'Сетевой мониторинг', href: '/dashboard/network', icon: WifiIcon, pageName: "network" }, + { name: 'Система', href: '/dashboard', icon: ServerStackIcon, pageName: "dashboard" }, + { name: 'Сеть', href: '/dashboard/network', icon: WifiIcon, pageName: "network" }, ] const userNavigation = [ @@ -26,18 +28,23 @@ function classNames(...classes) { } export default function Dashboard(args) { + const [WsLoading, setWsLoading] = useState(true); let content; switch (args.CurrentPage) { case "dashboard": - content = ; + content = ; break; case "network": - content = ; + content = ; break; } - + useEffect(() => { + setTimeout(() => { + setWsLoading(false); + }, 1000) + }, []); return ( <> {/* @@ -48,7 +55,7 @@ export default function Dashboard(args) { ``` */} -
+
@@ -73,7 +80,7 @@ export default function Dashboard(args) { 'flex gap-2 justify-center' )} > - + {item.name} ))} @@ -150,7 +157,7 @@ export default function Dashboard(args) { 'flex items-center gap-2' )} > - + {item.name} ))} @@ -181,7 +188,7 @@ export default function Dashboard(args) { href={item.href} className="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white" > - + {item.name} @@ -192,8 +199,29 @@ export default function Dashboard(args) {
-
- {content} +
+ {!WsLoading && + <> +
+ {content} +
+ + } + {WsLoading && + <> +
+
+
+
+
+
+
+ +
+
+ + + }