feat: optimize information hierarchy and implement progressive disclo… #395
+192
−48
There are no files selected for viewing
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -25,6 +25,8 @@ import { | |
| AlertCircle, | ||
| Loader2, | ||
| HelpCircle, | ||
| ChevronsDown, | ||
| ChevronsUp, | ||
| } from "lucide-react"; | ||
|
|
||
| import { BackButton } from "@/components/ui/back-button"; | ||
|
|
@@ -39,6 +41,8 @@ import { | |
| getSemanticConventionInfo, | ||
| getFeatureInfo, | ||
| } from "./utils/format"; | ||
| import { getBadgeInfo } from "./utils/badge-info"; | ||
| import { TelemetryBadges } from "./components/instrumentation-badges"; | ||
| import { TelemetrySection } from "./components/telemetry-section"; | ||
| import { TelemetryComparisonSection } from "./components/telemetry-comparison/telemetry-comparison-section"; | ||
| import { VersionSelector } from "./components/version-selector"; | ||
|
|
@@ -76,6 +80,8 @@ export function InstrumentationDetailPage() { | |
| const navigate = useNavigate(); | ||
| const [showComparison, setShowComparison] = useState(false); | ||
| const [activeTab, setActiveTab] = useState("details"); | ||
| const [expandVersion, setExpandVersion] = useState(0); | ||
| const [collapseVersion, setCollapseVersion] = useState(0); | ||
|
|
||
| const { data: versionsData, loading: versionsLoading } = useVersions(); | ||
|
|
||
|
|
@@ -156,6 +162,7 @@ export function InstrumentationDetailPage() { | |
| const displayName = getInstrumentationDisplayName(instrumentation); | ||
| const showRawName = | ||
| instrumentation.display_name && instrumentation.display_name !== instrumentation.name; | ||
| const badgeInfo = getBadgeInfo(instrumentation); | ||
|
|
||
| return ( | ||
| <PageContainer> | ||
|
|
@@ -217,6 +224,7 @@ export function InstrumentationDetailPage() { | |
| ? "Disabled by Default" | ||
| : "Enabled by Default"} | ||
| </GlowBadge> | ||
| <TelemetryBadges badges={badgeInfo} /> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
@@ -275,6 +283,80 @@ export function InstrumentationDetailPage() { | |
|
|
||
| <TabsContent value="details" className="mt-0 p-4 sm:p-6"> | ||
| <div className="space-y-8"> | ||
| {/* Value Proposition Summary */} | ||
|
Member
There was a problem hiding this comment. im still not sure about this, i have two remaining concerns:
I agree this page can be improved, but I'm not sure this is an improvement. Let's remove these changes from the PR for now and stick to just introducing the expand/collapsing of the telemetry signals. For the rest of your ideas around progressive disclosure, I think it might be best to continue the conversation / brainstorming as part of our UI/UX redesign project: #370 |
||
| {(badgeInfo.hasMetrics || badgeInfo.hasSpans) && ( | ||
| <div> | ||
| <SectionHeader>Telemetry Overview</SectionHeader> | ||
| <div className="grid gap-4 md:grid-cols-2"> | ||
| {badgeInfo.hasSpans && ( | ||
| <DetailCard withHoverEffect> | ||
| <div className="flex items-start gap-3"> | ||
| <Activity | ||
| className="text-info mt-0.5 h-5 w-5 flex-shrink-0" | ||
| aria-hidden="true" | ||
| /> | ||
| <div className="flex-1 space-y-1"> | ||
| <h3 className="text-foreground text-sm font-semibold"> | ||
| Traces & Spans | ||
| </h3> | ||
| <p className="text-muted-foreground text-sm"> | ||
| Provides visibility into application activity and execution flow across services and components. | ||
| </p> | ||
| {instrumentation.telemetry && | ||
| instrumentation.telemetry[0] && | ||
| instrumentation.telemetry[0].spans && ( | ||
| <div className="mt-2 flex flex-wrap gap-1"> | ||
| {instrumentation.telemetry[0].spans.map((span, idx) => ( | ||
| <GlowBadge key={idx} variant="info" className="text-[10px]"> | ||
| {span.span_kind} | ||
| </GlowBadge> | ||
| ))} | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </DetailCard> | ||
| )} | ||
|
|
||
| {badgeInfo.hasMetrics && ( | ||
| <DetailCard withHoverEffect> | ||
| <div className="flex items-start gap-3"> | ||
| <Activity | ||
| className="text-success mt-0.5 h-5 w-5 flex-shrink-0" | ||
| aria-hidden="true" | ||
| /> | ||
| <div className="flex-1 space-y-1"> | ||
| <h3 className="text-foreground text-sm font-semibold"> | ||
| Metrics | ||
| </h3> | ||
| <p className="text-muted-foreground text-sm"> | ||
| Gives you the big picture of system health, like total request | ||
|
hussainjamal760 marked this conversation as resolved.
|
||
| counts, error rates, and average speeds over time. | ||
| </p> | ||
| {instrumentation.telemetry && | ||
| instrumentation.telemetry[0] && | ||
| instrumentation.telemetry[0].metrics && ( | ||
| <div className="mt-2 flex flex-wrap gap-1"> | ||
| {instrumentation.telemetry[0].metrics.map((metric, idx) => ( | ||
| <span | ||
| key={idx} | ||
| className="bg-success/10 text-success border-success/20 truncate rounded border px-1.5 py-0.5 font-mono text-[10px]" | ||
| title={metric.name} | ||
| > | ||
| {metric.name.length > 50 | ||
| ? metric.name.substring(0, 50) + "..." | ||
| : metric.name} | ||
| </span> | ||
| ))} | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </DetailCard> | ||
| )} | ||
| </div> | ||
| </div> | ||
| )} | ||
| {((instrumentation.features && instrumentation.features.length > 0) || | ||
| (instrumentation.semantic_conventions && | ||
| instrumentation.semantic_conventions.length > 0)) && ( | ||
|
|
@@ -494,7 +576,7 @@ export function InstrumentationDetailPage() { | |
| <TabsContent value="telemetry" className="mt-0 p-4 sm:p-6"> | ||
| {instrumentation.telemetry && instrumentation.telemetry.length > 0 ? ( | ||
| <div className="space-y-8"> | ||
| <div className="flex flex-col items-center gap-6"> | ||
| <div | ||
| className="border-border inline-flex w-full rounded-lg border bg-transparent p-1 sm:w-auto" | ||
| role="group" | ||
|
|
@@ -524,10 +606,34 @@ export function InstrumentationDetailPage() { | |
| Version Comparison | ||
| </button> | ||
| </div> | ||
|
|
||
| {!showComparison && instrumentation.telemetry && instrumentation.telemetry.length > 0 && ( | ||
| <div className="flex items-center gap-3"> | ||
| <button | ||
| onClick={() => setExpandVersion((v) => v + 1)} | ||
| className="hover:border-primary/30 hover:bg-primary/5 border-border/30 bg-card/50 text-muted-foreground hover:text-primary flex items-center gap-2 rounded-lg border px-3 py-1.5 text-[10px] font-black tracking-[0.15em] uppercase transition-all duration-200 hover:scale-[1.02] active:scale-[0.98]" | ||
| > | ||
| <ChevronsDown className="h-3.5 w-3.5" /> | ||
| Expand All | ||
| </button> | ||
| <div className="bg-border/30 h-4 w-px" /> | ||
| <button | ||
| onClick={() => setCollapseVersion((v) => v + 1)} | ||
| className="hover:border-primary/30 hover:bg-primary/5 border-border/30 bg-card/50 text-muted-foreground hover:text-primary flex items-center gap-2 rounded-lg border px-3 py-1.5 text-[10px] font-black tracking-[0.15em] uppercase transition-all duration-200 hover:scale-[1.02] active:scale-[0.98]" | ||
| > | ||
| <ChevronsUp className="h-3.5 w-3.5" /> | ||
| Collapse All | ||
| </button> | ||
| </div> | ||
| )} | ||
| </div> | ||
|
|
||
| {!showComparison ? ( | ||
| <TelemetrySection | ||
| telemetry={instrumentation.telemetry} | ||
| expandVersion={expandVersion} | ||
| collapseVersion={collapseVersion} | ||
| /> | ||
| ) : ( | ||
| versionsData && ( | ||
| <TelemetryComparisonSection | ||
|
|
||
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I dont think it makes sense to have the controls so far away from what they affect.
Can we add controls for metrics/ spans individually? So i can expand/collapse all the metrics or spans and the controls are right under each "Metrics" or "spans" heading?