[pdm-devel] [PATCH datacenter-manager v3 5/9] ui: dashboard: remotes panel: open search on click

[Lukas Wagner]

I think this is a nice feature, but I think the discoverability is not
too great here; it seems like a feature that users could easily miss if
they don't read about it in the documentation or stumble across it by
accident. I think the main issue is that the 'card' does not look like
an interactive UI element at all; unless you hover it with the cursor
you get no hint that it is indeed clickable.

Maybe an actual button with some text or an icon (although I'm not too
sure what the text should say or the icon should look like) would be
better? What do you think?

On Tue Aug 26, 2025 at 2:31 PM CEST, Dominik Csapak wrote:
> using the SearchProvider, insert a search term into the search box to
> find and show either all remotes (when healthy) or the failed ones.
>
> Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
> ---
>  ui/src/dashboard/remote_panel.rs | 32 +++++++++++++++++++++++++++++++-
>  1 file changed, 31 insertions(+), 1 deletion(-)
>
> diff --git a/ui/src/dashboard/remote_panel.rs b/ui/src/dashboard/remote_panel.rs
> index 7471fb6..849b4d3 100644
> --- a/ui/src/dashboard/remote_panel.rs
> +++ b/ui/src/dashboard/remote_panel.rs
> @@ -1,5 +1,6 @@
>  use std::rc::Rc;
>  
> +use pdm_search::{Search, SearchTerm};
>  use proxmox_yew_comp::Status;
>  use pwt::{
>      css,
> @@ -14,6 +15,8 @@ use yew::{
>  
>  use pdm_api_types::resource::ResourcesStatus;
>  
> +use crate::search_provider::get_search_provider;
> +
>  #[derive(Properties, PartialEq)]
>  /// A panel for showing the overall remotes status
>  pub struct RemotePanel {
> @@ -38,13 +41,20 @@ impl From<RemotePanel> for VNode {
>  struct PdmRemotePanel {}
>  
>  impl Component for PdmRemotePanel {
> -    type Message = &'static str;
> +    type Message = Search;
>      type Properties = RemotePanel;
>  
>      fn create(_ctx: &yew::Context<Self>) -> Self {
>          Self {}
>      }
>  
> +    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
> +        if let Some(search) = get_search_provider(ctx) {
> +            search.search(msg);
> +        }
> +        false
> +    }
> +
>      fn view(&self, ctx: &yew::Context<Self>) -> yew::Html {
>          let props = ctx.props();
>          if props.status.is_none() {
> @@ -77,6 +87,13 @@ impl Component for PdmRemotePanel {
>          };
>          Column::new()
>              .tabindex(if failure { 0 } else { -1 })
> +            .onclick(ctx.link().callback(move |_| create_search_term(failure)))
> +            .onkeydown(ctx.link().batch_callback(move |event: KeyboardEvent| {
> +                match event.key().as_str() {
> +                    "Enter" | " " => Some(create_search_term(failure)),
> +                    _ => None,
> +                }
> +            }))
>              .padding(4)
>              .class(css::FlexFit)
>              .class(css::AlignItems::Center)
> @@ -88,3 +105,16 @@ impl Component for PdmRemotePanel {
>              .into()
>      }
>  }
> +
> +fn create_search_term(failure: bool) -> Search {
> +    if failure {
> +        Search::with_terms(vec![
> +            SearchTerm::new("remote").category(Some("type")),
> +            SearchTerm::new("offline").category(Some("status")),
> +        ])
> +    } else {
> +        Search::with_terms(vec![SearchTerm::new("remote")
> +            .optional(true)
> +            .category(Some("type"))])
> +    }
> +}