Merge pull request #110216 from MS-jgol/app-map-to-tabs

Changed to tabbed version

Author: PRMerger6

articles/azure-monitor/app/app-map.md

@@ -81,7 +81,7 @@ To view active alerts and the underlying rules that cause the alerts to be trigg
 
 Application Map uses the **cloud role name** property to identify the components on the map. The Application Insights SDK automatically adds the cloud role name property to the telemetry emitted by components. For example, the SDK will add a web site name or service role name to the cloud role name property. However, there are cases where you may want to override the default value. To override cloud role name and change what gets displayed on the Application Map:
 
-### .NET/.NET Core
+# [.NET/.NetCore](#tab/net)
 
 **Write custom TelemetryInitializer as below.**
 
@@ -149,7 +149,27 @@ For [ASP.NET Core](asp-net-core.md#adding-telemetryinitializers) applications, a
 }
 ```
 
-### Node.js
+# [Java](#tab/java)
+
+Starting with Application Insights Java SDK 2.5.0, you can specify the cloud role name
+by adding `<RoleName>` to your `ApplicationInsights.xml` file, e.g.
+
+```XML
+<?xml version="1.0" encoding="utf-8"?>
+<ApplicationInsights xmlns="http://schemas.microsoft.com/ApplicationInsights/2013/Settings" schemaVersion="2014-05-30">
+   <InstrumentationKey>** Your instrumentation key **</InstrumentationKey>
+   <RoleName>** Your role name **</RoleName>
+   ...
+</ApplicationInsights>
+```
+
+If you use Spring Boot with the Application Insights Spring Boot starter, the only required change is to set your custom name for the application in the application.properties file.
+
+`spring.application.name=<name-of-app>`
+
+The Spring Boot starter will automatically assign cloud role name to the value you enter for the spring.application.name property.
+
+# [Node.js](#tab/nodejs)
 
 ```javascript
 var appInsights = require("applicationinsights");
@@ -170,27 +190,7 @@ appInsights.defaultClient.addTelemetryProcessor(envelope => {
 });
 ```
 
-### Java
-
-Starting with Application Insights Java SDK 2.5.0, you can specify the cloud role name
-by adding `<RoleName>` to your `ApplicationInsights.xml` file, e.g.
-
-```XML
-<?xml version="1.0" encoding="utf-8"?>
-<ApplicationInsights xmlns="http://schemas.microsoft.com/ApplicationInsights/2013/Settings" schemaVersion="2014-05-30">
-   <InstrumentationKey>** Your instrumentation key **</InstrumentationKey>
-   <RoleName>** Your role name **</RoleName>
-   ...
-</ApplicationInsights>
-```
-
-If you use Spring Boot with the Application Insights Spring Boot starter, the only required change is to set your custom name for the application in the application.properties file.
-
-`spring.application.name=<name-of-app>`
-
-The Spring Boot starter will automatically assign cloud role name to the value you enter for the spring.application.name property.
-
-### Client/browser-side JavaScript
+# [JavaScript](#tab/javascript)
 
 ```javascript
 appInsights.queue.push(() => {
@@ -200,6 +200,7 @@ appInsights.addTelemetryInitializer((envelope) => {
 });
 });
 ```
+---
 
 ### Understanding cloud role name within the context of the Application Map
 
@@ -216,11 +217,11 @@ For the [official definitions](https://github.com/Microsoft/ApplicationInsights-
 ```
    [Description("Name of the role the application is a part of. Maps directly to the role name in azure.")]
     [MaxStringLength("256")]
-    705: string 	 CloudRole = "ai.cloud.role";
+    705: string      CloudRole = "ai.cloud.role";
     
     [Description("Name of the instance where the application is running. Computer name for on-premises, instance name for Azure.")]
     [MaxStringLength("256")]
-    715: string 	 CloudRoleInstance = "ai.cloud.roleInstance";
+    715: string      CloudRoleInstance = "ai.cloud.roleInstance";
 ```
 
 Alternatively, **cloud role instance** can be helpful for scenarios where **cloud role name** tells you the problem is somewhere in your web front-end, but you might be running your web front-end across multiple load-balanced servers so being able to drill in a layer deeper via Kusto queries and knowing if the issue is impacting all web front-end servers/instances or just one can be extremely important.
@@ -255,7 +256,7 @@ In addition, Application Map only supports up to 1000 separate ungrouped nodes r
 
 To fix this, you'll need to change your instrumentation to properly set the cloud role name, dependency type, and dependency target fields.
 
-* Dependency target should represent the logical name of a dependency. In many cases, it’s equivalent to the server or resource name of the dependency. For example, in the case of HTTP dependencies it is set to the hostname. It should not contain unique IDs or parameters that change from one request to another.
+* Dependency target should represent the logical name of a dependency. In many cases, it's equivalent to the server or resource name of the dependency. For example, in the case of HTTP dependencies it is set to the hostname. It should not contain unique IDs or parameters that change from one request to another.
 
 * Dependency type should represent the logical type of a dependency. For example, HTTP, SQL or Azure Blob are typical dependency types. It should not contain unique IDs.