[pdm-devel] [PATCH datacenter-manager v3 19/19] ui: dashboard: add panel for PBS datastore statistics
Christian Ebner
c.ebner at proxmox.com
Tue Oct 21 13:11:29 CEST 2025
Show a dashboard with the number of datastores in their respective
storage state.
Signed-off-by: Christian Ebner <c.ebner at proxmox.com>
---
Changes since version 2:
- not present in previous version
ui/src/dashboard/mod.rs | 76 +++-------
ui/src/dashboard/pbs_datastores_panel.rs | 175 +++++++++++++++++++++++
2 files changed, 193 insertions(+), 58 deletions(-)
create mode 100644 ui/src/dashboard/pbs_datastores_panel.rs
diff --git a/ui/src/dashboard/mod.rs b/ui/src/dashboard/mod.rs
index d3da03d..07d5cd9 100644
--- a/ui/src/dashboard/mod.rs
+++ b/ui/src/dashboard/mod.rs
@@ -54,6 +54,9 @@ use status_row::DashboardStatusRow;
mod filtered_tasks;
+mod pbs_datastores_panel;
+use pbs_datastores_panel::PbsDatastoresPanel;
+
mod tasks;
use tasks::TaskSummary;
@@ -282,6 +285,20 @@ impl PdmDashboard {
)
}
+ fn create_pbs_datastores_panel(&self) -> Panel {
+ let pbs_datastores = self
+ .status
+ .as_ref()
+ .map(|status| status.pbs_datastores.clone());
+
+ Panel::new()
+ .flex(1.0)
+ .width(300)
+ .title(self.create_title_with_icon("database", tr!("Backup Server Datastores")))
+ .border(true)
+ .with_child(PbsDatastoresPanel::new(pbs_datastores))
+ }
+
fn reload(&mut self, ctx: &yew::Context<Self>) {
let max_age = if self.loaded_once {
self.config.max_age.unwrap_or(DEFAULT_MAX_AGE_S)
@@ -520,64 +537,7 @@ impl Component for PdmDashboard {
tr!("Backup Server Nodes"),
RemoteType::Pbs,
))
- // FIXME: add further PBS support
- //.with_child(
- // Panel::new()
- // .flex(1.0)
- // .width(300)
- // .title(self.create_title_with_icon(
- // "floppy-o",
- // tr!("Backup Server Datastores"),
- // ))
- // .border(true)
- // .with_child(if self.loading {
- // Column::new()
- // .padding(4)
- // .class(FlexFit)
- // .class(JustifyContent::Center)
- // .class(AlignItems::Center)
- // .with_child(html! {<i class={"pwt-loading-icon"} />})
- // } else {
- // Column::new()
- // .padding(4)
- // .class(FlexFit)
- // .class(JustifyContent::Center)
- // .gap(2)
- // // FIXME: show more detailed status (usage?)
- // .with_child(
- // Row::new()
- // .gap(2)
- // .with_child(
- // StorageState::Available.to_fa_icon().fixed_width(),
- // )
- // .with_child(tr!("available"))
- // .with_flex_spacer()
- // .with_child(
- // Container::from_tag("span").with_child(
- // self.status.pbs_datastores.available,
- // ),
- // ),
- // )
- // .with_optional_child(
- // (self.status.pbs_datastores.unknown > 0).then_some(
- // Row::new()
- // .gap(2)
- // .with_child(
- // StorageState::Unknown
- // .to_fa_icon()
- // .fixed_width(),
- // )
- // .with_child(tr!("unknown"))
- // .with_flex_spacer()
- // .with_child(
- // Container::from_tag("span").with_child(
- // self.status.pbs_datastores.unknown,
- // ),
- // ),
- // ),
- // )
- // }),
- //)
+ .with_child(self.create_pbs_datastores_panel())
.with_child(SubscriptionInfo::new()),
)
.with_child(
diff --git a/ui/src/dashboard/pbs_datastores_panel.rs b/ui/src/dashboard/pbs_datastores_panel.rs
new file mode 100644
index 0000000..e028476
--- /dev/null
+++ b/ui/src/dashboard/pbs_datastores_panel.rs
@@ -0,0 +1,175 @@
+use std::rc::Rc;
+
+use pdm_api_types::resource::{PbsDatastoreStatusCount, ResourceType};
+use pdm_search::{Search, SearchTerm};
+use proxmox_yew_comp::Status;
+use pwt::{
+ css::{self, TextAlign},
+ prelude::*,
+ widget::{Container, Fa, List, ListTile},
+};
+use yew::{
+ virtual_dom::{VComp, VNode},
+ Properties,
+};
+
+use crate::search_provider::get_search_provider;
+
+use super::loading_column;
+
+#[derive(PartialEq, Clone, Properties)]
+pub struct PbsDatastoresPanel {
+ status: Option<PbsDatastoreStatusCount>,
+}
+
+impl PbsDatastoresPanel {
+ /// Create new datastore status panel with given storage status counts
+ pub fn new(status: Option<PbsDatastoreStatusCount>) -> Self {
+ yew::props!(Self { status })
+ }
+}
+
+impl From<PbsDatastoresPanel> for VNode {
+ fn from(value: PbsDatastoresPanel) -> Self {
+ let comp = VComp::new::<PbsDatastoresPanelComponent>(Rc::new(value), None);
+ VNode::from(comp)
+ }
+}
+
+#[derive(PartialEq, Clone)]
+pub enum StatusRow {
+ Online(u64),
+ InMaintenance(u64),
+ Removable(u64),
+ S3Backend(u64),
+ HighUsage(u64),
+ Unknown(u64),
+ All(u64),
+}
+
+pub struct PbsDatastoresPanelComponent {}
+
+impl yew::Component for PbsDatastoresPanelComponent {
+ type Message = Search;
+ type Properties = PbsDatastoresPanel;
+
+ fn create(_ctx: &yew::Context<Self>) -> Self {
+ Self {}
+ }
+
+ fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
+ if let Some(provider) = get_search_provider(ctx) {
+ provider.search(msg);
+ }
+
+ false
+ }
+
+ fn view(&self, ctx: &yew::Context<Self>) -> yew::Html {
+ let props = ctx.props();
+
+ let Some(status) = &props.status else {
+ return loading_column().into();
+ };
+
+ let data = vec![
+ StatusRow::Online(status.online),
+ StatusRow::InMaintenance(status.in_maintenance.unwrap_or_default()),
+ StatusRow::Removable(status.removable.unwrap_or_default()),
+ StatusRow::S3Backend(status.s3_backend.unwrap_or_default()),
+ StatusRow::HighUsage(status.high_usage.unwrap_or_default()),
+ StatusRow::Unknown(status.unknown.unwrap_or_default()),
+ StatusRow::All(status.online + status.in_maintenance.unwrap_or_default()),
+ ];
+
+ let tiles: Vec<_> = data
+ .into_iter()
+ .filter_map(|row| create_list_tile(ctx.link(), row))
+ .collect();
+
+ let list = List::new(tiles.len() as u64, move |idx: u64| {
+ tiles[idx as usize].clone()
+ })
+ .padding(4)
+ .class(css::Flex::Fill)
+ .grid_template_columns("auto auto 1fr auto");
+
+ list.into()
+ }
+}
+
+fn create_list_tile(
+ link: &html::Scope<PbsDatastoresPanelComponent>,
+ status_row: StatusRow,
+) -> Option<ListTile> {
+ let (icon, count, name, search_term) = match status_row {
+ StatusRow::Online(count) => (
+ Fa::from(Status::Success),
+ count,
+ "Online",
+ Some(("online", "status")),
+ ),
+ StatusRow::HighUsage(count) => (
+ Fa::from(Status::Warning),
+ count,
+ "High usage",
+ Some(("high-usage", "property")),
+ ),
+ StatusRow::InMaintenance(count) => (
+ Fa::new("wrench"),
+ count,
+ "In Maintenance",
+ Some(("in-maintenance", "status")),
+ ),
+ StatusRow::Removable(count) => (
+ Fa::new("plug"),
+ count,
+ "Removable",
+ Some(("removable", "property")),
+ ),
+ StatusRow::S3Backend(count) => (
+ Fa::new("cloud-upload"),
+ count,
+ "S3",
+ Some(("s3", "property")),
+ ),
+ StatusRow::Unknown(count) => (
+ Fa::from(Status::Unknown),
+ count,
+ "Unknown",
+ Some(("unknown", "property")),
+ ),
+ StatusRow::All(count) => (Fa::new("database"), count, "All", None),
+ };
+
+ Some(
+ ListTile::new()
+ .tabindex(0)
+ .interactive(true)
+ .with_child(icon)
+ .with_child(Container::new().padding_x(2).with_child(name))
+ .with_child(
+ Container::new()
+ .class(TextAlign::Right)
+ .padding_end(2)
+ .with_child(count),
+ )
+ .with_child(Fa::new("search"))
+ .onclick(link.callback(move |_| create_pbs_datastores_status_search_term(search_term)))
+ .onkeydown(link.batch_callback(
+ move |event: KeyboardEvent| match event.key().as_str() {
+ "Enter" | " " => Some(create_pbs_datastores_status_search_term(search_term)),
+ _ => None,
+ },
+ )),
+ )
+}
+
+fn create_pbs_datastores_status_search_term(search_term: Option<(&str, &str)>) -> Search {
+ let resource_type: ResourceType = ResourceType::PbsDatastore;
+ let mut terms = vec![SearchTerm::new(resource_type.as_str()).category(Some("type"))];
+ if let Some((search_term, category)) = search_term {
+ terms.push(SearchTerm::new(search_term).category(Some(category)));
+ }
+ Search::with_terms(terms)
+}
--
2.47.3
More information about the pdm-devel
mailing list