[pdm-devel] [PATCH datacenter-manager 1/3] ui: lxc: 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/lxc/mod.rs                  | 81 ++++++++++++++++++++++++++
 ui/src/pve/{lxc.rs => lxc/overview.rs} | 28 +++------
 2 files changed, 90 insertions(+), 19 deletions(-)
 create mode 100644 ui/src/pve/lxc/mod.rs
 rename ui/src/pve/{lxc.rs => lxc/overview.rs} (96%)

diff --git a/ui/src/pve/lxc/mod.rs b/ui/src/pve/lxc/mod.rs
new file mode 100644
index 0000000..b984903
--- /dev/null
+++ b/ui/src/pve/lxc/mod.rs
@@ -0,0 +1,81 @@
+mod overview;
+use overview::LxcOverviewPanel;
+
+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::PveLxcResource;
+
+use crate::pve::utils::render_lxc_name;
+
+#[derive(Clone, Debug, Properties, PartialEq)]
+pub struct LxcPanel {
+    remote: String,
+    node: String,
+    info: PveLxcResource,
+
+    #[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 LxcPanel {
+    pub fn new(remote: String, node: String, info: PveLxcResource) -> Self {
+        yew::props!(Self { remote, node, info })
+    }
+}
+
+pub struct LxcPanelComp {}
+
+impl yew::Component for LxcPanelComp {
+    type Message = ();
+    type Properties = LxcPanel;
+
+    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("cube"))
+            .with_child(tr! {"CT {0}", render_lxc_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 |_| {
+                        LxcOverviewPanel::new(remote.clone(), node.clone(), info.clone()).into()
+                    }
+                },
+            )
+            .into()
+    }
+}
+
+impl Into<VNode> for LxcPanel {
+    fn into(self) -> VNode {
+        VComp::new::<LxcPanelComp>(Rc::new(self), None).into()
+    }
+}
diff --git a/ui/src/pve/lxc.rs b/ui/src/pve/lxc/overview.rs
similarity index 96%
rename from ui/src/pve/lxc.rs
rename to ui/src/pve/lxc/overview.rs
index 08380b6..ac968fd 100644
--- a/ui/src/pve/lxc.rs
+++ b/ui/src/pve/lxc/overview.rs
@@ -11,23 +11,20 @@ use yew::{
 use proxmox_human_byte::HumanByte;
 use proxmox_yew_comp::{RRDGraph, RRDTimeframe, RRDTimeframeSelector, Series};
 use pwt::{
-    css::{AlignItems, ColorScheme, FlexFit, JustifyContent},
+    css::{ColorScheme, FlexFit, JustifyContent},
     prelude::*,
     props::WidgetBuilder,
-    widget::{Column, Container, Fa, Panel, Progress, Row},
+    widget::{Column, Container, Panel, Progress, Row},
     AsyncPool,
 };
 
 use pdm_api_types::{resource::PveLxcResource, rrddata::LxcDataPoint};
 use pdm_client::types::{IsRunning, LxcStatus};
 
-use crate::{
-    pve::utils::render_lxc_name,
-    renderer::{separator, status_row},
-};
+use crate::renderer::{separator, status_row};
 
 #[derive(Clone, Debug, Properties)]
-pub struct LxcPanel {
+pub struct LxcOverviewPanel {
     remote: String,
     node: String,
     info: PveLxcResource,
@@ -41,7 +38,7 @@ pub struct LxcPanel {
     pub status_interval: u32,
 }
 
-impl PartialEq for LxcPanel {
+impl PartialEq for LxcOverviewPanel {
     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,15 +50,15 @@ impl PartialEq for LxcPanel {
         }
     }
 }
-impl Eq for LxcPanel {}
+impl Eq for LxcOverviewPanel {}
 
-impl LxcPanel {
+impl LxcOverviewPanel {
     pub fn new(remote: String, node: String, info: PveLxcResource) -> Self {
         yew::props!(Self { remote, node, info })
     }
 }
 
-impl Into<VNode> for LxcPanel {
+impl Into<VNode> for LxcOverviewPanel {
     fn into(self) -> VNode {
         VComp::new::<LxcanelComp>(Rc::new(self), None).into()
     }
@@ -118,7 +115,7 @@ impl LxcanelComp {
 impl yew::Component for LxcanelComp {
     type Message = Msg;
 
-    type Properties = LxcPanel;
+    type Properties = LxcOverviewPanel;
 
     fn create(ctx: &yew::Context<Self>) -> Self {
         ctx.link()
@@ -254,12 +251,6 @@ impl yew::Component for LxcanelComp {
 
     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("cube"))
-            .with_child(tr! {"VM '{0}'", render_lxc_name(&props.info, true)})
-            .into();
 
         let mut status_comp = Column::new().gap(2).padding(4);
         let status = match &self.status {
@@ -349,7 +340,6 @@ impl yew::Component for LxcanelComp {
 
         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