Workflow Table View component

[hjoliver]

The Cylc 7 tree/table view has been replaced in Cylc 8 by a tree view where job details collapse into leaf nodes (that's cleaner and it works better with smaller viewports, including side-by-side tabs). However, some users still need to see the detail of all jobs at once, so we need a Cylc 8 table view.

basic requirements

• a cylc-ui workflow component widget
• delta-driven, via subscription to the common data store
• use the cylc-ui job icons (so linear progress bars not needed)
• configurable (which columns to show)
• task name and task state filtering
  • by name, state, and cycle point.
• column sorting
• (does not need a collapsible family tree at the left - unlike Cylc 7)
• needs a cyclepoint column
• one task/job per table row:
  • by default show the latest job of each task, i.e. one table row per task
  • but click on tasks to expand and show one table row per job

[hjoliver]

For reference, the Cylc 7 tree/table view (note the Cylc 7 GUI only showed the latest job of a task):

[hjoliver]

Suggested approach, for @giulianoserrao (@kinow might have better ideas!):

1. make a new workflow component widget that can be opened in our UI tabs like the treeview, but which initially requests no workflow data and just displays "hello world!" or whatever
2. learn how to register a data subscription (for the workflow data we want to display in the table view) with the shared UI data store, but initially just display the data as raw text. Play with GraphiQL in cylc-ui to see how data subscriptions work.
3. look for existing high-performance Vue.js or JS table view components that might work for us, possibly after modification
4. display the workflow data in the table. Note the table has to be updated reactively in response to incoming data deltas (i.e. just what changed in the workflow state).
5. mutations integration (click on tasks in the table and execute commands on them)
6. the details: look-and-feel, filtering, sorting

[kinow]

mutations integration (click on tasks in the table and execute commands on them)

For this item, see cylc-object directive in the existing components 👍

[hjoliver]

Will be closed by #672 and #861.

Further improvements can be follow-ups.