[pve-devel] [PATCH v2 proxmox-widget-toolbox 0/6] removal of directories in PBS WebUI

[pve-devel] [PATCH v2 proxmox-widget-toolbox 0/6] removal of directories in PBS WebUI

[Hannes Laimer]

Added functionality to remove directories in the PBS WebUI. In order to do that SafeDestroy had to be refactored from pve-manager into proxmox-widget-toolkit and the possibility to show a small note in the dialog was added. Due to the refactorization the usages of SafeDestroy in pve-manager had to be corrected. In order to avoid the extraction of the directory name from the path in the frontend, the api2 now also returns the name of a directory.

proxmox-widget-toolkit needs a version bump, pve-manager and proxmox-backup require that new version.

v2: - SafeRemove -> SafeDestroy (keep original name)
	- generalized SafeDestroy
	- fixed eslint related issues
	- split patch [3/5]v1 into two patches


proxmox-widget-toolkit: Hannes Laimer (3):
  safe-destroy: moved here from pve-manager and generalized it
  safe-destroy: add possibility display small note in dialog
  utils: add task description for directory removal

 src/Makefile              |   1 +
 src/Utils.js              |   1 +
 src/window/SafeDestroy.js | 209 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 211 insertions(+)
 create mode 100644 src/window/SafeDestroy.js


pve-manager: Hannes Laimer (1):
  ui: move safe-destroy to proxmox-widget-toolkit and adjust usages

 www/manager6/Makefile               |   1 -
 www/manager6/ceph/Pool.js           |   5 +-
 www/manager6/lxc/Config.js          |   5 +-
 www/manager6/qemu/Config.js         |   5 +-
 www/manager6/storage/ContentView.js |   5 +-
 www/manager6/window/SafeDestroy.js  | 194 ----------------------------
 6 files changed, 12 insertions(+), 203 deletions(-)
 delete mode 100644 www/manager6/window/SafeDestroy.js


Hannes Laimer (2):
  api2: add name of mount-point to DatastoreMountInfo
  ui: add remove-button for directories/mount-units

 src/api2/node/disks/directory.rs |  5 +++++
 www/DirectoryList.js             | 25 +++++++++++++++++++++++++
 2 files changed, 30 insertions(+)

-- 
2.20.1

[pve-devel] [PATCH v2 proxmox-widget-toolbox 1/6] safe-destroy: moved here from pve-manager and generalized it

[Hannes Laimer]

Signed-off-by: Hannes Laimer <h.laimer@proxmox.com>
---
v1->v2:	- kept name
		- introduced purgeable and taskName as config in SafeDestroy, in
		  order to avoid having downstream logic here
		- fixed eslint related issues

 src/Makefile              |   1 +
 src/window/SafeDestroy.js | 183 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 184 insertions(+)
 create mode 100644 src/window/SafeDestroy.js

diff --git a/src/Makefile b/src/Makefile
index 12dda30..ea71647 100644
--- a/src/Makefile
+++ b/src/Makefile
@@ -43,6 +43,7 @@ JSSRC=					\
 	panel/GaugeWidget.js		\
 	window/Edit.js			\
 	window/PasswordEdit.js		\
+	window/SafeDestroy.js		\
 	window/TaskViewer.js		\
 	window/LanguageEdit.js		\
 	window/DiskSmart.js		\
diff --git a/src/window/SafeDestroy.js b/src/window/SafeDestroy.js
new file mode 100644
index 0000000..81c7c27
--- /dev/null
+++ b/src/window/SafeDestroy.js
@@ -0,0 +1,183 @@
+/* Popup a message window
+ * where the user has to manually enter the resource ID
+ * to enable the destroy button
+ */
+Ext.define('Proxmox.window.SafeDestroy', {
+    extend: 'Ext.window.Window',
+    alias: 'proxmoxSafeDestroy',
+
+    title: gettext('Confirm'),
+    modal: true,
+    buttonAlign: 'center',
+    bodyPadding: 10,
+    width: 450,
+    layout: { type: 'hbox' },
+    defaultFocus: 'confirmField',
+    showProgress: false,
+
+    config: {
+	    item: {
+	        id: undefined,
+			purgeable: false,
+		},
+	    url: undefined,
+	    taskName: undefined,
+	    params: {},
+    },
+
+    getParams: function() {
+	    const me = this;
+	    const purgeCheckbox = me.lookupReference('purgeCheckbox');
+	    if (purgeCheckbox.checked) {
+	        me.params.purge = 1;
+	    }
+	    if (Ext.Object.isEmpty(me.params)) {
+	        return '';
+	    }
+	    return '?' + Ext.Object.toQueryString(me.params);
+    },
+
+    controller: {
+	    xclass: 'Ext.app.ViewController',
+	    control: {
+	        'field[name=confirm]': {
+	        change: function(f, value) {
+	            var view = this.getView();
+	            var removeButton = this.lookupReference('removeButton');
+	            if (value === view.getItem().id.toString()) {
+	                  removeButton.enable();
+	            } else {
+	                  removeButton.disable();
+	            }
+	        },
+	        specialkey: function(field, event) {
+	            var removeButton = this.lookupReference('removeButton');
+	            if (!removeButton.isDisabled() &&
+	                  event.getKey() === event.ENTER) {
+	                  removeButton.fireEvent('click', removeButton, event);
+	            }
+	        },
+	        },
+	        'button[reference=removeButton]': {
+	        click: function() {
+	            const view = this.getView();
+	            Proxmox.Utils.API2Request({
+	                  url: view.getUrl() + view.getParams(),
+	                  method: 'DELETE',
+	                  waitMsgTarget: view,
+	                  failure: function(response, opts) {
+	                      view.close();
+	                      Ext.Msg.alert('Error', response.htmlStatus);
+	                  },
+	                  success: function(response, options) {
+	                      const hasProgressBar = !!(view.showProgress &&
+	                      response.result.data);
+
+	                      if (hasProgressBar) {
+	                      // stay around so we can trigger our close
+	                      // events when background action is completed
+	                      view.hide();
+
+	                      var upid = response.result.data;
+	                      var win =
+	                          Ext.create('Proxmox.window.TaskProgress', {
+	                                upid: upid,
+	                                listeners: {
+	                                    destroy: function() {
+	                                    view.close();
+	                                    },
+	                                },
+	                          });
+	                      win.show();
+	                      } else {
+	                      view.close();
+	                      }
+	                  },
+	            });
+	        },
+	        },
+	    },
+    },
+
+    items: [
+	    {
+	        xtype: 'component',
+	        cls: [Ext.baseCSSPrefix + 'message-box-icon',
+	        Ext.baseCSSPrefix + 'message-box-warning',
+	        Ext.baseCSSPrefix + 'dlg-icon'],
+	    },
+	    {
+	        xtype: 'container',
+	        flex: 1,
+	        layout: {
+	        type: 'vbox',
+	        align: 'stretch',
+	        },
+	        items: [
+	        {
+	            xtype: 'component',
+	            reference: 'messageCmp',
+	        },
+	        {
+	            itemId: 'confirmField',
+	            reference: 'confirmField',
+	            xtype: 'textfield',
+	            name: 'confirm',
+	            labelWidth: 300,
+	            hideTrigger: true,
+	            allowBlank: false,
+	        },
+	        {
+	            xtype: 'proxmoxcheckbox',
+	            name: 'purge',
+	            reference: 'purgeCheckbox',
+	            boxLabel: gettext('Wipe'),
+	            checked: false,
+	            autoEl: {
+	                tag: 'div',
+	                'data-qtip': gettext('Wipe disk after the removal of mountpoint'),
+	            },
+	        },
+	        ],
+	    },
+    ],
+    buttons: [
+	    {
+	        reference: 'removeButton',
+	        text: gettext('Remove'),
+	        disabled: true,
+	    },
+    ],
+
+    initComponent: function() {
+	    const me = this;
+	    me.callParent();
+
+	    const item = me.getItem();
+
+	    if (!Ext.isDefined(item.id)) {
+	        throw "no ID specified";
+	    }
+
+	    const messageCmp = me.lookupReference('messageCmp');
+	    let msg;
+
+	    if (Ext.isDefined(me.getTaskName())) {
+	        msg = Proxmox.Utils.format_task_description(me.getTaskName(), item.id);
+			messageCmp.setHtml(msg);
+		} else {
+	        throw "no task name specified";
+	    }
+
+	    if (!item.purgeable) {
+	        const purgeCheckbox = me.lookupReference('purgeCheckbox');
+	        purgeCheckbox.setDisabled(true);
+	        purgeCheckbox.setHidden(true);
+	    }
+
+	    const confirmField = me.lookupReference('confirmField');
+	    msg = gettext('Please enter the ID to confirm') +
+	        ' (' + item.id + ')';
+	    confirmField.setFieldLabel(msg);
+    },
+});
-- 
2.20.1

[pve-devel] [PATCH v2 proxmox-widget-toolbox 2/6] safe-destroy: add possibility display small note in dialog

[Hannes Laimer]

Signed-off-by: Hannes Laimer <h.laimer@proxmox.com>
---
v1->v2: - split into two patches: [3/5]v1 into [2/6]+[3/6]v2

 src/window/SafeDestroy.js | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/window/SafeDestroy.js b/src/window/SafeDestroy.js
index 81c7c27..a456aba 100644
--- a/src/window/SafeDestroy.js
+++ b/src/window/SafeDestroy.js
@@ -21,6 +21,7 @@ Ext.define('Proxmox.window.SafeDestroy', {
 			purgeable: false,
 		},
 	    url: undefined,
+	    note: undefined,
 	    taskName: undefined,
 	    params: {},
     },
@@ -138,6 +139,22 @@ Ext.define('Proxmox.window.SafeDestroy', {
 	                'data-qtip': gettext('Wipe disk after the removal of mountpoint'),
 	            },
 	        },
+	        {
+	            xtype: 'container',
+	            reference: 'noteContainer',
+	            flex: 1,
+	            layout: {
+	            type: 'vbox',
+	            align: 'middle',
+	            },
+	            height: 25,
+	            items: [
+	                {
+	                    xtype: 'component',
+	                    reference: 'noteCmp',
+	                },
+	              ],
+	        },
 	        ],
 	    },
     ],
@@ -160,8 +177,17 @@ Ext.define('Proxmox.window.SafeDestroy', {
 	    }
 
 	    const messageCmp = me.lookupReference('messageCmp');
+	    const noteCmp = me.lookupReference('noteCmp');
 	    let msg;
 
+	    if (Ext.isDefined(me.getNote())) {
+	        noteCmp.setHtml(`<small>${me.getNote()}</small>`);
+	    } else {
+	        const noteContainer = me.lookupReference('noteContainer');
+	        noteContainer.setDisabled(true);
+	        noteContainer.setHidden(true);
+	    }
+
 	    if (Ext.isDefined(me.getTaskName())) {
 	        msg = Proxmox.Utils.format_task_description(me.getTaskName(), item.id);
 			messageCmp.setHtml(msg);
-- 
2.20.1

[pve-devel] [PATCH v2 proxmox-widget-toolbox 3/6] utils: add task description for directory removal

[Hannes Laimer]

Signed-off-by: Hannes Laimer <h.laimer@proxmox.com>
---
v1->v2: NEW

 src/Utils.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Utils.js b/src/Utils.js
index 4be95b2..6373440 100644
--- a/src/Utils.js
+++ b/src/Utils.js
@@ -641,6 +641,7 @@ utilities: {
 	stopall: ['', gettext('Stop all VMs and Containers')],
 	migrateall: ['', gettext('Migrate all VMs and Containers')],
 	dircreate: [gettext('Directory Storage'), gettext('Create')],
+	dirremove: [gettext('Directory'), gettext('Remove')],
 	lvmcreate: [gettext('LVM Storage'), gettext('Create')],
 	lvmthincreate: [gettext('LVM-Thin Storage'), gettext('Create')],
 	zfscreate: [gettext('ZFS Storage'), gettext('Create')],
-- 
2.20.1

[pve-devel] [PATCH v2 pve-manager 4/6] ui: move safe-destroy to proxmox-widget-toolkit and adjust usages

[Hannes Laimer]

Signed-off-by: Hannes Laimer <h.laimer@proxmox.com>
---
v1->v2: - adjusted usages of SafeDestroy

 www/manager6/Makefile               |   1 -
 www/manager6/ceph/Pool.js           |   5 +-
 www/manager6/lxc/Config.js          |   5 +-
 www/manager6/qemu/Config.js         |   5 +-
 www/manager6/storage/ContentView.js |   5 +-
 www/manager6/window/SafeDestroy.js  | 194 ----------------------------
 6 files changed, 12 insertions(+), 203 deletions(-)
 delete mode 100644 www/manager6/window/SafeDestroy.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 4288acdd..89a45d85 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -247,7 +247,6 @@ JSSRC= 							\
 	window/Migrate.js				\
 	window/NotesEdit.js				\
 	window/Restore.js				\
-	window/SafeDestroy.js				\
 	window/Settings.js				\
 	window/Snapshot.js				\
 	window/StartupEdit.js				\
diff --git a/www/manager6/ceph/Pool.js b/www/manager6/ceph/Pool.js
index 19eb01e9..1357727c 100644
--- a/www/manager6/ceph/Pool.js
+++ b/www/manager6/ceph/Pool.js
@@ -229,13 +229,14 @@ Ext.define('PVE.node.CephPoolList', {
 		var base_url = '/nodes/' + nodename + '/ceph/pools/' +
 		    rec.data.pool_name;
 
-		var win = Ext.create('PVE.window.SafeDestroy', {
+		var win = Ext.create('Proxmox.window.SafeDestroy', {
 		    showProgress: true,
 		    url: base_url,
 		    params: {
 			remove_storages: 1
 		    },
-		    item: { type: 'CephPool', id: rec.data.pool_name }
+		    item: { id: rec.data.pool_name },
+			taskName: 'cephdestroypool'
 		}).show();
 		win.on('destroy', function() {
 		    rstore.load();
diff --git a/www/manager6/lxc/Config.js b/www/manager6/lxc/Config.js
index c2222d3a..193362ae 100644
--- a/www/manager6/lxc/Config.js
+++ b/www/manager6/lxc/Config.js
@@ -149,9 +149,10 @@ Ext.define('PVE.lxc.Config', {
 		    disabled: !caps.vms['VM.Allocate'],
 		    itemId: 'removeBtn',
 		    handler: function() {
-			Ext.create('PVE.window.SafeDestroy', {
+			Ext.create('Proxmox.window.SafeDestroy', {
 			    url: base_url,
-			    item: { type: 'CT', id: vmid }
+			    item: { id: vmid, purgeable: true },
+				taskName: 'vzdestroy'
 			}).show();
 		    },
 		    iconCls: 'fa fa-trash-o'
diff --git a/www/manager6/qemu/Config.js b/www/manager6/qemu/Config.js
index a13bf0c5..37e47598 100644
--- a/www/manager6/qemu/Config.js
+++ b/www/manager6/qemu/Config.js
@@ -124,9 +124,10 @@ Ext.define('PVE.qemu.Config', {
 		    itemId: 'removeBtn',
 		    disabled: !caps.vms['VM.Allocate'],
 		    handler: function() {
-			Ext.create('PVE.window.SafeDestroy', {
+			Ext.create('Proxmox.window.SafeDestroy', {
 			    url: base_url,
-			    item: { type: 'VM', id: vmid }
+			    item: { id: vmid, purgeable: true },
+				taskName: 'qmdestroy'
 			}).show();
 		    },
 		    iconCls: 'fa fa-trash-o'
diff --git a/www/manager6/storage/ContentView.js b/www/manager6/storage/ContentView.js
index c70c732c..9df8b60b 100644
--- a/www/manager6/storage/ContentView.js
+++ b/www/manager6/storage/ContentView.js
@@ -483,11 +483,12 @@ Ext.define('PVE.storage.ContentView', {
 			return;
 		    }
 		}
-		var win = Ext.create('PVE.window.SafeDestroy', {
+		var win = Ext.create('Proxmox.window.SafeDestroy', {
 		    title: Ext.String.format(gettext("Destroy '{0}'"), rec.data.volid),
 		    showProgress: true,
 		    url: url,
-		    item: { type: 'Image', id: vmid }
+		    item: { id: vmid },
+			taskName: 'unknownimgdel'
 		}).show();
 		win.on('destroy', function() {
 		    me.statusStore = Ext.create('Proxmox.data.ObjectStore', {
diff --git a/www/manager6/window/SafeDestroy.js b/www/manager6/window/SafeDestroy.js
deleted file mode 100644
index cc32f6e0..00000000
--- a/www/manager6/window/SafeDestroy.js
+++ /dev/null
@@ -1,194 +0,0 @@
-/* Popup a message window
- * where the user has to manually enter the resource ID
- * to enable the destroy button
- */
-Ext.define('PVE.window.SafeDestroy', {
-    extend: 'Ext.window.Window',
-    alias: 'widget.pveSafeDestroy',
-
-    title: gettext('Confirm'),
-    modal: true,
-    buttonAlign: 'center',
-    bodyPadding: 10,
-    width: 450,
-    layout: { type:'hbox' },
-    defaultFocus: 'confirmField',
-    showProgress: false,
-
-    config: {
-	item: {
-	    id: undefined,
-	    type: undefined
-	},
-	url: undefined,
-	params: {}
-    },
-
-    getParams: function() {
-	var me = this;
-	var purgeCheckbox = me.lookupReference('purgeCheckbox');
-	if (purgeCheckbox.checked) {
-	    me.params.purge = 1;
-	}
-	if (Ext.Object.isEmpty(me.params)) {
-	    return '';
-	}
-	return '?' + Ext.Object.toQueryString(me.params);
-    },
-
-    controller: {
-
-	xclass: 'Ext.app.ViewController',
-
-	control: {
-	    'field[name=confirm]': {
-		change: function(f, value) {
-		    var view = this.getView();
-		    var removeButton = this.lookupReference('removeButton');
-		    if (value === view.getItem().id.toString()) {
-			removeButton.enable();
-		    } else {
-			removeButton.disable();
-		    }
-		},
-		specialkey: function (field, event) {
-		    var removeButton = this.lookupReference('removeButton');
-		    if (!removeButton.isDisabled() && event.getKey() == event.ENTER) {
-			removeButton.fireEvent('click', removeButton, event);
-		    }
-		}
-	    },
-           'button[reference=removeButton]': {
-		click: function() {
-		    var view = this.getView();
-		    Proxmox.Utils.API2Request({
-			url: view.getUrl() + view.getParams(),
-			method: 'DELETE',
-			waitMsgTarget: view,
-			failure: function(response, opts) {
-			    view.close();
-			    Ext.Msg.alert('Error', response.htmlStatus);
-			},
-			success: function(response, options) {
-			    var hasProgressBar = view.showProgress &&
-				response.result.data ? true : false;
-
-			    if (hasProgressBar) {
-				// stay around so we can trigger our close events
-				// when background action is completed
-				view.hide();
-
-				var upid = response.result.data;
-				var win = Ext.create('Proxmox.window.TaskProgress', {
-				    upid: upid,
-				    listeners: {
-					destroy: function () {
-					    view.close();
-					}
-				    }
-				});
-				win.show();
-			    } else {
-				view.close();
-			    }
-			}
-		    });
-		}
-            }
-	}
-    },
-
-    items: [
-	{
-	    xtype: 'component',
-	    cls: [ Ext.baseCSSPrefix + 'message-box-icon',
-		   Ext.baseCSSPrefix + 'message-box-warning',
-		   Ext.baseCSSPrefix + 'dlg-icon']
-	},
-	{
-	    xtype: 'container',
-	    flex: 1,
-	    layout: {
-		type: 'vbox',
-		align: 'stretch'
-	    },
-	    items: [
-		{
-		    xtype: 'component',
-		    reference: 'messageCmp'
-		},
-		{
-		    itemId: 'confirmField',
-		    reference: 'confirmField',
-		    xtype: 'textfield',
-		    name: 'confirm',
-		    labelWidth: 300,
-		    hideTrigger: true,
-		    allowBlank: false
-		},
-		{
-		    xtype: 'proxmoxcheckbox',
-		    name: 'purge',
-		    reference: 'purgeCheckbox',
-		    boxLabel: gettext('Purge'),
-		    checked: false,
-		    autoEl: {
-			tag: 'div',
-			'data-qtip': gettext('Remove from replication and backup jobs')
-		    }
-		}
-	    ]
-	}
-    ],
-    buttons: [
-	{
-	    reference: 'removeButton',
-	    text: gettext('Remove'),
-	    disabled: true
-	}
-    ],
-
-    initComponent : function() {
-	var me = this;
-
-	me.callParent();
-
-	var item = me.getItem();
-
-	if (!Ext.isDefined(item.id)) {
-	    throw "no ID specified";
-	}
-
-	if (!Ext.isDefined(item.type)) {
-	    throw "no VM type specified";
-	}
-
-	var messageCmp = me.lookupReference('messageCmp');
-	var msg;
-
-	if (item.type === 'VM') {
-	    msg = Proxmox.Utils.format_task_description('qmdestroy', item.id);
-	} else if (item.type === 'CT') {
-	    msg = Proxmox.Utils.format_task_description('vzdestroy', item.id);
-	} else if (item.type === 'CephPool') {
-	    msg = Proxmox.Utils.format_task_description('cephdestroypool', item.id);
-	} else if (item.type === 'Image') {
-	    msg = Proxmox.Utils.format_task_description('unknownimgdel', item.id);
-	} else {
-	    throw "unknown item type specified";
-	}
-
-	messageCmp.setHtml(msg);
-
-	if (!(item.type === 'VM' || item.type === 'CT')) {
-	    let purgeCheckbox = me.lookupReference('purgeCheckbox');
-	    purgeCheckbox.setDisabled(true);
-	    purgeCheckbox.setHidden(true);
-	}
-
-	var confirmField = me.lookupReference('confirmField');
-	msg = gettext('Please enter the ID to confirm') +
-	    ' (' + item.id + ')';
-	confirmField.setFieldLabel(msg);
-    }
-});
-- 
2.20.1

[pve-devel] [PATCH v2 proxmox-backup 5/6] api2: add name of mount-point to DatastoreMountInfo

[Hannes Laimer]

Signed-off-by: Hannes Laimer <h.laimer@proxmox.com>
---
v1->v2: - no changes

 src/api2/node/disks/directory.rs | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/api2/node/disks/directory.rs b/src/api2/node/disks/directory.rs
index 0d9ddeef..90d0ee76 100644
--- a/src/api2/node/disks/directory.rs
+++ b/src/api2/node/disks/directory.rs
@@ -34,6 +34,8 @@ pub struct DatastoreMountInfo {
     pub unitfile: String,
     /// The mount path.
     pub path: String,
+    /// The name of the mount.
+    pub id: String,
     /// The mounted device.
     pub device: String,
     /// File system type
@@ -76,6 +78,8 @@ pub fn  list_datastore_mounts() -> Result<Vec<DatastoreMountInfo>, Error> {
         let item = item?;
         let name = item.file_name().to_string_lossy().to_string();
 
+        let id = String::from(MOUNT_NAME_REGEX.captures(&name).unwrap().get(1).map_or("", |m| m.as_str()));
+
         let unitfile = format!("{}/{}", basedir, name);
         let config = systemd::config::parse_systemd_mount(&unitfile)?;
         let data: SystemdMountSection = config.lookup("Mount", "Mount")?;
@@ -84,6 +88,7 @@ pub fn  list_datastore_mounts() -> Result<Vec<DatastoreMountInfo>, Error> {
             unitfile,
             device: data.What,
             path: data.Where,
+            id,
             filesystem: data.Type,
             options: data.Options,
         });
-- 
2.20.1

[pve-devel] [PATCH v2 proxmox-backup 6/6] ui: add remove-button for directories/mount-units

[Hannes Laimer]

Signed-off-by: Hannes Laimer <h.laimer@proxmox.com>
---
I could not find any, already existing, langstring to use here.

"Can I re-add the same one after wards?" No, since the disk contains partitions and data. It
has to be cleared before it may be re-"created" again.

 www/DirectoryList.js | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/www/DirectoryList.js b/www/DirectoryList.js
index 00531fd0..a82791db 100644
--- a/www/DirectoryList.js
+++ b/www/DirectoryList.js
@@ -21,6 +21,24 @@ Ext.define('PBS.admin.Directorylist', {
 	    }).show();
 	},
 
+	removeDir: function() {
+	    let me = this;
+	    const view = me.getView();
+	    const rec = view.getSelection()[0];
+	    const id = rec.data.id;
+		Ext.create('Proxmox.window.SafeDestroy', {
+	        url: `/nodes/localhost/disks/directory/${id}`,
+	        item: {
+	            id: id,
+			},
+	        note: gettext('Data and partitions on the disk will be left untouched.'),
+			taskName: 'dirremove',
+			listeners: {
+			    destroy: () => me.reload(),
+	        },
+	  }).show();
+	},
+
 	reload: function() {
 	    let me = this;
 	    let store = me.getView().getStore();
@@ -49,6 +67,13 @@ Ext.define('PBS.admin.Directorylist', {
 	    text: gettext('Create') + ': Directory',
 	    handler: 'createDirectory',
 	},
+	{
+	    xtype: 'proxmoxButton',
+	    text: gettext('Remove'),
+	    handler: 'removeDir',
+	    disabled: true,
+	    iconCls: 'fa fa-trash-o',
+	},
     ],
 
     columns: [
-- 
2.20.1

Re: [pve-devel] [pbs-devel] [PATCH v2 proxmox-widget-toolbox 1/6] safe-destroy: moved here from pve-manager and generalized it

[Thomas Lamprecht]

On 19.08.20 11:52, Hannes Laimer wrote:
> Signed-off-by: Hannes Laimer <h.laimer@proxmox.com>
> ---
> v1->v2:	- kept name
> 		- introduced purgeable and taskName as config in SafeDestroy, in
> 		  order to avoid having downstream logic here
> 		- fixed eslint related issues

again, nothing in the commit message about what changed in-between moving.
As of now we have no idea what you change, effectively you sneak in hard to
reviewable code changes.

I want a:
* plain move, touch only the really essential things, which should boil down
  to the "Ext.define('Proxmox.window.SafeDestroy" line)
* then do the respective changes you want to do, ideally not all in one commit
  but semantically grouped together.

Also, indentation is way of - I know the scheme in use is extra, and with some
editors a bit a PITA to configure, but please ensure you do so - even if we
change it for javascript files, we won't do so for perl, and perl will stick
around for quite a few years...

> 
>  src/Makefile              |   1 +
>  src/window/SafeDestroy.js | 183 ++++++++++++++++++++++++++++++++++++++
>  2 files changed, 184 insertions(+)
>  create mode 100644 src/window/SafeDestroy.js
> 
> diff --git a/src/Makefile b/src/Makefile
> index 12dda30..ea71647 100644
> --- a/src/Makefile
> +++ b/src/Makefile
> @@ -43,6 +43,7 @@ JSSRC=					\
>  	panel/GaugeWidget.js		\
>  	window/Edit.js			\
>  	window/PasswordEdit.js		\
> +	window/SafeDestroy.js		\
>  	window/TaskViewer.js		\
>  	window/LanguageEdit.js		\
>  	window/DiskSmart.js		\
> diff --git a/src/window/SafeDestroy.js b/src/window/SafeDestroy.js
> new file mode 100644
> index 0000000..81c7c27
> --- /dev/null
> +++ b/src/window/SafeDestroy.js
> @@ -0,0 +1,183 @@
> +/* Popup a message window
> + * where the user has to manually enter the resource ID
> + * to enable the destroy button
> + */
> +Ext.define('Proxmox.window.SafeDestroy', {
> +    extend: 'Ext.window.Window',
> +    alias: 'proxmoxSafeDestroy',
> +
> +    title: gettext('Confirm'),
> +    modal: true,
> +    buttonAlign: 'center',
> +    bodyPadding: 10,
> +    width: 450,
> +    layout: { type: 'hbox' },
> +    defaultFocus: 'confirmField',
> +    showProgress: false,
> +
> +    config: {
> +	    item: {
> +	        id: undefined,
> +			purgeable: false,
> +		},
> +	    url: undefined,
> +	    taskName: undefined,
> +	    params: {},
> +    },
> +
> +    getParams: function() {
> +	    const me = this;
> +	    const purgeCheckbox = me.lookupReference('purgeCheckbox');
> +	    if (purgeCheckbox.checked) {
> +	        me.params.purge = 1;
> +	    }
> +	    if (Ext.Object.isEmpty(me.params)) {
> +	        return '';
> +	    }
> +	    return '?' + Ext.Object.toQueryString(me.params);
> +    },
> +
> +    controller: {
> +	    xclass: 'Ext.app.ViewController',
> +	    control: {
> +	        'field[name=confirm]': {
> +	        change: function(f, value) {
> +	            var view = this.getView();
> +	            var removeButton = this.lookupReference('removeButton');
> +	            if (value === view.getItem().id.toString()) {
> +	                  removeButton.enable();
> +	            } else {
> +	                  removeButton.disable();
> +	            }
> +	        },
> +	        specialkey: function(field, event) {
> +	            var removeButton = this.lookupReference('removeButton');
> +	            if (!removeButton.isDisabled() &&
> +	                  event.getKey() === event.ENTER) {
> +	                  removeButton.fireEvent('click', removeButton, event);
> +	            }
> +	        },
> +	        },
> +	        'button[reference=removeButton]': {
> +	        click: function() {
> +	            const view = this.getView();
> +	            Proxmox.Utils.API2Request({
> +	                  url: view.getUrl() + view.getParams(),
> +	                  method: 'DELETE',
> +	                  waitMsgTarget: view,
> +	                  failure: function(response, opts) {
> +	                      view.close();
> +	                      Ext.Msg.alert('Error', response.htmlStatus);
> +	                  },
> +	                  success: function(response, options) {
> +	                      const hasProgressBar = !!(view.showProgress &&
> +	                      response.result.data);
> +
> +	                      if (hasProgressBar) {
> +	                      // stay around so we can trigger our close
> +	                      // events when background action is completed
> +	                      view.hide();
> +
> +	                      var upid = response.result.data;
> +	                      var win =
> +	                          Ext.create('Proxmox.window.TaskProgress', {
> +	                                upid: upid,
> +	                                listeners: {
> +	                                    destroy: function() {
> +	                                    view.close();
> +	                                    },
> +	                                },
> +	                          });
> +	                      win.show();
> +	                      } else {
> +	                      view.close();
> +	                      }
> +	                  },
> +	            });
> +	        },
> +	        },
> +	    },
> +    },
> +
> +    items: [
> +	    {
> +	        xtype: 'component',
> +	        cls: [Ext.baseCSSPrefix + 'message-box-icon',
> +	        Ext.baseCSSPrefix + 'message-box-warning',
> +	        Ext.baseCSSPrefix + 'dlg-icon'],
> +	    },
> +	    {
> +	        xtype: 'container',
> +	        flex: 1,
> +	        layout: {
> +	        type: 'vbox',
> +	        align: 'stretch',
> +	        },
> +	        items: [
> +	        {
> +	            xtype: 'component',
> +	            reference: 'messageCmp',
> +	        },
> +	        {
> +	            itemId: 'confirmField',
> +	            reference: 'confirmField',
> +	            xtype: 'textfield',
> +	            name: 'confirm',
> +	            labelWidth: 300,
> +	            hideTrigger: true,
> +	            allowBlank: false,
> +	        },
> +	        {
> +	            xtype: 'proxmoxcheckbox',
> +	            name: 'purge',
> +	            reference: 'purgeCheckbox',
> +	            boxLabel: gettext('Wipe'),
> +	            checked: false,
> +	            autoEl: {
> +	                tag: 'div',
> +	                'data-qtip': gettext('Wipe disk after the removal of mountpoint'),
> +	            },
> +	        },
> +	        ],
> +	    },
> +    ],
> +    buttons: [
> +	    {
> +	        reference: 'removeButton',
> +	        text: gettext('Remove'),
> +	        disabled: true,
> +	    },
> +    ],
> +
> +    initComponent: function() {
> +	    const me = this;

why some "var" uses are const now and some (above) ain't?

I mean, in general I find it nice if things which are and probably will stay
read only are marked as const, and "var" should definitively die...

But, the "me = this" in the initComponent should stay writable, it is often
modified and that's OK here - so I'd like to keep that as a pattern.

So please use
let me = this;
here

> +	    me.callParent();
> +
> +	    const item = me.getItem();
> +
> +	    if (!Ext.isDefined(item.id)) {
> +	        throw "no ID specified";
> +	    }
> +
> +	    const messageCmp = me.lookupReference('messageCmp');
> +	    let msg;
> +
> +	    if (Ext.isDefined(me.getTaskName())) {
> +	        msg = Proxmox.Utils.format_task_description(me.getTaskName(), item.id);
> +			messageCmp.setHtml(msg);
> +		} else {
> +	        throw "no task name specified";
> +	    }
> +
> +	    if (!item.purgeable) {
> +	        const purgeCheckbox = me.lookupReference('purgeCheckbox');
> +	        purgeCheckbox.setDisabled(true);
> +	        purgeCheckbox.setHidden(true);
> +	    }
> +
> +	    const confirmField = me.lookupReference('confirmField');
> +	    msg = gettext('Please enter the ID to confirm') +
> +	        ' (' + item.id + ')';
> +	    confirmField.setFieldLabel(msg);
> +    },
> +});
>