feat(collector): revamp stability tab and distribution availability#399
feat(collector): revamp stability tab and distribution availability#399DCchoudhury15 wants to merge 1 commit into
Conversation
✅ Deploy Preview for otel-ecosystem-explorer ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
ce05cf8 to
cb46b97
Compare
|
Hi @jaydeluca, the PR replaces the old card-based stability view with a signal/level table driven purely from the YAML, revamps the distribution section with cards showing install commands for contrib, core and k8s, and removes the Ownership tab. One thing worth double checking is the |
There was a problem hiding this comment.
Pull request overview
This PR updates the Collector component detail page “Stability” tab to present stability information in a more structured way and expands distribution availability into richer, actionable cards, while removing the no-longer-useful Ownership tab.
Changes:
- Replaced the previous stability cards with a signal-to-stability table and added a stability legend filtered to the component’s used levels.
- Revamped “Distribution Availability” from simple badges into cards with descriptions, install commands, and documentation links (including tailored info for core/contrib/k8s).
- Removed the Ownership tab from the collector detail page UI.
| beta: { | ||
| label: "Beta", | ||
| desc: "Ready for production use. Features are largely stable, though minor changes might occur.", | ||
| color: "text-green-500", | ||
| }, | ||
| stable: { | ||
| label: "Stable", | ||
| desc: "Fully supported for production use. Backwards compatibility is guaranteed.", | ||
| color: "text-emerald-600 dark:text-emerald-500", | ||
| }, | ||
| deprecated: { | ||
| label: "Deprecated", | ||
| desc: "Scheduled for removal. Should no longer be used.", | ||
| color: "text-red-500", | ||
| }, | ||
| unmaintained: { |
| {dynamicSignals.map((signal) => ( | ||
| <th | ||
| key={signal} | ||
| className="bg-muted/50 rounded px-2 py-1 text-sm font-medium" | ||
| className="border-border/60 text-muted-foreground border-b p-4 font-semibold capitalize" | ||
| > | ||
| {signal} | ||
| </span> | ||
| {signal.replace(/_/g, " ")} | ||
| </th> |
| <div className="grid gap-6 md:grid-cols-2"> | ||
| {component.status.distributions.map((dist) => { | ||
| const distInfo = getDistributionInfo(dist); | ||
| return ( | ||
| <div |
cb46b97 to
67c59bb
Compare
67c59bb to
dec9833
Compare
|
Hi @jaydeluca, just pushed up the fixes for the copilot comments. I swapped the legend over to use the GlowBadge component so it perfectly matches the table, added the scope="col" attribute to the headers for screen readers, and cleaned up the column names so they read a bit better. I also added in a quick fallback state just in case a component has an empty distributions array. Ready for another look whenever you have time! |
|
thanks @DCchoudhury15. I've reached out and asked for someone who is closer to the collector project to weigh in on how we might best visualize the stability elements. It might be a few days before he is able to get to it, but wanted to let you know we're going to just keep this on hold until we can get that feedback. thanks for your patience! |
Closes part of #330
Revamped the Stability tab on the collector detail page: