From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by lists.proxmox.com (Postfix) with ESMTPS id 44BD061564 for ; Fri, 20 Nov 2020 10:50:52 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 34910F6EA for ; Fri, 20 Nov 2020 10:50:52 +0100 (CET) Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com [212.186.127.180]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with ESMTPS id C449AF6D7 for ; Fri, 20 Nov 2020 10:50:50 +0100 (CET) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 8D87343CE5 for ; Fri, 20 Nov 2020 10:50:50 +0100 (CET) From: Dominik Csapak To: pve-devel@lists.proxmox.com Date: Fri, 20 Nov 2020 10:50:49 +0100 Message-Id: <20201120095049.15194-5-d.csapak@proxmox.com> X-Mailer: git-send-email 2.20.1 In-Reply-To: <20201120095049.15194-1-d.csapak@proxmox.com> References: <20201120095049.15194-1-d.csapak@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL 0.332 Adjusted score from AWL reputation of From: address KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment RCVD_IN_DNSWL_MED -2.3 Sender listed at https://www.dnswl.org/, medium trust SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record URIBL_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to URIBL was blocked. See http://wiki.apache.org/spamassassin/DnsBlocklists#dnsbl-block for more information. [data.id] Subject: [pve-devel] [PATCH manager 4/4] ui: add MetricServerView to Datacenter X-BeenThere: pve-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox VE development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Fri, 20 Nov 2020 09:50:52 -0000 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 --- 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