Add a parent to replicas when selecting a resource

[adamint]

Fixes #1179

Adds a disabled parent to resource dropdowns for replicas in console log; structured log; traces, and metrics pages, per Leslie's idea.

Microsoft Reviewers: Open in CodeFlow

[JamesNK]

Overall it looks good.

The default disabled state is a little too transperent. Can you reduce it a bit?

[JamesNK]

It doesn't look that great in dark mode:

The dark background of unselected menu items looks odd. I checked the main branch and it looks the same so it's not a regression in this PR.

However, if I switch between light and dark mode in the app without refreshing the page then they disappear.

@tlmii I think you did the style here. What is it supposed to look like?

[tlmii]

@tlmii I think you did the style here. What is it supposed to look like?

I think I see what's going on, but I'm not quite sure why yet. I'll take a look.

[tlmii]

@tlmii I think you did the style here. What is it supposed to look like?

I think I see what's going on, but I'm not quite sure why yet. I'll take a look.

Alright, I tracked down what's going on. I think there's a bug in the fluentui styles (in the web components, not the blazor components). I've posted to the discord to ask if I'm on the right track and to see if I should file an issue.

To be clear, it shouldn't really look like either of these images. It should get the floating layer background color, and it partially does when loaded (hence the lighter "frame"). But it loses it when you change styles, and even on first load it doesn't correctly set the items themselves to have the floating layer background color.

I should also note, I'm a little worried about using disabled items for things you want to actually be readable. There's no contrast guarantees for disabled elements, so the color recipes don't handle it (and the a11y tools wouldn't actually flag it). We'd need to override for ourselves.

[adamint]

I should also note, I'm a little worried about using disabled items for things you want to actually be readable. There's no contrast guarantees for disabled elements, so the color recipes don't handle it (and the a11y tools wouldn't actually flag it). We'd need to override for ourselves.

@leslierichardson95

Since this is a purely cosmetic addition, we could also add screen-readable information to the individual replica options that mention that it is a replica. I think this would be acceptable

[adamint]

I added a label to replica options that notes that they are part of a replica set.

[adamint]

@tlmii is the disabled transparency part of the styling issues you're talking about?

[tlmii]

@tlmii is the disabled transparency part of the styling issues you're talking about?

@adamint Not sure to what you're referring with "disabled transparency"? The contrast issues I mentioned (the lighter color of the text for disabled items) is separate from the styling bug in the underlying component. Though I think fixing the bug will make the contrast worse because the background color is supposed to be lighter than it is right now.

[adamint]

Ahh, I see. Increased opacity in both light and dark themes:

[JamesNK]

Setting this variable is a global change. Is it possible to limit the scope?

[adamint]

I haven't found a way to do that, considering fluentui-blazor applies the color directly to the elements, and I don't think any selector is specific enough to override a style applied directly to an element?