node-red-contrib-self-healing/resource-monitor/resource-monitor.html

SHEN: Self-healing extensions for Node-RED.

<script type="text/javascript">
  RED.nodes.registerType("resource-monitor", {
    category: "SHEN",
    color: "#74b9ff",
    defaults: {
      name: { value: "" },
      resourcesMask: { value: 0xf },
      maxCPU: { value: 50, required: true, validate: RED.validators.number() },
      maxRAM: { value: 50, required: true, validate: RED.validators.number() },
      maxStorage: {
        value: 50,
        required: true,
        validate: RED.validators.number(),
      },
      minBattery: {
        value: 50,
        required: true,
        validate: RED.validators.number(),
      },
    },
    inputs: 1,
    outputs: 5,
    icon: "status.png",
    align: "left",
    inputLabels: "JSON info",
    outputLabels: [
      "resource(s) out of bounds",
      "CPU too high",
      "RAM too high",
      "storage too high",
      "batery too low",
    ],
    label: function () {
      return this.name || "resource-monitor";
    },
    oneditprepare: resources_decode,
    oneditsave: resources_encode,
  });

  function resources_encode() {
    this.resourcesMask = 0;
    if (document.getElementById("res-battery").checked) this.resourcesMask |= 1;
    if (document.getElementById("res-storage").checked) this.resourcesMask |= 2;
    if (document.getElementById("res-RAM").checked) this.resourcesMask |= 4;
    if (document.getElementById("res-CPU").checked) this.resourcesMask |= 8;
  }

  function resources_decode() {
    let CPU = document.getElementById("res-CPU");
    let RAM = document.getElementById("res-RAM");
    let storage = document.getElementById("res-storage");
    let battery = document.getElementById("res-battery");

    battery.checked = (this.resourcesMask & 1) == 1;
    storage.checked = (this.resourcesMask & 2) == 2;
    RAM.checked = (this.resourcesMask & 4) == 4;
    CPU.checked = (this.resourcesMask & 8) == 8;

    document.getElementById("batteryCtrl").style.display =
      (this.resourcesMask & 1) == 1 ? "block" : "none";
    document.getElementById("storageCtrl").style.display =
      (this.resourcesMask & 2) == 2 ? "block" : "none";
    document.getElementById("ramCtrl").style.display =
      (this.resourcesMask & 4) == 4 ? "block" : "none";
    document.getElementById("cpuCtrl").style.display =
      (this.resourcesMask & 8) == 8 ? "block" : "none";
  }

  function toggleVisibility(element) {
    let node = document.getElementById(element);
    node.style.display = node.style.display === "none" ? "block" : "none";
  }
</script>

<script type="text/html" data-template-name="resource-monitor">
  <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" />
  </div>

  <h3>Resources to be monitored:</h3>
  <div class="form-row">
    <label for="res-CPU">Monitor CPU</label>
    <input type="checkbox" id="res-CPU" onclick="toggleVisibility('cpuCtrl')" />
  </div>
  <div id="cpuCtrl" class="form-row">
    <label for="node-input-maxCPU" style="width:55%;">
      Maximum % CPU usage (0-100):
    </label>
    <input
      type="number"
      id="node-input-maxCPU"
      placeholder="0.0"
      min="0"
      max="100"
      step="0.01"
      style="width:20%;"
    />
  </div>
  <hr />

  <div class="form-row">
    <label for="res-RAM">Monitor RAM</label>
    <input type="checkbox" id="res-RAM" onclick="toggleVisibility('ramCtrl')" />
  </div>
  <div id="ramCtrl" class="form-row">
    <label for="node-input-maxRAM" style="width:55%;">
      Maximum % RAM usage (0-100):
    </label>
    <input
      type="number"
      id="node-input-maxRAM"
      placeholder="0.0"
      min="0"
      max="100"
      step="0.01"
      style="width:20%;"
    />
  </div>
  <hr />

  <div class="form-row">
    <label for="res-storage">Monitor Storage</label>
    <input
      type="checkbox"
      id="res-storage"
      onclick="toggleVisibility('storageCtrl')"
    />
  </div>
  <div id="storageCtrl" class="form-row">
    <label for="node-input-maxStorage" style="width:55%;">
      Maximum % Storage usage (0-100):
    </label>
    <input
      type="number"
      id="node-input-maxStorage"
      placeholder="0.0"
      min="0"
      max="100"
      step="0.01"
      style="width:20%;"
    />
  </div>
  <hr />

  <div class="form-row">
    <label for="res-battery">Monitor Battery</label>
    <input
      type="checkbox"
      id="res-battery"
      onclick="toggleVisibility('batteryCtrl')"
    />
  </div>
  <div id="batteryCtrl" class="form-row">
    <label for="node-input-minBattery" style="width:55%;">
      Minimum % Battery usage (0-100):
    </label>
    <input
      type="number"
      id="node-input-minBattery"
      placeholder="0.0"
      min="0"
      max="100"
      step="0.01"
      style="width:20%;"
    />
  </div>
</script>

<script type="text/html" data-help-name="resource-monitor">
  <p>
    A node to monitor system resources, ranging from battery levels to resources
    usage.
  </p>

  <h3>Properties</h3>
  <dl class="message-properties">
    <dt>name<span class="property-type">string</span></dt>
    <dd>Name of node to be displayed in editor.</dd>

    <dt>toggles<span class="property-type">checkbox</span></dt>
    <dd>
      Checkboxes to enable/disable the monitoring of the resources available.
    </dd>

    <dt>maxCPU<span class="property-type">number</span></dt>
    <dd>Maximum % of CPU usage allowed.</dd>

    <dt>maxRAM<span class="property-type">number</span></dt>
    <dd>Maximum % of RAM usage allowed.</dd>

    <dt>maxStorage<span class="property-type">number</span></dt>
    <dd>Maximum % of storage usage allowed.</dd>

    <dt>minBattery<span class="property-type">number</span></dt>
    <dd>Minimum % of battery level allowed.</dd>
  </dl>

  <h3>Inputs</h3>
  <dl class="message-properties">
    <p>
      A message containing a <code>payload</code> property with a
      <code>JSON object</code> is required.
    </p>
  </dl>

  <h3>Outputs</h3>
  <dl class="message-properties">
    <p>
      If at least one resource isn't within expected limits, a message is sent
      through the corresponding resource(s) output(s).
    </p>
    <p>
      Besides that, a message is also sent through
      <code>resource(s) out of bounds</code> output and a
      <code>msg.type</code> is added to show which resource(s) exceeded the
      limits.
    </p>
  </dl>

  <h3>Details</h3>
  <p>
    Different resources can be enabled to be monitored. When enabled, a
    corresponding property will appear in the section to select its limit usage.
  </p>
  <p>
    <code>maxCPU</code> will trigger a message if CPU usage received is higher
    than the specified limit.
  </p>
  <p>
    <code>maxRAM</code> will trigger a message if RAM usage received is higher
    than the specified limit.
  </p>
  <p>
    <code>maxStorage</code> will trigger a message if storage usage received is
    higher than the specified limit.
  </p>
  <p>
    <code>minBattery</code> will trigger a message if battery level received is
    lower than the specified limit.
  </p>
  <p>
    The input must be a <code>JSON object</code> with the following structure:
  </p>
  <pre><code>{
  "CPU": MAX_CPU_USAGE,
  "RAM": MAX_RAM_USAGE, 
  "storage": MAX_STORAGE_USAGE, 
  "battery": MIN_BATTERY 
}</code></pre>
  <p>
    This object may only have the resources needed to be monitored and each
    limit must be a <code>number</code>.
  </p>
  <p>
    If the input <code>payload</code> doesn't obey to this structure, no message
    is sent and an error is called with <code>done(error)</code>.
  </p>
  <p>
    If no resource is enabled, no message is sent and <code>done()</code> is
    called. The node displays a warning status.
  </p>
  <p>
    When the node is finished and no error occurs <code>done()</code> is called,
    so any <code>complete</code> nodes will receive a message about it.
  </p>
</script>