[pbs-devel] [PATCH proxmox-backup 3/8] ui: add DataStorePruneAndGC panel and add it to datastore panel

[Dominik Csapak <d.csapak@proxmox.com>]

a simple objectgrid to display datastore gc/prune options
needs the prune inputpanel to be refactored in its own class

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/DataStorePanel.js       |   9 ++
 www/DataStorePruneAndGC.js  | 164 ++++++++++++++++++++++++++++++++++++
 www/Makefile                |   1 +
 www/window/DataStoreEdit.js | 147 ++++++++++++++++++--------------
 4 files changed, 256 insertions(+), 65 deletions(-)
 create mode 100644 www/DataStorePruneAndGC.js

diff --git a/www/DataStorePanel.js b/www/DataStorePanel.js
index 2739614d..88ef02a8 100644
--- a/www/DataStorePanel.js
+++ b/www/DataStorePanel.js
@@ -18,6 +18,15 @@ Ext.define('PBS.DataStorePanel', {
     items: [
 	{
 	    xtype: 'pbsDataStoreContent',
+	    itemId: 'content',
+	    cbind: {
+		datastore: '{datastore}',
+	    },
+	},
+	{
+	    title: gettext('Prune & Garbage collection'),
+	    xtype: 'pbsDataStorePruneAndGC',
+	    itemId: 'prunegc',
 	    cbind: {
 		datastore: '{datastore}',
 	    },
diff --git a/www/DataStorePruneAndGC.js b/www/DataStorePruneAndGC.js
new file mode 100644
index 00000000..6ce33248
--- /dev/null
+++ b/www/DataStorePruneAndGC.js
@@ -0,0 +1,164 @@
+Ext.define('PBS.DataStorePruneAndGC', {
+    extend: 'Proxmox.grid.ObjectGrid',
+    alias: 'widget.pbsDataStorePruneAndGC',
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    cbindData: function(initial) {
+	let me = this;
+
+	me.datastore = encodeURIComponent(me.datastore);
+	me.url = `/api2/json/config/datastore/${me.datastore}`;
+	me.editorConfig = {
+	    url: `/api2/extjs/config/datastore/${me.datastore}`,
+	};
+	return {};
+    },
+
+    controller: {
+	xclass: 'Ext.app.ViewController',
+
+	edit: function() { this.getView().run_editor(); },
+
+	garbageCollect: function() {
+	    let me = this;
+	    let view = me.getView();
+	    Proxmox.Utils.API2Request({
+		url: `/admin/datastore/${view.datastore}/gc`,
+		method: 'POST',
+		failure: function(response) {
+		    Ext.Msg.alert(gettext('Error'), response.htmlStatus);
+		},
+		success: function(response, options) {
+		    Ext.create('Proxmox.window.TaskViewer', {
+			upid: response.result.data,
+		    }).show();
+		},
+	    });
+	},
+    },
+
+    tbar: [
+	{
+	    xtype: 'proxmoxButton',
+	    text: gettext('Edit'),
+	    disabled: true,
+	    handler: 'edit',
+	},
+	'-',
+	{
+	    xtype: 'proxmoxButton',
+	    text: gettext('Start GC'),
+	    selModel: null,
+	    handler: 'garbageCollect',
+	},
+    ],
+
+    listeners: {
+	activate: function() { this.rstore.startUpdate(); },
+	destroy: function() { this.rstore.stopUpdate(); },
+	deactivate: function() { this.rstore.stopUpdate(); },
+	itemdblclick: 'edit',
+    },
+
+    rows: {
+	"gc-schedule": {
+	    required: true,
+	    defaultValue: Proxmox.Utils.NoneText,
+	    header: gettext('GC Schedule'),
+	    editor: {
+		xtype: 'proxmoxWindowEdit',
+		title: gettext('GC Schedule'),
+		items: {
+		    xtype: 'pbsCalendarEvent',
+		    name: 'gc-schedule',
+		    fieldLabel: gettext("GC Schedule"),
+		    emptyText: Proxmox.Utils.noneText,
+		    deleteEmpty: true,
+		},
+	    },
+	},
+	"prune-schedule": {
+	    required: true,
+	    defaultValue: Proxmox.Utils.NoneText,
+	    header: gettext('Prune Schedule'),
+	    editor: {
+		xtype: 'proxmoxWindowEdit',
+		title: gettext('Prune Schedule'),
+		items: {
+		    xtype: 'pbsCalendarEvent',
+		    name: 'prune-schedule',
+		    fieldLabel: gettext("Prune Schedule"),
+		    emptyText: Proxmox.Utils.noneText,
+		    deleteEmpty: true,
+		},
+	    },
+	},
+	"keep-last": {
+	    required: true,
+	    header: gettext('Keep Last'),
+	    editor: {
+		xtype: 'proxmoxWindowEdit',
+		title: gettext('Prune Options'),
+		items: {
+		    xtype: 'pbsPruneInputPanel',
+		    isCreate: false,
+		},
+	    },
+	},
+	"keep-hourly": {
+	    required: true,
+	    header: gettext('Keep Hourly'),
+	    editor: {
+		xtype: 'proxmoxWindowEdit',
+		title: gettext('Prune Options'),
+		items: {
+		    xtype: 'pbsPruneInputPanel',
+		},
+	    },
+	},
+	"keep-daily": {
+	    required: true,
+	    header: gettext('Keep Daily'),
+	    editor: {
+		xtype: 'proxmoxWindowEdit',
+		title: gettext('Prune Options'),
+		items: {
+		    xtype: 'pbsPruneInputPanel',
+		},
+	    },
+	},
+	"keep-weekly": {
+	    required: true,
+	    header: gettext('Keep Weekly'),
+	    editor: {
+		xtype: 'proxmoxWindowEdit',
+		title: gettext('Prune Options'),
+		items: {
+		    xtype: 'pbsPruneInputPanel',
+		},
+	    },
+	},
+	"keep-monthly": {
+	    required: true,
+	    header: gettext('Keep Monthly'),
+	    editor: {
+		xtype: 'proxmoxWindowEdit',
+		title: gettext('Prune Options'),
+		items: {
+		    xtype: 'pbsPruneInputPanel',
+		},
+	    },
+	},
+	"keep-yearly": {
+	    required: true,
+	    header: gettext('Keep Yearly'),
+	    editor: {
+		xtype: 'proxmoxWindowEdit',
+		title: gettext('Prune Options'),
+		items: {
+		    xtype: 'pbsPruneInputPanel',
+		},
+	    },
+	},
+    },
+});
diff --git a/www/Makefile b/www/Makefile
index e04af930..afc240c5 100644
--- a/www/Makefile
+++ b/www/Makefile
@@ -40,6 +40,7 @@ JSSRC=							\
 	VersionInfo.js					\
 	SystemConfiguration.js				\
 	Subscription.js					\
+	DataStorePruneAndGC.js				\
 	DataStorePrune.js				\
 	DataStoreStatistic.js				\
 	DataStoreContent.js				\
diff --git a/www/window/DataStoreEdit.js b/www/window/DataStoreEdit.js
index ab2f3175..2499b54a 100644
--- a/www/window/DataStoreEdit.js
+++ b/www/window/DataStoreEdit.js
@@ -1,3 +1,81 @@
+Ext.define('PBS.panel.PruneInputPanel', {
+    extend: 'Proxmox.panel.InputPanel',
+    xtype: 'pbsPruneInputPanel',
+
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    cbindData: function() {
+	let me = this;
+	me.isCreate = !!me.isCreate;
+	return {};
+    },
+
+    column1: [
+	{
+	    xtype: 'proxmoxintegerfield',
+	    fieldLabel: gettext('Keep Last'),
+	    name: 'keep-last',
+	    cbind: {
+		deleteEmpty: '{!isCreate}',
+	    },
+	    minValue: 1,
+	    allowBlank: true,
+	},
+	{
+	    xtype: 'proxmoxintegerfield',
+	    fieldLabel: gettext('Keep Daily'),
+	    name: 'keep-daily',
+	    cbind: {
+		deleteEmpty: '{!isCreate}',
+	    },
+	    minValue: 1,
+	    allowBlank: true,
+	},
+	{
+	    xtype: 'proxmoxintegerfield',
+	    fieldLabel: gettext('Keep Monthly'),
+	    name: 'keep-monthly',
+	    cbind: {
+		deleteEmpty: '{!isCreate}',
+	    },
+	    minValue: 1,
+	    allowBlank: true,
+	},
+    ],
+    column2: [
+	{
+	    xtype: 'proxmoxintegerfield',
+	    fieldLabel: gettext('Keep Hourly'),
+	    name: 'keep-hourly',
+	    cbind: {
+		deleteEmpty: '{!isCreate}',
+	    },
+	    minValue: 1,
+	    allowBlank: true,
+	},
+	{
+	    xtype: 'proxmoxintegerfield',
+	    fieldLabel: gettext('Keep Weekly'),
+	    name: 'keep-weekly',
+	    cbind: {
+		deleteEmpty: '{!isCreate}',
+	    },
+	    minValue: 1,
+	    allowBlank: true,
+	},
+	{
+	    xtype: 'proxmoxintegerfield',
+	    fieldLabel: gettext('Keep Yearly'),
+	    name: 'keep-yearly',
+	    cbind: {
+		deleteEmpty: '{!isCreate}',
+	    },
+	    minValue: 1,
+	    allowBlank: true,
+	},
+    ],
+
+});
 Ext.define('PBS.DataStoreEdit', {
     extend: 'Proxmox.window.Edit',
     alias: 'widget.pbsDataStoreEdit',
@@ -88,72 +166,11 @@ Ext.define('PBS.DataStoreEdit', {
 	    },
 	    {
 		title: gettext('Prune Options'),
-		xtype: 'inputpanel',
+		xtype: 'pbsPruneInputPanel',
+		cbind: {
+		    isCreate: '{isCreate}',
+		},
 		onlineHelp: 'backup_pruning',
-		column1: [
-		    {
-			xtype: 'proxmoxintegerfield',
-			fieldLabel: gettext('Keep Last'),
-			name: 'keep-last',
-			cbind: {
-			    deleteEmpty: '{!isCreate}',
-			},
-			minValue: 1,
-			allowBlank: true,
-		    },
-		    {
-			xtype: 'proxmoxintegerfield',
-			fieldLabel: gettext('Keep Daily'),
-			name: 'keep-daily',
-			cbind: {
-			    deleteEmpty: '{!isCreate}',
-			},
-			minValue: 1,
-			allowBlank: true,
-		    },
-		    {
-			xtype: 'proxmoxintegerfield',
-			fieldLabel: gettext('Keep Monthly'),
-			name: 'keep-monthly',
-			cbind: {
-			    deleteEmpty: '{!isCreate}',
-			},
-			minValue: 1,
-			allowBlank: true,
-		    },
-		],
-		column2: [
-		    {
-			xtype: 'proxmoxintegerfield',
-			fieldLabel: gettext('Keep Hourly'),
-			name: 'keep-hourly',
-			cbind: {
-			    deleteEmpty: '{!isCreate}',
-			},
-			minValue: 1,
-			allowBlank: true,
-		    },
-		    {
-			xtype: 'proxmoxintegerfield',
-			fieldLabel: gettext('Keep Weekly'),
-			name: 'keep-weekly',
-			cbind: {
-			    deleteEmpty: '{!isCreate}',
-			},
-			minValue: 1,
-			allowBlank: true,
-		    },
-		    {
-			xtype: 'proxmoxintegerfield',
-			fieldLabel: gettext('Keep Yearly'),
-			name: 'keep-yearly',
-			cbind: {
-			    deleteEmpty: '{!isCreate}',
-			},
-			minValue: 1,
-			allowBlank: true,
-		    },
-		],
 	    },
 	],
     },
-- 
2.20.1