Draft
Conversation
…tab pages Split the monolithic result page into separate Astro pages per tab so each tab has its own URL (e.g. /results/:id/waterfall, /results/:id/metrics). - Extract shared ResultLayout.astro wrapping header, banners, overview, and tab nav - Extract loadTestResult() shared data loader (lib/loaders/testResult.ts) - Add in-memory LRU R2 cache (lib/cache/r2Cache.ts) to avoid re-fetching immutable test data across tab navigations within the same Worker isolate - Convert Tabs.astro from client-side button show/hide to <a> link navigation - Create per-tab pages: metrics, waterfall, resources, console under [testId]/ Closes #199
Contributor
There was a problem hiding this comment.
Pull request overview
This PR implements dedicated URLs for each result tab by splitting the monolithic results page into per-tab Astro routes while sharing a common layout and loader, and adds an in-isolate R2 JSON cache to avoid refetch/parsing between tab navigations.
Changes:
- Introduces
ResultLayout.astroandloadTestResult()to centralize shared result-page rendering/data loading. - Adds per-tab result pages (
/metrics,/waterfall,/resources,/console) and updates tabs to use link navigation. - Adds an in-memory LRU cache for parsed R2 JSON objects to reduce repeat work within the same Worker isolate.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| telescopetest-io/src/pages/results/[testId].astro | Refactors the summary tab to use ResultLayout and shared loader/cached R2 reads. |
| telescopetest-io/src/pages/results/[testId]/metrics.astro | Adds dedicated “All Metrics” page using shared loader/layout and cached metrics fetch. |
| telescopetest-io/src/pages/results/[testId]/waterfall.astro | Adds dedicated waterfall page using shared loader/layout. |
| telescopetest-io/src/pages/results/[testId]/resources.astro | Adds dedicated resources page and loads resources/metrics via cached R2 JSON. |
| telescopetest-io/src/pages/results/[testId]/console.astro | Adds dedicated console page and loads console messages via cached R2 JSON. |
| telescopetest-io/src/lib/loaders/testResult.ts | New shared loader for core test metadata, AI flags, screenshot existence, HAR browser info, and formatted date. |
| telescopetest-io/src/lib/cache/r2Cache.ts | New in-memory LRU cache for parsed R2 JSON + existence flags. |
| telescopetest-io/src/layouts/ResultLayout.astro | New shared layout encapsulating header/banners/overview/tab nav + client scripts. |
| telescopetest-io/src/components/Tabs.astro | Converts tabs from client-side toggles to <a> navigation with active state. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const { testId, test, isUnknown, isUnsafe, screenshotUrl, harBrowser, formattedDate } = result; | ||
|
|
||
| // --- Console Messages --- | ||
| const env = (Astro.locals as any).runtime.env; |
| } | ||
|
|
||
| .metrics-row { | ||
| grid-template-columns: 1fr; |
Comment on lines
+2
to
+5
| export interface Props { | ||
| testId: string; | ||
| activeTab: string; | ||
| } |
Comment on lines
+27
to
+33
| // Fast rough estimate — JSON.stringify length × 2 for UTF-16 | ||
| // Only computed once at insertion time. | ||
| try { | ||
| return JSON.stringify(value).length * 2; | ||
| } catch { | ||
| return 1024; // fallback for non-serialisable values | ||
| } |
| const testId = Astro.params.testId as string | undefined; | ||
| if (!testId) return null; | ||
|
|
||
| const env = (Astro.locals as any).runtime.env; |
| return Astro.redirect('/results'); | ||
| } | ||
| // --- Metrics (only needed for summary tab) --- | ||
| const env = (Astro.locals as any).runtime.env; |
| const { testId, test, isUnknown, isUnsafe, screenshotUrl, harBrowser, formattedDate } = result; | ||
|
|
||
| // --- Metrics --- | ||
| const env = (Astro.locals as any).runtime.env; |
| const { testId, test, isUnknown, isUnsafe, screenshotUrl, harBrowser, formattedDate } = result; | ||
|
|
||
| // --- Metrics (needed for navigationTiming) + Resources --- | ||
| const env = (Astro.locals as any).runtime.env; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Dedicated URLs for result tabs with shared layout, R2 cache, and per-tab pages
Split the monolithic result page into separate Astro pages per tab so each tab has its own URL (e.g.
/results/:id/waterfall,/results/:id/metrics).ResultLayout.astrowrapping header, banners, overview, and tab navloadTestResult()shared data loader (lib/loaders/testResult.ts)lib/cache/r2Cache.ts) to avoid re-fetching immutable test data across tab navigations within the same Worker isolateTabs.astrofrom client-side button show/hide to<a>link navigation[testId]/Closes #199
✨ AI-assisted