Skip to content

Development

Jump to bottom
Ronnie Dutta edited this page Jun 30, 2023 · 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.

Debugging unit tests in VSCode

You can open the JavaScript debug terminal and run the test file in it.

  1. Add a red dot breakpoint by clicking in the gutter

  2. Go to the "Run and Debug" sidebar panel and click the dropdown and choose "JavaScript debug terminal", then click the play button

    image

  3. In the terminal run the test task you are debugging e.g. yarn test:unit tests/unit/my.spec.js

Dependency updates

At the moment Dependabot is still missing Yarn 2 and Yarn 3 compatibility. So we now use Rennovate to handle Yarn dependencies (Dependabot still does GitHub Actions dependencies).

For Renovate pull requests, if CI passes it should be good to go. However, there will be some dependencies that cannot be updated due to compatibility issues with Vue, Vuetify, Vue-CLI, sass, etc. 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, build for production (yarn run build), and have a quick navigation in the UI. Look for errors in the browser console too.

Clone this wiki locally