[pdm-devel] [PATCH datacenter-manager v3 09/18] ui: views: implement view loading from api

[Shannon Sterz]

one comment in-line.

On Mon Nov 17, 2025 at 1:44 PM CET, Dominik Csapak wrote:
> by simply loading the config from the api. Also move the default
> dashboard into a constant.
>
> Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
> ---
>  ui/src/dashboard/view.rs | 179 +++++++++++++++++++++------------------
>  1 file changed, 96 insertions(+), 83 deletions(-)
>
> diff --git a/ui/src/dashboard/view.rs b/ui/src/dashboard/view.rs
> index 1d317b0b..4191ce90 100644
> --- a/ui/src/dashboard/view.rs
> +++ b/ui/src/dashboard/view.rs
> @@ -33,6 +33,7 @@ use crate::{pdm_client, LoadResult};
>  use pdm_api_types::remotes::RemoteType;
>  use pdm_api_types::resource::ResourcesStatus;
>  use pdm_api_types::subscription::RemoteSubscriptions;
> +use pdm_api_types::views::ViewConfig;
>  use pdm_api_types::TaskStatistics;
>  use pdm_client::types::TopEntities;
>
> @@ -263,8 +264,9 @@ impl Component for ViewComp {
>          );
>
>          let async_pool = AsyncPool::new();
> +        let view = ctx.props().view.clone();
>          async_pool.send_future(ctx.link().clone(), async move {
> -            Msg::ViewTemplateLoaded(load_template().await)
> +            Msg::ViewTemplateLoaded(load_template(Some(view)).await)
>          });
>
>          Self {
> @@ -351,8 +353,9 @@ impl Component for ViewComp {
>      fn changed(&mut self, ctx: &Context<Self>, _old_props: &Self::Properties) -> bool {
>          self.async_pool = AsyncPool::new();
>          self.load_finished_time = None;
> +        let view = ctx.props().view.clone();
>          self.async_pool.send_future(ctx.link().clone(), async move {
> -            Msg::ViewTemplateLoaded(load_template().await)
> +            Msg::ViewTemplateLoaded(load_template(Some(view)).await)
>          });
>          true
>      }
> @@ -459,88 +462,98 @@ impl Component for ViewComp {
>      }
>  }
>
> -async fn load_template() -> Result<ViewTemplate, Error> {
> -    // FIXME: load template from api
> -
> -    let view_str = "
> -        {
> -          \"description\": \"some description\",
> -          \"layout\": {
> -            \"layout-type\": \"rows\",
> -            \"rows\": [
> -              [
> -                {
> -                  \"flex\": 3.0,
> -                  \"widget-type\": \"remotes\",
> -                  \"show-wizard\": true
> -                },
> -                {
> -                  \"flex\": 3.0,
> -                  \"widget-type\": \"nodes\",
> -                  \"remote-type\": \"pve\"
> -                },
> -                {
> -                  \"flex\": 3.0,
> -                  \"widget-type\": \"guests\",
> -                  \"guest-type\": \"qemu\"
> -                },
> -                {
> -                  \"flex\": 3.0,
> -                  \"widget-type\": \"nodes\",
> -                  \"remote-type\": \"pbs\"
> -                },
> -                {
> -                  \"flex\": 3.0,
> -                  \"widget-type\": \"guests\",
> -                  \"guest-type\": \"lxc\"
> -                },
> -                {
> -                  \"flex\": 3.0,
> -                  \"widget-type\": \"pbs-datastores\"
> -                },
> -                {
> -                  \"flex\": 5.0,
> -                  \"widget-type\": \"subscription\"
> -                }
> -              ],
> -              [
> -                {
> -                  \"widget-type\": \"leaderboard\",
> -                  \"leaderboard-type\": \"guest-cpu\"
> -                },
> -                {
> -                  \"widget-type\": \"leaderboard\",
> -                  \"leaderboard-type\": \"node-cpu\"
> -                },
> -                {
> -                  \"widget-type\": \"leaderboard\",
> -                  \"leaderboard-type\": \"node-memory\"
> -                }
> -              ],
> -              [],
> -              [
> -                {
> -                  \"flex\": 5.0,
> -                  \"widget-type\": \"task-summary\",
> -                  \"grouping\": \"category\",
> -                  \"sorting\": \"default\"
> -                },
> -                {
> -                  \"flex\": 5.0,
> -                  \"widget-type\": \"task-summary\",
> -                  \"grouping\": \"remote\",
> -                  \"sorting\": \"failed-tasks\"
> -                },
> -                {
> -                  \"flex\": 2.0,
> -                  \"widget-type\": \"sdn\"
> -                }
> -              ]
> -            ]
> -          }
> +const DEFAULT_DASHBOARD: &str = "
> +    {
> +      \"description\": \"some description\",
> +      \"layout\": {
> +        \"layout-type\": \"rows\",
> +        \"rows\": [
> +          [
> +            {
> +              \"flex\": 3.0,
> +              \"widget-type\": \"remotes\",
> +              \"show-wizard\": true
> +            },
> +            {
> +              \"flex\": 3.0,
> +              \"widget-type\": \"nodes\",
> +              \"remote-type\": \"pve\"
> +            },
> +            {
> +              \"flex\": 3.0,
> +              \"widget-type\": \"guests\",
> +              \"guest-type\": \"qemu\"
> +            },
> +            {
> +              \"flex\": 3.0,
> +              \"widget-type\": \"nodes\",
> +              \"remote-type\": \"pbs\"
> +            },
> +            {
> +              \"flex\": 3.0,
> +              \"widget-type\": \"guests\",
> +              \"guest-type\": \"lxc\"
> +            },
> +            {
> +              \"flex\": 3.0,
> +              \"widget-type\": \"pbs-datastores\"
> +            },
> +            {
> +              \"flex\": 5.0,
> +              \"widget-type\": \"subscription\"
> +            }
> +          ],
> +          [
> +            {
> +              \"widget-type\": \"leaderboard\",
> +              \"leaderboard-type\": \"guest-cpu\"
> +            },
> +            {
> +              \"widget-type\": \"leaderboard\",
> +              \"leaderboard-type\": \"node-cpu\"
> +            },
> +            {
> +              \"widget-type\": \"leaderboard\",
> +              \"leaderboard-type\": \"node-memory\"
> +            }
> +          ],
> +          [
> +            {
> +              \"flex\": 5.0,
> +              \"widget-type\": \"task-summary\",
> +              \"grouping\": \"category\",
> +              \"sorting\": \"default\"
> +            },
> +            {
> +              \"flex\": 5.0,
> +              \"widget-type\": \"task-summary\",
> +              \"grouping\": \"remote\",
> +              \"sorting\": \"failed-tasks\"
> +            },
> +            {
> +              \"flex\": 2.0,
> +              \"widget-type\": \"sdn\"
> +            }
> +          ]
> +        ]
> +      }
> +    }
> +";
> +
> +async fn load_template(view: Option<AttrValue>) -> Result<ViewTemplate, Error> {
> +    let view_str = match view {
> +        Some(view) => {
> +            let config: ViewConfig = http_get(&format!("/config/views/{}", view), None).await?;

view could be in-lined here. though, maybe it makes sense to encode view
here instead, just to be safe.

> +            config.layout
>          }
> -    ";
> +        None => String::new(),
> +    };
> +
> +    let template: ViewTemplate = if view_str.is_empty() {
> +        serde_json::from_str(DEFAULT_DASHBOARD)?
> +    } else {
> +        serde_json::from_str(&view_str)?
> +    };
>
> -    let template: ViewTemplate = serde_json::from_str(view_str)?;
>      Ok(template)
>  }