Refactor observability documentation to replace Tabs and TabItem components with WranglerConfig for improved clarity and consistency in presenting configuration examples. This update streamlines the guide for exporting OpenTelemetry data to Grafana Cloud, ensuring users have a unified format for configuration across different sections.

Author: nevikashah

src/content/docs/workers/observability/exporting-opentelemetry-data/grafana-cloud.mdx

@@ -4,8 +4,7 @@ title: Export to Grafana Cloud
 sidebar:
   order: 2
 ---
-
-import { Tabs, TabItem } from "~/components";
+import {WranglerConfig} from "~/components";
 
 Grafana Cloud is a fully managed observability platform that provides visualization, alerting, and analytics for your telemetry data. By exporting your Cloudflare Workers telemetry to Grafana Cloud, you can:
 - Visualize distributed traces in **Grafana Tempo** to understand request flows and performance bottlenecks
@@ -45,10 +44,9 @@ Before you begin, ensure you have:
 
 With your destination created in the Cloudflare dashboard, update your Worker's configuration to enable telemetry export. 
 
-<Tabs>
-<TabItem label="wrangler.jsonc">
+<WranglerConfig>
 
-```jsonc title="wrangler.jsonc"
+```json
 {
   "observability": {
     "traces": {
@@ -65,23 +63,7 @@ With your destination created in the Cloudflare dashboard, update your Worker's
 }
 ```
 
-</TabItem>
-<TabItem label="wrangler.toml">
-
-```toml title="wrangler.toml"
-[observability.traces]
-enabled = true
-# Must match the destination name in the dashboard
-destinations = ["grafana-traces"]
-
-[observability.logs]
-enabled = true
-# Must match the destination name in the dashboard
-destinations = ["grafana-logs"]
-```
-
-</TabItem>
-</Tabs>
+</WranglerConfig>
 
 After updating your configuration, deploy your Worker for the changes to take effect. 
 

src/content/docs/workers/observability/exporting-opentelemetry-data/index.mdx

@@ -5,7 +5,7 @@ sidebar:
   order: 5
 ---
 
-import { Badge, DirectoryListing, Tabs, TabItem } from "~/components";
+import { Badge, DirectoryListing, WranglerConfig } from "~/components";
 
 Cloudflare Workers supports exporting OpenTelemetry (OTel)-compliant telemetry data to any destination with an available OTel endpoint, allowing you to integrate with your existing monitoring and observability stack. 
 
@@ -44,10 +44,9 @@ To start sending data to your destination, you'll need to create a destination i
 
 After setting up destinations in the dashboard, configure your Worker to export telemetry data by updating your Wrangler configuration. Your destination name configured in your configuration file should be the same as the destination configured in the dashboard. 
 
-<Tabs>
-<TabItem label="wrangler.jsonc">
+<WranglerConfig>
 
-```jsonc title="wrangler.jsonc"
+```json
 {
   "observability": {
     "traces": {
@@ -66,25 +65,7 @@ After setting up destinations in the dashboard, configure your Worker to export
 }
 ```
 
-</TabItem>
-<TabItem label="wrangler.toml">
-
-```toml title="wrangler.toml"
-[observability.traces]
-enabled = true
-destinations = ["tracing-destination-name"]
-# traces sample rate of 5%
-head_sampling_rate = 0.05
-
-[observability.logs]
-enabled = true
-destinations = ["logs-destination-name"]
-# logs sample rate of 60%
-head_sampling_rate = 0.6
-```
-
-</TabItem>
-</Tabs>
+</WranglerConfig>
 
 Once you've configured your Wrangler configuration file, redeploy your Worker for new configurations to take effect. Note that it may take a few minutes for events to reach your destination. 
 

src/content/docs/workers/observability/traces/index.mdx

@@ -5,7 +5,7 @@ sidebar:
   order: 3
 
 ---
-import { Tabs, TabItem } from "~/components";
+import { WranglerConfig } from "~/components";
 
 ### What is Workers tracing? 
 
@@ -31,33 +31,21 @@ While our work for automatic instrumentation is ongoing, we've [documented](/wor
 
 To view traces in the Workers dashboard, set the following in your Wrangler configuration file: 
 
-<Tabs>
-<TabItem label="wrangler.jsonc">
+<WranglerConfig>
 
-```jsonc title="wrangler.jsonc"
+```json
 {
   "observability": {
     "traces": {
       "enabled": true,
       // optional sampling rate
-      "head_sampling_rate": .05
+      "head_sampling_rate": 0.05
     }
   }
 }
 ```
 
-</TabItem>
-<TabItem label="wrangler.toml">
-
-```toml title="wrangler.toml"
-[observability.traces]
-enabled = true
-# optional sampling rate
-head_sampling_rate = 0.05
-```
-
-</TabItem>
-</Tabs>
+</WranglerConfig>
 
 Or if you have already set `observability.enabled = true` in your wrangler configuration file, tracing **and** logs will be automatically enabled. 
 
@@ -72,10 +60,9 @@ With head-based sampling, you can trace a percentage of incoming requests in you
 
 The valid sampling range is from 0 to 1, where 0 indicates zero out of one hundred invocations will be traced, and 1 indicates every requests will be traced. If `head_sampling_rate` is unspecified, it defaults to tracing 100% of requests. 
 
-<Tabs>
-<TabItem label="wrangler.jsonc">
+<WranglerConfig>
 
-```jsonc title="wrangler.jsonc"
+```json
 {
   "observability": {
     "traces": {
@@ -92,23 +79,7 @@ The valid sampling range is from 0 to 1, where 0 indicates zero out of one hundr
 }
 ```
 
-</TabItem>
-<TabItem label="wrangler.toml">
-
-```toml title="wrangler.toml"
-[observability.traces]
-enabled = true
-# set tracing sampling rate to 5%
-head_sampling_rate = 0.05
-
-[observability.logs]
-enabled = true
-# set logging sampling rate to 60%
-head_sampling_rate = 0.6
-```
-
-</TabItem>
-</Tabs>
+</WranglerConfig>
 
 If you have `head_sampling_rate` configured specifically for logs, you can also create a separate rate for traces.