Feat; attempt at rendering new status page

[Jamesbarford]

Caveat; I'm no UI designer/programmer.

An attempt at rendering something more useful on the new status page;

• queue
• completed requests
• collectors along with what they are working on

I think we may want to do a join from; job -> items in a benchmark set -> pstats. Then we can see what is going on at the job level. Also to give an estimate we'd want to do the same kind of query but take a sample of completed "pstats" to work out the duration per "pstat" that is currently in flight. We could then also estimate how long a job would take from that sample.

With in_progress requests

Idle collectors

[Kobzol]

Collectors look good! In terms of the queue, could you just reuse the old UI? I don't think that we need to change much there, the timeline was IMO working quite well. So I would transplant the old timeline here, move it to the left side of the page, and then show the collector and job state on the right side of the page.

I don't think that we need to show the individual steps anymore, it would be too much information IMO. So no need to load data from pstats or collector_progress (in fact I would remove collector_progress later).

BenchmarkRequestComplete, BenchmarkRequestInProgress and BenchmarkRequestArtifactsReady can be unified into just BenchmarkRequest.

[Kobzol]

I don't think that these constants are needed. This is one of the benefits of TS vs Rust, that it has string value as actual types. So you don't need the constant, you can just use the string literal (it's easier to read "completed" than typeof BenchmarkRequestComplete), and it will still be type-checked.

[Jamesbarford]

Interesting. I generally avoid using magic strings because modifying them across multiple locations can be tedious and error-prone. I'm happy to update everything to magic strings if that's your preference, though I personally prefer symbolic constants

[Jamesbarford]

Collectors look good! In terms of the queue, could you just reuse the old UI? I don't think that we need to change much there, the timeline was IMO working quite well. So I would transplant the old timeline here, move it to the left side of the page, and then show the collector and job state on the right side of the page.

I don't think that we need to show the individual steps anymore, it would be too much information IMO. So no need to load data from pstats or collector_progress (in fact I would remove collector_progress later).

BenchmarkRequestComplete, BenchmarkRequestInProgress and BenchmarkRequestArtifactsReady can be unified into just BenchmarkRequest.

Right think I've reached the limit of my UI capabilities here, I've done as you've requested and attempted to make it responsive depending on what screen size you are viewing on;

Small screen;

Medium screen;

Big screen

[Kobzol]

Hmm, interesting, I don't need the <any>props; thing, and the import source change breaks my build. Could you please post your output of npm list?

perf-rlo-ui@1.0.0 /projects/personal/rust/rustc-perf/site/frontend
├── @babel/types@7.24.5
├── @parcel/compressor-brotli@2.12.0
├── @parcel/transformer-vue@2.12.0
├── @types/msgpack-lite@0.1.11
├── date-fns@2.30.0
├── highcharts@11.4.1
├── msgpack-lite@0.1.26
├── parcel@2.12.0
├── prettier@2.8.8
├── sass@1.77.2
├── typescript@5.4.5
├── uplot@1.6.30
├── vue-tsc@1.8.27
└── vue@3.4.27

[Jamesbarford]

Hmm, interesting, I don't need the <any>props; thing, and the import source change breaks my build. Could you please post your output of npm list?

perf-rlo-ui@1.0.0 /projects/personal/rust/rustc-perf/site/frontend
├── @babel/types@7.24.5
├── @parcel/compressor-brotli@2.12.0
├── @parcel/transformer-vue@2.12.0
├── @types/msgpack-lite@0.1.11
├── date-fns@2.30.0
├── highcharts@11.4.1
├── msgpack-lite@0.1.26
├── parcel@2.12.0
├── prettier@2.8.8
├── sass@1.77.2
├── typescript@5.4.5
├── uplot@1.6.30
├── vue-tsc@1.8.27
└── vue@3.4.27

perf-rlo-ui@1.0.0 /rustc-perf/site/frontend
├── @babel/types@7.24.5
├── @parcel/compressor-brotli@2.12.0
├── @parcel/transformer-vue@2.12.0
├── @types/msgpack-lite@0.1.11
├── date-fns@2.30.0
├── highcharts@11.4.1
├── msgpack-lite@0.1.26
├── parcel@2.12.0
├── prettier@2.8.8
├── sass@1.77.2
├── typescript@5.4.5
├── uplot@1.6.30
├── vue-tsc@1.8.27
└── vue@3.4.27

This seems to pass in the pipeline?

[klensy]

Something wrong with bench durations on https://perf.rust-lang.org/status.html page, for example cargo:

cargo-0.87.1		0m 00.397s	0m 00.391s

clearly bench didn't run 0.4 sec.

[Kobzol]

Thanks! #2232 fixes it.