[WIP] Add config builder page sketch

ecosystem-explorer/eslint.config.js

@@ -36,5 +36,14 @@ export default defineConfig([
       ecmaVersion: 2020,
       globals: globals.browser,
     },
+    rules: {
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+        },
+      ],
+    },
   },
 ])

ecosystem-explorer/public/data/sdk/sdk-options.json

@@ -0,0 +1,171 @@
+{
+  "schema_version": "1.0",
+  "defaults": {
+    "file_format": "1.0",
+    "propagators": ["tracecontext", "baggage"],
+    "tracer_provider": {
+      "exporter_type": "otlp_http",
+      "exporters": {
+        "otlp_http": {
+          "endpoint": "http://localhost:4318",
+          "protocol": "http/protobuf"
+        },
+        "otlp_grpc": {
+          "endpoint": "http://localhost:4317"
+        },
+        "console": {}
+      },
+      "sampler": {
+        "type": "parent_based",
+        "root": "always_on",
+        "ratio": 1.0
+      },
+      "batch_processor": {
+        "schedule_delay": 5000,
+        "export_timeout": 30000,
+        "max_queue_size": 2048,
+        "max_export_batch_size": 512
+      }
+    }
+  },
+  "sections": {
+    "propagators": {
+      "name": "Propagators",
+      "description": "Configure context propagation formats for distributed tracing",
+      "options": [
+        {
+          "id": "tracecontext",
+          "name": "W3C TraceContext",
+          "description": "W3C Trace Context propagator. Required for interoperability with W3C-compatible systems."
+        },
+        {
+          "id": "baggage",
+          "name": "W3C Baggage",
+          "description": "W3C Baggage propagator for passing key-value pairs across service boundaries."
+        },
+        {
+          "id": "b3",
+          "name": "B3 (single header)",
+          "description": "Zipkin B3 single-header propagator for compatibility with Zipkin and older systems."
+        },
+        {
+          "id": "b3multi",
+          "name": "B3 Multi-header",
+          "description": "Zipkin B3 multi-header propagator."
+        }
+      ]
+    },
+    "tracer_provider": {
+      "name": "Traces",
+      "description": "Configure the OpenTelemetry tracer provider",
+      "exporter": {
+        "name": "Span Exporter",
+        "description": "Where to export trace data",
+        "options": [
+          {
+            "id": "otlp_http",
+            "name": "OTLP HTTP",
+            "description": "Export spans via OTLP over HTTP. Recommended for most setups.",
+            "settings": [
+              {
+                "name": "endpoint",
+                "label": "Endpoint URL",
+                "description": "OTLP HTTP endpoint",
+                "type": "string"
+              },
+              {
+                "name": "protocol",
+                "label": "Protocol",
+                "description": "OTLP transport protocol",
+                "type": "enum",
+                "options": ["http/protobuf", "http/json"]
+              }
+            ]
+          },
+          {
+            "id": "otlp_grpc",
+            "name": "OTLP gRPC",
+            "description": "Export spans via OTLP over gRPC.",
+            "settings": [
+              {
+                "name": "endpoint",
+                "label": "Endpoint URL",
+                "description": "OTLP gRPC endpoint",
+                "type": "string"
+              }
+            ]
+          },
+          {
+            "id": "console",
+            "name": "Console",
+            "description": "Print spans to stdout. Useful for debugging.",
+            "settings": []
+          }
+        ]
+      },
+      "sampler": {
+        "name": "Sampler",
+        "description": "How to make sampling decisions for new traces",
+        "options": [
+          {
+            "id": "parent_based",
+            "name": "Parent Based",
+            "description": "Use the parent span's sampling decision. Root spans use the configured root sampler.",
+            "has_root": true,
+            "root_options": ["always_on", "always_off", "trace_id_ratio_based"]
+          },
+          {
+            "id": "always_on",
+            "name": "Always On",
+            "description": "Sample 100% of traces."
+          },
+          {
+            "id": "always_off",
+            "name": "Always Off",
+            "description": "Sample 0% of traces. Useful for disabling tracing."
+          },
+          {
+            "id": "trace_id_ratio_based",
+            "name": "Trace ID Ratio",
+            "description": "Sample a fixed percentage of traces based on trace ID.",
+            "has_ratio": true
+          }
+        ]
+      },
+      "batch_processor": {
+        "name": "Batch Processor",
+        "description": "Configure the batch span processor that buffers and exports spans",
+        "settings": [
+          {
+            "name": "schedule_delay",
+            "label": "Schedule Delay (ms)",
+            "description": "Delay between consecutive exports",
+            "type": "integer",
+            "min": 0
+          },
+          {
+            "name": "export_timeout",
+            "label": "Export Timeout (ms)",
+            "description": "Maximum time allowed to export data. 0 = no limit.",
+            "type": "integer",
+            "min": 0
+          },
+          {
+            "name": "max_queue_size",
+            "label": "Max Queue Size",
+            "description": "Maximum spans to queue before dropping",
+            "type": "integer",
+            "min": 1
+          },
+          {
+            "name": "max_export_batch_size",
+            "label": "Max Batch Size",
+            "description": "Maximum spans per export batch",
+            "type": "integer",
+            "min": 1
+          }
+        ]
+      }
+    }
+  }
+}

ecosystem-explorer/src/App.tsx

@@ -21,7 +21,7 @@ import { JavaAgentPage } from "@/features/java-agent/java-agent-page";
 import { CollectorPage } from "@/features/collector/collector-page";
 import { NotFoundPage } from "@/features/not-found/not-found-page";
 import { JavaInstrumentationListPage } from "@/features/java-agent/java-instrumentation-list-page";
-import { JavaConfigurationListPage } from "@/features/java-agent/java-configuration-list-page";
+import { JavaConfigurationBuilderPage } from "@/features/java-agent/configuration/java-configuration-builder-page";
 import { InstrumentationDetailPage } from "@/features/java-agent/instrumentation-detail-page";
 
 export default function App() {
@@ -38,7 +38,7 @@ export default function App() {
               path="/java-agent/instrumentation/:version/:name"
               element={<InstrumentationDetailPage />}
             />
-            <Route path="/java-agent/configuration" element={<JavaConfigurationListPage />} />
+            <Route path="/java-agent/configuration" element={<JavaConfigurationBuilderPage />} />
             <Route path="/collector" element={<CollectorPage />} />
             <Route path="*" element={<NotFoundPage />} />
           </Routes>

ecosystem-explorer/src/features/java-agent/configuration/components/export-toolbar.tsx

@@ -0,0 +1,71 @@
+/*
+ * Copyright The OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useState } from "react";
+import { useConfigurationBuilder } from "../hooks/use-configuration-builder";
+import { generateYamlFile } from "../utils/yaml-generator";
+
+export function ExportToolbar() {
+  const { state } = useConfigurationBuilder();
+  const [copyStatus, setCopyStatus] = useState<"idle" | "copied">("idle");
+
+  const output = generateYamlFile(state);
+  const fileExtension = ".yaml";
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(output);
+      setCopyStatus("copied");
+      setTimeout(() => setCopyStatus("idle"), 2000);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+
+  const handleDownload = () => {
+    const blob = new Blob([output], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `otel-config${fileExtension}`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const disabled = state.selectedInstrumentations.size === 0;
+
+  return (
+    <div className="flex gap-2">
+      <button
+        onClick={handleCopy}
+        disabled={disabled}
+        className="px-3 py-2 text-sm rounded-lg border border-border bg-background hover:bg-muted transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        aria-label="Copy configuration to clipboard"
+      >
+        {copyStatus === "copied" ? "Copied!" : "Copy"}
+      </button>
+      <button
+        onClick={handleDownload}
+        disabled={disabled}
+        className="px-3 py-2 text-sm rounded-lg border border-border bg-background hover:bg-muted transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        aria-label="Download configuration file"
+      >
+        Download
+      </button>
+    </div>
+  );
+}