Adds orange/red warning/error icons for exited resources on resources dashboard page

[adamint]

Fixes #533

Adds warning icon to exited resources with a zero or null exit code, and an error icon (and tooltip that mentions the exit code) to exited resources with a non-zero, non-null exit code.

The badge is clickable and takes you to console logs for that resource.

Microsoft Reviewers: Open in CodeFlow

[leslierichardson95]

Looks good overall! My one suggestion: can we change the icon in the orange example to either the same exclamation point as the red or to something else? I was a little confused about which icon represented the error and which represented the warning otherwise

[tlmii]

Out of curiosity, are we aware of any prior art of other applications showing the exit code from a process in the UI? I'm almost tempted to see what it'd look like to put the actual exit code in the badge (if it is an error; leave it as an icon if it is not).

Also, #533 suggested changing the background color when it is in a finished state as well. Did you think the icon was sufficient instead?

[JamesNK]

How come the icons are inside a badge instead of being a "filled" icon? That's consistent with the icons displayed in structured logs and console logs.

[adamint]

How come the icons are inside a badge instead of being a "filled" icon? That's consistent with the icons displayed in structured logs and console logs.

We can do this, but realistically requires us to remove the ability to click - we have a fairly widespread problem with icons with clickable parent divs that are non-compliant (which I accidentally contributed to here, oops! see #1392), and the real solution here is a binary: if we want to make an icon clickable, it needs to be turned into a button, and if we want to use a filled icon, the icon cannot be clickable.

I'll convert to a filled icon and disallow clicking.

@JamesNK

[RussKie]

Please make sure the colours are colourblind-friendly. Also, please keep the accessibility in mind - some users rely on assistive technology (e.g., screen readers, etc.).

[adamint]

Please make sure the colours are colourblind-friendly.

This was not a requirement I was aware of. We use red pervasively throughout the dashboard to indicate error. However, the redness is not the only indication of the state, which I thought made us compliant. @RussKie

Also, please keep the accessibility in mind - some users rely on assistive technology (e.g., screen readers, etc.).

Yes, keyboard navigability and screen-reader support is one of the items I'm working on this sprint.

[adamint]

Ok, this is ready for another look. I put the warning and error icons before the state, and they have tooltips. They are not clickable.

I added an anchor to the badge, so it appears as a direct link.

@leslierichardson95 @tlmii @leslierichardson95

addressed feedback, approved by leslie

[kvenkatrajan]

https://private-user-images.githubusercontent.com/20359921/292006514-7e6eff57-401d-4f8a-a69f-3bd514b7a365.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDQyMTQ2MTcsIm5iZiI6MTcwNDIxNDMxNywicGF0aCI6Ii8yMDM1OTkyMS8yOTIwMDY1MTQtN2U2ZWZmNTctNDAxZC00ZjhhLWE2OWYtM2JkNTE0YjdhMzY1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAxMDIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMTAyVDE2NTE1N1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPThlODQ1MmIwZjNjNWExNWE3YjI2YzMyODNlM2YyMmNlNzMzZDE2ZDNkOGZiZDBlZTM5YjI5YWU2NWJmZTk0MjkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.LM9OtcItLuivmHWfh0rY5Z7rknpT7TqlSpSAtHBypC4

Can we look to align the text where icons are displayed on the right with that of the text where icons are not displayed. Currently looks a bit staggered in the display. Also the Running status withdisplay of (3) is much larger than the icons displayed on the left. Can itbe made the same size as the error and warning icons?

[tlmii]

@kvenkatrajan I had a similar thought, so I went ahead and created a new issue from your comment: #1534