feat: Add Collector Home page by justin212407 · Pull Request #447 · open-telemetry/opentelemetry-ecosystem-explorer

justin212407 · 2026-05-11T12:57:48Z

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

Replaced the previous Collector placeholder page with a Java Agent-style landing experience
Added:
- PageContainer
- BackButton
- Gradient page title and subtitle
- CollectorExploreLanding

CollectorExploreLanding

Added a new landing component featuring:

Hero section with “Explore Components” CTA
Component type cards with counts sourced from /data/collector/index.json
Distribution cards for:
- Core
- Contrib
Quick stats summary
External resource links
Loading and error states

Routing Updates

Updated routing behavior so that:

/collector
- Renders the new Collector landing page
/collector/components
- Renders the component explorer
/collector/components/:version
- Renders the component explorer for a specific version
/collector/components/:version/:id
- Renders component detail pages

Filter Support

Added query parameter support for component filtering:

/collector/components?type=receiver
/collector/components?distribution=core

Screenshots:

Screencast.From.2026-05-11.23-46-47.mp4

Tests:

Added tests for the Collector landing page
Updated Collector page shell tests

Verification:

Successfully ran:

bun run typecheck
bun run test -- src/features/collector

linux-foundation-easycla · 2026-05-11T12:57:55Z

The committers listed above are authorized under a signed CLA.

✅ login: justin212407 / name: Justin Charles (a5141a5)
✅ login: justin212407 / name: justin212407 (e675abc)

netlify · 2026-05-11T12:57:56Z

✅ Deploy Preview for otel-ecosystem-explorer ready!

Name	Link
🔨 Latest commit	`6654a1a`
🔍 Latest deploy log	https://app.netlify.com/projects/otel-ecosystem-explorer/deploys/6a076d327f462b00087d66dd
😎 Deploy Preview	https://deploy-preview-447--otel-ecosystem-explorer.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Signed-off-by: justin212407 <charlesjustin2124@gmail.com>

lucacavenaghi97 · 2026-05-11T19:51:59Z

                <Route
                  path="/java-agent/instrumentation"
                  element={<JavaInstrumentationListPage />}
                />


A handful of Java routes look removed by accident here: /java-agent/instrumentation/:version, /java-agent/instrumentation/:version/:name, /java-agent/configuration, /java-agent/releases (gated by JAVA_RELEASE_COMPARISON), and /java-agent/configuration/builder (gated by JAVA_CONFIG_BUILDER). The PR description only mentions collector routing, so probably collateral from the diff. Worth restoring before merge.

Restored this, as you suggested. Thanks for the lookout this was a major issue that i missed out while working upon the issue.

lucacavenaghi97 · 2026-05-11T19:51:59Z

-              </Routes>
-            </Suspense>
-          </ErrorBoundary>
+              )}


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.

I missed this out while resolving the merge conflicts. Fixed it.

lucacavenaghi97 · 2026-05-11T19:51:59Z

+              <Route path="/about" element={<AboutPage />} />
+              <Route path="*" element={<NotFoundPage />} />
+            </Routes>
+          </Suspense>


The matching </ErrorBoundary> was dropped here too. The boundary opened above is never closed, which is what's breaking the Netlify build.

Yeah i think i missed out too while resolving the merge conflicts.

Signed-off-by: justin212407 <charlesjustin2124@gmail.com>

Copilot

Pull request overview

Adds a Collector landing page and splits the Collector component explorer into a dedicated route.

Changes:

Introduces CollectorExploreLanding with stats, cards, CTA links, resources, loading, and error states.
Moves component browsing into CollectorComponentsPage with type/distribution query filters.
Updates routing so /collector is 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 passes version/id, but collector-detail-page.tsx still reads distribution/name params 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}`}

+  return (
+    <BrowserRouter>
+      <div className="bg-background flex min-h-screen flex-col">
+        <Header />
+        <main className="flex-1 pt-16">


+async function loadCollectorLandingStats(): Promise<CollectorLandingStats> {
+  const [indexResponse, versionData] = await Promise.all([
+    fetch("/data/collector/index.json"),
+    loadVersions(),
+  ]);
+
+  if (!indexResponse.ok) {
+    throw new Error(`Collector index request failed with ${indexResponse.status}.`);
+  }
+
+  const payload: unknown = await indexResponse.json();
+  const components = readCollectorComponents(payload);


+export function CollectorComponentsPage() {
+  const { version: urlVersion } = useParams<{ version: string }>();


-          <CollectorPageInner />
-        )}
+        </div>
+        <CollectorExploreLanding />


+  }, [components, distributionFilter, searchQuery, typeFilter]);
+
+  const handleVersionChange = (val: string) => {
+    navigate(`/collector/components/${val}`);


justin212407 requested review from a team as code owners May 11, 2026 12:57

justin212407 and others added 2 commits May 11, 2026 23:34

feat: Add Collector Home page

e675abc

Signed-off-by: justin212407 <charlesjustin2124@gmail.com>

Merge branch 'main' into collector-page

a5141a5

lucacavenaghi97 reviewed May 11, 2026

View reviewed changes

justin212407 and others added 7 commits May 13, 2026 02:36

fix: restore java routes]

42a04ce

Signed-off-by: justin212407 <charlesjustin2124@gmail.com>

Merge branch 'main' into collector-page

6048e19

Merge branch 'main' into collector-page

fdcf410

Merge branch 'main' into collector-page

ad53a22

fix: fix failing netlify build

45dd82e

Signed-off-by: justin212407 <charlesjustin2124@gmail.com>

fix: fix misaligned JSX

185f23a

Signed-off-by: justin212407 <charlesjustin2124@gmail.com>

Merge branch 'main' into collector-page

6654a1a

jaydeluca requested a review from Copilot May 18, 2026 10:55

Copilot started reviewing on behalf of jaydeluca May 18, 2026 10:55 View session

Copilot AI reviewed May 18, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add Collector Home page#447

feat: Add Collector Home page#447
justin212407 wants to merge 9 commits into
open-telemetry:mainfrom
justin212407:collector-page

justin212407 commented May 11, 2026

Uh oh!

linux-foundation-easycla Bot commented May 11, 2026 •

edited

Loading

Uh oh!

netlify Bot commented May 11, 2026 •

edited

Loading

Uh oh!

lucacavenaghi97 May 11, 2026

Uh oh!

justin212407 May 12, 2026

Uh oh!

lucacavenaghi97 May 11, 2026

Uh oh!

justin212407 May 12, 2026

Uh oh!

lucacavenaghi97 May 11, 2026

Uh oh!

justin212407 May 12, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		export function CollectorComponentsPage() {
		const { version: urlVersion } = useParams<{ version: string }>();

Conversation

justin212407 commented May 11, 2026

Summary:

Changes:

Collector Landing Page

CollectorExploreLanding

Routing Updates

Filter Support

Screenshots:

Tests:

Verification:

Uh oh!

linux-foundation-easycla Bot commented May 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify Bot commented May 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for otel-ecosystem-explorer ready!

Uh oh!

lucacavenaghi97 May 11, 2026

Choose a reason for hiding this comment

Uh oh!

justin212407 May 12, 2026

Choose a reason for hiding this comment

Uh oh!

lucacavenaghi97 May 11, 2026

Choose a reason for hiding this comment

Uh oh!

justin212407 May 12, 2026

Choose a reason for hiding this comment

Uh oh!

lucacavenaghi97 May 11, 2026

Choose a reason for hiding this comment

Uh oh!

justin212407 May 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

linux-foundation-easycla Bot commented May 11, 2026 •

edited

Loading

netlify Bot commented May 11, 2026 •

edited

Loading