[pve-devel] [PATCH manager 6/6] ui: cluster backup: use cluster-wide storage selector

[Fabian Ebner <f.ebner@proxmox.com>]

adapted from the existing storage selector.

Previously, only the storages for the local node would be shown, which
prevented configuring a job for remote nodes when the storage is not
available on the local node.

In contrast to the existing storage selector, no usage information is
displayed. It's not readily available, and while it could be extracted
from the global resource store, that's a bit messy, and in case a
local storage is available on multiple nodes, there are multiple
values to deal with. Instead, show the list of nodes where the storage
is available and whether it is shared, which is relevant when seen
from a cluster perspective.

Signed-off-by: Fabian Ebner <f.ebner@proxmox.com>
---
 www/manager6/Makefile                       |  1 +
 www/manager6/dc/Backup.js                   |  5 +-
 www/manager6/form/ClusterStorageSelector.js | 96 +++++++++++++++++++++
 3 files changed, 99 insertions(+), 3 deletions(-)
 create mode 100644 www/manager6/form/ClusterStorageSelector.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 3f81d9c4..17d30177 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -26,6 +26,7 @@ JSSRC= 							\
 	form/CacheTypeSelector.js			\
 	form/CalendarEvent.js				\
 	form/CephPoolSelector.js			\
+	form/ClusterStorageSelector.js			\
 	form/CompressionSelector.js			\
 	form/ContentTypeSelector.js			\
 	form/ControllerSelector.js			\
diff --git a/www/manager6/dc/Backup.js b/www/manager6/dc/Backup.js
index 68f67811..7d4db0f0 100644
--- a/www/manager6/dc/Backup.js
+++ b/www/manager6/dc/Backup.js
@@ -54,9 +54,8 @@ Ext.define('PVE.dc.BackupEdit', {
 	    },
 	});
 
-	let storagesel = Ext.create('PVE.form.StorageSelector', {
+	let storagesel = Ext.create('PVE.form.ClusterStorageSelector', {
 	    fieldLabel: gettext('Storage'),
-	    nodename: 'localhost',
 	    storageContent: 'backup',
 	    allowBlank: false,
 	    name: 'storage',
@@ -159,7 +158,7 @@ Ext.define('PVE.dc.BackupEdit', {
 	    emptyText: '-- ' + gettext('All') + ' --',
 	    listeners: {
 		change: function(f, value) {
-		    storagesel.setNodename(value || 'localhost');
+		    storagesel.setNodename(value);
 		    let mode = selModeField.getValue();
 		    store.clearFilter();
 		    store.filterBy(function(rec) {
diff --git a/www/manager6/form/ClusterStorageSelector.js b/www/manager6/form/ClusterStorageSelector.js
new file mode 100644
index 00000000..8207549c
--- /dev/null
+++ b/www/manager6/form/ClusterStorageSelector.js
@@ -0,0 +1,96 @@
+Ext.define('PVE.form.ClusterStorageSelector', {
+    extend: 'Proxmox.form.ComboGrid',
+    alias: 'widget.pveClusterStorageSelector',
+
+    allowBlank: false,
+    valueField: 'storage',
+    displayField: 'storage',
+
+    listConfig: {
+	width: 450,
+	columns: [
+	    {
+		header: gettext('Name'),
+		dataIndex: 'storage',
+		hideable: false,
+		flex: 1,
+	    },
+	    {
+		header: gettext('Type'),
+		width: 140,
+		dataIndex: 'type',
+		renderer: PVE.Utils.format_storage_type,
+	    },
+	    {
+		header: gettext('Nodes'),
+		width: 120,
+		dataIndex: 'nodes',
+		renderer: (value) => value ? value : '-- ' + gettext('All') + ' --',
+	    },
+	    {
+		header: gettext('Shared'),
+		width: 70,
+		dataIndex: 'shared',
+		renderer: Proxmox.Utils.format_boolean,
+	    },
+	],
+    },
+
+    store: {
+	xclass: 'Ext.data.Store',
+	model: 'pve-cluster-storage',
+	proxy: {
+	    type: 'proxmox',
+	    url: `/api2/json/storage`,
+	},
+	sorters: [{
+	    property: 'storage',
+	    order: 'DESC',
+	}],
+	autoLoad: true,
+    },
+
+    updateFilters: function() {
+	let me = this;
+
+	let filters = [
+	    (storage) => !storage.data.disable,
+	];
+
+	if (me.storageContent) {
+	    filters.push(
+		(storage) => storage.data.content.split(',').includes(me.storageContent),
+	    );
+	}
+
+	if (me.nodename) {
+	    filters.push(
+		(storage) => !storage.data.nodes || storage.data.nodes.includes(me.nodename),
+	    );
+	}
+
+	me.getStore().clearFilter();
+	me.getStore().setFilters(filters);
+    },
+
+    setNodename: function(nodename) {
+	let me = this;
+
+	me.nodename = nodename;
+	me.updateFilters();
+	me.validate();
+    },
+
+    listeners: {
+	beforerender: function() {
+	    let me = this;
+	    me.updateFilters();
+	},
+    },
+}, function() {
+    Ext.define('pve-cluster-storage', {
+	extend: 'Ext.data.Model',
+	fields: ['storage', 'type', 'nodes', 'shared'],
+	idProperty: 'storage',
+    });
+});
-- 
2.30.2