[pbs-devel] [PATCH proxmox-backup 0/4] improve ui for maintenance mode

[pbs-devel] [PATCH proxmox-backup 0/4] improve ui for maintenance mode

[Hannes Laimer]

Adds mask for datastore summary when in maintenance mode and dynamically
updates icon in datastore list. The last patch is optional, it would
make the icon update more responsive and not that delayed, but not sure
if thats even a problem.

Hannes Laimer (4):
  ui: add summary mask when in maintenance mode
  api2: DataStoreListItem add maintenance info
  ui: update icon in datastore list when in maintenance mode
  ui: update datastore list more often

 pbs-api-types/src/datastore.rs  |  5 +++++
 src/api2/admin/datastore.rs     |  1 +
 www/Makefile                    |  1 +
 www/NavigationTree.js           | 15 ++++++++++++---
 www/css/ext6-pbs.css            | 27 +++++++++++++++++++++++++++
 www/datastore/Summary.js        | 24 +++++++++++++++++++++++-
 www/images/icon-maintenance.svg |  1 +
 7 files changed, 70 insertions(+), 4 deletions(-)
 create mode 100644 www/images/icon-maintenance.svg

-- 
2.30.2

[pbs-devel] [PATCH proxmox-backup 1/4] ui: add summary mask when in maintenance mode

[Hannes Laimer]

Signed-off-by: Hannes Laimer <h.laimer@proxmox.com>
---
 www/Makefile                    |  1 +
 www/css/ext6-pbs.css            |  7 +++++++
 www/datastore/Summary.js        | 24 +++++++++++++++++++++++-
 www/images/icon-maintenance.svg |  1 +
 4 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 www/images/icon-maintenance.svg

diff --git a/www/Makefile b/www/Makefile
index 0952fb82..1331cff3 100644
--- a/www/Makefile
+++ b/www/Makefile
@@ -1,6 +1,7 @@
 include ../defines.mk
 
 IMAGES := \
+	images/icon-maintenance.svg 				\
 	images/icon-tape.svg 				\
 	images/icon-tape-drive.svg			\
 	images/logo-128.png 				\
diff --git a/www/css/ext6-pbs.css b/www/css/ext6-pbs.css
index f283bf0b..2edfa59e 100644
--- a/www/css/ext6-pbs.css
+++ b/www/css/ext6-pbs.css
@@ -257,6 +257,13 @@ span.snapshot-comment-column {
     font-weight: 800;
 }
 
+.pbs-maintenance-mask div.x-mask-msg-text {
+    padding-top: 33px;
+    background-repeat: no-repeat;
+    background-size: 28px;
+    background-image:url(../images/icon-maintenance.svg);
+}
+
 /*' PBS specific icons */
 
 .pbs-icon-tape {
diff --git a/www/datastore/Summary.js b/www/datastore/Summary.js
index c3769257..d2f3c18a 100644
--- a/www/datastore/Summary.js
+++ b/www/datastore/Summary.js
@@ -42,8 +42,30 @@ Ext.define('PBS.DataStoreInfo', {
 	xclass: 'Ext.app.ViewController',
 
 	onLoad: function(store, data, success) {
-	    if (!success) return;
 	    let me = this;
+	    if (!success) {
+		Proxmox.Utils.API2Request({
+		    url: `/config/datastore/${me.view.datastore}`,
+		    success: function(response) {
+			const config = response.result.data;
+			if (config['maintenance-mode']) {
+			    const [_type, msg] = config['maintenance-mode'].split(/,(.+)/);
+			    const message = msg ? ': ' + msg.split("=")[1]
+				.replace(/^"(.*)"$/, '$1')
+				.replaceAll('\\"', '"') : '';
+			    me.view.el.mask(
+				`${gettext('Datastore is in maintenance mode')}${message}`,
+				'pbs-maintenance-mask',
+			    );
+			} else {
+			    me.view.el.mask(gettext('Datastore is not available'));
+			}
+		    },
+		});
+		return;
+	    }
+	    me.view.el.unmask();
+
 	    let vm = me.getViewModel();
 
 	    let counts = store.getById('counts').data.value;
diff --git a/www/images/icon-maintenance.svg b/www/images/icon-maintenance.svg
new file mode 100644
index 00000000..7cd369d9
--- /dev/null
+++ b/www/images/icon-maintenance.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1664 1664" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);"><path fill="currentColor" d="M384 1344q0-26-19-45t-45-19t-45 19t-19 45t19 45t45 19t45-19t19-45zm644-420l-682 682q-37 37-90 37q-52 0-91-37L59 1498q-38-36-38-90q0-53 38-91l681-681q39 98 114.5 173.5T1028 924zm634-435q0 39-23 106q-47 134-164.5 217.5T1216 896q-185 0-316.5-131.5T768 448t131.5-316.5T1216 0q58 0 121.5 16.5T1445 63q16 11 16 28t-16 28l-293 169v224l193 107q5-3 79-48.5t135.5-81T1630 454q15 0 23.5 10t8.5 25z"/></svg>
\ No newline at end of file
-- 
2.30.2

[pbs-devel] [PATCH proxmox-backup 2/4] api2: DataStoreListItem add maintenance info

[Hannes Laimer]

Signed-off-by: Hannes Laimer <h.laimer@proxmox.com>
---
 pbs-api-types/src/datastore.rs | 5 +++++
 src/api2/admin/datastore.rs    | 1 +
 2 files changed, 6 insertions(+)

diff --git a/pbs-api-types/src/datastore.rs b/pbs-api-types/src/datastore.rs
index 01e2319a..0fc5622e 100644
--- a/pbs-api-types/src/datastore.rs
+++ b/pbs-api-types/src/datastore.rs
@@ -330,6 +330,9 @@ impl DataStoreConfig {
             optional: true,
             schema: SINGLE_LINE_COMMENT_SCHEMA,
         },
+        maintenance: {
+            type: bool,
+        }
     },
 )]
 #[derive(Serialize, Deserialize)]
@@ -338,6 +341,8 @@ impl DataStoreConfig {
 pub struct DataStoreListItem {
     pub store: String,
     pub comment: Option<String>,
+    /// The datastore is in maintenance mode
+    pub maintenance: bool,
 }
 
 #[api(
diff --git a/src/api2/admin/datastore.rs b/src/api2/admin/datastore.rs
index ce5bd244..22bce40d 100644
--- a/src/api2/admin/datastore.rs
+++ b/src/api2/admin/datastore.rs
@@ -1084,6 +1084,7 @@ pub fn get_datastore_list(
                 DataStoreListItem {
                     store: store.clone(),
                     comment: data["comment"].as_str().map(String::from),
+                    maintenance: data.get("maintenance-mode").is_some(),
                 }
             );
         }
-- 
2.30.2

[pbs-devel] [PATCH proxmox-backup 3/4] ui: update icon in datastore list when in maintenance mode

[Hannes Laimer]

Signed-off-by: Hannes Laimer <h.laimer@proxmox.com>
---
 www/NavigationTree.js | 13 +++++++++++--
 www/css/ext6-pbs.css  | 20 ++++++++++++++++++++
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/www/NavigationTree.js b/www/NavigationTree.js
index 576d05ab..bdaef538 100644
--- a/www/NavigationTree.js
+++ b/www/NavigationTree.js
@@ -1,6 +1,6 @@
 Ext.define('pbs-datastore-list', {
     extend: 'Ext.data.Model',
-    fields: ['name', 'comment'],
+    fields: ['name', 'comment', 'maintenance'],
     proxy: {
         type: 'proxmox',
         url: "/api2/json/admin/datastore",
@@ -230,13 +230,22 @@ Ext.define('PBS.view.main.NavigationTree', {
 		    j++;
 		}
 
+		const maintenance = records[i].data.maintenance;
+		const iconCls = maintenance ? 'fa fa-database pmx-tree-icon-custom maintenance' : 'fa fa-database';
 		if (getChildTextAt(j).localeCompare(name) !== 0) {
 		    list.insertChild(j, {
 			text: name,
 			path: `DataStore-${name}`,
-			iconCls: 'fa fa-database',
+			iconCls,
 			leaf: true,
 		    });
+		} else {
+		    list.replaceChild({
+			text: name,
+			path: `DataStore-${name}`,
+			iconCls,
+			leaf: true,
+		    }, list.getChildAt(j));
 		}
 	    }
 
diff --git a/www/css/ext6-pbs.css b/www/css/ext6-pbs.css
index 2edfa59e..471db580 100644
--- a/www/css/ext6-pbs.css
+++ b/www/css/ext6-pbs.css
@@ -264,6 +264,26 @@ span.snapshot-comment-column {
     background-image:url(../images/icon-maintenance.svg);
 }
 
+/* the small icons TODO move to proxmox-widget-toolkit */
+.pmx-tree-icon-custom:after {
+    position: relative;
+    left: -4px;
+    top: 2px;
+    font-size: 0.8em;
+    text-shadow: -1px 0px 2px #fff;
+    content: "\ ";
+}
+
+/* datastore maintenance */
+.pmx-tree-icon-custom.maintenance:after {
+    content: "\f0ad";
+    color: #000;
+}
+
+.pmx-tree-icon-custom.maintenance:before {
+    color: #888;
+}
+
 /*' PBS specific icons */
 
 .pbs-icon-tape {
-- 
2.30.2

[pbs-devel] [PATCH proxmox-backup 4/4][optional] ui: update datastore list more often

[Hannes Laimer]

Signed-off-by: Hannes Laimer <h.laimer@proxmox.com>
---
 www/NavigationTree.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/NavigationTree.js b/www/NavigationTree.js
index bdaef538..f6f0c628 100644
--- a/www/NavigationTree.js
+++ b/www/NavigationTree.js
@@ -131,7 +131,7 @@ Ext.define('PBS.view.main.NavigationTree', {
 	init: function(view) {
 	    view.rstore = Ext.create('Proxmox.data.UpdateStore', {
 		autoStart: true,
-		interval: 15 * 1000,
+		interval: 5 * 1000,
 		storeid: 'pbs-datastore-list',
 		model: 'pbs-datastore-list',
 	    });
-- 
2.30.2

Re: [pbs-devel] [PATCH proxmox-backup 2/4] api2: DataStoreListItem add maintenance info

[Fabian Grünbichler]

On April 15, 2022 9:28 am, Hannes Laimer wrote:
> Signed-off-by: Hannes Laimer <h.laimer@proxmox.com>
> ---
>  pbs-api-types/src/datastore.rs | 5 +++++
>  src/api2/admin/datastore.rs    | 1 +
>  2 files changed, 6 insertions(+)
> 
> diff --git a/pbs-api-types/src/datastore.rs b/pbs-api-types/src/datastore.rs
> index 01e2319a..0fc5622e 100644
> --- a/pbs-api-types/src/datastore.rs
> +++ b/pbs-api-types/src/datastore.rs
> @@ -330,6 +330,9 @@ impl DataStoreConfig {
>              optional: true,
>              schema: SINGLE_LINE_COMMENT_SCHEMA,
>          },
> +        maintenance: {
> +            type: bool,
> +        }

this breaks remote scanning (of old remotes on new systems) - in this 
case annotating it with a (serde) default of false seems sensible (if 
the field is missing, it can only be because the other side doesn't have 
maintenance mode yet, so it can be treated as 'no maintenance mode'). in 
other cases wrapping a newly introduced field in an Option<> might make 
more sense.

in general when changing API things (including return value schema) 
backwards-compatibility should be kept in mind, even though we don't 
have clusters in PBS we do have:
- sync/pull/remote between different versions of PBS
- pbs-client accessing pbs-server with version mismatch
- qemu-lib accessing pbs-server with version mismatch
- third-party clients accessing pbs-server

none of that should break with regular upgrades unless there is a very 
good reason.

Re: [pbs-devel] [PATCH proxmox-backup 1/4] ui: add summary mask when in maintenance mode

[Thomas Lamprecht]

On 15.04.22 09:28, Hannes Laimer wrote:
> diff --git a/www/images/icon-maintenance.svg b/www/images/icon-maintenance.svg
> new file mode 100644
> index 00000000..7cd369d9
> --- /dev/null
> +++ b/www/images/icon-maintenance.svg
> @@ -0,0 +1 @@
> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1664 1664" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);"><path fill="currentColor" d="M384 1344q0-26-19-45t-45-19t-45 19t-19 45t19 45t45 19t45-19t19-45zm644-420l-682 682q-37 37-90 37q-52 0-91-37L59 1498q-38-36-38-90q0-53 38-91l681-681q39 98 114.5 173.5T1028 924zm634-435q0 39-23 106q-47 134-164.5 217.5T1216 896q-185 0-316.5-131.5T768 448t131.5-316.5T1216 0q58 0 121.5 16.5T1445 63q16 11 16 28t-16 28l-293 169v224l193 107q5-3 79-48.5t135.5-81T1630 454q15 0 23.5 10t8.5 25z"/></svg>
> \ No newline at end of file


for new icons please always state where you got them from, to ensure we do not violated any license/copyright.

But IMO this is unnecessary, I'd just use `fa-wrench` enlarged to twice or thrice the size using the `fa-2x` or
`fa-3x` helper class.

Re: [pbs-devel] [PATCH proxmox-backup 2/4] api2: DataStoreListItem add maintenance info

[Thomas Lamprecht]

On 15.04.22 09:28, Hannes Laimer wrote:
> Signed-off-by: Hannes Laimer <h.laimer@proxmox.com>
> ---
>  pbs-api-types/src/datastore.rs | 5 +++++
>  src/api2/admin/datastore.rs    | 1 +
>  2 files changed, 6 insertions(+)
> 
> diff --git a/pbs-api-types/src/datastore.rs b/pbs-api-types/src/datastore.rs
> index 01e2319a..0fc5622e 100644
> --- a/pbs-api-types/src/datastore.rs
> +++ b/pbs-api-types/src/datastore.rs
> @@ -330,6 +330,9 @@ impl DataStoreConfig {
>              optional: true,
>              schema: SINGLE_LINE_COMMENT_SCHEMA,
>          },
> +        maintenance: {
> +            type: bool,
> +        }
>      },
>  )]
>  #[derive(Serialize, Deserialize)]
> @@ -338,6 +341,8 @@ impl DataStoreConfig {
>  pub struct DataStoreListItem {
>      pub store: String,
>      pub comment: Option<String>,
> +    /// The datastore is in maintenance mode
> +    pub maintenance: bool,

In addition to Fabians comment w.r.t. to keeping this backward compatible I'd also return
the message string, we already got it anyway and an API user can show that too then (e.g.,
tooltip in the nav.tree), like:

#[serde(skip_serializing_if = "Option::is_none")]
pub maintenance: Option <String>,

(String should be replaced with the specific maintenance mdoe type, if any.)

>  }
>  
>  #[api(
> diff --git a/src/api2/admin/datastore.rs b/src/api2/admin/datastore.rs
> index ce5bd244..22bce40d 100644
> --- a/src/api2/admin/datastore.rs
> +++ b/src/api2/admin/datastore.rs
> @@ -1084,6 +1084,7 @@ pub fn get_datastore_list(
>                  DataStoreListItem {
>                      store: store.clone(),
>                      comment: data["comment"].as_str().map(String::from),
> +                    maintenance: data.get("maintenance-mode").is_some(),
>                  }
>              );
>          }