Add Status Class for Monitor Container in Status Page

[brooksvb]

📑 I have found these related issues/pull requests

Despite finding a couple issues related to status page CSS, nothing is related to specifically styling a monitor container based on its status.

🏷️ Feature Request Type

Status-page

🔖 Feature description

This feature mainly concerns customizing the CSS for status pages, and limitations that currently exist that could be easily solved.

In the following HTML of one of the items on a status page, the only indicator of status are the color classes. The first appearance of one of these classes is nested a few levels deep (see the bg-danger).

<div class="item" data-draggable="true">
    <div class="row">
        <div class="col-9 col-md-8 small-padding">
            <div class="info">
                <span class="badge rounded-pill bg-danger" title="24-hour">0%</span>
                <p class="item-name">Storage Server</p>
            </div>
            <div class="extra-info"></div>
        </div>
        <!-- Additional content -->
    </div>
</div>

CSS does not provide a mechanism to target a parent element for styles based on the presence of something nested at a deeper level, so it is practically impossible to apply any styles to the div.item element based on the status of the item.

✔️ Solution

The solution to this is to add an indicator on the div.item element. It can be a class (which doesn't necessarily need to apply any styles as long as it can be referenced for CSS targeting), or even a data prop. Examples:

<div class="item status-down" data-draggable="true">
    <div class="row">
        <div class="col-9 col-md-8 small-padding">
            <div class="info">
                <span class="badge rounded-pill bg-danger" title="24-hour">0%</span>
                <p class="item-name">LDT Instruments</p>
            </div>
            <div class="extra-info"></div>
        </div>
        <!-- Additional content -->
    </div>
</div>

or

<div class="item" data-draggable="true" data-status="down">
    <div class="row">
        <div class="col-9 col-md-8 small-padding">
            <div class="info">
                <span class="badge rounded-pill bg-danger" title="24-hour">0%</span>
                <p class="item-name">LDT Instruments</p>
            </div>
            <div class="extra-info"></div>
        </div>
        <!-- Additional content -->
    </div>
</div>

There should be an indicator for 3 statuses: up, down, and degraded. If the class or property exists, now I can style the container element differently based on status:

div.item.status-down {
  border: solid red 2px;
}
// or
div.item[data-status="down"] {
  border: solid red 2px;
}

❓ Alternatives

The only alternative is Javascript, which is not easily possible to inject in the status page.

📝 Additional Context

No response

[CommanderStorm]

CSS does not provide a mechanism to target a parent element

Actually, it does. Plese see :has which is supported in all major browsers.
https://css-tricks.com/the-css-has-selector/ shows the exact usecase you are presenting.
Please correct me if I am wrong ^^

[brooksvb]

Ah, you are absolutely correct and I forgot about it. Unfortunately ChatGPT didn't remind me about it either.

Despite that, it feels quite "hacky" to target particular statuses based on the classes that apply color. It would still be nice to have a concrete indicator (which would should be trivial to add in the Vue code).

[CommanderStorm]

Unsupprising, as firefox 121 (since when this is "all major browser"-supported) shipped in 2023 => after the cuttoff.

Idk about being hacky, given that I have no idea how our users use said feature (see #4456).
Adding something without a need seems like wasted engenering to me

[brooksvb]

I consider it hacky because using a color to indicate state programatically is a poor practice and prone to being broken in the future. If the styling of the status page items changes, or the styling library changes, or the exact class name; any of these things that should be unrelated to interpreting the state of the element will break existing custom styles that depended on it.

[CommanderStorm]

I don't think that we have stability guarantees for this feature.
Given how diverse the targeting of different elements via css is and what one might change, I don't think stability guarantees in this area make a lot of sense.

=> if you use this feature you will be broken at some point and I don't see a way around this. As stated above, we have no clue how people are actually using this (including what you are trying to do.. ).

using a color to indicate state programatically is a poor practice

Using the correct aria labels might be a better option.
Have not looked how accessible this part is, PRs welcome ^^

[brooksvb]

The example of what I was trying to do was add a colored border around items that are down. That requires targeting the container element.

Overall, it's not a huge issue. It would just be an very small addition (like literally adding about 12 characters to the Vue component) that would make custom CSS easier to write and read.

Not only would it be more readable to target the container element, but any children based on the state; eg. div.item[data-status="down"] .item-name vs div.item:has(.info > .bg-danger) .item-name

That's all I have to say. Thanks for considering.