[pdm-devel] [PATCH datacenter-manager 5/5] ui: pve: datacenter: add remote notes panel

[Dominik Csapak <d.csapak@proxmox.com>]

to have a place for that, move the remote tasks and the notes below a
tab panel, like we do for the guests and nodes.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/pve/mod.rs        |  8 ++--
 ui/src/pve/remote/mod.rs | 84 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 87 insertions(+), 5 deletions(-)
 create mode 100644 ui/src/pve/remote/mod.rs

diff --git a/ui/src/pve/mod.rs b/ui/src/pve/mod.rs
index efe61af9..5fd964a9 100644
--- a/ui/src/pve/mod.rs
+++ b/ui/src/pve/mod.rs
@@ -26,6 +26,7 @@ use pdm_api_types::resource::{PveResource, ResourceType};
 pub mod lxc;
 pub mod node;
 pub mod qemu;
+pub mod remote;
 pub mod remote_overview;
 pub mod storage;
 pub mod utils;
@@ -33,7 +34,7 @@ pub mod utils;
 mod tree;
 use tree::PveTreeNode;
 
-use crate::{get_deep_url, remotes::RemoteTaskList};
+use crate::get_deep_url;
 
 #[derive(Debug, Eq, PartialEq, Properties)]
 pub struct PveRemote {
@@ -182,10 +183,7 @@ impl LoadableComponent for PveRemoteComp {
         let remote = &props.remote;
 
         let content: Html = match &self.view {
-            PveTreeNode::Root => Panel::new()
-                .title(tr!("Remote Tasks"))
-                .with_child(RemoteTaskList::new().remote(remote.clone()))
-                .into(),
+            PveTreeNode::Root => remote::PveRemotePanel::new(remote.clone()).into(),
             PveTreeNode::Node(node) => {
                 node::PveNodePanel::new(remote.clone(), node.node.clone()).into()
             }
diff --git a/ui/src/pve/remote/mod.rs b/ui/src/pve/remote/mod.rs
new file mode 100644
index 00000000..60ea4ade
--- /dev/null
+++ b/ui/src/pve/remote/mod.rs
@@ -0,0 +1,84 @@
+use std::rc::Rc;
+
+use proxmox_yew_comp::NotesView;
+use yew::virtual_dom::{VComp, VNode};
+
+use pwt::css::{AlignItems, ColorScheme};
+use pwt::prelude::*;
+use pwt::props::{ContainerBuilder, WidgetBuilder};
+use pwt::widget::{Fa, Row, TabBarItem, TabPanel};
+
+use crate::remotes::RemoteTaskList;
+
+#[derive(Clone, Debug, Eq, PartialEq, Properties)]
+pub struct PveRemotePanel {
+    /// The remote to show
+    pub remote: String,
+}
+
+impl PveRemotePanel {
+    pub fn new(remote: String) -> Self {
+        yew::props!(Self { remote })
+    }
+}
+
+impl From<PveRemotePanel> for VNode {
+    fn from(val: PveRemotePanel) -> Self {
+        VComp::new::<PveRemotePanelComp>(Rc::new(val), None).into()
+    }
+}
+
+struct PveRemotePanelComp;
+
+impl yew::Component for PveRemotePanelComp {
+    type Message = ();
+    type Properties = PveRemotePanel;
+
+    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(AlignItems::Baseline)
+            .with_child(Fa::new("building"))
+            .with_child(tr! {"Remote '{0}'", props.remote})
+            .into();
+
+        TabPanel::new()
+            .class(pwt::css::FlexFit)
+            .title(title)
+            .class(ColorScheme::Neutral)
+            .with_item_builder(
+                TabBarItem::new()
+                    .key("tasks_view")
+                    .label(tr!("Remote Tasks"))
+                    .icon_class("fa fa-list"),
+                {
+                    let remote = props.remote.clone();
+                    move |_| RemoteTaskList::new().remote(remote.clone()).into()
+                },
+            )
+            .with_item_builder(
+                TabBarItem::new()
+                    .key("notes_view")
+                    .label(tr!("Notes"))
+                    .icon_class("fa fa-sticky-note-o"),
+                {
+                    let remote = props.remote.clone();
+                    move |_| {
+                        NotesView::edit_property(
+                            format!("/pve/remotes/{remote}/options"),
+                            "description",
+                        )
+                        .on_submit(None)
+                        .into()
+                    }
+                },
+            )
+            .into()
+    }
+}
-- 
2.47.3



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