ui: add MetricServerView and use it

simple CRUD interface to show/add/edit/delete metric servers

it's a bit different from PVE's so it's harder to reuse that than to
copy it. If we need it again, we can still refactor and combine them.

introduce 'PBS.Schema' class to hold the server type/xtype mappings

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
Signed-off-by: Wolfgang Bumiller <w.bumiller@proxmox.com>

diff --git a/www/Makefile b/www/Makefile
index 3a36dabaaf1cf45e1f4373af09c285c2a2c86e28..4aa2b026b801d8f2148ad1e9b6bcdd61f66d1e21 100644 (file)
--- 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 (file)
index 0000000..dcd47a4
--- /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 cdc9de3547a768f41d9a1b7e40388284afbe85d7..ddb6ece5f8375a936ab3bc6d0a800ac432bda4e1 100644 (file)
--- 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 (file)
index 0000000..5aaf81b
--- /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());
+    },
+});