@theotherwillembotha/node-red-nginxproxymanager 0.1.0 → 0.4.0

package/build/Nodes.html

@@ -7,113 +7,110 @@
     You have been warned.
     
 -->
-
 <!-- ui-helper -->
-<style>
-    /* ─── PluginCore Dialog overlay ─────────────────────────────────────────── */
-    .plugincore-overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.5);
-      z-index: 2000;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
+        
 
-    .plugincore-dialog {
-      background: #fff;
-      border: 1px solid #aaa;
-      border-radius: 4px;
-      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
-      min-width: 540px;
-      max-width: 85vw;
-      max-height: 80vh;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-    }
+<style>
+/* ─── PluginCore Dialog overlay ─────────────────────────────────────────── */
+
+.plugincore-overlay {
+    position: fixed;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 2000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
 
-    /* Title bar — matches Node-RED's main nav bar colour */
-    .plugincore-dialog-titlebar {
-      display: flex;
-      align-items: center;
-      background: #3d3d3d;
-      color: #fff;
-      padding: 6px 8px 6px 12px;
-      flex-shrink: 0;
-    }
+.plugincore-dialog {
+    background: #fff;
+    border: 1px solid #aaa;
+    border-radius: 4px;
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
+    min-width: 540px;
+    max-width: 85vw;
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
 
-    .plugincore-dialog-title {
-      flex: 1;
-      font-weight: 600;
-      font-size: 13px;
-    }
+/* Title bar - matches Node-RED's main nav bar colour */
+.plugincore-dialog-titlebar {
+    display: flex;
+    align-items: center;
+    background: #3d3d3d;
+    color: #fff;
+    padding: 6px 8px 6px 12px;
+    flex-shrink: 0;
+}
 
-    /* Close button — jQuery UI styling as used in Node-RED dialogs */
-    .plugincore-dialog-close {
-      color: #ccc !important;
-      background: transparent !important;
-      border-color: transparent !important;
-    }
+.plugincore-dialog-title {
+    flex: 1;
+    font-weight: 600;
+    font-size: 13px;
+}
 
-    .plugincore-dialog-close:hover {
-      color: #fff !important;
-      background: rgba(255, 255, 255, 0.15) !important;
-      border-color: rgba(255, 255, 255, 0.3) !important;
-    }
+/* Close button - jQuery UI styling as used in Node-RED dialogs */
+.plugincore-dialog-close {
+    color: #ccc !important;
+    background: transparent !important;
+    border-color: transparent !important;
+}
 
-    /* Scrollable body that contains the jQuery UI tab widget */
-    .plugincore-dialog-body {
-      flex: 1;
-      overflow: auto;
-      padding: 10px;
-    }
+.plugincore-dialog-close:hover {
+    color: #fff !important;
+    background: rgba(255, 255, 255, 0.15) !important;
+    border-color: rgba(255, 255, 255, 0.3) !important;
+}
 
-    /* ─── PluginCore Table ───────────────────────────────────────────────────── */
-    .plugincore-table {
-      width: 100%;
-      border-collapse: collapse;
-      font-size: 12px;
-    }
+/* Scrollable body that contains the jQuery UI tab widget or plain content */
+.plugincore-dialog-body {
+    flex: 1 1 auto;
+    overflow: auto;
+    padding: 10px;
+}
 
-    .plugincore-table th {
-      background: #f3f3f3;
-      border: 1px solid #ddd;
-      padding: 5px 10px;
-      text-align: left;
-      font-weight: 600;
-      white-space: nowrap;
-    }
+/* ─── PluginCore Table ───────────────────────────────────────────────────── */
 
-    .plugincore-table td {
-      border: 1px solid #eee;
-      padding: 5px 10px;
-      vertical-align: middle;
-    }
+.plugincore-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 12px;
+}
 
-    .plugincore-table tbody tr:nth-child(even) td {
-      background: #fafafa;
-    }
+.plugincore-table th {
+    background: #f3f3f3;
+    border: 1px solid #ddd;
+    padding: 5px 10px;
+    text-align: left;
+    font-weight: 600;
+    white-space: nowrap;
+}
 
-    .plugincore-table tbody tr:hover td {
-      background: #f0f6ff;
-    }
+.plugincore-table td {
+    border: 1px solid #eee;
+    padding: 5px 10px;
+    vertical-align: middle;
+}
 
-    .plugincore-status-enabled {
-      color: #27ae60;
-    }
+.plugincore-table tbody tr:nth-child(even) td {
+    background: #fafafa;
+}
 
-    .plugincore-status-disabled {
-      color: #c0392b;
-    }
+.plugincore-table tbody tr:hover td {
+    background: #f0f6ff;
+}
 
+.plugincore-status-enabled  { color: #27ae60; }
+.plugincore-status-disabled { color: #c0392b; }
 </style>
+
 <script type="text/javascript">
+
     window.PluginCore = window.PluginCore || {};
+
     /**
      * PluginCore.table(config) → jQuery <table>
      *
@@ -123,108 +120,248 @@
      * }
      */
     PluginCore.table = function(config) {
-      var $table = $('<table class="plugincore-table">');
-      // Header
-      var $thead = $('<thead>');
-      var $hr = $('<tr>');
-      config.columns.forEach(function(col) {
-        $hr.append($('<th>').text(col.label));
-      });
-      $thead.append($hr);
-      $table.append($thead);
-      // Body
-      var $tbody = $('<tbody>');
-      (config.rows || []).forEach(function(row) {
-        var $tr = $('<tr>');
+        var $table = $('<table class="plugincore-table">');
+
+        // Header
+        var $thead = $('<thead>');
+        var $hr = $('<tr>');
         config.columns.forEach(function(col) {
-          var $td = $('<td>');
-          var val = row[col.key];
-          if (col.render) {
-            var rendered = col.render(val, row);
-            if (rendered && typeof rendered === 'object' && rendered.jquery) {
-              $td.append(rendered);
-            } else {
-              $td.html(rendered != null ? String(rendered) : '');
-            }
-          } else {
-            $td.text(val != null ? String(val) : '');
-          }
-          $tr.append($td);
+            $hr.append($('<th>').text(col.label));
         });
-        $tbody.append($tr);
-      });
-      $table.append($tbody);
-      return $table;
+        $thead.append($hr);
+        $table.append($thead);
+
+        // Body
+        var $tbody = $('<tbody>');
+        (config.rows || []).forEach(function(row) {
+            var $tr = $('<tr>');
+            config.columns.forEach(function(col) {
+                var $td = $('<td>');
+                var val = row[col.key];
+                if (col.render) {
+                    var rendered = col.render(val, row);
+                    if (rendered && typeof rendered === 'object' && rendered.jquery) {
+                        $td.append(rendered);
+                    } else {
+                        $td.html(rendered != null ? String(rendered) : '');
+                    }
+                } else {
+                    $td.text(val != null ? String(val) : '');
+                }
+                $tr.append($td);
+            });
+            $tbody.append($tr);
+        });
+        $table.append($tbody);
+
+        return $table;
     };
+
+    /**
+     * PluginCore.tabs(tabs) → jQuery element
+     *
+     * tabs: [{ label: string, render($container) }]
+     *
+     * Builds and returns a jQuery UI tab widget element.
+     * Can be embedded in any container, including inside PluginCore.dialog render().
+     */
+    PluginCore.tabs = function(tabs) {
+        var uid     = 'plugincore-tabs-' + Date.now();
+        var $tabsEl = $('<div>').attr('id', uid);
+        var $ul     = $('<ul>');
+
+        (tabs || []).forEach(function(tab, i) {
+            var paneId = uid + '-pane-' + i;
+            $ul.append(
+                $('<li>').append($('<a>').attr('href', '#' + paneId).text(tab.label))
+            );
+            var $pane = $('<div>').attr('id', paneId);
+            if (tab.render) { tab.render($pane); }
+            $tabsEl.append($pane);
+        });
+
+        $tabsEl.prepend($ul);
+        $tabsEl.tabs();
+
+        return $tabsEl;
+    };
+
     /**
      * PluginCore.dialog(options) → { close() }
      *
      * options: {
-     *   title : string,
-     *   tabs  : [{ label: string, render($container) }]
+     *   title  : string,
+     *   render : function($container)              - simple dialog; body passed directly
+     *   tabs   : [{ label: string, render($c) }]  - tabbed dialog; delegates to PluginCore.tabs
      * }
      *
-     * Uses jQuery UI tabs for the tab widget (already bundled with Node-RED).
+     * render and tabs can coexist: render is called first, then the tab widget is appended.
      * Closes on: close button click, overlay click, or Escape key.
      */
     PluginCore.dialog = function(options) {
-      // Only one dialog at a time
-      $('.plugincore-overlay').remove();
-      var uid = 'plugincore-' + Date.now();
-      var $overlay = $('<div class="plugincore-overlay">');
-      var $dialog = $('<div class="plugincore-dialog">');
-      // ── Title bar ──────────────────────────────────────────────────────
-      var $titlebar = $('<div class="plugincore-dialog-titlebar">');
-      $titlebar.append($('<span class="plugincore-dialog-title">').text(options.title || ''));
-      var $closeBtn = $('<button type="button" class="ui-button ui-corner-all ui-widget plugincore-dialog-close" title="Close">' + '<span class="ui-icon ui-icon-closethick"></span></button>');
-      $titlebar.append($closeBtn);
-      // ── Body + jQuery UI tabs ──────────────────────────────────────────
-      var $body = $('<div class="plugincore-dialog-body">');
-      var $tabsEl = $('<div>').attr('id', uid + '-tabs');
-      var $ul = $('<ul>');
-      (options.tabs || []).forEach(function(tab, i) {
-        var paneId = uid + '-pane-' + i;
-        $ul.append($('<li>').append($('<a>').attr('href', '#' + paneId).text(tab.label)));
-        var $pane = $('<div>').attr('id', paneId);
-        if (tab.render) {
-          tab.render($pane);
+        // Only one dialog at a time
+        $('.plugincore-overlay').remove();
+
+        var uid = 'plugincore-' + Date.now();
+
+        var $overlay = $('<div class="plugincore-overlay">');
+        var $dialog  = $('<div class="plugincore-dialog">');
+
+        // ── Title bar ──────────────────────────────────────────────────────
+        var $titlebar = $('<div class="plugincore-dialog-titlebar">');
+        $titlebar.append(
+            $('<span class="plugincore-dialog-title">').text(options.title || '')
+        );
+        var $closeBtn = $(
+            '<button type="button" class="ui-button ui-corner-all ui-widget plugincore-dialog-close" title="Close">' +
+            '<span class="ui-icon ui-icon-closethick"></span></button>'
+        );
+        $titlebar.append($closeBtn);
+
+        // ── Body ──────────────────────────────────────────────────────────
+        var $body = $('<div class="plugincore-dialog-body">');
+
+        if (options.render) { options.render($body); }
+        if (options.tabs)   { $body.append(PluginCore.tabs(options.tabs)); }
+
+        // ── Assemble ───────────────────────────────────────────────────────
+        $dialog.append($titlebar).append($body);
+        $overlay.append($dialog);
+        $('body').append($overlay);
+
+        // ── Close logic ───────────────────────────────────────────────────
+        var escNs = 'keydown.plugincore-dialog-' + uid;
+
+        function close() {
+            $overlay.fadeOut(150, function() { $overlay.remove(); });
+            $(document).off(escNs);
         }
-        $tabsEl.append($pane);
-      });
-      $tabsEl.prepend($ul);
-      $body.append($tabsEl);
-      // ── Assemble ───────────────────────────────────────────────────────
-      $dialog.append($titlebar).append($body);
-      $overlay.append($dialog);
-      $('body').append($overlay);
-      // Initialise jQuery UI tabs (bundled with Node-RED)
-      $tabsEl.tabs();
-      // ── Close logic ───────────────────────────────────────────────────
-      var escNs = 'keydown.plugincore-dialog-' + uid;
-
-      function close() {
-        $overlay.fadeOut(150, function() {
-          $overlay.remove();
+
+        $closeBtn.on('click', close);
+        $overlay.on('click', function(e) {
+            if ($(e.target).is($overlay)) { close(); }
         });
-        $(document).off(escNs);
-      }
-      $closeBtn.on('click', close);
-      $overlay.on('click', function(e) {
-        if ($(e.target).is($overlay)) {
-          close();
-        }
-      });
-      $(document).on(escNs, function(e) {
-        if (e.key === 'Escape') {
-          close();
-        }
-      });
-      return {
-        close: close
-      };
+        $(document).on(escNs, function(e) {
+            if (e.key === 'Escape') { close(); }
+        });
+
+        return { close: close };
     };
 
 </script>
+
+
+        
+<!-- UpdateNginxHostNode -->
+        
+    <style>
+        .node_label_white {
+            fill:white
+        }
+    </style>
+
+        
+<!-- logger -->
+        
+<style>
+  .editorgroupborder {
+      border-width:1px;
+      border-style:solid;
+      border-color:lightgray;
+      padding: 3px;
+      margin-top: 2px;
+      margin-bottom: 2px;
+  }
+
+  .editorsectionheading {
+      font-weight: 600;
+      margin-bottom:1px !important; 
+      margin-top:6px !important; 
+  }
+
+  .nomargin {
+      margin-bottom:1px !important; 
+      margin-top:1px !important; 
+  }
+
+  .slidecontainer {
+    width: 100%;
+  }
+
+  .slider {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: 25px;
+    background: #d3d3d3;
+    outline: none;
+    opacity: 0.7;
+    -webkit-transition: .2s;
+    transition: opacity .2s;
+  }
+  
+  .slider:hover {
+    opacity: 1;
+  }
+  
+  .slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 25px;
+    height: 25px;
+    background: #04AA6D;
+    cursor: pointer;
+  }
+  
+  .slider::-moz-range-thumb {
+    width: 25px;
+    height: 25px;
+    background: #04AA6D;
+    cursor: pointer;
+  }
+
+    .towb_editorlabel {
+        width: 120px !important;
+    }
+    input.towb_editorfield, select.towb_editorfield, textarea.towb_editorfield {
+        width: 70% !important;
+    }
+    input.towb_editorfield_short, select.towb_editorfield_short {
+        width: 30% !important;
+    }
+
+</style>
+
+<script type="text/javascript">
+
+    // CSS
+    dropdownStyles = `
+    .loggertype-dropdown {
+        position: absolute;
+        background: white;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+        max-height: 150px;
+        overflow-y: auto;
+        z-index: 1000;
+        min-width: 150px;
+    }
+    .loggertype-dropdown .dropdown-item {
+        padding: 6px 12px;
+        cursor: pointer;
+    }
+    .loggertype-dropdown .dropdown-item:hover {
+        background: #f0f0f0;
+    }
+    `;
+    $('<style>').text(dropdownStyles).appendTo('head');
+
+</script>
+
+
+
+        
 <script type="text/javascript">
     RED.nodes.registerType('NginxProxyManagerConfigNode', {
       category: 'config',
@@ -440,112 +577,7 @@ Connection configuration for an Nginx Proxy Manager instance. Referenced by all
 - [Nginx Proxy Manager - Project](https://nginxproxymanager.com/)
 - [Nginx Proxy Manager - GitHub](https://github.com/NginxProxyManager/nginx-proxy-manager)
 </script>
-<!-- UpdateNginxHostNode -->
-<style>
-    .node_label_white {
-      fill: white
-    }
-
-</style>
-<!-- logger -->
-<style>
-    .editorgroupborder {
-      border-width: 1px;
-      border-style: solid;
-      border-color: lightgray;
-      padding: 3px;
-      margin-top: 2px;
-      margin-bottom: 2px;
-    }
-
-    .editorsectionheading {
-      font-weight: 600;
-      margin-bottom: 1px !important;
-      margin-top: 6px !important;
-    }
-
-    .nomargin {
-      margin-bottom: 1px !important;
-      margin-top: 1px !important;
-    }
-
-    .slidecontainer {
-      width: 100%;
-    }
-
-    .slider {
-      -webkit-appearance: none;
-      appearance: none;
-      width: 100%;
-      height: 25px;
-      background: #d3d3d3;
-      outline: none;
-      opacity: 0.7;
-      -webkit-transition: .2s;
-      transition: opacity .2s;
-    }
-
-    .slider:hover {
-      opacity: 1;
-    }
-
-    .slider::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      appearance: none;
-      width: 25px;
-      height: 25px;
-      background: #04AA6D;
-      cursor: pointer;
-    }
-
-    .slider::-moz-range-thumb {
-      width: 25px;
-      height: 25px;
-      background: #04AA6D;
-      cursor: pointer;
-    }
 
-    .towb_editorlabel {
-      width: 120px !important;
-    }
-
-    input.towb_editorfield,
-    select.towb_editorfield,
-    textarea.towb_editorfield {
-      width: 70% !important;
-    }
-
-    input.towb_editorfield_short,
-    select.towb_editorfield_short {
-      width: 30% !important;
-    }
-
-</style>
-<script type="text/javascript">
-    // CSS
-    dropdownStyles = `
-    .loggertype-dropdown {
-        position: absolute;
-        background: white;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-        max-height: 150px;
-        overflow-y: auto;
-        z-index: 1000;
-        min-width: 150px;
-    }
-    .loggertype-dropdown .dropdown-item {
-        padding: 6px 12px;
-        cursor: pointer;
-    }
-    .loggertype-dropdown .dropdown-item:hover {
-        background: #f0f0f0;
-    }
-    `;
-    $('<style>').text(dropdownStyles).appendTo('head');
-
-</script>
 <script type="text/javascript">
     RED.nodes.registerType('UpdateNginxHostNode', {
       category: 'nginxproxymanager',
@@ -592,8 +624,9 @@ Connection configuration for an Nginx Proxy Manager instance. Referenced by all
           required: true
         },
         metricsReference: {
-          type: 'MetricsConfigNode',
-          required: false
+          required: false,
+          value: '',
+          type: 'DelegatedConfigReferenceNode'
         },
       },
       oneditprepare: function() {
@@ -604,11 +637,14 @@ Connection configuration for an Nginx Proxy Manager instance. Referenced by all
         // **** logger **** //
         {
           let node = this;
+          let templateConfig = {};
           // controls.
           let logEnabled = $("#node-input-logEnabled");
           let logTemplateEnabled = $("#node-input-logTemplateOverrideEnabled");
           let logTemplateEnabledSection = $("#section_logTemplateOverrideEnabled");
           let logEnabledSection = $("#section_logEnabled");
+          let loggerSection = $("#section_loggerconfig");
+          loggerSection.hide();
           // functions.
           let getLoggerTypes = async function() {
             let types = [];
@@ -732,26 +768,148 @@ Connection configuration for an Nginx Proxy Manager instance. Referenced by all
               loggerEditButton.removeClass("disabled")
             }
           });
-          // lastly, make sure that we set the correct value on the logger selector.
-          updateLoggerSelectorList().then(() => {
-            loggerSelector.val(node.logger);
-            loggerSelector.trigger('change');
+          // Show the logger section only if at least one logger type is registered.
+          // If nodered_logging (or any other logger provider) is not installed, the section stays hidden.
+          getLoggerTypes().then(loggerTypes => {
+            if (loggerTypes.length === 0) return;
+            loggerSection.show();
+            updateLoggerSelectorList().then(() => {
+              loggerSelector.val(node.logger);
+              loggerSelector.trigger('change');
+            });
           });
         }
         // **** metrics **** //
         {
           let node = this;
+          let templateConfig = {};
           let metricsEnabled = $("#node-input-metricsEnabled");
-          let metricsEnabledSection = $("#section_metricsEnabled");
+          let metricsSection = $("#section_metricsconfig");
+          let metricsContainer = metricsEnabled.closest(".editorgroupborder");
+          let metricsEnabledSection = metricsContainer.find("#section_metricsEnabled");
+          let metricsEnableCheck = metricsContainer.find(".metricsEnableCheck");
+          metricsSection.hide();
+          if (templateConfig.showBorder === false) {
+            metricsSection.find(".editorsectionheading").hide();
+            metricsSection.find(".editorgroupborder").css({
+              border: "none",
+              padding: 0,
+              margin: 0
+            });
+          }
+          if (templateConfig.showEnable === false) {
+            metricsEnableCheck.hide();
+            metricsEnabledSection.show();
+          }
+          let getMetricsProviderTypes = async function() {
+            let types = [];
+            await $.ajax({
+              url: "nodetypeservice/find?tag=MetricsProvider",
+              type: "GET",
+              contentType: "application/json; charset=utf-8",
+              success: (response) => {
+                types = response;
+              },
+              error: (jqXHR, textStatus, errorThrown) => {
+                console.log(jqXHR, textStatus, errorThrown);
+              },
+            });
+            return types;
+          };
+          let getMetricsProviders = async () => {
+            let providers = [];
+            let providerTypes = (await getMetricsProviderTypes()).map(t => t.id);
+            RED.nodes.eachConfig(cfg => {
+              if (providerTypes.includes(cfg.type)) {
+                providers.push({
+                  id: cfg.id,
+                  name: cfg.label(),
+                  type: cfg.type
+                });
+              }
+            });
+            return providers;
+          };
+          let updateMetricsSelectorList = async () => {
+            metricsSelector.empty();
+            (await getMetricsProviders()).forEach(provider => {
+              $('<option value="' + provider.id + '">' + provider.name + '</option>').appendTo(metricsSelector);
+            });
+            $('<option value="_ADD_">none</option>').appendTo(metricsSelector);
+          };
           metricsEnabled.on('change', function() {
             if (metricsEnabled.prop("checked")) {
               metricsEnabledSection.show();
-              node._def.defaults.metricsReference.required = true;
             } else {
-              metricsEnabledSection.hide()
-              node._def.defaults.metricsReference.required = false;
+              metricsEnabledSection.hide();
+            }
+          });
+          let metricsSelector = metricsContainer.find("#metrics-selector");
+          let metricsEditButton = metricsContainer.find("#metrics-edit-btn");
+          let metricsAddButton = metricsContainer.find("#metrics-add-btn");
+          metricsEditButton.on('click', async function(event) {
+            event.stopPropagation();
+            if (metricsEditButton.hasClass("disabled")) return;
+            let selectedProvider = (await getMetricsProviders()).find(p => p.id === metricsSelector.val());
+            if (selectedProvider) {
+              RED.editor.editConfig("#metrics-selector", selectedProvider.type, selectedProvider.id);
+            }
+          });
+          metricsAddButton.on('click', function(event) {
+            event.stopPropagation();
+            let $btn = $(event.currentTarget);
+            let btnOffset = $btn.offset();
+            let btnH = $btn.outerHeight();
+            let btnW = $btn.outerWidth();
+            $('.metricstype-dropdown').remove();
+            getMetricsProviderTypes().then(providerTypes => {
+              let $dropdown = $('<div class="metricstype-dropdown red-ui-editor"></div>').css({
+                position: 'absolute',
+                zIndex: 1000
+              });
+              providerTypes.forEach(providerType => {
+                $('<div class="dropdown-item"></div>').text(providerType.name).data('value', providerType.id).css({
+                  padding: '4px 8px',
+                  cursor: 'pointer'
+                }).appendTo($dropdown);
+              });
+              $('body').append($dropdown);
+              $dropdown.css({
+                top: btnOffset.top + btnH,
+                left: Math.max(0, btnOffset.left + btnW - $dropdown.outerWidth())
+              });
+              $(document).on('mousedown.metricsdropdown', function(e) {
+                if (!$(e.target).closest('.metricstype-dropdown').length) {
+                  $dropdown.remove();
+                  $(document).off('mousedown.metricsdropdown');
+                }
+              });
+              $dropdown.on('click', '.dropdown-item', function(e) {
+                e.stopPropagation();
+                const selectedValue = $(this).data('value');
+                $dropdown.remove();
+                RED.editor.editConfig("#metrics-selector", selectedValue, "_ADD_");
+              });
+            });
+          });
+          metricsSelector.on("focus", updateMetricsSelectorList);
+          metricsSelector.on('change', function() {
+            if ("_ADD_" === metricsSelector.val()) {
+              metricsEditButton.addClass("disabled");
+            } else {
+              metricsEditButton.removeClass("disabled");
             }
           });
+          // Show the metrics section only if at least one metrics provider type is registered.
+          // If nodered_prometheus (or any other provider) is not installed, the section stays hidden.
+          getMetricsProviderTypes().then(providerTypes => {
+            if (providerTypes.length === 0) return;
+            metricsSection.show();
+            updateMetricsSelectorList().then(() => {
+              metricsSelector.val(node.metricsReference);
+              metricsSelector.trigger('change');
+            });
+          });
         }
       },
       oneditsave: function() {
@@ -761,6 +919,8 @@ Connection configuration for an Nginx Proxy Manager instance. Referenced by all
         }
         // **** logger **** //
         {
+          let node = this;
+          let templateConfig = {};
           node = this;
           var selectedLogger = $("#logger-selector").val();
           node.logger = (selectedLogger && selectedLogger !== "_ADD_") ? selectedLogger : '';
@@ -769,7 +929,16 @@ Connection configuration for an Nginx Proxy Manager instance. Referenced by all
           delete node.logTemplateOverrideEditor;
         }
         // **** metrics **** //
-        {}
+        {
+          let node = this;
+          let templateConfig = {};
+          node = this;
+          var selectedProvider = $("#metrics-selector").val();
+          node.metricsReference = (selectedProvider && selectedProvider !== "_ADD_") ? selectedProvider : '';
+          if (templateConfig.showEnable === false) {
+            node.metricsEnabled = !!node.metricsReference;
+          }
+        }
       },
       oneditcancel: function() {},
       oneditdelete: function() {},
@@ -799,13 +968,14 @@ Connection configuration for an Nginx Proxy Manager instance. Referenced by all
             </div>
             <div class="editorgroupborder">
                 <div class="form-row nomargin logEnableCheck">
-                    <input type="checkbox" id="node-input-logEnabled" placeholder="logEnabled" value="false" style="margin:8px 0 10px 102px; width:20px;">
-                    <label style="width:auto" for="node-input-logEnabled"><span>Enable Logging</span></label>
+                    <label class="towb_editorlabel">&nbsp;</label>
+                    <input class="towb_checkbox" type="checkbox" id="node-input-logEnabled" placeholder="logEnabled" value="false">
+                    <label class="towb_checkboxlabel" for="node-input-logEnabled"><span>Enable Logging</span></label>
                 </div>
 
                 <div id="section_logEnabled">
                     <div class="form-row nomargin">
-                        <label for="logger-selector">Logger</label>
+                        <label class="towb_editorlabel" for="logger-selector">Logger</label>
                         <div style="width: 70%; display: inline-flex;">
                             <select id="logger-selector" style="flex-grow: 1;" class="">
                                 <option value="_ADD_">none</option>
@@ -820,8 +990,9 @@ Connection configuration for an Nginx Proxy Manager instance. Referenced by all
                     </div>
 
                     <div class="form-row nomargin">
-                        <input type="checkbox" id="node-input-logTemplateOverrideEnabled" placeholder="" value="false" style="margin:8px 0 10px 102px; width:20px;">
-                        <label style="width:auto" for="node-input-logTemplateOverrideEnabled"><span>Override Template</span></label>
+                        <label class="towb_editorlabel">&nbsp;</label>
+                        <input class="towb_checkbox" type="checkbox" id="node-input-logTemplateOverrideEnabled" placeholder="" value="false">
+                        <label class="towb_checkboxlabel" for="node-input-logTemplateOverrideEnabled"><span>Override Template</span></label>
                     </div>
 
                     <div id="section_logTemplateOverrideEnabled">
@@ -843,14 +1014,25 @@ Connection configuration for an Nginx Proxy Manager instance. Referenced by all
             </div>
             <div class="editorgroupborder">
                 <div class="form-row nomargin metricsEnableCheck">
-                    <input type="checkbox" id="node-input-metricsEnabled" value="false" style="margin:8px 0 10px 102px; width:20px;" />
-                    <label style="width:auto" for="node-input-metricsEnabled"><span>Enable Metrics</span></label>
+                    <label class="towb_editorlabel">&nbsp;</label>
+                    <input class="towb_checkbox" type="checkbox" id="node-input-metricsEnabled" value="false" />
+                    <label class="towb_checkboxlabel" for="node-input-metricsEnabled"><span>Enable Metrics</span></label>
                 </div>
 
                 <div id="section_metricsEnabled">
                     <div class="form-row nomargin">
-                        <label class="towb_editorlabel" for="node-input-metricsReference">Metric Collector</label>
-                        <input id="node-input-metricsReference" placeholder="metrics" />
+                        <label class="towb_editorlabel" for="metrics-selector">Metric Provider</label>
+                        <div style="width: 70%; display: inline-flex;">
+                            <select id="metrics-selector" style="flex-grow: 1; min-width: 0;">
+                                <option value="_ADD_">none</option>
+                            </select>
+                            <a id="metrics-edit-btn" class="red-ui-button disabled" style="margin-left: 10px; flex-shrink: 0;">
+                                <i class="fa fa-pencil"></i>
+                            </a>
+                            <a id="metrics-add-btn" class="red-ui-button" style="margin-left: 10px; flex-shrink: 0;">
+                                <i class="fa fa-plus"></i>
+                            </a>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -931,107 +1113,9 @@ The original message is forwarded unchanged after the operation completes.
 
 ### Metrics
 : *enable metrics* (boolean) : if checked, then the node will produce metrics output to the specified metrics provider.
-: *metric collector* (metricconfig) : the collection point or grouping where this particular metric will be attached.
+: *metric provider* (metricsconfig) : the metrics backend that this node will report to.
 </script>
-<!-- logger -->
-<style>
-    .editorgroupborder {
-      border-width: 1px;
-      border-style: solid;
-      border-color: lightgray;
-      padding: 3px;
-      margin-top: 2px;
-      margin-bottom: 2px;
-    }
-
-    .editorsectionheading {
-      font-weight: 600;
-      margin-bottom: 1px !important;
-      margin-top: 6px !important;
-    }
-
-    .nomargin {
-      margin-bottom: 1px !important;
-      margin-top: 1px !important;
-    }
-
-    .slidecontainer {
-      width: 100%;
-    }
-
-    .slider {
-      -webkit-appearance: none;
-      appearance: none;
-      width: 100%;
-      height: 25px;
-      background: #d3d3d3;
-      outline: none;
-      opacity: 0.7;
-      -webkit-transition: .2s;
-      transition: opacity .2s;
-    }
-
-    .slider:hover {
-      opacity: 1;
-    }
-
-    .slider::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      appearance: none;
-      width: 25px;
-      height: 25px;
-      background: #04AA6D;
-      cursor: pointer;
-    }
-
-    .slider::-moz-range-thumb {
-      width: 25px;
-      height: 25px;
-      background: #04AA6D;
-      cursor: pointer;
-    }
-
-    .towb_editorlabel {
-      width: 120px !important;
-    }
-
-    input.towb_editorfield,
-    select.towb_editorfield,
-    textarea.towb_editorfield {
-      width: 70% !important;
-    }
-
-    input.towb_editorfield_short,
-    select.towb_editorfield_short {
-      width: 30% !important;
-    }
-
-</style>
-<script type="text/javascript">
-    // CSS
-    dropdownStyles = `
-    .loggertype-dropdown {
-        position: absolute;
-        background: white;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-        max-height: 150px;
-        overflow-y: auto;
-        z-index: 1000;
-        min-width: 150px;
-    }
-    .loggertype-dropdown .dropdown-item {
-        padding: 6px 12px;
-        cursor: pointer;
-    }
-    .loggertype-dropdown .dropdown-item:hover {
-        background: #f0f0f0;
-    }
-    `;
-    $('<style>').text(dropdownStyles).appendTo('head');
 
-</script>
 <script type="text/javascript">
     RED.nodes.registerType('NginxGetHostsNode', {
       category: 'nginxproxymanager',
@@ -1078,8 +1162,9 @@ The original message is forwarded unchanged after the operation completes.
           required: true
         },
         metricsReference: {
-          type: 'MetricsConfigNode',
-          required: false
+          required: false,
+          value: '',
+          type: 'DelegatedConfigReferenceNode'
         },
       },
       oneditprepare: function() {
@@ -1093,11 +1178,14 @@ The original message is forwarded unchanged after the operation completes.
         // **** logger **** //
         {
           let node = this;
+          let templateConfig = {};
           // controls.
           let logEnabled = $("#node-input-logEnabled");
           let logTemplateEnabled = $("#node-input-logTemplateOverrideEnabled");
           let logTemplateEnabledSection = $("#section_logTemplateOverrideEnabled");
           let logEnabledSection = $("#section_logEnabled");
+          let loggerSection = $("#section_loggerconfig");
+          loggerSection.hide();
           // functions.
           let getLoggerTypes = async function() {
             let types = [];
@@ -1221,26 +1309,148 @@ The original message is forwarded unchanged after the operation completes.
               loggerEditButton.removeClass("disabled")
             }
           });
-          // lastly, make sure that we set the correct value on the logger selector.
-          updateLoggerSelectorList().then(() => {
-            loggerSelector.val(node.logger);
-            loggerSelector.trigger('change');
+          // Show the logger section only if at least one logger type is registered.
+          // If nodered_logging (or any other logger provider) is not installed, the section stays hidden.
+          getLoggerTypes().then(loggerTypes => {
+            if (loggerTypes.length === 0) return;
+            loggerSection.show();
+            updateLoggerSelectorList().then(() => {
+              loggerSelector.val(node.logger);
+              loggerSelector.trigger('change');
+            });
           });
         }
         // **** metrics **** //
         {
           let node = this;
+          let templateConfig = {};
           let metricsEnabled = $("#node-input-metricsEnabled");
-          let metricsEnabledSection = $("#section_metricsEnabled");
+          let metricsSection = $("#section_metricsconfig");
+          let metricsContainer = metricsEnabled.closest(".editorgroupborder");
+          let metricsEnabledSection = metricsContainer.find("#section_metricsEnabled");
+          let metricsEnableCheck = metricsContainer.find(".metricsEnableCheck");
+          metricsSection.hide();
+          if (templateConfig.showBorder === false) {
+            metricsSection.find(".editorsectionheading").hide();
+            metricsSection.find(".editorgroupborder").css({
+              border: "none",
+              padding: 0,
+              margin: 0
+            });
+          }
+          if (templateConfig.showEnable === false) {
+            metricsEnableCheck.hide();
+            metricsEnabledSection.show();
+          }
+          let getMetricsProviderTypes = async function() {
+            let types = [];
+            await $.ajax({
+              url: "nodetypeservice/find?tag=MetricsProvider",
+              type: "GET",
+              contentType: "application/json; charset=utf-8",
+              success: (response) => {
+                types = response;
+              },
+              error: (jqXHR, textStatus, errorThrown) => {
+                console.log(jqXHR, textStatus, errorThrown);
+              },
+            });
+            return types;
+          };
+          let getMetricsProviders = async () => {
+            let providers = [];
+            let providerTypes = (await getMetricsProviderTypes()).map(t => t.id);
+            RED.nodes.eachConfig(cfg => {
+              if (providerTypes.includes(cfg.type)) {
+                providers.push({
+                  id: cfg.id,
+                  name: cfg.label(),
+                  type: cfg.type
+                });
+              }
+            });
+            return providers;
+          };
+          let updateMetricsSelectorList = async () => {
+            metricsSelector.empty();
+            (await getMetricsProviders()).forEach(provider => {
+              $('<option value="' + provider.id + '">' + provider.name + '</option>').appendTo(metricsSelector);
+            });
+            $('<option value="_ADD_">none</option>').appendTo(metricsSelector);
+          };
           metricsEnabled.on('change', function() {
             if (metricsEnabled.prop("checked")) {
               metricsEnabledSection.show();
-              node._def.defaults.metricsReference.required = true;
             } else {
-              metricsEnabledSection.hide()
-              node._def.defaults.metricsReference.required = false;
+              metricsEnabledSection.hide();
+            }
+          });
+          let metricsSelector = metricsContainer.find("#metrics-selector");
+          let metricsEditButton = metricsContainer.find("#metrics-edit-btn");
+          let metricsAddButton = metricsContainer.find("#metrics-add-btn");
+          metricsEditButton.on('click', async function(event) {
+            event.stopPropagation();
+            if (metricsEditButton.hasClass("disabled")) return;
+            let selectedProvider = (await getMetricsProviders()).find(p => p.id === metricsSelector.val());
+            if (selectedProvider) {
+              RED.editor.editConfig("#metrics-selector", selectedProvider.type, selectedProvider.id);
+            }
+          });
+          metricsAddButton.on('click', function(event) {
+            event.stopPropagation();
+            let $btn = $(event.currentTarget);
+            let btnOffset = $btn.offset();
+            let btnH = $btn.outerHeight();
+            let btnW = $btn.outerWidth();
+            $('.metricstype-dropdown').remove();
+            getMetricsProviderTypes().then(providerTypes => {
+              let $dropdown = $('<div class="metricstype-dropdown red-ui-editor"></div>').css({
+                position: 'absolute',
+                zIndex: 1000
+              });
+              providerTypes.forEach(providerType => {
+                $('<div class="dropdown-item"></div>').text(providerType.name).data('value', providerType.id).css({
+                  padding: '4px 8px',
+                  cursor: 'pointer'
+                }).appendTo($dropdown);
+              });
+              $('body').append($dropdown);
+              $dropdown.css({
+                top: btnOffset.top + btnH,
+                left: Math.max(0, btnOffset.left + btnW - $dropdown.outerWidth())
+              });
+              $(document).on('mousedown.metricsdropdown', function(e) {
+                if (!$(e.target).closest('.metricstype-dropdown').length) {
+                  $dropdown.remove();
+                  $(document).off('mousedown.metricsdropdown');
+                }
+              });
+              $dropdown.on('click', '.dropdown-item', function(e) {
+                e.stopPropagation();
+                const selectedValue = $(this).data('value');
+                $dropdown.remove();
+                RED.editor.editConfig("#metrics-selector", selectedValue, "_ADD_");
+              });
+            });
+          });
+          metricsSelector.on("focus", updateMetricsSelectorList);
+          metricsSelector.on('change', function() {
+            if ("_ADD_" === metricsSelector.val()) {
+              metricsEditButton.addClass("disabled");
+            } else {
+              metricsEditButton.removeClass("disabled");
             }
           });
+          // Show the metrics section only if at least one metrics provider type is registered.
+          // If nodered_prometheus (or any other provider) is not installed, the section stays hidden.
+          getMetricsProviderTypes().then(providerTypes => {
+            if (providerTypes.length === 0) return;
+            metricsSection.show();
+            updateMetricsSelectorList().then(() => {
+              metricsSelector.val(node.metricsReference);
+              metricsSelector.trigger('change');
+            });
+          });
         }
       },
       oneditsave: function() {
@@ -1250,6 +1460,8 @@ The original message is forwarded unchanged after the operation completes.
         }
         // **** logger **** //
         {
+          let node = this;
+          let templateConfig = {};
           node = this;
           var selectedLogger = $("#logger-selector").val();
           node.logger = (selectedLogger && selectedLogger !== "_ADD_") ? selectedLogger : '';
@@ -1258,7 +1470,16 @@ The original message is forwarded unchanged after the operation completes.
           delete node.logTemplateOverrideEditor;
         }
         // **** metrics **** //
-        {}
+        {
+          let node = this;
+          let templateConfig = {};
+          node = this;
+          var selectedProvider = $("#metrics-selector").val();
+          node.metricsReference = (selectedProvider && selectedProvider !== "_ADD_") ? selectedProvider : '';
+          if (templateConfig.showEnable === false) {
+            node.metricsEnabled = !!node.metricsReference;
+          }
+        }
       },
       oneditcancel: function() {},
       oneditdelete: function() {},
@@ -1293,13 +1514,14 @@ The original message is forwarded unchanged after the operation completes.
             </div>
             <div class="editorgroupborder">
                 <div class="form-row nomargin logEnableCheck">
-                    <input type="checkbox" id="node-input-logEnabled" placeholder="logEnabled" value="false" style="margin:8px 0 10px 102px; width:20px;">
-                    <label style="width:auto" for="node-input-logEnabled"><span>Enable Logging</span></label>
+                    <label class="towb_editorlabel">&nbsp;</label>
+                    <input class="towb_checkbox" type="checkbox" id="node-input-logEnabled" placeholder="logEnabled" value="false">
+                    <label class="towb_checkboxlabel" for="node-input-logEnabled"><span>Enable Logging</span></label>
                 </div>
 
                 <div id="section_logEnabled">
                     <div class="form-row nomargin">
-                        <label for="logger-selector">Logger</label>
+                        <label class="towb_editorlabel" for="logger-selector">Logger</label>
                         <div style="width: 70%; display: inline-flex;">
                             <select id="logger-selector" style="flex-grow: 1;" class="">
                                 <option value="_ADD_">none</option>
@@ -1314,8 +1536,9 @@ The original message is forwarded unchanged after the operation completes.
                     </div>
 
                     <div class="form-row nomargin">
-                        <input type="checkbox" id="node-input-logTemplateOverrideEnabled" placeholder="" value="false" style="margin:8px 0 10px 102px; width:20px;">
-                        <label style="width:auto" for="node-input-logTemplateOverrideEnabled"><span>Override Template</span></label>
+                        <label class="towb_editorlabel">&nbsp;</label>
+                        <input class="towb_checkbox" type="checkbox" id="node-input-logTemplateOverrideEnabled" placeholder="" value="false">
+                        <label class="towb_checkboxlabel" for="node-input-logTemplateOverrideEnabled"><span>Override Template</span></label>
                     </div>
 
                     <div id="section_logTemplateOverrideEnabled">
@@ -1337,14 +1560,25 @@ The original message is forwarded unchanged after the operation completes.
             </div>
             <div class="editorgroupborder">
                 <div class="form-row nomargin metricsEnableCheck">
-                    <input type="checkbox" id="node-input-metricsEnabled" value="false" style="margin:8px 0 10px 102px; width:20px;" />
-                    <label style="width:auto" for="node-input-metricsEnabled"><span>Enable Metrics</span></label>
+                    <label class="towb_editorlabel">&nbsp;</label>
+                    <input class="towb_checkbox" type="checkbox" id="node-input-metricsEnabled" value="false" />
+                    <label class="towb_checkboxlabel" for="node-input-metricsEnabled"><span>Enable Metrics</span></label>
                 </div>
 
                 <div id="section_metricsEnabled">
                     <div class="form-row nomargin">
-                        <label class="towb_editorlabel" for="node-input-metricsReference">Metric Collector</label>
-                        <input id="node-input-metricsReference" placeholder="metrics" />
+                        <label class="towb_editorlabel" for="metrics-selector">Metric Provider</label>
+                        <div style="width: 70%; display: inline-flex;">
+                            <select id="metrics-selector" style="flex-grow: 1; min-width: 0;">
+                                <option value="_ADD_">none</option>
+                            </select>
+                            <a id="metrics-edit-btn" class="red-ui-button disabled" style="margin-left: 10px; flex-shrink: 0;">
+                                <i class="fa fa-pencil"></i>
+                            </a>
+                            <a id="metrics-add-btn" class="red-ui-button" style="margin-left: 10px; flex-shrink: 0;">
+                                <i class="fa fa-plus"></i>
+                            </a>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -1386,7 +1620,6 @@ The original message is forwarded with the specified property set to an array of
 
 ### Metrics
 : *enable metrics* (boolean) : if checked, then the node will produce metrics output to the specified metrics provider.
-: *metric collector* (metricconfig) : the collection point or grouping where this particular metric will be attached.
+: *metric provider* (metricsconfig) : the metrics backend that this node will report to.
 </script>
-