From adf5dcba8d65832d37211ebad41da681f472f14d Mon Sep 17 00:00:00 2001
From: Hannes Laimer <h.laimer@proxmox.com>
Date: Tue, 26 Apr 2022 06:23:32 +0000
Subject: [PATCH] ui: update icon in datastore list when in maintenance mode

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 916582ef..0cfefac8 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",
@@ -236,13 +236,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 {