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

[Hannes Laimer]

Signed-off-by: Hannes Laimer <h.laimer at 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