feat: updated infra docs (#3637)

* feat: updated infra docs

* feat: add selection for infra metrics types and render selected metrics type docs

* feat: qc updates

* feat: fix header alignment issue

---------

Co-authored-by: ankit01-oss <>
Co-authored-by: Yunus A M <myounis.ar@live.com>

frontend/src/container/OnboardingContainer/APM/GoLang/goLang.md

@@ -4,14 +4,14 @@
 
 From VMs, there are two ways to send data to SigNoz Cloud.
 
-- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud)
+- Send traces directly to SigNoz Cloud (quick start)
-- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended)
+- Send traces via OTel Collector binary (recommended)
 
 #### **Send traces directly to SigNoz Cloud**
 
 1. **Install Dependencies**
    
-   Dependencies related to OpenTelemetry exporter and SDK have to be installed first. Note that we are assuming you are using `gin` request router. If you are using other request routers, check out the [corresponding package](#request-routers).
+   Dependencies related to OpenTelemetry exporter and SDK have to be installed first. Note that we are assuming you are using `gin` request router. If you are using other request routers, check out the [corresponding package](https://signoz.io/docs/instrumentation/golang/#request-routers).
    
    Run the below commands after navigating to the application source folder:
     
@@ -163,7 +163,7 @@ You can find instructions to install OTel Collector binary [here](https://signoz
 
 1. **Install Dependencies**
    
-   Dependencies related to OpenTelemetry exporter and SDK have to be installed first. Note that we are assuming you are using `gin` request router. If you are using other request routers, check out the [corresponding package](#request-routers).
+   Dependencies related to OpenTelemetry exporter and SDK have to be installed first. Note that we are assuming you are using `gin` request router. If you are using other request routers, check out the [corresponding package](https://signoz.io/docs/instrumentation/golang/#request-routers).
    
    Run the below commands after navigating to the application source folder:
     
@@ -301,7 +301,7 @@ Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Go
 
 1. **Install Dependencies**
    
-   Dependencies related to OpenTelemetry exporter and SDK have to be installed first. Note that we are assuming you are using `gin` request router. If you are using other request routers, check out the [corresponding package](#request-routers).
+   Dependencies related to OpenTelemetry exporter and SDK have to be installed first. Note that we are assuming you are using `gin` request router. If you are using other request routers, check out the [corresponding package](https://signoz.io/docs/instrumentation/golang/#request-routers).
    
    Run the below commands after navigating to the application source folder:
     

frontend/src/container/OnboardingContainer/APM/Java/md-docs/java.md

@@ -12,8 +12,8 @@ Based on your application environment, you can choose the setup below to send tr
 
 From VMs, there are two ways to send data to SigNoz Cloud.
 
-- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud)
+- Send traces directly to SigNoz Cloud (quick start)
-- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended)
+- Send traces via OTel Collector binary (recommended)
 
 #### **Send traces directly to SigNoz Cloud**
 
@@ -31,11 +31,12 @@ Step 2. Run your application
 OTEL_RESOURCE_ATTRIBUTES=service.name=<app_name> \
 OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>" \
 OTEL_EXPORTER_OTLP_ENDPOINT=https://ingest.{region}.signoz.cloud:443 \
-java -javaagent:$PWD/opentelemetry-javaagent.jar -jar <my-app>.jar
+java -javaagent:<path>/opentelemetry-javaagent.jar -jar <my-app>.jar
 ```
 
 - `<app_name>` is the name for your application
 - `<SIGNOZ_INGESTION_KEY>` is the API token provided by SigNoz. You can find your ingestion key from SigNoz cloud account details sent on your email.
+- `path` - Update it to the path of your downloaded Java JAR agent.
 
 Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
 
@@ -63,11 +64,11 @@ wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releas
 Step 2. Run your application
 
 ```bash
-java -javaagent:$PWD/opentelemetry-javaagent.jar -jar <myapp>.jar
+java -javaagent:<path>/opentelemetry-javaagent.jar -jar <myapp>.jar
 ```
 
 - `<myapp>` is the name of your application jar file
-- In case you download `opentelemetry-javaagent.jar` file in different directory than that of the project, replace `$PWD` with the path of the otel jar file.
+- `path` - Update it to the path of your downloaded Java JAR agent.
 
 ---
 
@@ -77,20 +78,20 @@ For Java application deployed on Kubernetes, you need to install OTel Collector
 
 Once you have set up OTel Collector agent, you can proceed with OpenTelemetry java instrumentation by following the below steps:
 
-1. Download otel java binary
+Step 1. Download otel java binary
 
-   ```bash
+```bash
-   wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
+wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
-   ```
+```
 
-2. Run your application
+Step 2. Run your application
    
-   ```bash
+```bash
-   java -javaagent:$PWD/opentelemetry-javaagent.jar -jar <myapp>.jar
+java -javaagent:<path>/opentelemetry-javaagent.jar -jar <myapp>.jar
-   ```
+```
 
-   - `<myapp>` is the name of your application jar file
+- `<myapp>` is the name of your application jar file
-   - In case you download `opentelemetry-javaagent.jar` file in different directory than that of the project, replace `$PWD` with the path of the otel jar file.
+- `path` - Update it to the path of your downloaded Java JAR agent.
 
-3. Make sure to dockerise your application along with OpenTelemetry instrumentation.
+Step 3. Make sure to dockerise your application along with OpenTelemetry instrumentation.
   

frontend/src/container/OnboardingContainer/APM/Java/md-docs/jboss.md

@@ -12,8 +12,8 @@ Based on your application environment, you can choose the setup below to send tr
 
 From VMs, there are two ways to send data to SigNoz Cloud.
 
-- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud)
+- Send traces directly to SigNoz Cloud (quick start)
-- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended)
+- Send traces via OTel Collector binary (recommended)
 
 #### **Send traces directly to SigNoz Cloud**
 OpenTelemetry Java agent can send traces directly to SigNoz Cloud.

frontend/src/container/OnboardingContainer/APM/Java/md-docs/spring_boot.md

@@ -12,8 +12,8 @@ Based on your application environment, you can choose the setup below to send tr
 
 From VMs, there are two ways to send data to SigNoz Cloud.
 
-- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud)
+- Send traces directly to SigNoz Cloud (quick start)
-- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended)
+- Send traces via OTel Collector binary (recommended)
 
 #### **Send traces directly to SigNoz Cloud**
 OpenTelemetry Java agent can send traces directly to SigNoz Cloud.
@@ -74,19 +74,19 @@ For Java application deployed on Kubernetes, you need to install OTel Collector
 
 Once you have set up OTel Collector agent, you can proceed with OpenTelemetry java instrumentation by following the below steps:
 
-1. Download otel java binary
+Step 1. Download otel java binary
 
-   ```bash
+```bash
-   wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
+wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
-   ```
+```
 
-2. Run your application
+Step 2. Run your application
    
-   ```bash
+```bash
-   java -javaagent:<path>/opentelemetry-javaagent.jar -jar <myapp>.jar
+java -javaagent:<path>/opentelemetry-javaagent.jar -jar <myapp>.jar
-   ```
+```
 
-   - `<myapp>` is the name of your application
+- `<myapp>` is the name of your application
-   - `<path>` - update it to the path of your downloaded Java JAR agent
+- `<path>` - update it to the path of your downloaded Java JAR agent
 
-3. Make sure to dockerise your application along with OpenTelemetry instrumentation.
+Step 3. Make sure to dockerise your application along with OpenTelemetry instrumentation.

frontend/src/container/OnboardingContainer/APM/Java/md-docs/tomcat.md

@@ -12,8 +12,8 @@ Based on your application environment, you can choose the setup below to send tr
 
 From VMs, there are two ways to send data to SigNoz Cloud.
 
-- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud)
+- Send traces directly to SigNoz Cloud (quick start)
-- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended)
+- Send traces via OTel Collector binary (recommended)
 
 #### **Send traces directly to SigNoz Cloud**
 OpenTelemetry Java agent can send traces directly to SigNoz Cloud.
@@ -82,24 +82,24 @@ For Java application deployed on Kubernetes, you need to install OTel Collector
 
 Once you have set up OTel Collector agent, you can proceed with OpenTelemetry java instrumentation by following the below steps:
 
-1. Download otel java binary
+Step 1. Download otel java binary
 
-   ```bash
+```bash
-   wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
+wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
-   ```
+```
 
-2. Enable the instrumentation agent and run your application
+Step 2. Enable the instrumentation agent and run your application
 
-   If you run your `.war` package by putting in `webapps` folder, just add `setenv.sh` in your Tomcat `bin` folder.
+If you run your `.war` package by putting in `webapps` folder, just add `setenv.sh` in your Tomcat `bin` folder.
 
-   This should set the environment variable and start sending telemetry data to SigNoz Cloud.
+This should set the environment variable and start sending telemetry data to SigNoz Cloud.
 
-   ```bash
+```bash
-   export CATALINA_OPTS="$CATALINA_OPTS -javaagent:/<path>/opentelemetry-javaagent.jar"
+export CATALINA_OPTS="$CATALINA_OPTS -javaagent:/<path>/opentelemetry-javaagent.jar"
-   ```
+```
 
-   - `<path>` - Update it to the path of your downloaded Java JAR agent.
+- `<path>` - Update it to the path of your downloaded Java JAR agent.
 
-3. Make sure to dockerise your application along with OpenTelemetry instrumentation.
+Step 3. Make sure to dockerise your application along with OpenTelemetry instrumentation.
 
 You can validate if your application is sending traces to SigNoz cloud by following the instructions [here](https://signoz.io/docs/instrumentation/tomcat/#validating-instrumentation-by-checking-for-traces).

frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/express.md

@@ -12,8 +12,8 @@ Based on your application environment, you can choose the setup below to send tr
 
 From VMs, there are two ways to send data to SigNoz Cloud.
 
-- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud)
+- Send traces directly to SigNoz Cloud (quick start)
-- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended)
+- Send traces via OTel Collector binary(recommended)
 
 #### **Send traces directly to SigNoz Cloud**
 

frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/javascript.md

@@ -10,8 +10,8 @@ Based on your application environment, you can choose the setup below to send tr
 
 From VMs, there are two ways to send data to SigNoz Cloud.
 
-- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud)
+- Send traces directly to SigNoz Cloud (quick start)
-- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended)
+- Send traces via OTel Collector binary (recommended)
 
 #### **Send traces directly to SigNoz Cloud**
 

frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/nestjs.md

@@ -12,8 +12,8 @@ Based on your application environment, you can choose the setup below to send tr
 
 From VMs, there are two ways to send data to SigNoz Cloud.
 
-- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud)
+- Send traces directly to SigNoz Cloud (quick start)
-- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended)
+- Send traces via OTel Collector binary (recommended)
 
 #### **Send traces directly to SigNoz Cloud**
 

frontend/src/container/OnboardingContainer/APM/Python/md-docs/django.md

@@ -19,8 +19,8 @@ Based on your application environment, you can choose the setup below to send tr
 
 From VMs, there are two ways to send data to SigNoz Cloud.
 
-- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud)
+- Send traces directly to SigNoz Cloud (quick start)
-- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended)
+- Send traces via OTel Collector binary (recommended)
 
 #### **Send traces directly to SigNoz Cloud**
 
@@ -100,7 +100,7 @@ Step 3. Add automatic instrumentation
 opentelemetry-bootstrap --action=install
 ```
 
-Step 4. To run your application and send data to collector in same VM:
+Step 4. To run your application and send data to collector in same VM
 
 ```bash
 OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \

frontend/src/container/OnboardingContainer/APM/Python/md-docs/falcon.md

@@ -10,8 +10,8 @@ Based on your application environment, you can choose the setup below to send tr
 
 From VMs, there are two ways to send data to SigNoz Cloud.
 
-- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud)
+- Send traces directly to SigNoz Cloud (quick start)
-- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended)
+- Send traces via OTel Collector binary (recommended)
 
 #### **Send traces directly to SigNoz Cloud**
 
@@ -91,7 +91,7 @@ opentelemetry-bootstrap --action=install
 ```
 Please make sure that you have installed all the dependencies of your application before running the above command. The command will not install instrumentation for the dependencies which are not installed.
 
-Step 4. To run your application and send data to collector in same VM:
+Step 4. To run your application and send data to collector in same VM
 
 ```bash
 OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
@@ -143,7 +143,7 @@ opentelemetry-bootstrap --action=install
 
 Please make sure that you have installed all the dependencies of your application before running the above command. The command will not install instrumentation for the dependencies which are not installed.
 
-Step 4. Run your application:
+Step 4. Run your application
 
 ```bash
 OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \

frontend/src/container/OnboardingContainer/APM/Python/md-docs/fastAPI.md

@@ -10,8 +10,8 @@ Based on your application environment, you can choose the setup below to send tr
 
 From VMs, there are two ways to send data to SigNoz Cloud.
 
-- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud)
+- Send traces directly to SigNoz Cloud (quick start)
-- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended)
+- Send traces via OTel Collector binary (recommended)
 
 #### **Send traces directly to SigNoz Cloud**
 
@@ -92,7 +92,7 @@ opentelemetry-bootstrap --action=install
 
 Please make sure that you have installed all the dependencies of your application before running the above command. The command will not install instrumentation for the dependencies which are not installed.
 
-Step 4. To run your application and send data to collector in same VM:
+Step 4. To run your application and send data to collector in same VM
 
 ```bash
 OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
@@ -141,7 +141,7 @@ opentelemetry-bootstrap --action=install
 
 Please make sure that you have installed all the dependencies of your application before running the above command. The command will not install instrumentation for the dependencies which are not installed.
 
-Step 4. Run your application:
+Step 4. Run your application
 
 ```bash
 OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \

frontend/src/container/OnboardingContainer/APM/Python/md-docs/flask.md

@@ -10,8 +10,8 @@ Based on your application environment, you can choose the setup below to send tr
 
 From VMs, there are two ways to send data to SigNoz Cloud.
 
-- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud)
+- Send traces directly to SigNoz Cloud (quick start)
-- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended)
+- Send traces via OTel Collector binary (recommended)
 
 #### **Send traces directly to SigNoz Cloud**
 
@@ -92,7 +92,7 @@ opentelemetry-bootstrap --action=install
 
 Please make sure that you have installed all the dependencies of your application before running the above command. The command will not install instrumentation for the dependencies which are not installed.
 
-Step 4. To run your application and send data to collector in same VM:
+Step 4. To run your application and send data to collector in same VM
 
 ```bash
 OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
@@ -144,7 +144,7 @@ opentelemetry-bootstrap --action=install
 
 Please make sure that you have installed all the dependencies of your application before running the above command. The command will not install instrumentation for the dependencies which are not installed.
 
-Step 4. Run your application:
+Step 4. Run your application
 
 ```bash
 OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \

frontend/src/container/OnboardingContainer/APM/Python/md-docs/python.md

@@ -10,8 +10,8 @@ Based on your application environment, you can choose the setup below to send tr
 
 From VMs, there are two ways to send data to SigNoz Cloud.
 
-- [Send traces directly to SigNoz Cloud](#send-traces-directly-to-signoz-cloud)
+- Send traces directly to SigNoz Cloud (quick start)
-- [Send traces via OTel Collector binary](#send-traces-via-otel-collector-binary) (recommended)
+- Send traces via OTel Collector binary (recommended)
 
 #### **Send traces directly to SigNoz Cloud**
 
@@ -73,7 +73,7 @@ Step 2. Add automatic instrumentation
 opentelemetry-bootstrap --action=install
 ```
 
-Step 3. To run your application and send data to collector in same VM:
+Step 3. To run your application and send data to collector in same VM
 
 ```bash
 OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
@@ -118,7 +118,7 @@ Step 2. Add automatic instrumentation
 opentelemetry-bootstrap --action=install
 ```
 
-Step 3. Run your application:
+Step 3. Run your application
 
 ```bash
 OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \

frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.styles.scss

@@ -1,6 +1,18 @@
 .infrastructure-monitoring-module-container {
 	padding: 48px 0;
 
+	.module-header {
+		h1 {
+			font-size: 24px;
+			font-weight: 500;
+		}
+
+		h4 {
+			font-size: 14px;
+			font-weight: 300;
+		}
+	}
+
 	.content-container {
 		.heading {
 			.title {
@@ -21,15 +33,13 @@
 				flex-direction: column;
 			}
 		}
-
-		h1 {
-			font-size: 24px;
-			font-weight: 500;
 	}
 
-		h4 {
+	.header {
-			font-size: 14px;
+		display: flex;
-			font-weight: 300;
+		gap: 16px;
-		}
+		justify-content: flex-start;
+		align-items: center;
+		margin: 16px 0;
 	}
 }

frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.tsx

@@ -1,45 +1,154 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import './InfrastructureMonitoring.styles.scss';
 
+import cx from 'classnames';
 import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
+import { useEffect, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
+import { trackEvent } from 'utils/segmentAnalytics';
 
-import InfraMonitoringDocs from './infraMonitoringDocs.md';
+import Header from '../common/Header/Header';
+import hostMetricsMonitoring from './md-docs/hostMetricsMonitoring.md';
+import k8sInfraMonitoringDocs from './md-docs/kubernetesInfraMonitoring.md';
+import otherMetrics from './md-docs/otherMetrics.md';
 
 export default function InfrastructureMonitoring({
 	activeStep,
 }: {
 	activeStep: number;
 }): JSX.Element {
-	const docsURL = 'https://signoz.io/docs/userguide/send-metrics-cloud/';
+	const [selectedInfraMetrics, setSelectedInfraMetrics] = useState('kubernetes');
-	const heading = 'Send Metrics to SigNoz Cloud';
+	const [selectedInfraMetricsDocs, setSelectedInfraMetricsDocs] = useState(
+		k8sInfraMonitoringDocs,
+	);
+
+	useEffect(() => {
+		// on metrics Type select
+		trackEvent('Onboarding: APM : Java', {
+			selectedInfraMetrics,
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [selectedInfraMetrics]);
+
+	const supportedInfraMetrics = [
+		{
+			name: 'Kubernetes Infra Metrics',
+			id: 'kubernetes',
+			imgURL: `Logos/kubernetes.svg`,
+		},
+		{
+			name: 'HostMetrics',
+			id: 'hostMetrics',
+			imgURL: `Logos/software-window.svg`,
+		},
+		{
+			name: 'Other Metrics',
+			id: 'otherMetrics',
+			imgURL: `Logos/cmd-terminal.svg`,
+		},
+	];
+
+	const handleMetricsTypeChange = (selectedMetricsType: string): void => {
+		setSelectedInfraMetrics(selectedMetricsType);
+
+		switch (selectedMetricsType) {
+			case 'kubernetes':
+				setSelectedInfraMetricsDocs(k8sInfraMonitoringDocs);
+				break;
+			case 'hostMetrics':
+				setSelectedInfraMetricsDocs(hostMetricsMonitoring);
+				break;
+			case 'otherMetrics':
+				setSelectedInfraMetricsDocs(otherMetrics);
+				break;
+			default:
+				setSelectedInfraMetricsDocs(otherMetrics);
+				break;
+		}
+	};
+
+	const getHeaderBasedOnType = (): JSX.Element => {
+		switch (selectedInfraMetrics) {
+			case 'hostMetrics':
+				return (
+					<Header
+						entity="hostMetrics"
+						heading="Host Metrics"
+						imgURL="/Logos/software-window.svg"
+						docsURL="https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/"
+						imgClassName="supported-logs-type-img"
+					/>
+				);
+
+			case 'otherMetrics':
+				return (
+					<Header
+						entity="otherMetrics"
+						heading="Other Metrics"
+						imgURL="/Logos/cmd-terminal.svg"
+						docsURL="https://signoz.io/docs/userguide/send-metrics-cloud/"
+						imgClassName="supported-logs-type-img"
+					/>
+				);
+
+			default:
+				return (
+					<Header
+						entity="kubernetes"
+						heading="Kubernetes Metrics"
+						imgURL="/Logos/kubernetes.svg"
+						docsURL="https://signoz.io/docs/tutorial/kubernetes-infra-metrics/"
+						imgClassName="supported-logs-type-img"
+					/>
+				);
+		}
+	};
+
 	return (
 		<div className="infrastructure-monitoring-module-container">
 			{activeStep === 2 && (
+				<>
+					<div className="module-header">
+						<h1>Select an Infra Metrics type</h1>
+						{/* <h4> Choose the logs that you want to receive on SigNoz </h4> */}
+					</div>
+
+					<div className="supported-logs-type-container">
+						{supportedInfraMetrics.map((logType) => (
+							<div
+								className={cx(
+									'supported-logs-type',
+									selectedInfraMetrics === logType.id ? 'selected' : '',
+								)}
+								key={logType.name}
+								onClick={(): void => handleMetricsTypeChange(logType.id)}
+							>
+								<img
+									className={cx('supported-logs-type-img')}
+									src={`${logType.imgURL}`}
+									alt=""
+								/>
+
+								<div> {logType.name} </div>
+							</div>
+						))}
+					</div>
+
+					{getHeaderBasedOnType()}
+
 					<div className="content-container">
-					<div className="header">
-						<div className="title">
-							<h1>{heading}</h1>
-
-							<div className="detailed-docs-link">
-								View detailed docs
-								<a target="_blank" href={docsURL} rel="noreferrer">
-									here
-								</a>
-							</div>
-						</div>
-					</div>
-
 						<ReactMarkdown
 							components={{
 								pre: Pre,
 								code: Code,
 							}}
 						>
-						{InfraMonitoringDocs}
+							{selectedInfraMetricsDocs}
 						</ReactMarkdown>
 					</div>
+				</>
 			)}
-			{activeStep === 3 && <div> Infra Monitoring Step 3 </div>}
 		</div>
 	);
 }

frontend/src/container/OnboardingContainer/InfrastructureMonitoring/md-docs/hostMetricsMonitoring.md

@@ -0,0 +1,10 @@
+## Hostmetrics Monitoring
+You can collect Hostmetrics from your VM and send it to SigNoz cloud using OpenTelemetry Collector.
+
+Steps to send hostmetrics to SigNoz Cloud:
+
+- Install OpenTelemetry Collector binary agent. Please find instructions [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/#setup-otel-collector-as-agent).
+
+- Import Hostmetrics Dashboard in SigNoz. Please find instructions [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/#hostmetrics-dashboard).
+
+Learn how to create dashboards and panels [here](https://signoz.io/docs/userguide/manage-dashboards-and-panels/).

frontend/src/container/OnboardingContainer/InfrastructureMonitoring/md-docs/kubernetesInfraMonitoring.md

@@ -0,0 +1,9 @@
+## Kubernetes Infra Metrics
+
+You can collect Kubernetes infra metrics from your k8s cluster and send it to SigNoz cloud using k8s-infra chart.
+
+Steps to send kubernetes infra metrics to SigNoz Cloud:
+
+- Install OpenTelemetry Collectors in your k8s infra. Please find instructions [here](https://signoz.io/docs/tutorial/kubernetes-infra-metrics/).
+
+- Plot metrics in SigNoz UI by following the instructions [here](https://signoz.io/docs/tutorial/kubernetes-infra-metrics/#plot-metrics-in-signoz-ui).

frontend/src/container/OnboardingContainer/InfrastructureMonitoring/md-docs/otherMetrics.md

@@ -1,3 +1,7 @@
+## Send metrics from any third-party integrations
+
+This document helps you to send metrics from any third-party integrations such as RabbitMQ, Nginx, MySQL, etc.
+
 There are two ways in which you can send metrics to SigNoz using OpenTelemetry:
 
 - From your application
@@ -5,8 +9,8 @@ There are two ways in which you can send metrics to SigNoz using OpenTelemetry:
 
 In this document, we will cover how to send metrics from OpenTelemetry Collector. The Collector is a swiss-army knife that can collect metrics from various sources and send them to SigNoz.
 
-- [Enable a Specific Metric Receiver](#enable-a-specific-metric-receiver)
+- Enable a Specific Metric Receiver
-- [Enable a Prometheus Receiver](#enable-a-prometheus-receiver)
+- Enable a Prometheus Receiver
 
 ## Enable a Specific Metric Receiver
 

frontend/src/container/OnboardingContainer/OnboardingContainer.tsx

@@ -43,21 +43,21 @@ const useCases = {
 		id: ModulesMap.APM,
 		title: 'Application Monitoring',
 		desc:
-			'Monitor performance of your applications & troubleshoot problems by installing within your infra.',
+			'Monitor application metrics like p99 latency, error rates, external API calls, and db calls.',
 		stepDesc: defaultStepDesc,
 	},
 	LogsManagement: {
 		id: ModulesMap.LogsManagement,
 		title: 'Logs Management',
 		desc:
-			'Easily search and filter logs with query builder and automatically detect logs from K8s cluster.',
+			'Easily filter and query logs, build dashboards and alerts based on attributes in logs',
 		stepDesc: 'Choose the logs that you want to receive on SigNoz',
 	},
 	InfrastructureMonitoring: {
 		id: ModulesMap.InfrastructureMonitoring,
 		title: 'Infrastructure Monitoring',
 		desc:
-			'Easily search and filter logs with query builder and automatically detect logs from K8s cluster.',
+			'Monitor Kubernetes infrastructure metrics, hostmetrics, or metrics of any third-party integration',
 		stepDesc: defaultStepDesc,
 	},
 };