dashboardAPI/dashboardAPI.html

<script src="/dashboardapi/menu.js"></script>
<script src="/dashboardapi/configData.js"></script>

<script>
  RED.nodes.registerType('dashboardapi', {
    category: 'EVOLV',
    color: '#7A8BA3',
    defaults: {
      name: { value: '' },
      enableLog: { value: true },
      logLevel: { value: 'info' },

      protocol: { value: 'http' },
      host: { value: 'localhost' },
      port: { value: 3000 },
      folderTitle: { value: '' },
      folderUid: { value: '' },
      defaultBucket: { value: '' },
    },
    credentials: {
      bearerToken: { type: 'password' },
    },
    inputs: 1,
    outputs: 1,
    inputLabels: ['Input'],
    outputLabels: ['grafana'],
    icon: 'font-awesome/fa-area-chart',

    label: function () {
      return this.name || 'dashboardapi';
    },

    oneditprepare: function () {
      const waitForMenuData = () => {
        if (window.EVOLV?.nodes?.dashboardapi?.loggerMenu?.initEditor) {
          window.EVOLV.nodes.dashboardapi.loggerMenu.initEditor(this);
        } else {
          setTimeout(waitForMenuData, 50);
        }
      };
      waitForMenuData();
    },

    oneditsave: function () {
      const node = this;

      if (window.EVOLV?.nodes?.dashboardapi?.loggerMenu?.saveEditor) {
        window.EVOLV.nodes.dashboardapi.loggerMenu.saveEditor(node);
      }

      ['name', 'protocol', 'host', 'port', 'folderTitle', 'folderUid', 'defaultBucket'].forEach((field) => {
        const element = document.getElementById(`node-input-${field}`);
        if (!element) return;
        node[field] = field === 'port' ? parseInt(element.value, 10) || 3000 : element.value || '';
      });
      // bearerToken is handled by Node-RED's credentials system (encrypted at rest in flow_cred.json).
    },
  });
</script>

<!-- Main UI Template -->
<script type="text/html" data-template-name="dashboardapi">
  <div class="form-row">
    <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
    <input type="text" id="node-input-name" placeholder="name" style="width:70%;" />
  </div>

  <div class="form-row">
    <label for="node-input-protocol"><i class="fa fa-exchange"></i> Protocol</label>
    <select id="node-input-protocol" style="width:70%;">
      <option value="http">http</option>
      <option value="https">https</option>
    </select>
  </div>

  <div class="form-row">
    <label for="node-input-host"><i class="fa fa-server"></i> Grafana Host</label>
    <input type="text" id="node-input-host" placeholder="localhost" style="width:70%;" />
  </div>

  <div class="form-row">
    <label for="node-input-port"><i class="fa fa-plug"></i> Grafana Port</label>
    <input type="number" id="node-input-port" placeholder="3000" style="width:70%;" />
  </div>

  <div class="form-row">
    <label for="node-input-bearerToken"><i class="fa fa-key"></i> Bearer Token</label>
    <input type="password" id="node-input-bearerToken" placeholder="encrypted at rest" style="width:70%;" />
  </div>

  <div class="form-row">
    <label for="node-input-folderTitle"><i class="fa fa-folder"></i> Grafana Folder</label>
    <input type="text" id="node-input-folderTitle" placeholder="folder name e.g. EVOLV — resolved/created by name" style="width:70%;" />
  </div>

  <div class="form-row">
    <label for="node-input-folderUid"><i class="fa fa-folder-open"></i> Grafana Folder UID</label>
    <input type="text" id="node-input-folderUid" placeholder="optional fallback — leave empty when Folder name is set" style="width:70%;" />
  </div>

  <div class="form-row">
    <label for="node-input-defaultBucket"><i class="fa fa-database"></i> InfluxDB Bucket</label>
    <input type="text" id="node-input-defaultBucket" placeholder="env INFLUXDB_BUCKET or lvl2" style="width:70%;" />
  </div>

  <div id="logger-fields-placeholder"></div>
</script>

<script type="text/html" data-help-name="dashboardapi">
    <p>
    This node interacts with the Grafana API with the following capabilities:
    
    • Dashboard Management: Create, update, or delete dashboards.
    • Metrics Querying: Retrieve performance and operational data.
    • Alerts Management: Monitor and manage alerts.
    
    It allows you to configure:
    
    - Connection details (host, port, bearer token) for secure API access.
    - Logging options, including the ability to enable logging and set the log level (info, debug, warn, error).
    
    These features provide flexible and controlled interactions with the Grafana API.
    </p>
</script>