Server container

assets/dashboard.css

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

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

@@ -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 { class: "online", "Online (3)" }
-                    button { id: "issues", "Warning (1)" }
+                    button { class: "issues", "Warning (1)" }
-                    button { id: "ram", "Offline (1)" }
+                    button { class: "ram", "Offline (1)" }
-                    button { id: "cpu", "Maintenance (1)" }
+                    button { class: "cpu", "Maintenance (1)" }
                 }
 
                 div { class: "server-container",
-                    div {
+                    div { class: "server",
-                        h3 { "Web server 01" }
+                        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 {
+                            button { lucide_dioxus::EllipsisVertical { size: 16, color: "currentColor" } }
-                        h3 { "Web server 01" }
+                        }
-                    }
 
-                    div {
+                        div { class: "server-monitor",
-                        h3 { "Web server 01" }
+                            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" }
+                        }
                     }
                 }
             }