feat: experimental - Studio Overview and Performance Widgets

[dthyresson]

Reworked the Studio overview and performance sections to do some metrics and visualizations.

Uses Tremor Line, Bar charts and Bar lists.

Overview counts "spans by brief" over time; icon by the type of span.

Performance does some line and bar charts to chart span duration over time with series by the span type:

[replay-io]

19 replays were recorded for 6c4c78d.

0 Failed

19 Passed

• requireAuth graphql checks

  locator.waitFor: Target closed
  =========================== logs ===========================
  waiting for locator('.rw-form-error-title').locator('text=You don\'t have permission to do that') to be visible
  ============================================================

• useAuth hook, auth redirects checks
• Check that a specific blog post is prerendered
• Check that about is prerendered
• Check that homepage is prerendered
• Check that meta-tags are rendering the correct dynamic data
• Check that rehydration works for page not wrapped in Set
• Check that rehydration works for page with Cell in Set
• Check that rehydration works for page with code split chunks
• Check that you can navigate from home page to specific blog post
• Waterfall prerendering (nested cells)
• RBAC: Admin user should be able to delete contacts
• RBAC: Should not be able to delete contact as non-admin user
• Smoke test with dev server
• Smoke test with rw serve
• Loads Cell mocks when Cell is nested in another story
• Loads Cell Stories
• Loads MDX Stories
• Mocks current user, and updates UI while dev server is running

View test run on Replay ↗︎

[dthyresson]

The colors for http and sql are too similar :) Changing sql to indigo.

[Josh-Walker-GM]

Tested locally, looks great!

I'd like to add some tremor tracker components at the top of the performance and error pages to give an instant visualisation of if each span type is performant or having errors. Future ideas though!