[pbs-devel] [PATCH proxmox-backup 17/26] ui: add removable datastore specific icons to list

[Hannes Laimer <h.laimer@proxmox.com>]

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

diff --git a/www/NavigationTree.js b/www/NavigationTree.js
index aae35012..f316f678 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', 'maintenance'],
+    fields: ['name', 'comment', 'maintenance', 'removable'],
     proxy: {
         type: 'proxmox',
         url: "/api2/json/admin/datastore",
@@ -255,9 +255,18 @@ Ext.define('PBS.view.main.NavigationTree', {
 		}
 
 		let [qtip, iconCls] = ['', 'fa fa-database'];
-		const maintenanceString = records[i].data.maintenance;
-		if (maintenanceString) {
-		    const maintenance = PBS.Utils.parsePropertyString(maintenanceString, 'type');
+		const maintenance = records[i].data.maintenance
+		    ? PBS.Utils.parsePropertyString(records[i].data.maintenance, 'type') : null;
+		const removable = records[i].data.removable;
+		if (removable) {
+		    iconCls = `fa fa-database pmx-tree-icon-custom removable-present`;
+		    if (maintenance) {
+			iconCls = `fa fa-database pmx-tree-icon-custom removable-not-present`;
+			qtip = `${maintenance.message ? maintenance.message : 'no device present'}`;
+		    }
+		}
+
+		if (maintenance && maintenance.type !== 'unplugged') {
 		    qtip = `${maintenance.type}${maintenance.message ? ': ' + maintenance.message : ''}`;
 		    iconCls = 'fa fa-database pmx-tree-icon-custom maintenance';
 		}
diff --git a/www/css/ext6-pbs.css b/www/css/ext6-pbs.css
index 045a7376..a7aa36cb 100644
--- a/www/css/ext6-pbs.css
+++ b/www/css/ext6-pbs.css
@@ -301,6 +301,23 @@ span.snapshot-comment-column {
     color: #888;
 }
 
+/* removable datastore */
+.pmx-tree-icon-custom.removable-present:after {
+    content: "\f287";
+    font-size: 0.7em;
+    color: #000;
+}
+
+.pmx-tree-icon-custom.removable-not-present:after {
+    content: "\f287";
+    font-size: 0.7em;
+    color: #000;
+}
+
+.pmx-tree-icon-custom.removable-not-present:before {
+    color: #888;
+}
+
 /*' PBS specific icons */
 
 .pbs-icon-tape {
-- 
2.30.2