[pdm-devel] [PATCH datacenter-manager 3/5] ui: configuration: add subscription panel
Dominik Csapak
d.csapak at proxmox.com
Tue Dec 2 15:31:06 CET 2025
it's very similar to the pve/pbs/pmg one, but only shows relevant
information. It also shows the statistics that determines the validity
state.
Note: the thresholds and calculation is copied from the backend, to
further improve this, we should move that code somwhere we can reuse it
for both.
Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
ui/src/configuration/mod.rs | 2 +
ui/src/configuration/subscription_panel.rs | 187 +++++++++++++++++++++
ui/src/main_menu.rs | 18 +-
3 files changed, 206 insertions(+), 1 deletion(-)
create mode 100644 ui/src/configuration/subscription_panel.rs
diff --git a/ui/src/configuration/mod.rs b/ui/src/configuration/mod.rs
index 35114336..18fc3966 100644
--- a/ui/src/configuration/mod.rs
+++ b/ui/src/configuration/mod.rs
@@ -13,6 +13,8 @@ mod permission_path_selector;
mod webauthn;
pub use webauthn::WebauthnPanel;
+pub mod subscription_panel;
+
pub mod views;
#[function_component(SystemConfiguration)]
diff --git a/ui/src/configuration/subscription_panel.rs b/ui/src/configuration/subscription_panel.rs
new file mode 100644
index 00000000..797eab0e
--- /dev/null
+++ b/ui/src/configuration/subscription_panel.rs
@@ -0,0 +1,187 @@
+use std::future::Future;
+use std::pin::Pin;
+use std::rc::Rc;
+
+use pdm_api_types::subscription::SubscriptionStatistics;
+use serde_json::Value;
+
+use yew::virtual_dom::{VComp, VNode};
+
+use pwt::prelude::*;
+use pwt::widget::{error_message, Button, Column, Container, Row, Toolbar};
+
+use proxmox_yew_comp::{http_get, http_post, KVGrid, KVGridRow};
+use proxmox_yew_comp::{LoadableComponent, LoadableComponentContext, LoadableComponentMaster};
+
+const SUBSCRIPTION_URL: &str = "/nodes/localhost/subscription";
+
+#[derive(Properties, PartialEq, Clone)]
+pub struct SubscriptionPanel {}
+
+impl SubscriptionPanel {
+ pub fn new() -> Self {
+ yew::props!(Self {})
+ }
+}
+
+pub enum Msg {
+ LoadFinished(Value),
+}
+
+pub struct ProxmoxSubscriptionPanel {
+ rows: Rc<Vec<KVGridRow>>,
+ data: Option<Rc<Value>>,
+}
+
+impl LoadableComponent for ProxmoxSubscriptionPanel {
+ type Message = Msg;
+ type Properties = SubscriptionPanel;
+ type ViewState = ();
+
+ fn create(_ctx: &LoadableComponentContext<Self>) -> Self {
+ Self {
+ rows: Rc::new(rows()),
+ data: None,
+ }
+ }
+
+ fn update(&mut self, _ctx: &LoadableComponentContext<Self>, msg: Self::Message) -> bool {
+ match msg {
+ Msg::LoadFinished(value) => {
+ self.data = Some(Rc::new(value));
+ }
+ }
+ true
+ }
+
+ fn load(
+ &self,
+ _ctx: &LoadableComponentContext<Self>,
+ ) -> Pin<Box<dyn Future<Output = Result<(), anyhow::Error>>>> {
+ let link = _ctx.link().clone();
+ Box::pin(async move {
+ let info = http_get(SUBSCRIPTION_URL, None).await?;
+ link.send_message(Msg::LoadFinished(info));
+ Ok(())
+ })
+ }
+
+ fn toolbar(&self, ctx: &LoadableComponentContext<Self>) -> Option<Html> {
+ let toolbar = Toolbar::new()
+ .class("pwt-overflow-hidden")
+ .border_bottom(true)
+ .with_child(
+ Button::new(tr!("Check"))
+ .icon_class("fa fa-check-square-o")
+ .on_activate({
+ let link = ctx.link();
+
+ move |_| {
+ link.spawn({
+ let link = link.clone();
+ async move {
+ match http_post(SUBSCRIPTION_URL, None).await {
+ Ok(()) => link.send_reload(),
+ Err(err) => {
+ link.show_error(tr!("Error"), err.to_string(), true)
+ }
+ }
+ }
+ })
+ }
+ }),
+ )
+ .with_spacer()
+ .with_flex_spacer()
+ .with_child({
+ let loading = ctx.loading();
+ let link = ctx.link();
+ Button::refresh(loading).on_activate(move |_| link.send_reload())
+ });
+
+ Some(toolbar.into())
+ }
+
+ fn main_view(&self, _ctx: &LoadableComponentContext<Self>) -> Html {
+ let data = match &self.data {
+ Some(data) => data.clone(),
+ None => Rc::new(Value::Null),
+ };
+
+ KVGrid::new()
+ .class("pwt-flex-fit")
+ .data(data.clone())
+ .rows(Rc::clone(&self.rows))
+ .into()
+ }
+}
+
+impl From<SubscriptionPanel> for VNode {
+ fn from(val: SubscriptionPanel) -> Self {
+ let comp =
+ VComp::new::<LoadableComponentMaster<ProxmoxSubscriptionPanel>>(Rc::new(val), None);
+ VNode::from(comp)
+ }
+}
+
+// FIXME: ratios copied from backend
+
+// minimum ratio of nodes with active subscriptions
+const SUBSCRIPTION_THRESHOLD: f64 = 0.9;
+// max ratio of nodes with community subscriptions, among nodes with subscriptions
+const COMMUNITY_THRESHOLD: f64 = 0.4;
+
+fn rows() -> Vec<KVGridRow> {
+ vec![
+ KVGridRow::new("status", tr!("Status")).renderer(move |_name, value, record| {
+ let value = match value {
+ Value::String(data) => data,
+ Value::Null => return Container::from_tag("i").class("pwt-loading-icon").into(),
+ _ => return error_message(&tr!("invalid data")).into(),
+ };
+ match record["message"].as_str() {
+ Some(msg) => format!("{value}: {msg}").into(),
+ None => value.into(),
+ }
+ }),
+ KVGridRow::new("statistics", tr!("Statistics")).renderer(move |_name, value, _record| {
+ let statistics = serde_json::from_value::<SubscriptionStatistics>(value.clone());
+ match statistics {
+ Ok(stats) => {
+ let subscribed_ratio =
+ stats.active_subscriptions as f64 / stats.total_nodes as f64;
+ let community_ratio =
+ stats.community as f64 / stats.active_subscriptions as f64;
+
+ fn operator(a: f64, b: f64) -> &'static str {
+ if a >= b {
+ ">="
+ } else {
+ "<"
+ }
+ }
+
+ Column::new()
+ .with_child(Row::new().with_child(tr!(
+ "Subscribed Ratio: {0} ({1} {2})",
+ format!("{:.0}%", subscribed_ratio * 100.0),
+ operator(subscribed_ratio, SUBSCRIPTION_THRESHOLD),
+ format!("{:.0}%", SUBSCRIPTION_THRESHOLD * 100.0),
+ )))
+ .with_child(Row::new().with_child(tr!(
+ "Community Ratio: {0} ({1} {2})",
+ format!("{:.0}%", community_ratio * 100.0),
+ operator(community_ratio, COMMUNITY_THRESHOLD),
+ format!("{:.0}%", COMMUNITY_THRESHOLD * 100.0),
+ )))
+ .into()
+ }
+ Err(err) => error_message(&format!("api error: {err}")).into(),
+ }
+ }),
+ KVGridRow::new("url", tr!("Info URL")).renderer(|_name, value, _record| {
+ let url = value.as_str().unwrap().to_string();
+ html! { <a target="_blank" href={url.clone()}>{url}</a> }
+ }),
+ ]
+}
diff --git a/ui/src/main_menu.rs b/ui/src/main_menu.rs
index 0847c7a2..18988eaf 100644
--- a/ui/src/main_menu.rs
+++ b/ui/src/main_menu.rs
@@ -7,13 +7,14 @@ use pwt::css::{self, Display, FlexFit};
use pwt::prelude::*;
use pwt::state::{NavigationContextExt, Selection};
use pwt::widget::nav::{Menu, MenuItem, NavigationDrawer};
-use pwt::widget::{Container, Row, SelectionView, SelectionViewRenderInfo};
+use pwt::widget::{Container, Panel, Row, SelectionView, SelectionViewRenderInfo};
use proxmox_yew_comp::{AclContext, NotesView, XTermJs};
use pdm_api_types::remotes::RemoteType;
use pdm_api_types::{PRIV_SYS_AUDIT, PRIV_SYS_MODIFY};
+use crate::configuration::subscription_panel::SubscriptionPanel;
use crate::configuration::views::ViewGrid;
use crate::dashboard::view::View;
use crate::remotes::RemotesPanel;
@@ -266,6 +267,21 @@ impl Component for PdmMainMenu {
|_| html! {<CertificatesPanel/>},
);
+ register_view(
+ &mut config_submenu,
+ &mut content,
+ tr!("Subscription"),
+ "subscription",
+ Some("fa fa-support"),
+ |_| {
+ Panel::new()
+ .class(css::FlexFit)
+ .title(tr!("Subscription"))
+ .with_child(SubscriptionPanel::new())
+ .into()
+ },
+ );
+
register_submenu(
&mut menu,
&mut content,
--
2.47.3
More information about the pdm-devel
mailing list