ui: datastore content: rework rendering protection state

avoid that there's the same icon rendered twice, once clickable and
once as status. Also indicate the protection with a literal text and
by highlighting the single shield with green, if protected.

Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>

diff --git a/www/datastore/Content.js b/www/datastore/Content.js
index dc9f6579e296137d06bcf13c2dd0dee164bef402..5aaec85ce9c601a73f7ac83bf2481b46720d407f 100644 (file)
--- a/www/datastore/Content.js
+++ b/www/datastore/Content.js
@@ -717,11 +717,10 @@ Ext.define('PBS.DataStoreContent', {
            header: gettext("Backup Group"),
            dataIndex: 'text',
            renderer: (value, meta, record) => {
-               let protect = "";
                if (record.data.protected) {
-                   protect = ` <i class="fa fa-shield"></i>`;
+                   return `${value} (${gettext('protected')})`;
                }
-               return value + protect;
+               return value;
            },
            flex: 1,
        },
@@ -795,7 +794,13 @@ Ext.define('PBS.DataStoreContent', {
                {
                    handler: 'onProtectionChange',
                    getTip: (v, m, rec) => Ext.String.format(gettext("Change protection of '{0}'"), v),
-                   getClass: (v, m, rec) => !rec.data.leaf && rec.parentNode.id !== 'root' ? 'fa fa-shield' : 'pmx-hidden',
+                   getClass: (v, m, rec) => {
+                       if (!rec.data.leaf && rec.parentNode.id !== 'root') {
+                           let extraCls = rec.data.protected ? 'good' : 'faded';
+                           return `fa fa-shield ${extraCls}`;
+                       }
+                       return 'pmx-hidden';
+                   },
                    isActionDisabled: (v, r, c, i, rec) => !!rec.data.leaf || rec.parentNode.id === 'root',
                },
                {