[Magic] Traceroute patch (#26086)

* added wan tunnels steps

* added code

* indentation

* indentation

* Update src/content/partials/networking-services/analytics/traceroutes.mdx

Co-authored-by: Pedro Sousa <[email protected]>

---------

Co-authored-by: Pedro Sousa <[email protected]>

Author: marciocloudflare

src/content/docs/cloudflare-one/networks/connectors/wan-tunnels/analytics/traceroutes.mdx

@@ -11,7 +11,8 @@ import { Render } from "~/components";
 	file="analytics/traceroutes"
 	product="networking-services"
 	params={{
-		productName: "WAN",
+		productName: "WAN Tunnels",
 		dashButtonPath: "/?to=/:account/magic-wan/tunnel-healthchecks",
+		magicWord: "wan-tunnels",
 	}}
 />

src/content/docs/magic-transit/analytics/traceroutes.mdx

@@ -11,7 +11,8 @@ import { Render } from "~/components";
 	file="analytics/traceroutes"
 	product="networking-services"
 	params={{
-		productName: "Transit",
+		productName: "Magic Transit",
 		dashButtonPath: "/?to=/:account/magic-transit/tunnel-healthchecks",
+		magicWord: "magic-transit",
 	}}
 />

src/content/docs/magic-wan/analytics/traceroutes.mdx

@@ -11,7 +11,8 @@ import { Render } from "~/components";
 	file="analytics/traceroutes"
 	product="networking-services"
 	params={{
-		productName: "WAN",
+		productName: "Magic WAN",
 		dashButtonPath: "/?to=/:account/magic-wan/tunnel-healthchecks",
+		magicWord: "magic-wan",
 	}}
 />

src/content/partials/networking-services/analytics/traceroutes.mdx

@@ -2,20 +2,78 @@
 params:
   - productName
   - dashButtonPath
+  - magicWord
 ---
 
-import { DashButton } from "~/components";
+import { Aside, DashButton, Markdown, Tabs, TabItem } from "~/components";
 
-Magic {props.productName} customers can run traceroutes to understand the hop by hop Internet path and latencies from Cloudflare's network to their own network.
+{props.productName} customers can run traceroutes to understand the hop by hop Internet path and latencies from Cloudflare's network to their own network.
 
+{ props.magicWord === "wan-tunnels" && (
+  <>
+    <Markdown
+      text={`
 To run a traceroute from a specific Cloudflare data center to your network:
 
-1. In the Cloudflare dashboard, go to Magic {props.productName}'s **Network health** page.
+1. Log in to [Cloudflare One](https://one.dash.cloudflare.com/) > **Insights**.
+2. Go to **Network visibility** > **WAN connector health**.
+3. Select the tunnel you want to run the traceroute on.
+4. Select the three dots > **Traceroute details**.
+      `}
+      inline={false}
+    />
+  </>
+)}
 
-	 <DashButton url={props.dashButtonPath} />
+{ props.magicWord !== "wan-tunnels" && (
+  <>
+    <Aside type="note">
+      To change between the new dashboard experience and the old one, find the banner at the top of the screen.
+    </Aside>
 
+    To run a traceroute from a specific Cloudflare data center to your network:
+
+    <Tabs syncKey="dashNewNav">
+      <TabItem label="Old dashboard">
+        <Markdown
+          text={`
+1. In the Cloudflare dashboard, go to ${props.productName}'s **Network health** page.
+          `}
+          inline={false}
+        />
+
+        <DashButton url={props.dashButtonPath} />
+
+        <Markdown
+          text={`
 2. Expand a Magic Tunnel, and find the Cloudflare data center where the traceroute will be run from.
 3. Select **Traceroute for details**.
+          `}
+          inline={false}
+        />
+      </TabItem>
+
+      <TabItem label="New dashboard" icon="rocket">
+        <Markdown
+          text={`
+1. In the Cloudflare dashboard, go to ${props.productName}'s **Network health** page.
+          `}
+          inline={false}
+        />
+
+        <DashButton url={props.dashButtonPath} />
+
+        <Markdown
+          text={`
+2. Select the tunnel you want to run the traceroute on.
+3. Select the three dots > **Traceroute details**.
+          `}
+          inline={false}
+        />
+      </TabItem>
+    </Tabs>
+  </>
+)}
 
 You can access detailed data from the traceroute, including: