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

[Dominik Csapak]

On 8/27/25 11:37 AM, Lukas Wagner wrote:
> 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?

i get what you mean, and yeah maybe an icon to click on would be ok
(a search icon for example)

though i guess that won't work on all panels (e.g. in the remote panel
i can't think of a good place right now)

what i want to do later is to include a settings panel for the search
bar, similar to what other tools (e.g. gmail do) that lets you configure
the search parameters that get filled in the text box

this should improve discoverability very much. i didn't do it yet
simply because of time constraints

> 
> 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"))])
>> +    }
>> +}
>