feat(explorer): display feature descriptions on instrumentation detai… (#221)

Author: adaumsilva

ecosystem-explorer/src/features/java-agent/instrumentation-detail-page.tsx

@@ -31,7 +31,7 @@ import { GlowBadge } from "@/components/ui/glow-badge";
 import { DetailCard } from "@/components/ui/detail-card";
 import { SectionHeader } from "@/components/ui/section-header";
 import { useVersions, useInstrumentation } from "@/hooks/use-javaagent-data";
-import { getInstrumentationDisplayName, getSemanticConventionInfo } from "./utils/format";
+import { getInstrumentationDisplayName, getSemanticConventionInfo, getFeatureInfo } from "./utils/format";
 import { TelemetrySection } from "./components/telemetry-section";
 
 function buildSourceUrl(sourcePath: string): string {
@@ -372,15 +372,27 @@ export function InstrumentationDetailPage() {
                           <div className="space-y-3">
                             <h3 className="text-sm font-medium text-muted-foreground">Features</h3>
                             <ul className="space-y-2">
-                              {instrumentation.features.map((feature, index) => (
-                                <li key={index} className="flex items-start gap-2 text-sm">
-                                  <Check
-                                    className="mt-0.5 h-4 w-4 flex-shrink-0 text-primary"
-                                    aria-hidden="true"
-                                  />
-                                  <span>{feature}</span>
-                                </li>
-                              ))}
+                              {instrumentation.features.map((feature, index) => {
+                                const info = getFeatureInfo(feature);
+                                return (
+                                  <li key={index} className="flex items-start gap-2 text-sm">
+                                    <Check
+                                      className="mt-0.5 h-4 w-4 flex-shrink-0 text-primary"
+                                      aria-hidden="true"
+                                    />
+                                    <div>
+                                      <span className="font-medium">
+                                        {info ? info.label : feature}
+                                      </span>
+                                      {info && (
+                                        <p className="mt-0.5 text-xs text-muted-foreground">
+                                          {info.description}
+                                        </p>
+                                      )}
+                                    </div>
+                                  </li>
+                                );
+                              })}
                             </ul>
                           </div>
                         </DetailCard>

ecosystem-explorer/src/features/java-agent/utils/format.test.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { describe, it, expect } from "vitest";
-import { getInstrumentationDisplayName, getSemanticConventionInfo } from "./format";
+import { getInstrumentationDisplayName, getSemanticConventionInfo, getFeatureInfo } from "./format";
 import type { InstrumentationData } from "@/types/javaagent";
 
 describe("getInstrumentationDisplayName", () => {
@@ -124,3 +124,38 @@ describe("getSemanticConventionInfo", () => {
     expect(getSemanticConventionInfo("")).toBeNull();
   });
 });
+
+describe("getFeatureInfo", () => {
+  it("returns label and description for a known value", () => {
+    const info = getFeatureInfo("LOGGING_BRIDGE");
+    expect(info).toEqual({
+      label: "Logging Bridge",
+      description:
+        "Bridges logging framework events to the OpenTelemetry Logs API, emitting log records from standard logging frameworks.",
+    });
+  });
+
+  it("returns label and description for HTTP_ROUTE", () => {
+    const info = getFeatureInfo("HTTP_ROUTE");
+    expect(info).toEqual({
+      label: "HTTP Route",
+      description: "Enriches HTTP spans with route information.",
+    });
+  });
+
+  it("returns label and description for RESOURCE_DETECTOR", () => {
+    const info = getFeatureInfo("RESOURCE_DETECTOR");
+    expect(info).toEqual({
+      label: "Resource Detector",
+      description: "Sets resource attributes based on certain conditions.",
+    });
+  });
+
+  it("returns null for an unknown value", () => {
+    expect(getFeatureInfo("UNKNOWN_FEATURE")).toBeNull();
+  });
+
+  it("returns null for an empty string", () => {
+    expect(getFeatureInfo("")).toBeNull();
+  });
+});

ecosystem-explorer/src/features/java-agent/utils/format.ts

@@ -91,6 +91,50 @@ export function getSemanticConventionInfo(value: string): SemanticConventionInfo
   return SEMANTIC_CONVENTION_MAP[value] ?? null;
 }
 
+export interface FeatureInfo {
+  label: string;
+  description: string;
+}
+
+const FEATURE_MAP: Record<string, FeatureInfo> = {
+  HTTP_ROUTE: {
+    label: "HTTP Route",
+    description: "Enriches HTTP spans with route information.",
+  },
+  CONTEXT_PROPAGATION: {
+    label: "Context Propagation",
+    description:
+      "Propagates context inter-process (via headers in HTTP, gRPC, and messaging) and inter-thread (executors, actors, and reactive streams).",
+  },
+  AUTO_INSTRUMENTATION_SHIM: {
+    label: "Auto Instrumentation Shim",
+    description: "Adapts or bridges instrumentation from upstream libraries or frameworks.",
+  },
+  CONTROLLER_SPANS: {
+    label: "Controller Spans",
+    description:
+      "Generates spans for controller/handler methods in web frameworks. Disabled by default and experimental.",
+  },
+  VIEW_SPANS: {
+    label: "View Spans",
+    description:
+      "Generates spans for view rendering such as templates or JSP. Disabled by default and experimental.",
+  },
+  LOGGING_BRIDGE: {
+    label: "Logging Bridge",
+    description:
+      "Bridges logging framework events to the OpenTelemetry Logs API, emitting log records from standard logging frameworks.",
+  },
+  RESOURCE_DETECTOR: {
+    label: "Resource Detector",
+    description: "Sets resource attributes based on certain conditions.",
+  },
+};
+
+export function getFeatureInfo(value: string): FeatureInfo | null {
+  return FEATURE_MAP[value] ?? null;
+}
+
 export function getInstrumentationDisplayName(instrumentation: InstrumentationData): string {
   if (instrumentation.display_name) {
     return instrumentation.display_name;