orus-dev/sentryx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Server container

Browse Source
This commit is contained in:
selimaj-dev
2025-07-11 14:34:53 +02:00
parent b8f82399e1
commit 8f275c38a5
3 changed files with 204 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mod.rs
+7 -2
View File
@@ -153,9 +153,14 @@ pub fn RadialChart(percent: f64) -> Element {
}
#[component]
pub fn ProgressBar(percent: u8, id: Option<String>) -> Element {
pub fn ProgressBar(percent: u8, class: Option<String>) -> 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)) }
}
}
src/dashboard.rs
+58 -19
View File
@@ -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" }
}
}
}
}