workflows: add is_retry and is_held indicators

[oliver-sanders]

• Closes workflows: indicate held and retrying tasks #2350
• Adds workflow indicator icons which appear if the workflow contains any tasks in the retry and held states.

Requires:

• data store: add workflow is_retry and is_held indicators cylc-flow#7138

Check List

• I have read CONTRIBUTING.md and added my name as a Code Contributor.
• Contains logically grouped changes (else tidy your branch by rebase).
• Does not contain off-topic changes (use other PRs for other changes).
• Applied any dependency changes to both setup.cfg (and conda-environment.yml if present).
• Tests are included (or explain why tests are not needed).
• Changelog entry included if this is a change that can affect users
• Cylc-Doc pull request opened if required at cylc/cylc-doc/pull/XXXX.
• If this is a bug fix, PR should be raised against the relevant ?.?.x branch.

[oliver-sanders]

These are icons derived directly from the task modifiers in the SVGTask component which were transformed into the Vuetify icon format (single path, 24px square dimensions).

For info, quick runthrough of how to do this:

• Extract SVG as start point, save as file.
• Open in Inkscape.
• Apply configured CSS to objects.
• Convert objects to paths.
• Unify all paths into a single path.
• Rescale down to 24x24px.
• Export as optimised CSS.
• Reduce the sig fig precision until it breaks (3 in this case).
• Copy path (the d="..." bit) out of exported SVG.

I did export the transformed retry modifier pre-scaling.

This diff applies it to the `SVGTask`:

diff --git a/src/components/cylc/SVGTask.vue b/src/components/cylc/SVGTask.vue
index 43b6f1db..e5eca12c 100644
--- a/src/components/cylc/SVGTask.vue
+++ b/src/components/cylc/SVGTask.vue
@@ -231,10 +231,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         Circular arrow representing a retry.
       -->
        <g class="retry">
-        <!-- An arc describing the arrow -->
-        <path d="m25, 50 a30 30 1 1 1 25 30 "/>
-        <!-- The arrowhead -->
-        <polygon points="0,40 26,75 52,40, 25,46"/>
+         <path d="m55.8 14.4c-0.679-0.0166-1.36-0.0142-2.04 0.00781-3.63 0.117-7.28 0.787-10.8 2.04-12.5 4.43-21.4 15.4-23.5 28.2l-19.5-4.67 26 35 26-35-20.3 4.5c1.94-7.65 7.57-14 15.2-16.7 9.49-3.36 20-0.471 26.4 7.26 6.44 7.73 7.39 18.6 2.37 27.3-5.01 8.72-14.9 13.4-24.8 11.7a6 6 0 0 0-6.92 4.92 6 6 0 0 0 4.92 6.92c14.8 2.51 29.7-4.51 37.2-17.6 7.5-13 6.07-29.4-3.56-41-6.77-8.13-16.6-12.7-26.8-12.9z"/>
+         <!--
+           The path above is an optimised reuduction of:
+
+           An arc describing the arrow:
+           <path d="m25, 50 a30 30 1 1 1 25 30 " style="stroke-linecap="round"; stroke: 12px;" />
+           The arrowhead:
+           <polygon points="0,40 26,75 52,40, 25,46"/>
+
+           Created by converting both objects to paths, combining them, then
+           optmising.
+         -->
       </g>
 
       <!-- Wallclock
@@ -542,12 +550,6 @@ const modifierTransform = _getModifierTransform()
 
     &.retry .modifier {
       .retry path {
-        stroke: $foreground;
-        stroke-width: 12px;
-        stroke-linecap: round;
-      }
-      .retry polygon {
-        stroke: none;
         fill: $foreground;
       }
     }

However, I didn't include that in this PR because:

• Unnecessary change right now!
• Less maintainable (although it's pretty static, so maybe that doesn't matter).
• Profiling required to determine whether this is more efficient (what takes longer, the DOM or bezier maths?).

[wxtim]

You can check these on https://www.svgviewer.dev/ or similar:

[wxtim]

Nice!

[wxtim]

I've made a PR to this PR oliver-sanders#123 containing a test.

[wxtim]

• Read code
• Tried it manually
• Wrote test oliver-sanders#123

[MetRonnie]

Ah, dang, this breaks things for pre-8.6.2 workflows

Never mind, it turned out I needed to pull 8.6.x to bring in cylc/cylc-flow#7138 and restart my UI server

[oliver-sanders]

(phew)

[MetRonnie]

@wxtim some changes since your last review