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()); + }, +});