feat: Add Collector Home page#447
Open
justin212407 wants to merge 20 commits into
Open
Conversation
✅ Deploy Preview for otel-ecosystem-explorer ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Signed-off-by: justin212407 <charlesjustin2124@gmail.com>
| </Routes> | ||
| </Suspense> | ||
| </ErrorBoundary> | ||
| )} |
Member
There was a problem hiding this comment.
Stray )} with no matching opening, looks like a leftover from removing the {isEnabled("JAVA_CONFIG_BUILDER") && ( block. Either drop this line or restore the gated block above it.
Author
There was a problem hiding this comment.
I missed this out while resolving the merge conflicts. Fixed it.
Signed-off-by: justin212407 <charlesjustin2124@gmail.com>
Signed-off-by: justin212407 <charlesjustin2124@gmail.com>
Signed-off-by: justin212407 <charlesjustin2124@gmail.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a Collector landing page and splits the Collector component explorer into a dedicated route.
Changes:
- Introduces
CollectorExploreLandingwith stats, cards, CTA links, resources, loading, and error states. - Moves component browsing into
CollectorComponentsPagewith type/distribution query filters. - Updates routing so
/collectoris the landing page and/collector/components...serves explorer/detail routes.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
ecosystem-explorer/src/features/collector/components/collector-explore-landing.tsx |
Adds Collector landing UI and data loading. |
ecosystem-explorer/src/features/collector/components/collector-explore-landing.test.tsx |
Adds landing page tests. |
ecosystem-explorer/src/features/collector/collector-page.tsx |
Replaces explorer shell with Collector landing page shell. |
ecosystem-explorer/src/features/collector/collector-page.test.tsx |
Updates Collector page shell test. |
ecosystem-explorer/src/features/collector/collector-components-page.tsx |
Adds dedicated component explorer route/page. |
ecosystem-explorer/src/App.tsx |
Registers Collector landing, component explorer, and detail routes. |
Comments suppressed due to low confidence (1)
ecosystem-explorer/src/features/collector/collector-components-page.tsx:290
- These card links no longer match
CollectorDetailPage: the route passesversion/id, butcollector-detail-page.tsxstill readsdistribution/nameparams and the version from the query string. As a result, clicking any component opens the detail page with empty distribution/name and shows the error state instead of loading the component.
filteredComponents.map((comp) => (
<Link
key={comp.id}
to={`/collector/components/${currentVersion}/${comp.id}`}
Member
|
Hi @justin212407, quick follow up - did you have a chance to look at the results from Copilot's review? |
Author
Yes I am sorry i am working on making those changes, was a bit preoccupied with some other work, will make the fixes and push the changes soon |
Signed-off-by: justin212407 <charlesjustin2124@gmail.com>
Comment on lines
132
to
+136
| {isEnabled("COLLECTOR_PAGE") && ( | ||
| <> | ||
| <Route path="/collector/components" element={<CollectorPage />} /> | ||
| <Route path="/collector" element={<CollectorPage />} /> | ||
| <Route path="/collector/components" element={<CollectorComponentsPage />} /> | ||
| <Route |
Comment on lines
124
to
+128
| {isEnabled("COLLECTOR_PAGE") && ( | ||
| <> | ||
| <Route path="/collector/components" element={<CollectorPage />} /> | ||
| <Route path="/collector" element={<CollectorPage />} /> | ||
| <Route path="/collector/components" element={<CollectorComponentsPage />} /> | ||
| <Route |
Signed-off-by: justin212407 <charlesjustin2124@gmail.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 11 out of 11 changed files in this pull request and generated 2 comments.
Comments suppressed due to low confidence (3)
ecosystem-explorer/src/v1/V1App.tsx:143
- The implemented Collector detail route uses
/collector/components/:distribution/:name(with the version passed via theversionquery param in CollectorDetailPage), but the PR description documents/collector/components/:version/:id. Please align the PR description with the actual route shape, or update the route/table + detail page to match the documented URL structure.
<Route path="/collector" element={<CollectorPage />} />
{isEnabled("COLLECTOR_PAGE") && (
<>
<Route path="/collector/components" element={<CollectorComponentsPage />} />
<Route
path="/collector/components/:version"
element={<CollectorComponentsPage />}
/>
<Route
path="/collector/components/:distribution/:name"
element={<CollectorDetailPage />}
/>
ecosystem-explorer/src/features/collector/collector-components-page.tsx:157
- Detail links always include
version=${currentVersion}in the query string. Since CollectorDetailPage already falls back to the latest whenversionis absent, consider omitting theversionparam whencurrentVersionis the latest to keep canonical URLs stable and avoid baking a specific version into shared links unnecessarily.
const getDetailLink = (component: { distribution: string; name: string }) => {
const params = new URLSearchParams(searchParams);
params.set("version", currentVersion);
return {
pathname: `/collector/components/${component.distribution}/${component.name}`,
search: `?${params.toString()}`,
};
};
ecosystem-explorer/src/LegacyApp.tsx:135
- Routing here still defines the Collector detail route as
/collector/components/:distribution/:name(with version handled via theversionquery param in CollectorDetailPage), but the PR description documents/collector/components/:version/:id. Please update the PR description or adjust the route shape + detail page so the documented URLs match reality.
<Route path="/collector" element={<CollectorPage />} />
{isEnabled("COLLECTOR_PAGE") && (
<>
<Route path="/collector/components" element={<CollectorComponentsPage />} />
<Route
path="/collector/components/:version"
element={<CollectorComponentsPage />}
/>
<Route
path="/collector/components/:distribution/:name"
element={<CollectorDetailPage />}
/>
Comment on lines
+131
to
+137
| const handleVersionChange = (val: string) => { | ||
| const currentSearch = searchParams.toString(); | ||
| navigate({ | ||
| pathname: `/collector/components/${val}`, | ||
| search: currentSearch ? `?${currentSearch}` : "", | ||
| }); | ||
| }; |
| {componentsError || versionsError ? ( | ||
| <div className="flex flex-col items-center justify-center space-y-4 py-32 text-center text-red-500"> | ||
| <AlertCircle className="mx-auto h-12 w-12 opacity-50" aria-hidden="true" /> | ||
| <h3 className="text-xl font-semibold">Error loading data</h3> |
jaydeluca
reviewed
May 22, 2026
| <div> | ||
| <h1 className="mb-2 text-3xl font-bold md:text-4xl"> | ||
| <span className="bg-gradient-to-r from-[hsl(var(--secondary-hsl))] to-[hsl(var(--primary-hsl))] bg-clip-text text-transparent"> | ||
| OpenTelemetry Collector |
Member
There was a problem hiding this comment.
it looks a bit strange to have double headings, can we keep the gradient one?
Author
There was a problem hiding this comment.
Done...I have removed the card itself. This is how it looks like now with just the gradient heading.
|
|
||
| return ( | ||
| <> | ||
| <div className="border-border/60 bg-card/80 relative overflow-hidden rounded-xl border p-6"> |
Member
There was a problem hiding this comment.
can you add a back button to this page?
Signed-off-by: justin212407 <charlesjustin2124@gmail.com>
Signed-off-by: justin212407 <charlesjustin2124@gmail.com>
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.
closes #37
Summary:
This PR introduces a fully implemented OpenTelemetry Collector landing page and separates the Collector component explorer into its own dedicated route.
Changes:
Collector Landing Page
PageContainerBackButtonCollectorExploreLandingCollectorExploreLanding
Added a new landing component featuring:
/data/collector/index.jsonRouting Updates
Updated routing behavior so that:
/collector/collector/components/collector/components/:version/collector/components/:version/:idFilter Support
Added query parameter support for component filtering:
Screenshots:
Screencast.From.2026-05-11.23-46-47.mp4
Tests:
Verification:
Successfully ran: