Skip to content

Telescopetest-io: Improve metrics tab display and clean up bloated components #178

Merged
sergeychernyshev merged 16 commits intocloudflare:mainfrom
Judyzc:fix-metrics-tab
Mar 12, 2026
Merged

Telescopetest-io: Improve metrics tab display and clean up bloated components #178
sergeychernyshev merged 16 commits intocloudflare:mainfrom
Judyzc:fix-metrics-tab

Conversation

@Judyzc
Copy link
Copy Markdown
Contributor

@Judyzc Judyzc commented Mar 5, 2026

Also did a lot of file/naming cleanup, which made this PR kind of ugly:

  • Deleted all unnecessary components/metrics astro files
  • Renamed Summary.astro component to MetricCard.astro
  • Renamed MetricSection.astro component to Section.astro
  • Renamed lib/types/results.ts to lib/types/metrics.ts, now this file is just for metrics
  • Separated CWV calculations from other performance and web vital calculations

Additional things to add in future:

  • Make user timing marks vertical ticks on the navigation timing visualization

Closes #191

@Judyzc Judyzc force-pushed the fix-metrics-tab branch from be46c18 to 7157e2d Compare March 6, 2026 16:54
@Judyzc Judyzc requested a review from a team March 6, 2026 16:54
@Judyzc Judyzc force-pushed the fix-metrics-tab branch 2 times, most recently from 15ed284 to c858821 Compare March 9, 2026 19:10
Copy link
Copy Markdown
Member

@sergeychernyshev sergeychernyshev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We did discuss a few changes off-line. Let me know when you have those ready and we can merge.

@Judyzc Judyzc force-pushed the fix-metrics-tab branch from 29b5523 to 6603e79 Compare March 9, 2026 22:45
Copy link
Copy Markdown
Member

@sergeychernyshev sergeychernyshev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

More changes, unfortunately - see comments inline.

I also could not find where it is, but I can't see loadEventStart on the chart - it is listed in the timestamps, but when I hover over it, nothing is highlighted.

Comment thread telescopetest-io/src/lib/utils/navTiming.ts Outdated
Comment thread telescopetest-io/src/lib/utils/navTiming.ts Outdated
Comment thread telescopetest-io/src/lib/utils/navTiming.ts Outdated
Comment thread telescopetest-io/src/components/AllMetrics.astro Outdated
Comment thread telescopetest-io/src/lib/utils/navTiming.ts Outdated
Comment thread telescopetest-io/src/lib/utils/navTiming.ts Outdated
Comment thread telescopetest-io/src/lib/utils/navTiming.ts Outdated
Comment thread telescopetest-io/src/lib/utils/navTiming.ts Outdated
@Judyzc Judyzc requested a review from sergeychernyshev March 11, 2026 21:58
Copy link
Copy Markdown
Member

@sergeychernyshev sergeychernyshev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am seeing inconsistent measurements, e.g. derived metrics (specifically DCL and Page Load) are not displayed with the correct values,

Image

@sergeychernyshev
Copy link
Copy Markdown
Member

I also see some font overlap among the metrics (my browser's font size is increased and not a default) - it looks like you're hard-coding the height of each line for each metric, as inline styles - it is probably better to let them be laid out naturally by putting them in the same div one after another and just setting the left position to match the vertical lines.

Screenshot 2026-03-12 at 10 40 01 AM

@sergeychernyshev
Copy link
Copy Markdown
Member

I do see "TTFB (responseStart)" label for derived metric, but not for DCL or Page Load

Screenshot 2026-03-12 at 10 42 54 AM

@sergeychernyshev sergeychernyshev self-requested a review March 12, 2026 18:00
Copy link
Copy Markdown
Member

@sergeychernyshev sergeychernyshev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe we're good to go for this second pass with a fun diagram!

🚀 🚀 🚀 🚀 🚀 🚀 🚀 🚀 🚀

@sergeychernyshev sergeychernyshev merged commit f1d07a2 into cloudflare:main Mar 12, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Test Results - Metrics

2 participants