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

server components

Browse Source
This commit is contained in:
selimaj-dev
2025-07-11 22:42:04 +02:00
parent 8f275c38a5
commit 80348cec8b
5 changed files with 294 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mod.rs
+2 -1
View File
@@ -1,5 +1,6 @@
use dioxus::prelude::*;
pub mod server;
pub mod sidebar;
use dioxus::prelude::*;
#[component]
pub fn LineChart(
src/components/server.rs
+99
View File
@@ -0,0 +1,99 @@
use crate::components::ProgressBar;
use dioxus::prelude::*;
const SERVER_CSS: Asset = asset!("/assets/server.css");
#[derive(Debug, Clone, PartialEq, Eq)]
pub enum Status {
Online,
Offline,
Warning,
Maintenance,
}
#[derive(Debug, Clone, PartialEq, Eq)]
pub struct Server {
pub name: String,
pub status: Status,
pub ip: String,
pub cpu: u8,
pub memory: u8,
pub storage: u8,
pub network: u8,
}
impl std::fmt::Display for Status {
fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
match self {
Status::Online => write!(f, "Online"),
Status::Warning => write!(f, "Warning"),
Status::Offline => write!(f, "Offline"),
Status::Maintenance => write!(f, "Maintenance"),
}
}
}
#[component]
pub fn ServerComponent(server: Server) -> Element {
rsx! {
document::Link { rel: "stylesheet", href: SERVER_CSS }
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 { "{server.name}" }
div {
div { class: "{server.status}",
lucide_dioxus::CircleCheckBig { size: 12, color: "currentColor" }
p { "{server.status}" }
}
p { "{server.ip}" }
}
}
}
button { lucide_dioxus::EllipsisVertical { size: 16, color: "currentColor" } }
}
div { class: "server-monitor",
div { p {
lucide_dioxus::Cpu { size: 16, color: "currentColor", class: "cpu" }
"CPU"
} p { "{server.cpu}%" } }
ProgressBar { percent: server.cpu, class: get_level(server.cpu) }
div { p {
lucide_dioxus::MemoryStick { size: 16, color: "currentColor", class: "ram" }
"Memory"
} p { "{server.memory}%" } }
ProgressBar { percent: server.memory, class: get_level(server.memory) }
div { p {
lucide_dioxus::HardDrive { size: 16, color: "currentColor", class: "storage" }
"Storage"
} p { "{server.storage}%" } }
ProgressBar { percent: server.storage, class: get_level(server.storage) }
div { p {
lucide_dioxus::Wifi { size: 16, color: "currentColor", class: "network" }
"Network"
} p { "{server.network}%" } }
ProgressBar { percent: server.network, class: get_level(server.network) }
}
}
}
}
fn get_level(i: u8) -> String {
if i > 80 {
String::from("high")
} else if i > 30 {
String::from("medium")
} else {
String::from("low")
}
}
src/dashboard.rs
+41 -45
View File
@@ -1,6 +1,10 @@
use dioxus::prelude::*;
use crate::components::{sidebar::SideBar, LineChart, ProgressBar};
use crate::components::{
server::{Server, ServerComponent},
sidebar::SideBar,
LineChart, ProgressBar,
};
use lucide_dioxus;
const DASHBOARD_CSS: Asset = asset!("/assets/dashboard.css");
@@ -85,53 +89,45 @@ pub fn Dashboard() -> Element {
}
div { class: "server-container",
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" }
}
}
}
ServerComponent { server: Server {
name: "Main Server".to_string(),
status: crate::components::server::Status::Online,
ip: "10.0.0.5".to_string(),
cpu: 95,
memory: 60,
storage: 43,
network: 88,
} }
button { lucide_dioxus::EllipsisVertical { size: 16, color: "currentColor" } }
}
ServerComponent { server: Server {
name: "Cache Node".to_string(),
status: crate::components::server::Status::Warning,
ip: "192.168.1.12".to_string(),
cpu: 47,
memory: 72,
storage: 81,
network: 34,
} }
div { class: "server-monitor",
div { p {
lucide_dioxus::Cpu { size: 16, color: "currentColor", class: "cpu" }
"CPU"
} p { "10%" } }
ProgressBar { percent: 10, class: "low" }
ServerComponent { server: Server {
name: "Database".to_string(),
status: crate::components::server::Status::Offline,
ip: "172.16.254.3".to_string(),
cpu: 12,
memory: 90,
storage: 22,
network: 10,
} }
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" }
}
}
ServerComponent { server: Server {
name: "Backup Node".to_string(),
status: crate::components::server::Status::Maintenance,
ip: "192.168.100.22".to_string(),
cpu: 83,
memory: 41,
storage: 96,
network: 70,
} }
}
}
}