[pdm-devel] [PATCH datacenter-manager 00/11] improve PBS view

[pdm-devel] [PATCH datacenter-manager 00/11] improve PBS view

[Dominik Csapak]

This improves the existing PBS remote view to be a more usable and in
line with what we have for PVE:

* have a two column layout with a 'datastore tree' on the left and
  the selected content on the right
* Node overview panel like for PVE nodes
* datastore tabpanel with overview + content

Next steps:

The next steps would be to add more api calls on the backend for
* datastore status (list and singular)
* datastore group list
* datastore namespace list
* some datastore actions? (gc, verify?) + the status calls for these

and then implment on the UI:
* multiple namespaces (ideally directly in the tree, can be loaded in
  afterwards)
* proper status for the datastore panels
* add some place where we can see/do actions like gc,verification, etc.

We should also seriosly consider to implement the 'application/json-seq'
variant for snapshot list directly on PBS, so we can stream this without
having to buffer it in the pdm api call.

Dominik Csapak (11):
  server: api: return list of pve/pbs remotes
  server: api: pbs: add status api call
  server: pbs-client: use `json` formatter for the snapshot list
    streaming api
  pdm-client: add pbs node status helper
  ui: pve: tree: refactor rendering the tree column
  ui: add helper to compare two strings with `localeCompare`
  ui: pbs: add datastore tree
  ui: pbs: convert snapshot list to a snapshot tree
  ui: pbs: add datastore panel component
  ui: pbs: add remote overview panel
  ui: pbs: use new pbs panels/overview

 lib/pdm-api-types/src/remotes.rs |  13 ++
 lib/pdm-client/src/lib.rs        |   5 +
 server/src/api/pbs/mod.rs        |  48 +++-
 server/src/api/pve/mod.rs        |  30 ++-
 server/src/pbs_client.rs         |   7 +-
 ui/src/lib.rs                    |  19 ++
 ui/src/pbs/datastore.rs          |  73 ++++++
 ui/src/pbs/datastore/overview.rs | 260 +++++++++++++++++++++
 ui/src/pbs/mod.rs                | 232 +++++++++---------
 ui/src/pbs/remote.rs             | 291 +++++++++++++++++++++++
 ui/src/pbs/snapshot_list.rs      | 388 ++++++++++++++++++++++++-------
 ui/src/pbs/tree.rs               | 324 ++++++++++++++++++++++++++
 ui/src/pve/tree.rs               |  15 +-
 ui/src/renderer.rs               |  17 +-
 14 files changed, 1500 insertions(+), 222 deletions(-)
 create mode 100644 ui/src/pbs/datastore.rs
 create mode 100644 ui/src/pbs/datastore/overview.rs
 create mode 100644 ui/src/pbs/remote.rs
 create mode 100644 ui/src/pbs/tree.rs

-- 
2.47.3



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

[pdm-devel] [PATCH datacenter-manager 01/11] server: api: return list of pve/pbs remotes

[Dominik Csapak]

for the paths /{pve,pbs}/remotes/

This api call is announced as a subdirectory, but had no api call
assigned.

Introduce a new basic api type for this.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 lib/pdm-api-types/src/remotes.rs | 13 +++++++++++++
 server/src/api/pbs/mod.rs        | 30 ++++++++++++++++++++++++++++--
 server/src/api/pve/mod.rs        | 30 ++++++++++++++++++++++++++++--
 3 files changed, 69 insertions(+), 4 deletions(-)

diff --git a/lib/pdm-api-types/src/remotes.rs b/lib/pdm-api-types/src/remotes.rs
index 7e67eec8..63189438 100644
--- a/lib/pdm-api-types/src/remotes.rs
+++ b/lib/pdm-api-types/src/remotes.rs
@@ -189,3 +189,16 @@ pub enum TlsProbeOutcome {
     /// The certificate is untrusted with the given hostname/fingerprint
     UntrustedCertificate(proxmox_acme_api::CertificateInfo),
 }
+
+#[api(
+    properties: {
+        "remote": { schema: REMOTE_ID_SCHEMA },
+    },
+)]
+/// The information required to connect to a remote instance.
+#[derive(Clone, Debug, Deserialize, Serialize, PartialEq)]
+#[serde(rename_all = "kebab-case")]
+pub struct RemoteListEntry {
+    /// An id for this entry.
+    pub remote: String,
+}
diff --git a/server/src/api/pbs/mod.rs b/server/src/api/pbs/mod.rs
index 2e203cac..4473c6c8 100644
--- a/server/src/api/pbs/mod.rs
+++ b/server/src/api/pbs/mod.rs
@@ -6,7 +6,9 @@ use proxmox_schema::api;
 use proxmox_schema::property_string::PropertyString;
 use proxmox_sortable_macro::sortable;
 
-use pdm_api_types::remotes::{NodeUrl, Remote, RemoteType, TlsProbeOutcome, REMOTE_ID_SCHEMA};
+use pdm_api_types::remotes::{
+    NodeUrl, Remote, RemoteListEntry, RemoteType, TlsProbeOutcome, REMOTE_ID_SCHEMA,
+};
 use pdm_api_types::{Authid, HOST_OPTIONAL_PORT_FORMAT, PRIV_RESOURCE_AUDIT, PRIV_SYS_MODIFY};
 
 use crate::{
@@ -27,7 +29,9 @@ const SUBDIRS: SubdirMap = &sorted!([
     ("probe-tls", &Router::new().post(&API_METHOD_PROBE_TLS)),
 ]);
 
-const REMOTES_ROUTER: Router = Router::new().match_all("remote", &MAIN_ROUTER);
+const REMOTES_ROUTER: Router = Router::new()
+    .get(&API_METHOD_LIST_REMOTES)
+    .match_all("remote", &MAIN_ROUTER);
 
 pub const MAIN_ROUTER: Router = Router::new()
     .get(&list_subdirs_api_method!(REMOTE_SUBDIRS))
@@ -56,6 +60,28 @@ const DATASTORE_ITEM_SUBDIRS: SubdirMap = &sorted!([
     ),
 ]);
 
+#[api(
+    returns: {
+        type: Array,
+        description: "List of PBS remotes",
+        items: {
+            type: pdm_api_types::remotes::RemoteListEntry,
+        },
+    },
+)]
+/// Return the list of PBS remotes
+fn list_remotes() -> Result<Vec<RemoteListEntry>, Error> {
+    let (remotes, _) = pdm_config::remotes::config()?;
+    let remotes = remotes
+        .into_iter()
+        .filter_map(|(remote, Remote { ty, .. })| match ty {
+            RemoteType::Pbs => Some(RemoteListEntry { remote }),
+            RemoteType::Pve => None,
+        })
+        .collect();
+    Ok(remotes)
+}
+
 #[api(
     input: {
         properties: {
diff --git a/server/src/api/pve/mod.rs b/server/src/api/pve/mod.rs
index edafdded..0de82323 100644
--- a/server/src/api/pve/mod.rs
+++ b/server/src/api/pve/mod.rs
@@ -13,7 +13,9 @@ use proxmox_schema::property_string::PropertyString;
 use proxmox_section_config::typed::SectionConfigData;
 use proxmox_sortable_macro::sortable;
 
-use pdm_api_types::remotes::{NodeUrl, Remote, RemoteType, TlsProbeOutcome, REMOTE_ID_SCHEMA};
+use pdm_api_types::remotes::{
+    NodeUrl, Remote, RemoteListEntry, RemoteType, TlsProbeOutcome, REMOTE_ID_SCHEMA,
+};
 use pdm_api_types::resource::PveResource;
 use pdm_api_types::{
     Authid, RemoteUpid, HOST_OPTIONAL_PORT_FORMAT, PRIV_RESOURCE_AUDIT, PRIV_RESOURCE_DELETE,
@@ -54,7 +56,9 @@ const SUBDIRS: SubdirMap = &sorted!([
     )
 ]);
 
-pub const REMOTES_ROUTER: Router = Router::new().match_all("remote", &MAIN_ROUTER);
+pub const REMOTES_ROUTER: Router = Router::new()
+    .get(&API_METHOD_LIST_REMOTES)
+    .match_all("remote", &MAIN_ROUTER);
 
 const MAIN_ROUTER: Router = Router::new()
     .get(&list_subdirs_api_method!(REMOTE_SUBDIRS))
@@ -111,6 +115,28 @@ fn connect_to_remote(
     connect(get_remote(config, id)?)
 }
 
+#[api(
+    returns: {
+        type: Array,
+        description: "List of PVE remotes",
+        items: {
+            type: RemoteListEntry,
+        },
+    },
+)]
+/// Return the list of PVE remotes
+fn list_remotes() -> Result<Vec<RemoteListEntry>, Error> {
+    let (remotes, _) = pdm_config::remotes::config()?;
+    let remotes = remotes
+        .into_iter()
+        .filter_map(|(remote, Remote { ty, .. })| match ty {
+            RemoteType::Pve => Some(RemoteListEntry { remote }),
+            RemoteType::Pbs => None,
+        })
+        .collect();
+    Ok(remotes)
+}
+
 #[api(
     input: {
         properties: {
-- 
2.47.3



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

[pdm-devel] [PATCH datacenter-manager 02/11] server: api: pbs: add status api call

[Dominik Csapak]

Corresponds to /nodes/localhost/status api call on the pbs side.
Since we only have one node per PBS remote, we don't need to have a
'nodes' path here.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 server/src/api/pbs/mod.rs | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/server/src/api/pbs/mod.rs b/server/src/api/pbs/mod.rs
index 4473c6c8..1250c490 100644
--- a/server/src/api/pbs/mod.rs
+++ b/server/src/api/pbs/mod.rs
@@ -39,6 +39,7 @@ pub const MAIN_ROUTER: Router = Router::new()
 
 #[sortable]
 const REMOTE_SUBDIRS: SubdirMap = &sorted!([
+    ("status", &Router::new().get(&API_METHOD_GET_STATUS)),
     ("rrddata", &rrddata::PBS_NODE_RRD_ROUTER),
     ("datastore", &DATASTORE_ROUTER)
 ]);
@@ -233,3 +234,20 @@ pub async fn scan_remote_pbs(
 
     Ok(remote)
 }
+
+#[api(
+    input: {
+        properties: {
+            remote: { schema: REMOTE_ID_SCHEMA },
+        },
+    },
+    access: {
+        permission: &Permission::Privilege(&["resource", "{remote}", "node", "{node}"], PRIV_RESOURCE_AUDIT, false),
+    },
+)]
+/// Get status for the PBS remote
+async fn get_status(remote: String) -> Result<pbs_api_types::NodeStatus, Error> {
+    let (remotes, _) = pdm_config::remotes::config()?;
+    let remote = get_remote(&remotes, &remote)?;
+    Ok(connection::make_pbs_client(remote)?.node_status().await?)
+}
-- 
2.47.3



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

[pdm-devel] [PATCH datacenter-manager 03/11] server: pbs-client: use `json` formatter for the snapshot list streaming api

[Dominik Csapak]

we do rely on the api to return a proper status code to determine errors
there, so we can't use the `extjs` formatter which will always return
200.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 server/src/pbs_client.rs | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/server/src/pbs_client.rs b/server/src/pbs_client.rs
index def9a4a2..c25aab88 100644
--- a/server/src/pbs_client.rs
+++ b/server/src/pbs_client.rs
@@ -101,10 +101,9 @@ impl PbsClient {
         datastore: &str,
         namespace: Option<&str>,
     ) -> Result<JsonRecords<pbs_api_types::SnapshotListItem>, anyhow::Error> {
-        let path =
-            ApiPathBuilder::new(format!("/api2/extjs/admin/datastore/{datastore}/snapshots"))
-                .maybe_arg("ns", &namespace)
-                .build();
+        let path = ApiPathBuilder::new(format!("/api2/json/admin/datastore/{datastore}/snapshots"))
+            .maybe_arg("ns", &namespace)
+            .build();
         let response = self
             .0
             .streaming_request(http::Method::GET, &path, None::<()>)
-- 
2.47.3



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

[pdm-devel] [PATCH datacenter-manager 04/11] pdm-client: add pbs node status helper

[Dominik Csapak]

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 lib/pdm-client/src/lib.rs | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/lib/pdm-client/src/lib.rs b/lib/pdm-client/src/lib.rs
index f81de67d..2f36fab1 100644
--- a/lib/pdm-client/src/lib.rs
+++ b/lib/pdm-client/src/lib.rs
@@ -842,6 +842,11 @@ impl<T: HttpApiClient> PdmClient<T> {
         Ok(self.0.get(&path).await?.expect_json()?.data)
     }
 
+    pub async fn pbs_node_status(&self, remote: &str) -> Result<pbs_api_types::NodeStatus, Error> {
+        let path = format!("/api2/extjs/pbs/remotes/{remote}/status");
+        Ok(self.0.get(&path).await?.expect_json()?.data)
+    }
+
     pub async fn pbs_datastore_rrddata(
         &self,
         remote: &str,
-- 
2.47.3



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

[pdm-devel] [PATCH datacenter-manager 05/11] ui: pve: tree: refactor rendering the tree column

[Dominik Csapak]

so we can reuse it for PBS

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/pve/tree.rs | 15 ++-------------
 ui/src/renderer.rs | 17 ++++++++++++++++-
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/ui/src/pve/tree.rs b/ui/src/pve/tree.rs
index 299fd895..2d631048 100644
--- a/ui/src/pve/tree.rs
+++ b/ui/src/pve/tree.rs
@@ -26,7 +26,7 @@ use pdm_api_types::{
     RemoteUpid,
 };
 
-use crate::{get_deep_url, widget::MigrateWindow};
+use crate::{get_deep_url, renderer::render_tree_column, widget::MigrateWindow};
 
 use super::{
     utils::{self, render_guest_tags, render_lxc_name, render_qemu_name},
@@ -595,18 +595,7 @@ fn columns(
                     }
                 };
 
-                Row::new()
-                    .min_width(0)
-                    .class(AlignItems::Center)
-                    .gap(2)
-                    .with_child(icon)
-                    .with_child(
-                        Container::new()
-                            .with_child(text)
-                            .style("text-overflow", "ellipsis")
-                            .style("overflow", "hidden"),
-                    )
-                    .into()
+                render_tree_column(icon.into(), text).into()
             })
             .into(),
         DataTableColumn::new(tr!("Tags"))
diff --git a/ui/src/renderer.rs b/ui/src/renderer.rs
index 2383c44d..5f7c6589 100644
--- a/ui/src/renderer.rs
+++ b/ui/src/renderer.rs
@@ -1,9 +1,10 @@
 use pdm_api_types::resource::PveSdnResource;
 use proxmox_yew_comp::MeterLabel;
 use pwt::{
+    css::AlignItems,
     prelude::*,
     props::ContainerBuilder,
-    widget::{Container, Fa},
+    widget::{Container, Fa, Row},
 };
 
 use proxmox_human_byte::HumanByte;
@@ -87,3 +88,17 @@ pub(crate) fn memory_status_row(used: u64, total: u64) -> MeterLabel {
 pub(crate) fn separator() -> Container {
     Container::new().with_child(html! {<hr />}).padding_y(2)
 }
+
+pub(crate) fn render_tree_column(icon: Html, text: String) -> Row {
+    Row::new()
+        .min_width(0)
+        .class(AlignItems::Center)
+        .gap(2)
+        .with_child(icon)
+        .with_child(
+            Container::new()
+                .with_child(text)
+                .style("text-overflow", "ellipsis")
+                .style("overflow", "hidden"),
+        )
+}
-- 
2.47.3



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

[pdm-devel] [PATCH datacenter-manager 06/11] ui: add helper to compare two strings with `localeCompare`

[Dominik Csapak]

sometimes it's useful to have a locale aware comparison, e.g. for
sorting, so abstract that away here.

It also has an option to sort numerically, which would sort, e.g.
'foo-101-bar'
'foo-1000-bar'

instead of in reverse

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/lib.rs | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/ui/src/lib.rs b/ui/src/lib.rs
index d8ba4b7b..a2b79b05 100644
--- a/ui/src/lib.rs
+++ b/ui/src/lib.rs
@@ -1,3 +1,4 @@
+use js_sys::{Array, JsString, Object};
 use pdm_api_types::remotes::RemoteType;
 use pdm_api_types::resource::{PveLxcResource, PveQemuResource, PveSdnResource};
 use pdm_client::types::Resource;
@@ -209,3 +210,21 @@ pub(crate) fn get_resource_node(resource: &Resource) -> Option<&str> {
         Resource::PbsDatastore(_) => None,
     }
 }
+
+/// Wrapper to 'locale compare' to strings
+///
+/// Note: The first parameter must be a [`String`], since it needs to be converted to a [`js_sys::JsString`].
+/// The `numeric` parameter corresponds to the numeric parameter of `String.localeCompare` from
+/// Javascript.
+///
+/// Seel also
+/// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
+pub(crate) fn locale_compare(first: String, second: &str, numeric: bool) -> std::cmp::Ordering {
+    let first: JsString = first.into();
+    let options = Object::new();
+    // TODO: find a better way to create the options object
+    let _ = js_sys::Reflect::set(&options, &"numeric".into(), &numeric.into());
+    first
+        .locale_compare(second, &Array::new(), &options)
+        .cmp(&0)
+}
-- 
2.47.3



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

[pdm-devel] [PATCH datacenter-manager 07/11] ui: pbs: add datastore tree

[Dominik Csapak]

Similar to how we have a tree for pve, add a tree for pbs.
The root is the Remote (node), and the datastores are below it.

Since we lack a 'datastore status' api call at the moment, use the
datastore configs to show them (for now).

Not yet used

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/pbs/tree.rs | 324 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 324 insertions(+)
 create mode 100644 ui/src/pbs/tree.rs

diff --git a/ui/src/pbs/tree.rs b/ui/src/pbs/tree.rs
new file mode 100644
index 00000000..f804665b
--- /dev/null
+++ b/ui/src/pbs/tree.rs
@@ -0,0 +1,324 @@
+use std::cmp::Ordering;
+use std::rc::Rc;
+
+use gloo_utils::window;
+use yew::html::Scope;
+use yew::virtual_dom::{Key, VComp, VNode};
+use yew::{Component, Properties};
+
+use pwt::css::{AlignItems, FlexFit, FontStyle};
+use pwt::prelude::*;
+use pwt::props::ExtractPrimaryKey;
+use pwt::state::{KeyedSlabTree, NavigationContext, NavigationContextExt, Selection, TreeStore};
+use pwt::widget::data_table::{DataTable, DataTableColumn, DataTableHeader};
+use pwt::widget::form::Field;
+use pwt::widget::{ActionIcon, Button, Column, Container, Fa, Row, Toolbar, Tooltip, Trigger};
+
+use pbs_api_types::DataStoreConfig;
+
+use crate::get_deep_url;
+use crate::renderer::render_tree_column;
+
+#[derive(Clone, PartialEq)]
+#[allow(clippy::large_enum_variant)]
+pub enum PbsTreeNode {
+    Root,
+    Datastore(DataStoreConfig),
+}
+
+impl ExtractPrimaryKey for PbsTreeNode {
+    fn extract_key(&self) -> yew::virtual_dom::Key {
+        match self {
+            PbsTreeNode::Root => Key::from("__root__"),
+            PbsTreeNode::Datastore(datastore) => Key::from(datastore.name.as_str()),
+        }
+    }
+}
+
+#[derive(PartialEq, Properties)]
+pub struct PbsTree {
+    remote: String,
+    resources: Rc<Vec<DataStoreConfig>>,
+    loading: bool,
+    on_select: Callback<PbsTreeNode>,
+    on_reload_click: Callback<()>,
+}
+
+impl PbsTree {
+    pub fn new(
+        remote: String,
+        resources: Rc<Vec<DataStoreConfig>>,
+        loading: bool,
+        on_select: impl Into<Callback<PbsTreeNode>>,
+        on_reload_click: impl Into<Callback<()>>,
+    ) -> Self {
+        Self {
+            remote,
+            resources,
+            loading,
+            on_select: on_select.into(),
+            on_reload_click: on_reload_click.into(),
+        }
+    }
+}
+
+impl From<PbsTree> for VNode {
+    fn from(val: PbsTree) -> Self {
+        VComp::new::<PbsTreeComp>(Rc::new(val), None).into()
+    }
+}
+
+pub enum Msg {
+    Filter(String),
+    KeySelected(Option<Key>),
+    RouteChanged(String),
+}
+
+#[doc(hidden)]
+pub struct PbsTreeComp {
+    columns: Rc<Vec<DataTableHeader<PbsTreeNode>>>,
+    filter: String,
+    store: TreeStore<PbsTreeNode>,
+    view_selection: Selection,
+    loaded: bool,
+    _nav_handle: ContextHandle<NavigationContext>,
+}
+
+impl PbsTreeComp {
+    fn load_tree(&mut self, ctx: &yew::Context<Self>) {
+        let mut tree = KeyedSlabTree::new();
+        let mut root = tree.set_root(PbsTreeNode::Root);
+
+        for datastore in ctx.props().resources.iter() {
+            root.append(PbsTreeNode::Datastore(datastore.clone()));
+        }
+
+        root.set_expanded(true);
+        root.sort_by(true, |a, b| match (a, b) {
+            (PbsTreeNode::Root, PbsTreeNode::Root) => Ordering::Equal,
+            (PbsTreeNode::Root, _) => Ordering::Less,
+            (_, PbsTreeNode::Root) => Ordering::Greater,
+            (PbsTreeNode::Datastore(a), PbsTreeNode::Datastore(b)) => a.name.cmp(&b.name),
+        });
+
+        if !self.loaded {
+            let select_key = self
+                .view_selection
+                .selected_key()
+                .unwrap_or(Key::from("__root__"));
+            if let Some(node) = tree.lookup_node(&select_key) {
+                self.view_selection.select(select_key);
+                ctx.props().on_select.emit(node.record().clone());
+            }
+        }
+
+        self.store.write().update_root_tree(tree);
+        self.loaded = true;
+    }
+}
+
+impl Component for PbsTreeComp {
+    type Message = Msg;
+    type Properties = PbsTree;
+
+    fn create(ctx: &yew::Context<Self>) -> Self {
+        let mut tree = KeyedSlabTree::new();
+        tree.set_root(PbsTreeNode::Root);
+        let store = TreeStore::new();
+        store.write().update_root_tree(tree);
+
+        let props = ctx.props();
+        let view_selection = Selection::new().on_select(
+            ctx.link()
+                .callback(|selection: Selection| Msg::KeySelected(selection.selected_key())),
+        );
+
+        let (_nav_ctx, _nav_handle) = ctx
+            .link()
+            .context::<NavigationContext>(Callback::from({
+                let link = ctx.link().clone();
+                move |nav_ctx: NavigationContext| {
+                    let path = nav_ctx.path();
+                    link.send_message(Msg::RouteChanged(path));
+                }
+            }))
+            .unwrap();
+
+        let path = _nav_ctx.path();
+        ctx.link().send_message(Msg::RouteChanged(path));
+        Self {
+            columns: columns(
+                ctx.link().clone(),
+                store.clone(),
+                props.remote.clone(),
+                props.loading,
+            ),
+            filter: String::new(),
+            store,
+            view_selection,
+            loaded: false,
+            _nav_handle,
+        }
+    }
+
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            Msg::Filter(filter) => {
+                let changed = self.filter != filter;
+                self.filter = filter;
+                if self.filter.is_empty() {
+                    self.store.set_filter(None);
+                } else {
+                    let text = self.filter.to_lowercase();
+                    self.store
+                        .set_filter(move |entry: &PbsTreeNode| match entry {
+                            PbsTreeNode::Root => true,
+                            PbsTreeNode::Datastore(datastore) => {
+                                datastore.name.to_lowercase().contains(&text)
+                            }
+                        });
+                }
+                changed
+            }
+            Msg::KeySelected(key) => {
+                let key = key.unwrap_or_else(|| Key::from("__root__"));
+                let store = self.store.read();
+                let root = store.root().unwrap();
+
+                if let Some(node) = root.find_node_by_key(&key) {
+                    let record = node.record().clone();
+                    let route = match &record {
+                        PbsTreeNode::Root => String::new(),
+                        PbsTreeNode::Datastore(datastore) => datastore.name.to_string(),
+                    };
+                    ctx.link().push_relative_route(&route);
+                    ctx.props().on_select.emit(record);
+                }
+                true
+            }
+            Msg::RouteChanged(path) => {
+                let key = if path == "_" || path.is_empty() {
+                    Key::from("__root__")
+                } else {
+                    Key::from(path)
+                };
+                self.view_selection.select(key);
+                true
+            }
+        }
+    }
+
+    fn changed(&mut self, ctx: &Context<Self>, old_props: &Self::Properties) -> bool {
+        if ctx.props().resources != old_props.resources {
+            self.load_tree(ctx);
+        }
+        true
+    }
+
+    fn view(&self, ctx: &yew::Context<Self>) -> yew::Html {
+        let link = ctx.link();
+
+        let nav = DataTable::new(Rc::clone(&self.columns), self.store.clone())
+            .selection(self.view_selection.clone())
+            .striped(false)
+            .borderless(true)
+            .hover(true)
+            .class(FlexFit)
+            .show_header(false);
+        Column::new()
+            .class(FlexFit)
+            .with_child(
+                Toolbar::new()
+                    .border_bottom(true)
+                    .with_child(
+                        Row::new()
+                            .class(AlignItems::Baseline)
+                            .class(FontStyle::TitleMedium)
+                            .gap(2)
+                            .with_child(Fa::new("database"))
+                            .with_child(tr!("Datastores")),
+                    )
+                    .with_child(
+                        Field::new()
+                            .value(self.filter.clone())
+                            .with_trigger(
+                                // FIXME: add `with_optional_trigger` ?
+                                Trigger::new(if !self.filter.is_empty() {
+                                    "fa fa-times"
+                                } else {
+                                    ""
+                                })
+                                .on_activate(link.callback(|_| Msg::Filter(String::new()))),
+                                true,
+                            )
+                            .placeholder(tr!("Filter"))
+                            .on_input(link.callback(Msg::Filter)),
+                    )
+                    .with_child(Button::refresh(ctx.props().loading).on_activate({
+                        let on_reload_click = ctx.props().on_reload_click.clone();
+                        move |_| {
+                            on_reload_click.emit(());
+                        }
+                    })),
+            )
+            .with_child(nav)
+            .into()
+    }
+}
+
+fn columns(
+    link: Scope<PbsTreeComp>,
+    store: TreeStore<PbsTreeNode>,
+    remote: String,
+    loading: bool,
+) -> Rc<Vec<DataTableHeader<PbsTreeNode>>> {
+    let loading = match store.read().root() {
+        Some(root) => loading && root.children_count() == 0,
+        None => loading,
+    };
+    let remote_name = remote.clone();
+    let tree_column = DataTableColumn::new("Type/ID")
+        .flex(1)
+        .tree_column(store)
+        .render(move |entry: &PbsTreeNode| {
+            let (icon, text) = match entry {
+                PbsTreeNode::Root if loading => (
+                    Container::from_tag("i").class("pwt-loading-icon"),
+                    tr!("Querying Remote..."),
+                ),
+                PbsTreeNode::Root => (
+                    Container::new().with_child(Fa::new("server")),
+                    remote_name.clone(),
+                ),
+                PbsTreeNode::Datastore(datastore) => (
+                    Container::new().with_child(Fa::new("database")),
+                    datastore.name.clone(),
+                ),
+            };
+            render_tree_column(icon.into(), text).into()
+        })
+        .into();
+
+    let link_column = DataTableColumn::new("link")
+        .render(move |entry: &PbsTreeNode| {
+            let local_id = match entry {
+                PbsTreeNode::Root => String::new(),
+                PbsTreeNode::Datastore(datastore) => datastore.name.clone(),
+            };
+            Tooltip::new(ActionIcon::new("fa fa-external-link").on_activate({
+                let link = link.clone();
+                let remote = remote.clone();
+                move |_| {
+                    // there must be a remote with a connections config if were already here
+                    if let Some(url) = get_deep_url(&link, &remote, None, &local_id) {
+                        let _ = window().open_with_url(&url.href());
+                    }
+                }
+            }))
+            .tip(tr!("Open in PBS UI"))
+            .into()
+        })
+        .into();
+
+    Rc::new(vec![tree_column, link_column])
+}
-- 
2.47.3



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

[pdm-devel] [PATCH datacenter-manager 08/11] ui: pbs: convert snapshot list to a snapshot tree

[Dominik Csapak]

this is a 'light' version of the tree we have in PBS, only relying on
the snapshot list api call, with less columns.

Since we lack the namespace/group api calls at the moment, just show the
root namespace for now.

It still uses the iterative 'application/json-seq' api behavior to laod
the snapshot list while it's still loading, but instead of always
batching 32 snapshots, batch as many as we can within 250ms.

This should reduce the load of the tree when inserting/resorting but
still give a good indicator that something is happening.

Also adds a loading bar as long as the streaming is ongoing.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/pbs/snapshot_list.rs | 388 ++++++++++++++++++++++++++++--------
 1 file changed, 304 insertions(+), 84 deletions(-)

diff --git a/ui/src/pbs/snapshot_list.rs b/ui/src/pbs/snapshot_list.rs
index 15ba5f4d..74f35fcc 100644
--- a/ui/src/pbs/snapshot_list.rs
+++ b/ui/src/pbs/snapshot_list.rs
@@ -3,19 +3,30 @@
 use std::rc::Rc;
 
 use anyhow::{bail, format_err, Error};
-use futures::future::{abortable, AbortHandle};
+use gloo_timers::callback::Interval;
+use js_sys::Date;
+use proxmox_yew_comp::utils::render_epoch_short;
+use pwt::css::FontColor;
 use yew::virtual_dom::{Key, VComp, VNode};
-use yew::Properties;
+use yew::{html, Properties};
 
 use pwt::prelude::Context as PwtContext;
-use pwt::prelude::{html, tr, Component, Html};
-use pwt::state::{Selection, Store};
+use pwt::prelude::{tr, Component, Html};
+use pwt::props::{
+    ContainerBuilder, CssPaddingBuilder, ExtractPrimaryKey, WidgetBuilder, WidgetStyleBuilder,
+};
+use pwt::state::{Selection, TreeStore};
 use pwt::widget::data_table::{DataTable, DataTableColumn, DataTableHeader};
+use pwt::widget::{error_message, Column, Container, Fa, Progress, Tooltip};
+use pwt::{css, AsyncPool};
 
-use pbs_api_types::SnapshotListItem;
+use pbs_api_types::{BackupGroup, BackupType, SnapshotListItem, VerifyState};
 
 use proxmox_yew_comp::http_stream::Stream;
 
+use crate::locale_compare;
+use crate::renderer::render_tree_column;
+
 #[derive(Clone, PartialEq, Properties)]
 pub struct SnapshotList {
     remote: String,
@@ -28,52 +39,111 @@ impl SnapshotList {
     }
 }
 
-impl Into<VNode> for SnapshotList {
-    fn into(self) -> VNode {
-        let comp = VComp::new::<SnapshotListComp>(Rc::new(self), None);
+impl From<SnapshotList> for VNode {
+    fn from(val: SnapshotList) -> Self {
+        let comp = VComp::new::<SnapshotListComp>(Rc::new(val), None);
         VNode::from(comp)
     }
 }
 
+#[derive(PartialEq, Clone, Default)]
+struct SnapshotVerifyCount {
+    ok: u32,
+    failed: u32,
+    none: u32,
+    outdated: u32,
+}
+
+#[derive(PartialEq, Clone)]
+enum SnapshotTreeEntry {
+    Root,
+    Group(BackupGroup, SnapshotVerifyCount),
+    Snapshot(SnapshotListItem),
+}
+
+impl ExtractPrimaryKey for SnapshotTreeEntry {
+    fn extract_key(&self) -> Key {
+        match self {
+            SnapshotTreeEntry::Root => Key::from("__root__"),
+            SnapshotTreeEntry::Group(group, _) => Key::from(format!("group+{group}")),
+            SnapshotTreeEntry::Snapshot(entry) => Key::from(entry.backup.to_string()),
+        }
+    }
+}
+
+#[allow(clippy::large_enum_variant)]
 enum Msg {
     SelectionChange,
-    Data(Vec<SnapshotListItem>),
+    ConsumeBuffer,
+    UpdateBuffer(SnapshotListItem),
+    LoadFinished(Result<(), Error>),
 }
 
 struct SnapshotListComp {
-    store: Store<SnapshotListItem>,
+    store: TreeStore<SnapshotTreeEntry>,
     selection: Selection,
-    abort: AbortHandle,
-    data: Vec<SnapshotListItem>,
-}
-
-impl Drop for SnapshotListComp {
-    fn drop(&mut self) {
-        self.abort.abort();
-    }
+    _async_pool: AsyncPool,
+    columns: Rc<Vec<DataTableHeader<SnapshotTreeEntry>>>,
+    load_result: Option<Result<(), Error>>,
+    buffer: Vec<SnapshotListItem>,
+    interval: Option<Interval>,
 }
 
 impl SnapshotListComp {
-    async fn load_task(
-        remote: String,
-        datastore: String,
-        callback: yew::Callback<Vec<SnapshotListItem>>,
-    ) {
-        log::info!("starting snapshot listing");
-        match list_snapshots(remote, datastore, callback).await {
-            Ok(()) => log::info!("done listing snapshots"),
-            Err(err) => log::error!("error listing snapshots: {err:?}"),
-        }
+    fn columns(store: TreeStore<SnapshotTreeEntry>) -> Rc<Vec<DataTableHeader<SnapshotTreeEntry>>> {
+        Rc::new(vec![
+            DataTableColumn::new(tr!("Backup Dir"))
+                .flex(1)
+                .tree_column(store.clone())
+                .render(|item: &SnapshotTreeEntry| {
+                    let (icon, res) = match item {
+                        SnapshotTreeEntry::Root => ("database", tr!("Root Namespace")),
+                        SnapshotTreeEntry::Group(group, _) => (
+                            match group.ty {
+                                BackupType::Vm => "desktop",
+                                BackupType::Ct => "cube",
+                                BackupType::Host => "building",
+                            },
+                            group.to_string(),
+                        ),
+                        SnapshotTreeEntry::Snapshot(entry) => ("file-o", entry.backup.to_string()),
+                    };
+                    render_tree_column(Fa::new(icon).fixed_width().into(), res).into()
+                })
+                .into(),
+            DataTableColumn::new(tr!("Count"))
+                .justify("right")
+                .render(|item: &SnapshotTreeEntry| match item {
+                    SnapshotTreeEntry::Root => "".into(),
+                    SnapshotTreeEntry::Group(_group, counts) => {
+                        (counts.ok + counts.failed + counts.none).into()
+                    }
+                    SnapshotTreeEntry::Snapshot(_entry) => "".into(),
+                })
+                .into(),
+            DataTableColumn::new(tr!("Verify State"))
+                .width("150px")
+                .render(render_verification)
+                .into(),
+        ])
     }
 
-    fn spawn_load_task(ctx: &PwtContext<Self>) -> AbortHandle {
-        let props = ctx.props().clone();
-        let callback = ctx.link().callback(Msg::Data);
-        let (fut, abort) = abortable(Self::load_task(props.remote, props.datastore, callback));
-        wasm_bindgen_futures::spawn_local(async move {
-            let _ = fut.await;
-        });
-        abort
+    fn reload(&mut self, ctx: &PwtContext<Self>) {
+        let props = ctx.props();
+        let remote = props.remote.clone();
+        let datastore = props.datastore.clone();
+        let link = ctx.link().clone();
+        self._async_pool
+            .send_future(ctx.link().clone(), async move {
+                let res = list_snapshots(remote, datastore, link.callback(Msg::UpdateBuffer)).await;
+                link.send_message(Msg::ConsumeBuffer);
+                Msg::LoadFinished(res)
+            });
+        self.interval = Some(Interval::new(250, {
+            let link = ctx.link().clone();
+            move || link.send_message(Msg::ConsumeBuffer)
+        }));
+        self.load_result = None;
     }
 }
 
@@ -82,71 +152,142 @@ impl Component for SnapshotListComp {
     type Properties = SnapshotList;
 
     fn create(ctx: &PwtContext<Self>) -> Self {
-        let store = Store::with_extract_key(|record: &SnapshotListItem| {
-            Key::from(record.backup.to_string())
-        });
+        let store = TreeStore::new().view_root(true);
+        store.write().set_root(SnapshotTreeEntry::Root);
 
         let selection = Selection::new().on_select(ctx.link().callback(|_| Msg::SelectionChange));
 
-        let abort = Self::spawn_load_task(ctx);
-
-        Self {
+        let mut this = Self {
+            columns: Self::columns(store.clone()),
             store,
             selection,
-            abort,
-            data: Vec::new(),
-        }
+            _async_pool: AsyncPool::new(),
+            load_result: None,
+            buffer: Vec::new(),
+            interval: None,
+        };
+        this.reload(ctx);
+        this
     }
 
     fn update(&mut self, _ctx: &PwtContext<Self>, msg: Self::Message) -> bool {
         match msg {
             Msg::SelectionChange => true,
-            Msg::Data(data) => {
-                self.data.extend(data);
-                self.store.set_data(self.data.clone());
+            Msg::ConsumeBuffer => {
+                let data = self.buffer.split_off(0);
+                if data.is_empty() {
+                    return false;
+                }
+                let mut store = self.store.write();
+                let mut root = store.root_mut().unwrap();
+
+                if root.children_count() == 0 {
+                    root.set_expanded(true);
+                }
+                let now = (Date::now() / 1000.0) as i64;
+
+                for item in data {
+                    let group = item.backup.group.to_string();
+                    let mut group = if let Some(group) =
+                        root.find_node_by_key_mut(&Key::from(format!("group+{group}")))
+                    {
+                        group
+                    } else {
+                        root.append(SnapshotTreeEntry::Group(
+                            item.backup.group.clone(),
+                            Default::default(),
+                        ))
+                    };
+                    if let SnapshotTreeEntry::Group(_, verify_state) = group.record_mut() {
+                        match item.verification.as_ref() {
+                            Some(state) => {
+                                match state.state {
+                                    VerifyState::Ok => verify_state.ok += 1,
+                                    VerifyState::Failed => verify_state.failed += 1,
+                                }
+
+                                let age_days = (now - state.upid.starttime) / (30 * 24 * 60 * 60);
+                                if age_days > 30 {
+                                    verify_state.outdated += 1;
+                                }
+                            }
+                            None => verify_state.none += 1,
+                        }
+                    }
+                    group.append(SnapshotTreeEntry::Snapshot(item));
+                }
+
+                store.sort_by(true, |a, b| match (a, b) {
+                    (SnapshotTreeEntry::Group(a, _), SnapshotTreeEntry::Group(b, _)) => {
+                        locale_compare(a.to_string(), &b.to_string(), true)
+                    }
+                    (SnapshotTreeEntry::Snapshot(a), SnapshotTreeEntry::Snapshot(b)) => {
+                        a.backup.cmp(&b.backup)
+                    }
+                    _ => std::cmp::Ordering::Less,
+                });
+                true
+            }
+            Msg::UpdateBuffer(item) => {
+                self.buffer.push(item);
+                false
+            }
+            Msg::LoadFinished(res) => {
+                self.load_result = Some(res);
+                self.interval = None;
                 true
             }
         }
     }
 
+    fn changed(&mut self, ctx: &PwtContext<Self>, _old_props: &Self::Properties) -> bool {
+        self.store.write().clear();
+        self.store.write().set_root(SnapshotTreeEntry::Root);
+        self._async_pool = AsyncPool::new();
+        self.reload(ctx);
+        true
+    }
+
     fn view(&self, _ctx: &PwtContext<Self>) -> Html {
-        let columns = COLUMNS.with(Rc::clone);
-        DataTable::new(columns, self.store.clone())
-            .class(pwt::css::FlexFit)
-            .selection(self.selection.clone())
+        let err = match self.load_result.as_ref() {
+            Some(Err(err)) => Some(err),
+            _ => None,
+        };
+        Column::new()
+            .class(css::FlexFit)
+            .with_optional_child(
+                self.load_result.is_none().then_some(
+                    Container::new().style("position", "relative").with_child(
+                        Progress::new()
+                            .style("position", "absolute")
+                            .style("left", "0")
+                            .style("right", "0"),
+                    ),
+                ),
+            )
+            .with_child(
+                DataTable::new(self.columns.clone(), self.store.clone())
+                    .class(css::FlexFit)
+                    .selection(self.selection.clone()),
+            )
+            .with_optional_child(err.map(|err| error_message(&err.to_string())))
             .into()
     }
 }
 
-thread_local! {
-    static COLUMNS: Rc<Vec<DataTableHeader<SnapshotListItem>>> = {
-        Rc::new(
-        vec![DataTableColumn::new(tr!("Backup Dir"))
-            .flex(1)
-            .render(|item: &SnapshotListItem| html! { &item.backup.to_string() })
-            .sorter(|a: &SnapshotListItem, b: &SnapshotListItem| a.backup.cmp(&b.backup))
-            .sort_order(true)
-            .into()]
-        )
-    };
-}
-
 async fn list_snapshots(
     remote: String,
     datastore: String,
-    callback: yew::Callback<Vec<SnapshotListItem>>,
+    callback: yew::Callback<SnapshotListItem>,
 ) -> Result<(), Error> {
-    let client = proxmox_yew_comp::CLIENT.with(|c| std::rc::Rc::clone(&c.borrow()));
-
-    let auth = client
-        .get_auth()
-        .ok_or_else(|| format_err!("client not authenticated"))?;
-
     let path = format!("/api2/json/pbs/remotes/{remote}/datastore/{datastore}/snapshots");
+
+    // TODO: refactor application/json-seq helper for general purpose use
+    let abort = pwt::WebSysAbortGuard::new()?;
     let response = gloo_net::http::Request::get(&path)
         .header("cache-control", "no-cache")
         .header("accept", "application/json-seq")
-        .header("CSRFPreventionToken", &auth.csrfprevention_token)
+        .abort_signal(Some(&abort.signal()))
         .send()
         .await?;
 
@@ -159,19 +300,98 @@ async fn list_snapshots(
         .ok_or_else(|| format_err!("response contained no body"))?;
 
     let mut stream = Stream::try_from(raw_reader)?;
-    let mut batch = Vec::new();
+
     while let Some(entry) = stream.next::<pbs_api_types::SnapshotListItem>().await? {
-        log::info!("Got a snapshot list entry: {name}", name = entry.backup);
-        batch.push(entry);
-        if batch.len() > 32 {
-            callback.emit(std::mem::take(&mut batch));
-        }
+        callback.emit(entry);
     }
-    if !batch.is_empty() {
-        callback.emit(batch);
-    }
-
-    log::info!("finished listing snapshots");
 
     Ok(())
 }
+
+fn render_verification(entry: &SnapshotTreeEntry) -> Html {
+    let now = (Date::now() / 1000.0) as i64;
+    match entry {
+        SnapshotTreeEntry::Root => "".into(),
+        SnapshotTreeEntry::Group(_, verify_state) => {
+            let text;
+            let icon_class;
+            let tip;
+            let class;
+
+            if verify_state.failed == 0 {
+                if verify_state.none == 0 {
+                    if verify_state.outdated > 0 {
+                        tip = tr!("All OK, but some snapshots were not verified in last 30 days");
+                        text = tr!("All OK") + " (" + &tr!("old") + ")";
+                        icon_class = "check";
+                        class = "pwt-color-warning";
+                    } else {
+                        tip = tr!("All snapshots verified at least once in last 30 days");
+                        icon_class = "check";
+                        class = "pwt-color-success";
+                        text = tr!("All OK");
+                    }
+                } else if verify_state.ok == 0 {
+                    tip = tr!("{0} not verified yet", verify_state.none);
+                    icon_class = "question-circle-o";
+                    class = "pwt-color-warning";
+                    text = tr!("None");
+                } else {
+                    tip = tr!("{0} OK", verify_state.ok)
+                        + ", "
+                        + &tr!("{0} not verified yet", verify_state.none);
+                    icon_class = "check";
+                    class = "";
+                    text = tr!("{0} OK", verify_state.ok);
+                }
+            } else {
+                tip = tr!("{0} OK", verify_state.ok)
+                    + ", "
+                    + &tr!("{0} failed", verify_state.failed)
+                    + ", "
+                    + &tr!("{0} not verified yet", verify_state.none);
+                icon_class = "times";
+                class = "pwt-color-warning";
+                if verify_state.ok == 0 && verify_state.none == 0 {
+                    text = tr!("All failed");
+                } else {
+                    text = tr!("{0} failed", verify_state.failed);
+                }
+            }
+            let icon = Fa::new(icon_class).class(class).padding_end(2);
+            Tooltip::new(html! {<>{icon}<span>{text}</span></>})
+                .tip(tip)
+                .into()
+        }
+        SnapshotTreeEntry::Snapshot(entry) => match &entry.verification {
+            Some(state) => {
+                let age_days = (now - state.upid.starttime) / (30 * 24 * 60 * 60);
+                let (text, icon_class, class) = match state.state {
+                    VerifyState::Ok => (tr!("Ok"), "check", FontColor::Success),
+                    VerifyState::Failed => (tr!("Failed"), "times", FontColor::Warning),
+                };
+                let icon = Fa::new(icon_class).class(class).padding_end(2);
+                Tooltip::new(html! {<>{icon}<span>{text}</span></>})
+                    .tip(if age_days > 30 {
+                        tr!(
+                            "Last verify task over 30 days ago: {0}",
+                            render_epoch_short(state.upid.starttime)
+                        )
+                    } else {
+                        tr!(
+                            "Last verify task started on {0}",
+                            render_epoch_short(state.upid.starttime)
+                        )
+                    })
+                    .into()
+            }
+            None => {
+                let icon = Fa::new("question-circle-o")
+                    .class(FontColor::Warning)
+                    .padding_end(2);
+                let text = tr!("None");
+                html! {<>{icon}{text}</>}
+            }
+        },
+    }
+}
-- 
2.47.3



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

[pdm-devel] [PATCH datacenter-manager 09/11] ui: pbs: add datastore panel component

[Dominik Csapak]

this is a tab panel with (for now) two tabs
* Overview: like the node/remote overview but for the datastore
* Content: uses the snapshot tree to show the content

Since we don't have a datastore status api call yet, simply show some
interesting things from the configuration.

Not yet used in this patch.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/pbs/datastore.rs          |  73 +++++++++
 ui/src/pbs/datastore/overview.rs | 260 +++++++++++++++++++++++++++++++
 2 files changed, 333 insertions(+)
 create mode 100644 ui/src/pbs/datastore.rs
 create mode 100644 ui/src/pbs/datastore/overview.rs

diff --git a/ui/src/pbs/datastore.rs b/ui/src/pbs/datastore.rs
new file mode 100644
index 00000000..3d4e6b6e
--- /dev/null
+++ b/ui/src/pbs/datastore.rs
@@ -0,0 +1,73 @@
+use std::rc::Rc;
+
+use yew::{
+    virtual_dom::{VComp, VNode},
+    Component, Properties,
+};
+
+use pwt::{css::FlexFit, props::WidgetBuilder, tr, widget::TabBarItem};
+
+use pbs_api_types::DataStoreConfig;
+
+use crate::pbs::SnapshotList;
+
+mod overview;
+use overview::DataStoreOverview;
+
+#[derive(Properties, PartialEq)]
+pub struct DatastorePanel {
+    remote: String,
+    config: DataStoreConfig,
+}
+
+impl DatastorePanel {
+    pub fn new(remote: String, config: DataStoreConfig) -> Self {
+        yew::props!(Self { remote, config })
+    }
+}
+
+impl From<DatastorePanel> for VNode {
+    fn from(val: DatastorePanel) -> Self {
+        VComp::new::<DatastorePanelComp>(Rc::new(val), None).into()
+    }
+}
+
+#[doc(hidden)]
+struct DatastorePanelComp {}
+
+impl Component for DatastorePanelComp {
+    type Message = ();
+    type Properties = DatastorePanel;
+
+    fn create(_ctx: &yew::Context<Self>) -> Self {
+        Self {}
+    }
+
+    fn view(&self, ctx: &yew::Context<Self>) -> yew::Html {
+        let props = ctx.props();
+        pwt::widget::TabPanel::new()
+            .class(FlexFit)
+            .title(tr!("Datastore {0}", props.config.name))
+            .with_item_builder(
+                TabBarItem::new()
+                    .label(tr!("Overview"))
+                    .icon_class("fa fa-tachometer"),
+                {
+                    let remote = props.remote.clone();
+                    let config = props.config.clone();
+                    move |_| DataStoreOverview::new(remote.clone(), config.clone()).into()
+                },
+            )
+            .with_item_builder(
+                TabBarItem::new()
+                    .label(tr!("Content"))
+                    .icon_class("fa fa-th"),
+                {
+                    let remote = props.remote.clone();
+                    let name = props.config.name.clone();
+                    move |_| SnapshotList::new(remote.clone(), name.clone()).into()
+                },
+            )
+            .into()
+    }
+}
diff --git a/ui/src/pbs/datastore/overview.rs b/ui/src/pbs/datastore/overview.rs
new file mode 100644
index 00000000..14e0add9
--- /dev/null
+++ b/ui/src/pbs/datastore/overview.rs
@@ -0,0 +1,260 @@
+use std::rc::Rc;
+
+use gloo_timers::callback::Timeout;
+use pbs_api_types::DataStoreConfig;
+use yew::{
+    virtual_dom::{VComp, VNode},
+    Properties,
+};
+
+use proxmox_yew_comp::{RRDGraph, RRDTimeframe, RRDTimeframeSelector, Series, StatusRow};
+use pwt::{
+    css::{ColorScheme, FlexFit, JustifyContent},
+    prelude::*,
+    props::WidgetBuilder,
+    widget::{Column, Container, Progress, Row},
+    AsyncPool,
+};
+
+use pdm_api_types::rrddata::PbsDatastoreDataPoint;
+
+use crate::renderer::separator;
+
+#[derive(Clone, PartialEq, Properties)]
+pub struct DataStoreOverview {
+    remote: String,
+    config: DataStoreConfig,
+
+    #[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 Eq for DataStoreOverview {}
+
+impl DataStoreOverview {
+    pub fn new(remote: String, config: DataStoreConfig) -> Self {
+        yew::props!(Self { remote, config })
+    }
+}
+
+impl From<DataStoreOverview> for VNode {
+    fn from(val: DataStoreOverview) -> Self {
+        VComp::new::<DataStoreOverviewComp>(Rc::new(val), None).into()
+    }
+}
+
+pub enum Msg {
+    ReloadRrd,
+    RrdResult(Result<Vec<PbsDatastoreDataPoint>, proxmox_client::Error>),
+    UpdateRrdTimeframe(RRDTimeframe),
+}
+
+pub struct DataStoreOverviewComp {
+    loaded: bool,
+    last_rrd_error: Option<proxmox_client::Error>,
+    _status_timeout: Option<Timeout>,
+    _async_pool: AsyncPool,
+
+    rrd_time_frame: RRDTimeframe,
+
+    time: Rc<Vec<i64>>,
+    disk: Rc<Series>,
+    disk_max: Rc<Series>,
+    disk_read: Rc<Series>,
+    disk_write: Rc<Series>,
+}
+
+impl DataStoreOverviewComp {
+    async fn reload_rrd(
+        remote: &str,
+        id: &str,
+        rrd_time_frame: RRDTimeframe,
+    ) -> Result<Vec<PbsDatastoreDataPoint>, proxmox_client::Error> {
+        let rrd = crate::pdm_client()
+            .pbs_datastore_rrddata(remote, id, rrd_time_frame.mode, rrd_time_frame.timeframe)
+            .await?;
+        Ok(rrd)
+    }
+}
+
+impl yew::Component for DataStoreOverviewComp {
+    type Message = Msg;
+
+    type Properties = DataStoreOverview;
+
+    fn create(ctx: &yew::Context<Self>) -> Self {
+        ctx.link().send_message(Msg::ReloadRrd);
+        Self {
+            loaded: false,
+            _async_pool: AsyncPool::new(),
+            _status_timeout: None,
+            last_rrd_error: None,
+
+            rrd_time_frame: RRDTimeframe::load(),
+
+            time: Rc::new(Vec::new()),
+            disk: Rc::new(Series::new("", Vec::new())),
+            disk_max: Rc::new(Series::new("", Vec::new())),
+            disk_read: Rc::new(Series::new("", Vec::new())),
+            disk_write: Rc::new(Series::new("", Vec::new())),
+        }
+    }
+
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
+        let link = ctx.link().clone();
+        let props = ctx.props();
+        let remote = props.remote.clone();
+        let id = props.config.name.clone();
+        match msg {
+            Msg::ReloadRrd => {
+                let timeframe = self.rrd_time_frame;
+                self._async_pool.send_future(link, async move {
+                    Msg::RrdResult(Self::reload_rrd(&remote, &id, timeframe).await)
+                });
+                false
+            }
+            Msg::RrdResult(res) => {
+                match res {
+                    Ok(rrd) => {
+                        self.last_rrd_error = None;
+
+                        let mut disk = Vec::new();
+                        let mut disk_max = Vec::new();
+                        let mut disk_read = Vec::new();
+                        let mut disk_write = Vec::new();
+                        let mut time = Vec::new();
+                        for data in rrd {
+                            disk.push(data.disk_used.unwrap_or(f64::NAN));
+                            disk_max.push(data.disk_total.unwrap_or(f64::NAN));
+                            disk_read.push(data.disk_read.unwrap_or(f64::NAN));
+                            disk_write.push(data.disk_write.unwrap_or(f64::NAN));
+                            time.push(data.time as i64);
+                        }
+
+                        self.disk = Rc::new(Series::new(tr!("Usage"), disk));
+                        self.disk_max = Rc::new(Series::new(tr!("Total"), disk_max));
+                        self.disk_read = Rc::new(Series::new(tr!("Disk Read"), disk_read));
+                        self.disk_write = Rc::new(Series::new(tr!("Disk Write"), disk_write));
+                        self.time = Rc::new(time);
+                    }
+                    Err(err) => self.last_rrd_error = Some(err),
+                }
+                self._status_timeout = Some(Timeout::new(props.rrd_interval, move || {
+                    link.send_message(Msg::ReloadRrd)
+                }));
+                self.loaded = true;
+                true
+            }
+            Msg::UpdateRrdTimeframe(rrd_time_frame) => {
+                self.rrd_time_frame = rrd_time_frame;
+                ctx.link().send_message(Msg::ReloadRrd);
+                false
+            }
+        }
+    }
+
+    fn changed(&mut self, ctx: &Context<Self>, old_props: &Self::Properties) -> bool {
+        let props = ctx.props();
+
+        if props.remote != old_props.remote || props.config != old_props.config {
+            self.last_rrd_error = None;
+
+            self.time = Rc::new(Vec::new());
+            self.disk = Rc::new(Series::new("", Vec::new()));
+            self.disk_max = Rc::new(Series::new("", Vec::new()));
+            self.disk_read = Rc::new(Series::new("", Vec::new()));
+            self.disk_write = Rc::new(Series::new("", Vec::new()));
+            self._async_pool = AsyncPool::new();
+            ctx.link().send_message(Msg::ReloadRrd);
+            true
+        } else {
+            false
+        }
+    }
+
+    fn view(&self, ctx: &yew::Context<Self>) -> yew::Html {
+        let props = ctx.props();
+
+        // TODO get current status via API and show usage, etc.
+
+        Container::new()
+            .class(FlexFit)
+            .class(ColorScheme::Neutral)
+            .with_child(
+                // FIXME: add some 'visible' or 'active' property to the progress
+                Progress::new()
+                    .value((self.loaded).then_some(0.0))
+                    .style("opacity", (self.loaded).then_some("0")),
+            )
+            .with_child(
+                Column::new()
+                    .gap(2)
+                    .padding(4)
+                    .with_child(
+                        StatusRow::new(tr!("Path"))
+                            .icon_class("fa fa-fw fa-folder-o")
+                            .status(&props.config.path),
+                    )
+                    .with_optional_child(props.config.comment.as_deref().map(|comment| {
+                        StatusRow::new(tr!("Comment"))
+                            .icon_class("fa fa-fw fa-comment-o")
+                            .status(comment)
+                    }))
+                    .with_optional_child(props.config.maintenance_mode.as_deref().map(|mode| {
+                        StatusRow::new(tr!("Maintenance Mode"))
+                            .icon_class("fa fa-fw fa-wrench")
+                            .status(mode)
+                    })),
+            )
+            .with_child(separator().padding_x(4))
+            .with_child(
+                Row::new()
+                    .padding_x(4)
+                    .padding_y(1)
+                    .class(JustifyContent::FlexEnd)
+                    .with_child(
+                        RRDTimeframeSelector::new()
+                            .on_change(ctx.link().callback(Msg::UpdateRrdTimeframe)),
+                    ),
+            )
+            .with_child(
+                Container::new().class(FlexFit).with_child(
+                    Column::new()
+                        .padding(4)
+                        .gap(4)
+                        .with_child(
+                            RRDGraph::new(self.time.clone())
+                                .title(tr!("Usage"))
+                                .render_value(|v: &f64| {
+                                    if v.is_finite() {
+                                        proxmox_human_byte::HumanByte::from(*v as u64).to_string()
+                                    } else {
+                                        v.to_string()
+                                    }
+                                })
+                                .serie0(Some(self.disk.clone()))
+                                .serie1(Some(self.disk_max.clone())),
+                        )
+                        .with_child(
+                            RRDGraph::new(self.time.clone())
+                                .title(tr!("Disk I/O"))
+                                .render_value(|v: &f64| {
+                                    if v.is_finite() {
+                                        proxmox_human_byte::HumanByte::from(*v as u64).to_string()
+                                    } else {
+                                        v.to_string()
+                                    }
+                                })
+                                .serie0(Some(self.disk_read.clone()))
+                                .serie1(Some(self.disk_write.clone())),
+                        ),
+                ),
+            )
+            .into()
+    }
+}
-- 
2.47.3



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

[pdm-devel] [PATCH datacenter-manager 10/11] ui: pbs: add remote overview panel

[Dominik Csapak]

similar to the PVE node overview.

Not yet used in this patch.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/pbs/remote.rs | 291 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 291 insertions(+)
 create mode 100644 ui/src/pbs/remote.rs

diff --git a/ui/src/pbs/remote.rs b/ui/src/pbs/remote.rs
new file mode 100644
index 00000000..7cf7c7e2
--- /dev/null
+++ b/ui/src/pbs/remote.rs
@@ -0,0 +1,291 @@
+use std::rc::Rc;
+
+use yew::{
+    virtual_dom::{VComp, VNode},
+    Context,
+};
+
+use proxmox_yew_comp::{node_info, RRDGraph, RRDTimeframe, RRDTimeframeSelector, Series};
+use pwt::{
+    css::{AlignItems, ColorScheme, FlexFit, JustifyContent},
+    prelude::*,
+    props::{ContainerBuilder, WidgetBuilder},
+    widget::{error_message, Column, Container, Fa, Panel, Progress, Row},
+    AsyncPool,
+};
+
+use pbs_api_types::NodeStatus;
+use pdm_api_types::rrddata::PbsNodeDataPoint;
+
+use crate::renderer::separator;
+
+#[derive(Clone, Debug, Eq, PartialEq, Properties)]
+pub struct RemoteOverviewPanel {
+    /// The remote to show
+    pub remote: String,
+
+    #[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 RemoteOverviewPanel {
+    pub fn new(remote: String) -> Self {
+        yew::props!(Self { remote })
+    }
+}
+
+impl Into<VNode> for RemoteOverviewPanel {
+    fn into(self) -> VNode {
+        VComp::new::<RemoteOverviewPanelComp>(Rc::new(self), None).into()
+    }
+}
+
+pub enum Msg {
+    ReloadRrd,
+    ReloadStatus,
+    LoadFinished(Result<Vec<PbsNodeDataPoint>, proxmox_client::Error>),
+    StatusLoadFinished(Result<NodeStatus, proxmox_client::Error>),
+    UpdateRrdTimeframe(RRDTimeframe),
+}
+
+pub struct RemoteOverviewPanelComp {
+    time_data: Rc<Vec<i64>>,
+    cpu_data: Rc<Series>,
+    load_data: Rc<Series>,
+    mem_data: Rc<Series>,
+    mem_total_data: Rc<Series>,
+    status: Option<NodeStatus>,
+
+    rrd_time_frame: RRDTimeframe,
+
+    last_error: Option<proxmox_client::Error>,
+    last_status_error: Option<proxmox_client::Error>,
+
+    async_pool: AsyncPool,
+    _timeout: Option<gloo_timers::callback::Timeout>,
+    _status_timeout: Option<gloo_timers::callback::Timeout>,
+}
+
+impl RemoteOverviewPanelComp {
+    async fn reload_rrd(remote: &str, rrd_time_frame: RRDTimeframe) -> Msg {
+        let res = crate::pdm_client()
+            .pbs_node_rrddata(remote, rrd_time_frame.mode, rrd_time_frame.timeframe)
+            .await;
+
+        Msg::LoadFinished(res)
+    }
+
+    async fn reload_status(remote: &str) -> Result<NodeStatus, proxmox_client::Error> {
+        let status = crate::pdm_client().pbs_node_status(remote).await?;
+        Ok(status)
+    }
+}
+
+impl yew::Component for RemoteOverviewPanelComp {
+    type Message = Msg;
+    type Properties = RemoteOverviewPanel;
+
+    fn create(ctx: &yew::Context<Self>) -> Self {
+        ctx.link().send_message(Msg::ReloadRrd);
+        ctx.link().send_message(Msg::ReloadStatus);
+        Self {
+            time_data: Rc::new(Vec::new()),
+            cpu_data: Rc::new(Series::new("", Vec::new())),
+            load_data: Rc::new(Series::new("", Vec::new())),
+            mem_data: Rc::new(Series::new("", Vec::new())),
+            mem_total_data: Rc::new(Series::new("", Vec::new())),
+            rrd_time_frame: RRDTimeframe::load(),
+            status: None,
+            last_error: None,
+            last_status_error: None,
+            async_pool: AsyncPool::new(),
+            _timeout: None,
+            _status_timeout: None,
+        }
+    }
+
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            Msg::ReloadRrd => {
+                self._timeout = None;
+                let props = ctx.props();
+                let remote = props.remote.clone();
+                let timeframe = self.rrd_time_frame;
+                self.async_pool.send_future(ctx.link().clone(), async move {
+                    Self::reload_rrd(&remote, timeframe).await
+                });
+            }
+            Msg::ReloadStatus => {
+                self._status_timeout = None;
+                let props = ctx.props();
+                let remote = props.remote.clone();
+                self.async_pool.send_future(ctx.link().clone(), async move {
+                    let res = Self::reload_status(&remote).await;
+                    Msg::StatusLoadFinished(res)
+                });
+            }
+            Msg::LoadFinished(res) => match res {
+                Ok(data_points) => {
+                    self.last_error = None;
+                    let mut cpu_vec = Vec::with_capacity(data_points.len());
+                    let mut load_vec = Vec::with_capacity(data_points.len());
+                    let mut mem_vec = Vec::with_capacity(data_points.len());
+                    let mut mem_total_vec = Vec::with_capacity(data_points.len());
+                    let mut time_vec = Vec::with_capacity(data_points.len());
+                    for data in data_points {
+                        cpu_vec.push(data.cpu_current.unwrap_or(f64::NAN));
+                        load_vec.push(data.cpu_avg1.unwrap_or(f64::NAN));
+                        mem_vec.push(data.mem_used.unwrap_or(f64::NAN));
+                        mem_total_vec.push(data.mem_total.unwrap_or(f64::NAN));
+                        time_vec.push(data.time as i64);
+                    }
+
+                    self.cpu_data = Rc::new(Series::new(tr!("CPU"), cpu_vec));
+                    self.load_data = Rc::new(Series::new(tr!("Server Load"), load_vec));
+                    self.mem_data = Rc::new(Series::new(tr!("Used Memory"), mem_vec));
+                    self.mem_total_data = Rc::new(Series::new(tr!("Total Memory"), mem_total_vec));
+                    self.time_data = Rc::new(time_vec);
+
+                    let link = ctx.link().clone();
+                    self._timeout = Some(gloo_timers::callback::Timeout::new(
+                        ctx.props().rrd_interval,
+                        move || link.send_message(Msg::ReloadRrd),
+                    ))
+                }
+                Err(err) => self.last_error = Some(err),
+            },
+            Msg::StatusLoadFinished(res) => {
+                match res {
+                    Ok(status) => {
+                        self.last_status_error = None;
+                        self.status = Some(status);
+                    }
+                    Err(err) => {
+                        self.last_status_error = Some(err);
+                    }
+                }
+                let link = ctx.link().clone();
+                self._status_timeout = Some(gloo_timers::callback::Timeout::new(
+                    ctx.props().status_interval,
+                    move || link.send_message(Msg::ReloadStatus),
+                ))
+            }
+            Msg::UpdateRrdTimeframe(rrd_time_frame) => {
+                self.rrd_time_frame = rrd_time_frame;
+                ctx.link().send_message(Msg::ReloadRrd);
+                return false;
+            }
+        }
+        true
+    }
+
+    fn changed(&mut self, ctx: &Context<Self>, old_props: &Self::Properties) -> bool {
+        let props = ctx.props();
+
+        if props.remote != old_props.remote {
+            self.status = None;
+            self.last_error = None;
+            self.time_data = Rc::new(Vec::new());
+            self.cpu_data = Rc::new(Series::new("", Vec::new()));
+            self.load_data = Rc::new(Series::new("", Vec::new()));
+            self.mem_data = Rc::new(Series::new("", Vec::new()));
+            self.mem_total_data = Rc::new(Series::new("", Vec::new()));
+            self.async_pool = AsyncPool::new();
+            ctx.link()
+                .send_message_batch(vec![Msg::ReloadRrd, Msg::ReloadStatus]);
+            true
+        } else {
+            false
+        }
+    }
+
+    fn view(&self, ctx: &yew::Context<Self>) -> yew::Html {
+        let status_comp = node_info(self.status.as_ref().map(|s| s.into()));
+
+        let loading = self.status.is_none() && self.last_status_error.is_none();
+        let title: Html = Row::new()
+            .gap(2)
+            .class(AlignItems::Baseline)
+            .with_child(Fa::new("tachometer"))
+            .with_child(tr! {"Overview"})
+            .into();
+        Panel::new()
+            .title(title)
+            .class(FlexFit)
+            .class(ColorScheme::Neutral)
+            .with_child(
+                // FIXME: add some 'visible' or 'active' property to the progress
+                Progress::new()
+                    .value((!loading).then_some(0.0))
+                    .style("opacity", (!loading).then_some("0")),
+            )
+            .with_child(status_comp)
+            .with_optional_child(
+                self.last_status_error
+                    .as_ref()
+                    .map(|err| error_message(&err.to_string())),
+            )
+            .with_child(separator().padding_x(4))
+            .with_child(
+                Row::new()
+                    .padding_x(4)
+                    .padding_y(1)
+                    .class(JustifyContent::FlexEnd)
+                    .with_child(
+                        RRDTimeframeSelector::new()
+                            .on_change(ctx.link().callback(Msg::UpdateRrdTimeframe)),
+                    ),
+            )
+            .with_child(
+                Container::new().class(FlexFit).with_child(
+                    Column::new()
+                        .padding(4)
+                        .gap(4)
+                        .with_child(
+                            RRDGraph::new(self.time_data.clone())
+                                .title(tr!("CPU Usage"))
+                                .render_value(|v: &f64| {
+                                    if v.is_finite() {
+                                        format!("{:.2}%", v * 100.0)
+                                    } else {
+                                        v.to_string()
+                                    }
+                                })
+                                .serie0(Some(self.cpu_data.clone())),
+                        )
+                        .with_child(
+                            RRDGraph::new(self.time_data.clone())
+                                .title(tr!("Server load"))
+                                .render_value(|v: &f64| {
+                                    if v.is_finite() {
+                                        format!("{:.2}", v)
+                                    } else {
+                                        v.to_string()
+                                    }
+                                })
+                                .serie0(Some(self.load_data.clone())),
+                        )
+                        .with_child(
+                            RRDGraph::new(self.time_data.clone())
+                                .title(tr!("Memory Usage"))
+                                .binary(true)
+                                .render_value(|v: &f64| {
+                                    if v.is_finite() {
+                                        proxmox_human_byte::HumanByte::from(*v as u64).to_string()
+                                    } else {
+                                        v.to_string()
+                                    }
+                                })
+                                .serie0(Some(self.mem_data.clone()))
+                                .serie1(Some(self.mem_total_data.clone())),
+                        ),
+                ),
+            )
+            .into()
+    }
+}
-- 
2.47.3



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

[pdm-devel] [PATCH datacenter-manager 11/11] ui: pbs: use new pbs panels/overview

[Dominik Csapak]

this makes use of the newly introduced remote overview panel, the
datastore tree and the datastore panels for PBS remotes.

The intent is for it to look similar to the PVE remote view, but i opted
for making the left hand side (with the datastore tree) narrower, so we
have more space for showing content.

We can do this, because there is less information to be shown per
datastore (name only) than on PVE (tags, actions).

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/src/pbs/mod.rs | 232 +++++++++++++++++++++++-----------------------
 1 file changed, 116 insertions(+), 116 deletions(-)

diff --git a/ui/src/pbs/mod.rs b/ui/src/pbs/mod.rs
index 834ac654..b737cb4c 100644
--- a/ui/src/pbs/mod.rs
+++ b/ui/src/pbs/mod.rs
@@ -1,173 +1,173 @@
 use std::future::Future;
-use std::pin::Pin;
 use std::rc::Rc;
 
 use anyhow::Error;
-use yew::virtual_dom::{Key, VComp, VNode};
-use yew::Callback;
-use yew::Html;
-use yew::Properties;
+use gloo_utils::window;
+use pbs_api_types::DataStoreConfig;
+use pwt::props::ExtractPrimaryKey;
+use yew::virtual_dom::{VComp, VNode};
+use yew::{Html, Properties};
 
 use proxmox_yew_comp::{LoadableComponent, LoadableComponentContext, LoadableComponentMaster};
-use pwt::css::FlexFit;
-use pwt::props::{ContainerBuilder, WidgetBuilder};
-use pwt::state::{NavigationContainer, PersistentState, Selection};
-use pwt::widget::nav::{Menu, MenuItem, NavigationDrawer};
-use pwt::widget::{Pane, SplitPane};
-use pwt::widget::{SelectionView, SelectionViewRenderInfo};
+use pwt::css::{AlignItems, FlexFit};
+use pwt::prelude::*;
+use pwt::state::NavigationContainer;
+use pwt::tr;
+use pwt::widget::{Button, Column, Container, Fa, Panel, Row};
 
-use pbs_api_types::DataStoreConfig;
+mod tree;
+
+mod datastore;
+pub use datastore::DatastorePanel;
+
+mod remote;
 
 mod snapshot_list;
 pub use snapshot_list::SnapshotList;
 
-#[derive(PartialEq, Properties)]
+use crate::pbs::remote::RemoteOverviewPanel;
+use crate::pbs::tree::PbsTree;
+use crate::{get_deep_url, pdm_client};
+
+#[derive(Debug, Eq, PartialEq, Properties)]
 pub struct PbsRemote {
     remote: String,
 }
 
 impl PbsRemote {
     pub fn new(remote: String) -> Self {
-        yew::props!(Self { remote })
+        Self { remote }
     }
 }
 
-impl Into<VNode> for PbsRemote {
-    fn into(self) -> VNode {
-        let comp = VComp::new::<LoadableComponentMaster<PbsRemoteComp>>(Rc::new(self), None);
-        VNode::from(comp)
+impl From<PbsRemote> for VNode {
+    fn from(val: PbsRemote) -> Self {
+        VComp::new::<LoadableComponentMaster<PbsRemoteComp>>(Rc::new(val), None).into()
     }
 }
 
-pub struct PbsRemoteComp {
-    datastore_list: PersistentState<Vec<DataStoreConfig>>,
-    active: Key,
-    selection: Selection,
+#[allow(clippy::large_enum_variant)]
+pub enum Msg {
+    SelectedView(tree::PbsTreeNode),
+    ResourcesList(Vec<DataStoreConfig>),
 }
 
-pub enum Msg {
-    Select(Key),
-    UpdateDatastoreList(Vec<DataStoreConfig>),
+#[doc(hidden)]
+pub struct PbsRemoteComp {
+    datastores: Rc<Vec<DataStoreConfig>>,
+    view: tree::PbsTreeNode,
 }
 
-#[derive(PartialEq)]
-pub enum ViewState {}
+impl PbsRemoteComp {
+    async fn load_datastores(remote: &str) -> Result<Vec<DataStoreConfig>, Error> {
+        let datastores = pdm_client().pbs_list_datastores(remote).await?;
+        Ok(datastores)
+    }
+}
 
 impl LoadableComponent for PbsRemoteComp {
     type Message = Msg;
     type Properties = PbsRemote;
-    type ViewState = ViewState;
+    type ViewState = ();
+
+    fn create(_ctx: &LoadableComponentContext<Self>) -> Self {
+        Self {
+            datastores: Rc::new(Vec::new()),
+            view: tree::PbsTreeNode::Root,
+        }
+    }
 
     fn load(
         &self,
-        ctx: &LoadableComponentContext<Self>,
-    ) -> Pin<Box<dyn Future<Output = Result<(), Error>>>> {
-        let remote = ctx.props().remote.clone();
-        let link = ctx.link();
+        _ctx: &LoadableComponentContext<Self>,
+    ) -> std::pin::Pin<Box<dyn Future<Output = Result<(), anyhow::Error>>>> {
+        let link = _ctx.link().clone();
+        let remote = _ctx.props().remote.clone();
         Box::pin(async move {
-            let mut data = crate::pdm_client().pbs_list_datastores(&remote).await?;
-            data.sort_by(|a, b| a.name.cmp(&b.name));
-            link.send_message(Msg::UpdateDatastoreList(data));
+            link.send_message(Msg::ResourcesList(Self::load_datastores(&remote).await?));
             Ok(())
         })
     }
 
-    fn create(ctx: &LoadableComponentContext<Self>) -> Self {
-        let props = ctx.props();
-        let link = ctx.link();
-        link.repeated_load(3000);
-
-        Self {
-            datastore_list: PersistentState::new(format!("PdmPbsDatastoreList-{}", props.remote)),
-            selection: Selection::new(),
-            active: Key::from(""),
-        }
-    }
-
     fn update(&mut self, _ctx: &LoadableComponentContext<Self>, msg: Self::Message) -> bool {
         match msg {
-            Msg::Select(key) => {
-                self.active = key;
-                true
+            Msg::SelectedView(pbs_tree_node) => {
+                log::info!("selected: {:?}", pbs_tree_node.extract_key());
+                self.view = pbs_tree_node;
             }
-            Msg::UpdateDatastoreList(list) => {
-                self.datastore_list.update(list);
-                true
+            Msg::ResourcesList(vec) => {
+                self.datastores = Rc::new(vec);
             }
         }
+        true
     }
 
-    fn toolbar(&self, _ctx: &LoadableComponentContext<Self>) -> Option<Html> {
-        None
-    }
-
-    fn main_view(&self, ctx: &LoadableComponentContext<Self>) -> Html {
-        let scope = ctx.link().clone();
+    fn main_view(&self, ctx: &LoadableComponentContext<Self>) -> yew::Html {
         let props = ctx.props();
 
-        let mut content = SelectionView::new()
-            .class(FlexFit)
-            .selection(self.selection.clone());
-
-        let mut menu = Menu::new();
-
-        for datastore in self.datastore_list.iter() {
-            register_view(
-                &mut menu,
-                &mut content,
-                &datastore.name,
-                &datastore.name,
-                Some("fa fa-server"),
-                {
-                    let datastore = datastore.name.clone();
-                    let remote = props.remote.clone();
-                    move |_| SnapshotList::new(remote.clone(), datastore.clone()).into()
-                },
-            );
-        }
+        let content: Html = match &self.view {
+            tree::PbsTreeNode::Root => RemoteOverviewPanel::new(props.remote.clone()).into(),
+            tree::PbsTreeNode::Datastore(data_store_config) => {
+                DatastorePanel::new(props.remote.clone(), data_store_config.clone()).into()
+            }
+        };
 
-        let drawer = NavigationDrawer::new(menu)
-            .aria_label("PBS Datastore Menu")
-            .class("pwt-border-end")
-            .router(true)
-            // .default_active(self.active.to_string())
-            .selection(self.selection.clone())
-            .on_select(Callback::from(move |id: Option<Key>| {
-                let id = id.unwrap_or_else(|| Key::from(""));
-                scope.send_message(Msg::Select(id))
-            }));
+        let title: Html = Row::new()
+            .gap(2)
+            .class(AlignItems::Center)
+            .with_child(Fa::new("server"))
+            .with_child(tr! {"Remote '{0}'", ctx.props().remote})
+            .into();
 
         NavigationContainer::new()
             .with_child(
-                SplitPane::new()
+                Container::new()
+                    .class("pwt-content-spacer")
+                    .class("pwt-flex-direction-row")
                     .class(FlexFit)
-                    .with_child(Pane::new(drawer).size(None))
-                    .with_child(Pane::new(content).flex(1)),
+                    .with_child(
+                        Panel::new()
+                            .border(true)
+                            .class(FlexFit)
+                            .title(title.clone())
+                            .style("flex", "1 1 0")
+                            .max_width(500)
+                            .with_tool(
+                                Button::new(tr!("Open Web UI"))
+                                    .icon_class("fa fa-external-link")
+                                    .on_activate({
+                                        let link = ctx.link().clone();
+                                        let remote = ctx.props().remote.clone();
+                                        move |_| {
+                                            if let Some(url) =
+                                                get_deep_url(link.yew_link(), &remote, None, "")
+                                            {
+                                                let _ = window().open_with_url(&url.href());
+                                            }
+                                        }
+                                    }),
+                            )
+                            .with_child(Column::new().padding(4).class(FlexFit).with_child(
+                                PbsTree::new(
+                                    props.remote.clone(),
+                                    self.datastores.clone(),
+                                    ctx.loading(),
+                                    ctx.link().callback(Msg::SelectedView),
+                                    {
+                                        let link = ctx.link().clone();
+                                        move |_| link.send_reload()
+                                    },
+                                ),
+                            )),
+                    )
+                    .with_child(
+                        Panel::new()
+                            .style("flex", "2 1 0")
+                            .border(true)
+                            .class(FlexFit)
+                            .with_child(content),
+                    ),
             )
             .into()
     }
-
-    fn dialog_view(
-        &self,
-        _ctx: &LoadableComponentContext<Self>,
-        _view_state: &Self::ViewState,
-    ) -> Option<Html> {
-        None
-    }
-}
-
-fn register_view(
-    menu: &mut Menu,
-    view: &mut SelectionView,
-    text: impl Into<String>,
-    id: &str,
-    icon_class: Option<&'static str>,
-    renderer: impl 'static + Fn(&SelectionViewRenderInfo) -> Html,
-) {
-    view.add_builder(id, renderer);
-    menu.add_item(
-        MenuItem::new(text.into())
-            .key(id.to_string())
-            .icon_class(icon_class),
-    );
 }
-- 
2.47.3



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

[pdm-devel] applied: [PATCH datacenter-manager 00/11] improve PBS view

[Thomas Lamprecht]

On Fri, 26 Sep 2025 09:20:20 +0200, Dominik Csapak wrote:
> This improves the existing PBS remote view to be a more usable and in
> line with what we have for PVE:
> 
> * have a two column layout with a 'datastore tree' on the left and
>   the selected content on the right
> * Node overview panel like for PVE nodes
> * datastore tabpanel with overview + content
> 
> [...]

Applied, thanks!

[01/11] server: api: return list of pve/pbs remotes
        commit: 39a976305dceeed8e920650c9d4a58c0be2e1f9e
[02/11] server: api: pbs: add status api call
        commit: 4e63e59c64071928f4d917676a4cddc08d6ef4a9
[03/11] server: pbs-client: use `json` formatter for the snapshot list streaming api
        commit: 249f7ece8dac625c9916fe65495048b13dd99ecb
[04/11] pdm-client: add pbs node status helper
        commit: 639fb556d20f9c3bfcd29b19694cb2ceb0d732d0
[05/11] ui: pve: tree: refactor rendering the tree column
        commit: b5a4c1113f33a4839574c30a663c96e853832b7f
[06/11] ui: add helper to compare two strings with `localeCompare`
        commit: ac351086e85ebbe8850eafaf70c2988a4b755fe7
[07/11] ui: pbs: add datastore tree
        commit: c622c5ac94c9342677d73874535921f100303a52
[08/11] ui: pbs: convert snapshot list to a snapshot tree
        commit: acc97033e6bb4aa54dc2f4089206606d2b40f81f
[09/11] ui: pbs: add datastore panel component
        commit: 09c0cbe37600ad8bbbed7eb4873fb9a3bb867ec7
[10/11] ui: pbs: add remote overview panel
        commit: e5dd5fe6c3827ffef10321d3ca8df087bd2b7a9b
[11/11] ui: pbs: use new pbs panels/overview
        commit: ed84ed4df8fd69139679ccd9d71beb7380c88d1e


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