Re: [pdm-devel] [PATCH datacenter-manager v2 12/14] ui: auto-installer: add installations overview panel

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

Some notes inline :)

On Fri Dec 5, 2025 at 12:25 PM CET, Christoph Heiss wrote:
> +
> +#[derive(Default, PartialEq, Properties)]
> +pub struct AutoInstallerPanel {}
> +
> +impl From<AutoInstallerPanel> for VNode {
> +    fn from(value: AutoInstallerPanel) -> Self {
> +        let comp = VComp::new::<LoadableComponentMaster<AutoInstallerPanelComponent>>(
> +            Rc::new(value),
> +            None,
> +        );
> +        VNode::from(comp)
> +    }
> +}
> +

Message, ViewState and AutoInstallerPanelComponent can be private

> +pub enum Message {
> +    Refresh,
> +    SelectionChange,
> +    RemoveEntry,
> +}
> +
> +#[derive(PartialEq)]
> +pub enum ViewState {
> +    ShowRawSystemInfo,
> +    ShowRawPostHookData,
> +}
> +
> +#[derive(PartialEq, Properties)]
> +pub struct AutoInstallerPanelComponent {
> +    selection: Selection,
> +    store: Store<Installation>,
> +    columns: Rc<Vec<DataTableHeader<Installation>>>,
> +}
> +
> +impl LoadableComponent for AutoInstallerPanelComponent {
> +    type Properties = AutoInstallerPanel;
> +    type Message = Message;
> +    type ViewState = ViewState;
> +
> +    fn create(ctx: &LoadableComponentContext<Self>) -> Self {
> +        let selection =
> +            Selection::new().on_select(ctx.link().callback(|_| Message::SelectionChange));
> +
> +        let store =
> +            Store::with_extract_key(|record: &Installation| Key::from(record.uuid.to_string()));
> +        store.set_sorter(|a: &Installation, b: &Installation| a.received_at.cmp(&b.received_at));
> +
> +        Self {
> +            selection,
> +            store,
> +            columns: Rc::new(columns()),
> +        }
> +    }
> +
> +    fn load(
> +        &self,
> +        _ctx: &LoadableComponentContext<Self>,
> +    ) -> Pin<Box<dyn Future<Output = Result<()>>>> {
> +        let store = self.store.clone();
> +        Box::pin(async move {
> +            let data = proxmox_yew_comp::http_get("/auto-install/installations", None).await?;
> +            store.write().set_data(data);
> +            Ok(())
> +        })
> +    }
> +
> +    fn update(&mut self, ctx: &LoadableComponentContext<Self>, msg: Self::Message) -> bool {
> +        match msg {
> +            Self::Message::Refresh => {
> +                ctx.link().send_reload();
> +                false
> +            }
> +            Self::Message::SelectionChange => true,
> +            Self::Message::RemoveEntry => {
> +                if let Some(key) = self.selection.selected_key() {
> +                    let link = ctx.link();
> +                    link.clone().spawn(async move {
> +                        if let Err(err) = delete_entry(key).await {
> +                            link.show_error(tr!("Unable to delete entry"), err, true);
> +                        }
> +                        link.send_reload();
> +                    })
> +                }
> +                false
> +            }
> +        }
> +    }
> +
> +    fn toolbar(&self, ctx: &LoadableComponentContext<Self>) -> Option<yew::Html> {
> +        let link = ctx.link();
> +
> +        let selection_has_post_hook_data = self
> +            .selection
> +            .selected_key()
> +            .and_then(|key| {
> +                self.store
> +                    .read()
> +                    .lookup_record(&key)
> +                    .map(|data| data.post_hook_data.is_some())
> +            })
> +            .unwrap_or(false);
> +
> +        let toolbar = Toolbar::new()
> +            .class("pwt-w-100")
> +            .class(pwt::css::Overflow::Hidden)
> +            .class("pwt-border-bottom")
> +            .with_child(
> +                Button::new(tr!("Raw system information"))
> +                    .disabled(self.selection.is_empty())
> +                    .onclick(link.change_view_callback(|_| Some(ViewState::ShowRawSystemInfo))),
> +            )
> +            .with_child(
> +                Button::new(tr!("Post-installation webhook data"))
> +                    .disabled(self.selection.is_empty() || !selection_has_post_hook_data)
> +                    .onclick(link.change_view_callback(|_| Some(ViewState::ShowRawPostHookData))),
> +            )
> +            .with_spacer()
> +            .with_child(
> +                ConfirmButton::new(tr!("Remove"))
> +                    .confirm_message(tr!("Are you sure you want to remove this entry?"))
> +                    .disabled(self.selection.is_empty())
> +                    .on_activate(link.callback(|_| Message::RemoveEntry)),
> +            )
> +            .with_flex_spacer()
> +            .with_child(
> +                Button::refresh(ctx.loading()).onclick(ctx.link().callback(|_| Message::Refresh)),
> +            );
> +
> +        Some(toolbar.into())
> +    }
> +
> +    fn main_view(&self, ctx: &LoadableComponentContext<Self>) -> yew::Html {
> +        DataTable::new(self.columns.clone(), self.store.clone())
> +            .class(pwt::css::FlexFit)
> +            .selection(self.selection.clone())
> +            .on_row_dblclick({
> +                let link = ctx.link();
> +                move |_: &mut DataTableMouseEvent| {
> +                    link.change_view(Some(Self::ViewState::ShowRawSystemInfo));
> +                }
> +            })
> +            .into()
> +    }
> +
> +    fn dialog_view(
> +        &self,
> +        ctx: &LoadableComponentContext<Self>,
> +        view_state: &Self::ViewState,
> +    ) -> Option<yew::Html> {
> +        let on_done = ctx.link().clone().change_view_callback(|_| None);
> +
> +        let record = self
> +            .store
> +            .read()
> +            .lookup_record(&self.selection.selected_key()?)?
> +            .clone();
> +
> +        Some(match view_state {
> +            Self::ViewState::ShowRawSystemInfo => {
> +                DataViewWindow::new(tr!("Raw system information"))
> +                    .on_done(on_done)
> +                    .loader({
> +                        move || {
> +                            let info = record.info.clone();
> +                            async move { Ok(info) }
> +                        }
> +                    })
> +                    .renderer(|data: &SystemInfo| -> yew::Html {
> +                        let value = serde_json::to_string_pretty(data)
> +                            .unwrap_or_else(|_| "<failed to decode>".to_owned());
> +                        render_raw_info_container(value)
> +                    })
> +                    .resizable(true)
> +                    .into()
> +            }
> +            Self::ViewState::ShowRawPostHookData => {
> +                DataViewWindow::new(tr!("Raw post-installation webhook data"))
> +                    .on_done(on_done)
> +                    .loader({
> +                        move || {
> +                            let data = record.post_hook_data.clone();
> +                            async move {
> +                                data.ok_or_else(|| anyhow!("no post-installation webhook data"))
> +                            }
> +                        }
> +                    })
> +                    .renderer(|data: &PostHookInfo| -> yew::Html {
> +                        let value = serde_json::to_string_pretty(data)
> +                            .unwrap_or_else(|_| "<failed to decode>".to_owned());
> +                        render_raw_info_container(value)
> +                    })
> +                    .resizable(true)
> +                    .into()
> +            }
> +        })
> +    }
> +}
> +
> +async fn delete_entry(key: Key) -> Result<()> {
> +    let url = format!(
> +        "/auto-install/installations/{}",
> +        percent_encode_component(&key.to_string())
> +    );
> +    proxmox_yew_comp::http_delete(&url, None).await
> +}
> +
> +fn render_raw_info_container(value: String) -> yew::Html {
> +    pwt::widget::Container::new()
> +        .class(Flex::Fill)
> +        .class(Overflow::Auto)
> +        .padding(4)
> +        .with_child(
> +            TextArea::new()
> +                .width("800px")
> +                .read_only(true)
> +                .attribute("rows", "40")
> +                .value(value),
> +        )
> +        .into()
> +}
> +
> +fn columns() -> Vec<DataTableHeader<Installation>> {
> +    vec![
> +        DataTableColumn::new(tr!("Received"))
> +            .width("170px")
> +            .render(|item: &Installation| {
> +                proxmox_yew_comp::utils::render_epoch(item.received_at).into()
> +            })
> +            .into(),
> +        DataTableColumn::new(tr!("Product"))
> +            .width("300px")
> +            .render(|item: &Installation| {
> +                format!(
> +                    "{} {}-{}",
> +                    item.info.product.fullname, item.info.iso.release, item.info.iso.isorelease
> +                )
> +                .into()
> +            })
> +            .into(),
> +        DataTableColumn::new(tr!("Status"))
> +            .width("200px")
> +            .render(|item: &Installation| {
> +                match item.status {
> +                    InstallationStatus::AnswerSent => tr!("Answer sent"),
> +                    InstallationStatus::NoAnswerFound => tr!("No matching answer found"),
> +                    InstallationStatus::InProgress => tr!("In Progress"),
> +                    InstallationStatus::Finished => tr!("Finished"),
> +                }
> +                .into()
> +            })
> +            .into(),
> +        DataTableColumn::new(tr!("Matched answer"))
> +            .flex(1)
> +            .render(|item: &Installation| match &item.answer_id {
> +                Some(s) => s.into(),
> +                None => "-".into(),
> +            })
> +            .into(),
> +    ]
> +}
> diff --git a/ui/src/auto_installer/mod.rs b/ui/src/auto_installer/mod.rs
> new file mode 100644
> index 0000000..810eade
> --- /dev/null
> +++ b/ui/src/auto_installer/mod.rs
> @@ -0,0 +1,4 @@
> +//! Implements the UI for the proxmox-auto-installer integration.
> +
> +mod installations_panel;
> +pub use installations_panel::*;
> diff --git a/ui/src/lib.rs b/ui/src/lib.rs
> index 1aac757..e5a8826 100644
> --- a/ui/src/lib.rs
> +++ b/ui/src/lib.rs
> @@ -59,6 +59,8 @@ pub use tasks::register_pve_tasks;
>  mod view_list_context;
>  pub use view_list_context::ViewListContext;
>  
> +mod auto_installer;
> +
>  pub fn pdm_client() -> pdm_client::PdmClient<std::rc::Rc<proxmox_yew_comp::HttpClientWasm>> {
>      pdm_client::PdmClient(proxmox_yew_comp::CLIENT.with(|c| std::rc::Rc::clone(&c.borrow())))
>  }
> diff --git a/ui/src/main_menu.rs b/ui/src/main_menu.rs
> index 18988ea..073b84d 100644
> --- a/ui/src/main_menu.rs
> +++ b/ui/src/main_menu.rs
> @@ -14,6 +14,7 @@ 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::auto_installer::AutoInstallerPanel;
>  use crate::configuration::subscription_panel::SubscriptionPanel;
>  use crate::configuration::views::ViewGrid;
>  use crate::dashboard::view::View;
> @@ -378,6 +379,18 @@ impl Component for PdmMainMenu {
>              remote_submenu,
>          );
>  
> +        let mut autoinstaller_submenu = Menu::new();
> +
> +        register_submenu(
> +            &mut menu,
> +            &mut content,
> +            tr!("Automated Installations"),
> +            "auto-installer",
> +            Some("fa fa-cubes"),
> +            |_| AutoInstallerPanel::default().into(),
> +            autoinstaller_submenu,
> +        );

I'm not sure whether this should be a top-level menu - but then again,
I'm not sure where it could go else. Maybe a tab under "Remotes"? Since
any node that was automatically would realistically be added as a remote
at some later time?


> +
>          let drawer = NavigationDrawer::new(menu)
>              .aria_label("Datacenter Manager")
>              .class("pwt-border-end")



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