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
assets/dashboard.css
+139 -7
View File
@@ -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);
}
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
+55 -16
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 {
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" }
}
}
}
}