ui: tape/ChangerStatus: rework EraseWindow

to make it more like a 'dangerous' remove window
also works in the singleDrive logic to hide/show the driveselector

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>

www/tape/ChangerStatus.js

@@ -144,9 +144,11 @@ Ext.define('PBS.TapeManagement.ChangerStatus', {
 	    let label = record.data['label-text'];
 
 	    let changer = encodeURIComponent(view.changer);
+	    let singleDrive = me.drives.length === 1 ? me.drives[0] : undefined;
 	    Ext.create('PBS.TapeManagement.EraseWindow', {
 		label,
 		changer,
+		singleDrive,
 		listeners: {
 		    destroy: function() {
 			me.reload();

www/tape/window/Erase.js

@@ -8,7 +8,11 @@ Ext.define('PBS.TapeManagement.EraseWindow', {
 
     cbindData: function(config) {
 	let me = this;
-	return {};
+	return {
+	    singleDrive: me.singleDrive,
+	    hasSingleDrive: !!me.singleDrive,
+	    warning: Ext.String.format(gettext("Are you sure you want to erase tape '{0}' ?"), me.label),
+	};
     },
 
     title: gettext('Format/Erase'),
@@ -20,32 +24,72 @@ Ext.define('PBS.TapeManagement.EraseWindow', {
 	return `${url}/${drive}/format-media`;
     },
 
+    layout: 'hbox',
+    width: 400,
     method: 'POST',
+    isCreate: true,
+    submitText: gettext('Ok'),
     items: [
 	{
-	    xtype: 'displayfield',
+	    xtype: 'container',
-	    cls: 'pmx-hint',
+	    padding: 0,
-	    value: gettext('Make sure to insert the tape into the selected drive.'),
+	    layout: {
-	    cbind: {
+		type: 'hbox',
-		hidden: '{changer}',
+		align: 'stretch',
-	    },
-	},
-	{
-	    xtype: 'displayfield',
-	    name: 'label-text',
-	    submitValue: true,
-	    fieldLabel: gettext('Media'),
-	    cbind: {
-		value: '{label}',
-	    },
-	},
-	{
-	    xtype: 'pbsDriveSelector',
-	    fieldLabel: gettext('Drive'),
-	    name: 'drive',
-	    cbind: {
-		changer: '{changer}',
 	    },
+	    items: [
+		{
+		    xtype: 'component',
+		    cls: [Ext.baseCSSPrefix + 'message-box-icon',
+			Ext.baseCSSPrefix + 'message-box-warning',
+			Ext.baseCSSPrefix + 'dlg-icon'],
+		},
+		{
+		    xtype: 'container',
+		    flex: 1,
+		    items: [
+			{
+			    xtype: 'displayfield',
+			    cbind: {
+				value: '{warning}',
+			    },
+			},
+			{
+			    xtype: 'displayfield',
+			    cls: 'pmx-hint',
+			    value: gettext('Make sure to insert the tape into the selected drive.'),
+			    cbind: {
+				hidden: '{changer}',
+			    },
+			},
+			{
+			    xtype: 'hidden',
+			    name: 'label-text',
+			    cbind: {
+				value: '{label}',
+			    },
+			},
+			{
+			    xtype: 'hidden',
+			    name: 'drive',
+			    cbind: {
+				disabled: '{!hasSingleDrive}',
+				value: '{singleDrive}',
+			    },
+			},
+			{
+			    xtype: 'pbsDriveSelector',
+			    fieldLabel: gettext('Drive'),
+			    name: 'drive',
+			    cbind: {
+				changer: '{changer}',
+				disabled: '{hasSingleDrive}',
+				hidden: '{hasSingleDrive}',
+			    },
+			},
+		    ],
+		},
+	    ],
 	},
     ],
 });