Change traces page duration progress bar to a ring icon

[JamesNK]

Fixes #689

a11y requirements make the trace progress bar problematic. A potential replacement is to replace the progress bar with an icon.

Looks pretty good to me. Hopefully no a11y issues? 🙏 Has a benefit of being in the duration column so it's obvious what it's for. Some people either didn't notice the progress bar or didn't know what it meant.

Screenshot:

Thoughts?

The PR code is hacky. If we like this then I'll clean it up.

Microsoft Reviewers: Open in CodeFlow

[adamint]

Why is the FluentProgressRing component not being used? I would strongly suggest using it.

Overall, I do like this idea a lot

fyi: you can do a quick accessibility pass using Accessibility Insights for web

[JamesNK]

Why is the FluentProgressRing component not being used? I would strongly suggest using it.

FluentProgressRing doesn't have a way to change the stroke width, i.e. the thickness of the circle line. It is too thin when it is a small size and doesn't look good.

And FluentProgressRing doesn't support completing the remainder of the circle with another color. Without it, many rows have a small dot of purple which doesn't make sense. There is no indication it is part of a greater circle.

[adamint]

@vnbaaij are these improvements possible? I see these properties are configurable in other fluent ui wrappers

[adamint]

Could you double check that this passes Accessibility Insights check? I wonder if the svg needs labeling

[tlmii]

We can style most of the FluentProgressRing ourselves as is. This is with the FluentProgressRing and just giving a color to the rest of the ring. I didn't change the stroke width. I think it looks ok. This is with adding:

::deep fluent-progress-ring::part(background) {
    stroke: var(--neutral-fill-input-alt-active);
}

to the Traces.razor.css file on your branch, James.

[JamesNK]

Good improvement. I'll stick to my guns on it looking better with a thicker line.

How about using custom SVG for now, and if Fluent UI adds an option in the future for changing the stroke width, then we switch to FluentProgressRing?

[JamesNK]

Created a feature request for the FluentUI folks: microsoft/fluentui-blazor#1113

[tlmii]

We can get close to what you've got with just CSS. It's a little chunkier than yours because we can't change the viewbox, but this is 4px stroke width like yours:

::deep fluent-progress-ring::part(background) {
    stroke: var(--neutral-fill-input-alt-active);
    stroke-width: 4px;
    r: 6px;
}

::deep fluent-progress-ring::part(determinate) {
    stroke-width: 4px;
    r: 6px;
}

We do get a bunch of aria attributes with the FluentProgressRing that'll be helpful for accessibility... just need to add a title attribute and it'll pass, I think. But I'm fine either way. Just trying to provide options.

[JamesNK]

Updated to use progress ring control and passed a11y tool check.

[dvoituron]

We can get close to what you've got with just CSS. It's a little chunkier than yours because we can't change the viewbox, but this is 4px stroke width like yours:

This CSS seems correct, but the Value no longer corresponds to the result. For example, 50% no longer displays progress at 50% 😀 You need to add stroke-dashoffset.

[JamesNK]

Thanks, I see it's definitely off when I hardcode 25%, 50% and 75% values.

I don't think there is a constant stroke-dashoffset that works for all values. I tried some values out and the ring is either too big or too small at 25% and 75%. Lower-level support is needed in the control.

[dvoituron]

In deed, I'm looking into the possibility of adding a FluentprogressRing.Stroke property, which would be an enumeration of the "normal", " large", " thin" type. This would simplify management of this value.

[dvoituron]

See microsoft/fluentui-blazor#1113 (comment)

[dvoituron]

Will be included in the next release of FluentUI.Blazor lib.
See PR microsoft/fluentui-blazor#1121