Re: [pdm-devel] [PATCH datacenter-manager 16/21] ui: widget: add pve realm selector

["Lukas Wagner" <l.wagner@proxmox.com>]

On Fri May 16, 2025 at 3:36 PM CEST, Dominik Csapak wrote:
> similar to the general realm selector, but with a hostname/fingerprint
> property, so we can query the realms of any PVE instance.
>
> Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
> ---
>  ui/src/widget/mod.rs                |   3 +
>  ui/src/widget/pve_realm_selector.rs | 125 ++++++++++++++++++++++++++++
>  2 files changed, 128 insertions(+)
>  create mode 100644 ui/src/widget/pve_realm_selector.rs
>
> diff --git a/ui/src/widget/mod.rs b/ui/src/widget/mod.rs
> index ee9e799..9d7840c 100644
> --- a/ui/src/widget/mod.rs
> +++ b/ui/src/widget/mod.rs
> @@ -13,6 +13,9 @@ pub use pve_storage_selector::PveStorageSelector;
>  mod pve_migrate_mapping;
>  pub use pve_migrate_mapping::PveMigrateMap;
>  
> +mod pve_realm_selector;
> +pub use pve_realm_selector::PveRealmSelector;
> +
>  mod resource_tree;
>  pub use resource_tree::ResourceTree;
>  
> diff --git a/ui/src/widget/pve_realm_selector.rs b/ui/src/widget/pve_realm_selector.rs
> new file mode 100644
> index 0000000..8025c2d
> --- /dev/null
> +++ b/ui/src/widget/pve_realm_selector.rs
> @@ -0,0 +1,125 @@
> +use anyhow::format_err;
> +use std::rc::Rc;
> +
> +use yew::html::IntoPropValue;
> +use yew::prelude::*;
> +
> +use pwt::props::RenderFn;
> +use pwt::state::Store;
> +use pwt::widget::data_table::{DataTable, DataTableColumn, DataTableHeader};
> +use pwt::widget::form::{Selector, SelectorRenderArgs, ValidateFn};
> +use pwt::widget::GridPicker;
> +
> +use proxmox_yew_comp::common_api_types::BasicRealmInfo;
> +use proxmox_yew_comp::percent_encoding::percent_encode_component;
> +
> +use pwt::props::{FieldBuilder, WidgetBuilder};
> +use pwt_macros::{builder, widget};
> +
> +#[widget(comp=PdmPveRealmSelector, @input)]
> +#[derive(Clone, Properties, PartialEq)]
> +#[builder]
> +pub struct PveRealmSelector {
> +    /// The default value.
> +    #[builder(IntoPropValue, into_prop_value)]
> +    #[prop_or_default]
> +    pub default: Option<AttrValue>,
> +
> +    pub hostname: AttrValue,
> +
> +    pub fingerprint: Option<AttrValue>,
> +}
> +
> +impl PveRealmSelector {
> +    pub fn new(
> +        hostname: impl IntoPropValue<AttrValue>,
> +        fingerprint: impl IntoPropValue<Option<AttrValue>>,
> +    ) -> Self {
> +        yew::props!(Self {
> +            hostname: hostname.into_prop_value(),
> +            fingerprint: fingerprint.into_prop_value(),
> +        })
> +    }
> +}
> +
> +pub struct PdmPveRealmSelector {
> +    store: Store<BasicRealmInfo>,
> +    validate: ValidateFn<(String, Store<BasicRealmInfo>)>,
> +    picker: RenderFn<SelectorRenderArgs<Store<BasicRealmInfo>>>,
> +}
> +
> +impl Component for PdmPveRealmSelector {
> +    type Message = ();
> +    type Properties = PveRealmSelector;
> +
> +    fn create(ctx: &Context<Self>) -> Self {
> +        let store = Store::new().on_change(ctx.link().callback(|_| ())); // trigger redraw
> +
> +        let validate = ValidateFn::new(|(realm, store): &(String, Store<BasicRealmInfo>)| {
> +            store
> +                .read()
> +                .data()
> +                .iter()
> +                .find(|item| &item.realm == realm)
> +                .map(drop)
> +                .ok_or_else(|| format_err!("no such realm"))

Maybe it's just me, but I find

            if store.read().data().iter().any(|item| &item.realm == realm) {
                Ok(())
            } else {
                Err(format_err!("no such realm"))
            }

a bit easier to understand here (the `.map(drop)` reads a bit odd to me,
that's not something you see a lot)

> +        });
> +
> +        let picker = RenderFn::new({
> +            let columns = columns();
> +            move |args: &SelectorRenderArgs<Store<BasicRealmInfo>>| {
> +                let table = DataTable::new(columns.clone(), args.store.clone()).class("pwt-fit");
> +
> +                GridPicker::new(table)
> +                    .selection(args.selection.clone())
> +                    .on_select(args.controller.on_select_callback())
> +                    .into()
> +            }
> +        });
> +
> +        Self {
> +            store,
> +            validate,
> +            picker,
> +        }
> +    }
> +
> +    fn view(&self, ctx: &Context<Self>) -> Html {
> +        let props = ctx.props();
> +
> +        let mut url = format!(
> +            "/pve/realms?hostname={}",
> +            percent_encode_component(&props.hostname)
> +        );
> +        if let Some(fp) = &props.fingerprint {
> +            url.push_str(&format!("&fingerprint={}", percent_encode_component(fp)));
> +        }
> +
> +        Selector::new(self.store.clone(), self.picker.clone())
> +            .with_std_props(&props.std_props)
> +            .with_input_props(&props.input_props)
> +            .required(true)
> +            .default(props.default.as_deref().unwrap_or("pam").to_string())
> +            .loader(url)
> +            .validate(self.validate.clone())
> +            .into()
> +    }
> +}
> +
> +fn columns() -> Rc<Vec<DataTableHeader<BasicRealmInfo>>> {
> +    Rc::new(vec![
> +        DataTableColumn::new("Realm")
> +            .width("100px")
> +            .sort_order(true)
> +            .show_menu(false)
> +            .get_property(|record: &BasicRealmInfo| &record.realm)
> +            .into(),
> +        DataTableColumn::new("Comment")
> +            .width("300px")
> +            .show_menu(false)
> +            .get_property_owned(|record: &BasicRealmInfo| {
> +                record.comment.clone().unwrap_or_default()
> +            })
> +            .into(),
> +    ])
> +}



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