[pdm-devel] [PATCH datacenter-manager 4/5] ui: show pdm subscription state in top nav bar

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

Just an icon and a very high level (and short) text to not use too much
space here. A click on it navigates to the subscription panel (with more
details).

For this to work, we have to change the subscription laoding in the main
entry point a bit, since we now want to always load it, not just when
we're freshly logging in.

While the icon logic is reused from proxmox-yew-comp, the text is unique
here because it has to be short and we don't have that many possible
states currently.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 ui/Cargo.toml         |  1 +
 ui/src/main.rs        | 56 +++++++++++++++++++++++++++----------------
 ui/src/top_nav_bar.rs | 41 +++++++++++++++++++++++++++++++
 3 files changed, 78 insertions(+), 20 deletions(-)

diff --git a/ui/Cargo.toml b/ui/Cargo.toml
index d58dac37..2d347ad2 100644
--- a/ui/Cargo.toml
+++ b/ui/Cargo.toml
@@ -39,6 +39,7 @@ proxmox-client = "1"
 proxmox-human-byte = "1"
 proxmox-login = "1"
 proxmox-schema = "5"
+proxmox-subscription = { version = "1.0.1", features = ["api-types"], default-features = false }
 proxmox-rrd-api-types = "1"
 proxmox-node-status = "1"
 pbs-api-types = { version = "1.0.3", features = [ "enum-fallback" ] }
diff --git a/ui/src/main.rs b/ui/src/main.rs
index 63ac1431..bc8143a6 100644
--- a/ui/src/main.rs
+++ b/ui/src/main.rs
@@ -1,6 +1,6 @@
 use anyhow::Error;
 use gloo_timers::callback::Timeout;
-use serde_json::json;
+use serde_json::{json, Value};
 use wasm_bindgen::JsCast;
 use web_sys::HtmlElement;
 
@@ -16,15 +16,16 @@ use pbs_api_types::TaskListItem;
 use proxmox_login::Authentication;
 use proxmox_yew_comp::utils::init_task_descr_table_base;
 use proxmox_yew_comp::{
-    authentication_from_cookie, http_get, register_auth_observer, AclContextProvider, AuthObserver,
-    LoginPanel, SubscriptionAlert,
+    authentication_from_cookie, http_get, register_auth_observer, subscription_is_active,
+    AclContextProvider, AuthObserver, LoginPanel, SubscriptionAlert,
 };
 
 //use pbs::MainMenu;
+use pdm_api_types::subscription::PdmSubscriptionInfo;
 use pdm_api_types::views::ViewConfig;
 use pdm_ui::{
-    check_subscription, register_pve_tasks, MainMenu, RemoteList, RemoteListCacheEntry,
-    SearchProvider, TopNavBar, ViewListContext,
+    register_pve_tasks, MainMenu, RemoteList, RemoteListCacheEntry, SearchProvider, TopNavBar,
+    ViewListContext,
 };
 
 type MsgRemoteList = Result<RemoteList, Error>;
@@ -40,12 +41,14 @@ enum Msg {
     RemoteList(MsgRemoteList),
     ViewList(MsgViewList),
     UpdateViewList,
+    UpdateSubscriptionInfo(Result<Value, Error>, bool), // fresh login
 }
 
 struct DatacenterManagerApp {
     _auth_observer: AuthObserver,
     login_info: Option<Authentication>,
     subscription_confirmed: bool,
+    subscription: Option<PdmSubscriptionInfo>,
     show_subscription_alert: Option<bool>,
     running_tasks: Loader<Vec<TaskListItem>>,
     running_tasks_timeout: Option<Timeout>,
@@ -74,21 +77,12 @@ impl DatacenterManagerApp {
     fn on_login(&mut self, ctx: &Context<Self>, fresh_login: bool) {
         if let Some(info) = &self.login_info {
             self.running_tasks.load();
-            if fresh_login {
-                if self.subscription_confirmed {
-                    ctx.link().send_message(Msg::ConfirmSubscription);
-                } else {
-                    self.async_pool.send_future(ctx.link().clone(), async move {
-                        let is_active = check_subscription().await;
-
-                        if !is_active {
-                            Msg::ShowSubscriptionAlert
-                        } else {
-                            Msg::ConfirmSubscription
-                        }
-                    });
-                }
-            } else {
+            let link = ctx.link().clone();
+            self.async_pool.spawn(async move {
+                let data = http_get("/nodes/localhost/subscription", None).await;
+                link.send_message(Msg::UpdateSubscriptionInfo(data, fresh_login));
+            });
+            if !fresh_login {
                 ctx.link().send_message(Msg::ConfirmSubscription);
                 proxmox_yew_comp::http_set_auth(info.clone());
             }
@@ -209,6 +203,7 @@ impl Component for DatacenterManagerApp {
             _auth_observer,
             login_info,
             subscription_confirmed: false,
+            subscription: None,
             show_subscription_alert: None,
             running_tasks,
             running_tasks_timeout: None,
@@ -229,6 +224,27 @@ impl Component for DatacenterManagerApp {
 
     fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
+            Msg::UpdateSubscriptionInfo(data, fresh_login) => {
+                if fresh_login {
+                    let message = if self.subscription_confirmed {
+                        Msg::ConfirmSubscription
+                    } else {
+                        let is_active = subscription_is_active(Some(&data));
+
+                        if !is_active {
+                            Msg::ShowSubscriptionAlert
+                        } else {
+                            Msg::ConfirmSubscription
+                        }
+                    };
+                    ctx.link().send_message(message);
+                }
+                self.subscription = data
+                    .map(|value| serde_json::from_value::<PdmSubscriptionInfo>(value).ok())
+                    .ok()
+                    .flatten();
+                true
+            }
             Msg::ConfirmSubscription => {
                 self.subscription_confirmed = true;
                 self.show_subscription_alert = Some(false);
diff --git a/ui/src/top_nav_bar.rs b/ui/src/top_nav_bar.rs
index 4c63e013..a99dc7ff 100644
--- a/ui/src/top_nav_bar.rs
+++ b/ui/src/top_nav_bar.rs
@@ -10,10 +10,13 @@ use pwt::widget::menu::{Menu, MenuButton, MenuEntry, MenuEvent, MenuItem};
 use pwt::AsyncAbortGuard;
 use yew::html::{IntoEventCallback, IntoPropValue};
 use yew::virtual_dom::{VComp, VNode};
+use yew_router::prelude::RouterScopeExt;
+use yew_router::AnyRoute;
 
 use pwt::state::{Loader, Theme, ThemeObserver};
 use pwt::widget::{Button, Container, Row, ThemeModeSelector, Tooltip};
 
+use proxmox_subscription::SubscriptionStatus;
 use proxmox_yew_comp::utils::set_location_href;
 use proxmox_yew_comp::RunningTasksButton;
 use proxmox_yew_comp::{http_get, LanguageDialog, TaskViewer, ThemeDialog};
@@ -21,6 +24,7 @@ use proxmox_yew_comp::{http_get, LanguageDialog, TaskViewer, ThemeDialog};
 use pwt_macros::builder;
 
 use pbs_api_types::TaskListItem;
+use pdm_api_types::subscription::PdmSubscriptionInfo;
 use pdm_api_types::RemoteUpid;
 
 use crate::tasks::format_optional_remote_upid;
@@ -42,6 +46,11 @@ async fn load_version() -> Result<VersionInfo, Error> {
 pub struct TopNavBar {
     running_tasks: Loader<Vec<TaskListItem>>,
 
+    #[builder(IntoPropValue, into_prop_value)]
+    #[prop_or_default]
+    /// Used to show the subscription validity
+    subscription_info: Option<PdmSubscriptionInfo>,
+
     #[builder_cb(IntoEventCallback, into_event_callback, ())]
     #[prop_or_default]
     pub on_logout: Option<Callback<()>>,
@@ -284,6 +293,18 @@ impl Component for PdmTopNavBar {
                     <a href="https://bugzilla.proxmox.com" target="_blank">{"BETA"}</a>
                 </span>
             })
+            .with_child(
+                show_subscription_notice(props.subscription_info.clone())
+                    .class("pwt-pointer")
+                    .onclick({
+                        let link = ctx.link().clone();
+                        move |_| {
+                            if let Some(nav) = link.navigator() {
+                                nav.push(&AnyRoute::new("/subscription"));
+                            }
+                        }
+                    }),
+            )
             .with_flex_spacer()
             .with_child(SearchBox::new())
             .with_flex_spacer()
@@ -299,3 +320,23 @@ impl From<TopNavBar> for VNode {
         VNode::from(comp)
     }
 }
+
+fn show_subscription_notice(subscriptions: Option<PdmSubscriptionInfo>) -> Row {
+    let subscription = subscriptions.unwrap_or_default();
+    let icon = proxmox_yew_comp::subscription_icon(&subscription.info.status.to_string());
+
+    // not the same as in proxmox-yew-comp, because
+    // 1. pdm does not have its own subscription
+    // 2. the text must be short for the top nav bar
+    let text = match subscription.info.status {
+        SubscriptionStatus::Active => tr!("Valid subscription"),
+        SubscriptionStatus::NotFound => tr!("No valid subscription"),
+        _ => tr!("Invalid subscription state"),
+    };
+
+    Row::new()
+        .padding_x(2)
+        .gap(2)
+        .with_child(Container::new().with_child(icon.large()))
+        .with_child(Container::new().with_child(text))
+}
-- 
2.47.3



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