Create a UI which visualizes workspace timings

[dannykopping]

Depends on #43

from coder/coder#14274

[BrunoQuaresma]

We use Chart.js in the UI for charts so we can use what they call Floating Bars. From what I can see, I think the backend could return data like:

[
  { "name": "docker_volume[0]", "startAt": "00:02:00", "endAt": "00:03:00"},
  { "name": "coder_agent.main", "startAt": "00:02:50", "endAt": "00:03:50"}
]

Wdyt?

[dannykopping]

Nice, that looks good 👍 seems like we can use the indexAxis attribute to make the bars horizontal instead of the vertical demo displayed on that page.

The data model also perfectly aligns with what we have in the database:

create table provisioner_job_timings
(
    job_id     uuid                         not null
        references provisioner_jobs
            on delete cascade,
    started_at timestamp with time zone     not null,
    ended_at   timestamp with time zone     not null,
    stage      provisioner_job_timing_stage not null,
    source     text                         not null,
    action     text                         not null,
    resource   text                         not null
);

[dannykopping]

Do you want to build out the backend API as well?

[BrunoQuaresma]

@dannykopping yes, that would be nice!

[BrunoQuaresma]

Related to the design I have two proposals in mind.

1. Collapse

We can add a collapse at the bottom of the agents to show the provisioning timings. It is a simple component and can be done quickly but, even if most of our users use only one agent for the workspace, we support multiple agents which in this case, would hide the collapse from the initial viewport hidden the feature from the user.

2. Bottom bar

We can change the workspace page to support a bottom bar that can be used for general workspace content that requires horizontal space such as build logs, an integrated terminal, and provisioning time. The bottom bar is the best option in my opinion, but it requires more work and some refactoring on the workspace page.

If you want to play around with the options, you can access the Figma design here.

[dannykopping]

These both look really nice. I personally find Option 1 more appealing since it's more discoverable and it shows the full time (3m40s), but both are great.

Keep in mind we'll soon be adding agent times as well (coder/coder#14630), so we might want to design this component accordingly; i.e. we might want to call it "Workspace Ready Time" to encompass both provision and startup time.

Also: we should hide all coder_ prefixed entries since those are pseudo-resources.

[spikecurtis]

What's with the colors of the bars? Is it just short is blue, medium is yellow, long is red? If so, I don't think it's helpful to encode the same data in multiple visual dimensions: we already can see how long they are by the horizontal size.

[BrunoQuaresma]

What's with the colors of the bars? Is it just short is blue, medium is yellow, long is red?

I was planning something like this or to use a different color for each bar to make them easy to distinguish.

If so, I don't think it's helpful to encode the same data in multiple visual dimensions: we already can see how long they are by the horizontal size.

Does that mean to not use colors based on the duration?

[spikecurtis]

Does that mean to not use colors based on the duration?

Yeah, if horizontal size corresponds to duration, then color doesn't also need to correspond to duration.

[BrunoQuaresma]

@spikecurtis , @chrifro did a few improvements on design: