Add new home views to rustfs-gui (#222)

- Create `Home` component in `components/Home.rs`. - Create `Navbar` component in `components/navbar.rs`. - Create `HomeView` component in `views/home.rs`. - Update `views/mod.rs` to include new views. - Update routing in `main.rs` to include new routes for `HomeView`.
2026-01-17 01:30:33 +00:00 · 2025-02-18 01:29:27 +08:00
parent 836956ad87
commit 08bca5a129
10 changed files with 478 additions and 6 deletions
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -5438,6 +5438,8 @@ dependencies = [
 "serde",
 "serde_json",
 "tokio",
+ "tracing-appender",
+ "tracing-subscriber",
 "zip",
 ]

@@ -6682,6 +6684,18 @@ dependencies = [
 "tracing-core",
 ]

+[[package]]
+name = "tracing-appender"
+version = "0.2.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3566e8ce28cc0a3fe42519fc80e6b4c943cc4c8cef275620eb8dac2d3d4e06cf"
+dependencies = [
+ "crossbeam-channel",
+ "thiserror 1.0.69",
+ "time",
+ "tracing-subscriber",
+]
+
 [[package]]
 name = "tracing-attributes"
 version = "0.1.28"
@@ -6724,6 +6738,16 @@ dependencies = [
 "tracing-core",
 ]

+[[package]]
+name = "tracing-serde"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "704b1aeb7be0d0a84fc9828cae51dab5970fee5088f83d1dd7ee6f6246fc6ff1"
+dependencies = [
+ "serde",
+ "tracing-core",
+]
+
 [[package]]
 name = "tracing-subscriber"
 version = "0.3.19"
@@ -6734,6 +6758,8 @@ dependencies = [
 "nu-ansi-term",
 "once_cell",
 "regex",
+ "serde",
+ "serde_json",
 "sharded-slab",
 "smallvec",
 "thread_local",
@@ -6741,6 +6767,7 @@ dependencies = [
 "tracing",
 "tracing-core",
 "tracing-log",
+ "tracing-serde",
 ]

 [[package]]
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -95,6 +95,7 @@ tower = { version = "0.5.2", features = ["timeout"] }
 tracing = "0.1.41"
 tracing-error = "0.2.1"
 tracing-subscriber = { version = "0.3.19", features = ["env-filter", "time"] }
+tracing-appender = "0.2.3"
 transform-stream = "0.3.1"
 url = "2.5.4"
 uuid = { version = "1.12.1", features = [
--- a/cli/rustfs-gui/Cargo.toml
+++ b/cli/rustfs-gui/Cargo.toml
@@ -17,6 +17,8 @@ rfd = { workspace = true }
 serde = { workspace = true }
 serde_json = { workspace = true }
 tokio = { workspace = true, features = ["io-util", "net", "process", "sync"] }
+tracing-subscriber = { workspace = true, features = ["fmt", "env-filter", "tracing-log", "time", "local-time", "json"] }
+tracing-appender = { workspace = true }
 zip = { workspace = true }


--- a/cli/rustfs-gui/src/components/home.rs
+++ b/cli/rustfs-gui/src/components/home.rs
@@ -0,0 +1,315 @@
+use crate::components::navbar::LoadingSpinner;
+use crate::utils::{RustFSConfig, ServiceManager};
+use crate::Route;
+use chrono::Datelike;
+use dioxus::logger::tracing::debug;
+use dioxus::prelude::*;
+use std::time::Duration;
+
+const HEADER_LOGO: Asset = asset!("/assets/rustfs-logo.svg");
+const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css");
+
+/// Define the state of the service
+#[derive(PartialEq, Debug, Clone)]
+enum ServiceState {
+    Start,
+    Stop,
+}
+
+/// Define the Home component
+/// The Home component is the main component of the application
+/// It is responsible for starting and stopping the service
+/// It also displays the service status and provides a button to toggle the service
+/// The Home component also displays the footer of the application
+/// The footer contains links to the official site, documentation, GitHub, and license
+/// The footer also displays the version of the application
+/// The Home component also contains a button to change the theme of the application
+/// The Home component also contains a button to go to the settings page
+#[component]
+pub fn Home() -> Element {
+    #[allow(clippy::redundant_closure)]
+    let service = use_signal(|| ServiceManager::new());
+    let conf = RustFSConfig::load().unwrap_or_else(|e| {
+        ServiceManager::show_error(&format!("加载配置失败：{}", e));
+        RustFSConfig::default()
+    });
+
+    debug!("loaded configurations:{:?}", conf);
+    let config = use_signal(|| conf.clone());
+
+    use dioxus_router::prelude::Link;
+    use document::{Meta, Stylesheet, Title};
+    let mut service_state = use_signal(|| ServiceState::Start);
+    // Create a periodic check on the effect of the service status
+    use_effect(move || {
+        spawn(async move {
+            loop {
+                if let Some(pid) = ServiceManager::check_service_status().await {
+                    debug!("service_running true pid: {:?}", pid);
+                    service_state.set(ServiceState::Stop);
+                } else {
+                    debug!("service_running true pid: 0");
+                    service_state.set(ServiceState::Start);
+                }
+                tokio::time::sleep(Duration::from_secs(2)).await;
+            }
+        });
+    });
+    debug!("project start service_state: {:?}", service_state.read());
+    // Use 'use_signal' to manage service status
+    let mut loading = use_signal(|| false);
+    let mut start_service = move |_| {
+        let service = service;
+        let config = config.read().clone();
+        let mut service_state = service_state;
+        // set the loading status
+        loading.set(true);
+        debug!("stop loading_state: {:?}", loading.read());
+        spawn(async move {
+            match service.read().start(config).await {
+                Ok(result) => {
+                    if result.success {
+                        let duration = result.end_time - result.start_time;
+                        debug!("The service starts successfully and takes a long time:{}ms", duration.num_milliseconds());
+                        service_state.set(ServiceState::Stop);
+                    } else {
+                        ServiceManager::show_error(&result.message);
+                        service_state.set(ServiceState::Start);
+                    }
+                }
+                Err(e) => {
+                    ServiceManager::show_error(&format!("服务启动失败：{}", e));
+                }
+            }
+            // Only set loading to false when it's actually done
+            loading.set(false);
+            debug!("start loading_state: {:?}", loading.read());
+        });
+    };
+
+    let mut stop_service = move |_| {
+        let service = service;
+        let mut service_state = service_state;
+        // set the loading status
+        loading.set(true);
+        spawn(async move {
+            match service.read().stop().await {
+                Ok(result) => {
+                    if result.success {
+                        let duration = result.end_time - result.start_time;
+                        debug!("The service stops successfully and takes a long time:{}ms", duration.num_milliseconds());
+                        service_state.set(ServiceState::Start);
+                    } else {
+                        ServiceManager::show_error(&result.message);
+                    }
+                }
+                Err(e) => {
+                    ServiceManager::show_error(&format!("服务停止失败：{}", e));
+                }
+            }
+            debug!("service_state: {:?}", service_state.read());
+            // Only set loading to false when it's actually done
+            loading.set(false);
+            debug!("stop loading_state: {:?}", loading.read());
+        });
+    };
+
+    // Toggle the state when the button is clicked
+    let toggle_service = {
+        let mut service_state = service_state;
+        debug!("toggle_service service_state: {:?}", service_state.read());
+        move |_| {
+            if service_state.read().eq(&ServiceState::Stop) {
+                // If the service status is started, you need to run a command to stop the service
+                stop_service(());
+                service_state.set(ServiceState::Start);
+            } else {
+                start_service(());
+                service_state.set(ServiceState::Stop);
+            }
+        }
+    };
+
+    // Define dynamic styles based on state
+    let button_class = if service_state.read().eq(&ServiceState::Start) {
+        "bg-[#111827] hover:bg-[#1f2937] text-white px-4 py-2 rounded-md flex items-center space-x-2"
+    } else {
+        "bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md flex items-center space-x-2"
+    };
+
+    rsx! {
+        // The Stylesheet component inserts a style link into the head of the document
+        Stylesheet {href: TAILWIND_CSS,}
+        Title { "RustFS APP" }
+        Meta {
+            name: "description",
+            content: "RustFS RustFS 用热门安全的 Rust 语言开发，兼容 S3 协议。适用于 AI/ML 及海量数据存储、大数据、互联网、工业和保密存储等全部场景。近乎免费使用。遵循 Apache 2 协议，支持国产保密设备和系统。",
+        }
+        div { class: "min-h-screen flex flex-col items-center bg-white",
+            div { class: "absolute top-4 right-6 flex space-x-2",
+                // change theme
+                button { class: "p-2 hover:bg-gray-100 rounded-lg", ChangeThemeButton {} }
+                // setting button
+                Link {
+                    class: "p-2 hover:bg-gray-100 rounded-lg",
+                    to: Route::HomeViews {},
+                    SettingButton {}
+                }
+            }
+            main { class: "flex-1 flex flex-col items-center justify-center space-y-6 p-4",
+                div { class: "w-24 h-24 bg-gray-900 rounded-full flex items-center justify-center",
+                    img { alt: "Logo", class: "w-16 h-16", src: HEADER_LOGO }
+                }
+                div { class: "text-gray-600",
+                    "Service is running on "
+                    span { class: "text-blue-600", " 127.0.0.1:9000 " }
+                }
+                LoadingSpinner {
+                    loading: loading.read().to_owned(),
+                    text: "服务处理中...",
+                }
+                button { class: button_class, onclick: toggle_service,
+                    svg {
+                        class: "h-4 w-4",
+                        fill: "none",
+                        stroke: "currentColor",
+                        view_box: "0 0 24 24",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        if service_state.read().eq(&ServiceState::Start) {
+                            path {
+                                d: "M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z",
+                                stroke_linecap: "round",
+                                stroke_linejoin: "round",
+                                stroke_width: "2",
+                            }
+                            path {
+                                d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
+                                stroke_linecap: "round",
+                                stroke_linejoin: "round",
+                                stroke_width: "2",
+                            }
+                        } else {
+                            path {
+                                stroke_linecap: "round",
+                                stroke_linejoin: "round",
+                                stroke_width: "2",
+                                d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
+                            }
+                            path {
+                                stroke_linecap: "round",
+                                stroke_linejoin: "round",
+                                stroke_width: "2",
+                                d: "M9 10h6v4H9z",
+                            }
+                        }
+                    }
+                    span { id: "serviceStatus",
+                        if service_state.read().eq(&ServiceState::Start) {
+                            "Start service"
+                        } else {
+                            "Stop service"
+                        }
+                    }
+                }
+            }
+            Footer { version: "v1.0.0".to_string() }
+        }
+    }
+}
+
+#[component]
+pub fn Footer(version: String) -> Element {
+    let now = chrono::Local::now();
+    let year = now.naive_local().year();
+    rsx! {
+        footer { class: "w-full py-6 flex flex-col items-center space-y-4 mb-6",
+            nav { class: "flex space-x-4 text-gray-600",
+                a { class: "hover:text-gray-900", href: "https://rustfs.com", "Official Site" }
+                a {
+                    class: "hover:text-gray-900",
+                    href: "https://rustfs.com/docs",
+                    "Documentation"
+                }
+                a {
+                    class: "hover:text-gray-900",
+                    href: "https://github.com/rustfs/rustfs",
+                    "GitHub"
+                }
+                a {
+                    class: "hover:text-gray-900",
+                    href: "https://rustfs.com/docs/license/",
+                    "License"
+                }
+                a { class: "hover:text-gray-900", href: "#", "Sponsors" }
+            }
+            div { class: "text-gray-500 text-sm", " © rustfs.com {year}, All rights reserved." }
+            div { class: "text-gray-400 text-sm mb-8", " version {version} " }
+        }
+    }
+}
+
+#[component]
+pub fn GoBackButtons() -> Element {
+    rsx! {
+        button {
+            class: "p-2 hover:bg-gray-100 rounded-lg",
+            "onclick": "window.history.back()",
+            "Back to the Past"
+        }
+    }
+}
+
+#[component]
+pub fn GoForwardButtons() -> Element {
+    rsx! {
+        button {
+            class: "p-2 hover:bg-gray-100 rounded-lg",
+            "onclick": "window.history.forward()",
+            "Back to the Future"
+        }
+    }
+}
+
+#[component]
+pub fn ChangeThemeButton() -> Element {
+    rsx! {
+        svg {
+            class: "h-6 w-6 text-gray-600",
+            fill: "none",
+            stroke: "currentColor",
+            view_box: "0 0 24 24",
+            xmlns: "http://www.w3.org/2000/svg",
+            path {
+                d: "M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z",
+                stroke_linecap: "round",
+                stroke_linejoin: "round",
+                stroke_width: "2",
+            }
+        }
+    }
+}
+
+#[component]
+pub fn SettingButton() -> Element {
+    rsx! {
+        svg {
+            class: "h-6 w-6 text-gray-600",
+            fill: "none",
+            stroke: "currentColor",
+            view_box: "0 0 24 24",
+            xmlns: "http://www.w3.org/2000/svg",
+            path {
+                d: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z",
+                stroke_linecap: "round",
+                stroke_linejoin: "round",
+                stroke_width: "2",
+            }
+            path {
+                d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z",
+                stroke_linecap: "round",
+                stroke_linejoin: "round",
+                stroke_width: "2",
+            }
+        }
+    }
+}
--- a/cli/rustfs-gui/src/components/mod.rs
+++ b/cli/rustfs-gui/src/components/mod.rs
@@ -0,0 +1,4 @@
+mod home;
+pub use home::Home;
+mod navbar;
+pub use navbar::Navbar;
--- a/cli/rustfs-gui/src/components/navbar.rs
+++ b/cli/rustfs-gui/src/components/navbar.rs
@@ -0,0 +1,59 @@
+use crate::Route;
+use dioxus::logger::tracing::debug;
+use dioxus::prelude::*;
+
+const NAVBAR_CSS: Asset = asset!("/assets/styling/navbar.css");
+
+#[component]
+pub fn Navbar() -> Element {
+    rsx! {
+        document::Link { rel: "stylesheet", href: NAVBAR_CSS }
+
+        div { id: "navbar", class: "hidden", style: "display: none;",
+            Link { to: Route::HomeViews {}, "Home" }
+        }
+
+        Outlet::<Route> {}
+    }
+}
+
+#[derive(Props, PartialEq, Debug, Clone)]
+pub struct LoadingSpinnerProps {
+    #[props(default = true)]
+    loading: bool,
+    #[props(default = "正在处理中...")]
+    text: &'static str,
+}
+
+#[component]
+pub fn LoadingSpinner(props: LoadingSpinnerProps) -> Element {
+    debug!("loading: {}", props.loading);
+    if !props.loading {
+        debug!("LoadingSpinner false loading: {}", props.loading);
+        return rsx! {};
+    }
+    rsx! {
+        div { class: "flex items-center justify-center z-10",
+            svg {
+                class: "animate-spin h-5 w-5 text-blue-500",
+                xmlns: "http://www.w3.org/2000/svg",
+                fill: "none",
+                view_box: "0 0 24 24",
+                circle {
+                    class: "opacity-25",
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    stroke_width: "4",
+                }
+                path {
+                    class: "opacity-75",
+                    fill: "currentColor",
+                    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z",
+                }
+            }
+            span { class: "ml-2 text-gray-600", "{props.text}" }
+        }
+    }
+}
--- a/cli/rustfs-gui/src/main.rs
+++ b/cli/rustfs-gui/src/main.rs
@@ -1,17 +1,69 @@
+use components::Navbar;
+use dioxus::logger::tracing::debug;
+use dioxus::prelude::*;
+use tracing_appender::rolling::{RollingFileAppender, Rotation};
+use tracing_subscriber::{fmt, layer::SubscriberExt, util::SubscriberInitExt};
+use views::HomeViews;
+
 mod components;
 mod utils;
 mod views;

-use dioxus::prelude::*;
-
 fn main() {
+    init_logger();
    dioxus::launch(App);
 }

+#[derive(Debug, Clone, Routable, PartialEq)]
+#[rustfmt::skip]
+enum Route {
+    #[layout(Navbar)]
+    #[route("/")]
+    HomeViews {},
+}
+
+const FAVICON: Asset = asset!("/assets/favicon.ico");
+const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css");
+
 #[component]
 fn App() -> Element {
-    // The use signal hook runs once when the component is created and then returns the current value every run after the first
-    let name = use_signal(|| "RustFS");
-
-    rsx! { "hello {name}!" }
+    // Build cool things ✌️
+    use document::{Link, Title};
+    debug!("App rendered");
+    rsx! {
+        // Global app resources
+        Link { rel: "icon", href: FAVICON }
+        Link { rel: "stylesheet", href: TAILWIND_CSS }
+        // Script { src: "https://cdn.tailwindcss.com" }
+        Title { "RustFS" }
+        Router::<Route> {}
+    }
+}
+
+fn init_logger() {
+    // configuring rolling logs rolling by day
+    let home_dir = dirs::home_dir().expect("无法获取用户目录");
+    let rustfs_dir = home_dir.join("rustfs");
+    let logs_dir = rustfs_dir.join("logs");
+    let file_appender = RollingFileAppender::builder()
+        .rotation(Rotation::DAILY) // rotate log files once every hour
+        .filename_prefix("rustfs-cli") // log file names will be prefixed with `myapp.`
+        .filename_suffix("log") // log file names will be suffixed with `.log`
+        .build(logs_dir) // try to build an appender that stores log files in `/ var/ log`
+        .expect("initializing rolling file appender failed");
+    // non-blocking writer for improved performance
+    let (non_blocking_file, _guard) = tracing_appender::non_blocking(file_appender);
+
+    // console output layer
+    let console_layer = fmt::layer().with_writer(std::io::stdout).with_ansi(true); // enable colors in the console
+
+    // file output layer
+    let file_layer = fmt::layer().with_writer(non_blocking_file).with_ansi(false); // disable colors in the file
+
+    // Combine all tiers and initialize global subscribers
+    tracing_subscriber::registry()
+        .with(console_layer)
+        .with(file_layer)
+        .with(tracing_subscriber::EnvFilter::new("info")) // filter the log level by environment variables
+        .init();
 }
--- a/cli/rustfs-gui/src/utils/mod.rs
+++ b/cli/rustfs-gui/src/utils/mod.rs
@@ -2,3 +2,4 @@ mod config;
 mod helper;

 pub use config::RustFSConfig;
+pub use helper::ServiceManager;
--- a/cli/rustfs-gui/src/views/home.rs
+++ b/cli/rustfs-gui/src/views/home.rs
@@ -0,0 +1,9 @@
+use crate::components::Home;
+use dioxus::prelude::*;
+
+#[component]
+pub fn HomeViews() -> Element {
+    rsx! {
+        Home {}
+    }
+}
--- a/cli/rustfs-gui/src/views/mod.rs
+++ b/cli/rustfs-gui/src/views/mod.rs
@@ -0,0 +1,2 @@
+mod home;
+pub use home::HomeViews;