Clearer attribute selection from a list of icinga objects

[ollytom]

Given a, say, service group consisting of 4 services, the following selections can be made for which attribute could be rendered in a card:

• name
• state
• source.0.attrs.action_url
• source.0.attrs.display_name
• ...
• source.1.attrs.action_url
• source.1.attrs.display_name
• ...
• source.2.attrs.action_url ...

You get the idea. From these options, what is "source.2"? I know that it's 3rd object (index 2 counted from 0) from the collection of objects from the service group, but that's only because I just wrote the code for it a couple hours ago. I'll probably forget it soon.

A clearer representation could involve using the optgroup element within the <select> menu. Instead of the index in a list (source.0) we could use a unique key - the object name - to group attributes in the menu. Using the example from above:

<select>
    <optgroup label="www.example.com">
        <option>action_url</option>
        <option>display_name</option>
    </optgroup>
    <optgroup label="app.example.org">
        <option>action_url</option>
        <option>display_name</option>
    </optgroup>
    <!-- same for the rest of the objects... -->
</select>

The value of each option element would still need to be that full selector expression e.g. source.0.attrs.action_url so that the frontend can reliably decode which attribute it needs to render. But the displayed text could be the expression with some prefix trimmed, such as attrs.action_url instead of source.0.attrs.action_url.

Some pseudocode:

expr = "source.0.attrs.action_url";
text = trimPrefix(expr, "source.0.");
<optgroup label={source.0.name}>
    <option value={expr}>{text}</option>
    ...