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

Even better dashboard

Browse Source
This commit is contained in:
selimaj-dev
2025-07-11 03:07:53 +02:00
parent 83fb523efa
commit c077b8c16f
11 changed files with 281 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Cargo.lock
Generated
+10
View File
@@ -2497,6 +2497,15 @@ version = "0.1.0"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "b3bd0dd2cd90571056fdb71f6275fada10131182f84899f4b2a916e565d81d86" checksum = "b3bd0dd2cd90571056fdb71f6275fada10131182f84899f4b2a916e565d81d86"
[[package]]
name = "lucide-dioxus"
version = "2.15.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "0d06f27420e7a960d76a02f43819fba2fb3a513738714cc6262c02d9fd256e5c"
dependencies = [
"dioxus",
]
[[package]] [[package]]
name = "mac" name = "mac"
version = "0.1.1" version = "0.1.1"
@@ -3632,6 +3641,7 @@ name = "sentryx"
version = "0.1.0" version = "0.1.0"
dependencies = [ dependencies = [
"dioxus", "dioxus",
"lucide-dioxus",
] ]
[[package]] [[package]]
Cargo.toml
+1
View File
@@ -8,6 +8,7 @@ edition = "2021"
[dependencies] [dependencies]
dioxus = { version = "0.6.0", features = ["router", "fullstack"] } dioxus = { version = "0.6.0", features = ["router", "fullstack"] }
lucide-dioxus = { version = "2.15.0", features = ["all-icons"] }
[features] [features]
default = ["web"] default = ["web"]
assets/dashboard.css
+128 -68
View File
@@ -1,95 +1,155 @@
body { body {
background-color: #111526; background-color: #f1f5f9;
margin: 0;
color: #0f172a;
}
.sidebar-container {
margin-top: 20px;
display: flex;
gap: 20px;
}
.dashboard-container {
display: flex;
flex-direction: column;
gap: 20px;
flex: 1;
width: 100%;
padding-right: 25px;
}
.summary-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
width: 100%;
}
.summary-card {
box-sizing: border-box;
height: 100px;
background-color: #fff;
padding: 1.5rem;
border-radius: 10px;
display: flex;
align-items: center;
width: 100%;
}
.summary-card h3 {
font-size: x-large;
margin: 0; margin: 0;
} }
.container { .summary-card p {
display: grid; margin: 0;
grid-template-columns: 400px 2fr 1.6fr; }
.summary-card svg {
margin-left: auto;
}
#online {
color: #16a34a;
}
#issues {
color: rgb(234, 71, 12);
}
#cpu {
color: rgb(37, 99, 235);
}
#ram {
color: rgb(147, 51, 234);
}
.summary-card p {
color: black;
}
.overview-container {
display: flex;
gap: 20px; gap: 20px;
} }
.left_container { .performance-card {
display: grid; background-color: #fff;
grid-template-rows: 200px 450px 230px;
gap: 20px;
padding-top: 20px;
}
#top_container,
#mid_container,
#bottom_container {
box-sizing: border-box; box-sizing: border-box;
background-color: #171b2e; padding: 1.5rem;
border-radius: 20px; border-radius: 10px;
width: 100%; width: 100%;
padding: 30px;
} }
.right_container { @media (max-width: 1300px) {
display: grid; .summary-container {
gap: 20px; grid-template-columns: repeat(2, 1fr);
padding-top: 20px; }
padding-right: 20px;
max-height: calc(100vh - 40px);
}
.right_box { .overview-container {
box-sizing: border-box;
padding: 30px;
background-color: #171b2e;
border-radius: 20px;
width: 100%;
height: 100%;
overflow: auto;
}
@media (max-width: 1000px) {
.container {
display: flex;
flex-direction: column; flex-direction: column;
padding-left: 20px;
padding-right: 20px;
} }
#sidebar { .dashboard-container {
display: none; padding-left: 25px;
height: 150px;
border-radius: 20px;
}
.right_container {
padding-top: 10px;
aspect-ratio: 1 / 1;
width: 100%;
} }
} }
.search-container {
.line-chart { display: flex;
background-color: #fff;
box-sizing: border-box;
padding: 1.5rem;
border-radius: 10px;
width: 100%; width: 100%;
height: 100%; gap: 10px;
} }
.search-input input {
.line-chart-svg { appearance: auto;
background-color: #fff;
border: 1px solid rgb(226, 232, 240);
border-radius: 6px;
box-sizing: border-box;
color: rgb(2, 8, 23);
cursor: auto;
display: flex;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 14px;
font-weight: 400;
line-height: 20px;
height: 40px;
width: 100%; width: 100%;
height: 100%; padding: 8px 12px 8px 40px;
display: block; margin: 0;
text-align: start;
} }
.line-chart .fill { .search-input input:focus {
background: linear-gradient(to right, red, yellow); border-color: rgb(0, 0, 0);
-webkit-mask: url(#svg-path); border-width: 2px;
mask: url(#svg-path); outline: none;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
} }
.line-chart .line { .search-input {
stroke-width: 1px; position: relative;
width: 100%;
}
.search-input svg {
position: absolute;
top: 12px;
left: 12px;
}
.search-container button {
background-color: transparent;
border: 1px solid currentColor;
border-radius: 6px;
outline: none;
white-space: nowrap;
font-weight: bold;
} }
assets/font.css
+64 -52
View File
@@ -1,79 +1,91 @@
@font-face { @font-face {
font-family: 'Roboto'; font-family: "Roboto";
src: url('assets/font/Roboto-Regular.ttf') format('truetype'); src: url("assets/font/Roboto-Regular.ttf") format("truetype");
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Roboto'; font-family: "Roboto";
src: url('assets/font/Roboto-Bold.ttf') format('truetype'); src: url("assets/font/Roboto-Bold.ttf") format("truetype");
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Roboto'; font-family: "Roboto";
src: url('assets/font/Roboto-Italic.ttf') format('truetype'); src: url("assets/font/Roboto-Italic.ttf") format("truetype");
font-weight: normal; font-weight: normal;
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: 'Roboto'; font-family: "Roboto";
src: url('assets/font/Roboto-BoldItalic.ttf') format('truetype'); src: url("assets/font/Roboto-BoldItalic.ttf") format("truetype");
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: 'Roboto Condensed'; font-family: "Roboto Condensed";
src: url('assets/font/Roboto_Condensed-ExtraLight.ttf') format('truetype'); src: url("assets/font/Roboto_Condensed-ExtraLight.ttf") format("truetype");
font-weight: 200; font-weight: 200;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Roboto Condensed'; font-family: "Roboto Condensed";
src: url('assets/font/Roboto_Condensed-ExtraLightItalic.ttf') format('truetype'); src: url("assets/font/Roboto_Condensed-ExtraLightItalic.ttf")
font-weight: 200; format("truetype");
font-style: italic; font-weight: 200;
font-style: italic;
} }
@font-face { @font-face {
font-family: 'Roboto'; font-family: "Roboto";
src: url('assets/font/Roboto-Medium.ttf') format('truetype'); src: url("assets/font/Roboto-Medium.ttf") format("truetype");
font-weight: 500; font-weight: 500;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Roboto'; font-family: "Roboto";
src: url('assets/font/Roboto-MediumItalic.ttf') format('truetype'); src: url("assets/font/Roboto-MediumItalic.ttf") format("truetype");
font-weight: 500; font-weight: 500;
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: 'Roboto'; font-family: "Roboto";
src: url('assets/font/Roboto-SemiBold.ttf') format('truetype'); src: url("assets/font/Roboto-SemiBold.ttf") format("truetype");
font-weight: 600; font-weight: 600;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Roboto'; font-family: "Roboto";
src: url('assets/font/Roboto-SemiBoldItalic.ttf') format('truetype'); src: url("assets/font/Roboto-SemiBoldItalic.ttf") format("truetype");
font-weight: 600; font-weight: 600;
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: 'Roboto'; font-family: "Roboto";
src: url('assets/font/Roboto-ExtraBold.ttf') format('truetype'); src: url("assets/font/Roboto-ExtraBold.ttf") format("truetype");
font-weight: 800; font-weight: 800;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'Roboto'; font-family: "Roboto";
src: url('assets/font/Roboto-ExtraBoldItalic.ttf') format('truetype'); src: url("assets/font/Roboto-ExtraBoldItalic.ttf") format("truetype");
font-weight: 800; font-weight: 800;
font-style: italic; font-style: italic;
} }
body { body {
font-family: 'Roboto', 'Roboto Condensed', sans-serif; font-family: "Roboto", "Roboto Condensed", sans-serif;
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
color: #ffffff; color: black;
}
.line-chart {
width: 100%;
height: 100%;
}
.line-chart-svg {
width: 100%;
height: 100%;
display: block;
} }
assets/sidebar.css
+6 -6
View File
@@ -1,10 +1,10 @@
#sidebar { #sidebar {
box-sizing: border-box; box-sizing: border-box;
background-color: #171b2e; background-color: #fff;
width: 400px; width: 300px;
height: 100%; height: calc(100vh - 40px);
border-top-right-radius: 20px; border-radius: 20px;
border-bottom-right-radius: 20px; margin-left: 25px;
padding: 20px; padding: 20px;
} }
@@ -28,7 +28,7 @@
.sidebar-item p { .sidebar-item p {
text-decoration: none; text-decoration: none;
color: #fff; color: #0f172a;
font: inherit; font: inherit;
font-size: larger; font-size: larger;
font-weight: bold; font-weight: bold;
assets/sidebar/dashboard-selected.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#fff" class="icon icon-tabler icons-tabler-filled icon-tabler-dashboard"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 2.954a10 10 0 0 1 6.222 17.829a1 1 0 0 1 -.622 .217h-11.2a1 1 0 0 1 -.622 -.217a10 10 0 0 1 6.222 -17.829m4.207 5.839a1 1 0 0 0 -1.414 0l-2.276 2.274a2.003 2.003 0 0 0 -2.514 1.815l-.003 .118a2 2 0 1 0 3.933 -.517l2.274 -2.276a1 1 0 0 0 0 -1.414" /></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#000" class="icon icon-tabler icons-tabler-filled icon-tabler-dashboard"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 2.954a10 10 0 0 1 6.222 17.829a1 1 0 0 1 -.622 .217h-11.2a1 1 0 0 1 -.622 -.217a10 10 0 0 1 6.222 -17.829m4.207 5.839a1 1 0 0 0 -1.414 0l-2.276 2.274a2.003 2.003 0 0 0 -2.514 1.815l-.003 .118a2 2 0 1 0 3.933 -.517l2.274 -2.276a1 1 0 0 0 0 -1.414" /></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 487 B

After

Width:  |  Height:  |  Size: 487 B

assets/sidebar/dashboard.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-dashboard"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 13m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M13.45 11.55l2.05 -2.05" /><path d="M6.4 20a9 9 0 1 1 11.2 0z" /></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-dashboard"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 13m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M13.45 11.55l2.05 -2.05" /><path d="M6.4 20a9 9 0 1 1 11.2 0z" /></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 435 B

After

Width:  |  Height:  |  Size: 435 B

assets/sidebar/home-selected.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#fff" class="icon icon-tabler icons-tabler-filled icon-tabler-home"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12.707 2.293l9 9c.63 .63 .184 1.707 -.707 1.707h-1v6a3 3 0 0 1 -3 3h-1v-7a3 3 0 0 0 -2.824 -2.995l-.176 -.005h-2a3 3 0 0 0 -3 3v7h-1a3 3 0 0 1 -3 -3v-6h-1c-.89 0 -1.337 -1.077 -.707 -1.707l9 -9a1 1 0 0 1 1.414 0m.293 11.707a1 1 0 0 1 1 1v7h-4v-7a1 1 0 0 1 .883 -.993l.117 -.007z" /></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#000" class="icon icon-tabler icons-tabler-filled icon-tabler-home"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12.707 2.293l9 9c.63 .63 .184 1.707 -.707 1.707h-1v6a3 3 0 0 1 -3 3h-1v-7a3 3 0 0 0 -2.824 -2.995l-.176 -.005h-2a3 3 0 0 0 -3 3v7h-1a3 3 0 0 1 -3 -3v-6h-1c-.89 0 -1.337 -1.077 -.707 -1.707l9 -9a1 1 0 0 1 1.414 0m.293 11.707a1 1 0 0 1 1 1v7h-4v-7a1 1 0 0 1 .883 -.993l.117 -.007z" /></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 512 B

After

Width:  |  Height:  |  Size: 512 B

assets/sidebar/home.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-home"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-home"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 449 B

After

Width:  |  Height:  |  Size: 449 B

src/components/mod.rs
+2
View File
@@ -98,7 +98,9 @@ pub fn LineChart(
} }
} }
#[allow(unused)]
const RADIUS: f64 = 50.0; const RADIUS: f64 = 50.0;
#[allow(unused)]
const CIRCUMFERENCE: f64 = 2.0 * std::f64::consts::PI * RADIUS; const CIRCUMFERENCE: f64 = 2.0 * std::f64::consts::PI * RADIUS;
#[component] #[component]
src/dashboard.rs
+66 -32
View File
@@ -1,6 +1,7 @@
use dioxus::prelude::*; use dioxus::prelude::*;
use crate::components::{sidebar::SideBar, LineChart, RadialChart}; use crate::components::{sidebar::SideBar, LineChart};
use lucide_dioxus;
const DASHBOARD_CSS: Asset = asset!("/assets/dashboard.css"); const DASHBOARD_CSS: Asset = asset!("/assets/dashboard.css");
@@ -9,41 +10,74 @@ pub fn Dashboard() -> Element {
rsx! { rsx! {
document::Link { rel: "stylesheet", href: DASHBOARD_CSS } document::Link { rel: "stylesheet", href: DASHBOARD_CSS }
div { div { class: "sidebar-container",
class: "container",
SideBar { selected: 0 } SideBar { selected: 0 }
div {
class: "left_container", div { class: "dashboard-container",
div { id: "top_container", div { class: "summary-container",
RadialChart { percent: 0.6 } div { class: "summary-card", id: "online",
RadialChart { percent: 0.6 } div {
RadialChart { percent: 0.6 } p { "Online Servers" }
RadialChart { percent: 0.6 } h3 { "3" }
RadialChart { percent: 0.6 } }
RadialChart { percent: 0.6 } lucide_dioxus::CircleCheckBig { size: 32, color: "currentColor" }
RadialChart { percent: 0.6 } }
div { class: "summary-card", id: "issues",
div {
p { "Issues" }
h3 { "2" }
}
lucide_dioxus::TriangleAlert { size: 32, color: "currentColor" }
}
div { class: "summary-card", id: "cpu",
div {
p { "Avg CPU Usage" }
h3 { "42%" }
}
lucide_dioxus::Cpu { size: 32, color: "currentColor" }
}
div { class: "summary-card", id: "ram",
div {
p { "Avg Memory" }
h3 { "42%" }
}
lucide_dioxus::MemoryStick { size: 32, color: "currentColor" }
}
} }
div { id: "mid_container",
LineChart { data: vec![90, 60, 70, 50], max: 170, start_opacity: 0.3 } div { class: "overview-container",
div { class: "performance-card",
LineChart { data: vec![90, 20, 40, 90, 60], max: 100 }
}
div { class: "performance-card",
LineChart { data: vec![90, 20, 40, 90, 60], max: 100 }
}
} }
div { id: "bottom_container",
RadialChart { percent: 0.6 } div { class: "search-container",
RadialChart { percent: 0.6 } div { class: "search-input",
RadialChart { percent: 0.6 } lucide_dioxus::Search { size: 16, color: "currentColor" }
RadialChart { percent: 0.6 } input { placeholder: "Search servers by name, location, or IP..." }
RadialChart { percent: 0.6 } }
RadialChart { percent: 0.6 } button { "All (4)" }
RadialChart { percent: 0.6 } button { id: "online", "Online (3)" }
button { id: "issues", "Warning (1)" }
button { id: "ram", "Offline (1)" }
button { id: "cpu", "Maintenance (1)" }
} }
}
div { div { class: "server-container",
class: "right_container", div { class: "performance-card",
div { class: "right_box", LineChart { data: vec![90, 20, 40, 90, 60], max: 100 }
LineChart { data: vec![90, 60, 70, 50], max: 170, start_opacity: 0.3 } }
}
div { class: "right_box", div { class: "performance-card",
LineChart { data: vec![90, 60, 70, 50], max: 170, start_opacity: 0.3 } LineChart { data: vec![90, 20, 40, 90, 60], max: 100 }
}
} }
} }
} }