[Magic] New hcs dash magic (#24331)

* updated path

* updated health path

* added new content

* new vars

* corrected link

* added vars

* Update src/content/partials/networking-services/tunnel-health/check-tunnel-healthchecks-dash.mdx

Co-authored-by: Kate Tungusova <[email protected]>

* refined text

---------

Co-authored-by: Kate Tungusova <[email protected]>

Author: marciocloudflare

src/content/docs/magic-transit/network-health/check-tunnel-health-dashboard.mdx

@@ -12,8 +12,9 @@ import { Render } from "~/components";
 	product="networking-services"
 	params={{
 		dashInfo: "The dashboard shows the global view of tunnel health as measured from all Cloudflare locations.",
-		productPath: "**Magic Transit** > **Tunnel health**",
-		graphQL: "/magic-transit/analytics/query-tunnel-health/"
+		productPath: "**Magic Transit** > **Network health**",
+		graphQL: "/magic-transit/analytics/query-tunnel-health/",
+		notificationsPath: "[notifications wizard](/magic-transit/network-health/configure-magic-tunnel-health-alerts/)"
 	}}
 />
 

src/content/docs/magic-wan/configuration/common-settings/check-tunnel-health-dashboard.mdx

@@ -12,8 +12,9 @@ import { Render } from "~/components";
 	product="networking-services"
 	params={{
 		dashInfo: "The dashboard shows the view of tunnel health as measured from each Cloudflare location where your traffic is likely to land.",
-		productPath: "**Magic WAN** > **Tunnel health**",
-		graphQL: "/magic-wan/analytics/query-tunnel-health/"
+		productPath: "**Magic WAN** > **Network health**",
+		graphQL: "/magic-wan/analytics/query-tunnel-health/",
+		notificationsPath: "[notifications wizard](/magic-wan/configuration/common-settings/configure-magic-tunnel-health-alerts/)"
 	}}
 />
 

src/content/docs/magic-wan/configuration/manually/third-party/fortinet.mdx

@@ -439,7 +439,8 @@ end
 	params={{
 		dashInfo: "The dashboard shows the view of tunnel health as measured from each Cloudflare location where your traffic is likely to land.",
 		productPath: "**Magic WAN** > **Tunnel health**",
-		graphQL: "/magic-wan/analytics/query-tunnel-health/"
+		graphQL: "/magic-wan/analytics/query-tunnel-health/",
+		notificationsPath: "[notifications wizard](/magic-wan/configuration/common-settings/configure-magic-tunnel-health-alerts/)"
 	}}
 />
 

src/content/docs/magic-wan/configuration/manually/third-party/sonicwall.mdx

@@ -205,6 +205,7 @@ Health checks might take some time to stabilize after the configuration is chang
 	params={{
 		dashInfo: "The dashboard shows the view of tunnel health as measured from each Cloudflare location where your traffic is likely to land.",
 		productPath: "**Magic WAN** > **Tunnel health**",
-		graphQL: "/magic-wan/analytics/query-tunnel-health/"
+		graphQL: "/magic-wan/analytics/query-tunnel-health/",
+		notificationsPath: "[notifications wizard](/magic-wan/configuration/common-settings/configure-magic-tunnel-health-alerts/)"
 	}}
 />

src/content/docs/magic-wan/configuration/manually/third-party/sophos-firewall.mdx

@@ -190,7 +190,8 @@ system gre route add net <IP_ADDRESS> tunnelname <TUNNEL_NAME>
 	params={{
 		dashInfo: "The dashboard shows the view of tunnel health as measured from each Cloudflare location where your traffic is likely to land.",
 		productPath: "**Magic WAN** > **Tunnel health**",
-		graphQL: "/magic-wan/analytics/query-tunnel-health/"
+		graphQL: "/magic-wan/analytics/query-tunnel-health/",
+		notificationsPath: "[notifications wizard](/magic-wan/configuration/common-settings/configure-magic-tunnel-health-alerts/)"
 	}}
 />
 

src/content/partials/networking-services/tunnel-health/check-tunnel-healthchecks-dash.mdx

@@ -3,9 +3,10 @@ params:
   - dashInfo
   - productPath
   - graphQL
+  - notificationsPath
 ---
 
-import { GlossaryTooltip, Markdown } from "~/components";
+import { GlossaryTooltip, Markdown, Tabs, TabItem } from "~/components";
 
 The Cloudflare dashboard monitors the health of all <GlossaryTooltip term="anycast">anycast</GlossaryTooltip> tunnels on your account that route traffic from Cloudflare to your origin network.
 
@@ -17,10 +18,28 @@ To access more than one hour of tunnel health data, you should use the <a href={
 
 Not all data centers will be relevant to you at all times. You can refer to the **Average ingress traffic (last hour)** column to understand if a given data center is receiving traffic for your network, and if its health status is relevant to you.
 
+:::note
+To change between the new dashboard experience and the old one, find the banner at the top of the screen.
+:::
+
 To check for anycast tunnel health:
 
-1. Go to the [Cloudflare dashboard](https://dash.cloudflare.com/login) and select your account.
-2. Go to <Markdown text={props.productPath} />.
-3. In **Cloudflare colos**, you can choose one or more Cloudflare data centers to filter out the traffic that shows up in your anycast tunnels. For example, if you chose the Lisbon data center, your anycast tunnels would only show connections to that data center.
-4. Below, you have a list of all your anycast tunnels, as well as their current health status. Find the tunnel you wish to inspect and select the arrow (**>**) before it to open its details.
-5. The details pane shows the connection status between different Cloudflare servers and your tunnel. Select **Traceroute for details** in one of the Cloudflare servers shown to check for issues between Cloudflare and your origin network.
+<Tabs syncKey="dasNewNav">
+	<TabItem label="Old dashboard">
+		1. Log into the [Cloudflare dashboard](https://dash.cloudflare.com/login) and select your account.
+		2. Go to <Markdown text={props.productPath} />.
+		3. In **Cloudflare colos**, you can choose one or more Cloudflare data centers to filter out the traffic that shows up in your anycast tunnels. For example, if you chose the Lisbon data center, your anycast tunnels would only show connections to that data center.
+		4. Below, you have a list of all your anycast tunnels, as well as their current health status. Find the tunnel you wish to inspect and select the arrow (**>**) before it to open its details.
+		5. The details pane shows the connection status between different Cloudflare servers and your tunnel. Select **Traceroute for details** in one of the Cloudflare servers shown to check for issues between Cloudflare and your origin network.
+	</TabItem>
+
+	<TabItem label="New dashboard" icon="rocket">
+		1. Log into the [Cloudflare dashboard](https://dash.cloudflare.com/login) and select your account.
+		2. Go to <Markdown text={props.productPath} />.
+		3. In the next screen you can access a list of your tunnels and their current health status. You can also check the amount of health checks passed in the last hour as well as traffic volume for each tunnel.
+		4. Find the tunnel you wish to inspect, select the three dots in front of the tunnel and select:
+			- **Create alert**: This will send you to the <Markdown text={props.notificationsPath} /> so you can create specific alerts for that tunnel, to be warned when specific conditions are met.
+			- **Network Analytics**: This will send you to the Analytics section of the dash, prefiltered with the tunnel you want to inspect.
+		5. Alternatively, from the list of tunnels, select the tunnel you want to inspect to access details about it.
+	</TabItem>
+</Tabs>