* [pdm-devel] [PATCH yew-comp v2 1/1] tasks: add loading animation for running tasks
2025-03-20 9:34 [pdm-devel] [PATCH yew-comp/datacenter-manager v2] improve rendering running tasks Dominik Csapak
@ 2025-03-20 9:34 ` Dominik Csapak
2025-03-20 11:03 ` Dietmar Maurer
2025-03-20 9:34 ` [pdm-devel] [PATCH datacenter-manager v2 1/1] ui: remote " Dominik Csapak
1 sibling, 1 reply; 5+ messages in thread
From: Dominik Csapak @ 2025-03-20 9:34 UTC (permalink / raw)
To: pdm-devel
when there is no endtime and the status is either empty or "RUNNING"
(for PVE), render a spinning loading icon, like we do in the ExtJS UI.
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
changes from v1:
* use justifycontent instead of 2 flex spacers
* move match one level up
src/tasks.rs | 17 ++++++++++++-----
1 file changed, 12 insertions(+), 5 deletions(-)
diff --git a/src/tasks.rs b/src/tasks.rs
index 9a36bb3..61c06a6 100644
--- a/src/tasks.rs
+++ b/src/tasks.rs
@@ -4,6 +4,7 @@ use std::rc::Rc;
use anyhow::Error;
+use pwt::css::JustifyContent;
use pwt::widget::form::{Field, Form, FormContext, InputType};
use gloo_timers::callback::Timeout;
@@ -17,7 +18,7 @@ use pwt::state::{PersistentState, Selection, Store};
use pwt::widget::data_table::{
DataTable, DataTableColumn, DataTableHeader, DataTableRowRenderCallback,
};
-use pwt::widget::{Button, Column, Toolbar};
+use pwt::widget::{Button, Column, Fa, Row, Toolbar};
use crate::utils::{format_upid, render_epoch_short};
@@ -122,7 +123,10 @@ impl ProxmoxTasks {
.width("130px")
.render(|item: &TaskListItem| match item.endtime {
Some(endtime) => render_epoch_short(endtime).into(),
- None => html! {},
+ None => Row::new()
+ .class(JustifyContent::Center)
+ .with_child(Fa::new("").class("pwt-loading-icon"))
+ .into(),
})
.into(),
DataTableColumn::new(tr!("User name"))
@@ -137,9 +141,12 @@ impl ProxmoxTasks {
.into(),
DataTableColumn::new(tr!("Status"))
.width("200px")
- .render(|item: &TaskListItem| {
- let text = item.status.as_deref().unwrap_or("");
- html! {text}
+ .render(|item: &TaskListItem| match item.status.as_deref() {
+ Some("" | "RUNNING") | None => Row::new()
+ .class(JustifyContent::Center)
+ .with_child(Fa::new("").class("pwt-loading-icon"))
+ .into(),
+ Some(text) => html! {text},
})
.into(),
])
--
2.39.5
_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel
^ permalink raw reply [flat|nested] 5+ messages in thread* [pdm-devel] [PATCH datacenter-manager v2 1/1] ui: remote tasks: add loading animation for running tasks
2025-03-20 9:34 [pdm-devel] [PATCH yew-comp/datacenter-manager v2] improve rendering running tasks Dominik Csapak
2025-03-20 9:34 ` [pdm-devel] [PATCH yew-comp v2 1/1] tasks: add loading animation for " Dominik Csapak
@ 2025-03-20 9:34 ` Dominik Csapak
2025-03-20 11:18 ` Dietmar Maurer
1 sibling, 1 reply; 5+ messages in thread
From: Dominik Csapak @ 2025-03-20 9:34 UTC (permalink / raw)
To: pdm-devel
when there is no endtime and the status is either empty or "RUNNING"
(for PVE), render a spinning loading icon, like we do in the ExtJS UI.
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
changes from v1:
* use justifycontent instead of 2 flex spacers
* move match one level up
ui/src/remotes/tasks.rs | 18 ++++++++++++------
1 file changed, 12 insertions(+), 6 deletions(-)
diff --git a/ui/src/remotes/tasks.rs b/ui/src/remotes/tasks.rs
index 99bb243..afd752e 100644
--- a/ui/src/remotes/tasks.rs
+++ b/ui/src/remotes/tasks.rs
@@ -15,12 +15,12 @@ use proxmox_yew_comp::{
TaskViewer, Tasks,
};
use pwt::{
- css::FlexFit,
+ css::{FlexFit, JustifyContent},
props::{ContainerBuilder, WidgetBuilder},
tr,
widget::{
data_table::{DataTableColumn, DataTableHeader},
- Column,
+ Column, Fa, Row,
},
};
@@ -47,7 +47,10 @@ fn columns() -> Rc<Vec<DataTableHeader<TaskListItem>>> {
.width("130px")
.render(|item: &TaskListItem| match item.endtime {
Some(endtime) => render_epoch_short(endtime).into(),
- None => html! {},
+ None => Row::new()
+ .class(JustifyContent::Center)
+ .with_child(Fa::new("").class("pwt-loading-icon"))
+ .into(),
})
.into(),
DataTableColumn::new(tr!("User name"))
@@ -89,9 +92,12 @@ fn columns() -> Rc<Vec<DataTableHeader<TaskListItem>>> {
.into(),
DataTableColumn::new(tr!("Status"))
.width("minmax(200px, 1fr)")
- .render(|item: &TaskListItem| {
- let text = item.status.as_deref().unwrap_or("");
- html! {text}
+ .render(|item: &TaskListItem| match item.status.as_deref() {
+ Some("" | "RUNNING") | None => Row::new()
+ .class(JustifyContent::Center)
+ .with_child(Fa::new("").class("pwt-loading-icon"))
+ .into(),
+ Some(text) => html! {text},
})
.into(),
])
--
2.39.5
_______________________________________________
pdm-devel mailing list
pdm-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel
^ permalink raw reply [flat|nested] 5+ messages in thread