[pve-devel] [PATCH manager 4/4] ui: add MetricServerView to Datacenter

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

adds ui support for configuring the External Metric servers.
for now, influxdb and graphite edit windows do not share code,
it would be ideal to do that once we add more plugins

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/manager6/Makefile               |   1 +
 www/manager6/dc/Config.js           |   6 +
 www/manager6/dc/MetricServerView.js | 397 ++++++++++++++++++++++++++++
 3 files changed, 404 insertions(+)
 create mode 100644 www/manager6/dc/MetricServerView.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 4fa8e1a3..a2514464 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -146,6 +146,7 @@ JSSRC= 							\
 	dc/TokenView.js					\
 	dc/UserEdit.js					\
 	dc/UserView.js					\
+	dc/MetricServerView.js				\
 	lxc/CmdMenu.js					\
 	lxc/Config.js					\
 	lxc/CreateWizard.js				\
diff --git a/www/manager6/dc/Config.js b/www/manager6/dc/Config.js
index 905c3dc0..2fdba743 100644
--- a/www/manager6/dc/Config.js
+++ b/www/manager6/dc/Config.js
@@ -231,6 +231,12 @@ Ext.define('PVE.dc.Config', {
 		list_refs_url: '/cluster/firewall/refs',
 		itemId: 'firewall-ipset'
 	    },
+	    {
+		xtype: 'pveMetricServerView',
+		title: gettext('Metric Server'),
+		iconCls: 'fa fa-bar-chart',
+		itemId: 'metricservers',
+	    },
 	    {
 		xtype: 'pveDcSupport',
 		title: gettext('Support'),
diff --git a/www/manager6/dc/MetricServerView.js b/www/manager6/dc/MetricServerView.js
new file mode 100644
index 00000000..894cd18a
--- /dev/null
+++ b/www/manager6/dc/MetricServerView.js
@@ -0,0 +1,397 @@
+Ext.define('PVE.dc.MetricServerView', {
+    extend: 'Ext.grid.Panel',
+    alias: ['widget.pveMetricServerView'],
+
+    stateful: true,
+    stateId: 'grid-metricserver',
+
+    controller: {
+	xclass: 'Ext.app.ViewController',
+
+	render_type: function(value) {
+	    switch(value) {
+		case 'influxdb': return "InfluxDB";
+		case 'graphite': return "Graphite";
+		default: break;
+	    }
+	    return Proxmox.Utils.unknownText;
+	},
+
+	addInfluxDB: function() {
+	    let me = this;
+	    Ext.create(`PVE.dc.InfluxDBEdit`, {
+		url: `/api2/extjs/cluster/metricserver`,
+		listeners: {
+		    destroy: function() {
+			me.reload();
+		    }
+		}
+	    }).show();
+	},
+
+	addGraphite: function() {
+	    let me = this;
+	    Ext.create(`PVE.dc.GraphiteEdit`, {
+		url: `/api2/extjs/cluster/metricserver`,
+		listeners: {
+		    destroy: function() {
+			me.reload();
+		    }
+		}
+	    }).show();
+	},
+
+	editServer: function() {
+	    let me = this;
+	    let view = me.getView();
+	    let selection = view.getSelection();
+	    if (!selection || selection.length < 1) { return; }
+
+	    let rec = selection[0];
+
+	    let xtype = me.render_type(rec.data.type);
+	    Ext.create(`PVE.dc.${xtype}Edit`, {
+		url: `/api2/extjs/cluster/metricserver/${rec.data.id}`,
+		serverid: rec.data.id,
+		listeners: {
+		    destroy: function() {
+			me.reload();
+		    }
+		}
+	    }).show();
+	},
+
+	reload: function() { this.getView().getStore().load(); },
+    },
+
+    store: {
+	autoLoad: true,
+	id: 'metricservers',
+	proxy: {
+	    type: 'proxmox',
+	    url: '/api2/json/cluster/metricserver',
+	},
+    },
+
+    columns: [
+	{
+	    text: gettext('Name'),
+	    flex: 1,
+	    dataIndex: 'id',
+	},
+	{
+	    text: gettext('Type'),
+	    flex: 1,
+	    dataIndex: 'type',
+	    renderer: 'render_type',
+	},
+	{
+	    text: gettext('Enabled'),
+	    dataIndex: 'disable',
+	    width: 100,
+	    renderer: Proxmox.Utils.format_neg_boolean,
+	},
+	{
+	    text: gettext('Server'),
+	    flex: 1,
+	    dataIndex: 'server',
+	},
+	{
+	    text: gettext('Port'),
+	    flex: 1,
+	    dataIndex: 'port',
+	},
+    ],
+
+    tbar: [
+	{
+	    text: gettext('Add'),
+	    menu: [
+		{
+		    text: 'Graphite',
+		    handler: 'addGraphite',
+		},
+		{
+		    text: 'InfluxDB',
+		    handler: 'addInfluxDB',
+		},
+	    ]
+	},
+	{
+	    text: gettext('Edit'),
+	    xtype: 'proxmoxButton',
+	    handler: 'editServer',
+	    disabled: true,
+	},
+	{
+	    xtype: 'proxmoxStdRemoveButton',
+	    baseurl: `/api2/extjs/cluster/metricserver`,
+	    callback: 'reload',
+	}
+    ],
+
+    listeners: {
+	itemdblclick: 'editServer',
+    },
+
+    initComponent : function() {
+	var me = this;
+
+	me.callParent();
+
+	Proxmox.Utils.monStoreErrors(me, me.getStore());
+    }
+});
+
+Ext.define('PVE.dc.InfluxDBEdit', {
+    extend: 'Proxmox.window.Edit',
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    subject: 'InfluxDB',
+
+    cbindData: function() {
+	let me = this;
+	me.isCreate = !me.serverid;
+	me.serverid = me.serverid || "";
+	me.method = me.isCreate ? 'POST' : 'PUT';
+	if (!me.isCreate) {
+	    me.subject = `InfluxDB: ${me.serverid}`;
+	}
+	return {};
+    },
+
+    items: [
+	{
+	    xtype: 'inputpanel',
+
+	    onGetValues: function(values) {
+		values.disable = values.enable ? 0 : 1;
+		delete values.enable;
+		return values;
+	    },
+
+	    column1: [
+		{
+		    xtype: 'hidden',
+		    name: 'type',
+		    value: 'influxdb',
+		    cbind: {
+			submitValue: '{isCreate}',
+		    },
+		},
+		{
+		    fieldLabel: gettext('Name'),
+		    xtype: 'pmxDisplayEditField',
+		    name: 'id',
+		    allowBlank: false,
+		    cbind: {
+			editable: '{isCreate}',
+			value: '{serverid}',
+		    },
+		},
+		{
+		    fieldLabel: gettext('Enabled'),
+		    xtype: 'checkbox',
+		    inputValue: 1,
+		    uncheckedValue: 0,
+		    checked: true,
+		    name: 'enable',
+		},
+	    ],
+
+	    column2: [
+		{
+		    fieldLabel: gettext('Server'),
+		    xtype: 'proxmoxtextfield',
+		    name: 'server',
+		    allowBlank: false,
+		},
+		{
+		    fieldLabel: gettext('Port'),
+		    xtype: 'proxmoxintegerfield',
+		    minValue: 1,
+		    maximum: 65536,
+		    name: 'port',
+		    allowBlank: false,
+		},
+	    ],
+
+	    advancedColumn1: [], // has to exists to render any advanced columns
+
+	    advancedColumn2: [
+		{
+		    fieldLabel: 'MTU',
+		    xtype: 'proxmoxintegerfield',
+		    name: 'mtu',
+		    minValue: 1,
+		    emptyText: '1500',
+		    submitEmpty: false,
+		    cbind: {
+			deleteEmpty: '{!isCreate}',
+		    },
+		},
+	    ]
+	},
+    ],
+
+    initComponent: function() {
+	let me = this;
+	me.callParent();
+	if (!me.serverid) { return; }
+
+	me.load({
+	    success: function(response, options) {
+		let values = response.result.data;
+		values.enable = !values.disable;
+		me.down('inputpanel').setValues(values);
+	    }
+	})
+    }
+});
+
+Ext.define('PVE.dc.GraphiteEdit', {
+    extend: 'Proxmox.window.Edit',
+    mixins: ['Proxmox.Mixin.CBind'],
+
+    subject: 'Graphite',
+
+    cbindData: function() {
+	let me = this;
+	me.isCreate = !me.serverid;
+	me.serverid = me.serverid || "";
+	me.method = me.isCreate ? 'POST' : 'PUT';
+	if (!me.isCreate) {
+	    me.subject = `Graphite: ${me.serverid}`;
+	}
+	return {};
+    },
+
+    items: [
+	{
+	    xtype: 'inputpanel',
+
+	    onGetValues: function(values) {
+		values.disable = values.enable ? 0 : 1;
+		delete values.enable;
+		return values;
+	    },
+
+	    column1: [
+		{
+		    xtype: 'hidden',
+		    name: 'type',
+		    value: 'graphite',
+		    cbind: {
+			submitValue: '{isCreate}',
+		    },
+		},
+		{
+		    fieldLabel: gettext('Name'),
+		    xtype: 'pmxDisplayEditField',
+		    name: 'id',
+		    allowBlank: false,
+		    cbind: {
+			editable: '{isCreate}',
+			value: '{serverid}',
+		    },
+		},
+		{
+		    fieldLabel: gettext('Enabled'),
+		    xtype: 'checkbox',
+		    inputValue: 1,
+		    uncheckedValue: 0,
+		    checked: true,
+		    name: 'enable',
+		},
+	    ],
+
+	    column2: [
+		{
+		    fieldLabel: gettext('Server'),
+		    xtype: 'proxmoxtextfield',
+		    name: 'server',
+		    allowBlank: false,
+		},
+		{
+		    fieldLabel: gettext('Port'),
+		    xtype: 'proxmoxintegerfield',
+		    minimum: 1,
+		    maximum: 65536,
+		    name: 'port',
+		    allowBlank: false,
+		},
+		{
+		    fieldLabel: gettext('Path'),
+		    xtype: 'proxmoxtextfield',
+		    emptyText: 'proxmox',
+		    name: 'path',
+		    cbind: {
+			deleteEmpty: '{!isCreate}',
+		    },
+		}
+	    ],
+
+	    advancedColumn1: [
+		{
+		    fieldLabel: gettext('Protocol'),
+		    xtype: 'proxmoxKVComboBox',
+		    name: 'proto',
+		    value: '__default__',
+		    cbind: {
+			deleteEmpty: '{!isCreate}',
+		    },
+		    comboItems: [
+			['__default__', 'UDP'],
+			['tcp', 'TCP'],
+		    ],
+		    listeners: {
+			change: function(field, value) {
+			    let me = this;
+			    me.up('inputpanel').down('field[name=timeout]').setDisabled(value !== 'tcp');
+			    me.up('inputpanel').down('field[name=mtu]').setDisabled(value === 'tcp');
+			},
+		    },
+		},
+	    ],
+
+	    advancedColumn2: [
+		{
+		    fieldLabel: 'MTU',
+		    xtype: 'proxmoxintegerfield',
+		    name: 'mtu',
+		    minimum: 1,
+		    emptyText: '1500',
+		    submitEmpty: false,
+		    cbind: {
+			deleteEmpty: '{!isCreate}',
+		    },
+		},
+		{
+		    fieldLabel: gettext('TCP Timeout'),
+		    xtype: 'proxmoxintegerfield',
+		    name: 'timeout',
+		    disabled: true,
+		    cbind: {
+			deleteEmpty: '{!isCreate}',
+		    },
+		    minValue: 1,
+		    emptyText: 1,
+		},
+	    ],
+	},
+    ],
+
+    initComponent: function() {
+	let me = this;
+	me.callParent();
+	if (!me.serverid) { return; }
+
+	me.load({
+	    success: function(response, options) {
+		let values = response.result.data;
+		values.enable = !values.disable;
+		me.down('inputpanel').setValues(values);
+	    }
+	})
+    }
+});
-- 
2.20.1