Feat; filter collectors jobs by status

[Jamesbarford]

Adds the ability to filter jobs in a collector by status;

[Kobzol]

Good idea! I would perhaps use CSS to make the button look differently when it's enabled/disabled, as opposed to adding a checkbox, but that's not super important.

[Kobzol]

Sets don't fully work reactively with ref, because the watching is not "deep" (https://github.com/orgs/vuejs/discussions/10834).

I would suggest representing the state in a structurally more straightforward way, as we do elsewhere in the frontend:

const filter: Ref<{[index: keyof BenchmarkJobStatus]: boolean}> = ref({
  InProgress: true,
  Queued: true,
  Success: true,
  Failed: false,
});

plus something like this:

function toggleJobStatusFilter(status: BenchmarkJobStatus) {
  filter.value[status] = !filter.value[status];
}

You can then index into filter[status] to see if the status value is enabled or not.

[Jamesbarford]

The set did work, I have changed it to how you have suggested. Though I have filtered out both Failed and Success

[Kobzol]

Right, it did indeed track the inner modifications of the Set, but it's not ideal to track such inner state in Vue, the reactivity tracking works best when observing simple values and objects, and the set wasn't really needed here, so that's why I suggested removing it.

Btw I would prefer to show Failed jobs by default, we should make these highly visible and not hidden by default.

[Jamesbarford]

e1025b8 👍

[Kobzol]

Thanks!