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>
	...