follow up 101 (task icons)

[hjoliver]

From bottom of description in #101

(We should either replace this issue with multiple separate issues, or turn the following into a
check-point list and address with multiple PRs)

TODO (future work)

• Incorporate into views.
  • Work out how we are going to feed data into these components (e.g. props or whatever).
• Animate state changes (see Task &/or job state transition monitoring #127)
  • Pure CSS probably wont be enough.
  • [edit] Actually CSS is probably the best bet, we are now using CSS animations to set the clock-face position.
  • More below...
• Add the more eccentric task states (expired, queued, retrying) and the held badge.
  • Expired and queued are easy, the rest will require a dig into the Cylc Flow code to see what separation is possible with the current internals of Cylc.
• (theme: job icons #134) Extract the <style> from the Job component to make it theme-able.

[kinow]

I think I can raise a PR for the first item about props.

[kinow]

I think I can raise a PR for the first item about props.

Done: #110

[oliver-sanders]

Support for held and retrying states is blocked by:

• graphql: wishlist cylc-flow#3223

[hjoliver]

Suggested icon design for expired task state (carried forward from #201):

[oliver-sanders]

The last thing on this issue is animation of state changes.

It might be useful to highlight state changes to make them more obvious to the user. IIn particular changes to the failed and submit-failed states.

Any animations would need to be minimal and subtle to avoid becoming more hindrance than help.

We are using CSS animations to set the clock-face position as the task is running. We have had to limit the number of frames for performance reasons so animations should be short lived and easy to compute too.

Suggest a quick, simple size or colour change.

[oliver-sanders]

The last point is covered by #127 so closing this umbrella issue.