server components

assets/dashboard.css

@@ -185,20 +185,6 @@ body {
   font-weight: bold;
 }
 
-.server-container {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 25px;
-}
-
-.server-container .server {
-  box-sizing: border-box;
-  background-color: #fff;
-  border-radius: 10px;
-  width: 100%;
-  height: 100%;
-  padding: 30px;
-}
 .dashboard-container h3 {
   padding: 0;
   margin: 0;
@@ -217,21 +203,11 @@ body {
     padding-left: 25px;
   }
 
-  .server-container {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
   .overview-card {
     width: 100%;
   }
 }
 
-@media (max-width: 750px) {
-  .server-container {
-    grid-template-columns: repeat(1, 1fr);
-  }
-}
-
 .progress-bar {
   display: block;
   width: 100%;
@@ -249,113 +225,6 @@ body {
   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);
 }

assets/server.css

@@ -0,0 +1,152 @@
+.server-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 25px;
+}
+
+.server-container .server {
+  box-sizing: border-box;
+  background-color: #fff;
+  border-radius: 10px;
+  width: 100%;
+  height: 100%;
+  padding: 30px;
+}
+
+@media (max-width: 1300px) {
+  .server-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 750px) {
+  .server-container {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
+.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;
+  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;
+  color: currentColor;
+}
+
+.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;
+}
+
+.Online {
+  background-color: rgb(220, 252, 231);
+  color: rgb(22 101 52);
+}
+
+.Offline {
+  background-color: rgb(254, 226, 226);
+  color: rgb(153, 27, 27);
+}
+
+.Warning {
+  background-color: rgb(255, 237, 213);
+  color: rgb(154, 52, 18);
+}
+
+.Maintenance {
+  background-color: rgb(219, 234, 254);
+  color: rgb(30, 64, 175);
+}

src/components/mod.rs

@@ -1,5 +1,6 @@
-use dioxus::prelude::*;
+pub mod server;
 pub mod sidebar;
+use dioxus::prelude::*;
 
 #[component]
 pub fn LineChart(

src/components/server.rs

@@ -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

@@ -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",
+                    ServerComponent { server: Server {
-                        div { class: "server-heading",
+                        name: "Main Server".to_string(),
-                            div { class: "server-heading-inner",
+                        status: crate::components::server::Status::Online,
-                                div { class: "server-icon",
+                        ip: "10.0.0.5".to_string(),
-                                    lucide_dioxus::Server { size: 20, color: "currentColor" }
+                        cpu: 95,
-                                }
+                        memory: 60,
-                                div { class: "server-heading-info",
+                        storage: 43,
-                                    h3 { "Web server 01" }
+                        network: 88,
-                                    div {
+                    } }
-                                        div {
-                                            lucide_dioxus::CircleCheckBig { size: 12, color: "currentColor" }
-                                            p { "Online" }
-                                        }
-                                        p { "10.7.1.21" }
-                                    }
-                                }
-                            }
 
-                            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",
+                    ServerComponent { server: Server {
-                            div { p {
+                        name: "Database".to_string(),
-                                lucide_dioxus::Cpu { size: 16, color: "currentColor", class: "cpu" }
+                        status: crate::components::server::Status::Offline,
-                                "CPU"
+                        ip: "172.16.254.3".to_string(),
-                            } p { "10%" } }
+                        cpu: 12,
-                            ProgressBar { percent: 10, class: "low" }
+                        memory: 90,
+                        storage: 22,
+                        network: 10,
+                    } }
 
-                            div { p {
+                    ServerComponent { server: Server {
-                                lucide_dioxus::MemoryStick { size: 16, color: "currentColor", class: "ram" }
+                        name: "Backup Node".to_string(),
-                                "Memory"
+                        status: crate::components::server::Status::Maintenance,
-                            } p { "34%" } }
+                        ip: "192.168.100.22".to_string(),
-                            ProgressBar { percent: 60, class: "medium" }
+                        cpu: 83,
-
+                        memory: 41,
-                            div { p {
+                        storage: 96,
-                                lucide_dioxus::HardDrive { size: 16, color: "currentColor", class: "storage" }
+                        network: 70,
-                                "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" }
-                        }
-                    }
                 }
             }
         }