[pbs-devel] [PATCH v4 proxmox-backup 6/6] ui: add option to change the maintenance type

[Hannes Laimer <h.laimer@proxmox.com>]

---
The renderer is set in the init function because a context where view is
accessable was needed. Since only the renderer function needs this
context the rest of the 'maintenance-type' row is defined declaratively.
I also tried to somehow inject the active operations values into the
store, since its passed to the renderer function, but that seemed a little
'hacky'.

 www/Makefile                     |  1 +
 www/Utils.js                     | 23 ++++++++++
 www/datastore/OptionView.js      | 30 +++++++++++++
 www/window/MaintenanceOptions.js | 72 ++++++++++++++++++++++++++++++++
 4 files changed, 126 insertions(+)
 create mode 100644 www/window/MaintenanceOptions.js

diff --git a/www/Makefile b/www/Makefile
index 4aec6e2c..8f6b17ed 100644
--- a/www/Makefile
+++ b/www/Makefile
@@ -63,6 +63,7 @@ JSSRC=							\
 	window/BackupGroupChangeOwner.js		\
 	window/CreateDirectory.js			\
 	window/DataStoreEdit.js				\
+	window/MaintenanceOptions.js			\
 	window/NotesEdit.js				\
 	window/RemoteEdit.js				\
 	window/NotifyOptions.js				\
diff --git a/www/Utils.js b/www/Utils.js
index 36a94211..db23645a 100644
--- a/www/Utils.js
+++ b/www/Utils.js
@@ -640,4 +640,27 @@ Ext.define('PBS.Utils', {
 	return `${icon} ${value}`;
     },
 
+    renderMaintenance: function(type, activeTasks) {
+	if (!type) return gettext('None');
+	let at = 0;
+	for (let x of ['read-only-', 'offline-']) {
+	    if (type.startsWith(x)) {
+	        at = x.length;
+	    }
+	}
+
+	const conflictingTasks = activeTasks.write + (type.startsWith('offline') ? activeTasks.read : 0);
+	const checkmarkIcon = '<i class="fa fa-check"></i>';
+	const spinnerIcon = '<i class="fa fa-spinner fa-pulse fa-fw"></i>';
+	const conflictingTasksMessage = `<i>${conflictingTasks} conflicting tasks still active</i>`;
+	const extra = conflictingTasks > 0 ? `| ${spinnerIcon} ${conflictingTasksMessage}` : checkmarkIcon;
+
+	const mode = type.substring(0, at-1);
+	let msg = type.substring(at);
+	if (msg.length > 0) {
+	    msg = `"${msg}"`;
+	}
+	return Ext.String.capitalize(`${gettext(mode)} ${msg} ${extra}`) || gettext('None');
+    },
+
 });
diff --git a/www/datastore/OptionView.js b/www/datastore/OptionView.js
index 5a5e85be..50ccce47 100644
--- a/www/datastore/OptionView.js
+++ b/www/datastore/OptionView.js
@@ -1,3 +1,4 @@
+
 Ext.define('PBS.Datastore.Options', {
     extend: 'Proxmox.grid.ObjectGrid',
     xtype: 'pbsDatastoreOptionView',
@@ -6,6 +7,10 @@ Ext.define('PBS.Datastore.Options', {
     cbindData: function(initial) {
 	let me = this;
 
+	me.maintenanceActiveTasks = {
+	    read: 0,
+	    write: 0,
+	};
 	me.datastore = encodeURIComponent(me.datastore);
 	me.url = `/api2/json/config/datastore/${me.datastore}`;
 	me.editorConfig = {
@@ -18,6 +23,24 @@ Ext.define('PBS.Datastore.Options', {
     controller: {
 	xclass: 'Ext.app.ViewController',
 
+	init: function(view) {
+	    let me = this;
+	    me.callParent();
+	    view.rows['maintenance-type'].renderer =
+		(value) => PBS.Utils.renderMaintenance(value, view.maintenanceActiveTasks);
+
+	    me.activeOperationsRstore = Ext.create('Proxmox.data.ObjectStore', {
+		url: `/api2/json/admin/datastore/${view.datastore}/active-operations`,
+		interval: 3000,
+	    });
+	    me.activeOperationsRstore.startUpdate();
+
+	    view.mon(me.activeOperationsRstore, 'load', (store, data, success) => {
+		me.view.maintenanceActiveTasks.read = data[0].data.value;
+		me.view.maintenanceActiveTasks.write = data[1].data.value;
+	    });
+	},
+
 	edit: function() {
 	    this.getView().run_editor();
 	},
@@ -111,5 +134,12 @@ Ext.define('PBS.Datastore.Options', {
 		},
 	    },
 	},
+	"maintenance-type": {
+	    required: true,
+	    header: gettext('Maintenance mode'),
+	    editor: {
+		xtype: 'pbsMaintenanceOptionEdit',
+	    },
+	},
     },
 });
diff --git a/www/window/MaintenanceOptions.js b/www/window/MaintenanceOptions.js
new file mode 100644
index 00000000..374b69f6
--- /dev/null
+++ b/www/window/MaintenanceOptions.js
@@ -0,0 +1,72 @@
+Ext.define('PBS.form.oaintenanceType', {
+    extend: 'Proxmox.form.KVComboBox',
+    alias: 'widget.pbsMaintenanceType',
+
+    comboItems: [
+	['__default__', gettext('None')],
+	['read-only', gettext('Read only')],
+	['offline', gettext('Offline')],
+    ],
+});
+
+Ext.define('PBS.window.MaintenanceOptions', {
+    extend: 'Proxmox.window.Edit',
+    xtype: 'pbsMaintenanceOptionEdit',
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    subject: gettext('Maintenance mode'),
+
+    width: 450,
+    fieldDefaults: {
+	labelWidth: 120,
+    },
+
+    items: {
+	onGetValues: function(values) {
+	    console.log(values);
+	    if (values['maintenance-type']) {
+		values['maintenance-type'] =
+		    `${values['maintenance-type']}-${values['maintenance-msg'] || ''}`;
+	    }
+	    return values;
+	},
+	xtype: 'inputpanel',
+	items: [
+	    {
+		xtype: 'pbsMaintenanceType',
+		name: 'maintenance-type',
+		fieldLabel: gettext('Maintenance Type'),
+		value: '__default__',
+		deleteEmpty: true,
+	    },
+	    {
+		xtype: 'proxmoxtextfield',
+		name: 'maintenance-msg',
+		fieldLabel: gettext('Description'),
+	    },
+	],
+    },
+    setValues: function(values) {
+	let me = this;
+
+	let options = {
+	    'maintenance-type': '__default__',
+	    'maintenance-msg': '',
+	};
+	if (values['maintenance-type']) {
+	    let type = values['maintenance-type'];
+	    let at = 0;
+	    for (let x of ['read-only-', 'offline-']) {
+		if (type.startsWith(x)) {
+		    at = x.length;
+		}
+	    }
+	    options = {
+		'maintenance-type': type.substr(0, at-1) || '__default__',
+		'maintenance-msg': type.substr(at) || '',
+	    };
+	}
+
+	me.callParent([options]);
+    },
+});
-- 
2.30.2