Use <optgroup>s instead of hyphens

[ocket8888]

A small enhancement to tenant drop-down selection lists in Traffic Portal would be to use the HTML5 <optgroup> tag to group tenants by their parents. I'd suggest making "root" its own parent.

Example.:

<label for="tenant">Select a tenant</label>
<select id="tenant">
    <optgroup label="root">
        <option>root</option>
        <option>tenantWithNoChildren</option>
        <option>tenentWithTwoChildren</option>
    </optgroup>
    <optgroup label="tenantWithTwoChildren">
        <option>Child1</option>
        <option>Child2</option>
    </optgroup>
</select>

Rendered (in Firefox 63):

[rawlinp]

I agree we need to improve the "select a tenant" dropdown list, but I don't think this flattened layout would be best. The user would still have to bounce around the list to follow the hierarchy. If we could visualize the full tree (unflattened) in a form that's not a list as it is today but more like an actual tree, the user could more easily follow the hierarchy down to the desired tenant. Something like a modal that pops up and renders a tree like this where you just have to click to select the tenant.

           __________________[root]____
           |                          |
[tenantWithTwoChildren]      [tenantWithNoChildren]
      |            |
[child1]         [child2]

That would be ideal but probably too much work unless there's a decent js library that exists for that already.

[ocket8888]

Could be implemented as an Angular Material "Tree"