ui: add summary mask when in maintenance mode

Signed-off-by: Hannes Laimer <h.laimer@proxmox.com>

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 {

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;