[pbs-devel] [PATCH proxmox-backup v2 0/6] improve UI for maintenance mode

[pbs-devel] [PATCH proxmox-backup v2 0/6] improve UI for maintenance mode

[Hannes Laimer]

Adds mask for datastore summary when in maintenance mode and dynamically
updates icon and tooltip in datastore list. The 4th patch is optional,
and could be squashed with the 3rd path if applied, it would make the
icon update more responsive and not that delayed, but not sure if that is
even a problem.

v2, thanks @Fabian + @Thomas:
 - fix backwards compat. for DataStoreListItem
 - add parse function for maintenance mode to utils
 - show tooltip (<type>[: <message>]) in datastore list
 - use icon itself instead of .svg for wrench

Hannes Laimer (6):
  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
  ui: utils: add function for parsing maintenance mode
  ui: add tooltip to datastore in maintenance mode

 pbs-api-types/src/datastore.rs   |  8 ++++++
 src/api2/admin/datastore.rs      |  1 +
 www/NavigationTree.js            | 45 ++++++++++++++++++++++++++------
 www/Utils.js                     | 17 +++++++++---
 www/css/ext6-pbs.css             | 32 +++++++++++++++++++++++
 www/datastore/Summary.js         | 21 ++++++++++++++-
 www/window/MaintenanceOptions.js |  8 ++----
 7 files changed, 113 insertions(+), 19 deletions(-)

-- 
2.30.2

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

[Hannes Laimer]

Signed-off-by: Hannes Laimer <h.laimer@proxmox.com>
---
 www/css/ext6-pbs.css     | 12 ++++++++++++
 www/datastore/Summary.js | 24 +++++++++++++++++++++++-
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/www/css/ext6-pbs.css b/www/css/ext6-pbs.css
index f283bf0b..9c782e93 100644
--- a/www/css/ext6-pbs.css
+++ b/www/css/ext6-pbs.css
@@ -257,6 +257,18 @@ span.snapshot-comment-column {
     font-weight: 800;
 }
 
+.pbs-maintenance-mask div.x-mask-msg-text {
+    background: None;
+    padding: 12px 0 0;
+}
+
+.pbs-maintenance-mask:before {
+    font-size: 3em;
+    display: flex;
+    justify-content: center;
+    content: "\f0ad";
+}
+
 /*' PBS specific icons */
 
 .pbs-icon-tape {
diff --git a/www/datastore/Summary.js b/www/datastore/Summary.js
index c3769257..d7b53a3a 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}`,
+				'fa 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;
-- 
2.30.2

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

[Hannes Laimer]

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

diff --git a/pbs-api-types/src/datastore.rs b/pbs-api-types/src/datastore.rs
index 2bff64b5..fec0c3ad 100644
--- a/pbs-api-types/src/datastore.rs
+++ b/pbs-api-types/src/datastore.rs
@@ -354,6 +354,11 @@ impl DataStoreConfig {
             optional: true,
             schema: SINGLE_LINE_COMMENT_SCHEMA,
         },
+        maintenance: {
+            optional: true,
+            format: &ApiStringFormat::PropertyString(&MaintenanceMode::API_SCHEMA),
+            type: String,
+        }
     },
 )]
 #[derive(Serialize, Deserialize)]
@@ -362,6 +367,9 @@ impl DataStoreConfig {
 pub struct DataStoreListItem {
     pub store: String,
     pub comment: Option<String>,
+    /// If the datastore is in maintenance mode, information about it
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub maintenance: Option<String>,
 }
 
 #[api(
diff --git a/src/api2/admin/datastore.rs b/src/api2/admin/datastore.rs
index 9f7acd0d..dcc4e1c1 100644
--- a/src/api2/admin/datastore.rs
+++ b/src/api2/admin/datastore.rs
@@ -1030,6 +1030,7 @@ pub fn get_datastore_list(
             list.push(DataStoreListItem {
                 store: store.clone(),
                 comment: data["comment"].as_str().map(String::from),
+                maintenance: data["maintenance-mode"].as_str().map(String::from),
             });
         }
     }
-- 
2.30.2

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

[Hannes Laimer]

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

diff --git a/www/NavigationTree.js b/www/NavigationTree.js
index 576d05ab..196203f2 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++;
 		}
 
+		let iconCls = 'fa fa-database';
+		const maintenance = records[i].data.maintenance;
+		if (maintenance) {
+		    iconCls = 'fa fa-database pmx-tree-icon-custom maintenance';
+		}
+
+		const child = {
+		    text: name,
+		    path: `DataStore-${name}`,
+		    iconCls,
+		    leaf: true,
+		};
 		if (getChildTextAt(j).localeCompare(name) !== 0) {
-		    list.insertChild(j, {
-			text: name,
-			path: `DataStore-${name}`,
-			iconCls: 'fa fa-database',
-			leaf: true,
-		    });
+		    list.insertChild(j, child);
+		} else {
+		    list.replaceChild(child, list.getChildAt(j));
 		}
 	    }
 
diff --git a/www/css/ext6-pbs.css b/www/css/ext6-pbs.css
index 9c782e93..3c8bed55 100644
--- a/www/css/ext6-pbs.css
+++ b/www/css/ext6-pbs.css
@@ -269,6 +269,26 @@ span.snapshot-comment-column {
     content: "\f0ad";
 }
 
+/* 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 v2 4/6][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 196203f2..4f451148 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

[pbs-devel] [PATCH proxmox-backup v2 5/6] ui: utils: add function for parsing maintenance mode

[Hannes Laimer]

...since the same code is used is more than one place

Signed-off-by: Hannes Laimer <h.laimer@proxmox.com>
---
 www/Utils.js                     | 17 +++++++++++++----
 www/datastore/Summary.js         |  7 ++-----
 www/window/MaintenanceOptions.js |  8 ++------
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/www/Utils.js b/www/Utils.js
index 32f56278..9a53cc72 100644
--- a/www/Utils.js
+++ b/www/Utils.js
@@ -640,13 +640,22 @@ Ext.define('PBS.Utils', {
 	return `${icon} ${value}`;
     },
 
+    // FIXME: this "parser" is brittle and relies on the order the arguments will appear in
+    parseMaintenanceMode: function(mode) {
+	let [type, message] = mode.split(/,(.+)/);
+	type = type.split("=").pop();
+	message = message ? message.split("=")[1]
+	    .replace(/^"(.*)"$/, '$1')
+	    .replaceAll('\\"', '"') : null;
+	return [type, message];
+    },
+
     renderMaintenance: function(mode, activeTasks) {
 	if (!mode) {
 	    return gettext('None');
 	}
-	// FIXME: this "parser" is brittle and relies on the order the arguments will appear in
-	let [type, message] = mode.split(",");
-	type = type.split("=").pop();
+
+	let [type, message] = PBS.Utils.parseMaintenanceMode(mode);
 
 	const conflictingTasks = activeTasks.write + (type === 'offline' ? activeTasks.read : 0);
 
@@ -659,7 +668,7 @@ Ext.define('PBS.Utils', {
 	}
 
 	if (message) {
-	    extra += ` (${message.split("=").pop()})`;
+	    extra += ` ("${message}")`;
 	}
 
 	let modeText = Proxmox.Utils.unknownText;
diff --git a/www/datastore/Summary.js b/www/datastore/Summary.js
index d7b53a3a..328aa561 100644
--- a/www/datastore/Summary.js
+++ b/www/datastore/Summary.js
@@ -49,12 +49,9 @@ Ext.define('PBS.DataStoreInfo', {
 		    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('\\"', '"') : '';
+			    const [_type, msg] = PBS.Utils.parseMaintenanceMode(config['maintenance-mode']);
 			    me.view.el.mask(
-				`${gettext('Datastore is in maintenance mode')}${message}`,
+				`${gettext('Datastore is in maintenance mode')}${msg ? ': ' + msg : ''}`,
 				'fa pbs-maintenance-mask',
 			    );
 			} else {
diff --git a/www/window/MaintenanceOptions.js b/www/window/MaintenanceOptions.js
index 47196b42..713da569 100644
--- a/www/window/MaintenanceOptions.js
+++ b/www/window/MaintenanceOptions.js
@@ -62,14 +62,10 @@ Ext.define('PBS.window.MaintenanceOptions', {
 	    'maintenance-msg': '',
 	};
 	if (values['maintenance-mode']) {
-	    let [type, message] = values['maintenance-mode'].split(/,(.+)/);
-	    type = type.split("=").pop();
-	    message = message ? message.split("=")[1]
-		.replace(/^"(.*)"$/, '$1')
-		.replaceAll('\\"', '"') : '';
+	    const [type, message] = PBS.Utils.parseMaintenanceMode(values['maintenance-mode']);
 	    options = {
 		'maintenance-type': type,
-		'maintenance-msg': message,
+		'maintenance-msg': message ?? '',
 	    };
 	}
 
-- 
2.30.2

[pbs-devel] [PATCH proxmox-backup v2 6/6] ui: add tooltip to datastore in maintenance mode

[Hannes Laimer]

Signed-off-by: Hannes Laimer <h.laimer@proxmox.com>
---
Tooltips are already used in pve-manager, but in a TreePanel. For some
reason qtips are not available 'out of the box' for TreeList, therefore
the custom 'qtiptreelistitem' is needed here.

 www/NavigationTree.js | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/www/NavigationTree.js b/www/NavigationTree.js
index 4f451148..28323c53 100644
--- a/www/NavigationTree.js
+++ b/www/NavigationTree.js
@@ -121,9 +121,26 @@ Ext.define('PBS.store.NavigationStore', {
     },
 });
 
+Ext.define('CustomTreeListItem', {
+    extend: 'Ext.list.TreeItem',
+    xtype: 'qtiptreelistitem',
+    updateNode: function(node, oldNode) {
+	const qtip = node ? node.get('qtip') : null;
+	this.callParent([node, oldNode]);
+	if (qtip) {
+	    this.element.dom.setAttribute('data-qtip', qtip);
+	} else {
+	    this.element.dom.removeAttribute('data-qtip');
+	}
+    },
+});
+
 Ext.define('PBS.view.main.NavigationTree', {
     extend: 'Ext.list.Tree',
     xtype: 'navigationtree',
+    defaults: {
+	xtype: 'qtiptreelistitem',
+    },
 
     controller: {
 	xclass: 'Ext.app.ViewController',
@@ -230,14 +247,17 @@ Ext.define('PBS.view.main.NavigationTree', {
 		    j++;
 		}
 
-		let iconCls = 'fa fa-database';
+		let [qtip, iconCls] = ['', 'fa fa-database'];
 		const maintenance = records[i].data.maintenance;
 		if (maintenance) {
+		    const [type, message] = PBS.Utils.parseMaintenanceMode(maintenance);
+		    qtip = `${type}${message ? ': ' + message : ''}`;
 		    iconCls = 'fa fa-database pmx-tree-icon-custom maintenance';
 		}
 
 		const child = {
 		    text: name,
+		    qtip,
 		    path: `DataStore-${name}`,
 		    iconCls,
 		    leaf: true,
-- 
2.30.2

[pbs-devel] applied-series: [PATCH proxmox-backup v2 0/6] improve UI for maintenance mode

[Thomas Lamprecht]

On 26.04.22 08:23, Hannes Laimer wrote:
> Adds mask for datastore summary when in maintenance mode and dynamically
> updates icon and tooltip in datastore list. The 4th patch is optional,
> and could be squashed with the 3rd path if applied, it would make the
> icon update more responsive and not that delayed, but not sure if that is
> even a problem.
> 
> v2, thanks @Fabian + @Thomas:
>  - fix backwards compat. for DataStoreListItem
>  - add parse function for maintenance mode to utils
>  - show tooltip (<type>[: <message>]) in datastore list
>  - use icon itself instead of .svg for wrench
> 
> Hannes Laimer (6):
>   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
>   ui: utils: add function for parsing maintenance mode
>   ui: add tooltip to datastore in maintenance mode
> 
>  pbs-api-types/src/datastore.rs   |  8 ++++++
>  src/api2/admin/datastore.rs      |  1 +
>  www/NavigationTree.js            | 45 ++++++++++++++++++++++++++------
>  www/Utils.js                     | 17 +++++++++---
>  www/css/ext6-pbs.css             | 32 +++++++++++++++++++++++
>  www/datastore/Summary.js         | 21 ++++++++++++++-
>  www/window/MaintenanceOptions.js |  8 ++----
>  7 files changed, 113 insertions(+), 19 deletions(-)
> 



applied, looks quite nice now, thanks!

two nits/possible improvements:

* if I put the datastore in offline mode, then go to the content tab I get the view masked
  with the "datastore in maintenance mode" error, so far so good. Now, if I disable maintenance
  mode again and switch back to the content tab (wihtout navigating anywhere else) I still see
  that view masked with the same error, even if I waited for 10s or so. It helps to either navigate
  to some other navigation element (e.g., another datastore or "Administration") and then back again
  so no "biggie" but maybe we could see if the mask can be cleared more actively. 

* w.r.t. the increased frequency we poll now the datastore list for the navigation status/icon:
  maybe we could keep the previous 15s period and just do one extra reload on setting the
  maintenance mode, after all it's quite likely that not many admins are online at the same time
  and the most important one to get immediate feedback is for the one who set the maintenance mode
  in the first place.

as said, just nits but they stuck somewhat out to me.