diff --git a/www/css/ext6-pbs.css b/www/css/ext6-pbs.css index 706e681e..891189ae 100644 --- a/www/css/ext6-pbs.css +++ b/www/css/ext6-pbs.css @@ -261,6 +261,18 @@ span.snapshot-comment-column { content: "\f0ad"; } +.pbs-unplugged-mask div.x-mask-msg-text { + background: None; + padding: 12px 0 0; +} + +.pbs-unplugged-mask:before { + font-size: 3em; + display: flex; + justify-content: center; + content: "\f1e6"; +} + /* the small icons TODO move to proxmox-widget-toolkit */ .pmx-tree-icon-custom:after { position: relative; diff --git a/www/datastore/Summary.js b/www/datastore/Summary.js index b8d1284b..89556865 100644 --- a/www/datastore/Summary.js +++ b/www/datastore/Summary.js @@ -61,16 +61,21 @@ Ext.define('PBS.DataStoreInfo', { Proxmox.Utils.API2Request({ url: `/config/datastore/${me.view.datastore}`, success: function(response) { - const config = response.result.data; - if (config['maintenance-mode']) { - const [_type, msg] = PBS.Utils.parseMaintenanceMode(config['maintenance-mode']); - me.view.el.mask( - `${gettext('Datastore is in maintenance mode')}${msg ? ': ' + msg : ''}`, - 'fa pbs-maintenance-mask', - ); - } else { + let maintenanceString = response.result.data['maintenance-mode']; + let removable = !!response.result.data['backing-device']; + if (!maintenanceString && !removable) { me.view.el.mask(gettext('Datastore is not available')); + return; } + + let [_type, msg] = PBS.Utils.parseMaintenanceMode(maintenanceString); + let isUnplugged = !maintenanceString && removable; + let maskMessage = isUnplugged + ? gettext('Datastore is not mounted') + : `${gettext('Datastore is in maintenance mode')}${msg ? ': ' + msg : ''}`; + + let maskIcon = isUnplugged ? 'fa pbs-unplugged-mask' : 'fa pbs-maintenance-mask'; + me.view.el.mask(maskMessage, maskIcon); }, }); return;