Added configuration options to UI for changing colors of icons, displaying only certain states and priorities, and hiding various UI elements

[mitman98]

I have a tremendous number of alerts in my system, and I recently missed a few important ones in the noise of my alerts manager display. I've implemented a few new configuration options for the UI that are all optional, but allow for further refinement of the UI manager's display. This includes:

1. Supporting hiding certain states (e.g. off, acked, snoozed, disabled or even acked_on or acked_off, etc.)
2. Showing only certain priorities
3. Changing the slider's default starting point (or hiding the top bar entirely with slider and ack_all)
4. Hiding ack buttons
5. Changing the color of high, medium, low or off alerts.

This enabled me to have specific tiles in my dashboard showing only on/high priority alerts wtih no other bells and whistles, for example (and other permutations, such as a tile on a system tab showing just "disabled" alerts for maintenance purposes, but hiding them in all other tiles).

I was not able to enhance the tests as I don't have a test environment set up, but wanted to get these features over as they have been tremendously useful and critical for me and were a few features I was thinking about for the past few months given the power of Alert2 to refine it's display organization, especially as I lost a pile of money on perishable goods that froze in a fridge when the alerting worked perfectly, I just didn't spot it in the midst of other alerts).

Thanks very much and happy to contribute!

[redstone99]

Hi - Thanks so much for the contribution! A quick suggestion is to add some tests to tests/t2.html to exercise the new features. Purpose is to make sure the features continue to work as alert2.js evolves in the future.

The bottom of t2.html has tests I've more recently added. I'd suggest looking at doTestConfig. You could imagine making a harness similar to createExperiment that sets up a few alerts in various states and then checks to see that the UI has the elements you expect (maybe with the styling you expect).

[mitman98]

Yes, understood on the tests, I actually am not familiar with how this test framework is set up or how to run it to be honest. I also have tried to get a dev HA set up with marginal success so far - I got the dev environment running but I can't seem to get tests working. So struggling to get to a point where I can run tests. Wanted to get the code over sooner as that battle is something I can't get to for a bit with some family things and an upcoming move going on. I can probably get to it in about a month.

[redstone99]

Yeah, test framework isn't as polished as it could be. Brief instructions at top of t2.html file:

         Run server with (from the Alert2 repo):
              JTESTDIR=/home/redstone/home-monitoring/homeassistant JTEST_JS_DIR=/home/redstone/tmp/hass-alert2-ui venv/bin/pytest tests/dummy_server.py
         View page at:
             http://localhost:50005/jtest/tests/t2.html

So JTESTDIR points to the root of the custom_components/alert2 directory with alert2 source code.
JTEST_JS_DIR points to the dir containing alert2.js. The server will listen on port 50005. The same setup applies to running t.html.

Btw, took a quick look at the diff, and I might suggest some minor variable renaming, but overall the diff looks good. When you do testing, you'll probably have to fix up some of the existing tests that have the ackbar text hardcoded and whatnot.

[redstone99]

A feature request was submitted to make it possible to change the icon of a firing alert. That raises the question, if we allow different colors for the icon of a firing alert, what is the policy for event alerts? For how long after an event alert fires should its icon be a different color?