feat: display script checks in Validator

[cristianoventura]

This PR implements a function that listens for the script:check event and populates the new Check tab on the Validator component. Ticket: https://github.com/grafana/k6-cloud/issues/2822

• Run a script, such as the one in the snippet below
• Go to the Checks tab and validate that the checks are being grouped and displayed appropriately

script for testing

import http from 'k6/http';
import { check, group } from 'k6'

export default function () {
  let resp
  resp = http.get('https://test.k6.io');

  check(resp, {
    "is status 200": (r) => r.status === 200,
  });

  group('group 1', function () {
    resp = http.get('https://test.k6.io');

    check(resp, {
      "is status 300": (r) => r.status === 300,
    });

    check(resp, {
      "is status 400": (r) => r.status === 400,
    });
  });

  group('group 2', function () {
    resp = http.get('https://test.k6.io');
    check(resp, {
      "is status 200": (r) => r.status === 200,
    });

    check(resp, {
      "is status 500": (r) => r.status === 500,
    });
  });
}

[cristianoventura]

I'm not sure if this is expected or a bug but subgroups are not being sent to this channel script:check.

export default function () {
 ...
  group('group', function () {
    group('subgroup', function () {
      resp = http.get('https://test.k6.io');
      check(resp, {
        "is status 504": (r) => r.status === 504,
      });
    });
  });

[Llandy3d]

bug on the logic, apparently groups can have another groups subsection that need to be checked 👍

[cristianoventura]

Something is going on with syntax highlighting in Github for new files🤔 Any ideas what it could be?

[cristianoventura]

Despite the script:check event not currently sending subgroups, the front-end is handling them.

[cristianoventura]

Not sure if this is the best UX. Alternatively, we could display the percentage in the row and use the number of passes/fails in the tooltip.

[going-confetti]

IMO showing this info in the row is better - the checks tab doesn't have high information density, so hiding it isn't necessary.
Here's what we do in the plugin

And here's a screenshot from k6 cli (which actually makes me wonder if we need to show 100% success rate at all - there doesn't seem to be any value in that)

[going-confetti]

Can passes + fails ever be 0?

[cristianoventura]

I don't think so but, let me add a safe guard here.

[going-confetti]

Suggestion: since checks are populated once the run is finished, maybe it's worth showing the number of checks similarly to how we show the number of logs - this will help the user understand whether they even need to look at that tab.

Here's how we show it in GCk6:

[going-confetti]

IMO showing this info in the row is better - the checks tab doesn't have high information density, so hiding it isn't necessary.
Here's what we do in the plugin

And here's a screenshot from k6 cli (which actually makes me wonder if we need to show 100% success rate at all - there doesn't seem to be any value in that)

[Llandy3d]

Looks great, I agree with uladzimir suggestions!

is there a specific reason why passes/fails are shown for groups except default ? 🤔

[cristianoventura]

@Llandy3d @going-confetti Made changes based on the feedback. I think there's room for improvement especially around the collapsible component and the table header potentially being confusing depending on how many checks are being listed.

Let me know what you think.

Screen.Recording.2024-09-09.at.10.59.43.AM.mov

[Llandy3d]

🚀 🚀 🚀

The :: separator is a k6 specific thing and I don't think I would use it in the UI as well 🤔

For the other things, I think it looks good, for the time we have to dedicate now it looks better than expected (the alternative being showing the end of test summary in a raw state) so I think that this PR is ready to be merged 🙌

[going-confetti]

LGTM!