From mboxrd@z Thu Jan 1 00:00:00 1970
Return-Path: <d.csapak@proxmox.com>
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) server-digest SHA256)
(No client certificate requested)
by lists.proxmox.com (Postfix) with ESMTPS id F1FCD617C1
for <pve-devel@lists.proxmox.com>; Fri, 20 Nov 2020 15:12:30 +0100 (CET)
Received: from firstgate.proxmox.com (localhost [127.0.0.1])
by firstgate.proxmox.com (Proxmox) with ESMTP id E56FA129B7
for <pve-devel@lists.proxmox.com>; Fri, 20 Nov 2020 15:12:30 +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 95C03129AE
for <pve-devel@lists.proxmox.com>; Fri, 20 Nov 2020 15:12:29 +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 5CFA343D35
for <pve-devel@lists.proxmox.com>; Fri, 20 Nov 2020 15:12:29 +0100 (CET)
From: Dominik Csapak <d.csapak@proxmox.com>
To: pve-devel@lists.proxmox.com
Date: Fri, 20 Nov 2020 15:12:28 +0100
Message-Id: <20201120141228.24005-3-d.csapak@proxmox.com>
X-Mailer: git-send-email 2.20.1
In-Reply-To: <20201120141228.24005-1-d.csapak@proxmox.com>
References: <20201120141228.24005-1-d.csapak@proxmox.com>
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit
X-SPAM-LEVEL: Spam detection results: 0
AWL 0.330 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 v2 2/2] 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 <pve-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pve-devel>,
<mailto:pve-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/pve-devel/>
List-Post: <mailto:pve-devel@lists.proxmox.com>
List-Help: <mailto:pve-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel>,
<mailto:pve-devel-request@lists.proxmox.com?subject=subscribe>
X-List-Received-Date: Fri, 20 Nov 2020 14:12:31 -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 <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..7777c313
--- /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: return Proxmox.Utils.unknownText;
+ }
+ },
+
+ addInfluxDB: function() {
+ let me = this;
+ Ext.create(`PVE.dc.InfluxDBEdit`, {
+ url: `/api2/extjs/cluster/metricserver`,
+ autoShow: true,
+ listeners: {
+ destroy: () => me.reload(),
+ },
+ });
+ },
+
+ addGraphite: function() {
+ let me = this;
+ Ext.create(`PVE.dc.GraphiteEdit`, {
+ url: `/api2/extjs/cluster/metricserver`,
+ autoShow: true,
+ listeners: {
+ destroy: () => me.reload(),
+ },
+ });
+ },
+
+ 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,
+ autoShow: true,
+ listeners: {
+ destroy: () => me.reload(),
+ },
+ });
+ },
+
+ reload: function() {
+ this.getView().getStore().load();
+ },
+ },
+
+ store: {
+ autoLoad: true,
+ id: 'metricservers',
+ proxy: {
+ type: 'proxmox',
+ url: '/api2/json/cluster/metricserver',
+ },
+ },
+
+ columns: [
+ {
+ text: gettext('Name'),
+ flex: 2,
+ 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'),
+ width: 200,
+ dataIndex: 'server',
+ },
+ {
+ text: gettext('Port'),
+ width: 100,
+ 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