[Feature Request] Improved visibility on service issues by highlighting fields.

[ryanwinter]

Description

For a number of widgets, they are reporting some form of status that I would like to be able to easily see if its in a failure state. A good example would be the health checks widget, that shows the down field where I care if its not 0.

Would like to see widgets or users being able to define rules or thresholds that could classify as issue with the field value.

This could be highlighted in 2 ways:

1. Colorize the field to indicate a problem
2. Have an informational widget that displays a list of problems reported by widgets that could be placed anywhere.

Instead of:

Something like this:

Other

No response

[owennewo-dev]

I think this is a great feature request, and should be implemented. This has been asked before, but ignored due to lack of interest I think.

Currently you can achieve this with some custom css and js, but it would be great if all you needed to do was add highlightField: "alerts" in the widget section of a service's yaml, like so:

    - TrueNAS:
        icon: truenas-scale.png
        href: http://your.server.ip
        siteMonitor: http://your.server.ip
        statusStyle: dot
        widget:
          type: truenas
          fields: ["uptime", "alerts"]
          highlightFields: "alerts"        <----
          url: http://your.server.ip
          key: apikey
          enablePools: true
          nasType: scale

Then there could be a line in settings.yaml with the color you want for the highlighted fields, like this: highlightColor: #ff0000

[owennewo-dev]

Yes I understand, I totally forgot to factor that into my idea for the yaml config!

That currently is what I have setup with custom js and css, when alerts goes over 0 it goes red.

[ryanwinter]

Yes I understand, I totally forgot to factor that into my idea for the yaml config!

That currently is what I have setup with custom js and css, when alerts goes over 0 it goes red.

Nice, I might give that a try for now :) Is there an easy way to tell which div block is what? Looking at the elements it looks like I would need to search for the parent so I can understand which widget it is, and then possible just know the ordering of the cards in the widget so I can target the right one?

My javascript is not the best!

[owennewo-dev]

@ryanwinter You can find my code at https://github.com/owennewo-dev/Homepage-config

But I will share the relevant bits here for you.

Currently I have this for my TrueNAS widget. (I hope this becomes a feature directly in Homepage, because I couldn't get this to work with more than one widget at a time) You have to add a new line called id: truenas-scale (or uptime-kuma)

This is services.yaml

- Services1:
    - TrueNAS:
        id: truenas-scale
        icon: truenas-scale.png
        href: http://your.server.ip
        siteMonitor: http://your.server.ip
        statusStyle: dot
        widget:
          type: truenas
          fields: ["uptime", "alerts"]
          url: http://your.server.ip
          key: apikey
          enablePools: true
          nasType: scale

You will use the id you set in services.yaml in your custom.js file. The only line you need to change anything in is line 5 in the js below.
This is custom.js

function createObserver() {
  // calling this on init to get style updated first time
  updateDownSitePanelStatus();

  // select the target node, referencing the id parameter from the service definition
  const downSitePanel = document.getElementById("truenas-scale").querySelector(".service-container").children[1];

  // create an observer instance
  const observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
      if (mutation.type === "characterData") {
        updateDownSitePanelStatus();
      }
    });
  });

  const config = {
    subtree: true,
    characterData: true,
  };

  // pass in the target node and observer options
  observer.observe(downSitePanel, config);
}

function updateDownSitePanelStatus() {
  const downSitePanel = document.getElementById("truenas-scale").querySelector(".service-container").children[1];

  const siteDownCount = parseInt(downSitePanel.children[0].textContent);

  if (siteDownCount > 0) {
    if (!downSitePanel.classList.contains("down-bg")) {
      downSitePanel.classList.add("down-bg");
    }
  } else {
    if (downSitePanel.classList.contains("down-bg") || isNaN(siteDownCount)) {
      downSitePanel.classList.remove("down-bg");
    }
  }
}

setTimeout(createObserver, 1000); // band-aid, use as needed - sometimes would fire too early without the timeout
//createObserver();

As I said, you only have to change two things in line #5. So for me this line is:

  const downSitePanel = document.getElementById("truenas-scale").querySelector(".service-container").children[1];

If you set the id: field in your services.yaml for your Uptime Kuma widget to id: uptime-kuma this is what you would change that line in custom.js to.

  const downSitePanel = document.getElementById("uptime-kuma").querySelector(".service-container").children[1];

The last part, .children[1] is where you set what widget field you want the alert to be on. The first field in your widget is field [0], second is [1] and third is [2], so if you have the same config as what you showed in your screenshot, and want the Sites Down field to be highlighted when the number in it goes over one, you would put [1] just as I have.

Now if you only wanted the Sites Down field in your Uptime Kuma widget to be highlighted red when the number of Sites Down is over 5, you would change the line that is if (siteDownCount > 0) { (this line is near the bottom of the code) to if (siteDownCount > 5) {.

Also, you need to put some code in your custom.css file.

.down-bg {
  background-color: #ff0000 !important; /* this color works for my homepage theming, chances are you'll want to change it */
  /* I have this css transition code uncommented in mine, just personal preference */
  /* -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear; */
}

You might want to change the hexadecimal color code in background-color: #ff0000 to suit your homepage theme and/or background.

Hopefully this helps! If I was not clear enough on something, please let me know. I am happy to help.

Again, I beg shamoon or someone else to implement this directly into Homepage. I would be immensely grateful to not have to do all this hacky js. Also I have multiple widgets I want to have field highlight alerts on, but I can't get this js to work with more than one widget.

[ryanwinter]

Awesome I'll give this a try!

I assume you would just repeat the code for each widget you want to dynamically change?

[owennewo-dev]

You can give it a shot, but I wasn't able to get it to work with multiple widgets.

[ryanwinter]

Here is some js hackery I did to get something working where I could define thresholds. Not well tested :)

function WatchItem(service, container, threshold) {
    this.service = service;
    this.container = container;
    this.threshold = threshold;

}
var watchItems = [
    new WatchItem('Portainer', 1, ">0"),
    new WatchItem('Uptime Kuma', 1, ">0"),
    new WatchItem('Healthchecks.io', 1, ">0"),
    new WatchItem('Uptime Robot', 1, ">0"),
    new WatchItem('Crowdsec', 1, ">0"),
    new WatchItem('Omada', 2, ">0"),
    new WatchItem('NetAlertX', 3, ">0"),
    new WatchItem('Truenas', 2, ">0"),
    new WatchItem('Scrutiny', 1, ">0"),
    new WatchItem('Scrutiny', 2, ">0"),
];

async function observeItem(item) {
    await waitForItem(item);

    item.element = document.querySelector(`[data-name='${item.service}']`).querySelector(".service-container").children[item.container];

    const observer = new MutationObserver(function (item, mutations) {
        mutations.forEach(function (mutation) {
            if (eval(`${mutation.target.data}${item.threshold}`)) {
                item.element.classList.add("fail-bg");
            } else {
                item.element.classList.remove("fail-bg");
            }
        });
    }.bind(null, item));

    observer.observe(item.element, { subtree: true, characterData: true });
}

function waitForItem(item) {
    return new Promise(resolve => {

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(`[data-name='${item.service}']`).querySelector(".service-container")) {
                observer.disconnect();
                resolve();
            }
        });

        observer.observe(document.body, { childList: true, subtree: true });
    });
}

watchItems.forEach(item => {
    observeItem(item);
});