Workflow Component

The workflow component is used by the Workflow view. This component uses Lumino to show other components inside "widgets".

Adding a new widget

When is your new widget created?

Widgets are added in the Workflow.vue view. This view is bound to a VueRouter route, so it has the lifecycles of both a Vue Component (e.g. beforeUpdate), and of a VueRouter route (e.g. beforeRouteEnter).

By default a Tree widget is created and added to the view when it is loaded (beforeRouteEnter of a VueRouter route). Other widgets are created when the user clicks on a button in the UI.

The buttons where the user clicks to add new widgets are not in the Workflow.vue view, but in the cylc/workflow/Toolbar.vue component. This component is displayed at the top of the Workflow view, and has a drop down with the valid widgets to be added to a workflow.

You can now choose whether your new widget is created when the page is loaded, or when the user clicks on a widget type.

Widget tab title

The name displayed in the tab is, by default, the Vue component name. But that can be customized when the component is used in a tempalte.

For example, the Tree.vue component name is “Tree”. Here's how we use this component in the Workflow.vue view template.

<v-skeleton-loader
  v-for="widgetId of treeWidgets"
  :key="widgetId"
  :id="widgetId"
  :loading="isLoading"
  type="list-item-three-line"
  tab-title="tree"
>
  <tree-component
    :workflows="tree.root.children"
  />
</v-skeleton-loader>

Note that we are already defining a title for the tree component tab, as “tree” (lower cased).