ui: datastore selector: move maintenance mode inline with icon

else it's a lot of wasted space for the ordinary case, that hasn't
permanent maintenance modes activated, and even if, their admins
should be used to it, so not the best space/usability ROI there
either.

Just use the icon as visual clue and add a tooltip for the
maintenance mode info.

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

diff --git a/www/form/DataStoreSelector.js b/www/form/DataStoreSelector.js
index 90f20beec775a6f93a0c430475f82bcf6a4f339d..eae42bef719cd696fbc438a8df1d7e1ab808eefd 100644 (file)
--- a/www/form/DataStoreSelector.js
+++ b/www/form/DataStoreSelector.js
@@ -19,7 +19,14 @@ Ext.define('PBS.form.DataStoreSelector', {
                header: gettext('Datastore'),
                sortable: true,
                dataIndex: 'store',
-               renderer: Ext.String.htmlEncode,
+               renderer: (v, metaData, rec) => {
+                   let icon = '';
+                   if (rec.data?.maintenance) {
+                       let tip = Ext.String.htmlEncode(PBS.Utils.renderMaintenance(rec.data?.maintenance));
+                       icon = ` <i data-qtip="${tip}" class="fa fa-wrench"></i>`;
+                   }
+                   return Ext.String.htmlEncode(v) + icon;
+               },
                flex: 1,
            },
            {
@@ -29,15 +36,6 @@ Ext.define('PBS.form.DataStoreSelector', {
                renderer: Ext.String.htmlEncode,
                flex: 1,
            },
-           {
-               header: gettext('Maintenance'),
-               sortable: true,
-               dataIndex: 'maintenance',
-               renderer: (value) => {
-                   return PBS.Utils.renderMaintenance(value);
-               },
-               flex: 1,
-           }
        ],
     },
 });