[pbs-devel] [PATCH proxmox-backup v8 7/7] ui: add MetricServerView and use it

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

simple CRUD interface to show/add/edit/delete metric servers

it's a bit different from PVE's so that it's harder to reuse that to
copy it. If we need it again, we can still refactor and combine them.

introduce 'PBS.Schema' class to hold the server type/xtype mappings

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/Makefile                   |   2 +
 www/Schema.js                  |  15 ++++
 www/SystemConfiguration.js     |   6 ++
 www/config/MetricServerView.js | 128 +++++++++++++++++++++++++++++++++
 4 files changed, 151 insertions(+)
 create mode 100644 www/Schema.js
 create mode 100644 www/config/MetricServerView.js

diff --git a/www/Makefile b/www/Makefile
index 3a36daba..4aa2b026 100644
--- a/www/Makefile
+++ b/www/Makefile
@@ -36,6 +36,7 @@ TAPE_UI_FILES=						\
 
 JSSRC=							\
 	Utils.js					\
+	Schema.js					\
 	form/TokenSelector.js				\
 	form/AuthidSelector.js				\
 	form/RemoteSelector.js				\
@@ -62,6 +63,7 @@ JSSRC=							\
 	config/WebauthnView.js				\
 	config/CertificateView.js			\
 	config/NodeOptionView.js			\
+	config/MetricServerView.js			\
 	window/ACLEdit.js				\
 	window/BackupFileDownloader.js			\
 	window/BackupGroupChangeOwner.js		\
diff --git a/www/Schema.js b/www/Schema.js
new file mode 100644
index 00000000..dcd47a4a
--- /dev/null
+++ b/www/Schema.js
@@ -0,0 +1,15 @@
+Ext.define('PBS.Schema', {
+
+    singleton: true,
+
+    metricServer: {
+	'influxdb-http': {
+	    type: 'InfluxDB (HTTP)',
+	    xtype: 'InfluxDbHttp',
+	},
+	'influxdb-udp': {
+	    type: 'InfluxDB (UDP)',
+	    xtype: 'InfluxDbUdp',
+	},
+    },
+});
diff --git a/www/SystemConfiguration.js b/www/SystemConfiguration.js
index cdc9de35..ddb6ece5 100644
--- a/www/SystemConfiguration.js
+++ b/www/SystemConfiguration.js
@@ -45,6 +45,12 @@ Ext.define('PBS.SystemConfiguration', {
 		},
 	    ],
 	},
+	{
+	    title: gettext('Metric Server'),
+	    iconCls: 'fa fa-bar-chart',
+	    xtype: 'pbsMetricServerView',
+	    itemId: 'metrics',
+	},
 	{
 	    xtype: 'panel',
 	    title: gettext('Other'),
diff --git a/www/config/MetricServerView.js b/www/config/MetricServerView.js
new file mode 100644
index 00000000..11ae16d7
--- /dev/null
+++ b/www/config/MetricServerView.js
@@ -0,0 +1,128 @@
+Ext.define('PBS.config.MetricServerView', {
+    extend: 'Ext.grid.Panel',
+    alias: ['widget.pbsMetricServerView'],
+
+    stateful: true,
+    stateId: 'grid-metricserver',
+
+    controller: {
+	xclass: 'Ext.app.ViewController',
+
+	editWindow: function(xtype, id) {
+	    let me = this;
+	    Ext.create(`PBS.window.${xtype}Edit`, {
+		serverid: id,
+		autoShow: true,
+		autoLoad: true,
+		listeners: {
+		    destroy: () => me.reload(),
+		},
+	    });
+	},
+
+	addServer: function(button) {
+	    this.editWindow(PBS.Schema.metricServer[button.type]?.xtype);
+	},
+
+	editServer: function() {
+	    let me = this;
+	    let view = me.getView();
+	    let selection = view.getSelection();
+	    if (!selection || selection.length < 1) {
+		return;
+	    }
+
+	    let cfg = selection[0].data;
+
+	    me.editWindow(PBS.Schema.metricServer[cfg.type]?.xtype, cfg.name);
+	},
+
+	reload: function() {
+	    this.getView().getStore().load();
+	},
+    },
+
+    store: {
+	autoLoad: true,
+	id: 'metricservers',
+	proxy: {
+	    type: 'proxmox',
+	    url: '/api2/json/admin/metrics',
+	},
+    },
+
+    columns: [
+	{
+	    text: gettext('Name'),
+	    flex: 2,
+	    dataIndex: 'name',
+	},
+	{
+	    text: gettext('Type'),
+	    width: 150,
+	    dataIndex: 'type',
+	    renderer: (v) => PBS.Schema.metricServer[v]?.type ?? v,
+	},
+	{
+	    text: gettext('Enabled'),
+	    dataIndex: 'disable',
+	    width: 100,
+	    renderer: Proxmox.Utils.format_neg_boolean,
+	},
+	{
+	    text: gettext('Target Server'),
+	    width: 200,
+	    dataIndex: 'server',
+	},
+	{
+	    text: gettext('Comment'),
+	    flex: 3,
+	    dataIndex: 'comment',
+	    renderer: Ext.htmlEncode,
+	},
+    ],
+
+    tbar: [
+	{
+	    text: gettext('Add'),
+	    menu: [
+		{
+		    text: 'InfluxDB (HTTP)',
+		    type: 'influxdb-http',
+		    iconCls: 'fa fa-fw fa-bar-chart',
+		    handler: 'addServer',
+		},
+		{
+		    text: 'InfluxDB (UDP)',
+		    type: 'influxdb-udp',
+		    iconCls: 'fa fa-fw fa-bar-chart',
+		    handler: 'addServer',
+		},
+	    ],
+	},
+	{
+	    text: gettext('Edit'),
+	    xtype: 'proxmoxButton',
+	    handler: 'editServer',
+	    disabled: true,
+	},
+	{
+	    xtype: 'proxmoxStdRemoveButton',
+	    getUrl: (rec) => `/api2/extjs/config/metrics/${rec.data.type}/${rec.data.name}`,
+	    getRecordName: (rec) => rec.data.name,
+	    callback: 'reload',
+	},
+    ],
+
+    listeners: {
+	itemdblclick: 'editServer',
+    },
+
+    initComponent: function() {
+	var me = this;
+
+	me.callParent();
+
+	Proxmox.Utils.monStoreErrors(me, me.getStore());
+    },
+});
-- 
2.30.2