switch to typescript
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@@ -0,0 +1,26 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
import Image from "next/image";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
|
||||
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={180}
|
||||
height={38}
|
||||
priority
|
||||
/>
|
||||
<ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
|
||||
<li className="mb-2 tracking-[-.01em]">
|
||||
Get started by editing{" "}
|
||||
<code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
|
||||
src/app/page.tsx
|
||||
</code>
|
||||
.
|
||||
</li>
|
||||
<li className="tracking-[-.01em]">
|
||||
Save and see your changes instantly.
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<div className="flex gap-4 items-center flex-col sm:flex-row">
|
||||
<a
|
||||
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
Deploy now
|
||||
</a>
|
||||
<a
|
||||
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Read our docs
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/file.svg"
|
||||
alt="File icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Learn
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/window.svg"
|
||||
alt="Window icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Examples
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/globe.svg"
|
||||
alt="Globe icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Go to nextjs.org →
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
#[derive(Debug, Clone, PartialEq, Eq, serde::Serialize, serde::Deserialize)]
|
||||
pub struct User {
|
||||
username: String,
|
||||
password: String,
|
||||
}
|
||||
|
||||
#[derive(Debug, Clone, PartialEq, Eq, serde::Serialize, serde::Deserialize)]
|
||||
pub struct Session {
|
||||
uuid: String,
|
||||
}
|
||||
|
||||
#[server]
|
||||
pub async fn login(username: String, password: String) -> Result<String, ServerFnError> {
|
||||
let users = crate::backend::get_mongo::<mongodb::bson::Document>("users").await?;
|
||||
|
||||
match users
|
||||
.find_one(mongodb::bson::doc! {
|
||||
"username": username,
|
||||
"password": password,
|
||||
})
|
||||
.await?
|
||||
{
|
||||
Some(v) => {
|
||||
let sessions = crate::backend::get_mongo::<Session>("sessions").await?;
|
||||
if let mongodb::bson::Bson::ObjectId(id) = sessions
|
||||
.insert_one(Session {
|
||||
uuid: v.get_object_id("_id")?.to_hex(),
|
||||
})
|
||||
.await?
|
||||
.inserted_id
|
||||
{
|
||||
Ok(id.to_hex())
|
||||
} else {
|
||||
Err(ServerFnError::new(format!("Unable to extract session id")))
|
||||
}
|
||||
}
|
||||
None => Err(ServerFnError::new(format!("Invalid credentials"))),
|
||||
}
|
||||
}
|
||||
|
||||
#[cfg(feature = "server")]
|
||||
pub async fn validate_session(id: String) -> bool {
|
||||
use mongodb::bson::oid::ObjectId;
|
||||
|
||||
if let Ok(sessions) = crate::backend::get_mongo::<Session>("sessions").await {
|
||||
if let Some(obj_id) = ObjectId::parse_str(id).ok() {
|
||||
match sessions
|
||||
.find_one(mongodb::bson::doc! {
|
||||
"_id": obj_id,
|
||||
})
|
||||
.await
|
||||
{
|
||||
Ok(Some(_)) => true,
|
||||
_ => false,
|
||||
}
|
||||
} else {
|
||||
false
|
||||
}
|
||||
} else {
|
||||
false
|
||||
}
|
||||
}
|
||||
|
||||
#[server]
|
||||
pub async fn check_validate_session(id: String) -> Result<bool, ServerFnError> {
|
||||
Ok(validate_session(id).await)
|
||||
}
|
||||
@@ -1,73 +0,0 @@
|
||||
pub mod auth;
|
||||
|
||||
use crate::components::server::Server;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
#[cfg(feature = "server")]
|
||||
use futures_util::stream::TryStreamExt;
|
||||
|
||||
#[cfg(feature = "server")]
|
||||
const DB_URL: &'static str = "mongodb://admin:admin@localhost/";
|
||||
|
||||
#[cfg(feature = "server")]
|
||||
pub async fn get_mongo<T: Send + Sync>(
|
||||
collection: &str,
|
||||
) -> Result<mongodb::Collection<T>, mongodb::error::Error> {
|
||||
let client = mongodb::Client::with_uri_str(DB_URL).await?;
|
||||
|
||||
Ok(client.database("sentryx").collection(collection))
|
||||
}
|
||||
|
||||
#[cfg(feature = "server")]
|
||||
fn parse_search_query(input: &str) -> Vec<String> {
|
||||
let re = regex::Regex::new(r#""([^"]+)"|(\S+)"#).unwrap();
|
||||
|
||||
re.captures_iter(input)
|
||||
.filter_map(|cap| cap.get(1).or_else(|| cap.get(2)))
|
||||
.map(|m| m.as_str().to_string())
|
||||
.collect()
|
||||
}
|
||||
|
||||
#[cfg(feature = "server")]
|
||||
fn build_or_filter(input: &str, fields: &[&str]) -> mongodb::bson::Document {
|
||||
let phrases = parse_search_query(input);
|
||||
let mut or_clauses = Vec::new();
|
||||
|
||||
for phrase in phrases {
|
||||
for &field in fields {
|
||||
or_clauses.push(mongodb::bson::doc! {
|
||||
field: mongodb::bson::Regex {
|
||||
pattern: phrase.clone(),
|
||||
options: "i".into(), // case-insensitive
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
mongodb::bson::doc! { "$or": or_clauses }
|
||||
}
|
||||
|
||||
#[server]
|
||||
pub async fn get_servers(session: String, search: String) -> Result<Vec<Server>, ServerFnError> {
|
||||
if !auth::validate_session(session).await {
|
||||
return Err(ServerFnError::new(format!("Invalid session")));
|
||||
}
|
||||
|
||||
let servers = get_mongo::<Server>("servers").await?;
|
||||
|
||||
let filter = if search.trim().is_empty() {
|
||||
mongodb::bson::doc! {}
|
||||
} else {
|
||||
build_or_filter(&search, &["name", "ip"])
|
||||
};
|
||||
|
||||
let mut cursor = servers.find(filter).await?;
|
||||
|
||||
let mut svo = Vec::new();
|
||||
|
||||
while let Some(doc) = cursor.try_next().await? {
|
||||
svo.push(doc);
|
||||
}
|
||||
|
||||
Ok(svo)
|
||||
}
|
||||
@@ -1,203 +0,0 @@
|
||||
pub mod server;
|
||||
pub mod sidebar;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub fn LineChart(
|
||||
data: Vec<i32>,
|
||||
max: Option<i32>,
|
||||
start_opacity: Option<f32>,
|
||||
end_opacity: Option<f32>,
|
||||
class: Option<String>,
|
||||
) -> Element {
|
||||
let width = 300.0;
|
||||
let height = 200.0;
|
||||
let start_opacity = start_opacity.unwrap_or(0.4);
|
||||
let end_opacity = end_opacity.unwrap_or(0.0);
|
||||
let class_attr = match class {
|
||||
Some(c) => format!("line-chart {}", c),
|
||||
None => "line-chart".to_string(),
|
||||
};
|
||||
|
||||
let max_y = max
|
||||
.map(|v| v as f64)
|
||||
.unwrap_or_else(|| *data.iter().max().unwrap_or(&100) as f64);
|
||||
|
||||
let points: Vec<(f64, f64)> = data
|
||||
.iter()
|
||||
.enumerate()
|
||||
.map(|(i, &y)| {
|
||||
let x = i as f64 / (data.len() - 1).max(1) as f64 * width;
|
||||
let y = height - (y as f64 / max_y * height);
|
||||
(x, y)
|
||||
})
|
||||
.collect();
|
||||
|
||||
let path_data = {
|
||||
let mut d = format!("M {} {}", points[0].0, points[0].1);
|
||||
for i in 0..points.len() - 1 {
|
||||
let (x0, y0) = if i == 0 { points[0] } else { points[i - 1] };
|
||||
let (x1, y1) = points[i];
|
||||
let (x2, y2) = points[i + 1];
|
||||
let (x3, y3) = if i + 2 < points.len() {
|
||||
points[i + 2]
|
||||
} else {
|
||||
points[i + 1]
|
||||
};
|
||||
|
||||
let cp1x = x1 + (x2 - x0) / 6.0;
|
||||
let cp1y = y1 + (y2 - y0) / 6.0;
|
||||
let cp2x = x2 - (x3 - x1) / 6.0;
|
||||
let cp2y = y2 - (y3 - y1) / 6.0;
|
||||
|
||||
d += &format!(" C {} {}, {} {}, {} {}", cp1x, cp1y, cp2x, cp2y, x2, y2);
|
||||
}
|
||||
d
|
||||
};
|
||||
|
||||
let fill_path_data = {
|
||||
let mut d = format!("M {} {}", points[0].0, height);
|
||||
|
||||
for i in 0..points.len() - 1 {
|
||||
let (x0, y0) = if i == 0 { points[0] } else { points[i - 1] };
|
||||
let (x1, y1) = points[i];
|
||||
let (x2, y2) = points[i + 1];
|
||||
let (x3, y3) = if i + 2 < points.len() {
|
||||
points[i + 2]
|
||||
} else {
|
||||
points[i + 1]
|
||||
};
|
||||
|
||||
let cp1x = x1 + (x2 - x0) / 6.0;
|
||||
let cp1y = y1 + (y2 - y0) / 6.0;
|
||||
let cp2x = x2 - (x3 - x1) / 6.0;
|
||||
let cp2y = y2 - (y3 - y1) / 6.0;
|
||||
|
||||
if i == 0 {
|
||||
d += &format!(" L {} {}", points[0].0, points[0].1);
|
||||
}
|
||||
|
||||
d += &format!(" C {} {}, {} {}, {} {}", cp1x, cp1y, cp2x, cp2y, x2, y2);
|
||||
}
|
||||
|
||||
d += &format!(" L {} {}", points.last().unwrap().0, height);
|
||||
d + " Z"
|
||||
};
|
||||
|
||||
rsx! {
|
||||
div {
|
||||
class: "{class_attr}",
|
||||
svg {
|
||||
preserve_aspect_ratio: "none",
|
||||
class: "line-chart-svg",
|
||||
width: "{width}",
|
||||
height: "{height}",
|
||||
view_box: "0 0 {width} {height}",
|
||||
xmlns: "http://www.w3.org/2000/svg",
|
||||
|
||||
defs {
|
||||
linearGradient {
|
||||
id: "gradient-fill",
|
||||
x1: "0",
|
||||
y1: "0",
|
||||
x2: "0",
|
||||
y2: "1",
|
||||
|
||||
stop {
|
||||
offset: "0%",
|
||||
stop_color: "currentColor",
|
||||
stop_opacity: "{start_opacity}",
|
||||
}
|
||||
stop {
|
||||
offset: "100%",
|
||||
stop_color: "#currentColor",
|
||||
stop_opacity: "{end_opacity}",
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
path {
|
||||
class: "fill",
|
||||
d: "{fill_path_data}",
|
||||
fill: "url(#gradient-fill)"
|
||||
}
|
||||
|
||||
path {
|
||||
class: "line",
|
||||
d: "{path_data}",
|
||||
fill: "none",
|
||||
stroke: "currentColor",
|
||||
stroke_width: "2"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[allow(unused)]
|
||||
const RADIUS: f64 = 50.0;
|
||||
#[allow(unused)]
|
||||
const CIRCUMFERENCE: f64 = 2.0 * std::f64::consts::PI * RADIUS;
|
||||
|
||||
#[component]
|
||||
pub fn RadialChart(percent: f64) -> Element {
|
||||
let offset = CIRCUMFERENCE * (1.0 - percent.clamp(0.0, 1.0));
|
||||
|
||||
rsx! {
|
||||
svg {
|
||||
width: "140",
|
||||
height: "140",
|
||||
view_box: "0 0 120 120",
|
||||
xmlns: "http://www.w3.org/2000/svg",
|
||||
|
||||
// Outline circle
|
||||
circle {
|
||||
cx: "60",
|
||||
cy: "60",
|
||||
r: "{RADIUS}",
|
||||
stroke: "none",
|
||||
stroke_width: "10.0",
|
||||
fill: "none",
|
||||
}
|
||||
|
||||
// Progress circle
|
||||
circle {
|
||||
cx: "60",
|
||||
cy: "60",
|
||||
r: "{RADIUS}",
|
||||
stroke: "#4f46e5",
|
||||
stroke_width: "10.5",
|
||||
fill: "none",
|
||||
stroke_dasharray: "{CIRCUMFERENCE}",
|
||||
stroke_dashoffset: "{offset}",
|
||||
transform: "rotate(-90 60 60)",
|
||||
stroke_linecap: "round",
|
||||
}
|
||||
|
||||
// Optional center text
|
||||
text {
|
||||
x: "60",
|
||||
y: "65",
|
||||
text_anchor: "middle",
|
||||
font_size: "18",
|
||||
fill: "#4f46e5",
|
||||
font_family: "sans-serif",
|
||||
"{(percent * 100.0).round()}%"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
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: "{class_attr}",
|
||||
span { class: "progress", style: format!("width: {}%; background-color: currentColor;", percent.clamp(0, 100)) }
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,99 +0,0 @@
|
||||
use crate::components::ProgressBar;
|
||||
use dioxus::prelude::*;
|
||||
|
||||
const SERVER_CSS: Asset = asset!("/assets/styles/server.css");
|
||||
|
||||
#[derive(Debug, Clone, PartialEq, Eq, serde::Serialize, serde::Deserialize)]
|
||||
pub enum Status {
|
||||
Online,
|
||||
Offline,
|
||||
Warning,
|
||||
Maintenance,
|
||||
}
|
||||
|
||||
#[derive(Debug, Clone, PartialEq, Eq, serde::Serialize, serde::Deserialize)]
|
||||
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 > 50 {
|
||||
String::from("medium")
|
||||
} else {
|
||||
String::from("low")
|
||||
}
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
use crate::Route;
|
||||
|
||||
const SIDEBAR_CSS: Asset = asset!("/assets/styles/sidebar.css");
|
||||
|
||||
pub struct SideBarItem {
|
||||
pub name: &'static str,
|
||||
pub icon: fn() -> Element,
|
||||
pub route: Route,
|
||||
}
|
||||
|
||||
const SIDEBAR_ITEMS: &[SideBarItem] = &[
|
||||
SideBarItem {
|
||||
name: "Dashboard",
|
||||
icon: || rsx!(lucide_dioxus::Gauge { size: 35 }),
|
||||
route: Route::Dashboard {},
|
||||
},
|
||||
SideBarItem {
|
||||
name: "Settings",
|
||||
icon: || rsx!(lucide_dioxus::Settings { size: 35 }),
|
||||
route: Route::Settings {},
|
||||
},
|
||||
];
|
||||
|
||||
#[component]
|
||||
pub fn SideBar(selected: usize) -> Element {
|
||||
rsx! {
|
||||
document::Link { rel: "stylesheet", href: SIDEBAR_CSS }
|
||||
|
||||
div {
|
||||
id: "sidebar",
|
||||
|
||||
for (i, itm) in SIDEBAR_ITEMS.iter().enumerate() {
|
||||
Link {
|
||||
to: itm.route.clone(),
|
||||
class: if i == selected {"sidebar-item sidebar-selected"} else {"sidebar-item"},
|
||||
|
||||
{(itm.icon)()}
|
||||
|
||||
p { "{itm.name}" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,116 +0,0 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
use crate::components::{server::ServerComponent, sidebar::SideBar, LineChart, ProgressBar};
|
||||
use lucide_dioxus;
|
||||
|
||||
const DASHBOARD_CSS: Asset = asset!("/assets/styles/dashboard.css");
|
||||
|
||||
#[component]
|
||||
pub fn Dashboard() -> Element {
|
||||
let session = crate::utils::use_session();
|
||||
let (servers, server_query) = session.use_servers();
|
||||
|
||||
rsx! {
|
||||
document::Link { rel: "stylesheet", href: DASHBOARD_CSS }
|
||||
|
||||
div { class: "sidebar-container",
|
||||
SideBar { selected: 0 }
|
||||
|
||||
div { class: "dashboard-container",
|
||||
div { class: "summary-container",
|
||||
div { class: "summary-card", class: "online",
|
||||
div {
|
||||
p { "Online Servers" }
|
||||
h3 { "3" }
|
||||
}
|
||||
lucide_dioxus::CircleCheckBig { size: 32, color: "currentColor" }
|
||||
}
|
||||
|
||||
div { class: "summary-card", class: "issues",
|
||||
div {
|
||||
p { "Issues" }
|
||||
h3 { "2" }
|
||||
}
|
||||
lucide_dioxus::TriangleAlert { size: 32, color: "currentColor" }
|
||||
}
|
||||
|
||||
div { class: "summary-card", class: "cpu",
|
||||
div {
|
||||
p { "Avg CPU Usage" }
|
||||
h3 { "42%" }
|
||||
}
|
||||
lucide_dioxus::Cpu { size: 32, color: "currentColor" }
|
||||
}
|
||||
|
||||
div { class: "summary-card", class: "ram",
|
||||
div {
|
||||
p { "Avg Memory" }
|
||||
h3 { "42%" }
|
||||
}
|
||||
lucide_dioxus::MemoryStick { size: 32, color: "currentColor" }
|
||||
}
|
||||
}
|
||||
|
||||
div { class: "overview-container",
|
||||
div { class: "performance-card",
|
||||
div { class: "chart-container",
|
||||
div { class: "y-axis",
|
||||
{(0..=100).rev().step_by(25).map(|v| rsx!(div { "{v}" }))}
|
||||
}
|
||||
div { class: "chart-area",
|
||||
div { class: "performance-stack",
|
||||
LineChart { data: vec![30, 35, 23, 21, 32, 40, 53, 61, 47, 36, 26, 18], max: 100, class: "lc1" }
|
||||
LineChart { data: vec![47, 50, 60, 30, 50], max: 100, class: "lc2" }
|
||||
LineChart { data: vec![23, 50, 40, 50, 52], max: 100, class: "lc3" }
|
||||
}
|
||||
div { class: "x-axis",
|
||||
{(0..24).step_by(2).map(|h| rsx!(div { "{h}h" }))}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
div { class: "overview-card",
|
||||
h2 {
|
||||
lucide_dioxus::Activity { size: 22, color: "currentColor" }
|
||||
"System Overview"
|
||||
}
|
||||
div { p { "Average CPU" } p { "10%" } }
|
||||
ProgressBar { percent: 10, class: "cpu" }
|
||||
|
||||
div { p { "Average Memory" } p { "24%" } }
|
||||
ProgressBar { percent: 10, class: "ram" }
|
||||
|
||||
div { p { "Average Storage" } p { "24%" } }
|
||||
ProgressBar { percent: 10, class: "storage" }
|
||||
|
||||
div { p { "Average Network" } p { "24%" } }
|
||||
ProgressBar { percent: 10, class: "network" }
|
||||
}
|
||||
}
|
||||
|
||||
div { class: "search-container",
|
||||
div { class: "search-input",
|
||||
lucide_dioxus::Search { size: 16, color: "currentColor" }
|
||||
input {
|
||||
onchange: {let mut server_query = server_query.clone(); move |e: Event<FormData>| {server_query.set(e.value())}},
|
||||
|
||||
placeholder: "Search servers by name, location, or IP..." }
|
||||
}
|
||||
button { class: "All", "All (4)" }
|
||||
button { class: "Online", "Online (3)" }
|
||||
button { class: "Warning", "Warning (1)" }
|
||||
button { class: "Offline", "Offline (1)" }
|
||||
button { class: "Maintenance", "Maintenance (1)" }
|
||||
}
|
||||
|
||||
div { class: "server-container",
|
||||
for s in (*servers.read()).clone() {
|
||||
ServerComponent { server: s }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
-115
@@ -1,115 +0,0 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
use crate::{
|
||||
backend::{self},
|
||||
utils::{self},
|
||||
};
|
||||
|
||||
const LOGIN_CSS: Asset = asset!("/assets/styles/login.css");
|
||||
|
||||
#[component]
|
||||
pub fn Login() -> Element {
|
||||
let username = use_signal(|| String::new());
|
||||
let password = use_signal(|| String::new());
|
||||
let error: Signal<Option<String>> = use_signal(|| None);
|
||||
let session = utils::use_session();
|
||||
|
||||
// Check for existing session on mount
|
||||
use_effect({
|
||||
let session = session.clone();
|
||||
move || {
|
||||
let session = session.clone();
|
||||
spawn(async move {
|
||||
// Optional: verify with the server if session is actually valid
|
||||
if backend::auth::check_validate_session(session.get_id())
|
||||
.await
|
||||
.unwrap_or(false)
|
||||
{
|
||||
utils::redirect("/dashboard");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
let is_disabled = {
|
||||
let username = username.clone();
|
||||
let password = password.clone();
|
||||
move || username().is_empty() || password().is_empty()
|
||||
};
|
||||
|
||||
let log_in = {
|
||||
let username = username.clone();
|
||||
let password = password.clone();
|
||||
let mut error = error.clone();
|
||||
move || async move {
|
||||
if username().is_empty() || password().is_empty() {
|
||||
return;
|
||||
}
|
||||
error.set(None);
|
||||
match backend::auth::login(username.read().clone(), password.read().clone()).await {
|
||||
Ok(id) => {
|
||||
utils::set_cookie("session_id", &id);
|
||||
utils::redirect("/dashboard");
|
||||
}
|
||||
Err(e) => error.set(Some(
|
||||
e.to_string().replace("error running server function: ", ""),
|
||||
)),
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
rsx! {
|
||||
document::Link { rel: "stylesheet", href: LOGIN_CSS }
|
||||
|
||||
div {
|
||||
id: "login_wrapper",
|
||||
onkeypress: move |e: Event<KeyboardData>| async move {
|
||||
if e.key() == Key::Enter {
|
||||
log_in().await;
|
||||
}
|
||||
},
|
||||
tabindex: "0",
|
||||
|
||||
img {
|
||||
id: "background_img",
|
||||
src: asset!("assets/background.svg")
|
||||
}
|
||||
|
||||
div {
|
||||
id: "login_container",
|
||||
h1 { "Login" }
|
||||
|
||||
div {
|
||||
p { "Username" }
|
||||
input {
|
||||
class: "field",
|
||||
oninput: {
|
||||
let mut username = username.clone();
|
||||
move |e: Event<FormData>| {username.set(e.value())}
|
||||
},
|
||||
}
|
||||
}
|
||||
div{
|
||||
p { "Password" }
|
||||
input {
|
||||
class: "field",
|
||||
oninput: {
|
||||
let mut password = password.clone();
|
||||
move |e: Event<FormData>| {password.set(e.value())}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
if let Some(e) = &*error.read() {
|
||||
p { class: "error", "{e}" }
|
||||
}
|
||||
|
||||
button {
|
||||
disabled: is_disabled(),
|
||||
onclick: move |_| log_in(),
|
||||
"Login"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
-62
@@ -1,62 +0,0 @@
|
||||
mod backend;
|
||||
mod components;
|
||||
mod dashboard;
|
||||
mod login;
|
||||
mod settings;
|
||||
mod utils;
|
||||
|
||||
use dioxus::prelude::*;
|
||||
use web_sys::window;
|
||||
|
||||
use dashboard::Dashboard;
|
||||
use login::Login;
|
||||
use settings::Settings;
|
||||
|
||||
#[derive(Debug, Clone, Routable, PartialEq)]
|
||||
#[rustfmt::skip]
|
||||
enum Route {
|
||||
#[route("/")]
|
||||
Login {},
|
||||
#[route("/dashboard")]
|
||||
Dashboard {},
|
||||
#[route("/settings")]
|
||||
Settings {},
|
||||
}
|
||||
|
||||
const FAVICON: Asset = asset!("/assets/favicon.ico");
|
||||
const FONT_CSS: Asset = asset!("/assets/styles/font.css");
|
||||
const THEME_CSS: Asset = asset!("/assets/styles/theme.css");
|
||||
|
||||
fn main() {
|
||||
dioxus::launch(App);
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn App() -> Element {
|
||||
let theme = use_signal(|| String::from("light"));
|
||||
|
||||
use_effect({
|
||||
let mut theme = theme.clone();
|
||||
move || {
|
||||
theme.set(utils::get_cookie("theme").unwrap_or_default());
|
||||
}
|
||||
});
|
||||
|
||||
use_effect({
|
||||
let theme = theme.clone();
|
||||
move || {
|
||||
if let Some(document) = window().and_then(|w| w.document()) {
|
||||
if let Some(html) = document.document_element() {
|
||||
html.set_class_name(&*theme.read());
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
rsx! {
|
||||
document::Link { rel: "icon", href: FAVICON }
|
||||
document::Link { rel: "stylesheet", href: FONT_CSS }
|
||||
document::Link { rel: "stylesheet", href: THEME_CSS }
|
||||
Router::<Route> { }
|
||||
}
|
||||
}
|
||||
@@ -1,68 +0,0 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
use crate::{components::sidebar::SideBar, utils};
|
||||
|
||||
pub enum Property {
|
||||
Dropdown(&'static [&'static str]),
|
||||
}
|
||||
|
||||
const SETTINGS_CSS: Asset = asset!("/assets/styles/settings.css");
|
||||
const OPTIONS: &[(&str, Property, bool)] = &[(
|
||||
"theme",
|
||||
Property::Dropdown(&["light", "dark", "black"]),
|
||||
true,
|
||||
)];
|
||||
|
||||
#[component]
|
||||
pub fn Settings() -> Element {
|
||||
rsx! {
|
||||
document::Link { rel: "stylesheet", href: SETTINGS_CSS }
|
||||
|
||||
div { class: "sidebar-container",
|
||||
SideBar { selected: 1 }
|
||||
|
||||
div { class: "settings-container",
|
||||
div {
|
||||
for (name, prop, needs_refresh) in OPTIONS {
|
||||
match prop {
|
||||
Property::Dropdown(opts) => {
|
||||
rsx!{
|
||||
div { class: "dropdown-wrapper",
|
||||
button { class: "dropdown-button", onclick: |_| {
|
||||
let Some(document) = web_sys::window().and_then(|w| w.document()) else {
|
||||
return;
|
||||
};
|
||||
let e = document.get_element_by_id(name).unwrap();
|
||||
if e.class_name() == "dropdown" {
|
||||
e.set_class_name("dropdown dropdown-none");
|
||||
} else {
|
||||
e.set_class_name("dropdown");
|
||||
}
|
||||
},
|
||||
"{name}"
|
||||
lucide_dioxus::ChevronDown { size: 16, class: "chevron", color: "currentColor" }
|
||||
}
|
||||
div {
|
||||
id: "{name}",
|
||||
class: "dropdown dropdown-none",
|
||||
for o in opts {
|
||||
button { onclick: move |_| {
|
||||
utils::set_cookie(name, &o);
|
||||
if *needs_refresh {
|
||||
if let Some(win) = web_sys::window() {
|
||||
win.location().reload().unwrap();
|
||||
}
|
||||
}
|
||||
}, "{o}" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
-116
@@ -1,116 +0,0 @@
|
||||
use dioxus::prelude::*;
|
||||
use std::str::FromStr;
|
||||
use wasm_bindgen::JsCast;
|
||||
use web_sys::{window, HtmlDocument};
|
||||
|
||||
use crate::{backend, components::server::Server};
|
||||
|
||||
pub fn set_cookie(name: &str, value: &str) {
|
||||
let Some(document) = window().and_then(|w| w.document()) else {
|
||||
return;
|
||||
};
|
||||
|
||||
let Ok(html_doc) = document.dyn_into::<HtmlDocument>() else {
|
||||
return;
|
||||
};
|
||||
|
||||
let cookie = format!("{name}={value}; path=/");
|
||||
let _ = html_doc.set_cookie(&cookie);
|
||||
}
|
||||
|
||||
pub fn get_cookie(name: &str) -> Option<String> {
|
||||
let Some(document) = window().and_then(|w| w.document()) else {
|
||||
return None;
|
||||
};
|
||||
let Ok(html_doc) = document.dyn_into::<HtmlDocument>() else {
|
||||
return None;
|
||||
};
|
||||
|
||||
let Ok(cookie_string) = html_doc.cookie() else {
|
||||
return None;
|
||||
};
|
||||
for cookie in cookie_string.split(';') {
|
||||
let cookie = cookie.trim();
|
||||
if let Some((k, v)) = cookie.split_once('=') {
|
||||
if k == name {
|
||||
return Some(v.to_string());
|
||||
}
|
||||
}
|
||||
}
|
||||
None
|
||||
}
|
||||
|
||||
pub fn use_cookie<T: FromStr + 'static>(name: &str, default: fn() -> T) -> Signal<T> {
|
||||
let name = name.to_string();
|
||||
let signal = use_signal(default);
|
||||
|
||||
use_effect({
|
||||
let mut signal = signal.clone();
|
||||
move || {
|
||||
if let Some(c) = get_cookie(&name) {
|
||||
if let Ok(cv) = T::from_str(&c) {
|
||||
signal.set(cv);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
signal
|
||||
}
|
||||
|
||||
pub fn redirect(target: &str) {
|
||||
web_sys::window()
|
||||
.unwrap()
|
||||
.location()
|
||||
.set_href(target)
|
||||
.unwrap();
|
||||
}
|
||||
|
||||
#[derive(Clone)]
|
||||
pub struct Session(Signal<String>);
|
||||
|
||||
pub fn use_session() -> Session {
|
||||
Session(use_cookie("session_id", || String::new()))
|
||||
}
|
||||
|
||||
impl Session {
|
||||
pub fn get_id(&self) -> String {
|
||||
self.0.read().clone()
|
||||
}
|
||||
|
||||
pub fn use_servers(&self) -> (Signal<Vec<Server>>, Signal<String>) {
|
||||
let query = use_signal(|| String::new());
|
||||
let servers = use_signal(|| Vec::new());
|
||||
let id = self.0.clone();
|
||||
|
||||
use_effect(move || {
|
||||
let query_value = query.read().clone();
|
||||
let mut servers = servers.clone();
|
||||
|
||||
spawn(async move {
|
||||
if let Ok(v) = request(backend::get_servers(id.read().clone(), query_value).await) {
|
||||
servers.set(v);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
(servers, query)
|
||||
}
|
||||
}
|
||||
|
||||
pub fn request<T>(o: Result<T, ServerFnError>) -> Result<T, ServerFnError> {
|
||||
match o {
|
||||
Err(e) => match e {
|
||||
ServerFnError::ServerError(e) => {
|
||||
if e == "Invalid session" {
|
||||
redirect("/");
|
||||
Err(ServerFnError::ServerError(e))
|
||||
} else {
|
||||
Err(ServerFnError::ServerError(e))
|
||||
}
|
||||
}
|
||||
_ => Err(e),
|
||||
},
|
||||
_ => o,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user