From f7ff48ded4c2f5954c97b2ad5d07e3639cf93e6c Mon Sep 17 00:00:00 2001
From: Dominik Csapak <d.csapak@proxmox.com>
Date: Fri, 10 Jun 2022 13:17:57 +0200
Subject: [PATCH] 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                   |   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..5aaf81b6
--- /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: !!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());
+    },
+});