[pdm-devel] [PATCH yew-comp/datacenter-manager v2] improve rendering running tasks

[pdm-devel] [PATCH yew-comp/datacenter-manager v2] improve rendering running tasks

[Dominik Csapak]

render a loading spinner for running tasks and don't mark them as
an error anymore for PVE tasks.

changes from v1:
* rebase on master
* use class to center instead of flex_spacer
* move match one level up

proxmox-yew-comp:

Dominik Csapak (1):
  tasks: add loading animation for running tasks

 src/tasks.rs | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

proxmox-datacenter-manager:

Dominik Csapak (1):
  ui: remote tasks: add loading animation for running tasks

 ui/src/remotes/tasks.rs | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

-- 
2.39.5



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

[pdm-devel] [PATCH yew-comp v2 1/1] tasks: add loading animation for running tasks

[Dominik Csapak]

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

[pdm-devel] [PATCH datacenter-manager v2 1/1] ui: remote tasks: add loading animation for running tasks

[Dominik Csapak]

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

Re: [pdm-devel] [PATCH yew-comp v2 1/1] tasks: add loading animation for running tasks

[Dietmar Maurer]

> +                    .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},

applied with the following change:

> -                        Some("" | "RUNNING") | None => Row::new()
> +                        Some("RUNNING") | None => Row::new()


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

Re: [pdm-devel] [PATCH datacenter-manager v2 1/1] ui: remote tasks: add loading animation for running tasks

[Dietmar Maurer]

applied with the following change:

@@ -93,7 +93,7 @@ fn columns() -> Rc<Vec<DataTableHeader<TaskListItem>>> {
         DataTableColumn::new(tr!("Status"))
             .width("minmax(200px, 1fr)")
             .render(|item: &TaskListItem| match item.status.as_deref() {
-                Some("" | "RUNNING") | None => Row::new()
+                Some("RUNNING") | None => Row::new()
                     .class(JustifyContent::Center)
                     .with_child(Fa::new("").class("pwt-loading-icon"))
                     .into(),


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