From 8f275c38a5628b2b0f04fe5c9331f2b172d07251 Mon Sep 17 00:00:00 2001 From: Leo dev Date: Fri, 11 Jul 2025 14:34:53 +0200 Subject: [PATCH] Server container --- assets/dashboard.css | 146 ++++++++++++++++++++++++++++++++++++++++-- src/components/mod.rs | 9 ++- src/dashboard.rs | 77 ++++++++++++++++------ 3 files changed, 204 insertions(+), 28 deletions(-) diff --git a/assets/dashboard.css b/assets/dashboard.css index b41fdf5..7dedfea 100644 --- a/assets/dashboard.css +++ b/assets/dashboard.css @@ -8,15 +8,20 @@ body { margin-top: 20px; display: flex; gap: 20px; + height: calc(100vh - 20px); } .dashboard-container { + box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; flex: 1; width: 100%; padding-right: 25px; + overflow-y: auto; + height: 100%; + padding-bottom: 20px; } .summary-container { @@ -50,22 +55,30 @@ body { margin-left: auto; } -#online { +.online { color: #16a34a; } -#issues { +.issues { color: rgb(234, 71, 12); } -#cpu { +.cpu { color: rgb(37, 99, 235); } -#ram { +.ram { color: rgb(147, 51, 234); } +.storage { + color: rgb(234, 88, 12); +} + +.network { + color: rgb(22 163 74); +} + .summary-card p { color: black; } @@ -178,12 +191,12 @@ body { gap: 25px; } -.server-container div { +.server-container .server { box-sizing: border-box; background-color: #fff; border-radius: 10px; width: 100%; - height: 406; + height: 100%; padding: 30px; } .dashboard-container h3 { @@ -223,7 +236,7 @@ body { display: block; width: 100%; height: 10px; - background-color: #e0e0e0; + background-color: rgb(226, 232, 240); border-radius: 10px; overflow: hidden; } @@ -235,3 +248,122 @@ body { transition: width 0.3s ease; border-radius: 10px; } + +.server-heading-inner { + display: flex; + gap: 10px; +} + +.server-icon { + padding: 0.5rem; + border-radius: 10px; + width: 20px; + height: 20px; + background-color: rgb(219 234 254); + color: rgb(37 99 235); + margin-top: auto; + margin-bottom: auto; +} + +.server-heading-info { + display: flex; + flex-direction: column; + gap: 7px; +} + +.server-heading-info div div { + display: flex; + gap: 3px; + background-color: rgb(220, 252, 231); + color: rgb(22 101 52); + width: max-content; + padding-left: 10px; + padding-right: 10px; + padding-top: 3px; + padding-bottom: 3px; + border-radius: 10px; +} + +.server-heading-info div div svg { + margin-top: auto; + margin-bottom: auto; +} + +.server-heading-info div div p { + margin-top: auto; + margin-bottom: auto; + font-size: 14px; +} + +.server-heading-info div { + display: flex; + flex-direction: row; + gap: 10px; +} + +.server-heading-info div p { + margin: 0; + font-size: 14.5px; + margin-top: auto; + margin-bottom: auto; + color: rgb(100 116 139); +} + +.server-heading { + display: flex; + justify-content: space-between; +} + +.server-heading button { + margin: 0; + border: 0; + height: max-content; + width: max-content; + padding: 8px; + align-items: center; + background-color: transparent; + border-radius: 7px; + margin-top: auto; + margin-bottom: auto; +} + +.server-heading button:hover { + background-color: #f1f5f9; +} + +.server-monitor h2 { + margin: 0; + padding: 0; + margin-bottom: 20px; + display: flex; + gap: 7px; +} + +.server-monitor h2 svg { + margin-top: auto; + margin-bottom: auto; +} + +.server-monitor div { + display: flex; + justify-content: space-between; +} + +.server-monitor div p { + margin-bottom: 8px; + font-size: 14px; + display: flex; + gap: 6px; +} + +.low { + color: rgb(34, 197, 94); +} + +.medium { + color: rgb(234, 179, 8); +} + +.high { + color: rgb(239, 68, 68); +} diff --git a/src/components/mod.rs b/src/components/mod.rs index a279e21..1c6789a 100644 --- a/src/components/mod.rs +++ b/src/components/mod.rs @@ -153,9 +153,14 @@ pub fn RadialChart(percent: f64) -> Element { } #[component] -pub fn ProgressBar(percent: u8, id: Option) -> Element { +pub fn ProgressBar(percent: u8, class: Option) -> Element { + let class_attr = match class { + Some(c) => format!("progress-bar {}", c), + None => "progress-bar".to_string(), + }; + rsx! { - span { class: "progress-bar", id: id, + span { class: "{class_attr}", span { class: "progress", style: format!("width: {}%; background-color: currentColor;", percent.clamp(0, 100)) } } } diff --git a/src/dashboard.rs b/src/dashboard.rs index feeb64d..199ca7d 100644 --- a/src/dashboard.rs +++ b/src/dashboard.rs @@ -15,7 +15,7 @@ pub fn Dashboard() -> Element { div { class: "dashboard-container", div { class: "summary-container", - div { class: "summary-card", id: "online", + div { class: "summary-card", class: "online", div { p { "Online Servers" } h3 { "3" } @@ -23,7 +23,7 @@ pub fn Dashboard() -> Element { lucide_dioxus::CircleCheckBig { size: 32, color: "currentColor" } } - div { class: "summary-card", id: "issues", + div { class: "summary-card", class: "issues", div { p { "Issues" } h3 { "2" } @@ -31,7 +31,7 @@ pub fn Dashboard() -> Element { lucide_dioxus::TriangleAlert { size: 32, color: "currentColor" } } - div { class: "summary-card", id: "cpu", + div { class: "summary-card", class: "cpu", div { p { "Avg CPU Usage" } h3 { "42%" } @@ -39,7 +39,7 @@ pub fn Dashboard() -> Element { lucide_dioxus::Cpu { size: 32, color: "currentColor" } } - div { class: "summary-card", id: "ram", + div { class: "summary-card", class: "ram", div { p { "Avg Memory" } h3 { "42%" } @@ -59,13 +59,16 @@ pub fn Dashboard() -> Element { "System Overview" } div { p { "Average CPU" } p { "10%" } } - ProgressBar { percent: 10, id: "cpu" } + ProgressBar { percent: 10, class: "cpu" } div { p { "Average Memory" } p { "24%" } } - ProgressBar { percent: 10, id: "ram" } + ProgressBar { percent: 10, class: "ram" } div { p { "Average Storage" } p { "24%" } } - ProgressBar { percent: 10, id: "issues" } + ProgressBar { percent: 10, class: "storage" } + + div { p { "Average Network" } p { "24%" } } + ProgressBar { percent: 10, class: "network" } } } @@ -75,23 +78,59 @@ pub fn Dashboard() -> Element { input { placeholder: "Search servers by name, location, or IP..." } } button { "All (4)" } - button { id: "online", "Online (3)" } - button { id: "issues", "Warning (1)" } - button { id: "ram", "Offline (1)" } - button { id: "cpu", "Maintenance (1)" } + button { class: "online", "Online (3)" } + button { class: "issues", "Warning (1)" } + button { class: "ram", "Offline (1)" } + button { class: "cpu", "Maintenance (1)" } } div { class: "server-container", - div { - h3 { "Web server 01" } - } + div { class: "server", + div { class: "server-heading", + div { class: "server-heading-inner", + div { class: "server-icon", + lucide_dioxus::Server { size: 20, color: "currentColor" } + } + div { class: "server-heading-info", + h3 { "Web server 01" } + div { + div { + lucide_dioxus::CircleCheckBig { size: 12, color: "currentColor" } + p { "Online" } + } + p { "10.7.1.21" } + } + } + } - div { - h3 { "Web server 01" } - } + button { lucide_dioxus::EllipsisVertical { size: 16, color: "currentColor" } } + } - div { - h3 { "Web server 01" } + div { class: "server-monitor", + div { p { + lucide_dioxus::Cpu { size: 16, color: "currentColor", class: "cpu" } + "CPU" + } p { "10%" } } + ProgressBar { percent: 10, class: "low" } + + div { p { + lucide_dioxus::MemoryStick { size: 16, color: "currentColor", class: "ram" } + "Memory" + } p { "34%" } } + ProgressBar { percent: 60, class: "medium" } + + div { p { + lucide_dioxus::HardDrive { size: 16, color: "currentColor", class: "storage" } + "Storage" + } p { "80%" } } + ProgressBar { percent: 80, class: "high" } + + div { p { + lucide_dioxus::Wifi { size: 16, color: "currentColor", class: "network" } + "Network" + } p { "34%" } } + ProgressBar { percent: 34, class: "low" } + } } } }