ui: add MetricServerView to Datacenter

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>

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 49b4d5eee3dd9de1800d758ff1209a65d0f8197a..9e6e56efc62419179527196a0106ec4b71dd9425 100644 (file)
--- 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 905c3dc0f15a6afddf5f56f466d51c216e0dfe3a..2fdba743fcf328130ff82620ef80262dea7b7c47 100644 (file)
--- 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 (file)
index 0000000..7777c31
--- /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);
+           },
+       });
+    },
+});