[pdm-devel] [PATCH datacenter-manager 1/4] ui: qemu: move files into subfolder, add Tabbar on top

[Dietmar Maurer <dietmar@proxmox.com>]

So that we can add other tab panels in the future,

Signed-off-by: Dietmar Maurer <dietmar@proxmox.com>
---
 ui/src/pve/qemu/mod.rs                   | 81 ++++++++++++++++++++++++
 ui/src/pve/{qemu.rs => qemu/overview.rs} | 28 +++-----
 2 files changed, 91 insertions(+), 18 deletions(-)
 create mode 100644 ui/src/pve/qemu/mod.rs
 rename ui/src/pve/{qemu.rs => qemu/overview.rs} (96%)

diff --git a/ui/src/pve/qemu/mod.rs b/ui/src/pve/qemu/mod.rs
new file mode 100644
index 0000000..448b313
--- /dev/null
+++ b/ui/src/pve/qemu/mod.rs
@@ -0,0 +1,81 @@
+mod overview;
+use overview::QemuOverviewPanel;
+
+use std::rc::Rc;
+
+use yew::virtual_dom::{VComp, VNode};
+
+use pwt::prelude::*;
+use pwt::widget::{Fa, Row, TabBarItem, TabPanel};
+
+use pdm_api_types::resource::PveQemuResource;
+
+use crate::pve::utils::render_qemu_name;
+
+#[derive(Clone, Debug, Properties, PartialEq)]
+pub struct QemuPanel {
+    remote: String,
+    node: String,
+    info: PveQemuResource,
+
+    #[prop_or(60_000)]
+    /// The interval for refreshing the rrd data
+    pub rrd_interval: u32,
+
+    #[prop_or(10_000)]
+    /// The interval for refreshing the status data
+    pub status_interval: u32,
+}
+
+impl QemuPanel {
+    pub fn new(remote: String, node: String, info: PveQemuResource) -> Self {
+        yew::props!(Self { remote, node, info })
+    }
+}
+
+pub struct QemuPanelComp {}
+
+impl yew::Component for QemuPanelComp {
+    type Message = ();
+    type Properties = QemuPanel;
+
+    fn create(_ctx: &yew::Context<Self>) -> Self {
+        Self {}
+    }
+
+    fn view(&self, ctx: &yew::Context<Self>) -> yew::Html {
+        let props = ctx.props();
+
+        let title: Html = Row::new()
+            .gap(2)
+            .class(pwt::css::AlignItems::Baseline)
+            .with_child(Fa::new("desktop"))
+            .with_child(tr! {"VM '{0}'", render_qemu_name(&props.info, true)})
+            .into();
+
+        TabPanel::new()
+            .class(pwt::css::FlexFit)
+            .title(title)
+            .with_item_builder(
+                TabBarItem::new()
+                    .key("status_view")
+                    .label(tr!("Overview"))
+                    .icon_class("fa fa-tachometer"),
+                {
+                    let remote = props.remote.clone();
+                    let node = props.node.clone();
+                    let info = props.info.clone();
+                    move |_| {
+                        QemuOverviewPanel::new(remote.clone(), node.clone(), info.clone()).into()
+                    }
+                },
+            )
+            .into()
+    }
+}
+
+impl Into<VNode> for QemuPanel {
+    fn into(self) -> VNode {
+        VComp::new::<QemuPanelComp>(Rc::new(self), None).into()
+    }
+}
diff --git a/ui/src/pve/qemu.rs b/ui/src/pve/qemu/overview.rs
similarity index 96%
rename from ui/src/pve/qemu.rs
rename to ui/src/pve/qemu/overview.rs
index 10266f3..f9379df 100644
--- a/ui/src/pve/qemu.rs
+++ b/ui/src/pve/qemu/overview.rs
@@ -27,7 +27,7 @@ use crate::{
 };
 
 #[derive(Clone, Debug, Properties)]
-pub struct QemuPanel {
+pub struct QemuOverviewPanel {
     remote: String,
     node: String,
     info: PveQemuResource,
@@ -41,7 +41,7 @@ pub struct QemuPanel {
     pub status_interval: u32,
 }
 
-impl PartialEq for QemuPanel {
+impl PartialEq for QemuOverviewPanel {
     fn eq(&self, other: &Self) -> bool {
         if self.remote == other.remote && self.node == other.node {
             // only check some fields, so we don't update when e.g. only the cpu changes
@@ -53,17 +53,17 @@ impl PartialEq for QemuPanel {
         }
     }
 }
-impl Eq for QemuPanel {}
+impl Eq for QemuOverviewPanel {}
 
-impl QemuPanel {
+impl QemuOverviewPanel {
     pub fn new(remote: String, node: String, info: PveQemuResource) -> Self {
         yew::props!(Self { remote, node, info })
     }
 }
 
-impl Into<VNode> for QemuPanel {
+impl Into<VNode> for QemuOverviewPanel {
     fn into(self) -> VNode {
-        VComp::new::<QemuPanelComp>(Rc::new(self), None).into()
+        VComp::new::<QemuOverviewPanelComp>(Rc::new(self), None).into()
     }
 }
 
@@ -75,7 +75,7 @@ pub enum Msg {
     UpdateRrdTimeframe(RRDTimeframe),
 }
 
-pub struct QemuPanelComp {
+pub struct QemuOverviewPanelComp {
     status: Option<QemuStatus>,
     last_status_error: Option<proxmox_client::Error>,
     last_rrd_error: Option<proxmox_client::Error>,
@@ -95,7 +95,7 @@ pub struct QemuPanelComp {
     diskwrite: Rc<Series>,
 }
 
-impl QemuPanelComp {
+impl QemuOverviewPanelComp {
     async fn reload_status(remote: &str, vmid: u32) -> Result<QemuStatus, proxmox_client::Error> {
         let status = crate::pdm_client()
             .pve_qemu_status(remote, None, vmid)
@@ -115,10 +115,10 @@ impl QemuPanelComp {
     }
 }
 
-impl yew::Component for QemuPanelComp {
+impl yew::Component for QemuOverviewPanelComp {
     type Message = Msg;
 
-    type Properties = QemuPanel;
+    type Properties = QemuOverviewPanel;
 
     fn create(ctx: &yew::Context<Self>) -> Self {
         ctx.link()
@@ -256,13 +256,6 @@ impl yew::Component for QemuPanelComp {
 
     fn view(&self, ctx: &yew::Context<Self>) -> yew::Html {
         let props = ctx.props();
-        let title: Html = Row::new()
-            .gap(2)
-            .class(AlignItems::Baseline)
-            .with_child(Fa::new("desktop"))
-            .with_child(tr! {"VM '{0}'", render_qemu_name(&props.info, true)})
-            .into();
-
         let mut status_comp = Column::new().gap(2).padding(4);
 
         let status = match &self.status {
@@ -362,7 +355,6 @@ impl yew::Component for QemuPanelComp {
         let loading = self.status.is_none() && self.last_status_error.is_none();
         Panel::new()
             .class(FlexFit)
-            .title(title)
             .class(ColorScheme::Neutral)
             .with_child(
                 // FIXME: add some 'visible' or 'active' property to the progress
-- 
2.47.3


_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel