Skip to content

Development

Jump to bottom
Bruno P. Kinoshita edited this page Sep 24, 2021 · 14 revisions

Notes about Cylc UI development. For a higher-level overview of the architecture, take a look at this Wiki page.

Yarn 3 and node_modules

We upgraded to Yarn 3 but we have not replaced node_modules by the Yarn Plug'N'Play. That should be possible but work on that hasn't started yet.

Analyzing UIS deltas

It can be challenging to capture the deltas from the UIS when there are integration issues. If you are working on an issue that requires you to inspect several deltas received, you may find this workflow useful:

  1. Remove other components that have subscriptions, like GScan. That reduces the number of messages, and if you can still see the bug on another component like the Tree view, you already know GScan was not part of the problem. You can comment out the component from Drawer.vue for instance.
  2. Open a fresh tab using the final URL of the view you want to collect deltas.
  3. Set a debugger statement somewhere in the code where the bug happens. For example, if you are working on an issue where a node is missing its parent, you can modify the code using an if (!parent) { debugger }.
  4. Start your workflow. Now your view in the browser should start receiving deltas.
  5. Stop the workflow once you see the debugger starting. This way you won't have any more incoming deltas.

At this point you should have every delta collected in the Network tab. Just search by a regex string such as 20010101\|task (you must escape the |). Copy the message somewhere like https://jsonformatter.org/ to format the JSON delta, and now you should be ready to start inspecting the filtered deltas. Good luck!

Sending deltas to the UI manually

This is a useful trick if you have the UI with not too many incoming deltas, for example if you are using the offline mode with yarn run serve or if you have no running workflows.

In the development mode we expose the App.vue component as window.app. That gives you direct access to the top level component even without the Vue Dev Utils. Since each component contains properties such as $store and $route (Vuex and Vue Router respectively) we can use it to send a delta and see what happens with the UI (we can also use debugger in some part of the code to debug the UI!)

  1. Copy the delta using the network tab, or if you prefer write the delta yourself.
  2. Get the payload.data part of the delta, leaving only { deltas: { id: ... } }.
  3. Choose the Vuex action or callback you want to use (e.g. workflows/applyGScanDeltas).
  4. Use the pattern window.app.$store.dispatch($ACTION_CALLBACK, $DELTA) to send your delta

For example:

window.app.$store.dispatch('workflows/applyGScanDeltas', {
  "deltas": {
    "id": "kinow|749-hilary/run5",
    "added": {
      "__typename": "Added"
    },
    "updated": {
      "workflow": {
          "id": "kinow|749-hilary/run5",
          "name": "749-hilary/run5",
          "status": "running",
          "owner": "kinow",
          "host": "",
          "port": 0,
          "stateTotals": {
            "waiting": 99,
            "expired": 1,
            "preparing": 0,
            "submit-failed": 0,
            "submitted": 0,
            "running": 3,
            "failed": 0,
            "succeeded": 79
          },
          "latestStateTasks": {
            "failed": [],
            "preparing": [
              "fetch_nc_wind_bl0.20201210T12",
              "fetch_nc_wind_bl1.20201210T12",
              "fetch_nc_wind_bl2.20201210T12",
              "merge_nc_nwpb_aux.20201210T06",
              "merge_nc_b_wind.20201210T06"
            ],
            "submit-failed": [],
            "submitted": [
              "fetch_nc_wind_bl2.20201210T12",
              "fetch_nc_wind_bl1.20201210T12",
              "fetch_nc_wind_bl0.20201210T12",
              "merge_nc_nwpb_aux.20201210T06",
              "merge_nc_b_wind.20201210T06"
            ],
            "running": [
              "fetch_nc_wind_bl0.20201210T12",
              "fetch_nc_wind_bl1.20201210T12",
              "fetch_nc_wind_bl2.20201210T12",
              "merge_nc_nwpb_aux.20201210T06",
              "merge_nc_b_wind.20201210T06"
            ]
          },
          "__typename": "Workflow"
        },
      "__typename": "Updated"
    },
    "pruned": {
      "__typename": "Pruned"
    },
    "__typename": "Deltas"
  }
})

Debugging with an IDE

You should be able to debug the development build (sourcemaps are not present in production) using the debugger statement. But if you use an IDE that supports running the unit tests, or even running the application, or if you connect to a running browser (Firefox has this option), the debugger may not stop in your breakpoints.

This is a known issue with our current sourcemaps configuration. See this note on how to modify one line to get the debugger to work: https://github.com/cylc/cylc-ui/blob/d86f687075b49da1136ff302acbcad58c974d877/vue.config.js#L77-L83

This is useful when you have a unit test and want to set breakpoints in your IDE in some source file like GScan.vue.

Dependabot

At the moment Dependabot is still missing Yarn 2 and Yarn 3 compatibility. We migrated to Yarn 3 due to issues with build & development dependencies (VuePress, Cypress on MacOS), which causes the Dependabot bot to fail to create ready-to-merge pull requests.

To work around this issue, you can do the following:

  • Check out the branch from dependabot (there should be a link in the pull request under the title, just click the clipboard/copy icon)
  • git checkout master yarn.lock (assuming your master branch is up to date with upstream)
  • yarn install
  • git commit -am 'Update yarn.lock with Yarn 3'
  • git push

Now wait for the bot to pick up your changes, and if CI is OK it should be good to go. There are some dependencies that cannot be updated due to compatibility issues with Vue, Vuetify, Vue-CLI, sass, etc. So waiting for CI before merging is always a good idea.

If the dependency changed is Vue, Vuetify, or another library you consider important or unstable (e.g. version 0.xx) it might be a good idea to check out the pull request locally and try - at least - the yarn run serve command and have a quick navigation in the UI. Look for errors in the browser console too.

Clone this wiki locally