ui: add MetricServerView and use it

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

it's a bit different from PVE's so it's harder to reuse that than 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>
Signed-off-by: Wolfgang Bumiller <w.bumiller@proxmox.com>

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		\

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',
+	},
+    },
+});

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'),

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: !!id,
+		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());
+    },
+});