add client gui for easytier (#50)

easytier-gui/src/launcher.rs

@@ -0,0 +1,217 @@
+use std::{
+    collections::VecDeque,
+    sync::{atomic::AtomicBool, Arc, RwLock},
+};
+
+use chrono::{DateTime, Local};
+use easytier::{
+    common::{
+        config::{ConfigLoader, TomlConfigLoader},
+        global_ctx::GlobalCtxEvent,
+        stun::StunInfoCollectorTrait,
+    },
+    instance::instance::Instance,
+    peers::rpc_service::PeerManagerRpcService,
+    rpc::{
+        cli::{PeerInfo, Route, StunInfo},
+        peer::GetIpListResponse,
+    },
+};
+
+#[derive(Default, Clone)]
+pub struct MyNodeInfo {
+    pub virtual_ipv4: String,
+    pub ips: GetIpListResponse,
+    pub stun_info: StunInfo,
+    pub listeners: Vec<String>,
+    pub vpn_portal_cfg: Option<String>,
+}
+
+#[derive(Default, Clone)]
+struct EasyTierData {
+    events: Arc<RwLock<VecDeque<(DateTime<Local>, GlobalCtxEvent)>>>,
+    node_info: Arc<RwLock<MyNodeInfo>>,
+    routes: Arc<RwLock<Vec<Route>>>,
+    peers: Arc<RwLock<Vec<PeerInfo>>>,
+}
+
+pub struct EasyTierLauncher {
+    instance_alive: Arc<AtomicBool>,
+    stop_flag: Arc<AtomicBool>,
+    thread_handle: Option<std::thread::JoinHandle<()>>,
+    running_cfg: String,
+
+    error_msg: Arc<RwLock<Option<String>>>,
+    data: EasyTierData,
+}
+
+impl EasyTierLauncher {
+    pub fn new() -> Self {
+        let instance_alive = Arc::new(AtomicBool::new(false));
+        Self {
+            instance_alive,
+            thread_handle: None,
+            error_msg: Arc::new(RwLock::new(None)),
+            running_cfg: String::new(),
+
+            stop_flag: Arc::new(AtomicBool::new(false)),
+            data: EasyTierData::default(),
+        }
+    }
+
+    async fn handle_easytier_event(event: GlobalCtxEvent, data: EasyTierData) {
+        let mut events = data.events.write().unwrap();
+        events.push_back((chrono::Local::now(), event));
+        if events.len() > 100 {
+            events.pop_front();
+        }
+    }
+
+    async fn easytier_routine(
+        cfg: TomlConfigLoader,
+        stop_signal: Arc<tokio::sync::Notify>,
+        data: EasyTierData,
+    ) -> Result<(), anyhow::Error> {
+        let mut instance = Instance::new(cfg);
+        let peer_mgr = instance.get_peer_manager();
+
+        // Subscribe to global context events
+        let global_ctx = instance.get_global_ctx();
+        let data_c = data.clone();
+        tokio::spawn(async move {
+            let mut receiver = global_ctx.subscribe();
+            while let Ok(event) = receiver.recv().await {
+                Self::handle_easytier_event(event, data_c.clone()).await;
+            }
+        });
+
+        // update my node info
+        let data_c = data.clone();
+        let global_ctx_c = instance.get_global_ctx();
+        let peer_mgr_c = peer_mgr.clone();
+        let vpn_portal = instance.get_vpn_portal_inst();
+        tokio::spawn(async move {
+            loop {
+                let node_info = MyNodeInfo {
+                    virtual_ipv4: global_ctx_c
+                        .get_ipv4()
+                        .map(|x| x.to_string())
+                        .unwrap_or_default(),
+                    ips: global_ctx_c.get_ip_collector().collect_ip_addrs().await,
+                    stun_info: global_ctx_c.get_stun_info_collector().get_stun_info(),
+                    listeners: global_ctx_c
+                        .get_running_listeners()
+                        .iter()
+                        .map(|x| x.to_string())
+                        .collect(),
+                    vpn_portal_cfg: Some(
+                        vpn_portal
+                            .lock()
+                            .await
+                            .dump_client_config(peer_mgr_c.clone())
+                            .await,
+                    ),
+                };
+                *data_c.node_info.write().unwrap() = node_info.clone();
+                *data_c.routes.write().unwrap() = peer_mgr_c.list_routes().await;
+                *data_c.peers.write().unwrap() = PeerManagerRpcService::new(peer_mgr_c.clone())
+                    .list_peers()
+                    .await;
+                tokio::time::sleep(std::time::Duration::from_secs(1)).await;
+            }
+        });
+
+        instance.run().await?;
+        stop_signal.notified().await;
+        Ok(())
+    }
+
+    pub fn start<F>(&mut self, cfg_generator: F)
+    where
+        F: FnOnce() -> Result<TomlConfigLoader, anyhow::Error> + Send + Sync,
+    {
+        let error_msg = self.error_msg.clone();
+        let cfg = cfg_generator();
+        if let Err(e) = cfg {
+            error_msg.write().unwrap().replace(e.to_string());
+            return;
+        }
+
+        self.running_cfg = cfg.as_ref().unwrap().dump();
+
+        let stop_flag = self.stop_flag.clone();
+
+        let instance_alive = self.instance_alive.clone();
+        instance_alive.store(true, std::sync::atomic::Ordering::Relaxed);
+
+        let data = self.data.clone();
+
+        self.thread_handle = Some(std::thread::spawn(move || {
+            let rt = tokio::runtime::Builder::new_multi_thread()
+                .enable_all()
+                .build()
+                .unwrap();
+            let stop_notifier = Arc::new(tokio::sync::Notify::new());
+
+            let stop_notifier_clone = stop_notifier.clone();
+            rt.spawn(async move {
+                while !stop_flag.load(std::sync::atomic::Ordering::Relaxed) {
+                    tokio::time::sleep(std::time::Duration::from_millis(100)).await;
+                }
+                stop_notifier_clone.notify_one();
+            });
+
+            let ret = rt.block_on(Self::easytier_routine(
+                cfg.unwrap(),
+                stop_notifier.clone(),
+                data,
+            ));
+            if let Err(e) = ret {
+                error_msg.write().unwrap().replace(e.to_string());
+            }
+            instance_alive.store(false, std::sync::atomic::Ordering::Relaxed);
+        }));
+    }
+
+    pub fn error_msg(&self) -> Option<String> {
+        self.error_msg.read().unwrap().clone()
+    }
+
+    pub fn running(&self) -> bool {
+        self.instance_alive
+            .load(std::sync::atomic::Ordering::Relaxed)
+    }
+
+    pub fn get_events(&self) -> Vec<(DateTime<Local>, GlobalCtxEvent)> {
+        let events = self.data.events.read().unwrap();
+        events.iter().cloned().collect()
+    }
+
+    pub fn get_node_info(&self) -> MyNodeInfo {
+        self.data.node_info.read().unwrap().clone()
+    }
+
+    pub fn get_routes(&self) -> Vec<Route> {
+        self.data.routes.read().unwrap().clone()
+    }
+
+    pub fn get_peers(&self) -> Vec<PeerInfo> {
+        self.data.peers.read().unwrap().clone()
+    }
+
+    pub fn running_cfg(&self) -> String {
+        self.running_cfg.clone()
+    }
+}
+
+impl Drop for EasyTierLauncher {
+    fn drop(&mut self) {
+        self.stop_flag
+            .store(true, std::sync::atomic::Ordering::Relaxed);
+        if let Some(handle) = self.thread_handle.take() {
+            if let Err(e) = handle.join() {
+                println!("Error when joining thread: {:?}", e);
+            }
+        }
+    }
+}

easytier-gui/src/text_list.rs

@@ -0,0 +1,57 @@
+#[derive(Default)]
+pub struct TextListOption {
+    pub hint: String,
+}
+
+pub fn text_list_ui(
+    ui: &mut egui::Ui,
+    id: &str,
+    texts: &mut Vec<String>,
+    option: Option<TextListOption>,
+) {
+    let option = option.unwrap_or_default();
+    // convert text vec to (index, text) vec
+    let mut add_new_item = false;
+    let mut remove_idxs = vec![];
+
+    egui::Grid::new(id).max_col_width(200.0).show(ui, |ui| {
+        for i in 0..texts.len() {
+            egui::TextEdit::singleline(&mut texts[i])
+                .hint_text(&option.hint)
+                .show(ui);
+
+            ui.horizontal(|ui| {
+                if ui.button("➖").clicked() {
+                    remove_idxs.push(i);
+                }
+
+                if i == texts.len() - 1 {
+                    if ui.button("➕").clicked() {
+                        add_new_item = true;
+                    }
+                }
+            });
+
+            ui.end_row();
+        }
+
+        if texts.len() == 0 {
+            if ui.button("➕").clicked() {
+                add_new_item = true;
+            }
+            ui.end_row();
+        }
+    });
+
+    let new_texts = texts
+        .iter()
+        .enumerate()
+        .filter(|(i, _)| !remove_idxs.contains(i))
+        .map(|(_, t)| t.clone())
+        .collect::<Vec<String>>();
+    *texts = new_texts;
+
+    if add_new_item && texts.last().map(|t| !t.is_empty()).unwrap_or(true) {
+        texts.push("".to_string());
+    }
+}

easytier-gui/src/toggle_switch.rs

@@ -0,0 +1,107 @@
+//! Source code example of how to create your own widget.
+//! This is meant to be read as a tutorial, hence the plethora of comments.
+
+/// iOS-style toggle switch:
+///
+/// ``` text
+///      _____________
+///     /       /.....\
+///    |       |.......|
+///     \_______\_____/
+/// ```
+///
+/// ## Example:
+/// ``` ignore
+/// toggle_ui(ui, &mut my_bool);
+/// ```
+pub fn toggle_ui(ui: &mut egui::Ui, on: &mut bool) -> egui::Response {
+    // Widget code can be broken up in four steps:
+    //  1. Decide a size for the widget
+    //  2. Allocate space for it
+    //  3. Handle interactions with the widget (if any)
+    //  4. Paint the widget
+
+    // 1. Deciding widget size:
+    // You can query the `ui` how much space is available,
+    // but in this example we have a fixed size widget based on the height of a standard button:
+    let desired_size = ui.spacing().interact_size.y * egui::vec2(2.0, 1.0);
+
+    // 2. Allocating space:
+    // This is where we get a region of the screen assigned.
+    // We also tell the Ui to sense clicks in the allocated region.
+    let (rect, mut response) = ui.allocate_exact_size(desired_size, egui::Sense::click());
+
+    // 3. Interact: Time to check for clicks!
+    if response.clicked() {
+        *on = !*on;
+        response.mark_changed(); // report back that the value changed
+    }
+
+    // Attach some meta-data to the response which can be used by screen readers:
+    response.widget_info(|| egui::WidgetInfo::selected(egui::WidgetType::Checkbox, *on, ""));
+
+    // 4. Paint!
+    // Make sure we need to paint:
+    if ui.is_rect_visible(rect) {
+        // Let's ask for a simple animation from egui.
+        // egui keeps track of changes in the boolean associated with the id and
+        // returns an animated value in the 0-1 range for how much "on" we are.
+        let how_on = ui.ctx().animate_bool(response.id, *on);
+        // We will follow the current style by asking
+        // "how should something that is being interacted with be painted?".
+        // This will, for instance, give us different colors when the widget is hovered or clicked.
+        let visuals = ui.style().interact_selectable(&response, *on);
+        // All coordinates are in absolute screen coordinates so we use `rect` to place the elements.
+        let rect = rect.expand(visuals.expansion);
+        let radius = 0.5 * rect.height();
+        ui.painter()
+            .rect(rect, radius, visuals.bg_fill, visuals.bg_stroke);
+        // Paint the circle, animating it from left to right with `how_on`:
+        let circle_x = egui::lerp((rect.left() + radius)..=(rect.right() - radius), how_on);
+        let center = egui::pos2(circle_x, rect.center().y);
+        ui.painter()
+            .circle(center, 0.75 * radius, visuals.bg_fill, visuals.fg_stroke);
+    }
+
+    // All done! Return the interaction response so the user can check what happened
+    // (hovered, clicked, ...) and maybe show a tooltip:
+    response
+}
+
+/// Here is the same code again, but a bit more compact:
+#[allow(dead_code)]
+fn toggle_ui_compact(ui: &mut egui::Ui, on: &mut bool) -> egui::Response {
+    let desired_size = ui.spacing().interact_size.y * egui::vec2(2.0, 1.0);
+    let (rect, mut response) = ui.allocate_exact_size(desired_size, egui::Sense::click());
+    if response.clicked() {
+        *on = !*on;
+        response.mark_changed();
+    }
+    response.widget_info(|| egui::WidgetInfo::selected(egui::WidgetType::Checkbox, *on, ""));
+
+    if ui.is_rect_visible(rect) {
+        let how_on = ui.ctx().animate_bool(response.id, *on);
+        let visuals = ui.style().interact_selectable(&response, *on);
+        let rect = rect.expand(visuals.expansion);
+        let radius = 0.5 * rect.height();
+        ui.painter()
+            .rect(rect, radius, visuals.bg_fill, visuals.bg_stroke);
+        let circle_x = egui::lerp((rect.left() + radius)..=(rect.right() - radius), how_on);
+        let center = egui::pos2(circle_x, rect.center().y);
+        ui.painter()
+            .circle(center, 0.75 * radius, visuals.bg_fill, visuals.fg_stroke);
+    }
+
+    response
+}
+
+// A wrapper that allows the more idiomatic usage pattern: `ui.add(toggle(&mut my_bool))`
+/// iOS-style toggle switch.
+///
+/// ## Example:
+/// ``` ignore
+/// ui.add(toggle(&mut my_bool));
+/// ```
+pub fn toggle(on: &mut bool) -> impl egui::Widget + '_ {
+    move |ui: &mut egui::Ui| toggle_ui(ui, on)
+}