feat: hoc to support markdown content with variable interpolation (#3667)

* feat: hoc to support markdown content with variable interpolation

* feat: add ingestion settings page

* feat: update ingestion settings page and java docs to use interpolation

* feat: integrate ingestion info API and update docs components to use ingestion info

* feat: address review comments and update <my-app> to <servive-name>

frontend/public/locales/en-GB/routes.json

@@ -2,6 +2,7 @@
 	"general": "General",
 	"alert_channels": "Alert Channels",
 	"organization_settings": "Organization Settings",
+	"ingestion_settings": "Ingestion Settings",
 	"my_settings": "My Settings",
 	"overview_metrics": "Overview Metrics",
 	"dbcall_metrics": "Database Calls",

frontend/public/locales/en-GB/titles.json

@@ -24,6 +24,7 @@
 	"VERSION": "SigNoz | Version",
 	"MY_SETTINGS": "SigNoz | My Settings",
 	"ORG_SETTINGS": "SigNoz | Organization Settings",
+	"INGESTION_SETTINGS": "SigNoz | Ingestion Settings",
 	"SOMETHING_WENT_WRONG": "SigNoz | Something Went Wrong",
 	"UN_AUTHORIZED": "SigNoz | Unauthorized",
 	"NOT_FOUND": "SigNoz | Page Not Found",

frontend/public/locales/en/routes.json

@@ -2,6 +2,7 @@
 	"general": "General",
 	"alert_channels": "Alert Channels",
 	"organization_settings": "Organization Settings",
+	"ingestion_settings": "Ingestion Settings",
 	"my_settings": "My Settings",
 	"overview_metrics": "Overview Metrics",
 	"dbcall_metrics": "Database Calls",

frontend/public/locales/en/titles.json

@@ -24,6 +24,7 @@
 	"VERSION": "SigNoz | Version",
 	"MY_SETTINGS": "SigNoz | My Settings",
 	"ORG_SETTINGS": "SigNoz | Organization Settings",
+	"INGESTION_SETTINGS": "SigNoz | Ingestion Settings",
 	"SOMETHING_WENT_WRONG": "SigNoz | Something Went Wrong",
 	"UN_AUTHORIZED": "SigNoz | Unauthorized",
 	"NOT_FOUND": "SigNoz | Page Not Found",

frontend/src/AppRoutes/pageComponents.ts

@@ -102,6 +102,10 @@ export const OrganizationSettings = Loadable(
 	() => import(/* webpackChunkName: "All Settings" */ 'pages/Settings'),
 );
 
+export const IngestionSettings = Loadable(
+	() => import(/* webpackChunkName: "Ingestion Settings" */ 'pages/Settings'),
+);
+
 export const MySettings = Loadable(
 	() => import(/* webpackChunkName: "All MySettings" */ 'pages/MySettings'),
 );

frontend/src/AppRoutes/routes.ts

@@ -11,6 +11,7 @@ import {
 	EditAlertChannelsAlerts,
 	EditRulesPage,
 	ErrorDetails,
+	IngestionSettings,
 	LicensePage,
 	ListAllALertsPage,
 	LiveLogs,
@@ -214,6 +215,13 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'ORG_SETTINGS',
 	},
+	{
+		path: ROUTES.INGESTION_SETTINGS,
+		exact: true,
+		component: IngestionSettings,
+		isPrivate: true,
+		key: 'INGESTION_SETTINGS',
+	},
 	{
 		path: ROUTES.MY_SETTINGS,
 		exact: true,

frontend/src/api/settings/getIngestionData.ts

@@ -0,0 +1,24 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { IngestionResponseProps } from 'types/api/settings/ingestion';
+
+const getIngestionData = async (): Promise<
+	SuccessResponse<IngestionResponseProps> | ErrorResponse
+> => {
+	try {
+		const response = await axios.get(`/settings/ingestion_key`);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getIngestionData;

frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx

@@ -1,10 +1,18 @@
+/* eslint-disable no-restricted-syntax */
 /* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import ReactMarkdown from 'react-markdown';
 import { CodeProps } from 'react-markdown/lib/ast-to-react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { a11yDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 
 import CodeCopyBtn from './CodeCopyBtn/CodeCopyBtn';
 
+interface LinkProps {
+	href: string;
+	children: React.ReactElement;
+}
+
 function Pre({ children }: { children: React.ReactNode }): JSX.Element {
 	return (
 		<pre className="code-snippet-container">
@@ -40,4 +48,54 @@ function Code({
 	);
 }
 
-export { Code, Pre };
+function Link({ href, children }: LinkProps): JSX.Element {
+	return (
+		<a href={href} target="_blank" rel="noopener noreferrer">
+			{children}
+		</a>
+	);
+}
+
+const interpolateMarkdown = (
+	markdownContent: any,
+	variables: { [s: string]: unknown } | ArrayLike<unknown>,
+) => {
+	let interpolatedContent = markdownContent;
+
+	const variableEntries = Object.entries(variables);
+
+	// Loop through variables and replace placeholders with values
+	for (const [key, value] of variableEntries) {
+		const placeholder = `{{${key}}}`;
+		const regex = new RegExp(placeholder, 'g');
+		interpolatedContent = interpolatedContent.replace(regex, value);
+	}
+
+	return interpolatedContent;
+};
+
+function MarkdownRenderer({
+	markdownContent,
+	variables,
+}: {
+	markdownContent: any;
+	variables: any;
+}): JSX.Element {
+	const interpolatedMarkdown = interpolateMarkdown(markdownContent, variables);
+
+	return (
+		<ReactMarkdown
+			components={{
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+				// @ts-ignore
+				a: Link,
+				pre: Pre,
+				code: Code,
+			}}
+		>
+			{interpolatedMarkdown}
+		</ReactMarkdown>
+	);
+}
+
+export { Code, Link, MarkdownRenderer, Pre };

frontend/src/constants/routes.ts

@@ -24,6 +24,7 @@ const ROUTES = {
 	VERSION: '/status',
 	MY_SETTINGS: '/my-settings',
 	ORG_SETTINGS: '/settings/org-settings',
+	INGESTION_SETTINGS: '/settings/ingestion-settings',
 	SOMETHING_WENT_WRONG: '/something-went-wrong',
 	UN_AUTHORIZED: '/un-authorized',
 	NOT_FOUND: '/not-found',

frontend/src/container/IngestionSettings/IngestionSettings.styles.scss

@@ -0,0 +1,3 @@
+.ingestion-settings-container {
+	color: white;
+}

frontend/src/container/IngestionSettings/IngestionSettings.tsx

@@ -0,0 +1,82 @@
+import './IngestionSettings.styles.scss';
+
+import { Table, Typography } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import getIngestionData from 'api/settings/getIngestionData';
+import { useQuery } from 'react-query';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import { IngestionDataType } from 'types/api/settings/ingestion';
+import AppReducer from 'types/reducer/app';
+
+export default function IngestionSettings(): JSX.Element {
+	const { user } = useSelector<AppState, AppReducer>((state) => state.app);
+
+	const { data: ingestionData } = useQuery({
+		queryFn: getIngestionData,
+		queryKey: ['getIngestionData', user?.userId],
+	});
+
+	const columns: ColumnsType<IngestionDataType> = [
+		{
+			title: 'Name',
+			dataIndex: 'name',
+			key: 'name',
+			render: (text): JSX.Element => <Typography.Text> {text} </Typography.Text>,
+		},
+		{
+			title: 'Value',
+			dataIndex: 'value',
+			key: 'value',
+			render: (text): JSX.Element => (
+				<Typography.Text copyable>{text}</Typography.Text>
+			),
+		},
+	];
+
+	const injectionDataPayload =
+		ingestionData &&
+		ingestionData.payload &&
+		Array.isArray(ingestionData.payload) &&
+		ingestionData?.payload[0];
+
+	const data: IngestionDataType[] = [
+		{
+			key: '1',
+			name: 'Ingestion URL',
+			value: injectionDataPayload?.ingestionURL,
+		},
+		{
+			key: '2',
+			name: 'Ingestion Key',
+			value: injectionDataPayload?.ingestionKey,
+		},
+		{
+			key: '3',
+			name: 'Ingestion Region',
+			value: injectionDataPayload?.dataRegion,
+		},
+	];
+
+	return (
+		<div className="ingestion-settings-container">
+			<Typography
+				style={{
+					margin: '16px 0px',
+				}}
+			>
+				You can use the following ingestion credentials to start sending your
+				telemetry data to SigNoz
+			</Typography>
+
+			<Table
+				style={{
+					margin: '16px 0px',
+				}}
+				pagination={false}
+				columns={columns}
+				dataSource={data}
+			/>
+		</div>
+	);
+}

frontend/src/container/OnboardingContainer/APM/APM.tsx

@@ -2,8 +2,10 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import './APM.styles.scss';
 
+import getIngestionData from 'api/settings/getIngestionData';
 import cx from 'classnames';
 import { useEffect, useState } from 'react';
+import { useQuery } from 'react-query';
 import { trackEvent } from 'utils/segmentAnalytics';
 
 import GoLang from './GoLang/GoLang';
@@ -11,6 +13,15 @@ import Java from './Java/Java';
 import Javascript from './Javascript/Javascript';
 import Python from './Python/Python';
 
+interface IngestionInfoProps {
+	SIGNOZ_INGESTION_KEY?: string;
+	REGION?: string;
+}
+export interface LangProps {
+	ingestionInfo: IngestionInfoProps;
+	activeStep: number;
+}
+
 const supportedLanguages = [
 	{
 		name: 'java',
@@ -37,6 +48,30 @@ export default function APM({
 }): JSX.Element {
 	const [selectedLanguage, setSelectedLanguage] = useState('java');
 
+	const [ingestionInfo, setIngestionInfo] = useState<IngestionInfoProps>({});
+
+	const { status, data: ingestionData } = useQuery({
+		queryFn: () => getIngestionData(),
+	});
+
+	useEffect(() => {
+		if (
+			status === 'success' &&
+			ingestionData.payload &&
+			Array.isArray(ingestionData.payload)
+		) {
+			const payload = ingestionData.payload[0] || {
+				ingestionKey: '',
+				dataRegion: '',
+			};
+
+			setIngestionInfo({
+				SIGNOZ_INGESTION_KEY: payload?.ingestionKey,
+				REGION: payload?.dataRegion,
+			});
+		}
+	}, [status, ingestionData?.payload]);
+
 	useEffect(() => {
 		// on language select
 		trackEvent('Onboarding: APM', {
@@ -49,13 +84,13 @@ export default function APM({
 	const renderSelectedLanguageSetupInstructions = (): JSX.Element => {
 		switch (selectedLanguage) {
 			case 'java':
-				return <Java activeStep={activeStep} />;
+				return <Java ingestionInfo={ingestionInfo} activeStep={activeStep} />;
 			case 'python':
-				return <Python activeStep={activeStep} />;
+				return <Python ingestionInfo={ingestionInfo} activeStep={activeStep} />;
 			case 'javascript':
-				return <Javascript activeStep={activeStep} />;
+				return <Javascript ingestionInfo={ingestionInfo} activeStep={activeStep} />;
 			case 'go':
-				return <GoLang activeStep={activeStep} />;
+				return <GoLang ingestionInfo={ingestionInfo} activeStep={activeStep} />;
 			default:
 				return <> </>;
 		}

frontend/src/container/OnboardingContainer/APM/GoLang/GoLang.tsx

@@ -1,19 +1,26 @@
 import './GoLang.styles.scss';
 
 import { Form, Input } from 'antd';
-import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
+import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 import Header from 'container/OnboardingContainer/common/Header/Header';
-import ReactMarkdown from 'react-markdown';
 
+import { LangProps } from '../APM';
 import ConnectionStatus from '../common/ConnectionStatus/ConnectionStatus';
 import GoLangDocs from './goLang.md';
 
 export default function GoLang({
+	ingestionInfo,
 	activeStep,
-}: {
-	activeStep: number;
-}): JSX.Element {
+}: LangProps): JSX.Element {
 	const [form] = Form.useForm();
+	const serviceName = Form.useWatch('Service Name', form);
+
+	const variables = {
+		MYAPP: serviceName || '<service-name>',
+		SIGNOZ_INGESTION_KEY:
+			ingestionInfo.SIGNOZ_INGESTION_KEY || '<SIGNOZ_INGESTION_KEY>',
+		REGION: ingestionInfo.REGION || 'region',
+	};
 
 	return (
 		<>
@@ -45,14 +52,7 @@ export default function GoLang({
 					</div>
 
 					<div className="content-container">
-						<ReactMarkdown
-							components={{
-								pre: Pre,
-								code: Code,
-							}}
-						>
-							{GoLangDocs}
-						</ReactMarkdown>
+						<MarkdownRenderer markdownContent={GoLangDocs} variables={variables} />
 					</div>
 				</div>
 			)}

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

@@ -134,24 +134,10 @@ From VMs, there are two ways to send data to SigNoz Cloud.
    The run command must have some environment variables to send data to SigNoz cloud. The run command:
     
     ```bash
-    SERVICE_NAME=goApp INSECURE_MODE=false OTEL_EXPORTER_OTLP_HEADERS=signoz-access-token=<SIGNOZ-INGESTION-TOKEN> OTEL_EXPORTER_OTLP_ENDPOINT=ingest.{region}.signoz.cloud:443 go run main.go
+    SERVICE_NAME={{MYAPP}} INSECURE_MODE=false OTEL_EXPORTER_OTLP_HEADERS=signoz-access-token={{SIGNOZ_INGESTION_KEY}} OTEL_EXPORTER_OTLP_ENDPOINT=ingest.{{REGION}}.signoz.cloud:443 go run main.go
     ```  
     
-    We can replace the placeholders based on our environment. 
-    
-    `SERVICE_NAME`: goGinApp (you can name it whatever you want)
-
-    `OTEL_EXPORTER_OTLP_HEADERS`: `signoz-access-token=<SIGNOZ-INGESTION-TOKEN>`. Update `<SIGNOZ-INGESTION-TOKEN>` with the ingestion token provided by SigNoz
-    
-    `OTEL_EXPORTER_OTLP_ENDPOINT`: ingest.{region}.signoz.cloud:443. Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary accordingly.
-
-    
-    US - ingest.us.signoz.cloud:443 
-
-    IN - ingest.in.signoz.cloud:443 
-
-    EU - ingest.eu.signoz.cloud:443 
-
+    If you want to update your `service_name`, you can modify the `SERVICE_NAME` variable.
   
 ---
 
@@ -285,11 +271,10 @@ You can find instructions to install OTel Collector binary [here](https://signoz
    The run command must have some environment variables to send data to SigNoz. The run command:
     
     ```bash
-    SERVICE_NAME=goGinApp INSECURE_MODE=true OTEL_EXPORTER_OTLP_ENDPOINT=localhost:4317 go run main.go
+    SERVICE_NAME={{MYAPP}} INSECURE_MODE=true OTEL_EXPORTER_OTLP_ENDPOINT=localhost:4317 go run main.go
     ```
     
     If you want to update your `service_name`, you can modify the `SERVICE_NAME` variable.
-    `SERVICE_NAME`: goGinApp (you can name it whatever you want)
 
 ---
 
@@ -423,8 +408,7 @@ Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Go
    The run command must have some environment variables to send data to SigNoz. The run command:
     
     ```bash
-    SERVICE_NAME=goGinApp INSECURE_MODE=true OTEL_EXPORTER_OTLP_ENDPOINT=localhost:4317 go run main.go
+    SERVICE_NAME={{MYAPP}} INSECURE_MODE=true OTEL_EXPORTER_OTLP_ENDPOINT=localhost:4317 go run main.go
     ```
     
     If you want to update your `service_name`, you can modify the `SERVICE_NAME` variable.
-    `SERVICE_NAME`: goGinApp (you can name it whatever you want)

frontend/src/container/OnboardingContainer/APM/Java/Java.tsx

@@ -1,13 +1,13 @@
 import './Java.styles.scss';
 
 import { Form, Input, Select } from 'antd';
-import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
+import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 import Header from 'container/OnboardingContainer/common/Header/Header';
 import { useEffect, useState } from 'react';
-import ReactMarkdown from 'react-markdown';
 import { trackEvent } from 'utils/segmentAnalytics';
 import { popupContainer } from 'utils/selectPopupContainer';
 
+import { LangProps } from '../APM';
 import ConnectionStatus from '../common/ConnectionStatus/ConnectionStatus';
 import JavaDocs from './md-docs/java.md';
 import JbossDocs from './md-docs/jboss.md';
@@ -22,15 +22,16 @@ enum FrameworksMap {
 }
 
 export default function Java({
+	ingestionInfo,
 	activeStep,
-}: {
-	activeStep: number;
-}): JSX.Element {
+}: LangProps): JSX.Element {
 	const [selectedFrameWork, setSelectedFrameWork] = useState('spring_boot');
 	const [selectedFrameWorkDocs, setSelectedFrameWorkDocs] = useState(
 		SprintBootDocs,
 	);
+
 	const [form] = Form.useForm();
+	const serviceName = Form.useWatch('Service Name', form);
 
 	useEffect(() => {
 		// on language select
@@ -59,6 +60,13 @@ export default function Java({
 		}
 	};
 
+	const variables = {
+		MYAPP: serviceName || '<service-name>',
+		SIGNOZ_INGESTION_KEY:
+			ingestionInfo.SIGNOZ_INGESTION_KEY || '<SIGNOZ_INGESTION_KEY>',
+		REGION: ingestionInfo.REGION || 'region',
+	};
+
 	return (
 		<>
 			{activeStep === 2 && (
@@ -119,14 +127,10 @@ export default function Java({
 					</div>
 
 					<div className="content-container">
-						<ReactMarkdown
-							components={{
-								pre: Pre,
-								code: Code,
-							}}
-						>
-							{selectedFrameWorkDocs}
-						</ReactMarkdown>
+						<MarkdownRenderer
+							markdownContent={selectedFrameWorkDocs}
+							variables={variables}
+						/>
 					</div>
 				</div>
 			)}

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

@@ -28,24 +28,12 @@ wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releas
 Step 2. Run your application
 
 ```bash
-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:<path>/opentelemetry-javaagent.jar -jar <my-app>.jar
+OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
+OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token={{SIGNOZ_INGESTION_KEY}}" \
+OTEL_EXPORTER_OTLP_ENDPOINT=https://ingest.{{REGION}}.signoz.cloud:443 \
+java -javaagent:<path>/opentelemetry-javaagent.jar -jar {{MYAPP}}.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.
-
- US -	ingest.us.signoz.cloud:443 
-
- IN -	ingest.in.signoz.cloud:443 
-
- EU - ingest.eu.signoz.cloud:443 
-
+- `<path>` - Update it to the path of your downloaded Java JAR agent.
 
 ---
 
@@ -64,11 +52,10 @@ wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releas
 Step 2. Run your application
 
 ```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 jar file
-- `path` - Update it to the path of your downloaded Java JAR agent.
+- `<path>` - Update it to the path of your downloaded Java JAR agent.
 
 ---
 
@@ -87,11 +74,10 @@ wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releas
 Step 2. Run your application
    
 ```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 jar file
-- `path` - Update it to the path of your downloaded Java JAR agent.
+- `<path>` - Update it to the path of your downloaded Java JAR agent.
 
 Step 3. Make sure to dockerise your application along with OpenTelemetry instrumentation.
   

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

@@ -36,24 +36,13 @@ Update `JAVA_OPTS` environment variable with configurations required to send dat
 
 ```bash
 JAVA_OPTS="-javaagent:/<path>/opentelemetry-javaagent.jar
--Dotel.exporter.otlp.endpoint=https://ingest.{region}.signoz.cloud:443
--Dotel.exporter.otlp.headers="signoz-access-token=<SIGNOZ_INGESTION_KEY>"
--Dotel.resource.attributes="service.name=<app_name>""
+-Dotel.exporter.otlp.endpoint=https://ingest.{{REGION}}.signoz.cloud:443
+-Dotel.exporter.otlp.headers="signoz-access-token={{SIGNOZ_INGESTION_KEY}}"
+-Dotel.resource.attributes="service.name={{MYAPP}}""
 ```
 You need to replace the following things based on your environment:
 
 - `<path>` - Update it to the path of your downloaded Java JAR agent.
-- `<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.
-
-Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
-
-
- US -	ingest.us.signoz.cloud:443 
-
- IN -	ingest.in.signoz.cloud:443 
-
- EU - ingest.eu.signoz.cloud:443 
 
    
 Step 4. [Optional] Write the output/logs of standalone.sh script to a file nohup.out as a background thread
@@ -86,11 +75,11 @@ Step 3. Update `JAVA_OPTS` environment variable
 Update `JAVA_OPTS` environment variable with configurations required to send data to SigNoz cloud in your configuration file.
 
 ```bash
-JAVA_OPTS="-javaagent:/path/opentelemetry-javaagent.jar"
+JAVA_OPTS="-javaagent:/<path>/opentelemetry-javaagent.jar"
 ```
 
 where,
-- `path` - Update it to the path of your downloaded Java JAR agent.
+- `<path>` - Update it to the path of your downloaded Java JAR agent.
 
 ---
 
@@ -117,11 +106,11 @@ Step 3. Update `JAVA_OPTS` environment variable
 Update `JAVA_OPTS` environment variable with configurations required to send data to SigNoz cloud in your configuration file.
 
 ```bash
-JAVA_OPTS="-javaagent:/path/opentelemetry-javaagent.jar"
+JAVA_OPTS="-javaagent:/<path>/opentelemetry-javaagent.jar"
 ```
 
 where,
-- `path` - Update it to the path of your downloaded Java JAR agent.
+- `<path>` - Update it to the path of your downloaded Java JAR agent.
 
 
 Step 4. Make sure to dockerise your application along with OpenTelemetry instrumentation.

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

@@ -27,22 +27,12 @@ wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releas
 Step 2. Run your application
 
 ```bash
-OTEL_RESOURCE_ATTRIBUTES=service.name=<myapp> \
-OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>" \
-OTEL_EXPORTER_OTLP_ENDPOINT=https://ingest.{region}.signoz.cloud:443 \
-java -javaagent:<path>/opentelemetry-javaagent.jar -jar <myapp>.jar
+OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
+OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token={{SIGNOZ_INGESTION_KEY}}" \
+OTEL_EXPORTER_OTLP_ENDPOINT=https://ingest.{{REGION}}.signoz.cloud:443 \
+java -javaagent:<path>/opentelemetry-javaagent.jar -jar {{MYAPP}}.jar
 ```
-- `<myapp>` is the name for your application
 - `<path>` - update it to the path of your downloaded Java JAR agent
-- `<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.
-
-Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
-
- US -	ingest.us.signoz.cloud:443 
-
- IN -	ingest.in.signoz.cloud:443 
-
- EU - ingest.eu.signoz.cloud:443 
 
 ---
 
@@ -60,10 +50,9 @@ wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releas
 Step 2. Run your application
 
 ```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
 - `<path>` - update it to the path of your downloaded Java JAR agent
   
 ---
@@ -83,10 +72,9 @@ wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releas
 Step 2. Run your application
    
 ```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
 - `<path>` - update it to the path of your downloaded Java JAR agent
 
 Step 3. Make sure to dockerise your application along with OpenTelemetry instrumentation.

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

@@ -31,22 +31,12 @@ If you run your `.war` package by putting in `webapps` folder, just add `setenv.
 
 ```bash
 export CATALINA_OPTS="$CATALINA_OPTS -javaagent:/<path>/opentelemetry-javaagent.jar"
-export OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>"
-export OTEL_EXPORTER_OTLP_ENDPOINT=https://ingest.{region}.signoz.cloud:443
-export OTEL_RESOURCE_ATTRIBUTES=service.name=<app_name>
+export OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token={{SIGNOZ_INGESTION_KEY}}"
+export OTEL_EXPORTER_OTLP_ENDPOINT=https://ingest.{{REGION}}.signoz.cloud:443
+export OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}}
 ```
 
-- `<app_name>` is the name for your application
 - `<path>` - update it to the path of your downloaded Java JAR agent.
-- `<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.
-
-Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary accordingly.
-
- US -	ingest.us.signoz.cloud:443 
-
- IN -	ingest.in.signoz.cloud:443 
-
- EU - ingest.eu.signoz.cloud:443 
 
 ---
 

frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.tsx

@@ -1,13 +1,13 @@
 import './Javascript.styles.scss';
 
 import { Form, Input, Select } from 'antd';
-import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
+import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 import Header from 'container/OnboardingContainer/common/Header/Header';
 import { useEffect, useState } from 'react';
-import ReactMarkdown from 'react-markdown';
 import { trackEvent } from 'utils/segmentAnalytics';
 import { popupContainer } from 'utils/selectPopupContainer';
 
+import { LangProps } from '../APM';
 import ConnectionStatus from '../common/ConnectionStatus/ConnectionStatus';
 import ExpressDocs from './md-docs/express.md';
 import JavascriptDocs from './md-docs/javascript.md';
@@ -20,15 +20,22 @@ const frameworksMap = {
 };
 
 export default function Javascript({
+	ingestionInfo,
 	activeStep,
-}: {
-	activeStep: number;
-}): JSX.Element {
+}: LangProps): JSX.Element {
 	const [selectedFrameWork, setSelectedFrameWork] = useState('express');
 	const [selectedFrameWorkDocs, setSelectedFrameWorkDocs] = useState(
 		ExpressDocs,
 	);
 	const [form] = Form.useForm();
+	const serviceName = Form.useWatch('Service Name', form);
+
+	const variables = {
+		MYAPP: serviceName || '<service-name>',
+		SIGNOZ_INGESTION_KEY:
+			ingestionInfo.SIGNOZ_INGESTION_KEY || '<SIGNOZ_INGESTION_KEY>',
+		REGION: ingestionInfo.REGION || 'region',
+	};
 
 	useEffect(() => {
 		// on language select
@@ -116,14 +123,10 @@ export default function Javascript({
 					</div>
 
 					<div className="content-container">
-						<ReactMarkdown
-							components={{
-								pre: Pre,
-								code: Code,
-							}}
-						>
-							{selectedFrameWorkDocs}
-						</ReactMarkdown>
+						<MarkdownRenderer
+							markdownContent={selectedFrameWorkDocs}
+							variables={variables}
+						/>
 					</div>
 				</div>
 			)}

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

@@ -28,7 +28,7 @@ npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
 
 Step 2. Create tracing.js file
 
-You need to configure the endpoint for SigNoz cloud in this file. You also need to configure your service name. In this example, we have used `node_app`.
+This file will have your SigNoz cloud endpoint and service name configued as values of `url` and `SERVICE_NAME` respectively.
 
 ```js
 // tracing.js
@@ -44,7 +44,7 @@ const { SemanticResourceAttributes } = require('@opentelemetry/semantic-conventi
 // https://github.com/open-telemetry/opentelemetry-specification/blob/main/specification/protocol/exporter.md#specifying-headers-via-environment-variables
 
 const exporterOptions = {
-  url: 'https://ingest.{region}.signoz.cloud:443/v1/traces'
+  url: 'https://ingest.{{REGION}}.signoz.cloud:443/v1/traces'
 }
 
 const traceExporter = new OTLPTraceExporter(exporterOptions);
@@ -52,7 +52,7 @@ const sdk = new opentelemetry.NodeSDK({
   traceExporter,
   instrumentations: [getNodeAutoInstrumentations()],
   resource: new Resource({
-    [SemanticResourceAttributes.SERVICE_NAME]: 'node_app'
+    [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}'
   })
 });
 
@@ -69,23 +69,12 @@ process.on('SIGTERM', () => {
 });
 ```
 
-Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
-
- US -	ingest.us.signoz.cloud:443/v1/traces 
-
- IN -	ingest.in.signoz.cloud:443/v1/traces 
-
- EU - ingest.eu.signoz.cloud:443/v1/traces 
-
 Step 3. Run the application
 
 Make sure you set the `OTEL_EXPORTER_OTLP_HEADERS` env as follows
 ```bash
-OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>" node -r ./tracing.js app.js
+OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token={{SIGNOZ_INGESTION_KEY}}" node -r ./tracing.js app.js
 ```
-
-`<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.
-
 ---
 
 #### **Send traces via OTel Collector binary**
@@ -106,7 +95,7 @@ npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
 
 Step 2. Create tracing.js file
 
-You need to configure your service name. In this example, we have used `node_app`.
+This file will have your service name configued as value for `SERVICE_NAME`.
 
 ```js
 // tracing.js
@@ -127,7 +116,7 @@ const sdk = new opentelemetry.NodeSDK({
   traceExporter,
   instrumentations: [getNodeAutoInstrumentations()],
   resource: new Resource({
-    [SemanticResourceAttributes.SERVICE_NAME]: 'node_app'
+    [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}'
   })
 });
 
@@ -167,7 +156,7 @@ npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
 
 Step 2. Create tracing.js file
 
-You also need to configure your service name. In this example, we have used `node_app`.
+This file will have your service name configued as value for `SERVICE_NAME`.
 
 ```js
 // tracing.js
@@ -188,7 +177,7 @@ const sdk = new opentelemetry.NodeSDK({
   traceExporter,
   instrumentations: [getNodeAutoInstrumentations()],
   resource: new Resource({
-    [SemanticResourceAttributes.SERVICE_NAME]: 'node_app'
+    [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}'
   })
 });
 

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

@@ -26,7 +26,7 @@ npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
 
 Step 2. Create tracing.js file
 
-You need to configure the endpoint for SigNoz cloud in this file. You also need to configure your service name. In this example, we have used `node_app`.
+This file will have your SigNoz cloud endpoint and service name configued as values of `url` and `SERVICE_NAME` respectively.
 
 ```js
 // tracing.js
@@ -42,7 +42,7 @@ const { SemanticResourceAttributes } = require('@opentelemetry/semantic-conventi
 // https://github.com/open-telemetry/opentelemetry-specification/blob/main/specification/protocol/exporter.md#specifying-headers-via-environment-variables
 
 const exporterOptions = {
-  url: 'https://ingest.{region}.signoz.cloud:443/v1/traces'
+  url: 'https://ingest.{{REGION}}.signoz.cloud:443/v1/traces'
 }
 
 const traceExporter = new OTLPTraceExporter(exporterOptions);
@@ -50,7 +50,7 @@ const sdk = new opentelemetry.NodeSDK({
   traceExporter,
   instrumentations: [getNodeAutoInstrumentations()],
   resource: new Resource({
-    [SemanticResourceAttributes.SERVICE_NAME]: 'node_app'
+    [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}'
   })
 });
 
@@ -67,24 +67,14 @@ process.on('SIGTERM', () => {
 });
 ```
 
-Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
-
- US -	ingest.us.signoz.cloud:443/v1/traces 
-
- IN -	ingest.in.signoz.cloud:443/v1/traces 
-
- EU - ingest.eu.signoz.cloud:443/v1/traces 
-
 Step 3. Run the application
 
 Make sure you set the `OTEL_EXPORTER_OTLP_HEADERS` env as follows
 
 ```bash
-OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>" node -r ./tracing.js app.js
+OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token={{SIGNOZ_INGESTION_KEY}}" node -r ./tracing.js app.js
 ```
 
-`<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.
-
 ---
 
 #### **Send traces via OTel Collector binary**
@@ -104,7 +94,7 @@ npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
 
 Step 2. Create tracing.js file
 
-You need to configure your service name. In this example, we have used `node_app`.
+This file will have your service name configued as value for `SERVICE_NAME`.
 
 ```js
 // tracing.js
@@ -125,7 +115,7 @@ const sdk = new opentelemetry.NodeSDK({
   traceExporter,
   instrumentations: [getNodeAutoInstrumentations()],
   resource: new Resource({
-    [SemanticResourceAttributes.SERVICE_NAME]: 'node_app'
+    [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}'
   })
 });
 
@@ -167,7 +157,7 @@ npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
 
 Step 2. Create tracing.js file
 
-You need to configure your service name. In this example, we have used `node_app`.
+This file will have your service name configued as value for `SERVICE_NAME`.
 
 ```js
 // tracing.js
@@ -188,7 +178,7 @@ const sdk = new opentelemetry.NodeSDK({
   traceExporter,
   instrumentations: [getNodeAutoInstrumentations()],
   resource: new Resource({
-    [SemanticResourceAttributes.SERVICE_NAME]: 'node_app'
+    [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}'
   })
 });
 

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

@@ -28,7 +28,7 @@ npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
 
 Step 2. Create `tracer.ts` file
 
-You need to configure the endpoint for SigNoz cloud in this file. You also need to configure your service name. In this example, we have used `sampleNestjsApplication`.
+This file will have your SigNoz cloud endpoint and service name configued as values of `url` and `SERVICE_NAME` respectively.
 
 ```js
 'use strict'
@@ -40,7 +40,7 @@ const {Resource} = require('@opentelemetry/resources');
 const {SemanticResourceAttributes} = require('@opentelemetry/semantic-conventions');
 
 const exporterOptions = {
-    url: 'https://ingest.{region}.signoz.cloud:443/v1/traces'
+    url: 'https://ingest.{{REGION}}.signoz.cloud:443/v1/traces'
   }
 
 const traceExporter = new OTLPTraceExporter(exporterOptions);
@@ -48,7 +48,7 @@ const sdk = new opentelemetry.NodeSDK({
   traceExporter,
   instrumentations: [getNodeAutoInstrumentations()],
   resource: new Resource({
-    [SemanticResourceAttributes.SERVICE_NAME]: 'sampleNestjsApplication'
+    [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}'
   })
   });
   
@@ -67,23 +67,12 @@ const sdk = new opentelemetry.NodeSDK({
   module.exports = sdk
 ```
 
-Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary accordingly.
-
- US -	ingest.us.signoz.cloud:443/v1/traces 
-
- IN -	ingest.in.signoz.cloud:443/v1/traces 
-
- EU - ingest.eu.signoz.cloud:443/v1/traces 
-
-
-
 Step 3. Import the tracer module where your app starts  `(Ex —> main.ts)`
     
 ```jsx
 const tracer = require('./tracer')
 ```
     
-
 Step 4. Start the tracer
 
 In the `async function boostrap` section of the application code `(Ex —> In main.ts)`, initialize the tracer as follows: 
@@ -107,13 +96,11 @@ async function bootstrap() {
 Step 5. Run the application
 
 ```bash
-OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>" nest start
+OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token={{SIGNOZ_INGESTION_KEY}}" nest start
 ```
 
 You can now run your Nestjs application. The data captured with OpenTelemetry from your application should start showing on the SigNoz dashboard.
 
-`<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.
-
 ---
 
 #### **Send traces via OTel Collector binary**
@@ -133,7 +120,7 @@ npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
 
 Step 2. Create `tracer.ts` file
 
-You need to configure your service name. In this example, we have used `sampleNestjsApplication`.
+This file will have your service name configued as value for `SERVICE_NAME`.
 
 ```js
 'use strict'
@@ -154,7 +141,7 @@ const sdk = new opentelemetry.NodeSDK({
   traceExporter,
   instrumentations: [getNodeAutoInstrumentations()],
   resource: new Resource({
-    [SemanticResourceAttributes.SERVICE_NAME]: 'sampleNestjsApplication'
+    [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}'
   })
   });
   
@@ -221,7 +208,7 @@ npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
 
 Step 2. Create `tracer.ts` file
 
-You need to configure your service name. In this example, we have used `sampleNestjsApplication`.
+This file will have your service name configued as value for `SERVICE_NAME`.
 
 ```js
 'use strict'
@@ -242,7 +229,7 @@ const sdk = new opentelemetry.NodeSDK({
   traceExporter,
   instrumentations: [getNodeAutoInstrumentations()],
   resource: new Resource({
-    [SemanticResourceAttributes.SERVICE_NAME]: 'sampleNestjsApplication'
+    [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}'
   })
   });
   

frontend/src/container/OnboardingContainer/APM/Python/Python.tsx

@@ -1,13 +1,13 @@
 import './Python.styles.scss';
 
 import { Form, Input, Select } from 'antd';
-import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
+import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 import Header from 'container/OnboardingContainer/common/Header/Header';
 import { useEffect, useState } from 'react';
-import ReactMarkdown from 'react-markdown';
 import { trackEvent } from 'utils/segmentAnalytics';
 import { popupContainer } from 'utils/selectPopupContainer';
 
+import { LangProps } from '../APM';
 import ConnectionStatus from '../common/ConnectionStatus/ConnectionStatus';
 import DjangoDocs from './md-docs/django.md';
 import FalconDocs from './md-docs/falcon.md';
@@ -24,13 +24,20 @@ const frameworksMap = {
 };
 
 export default function Python({
+	ingestionInfo,
 	activeStep,
-}: {
-	activeStep: number;
-}): JSX.Element {
+}: LangProps): JSX.Element {
 	const [selectedFrameWork, setSelectedFrameWork] = useState('django');
 	const [selectedFrameWorkDocs, setSelectedFrameWorkDocs] = useState(DjangoDocs);
 	const [form] = Form.useForm();
+	const serviceName = Form.useWatch('Service Name', form);
+
+	const variables = {
+		MYAPP: serviceName || '<service-name>',
+		SIGNOZ_INGESTION_KEY:
+			ingestionInfo.SIGNOZ_INGESTION_KEY || '<SIGNOZ_INGESTION_KEY>',
+		REGION: ingestionInfo.REGION || 'region',
+	};
 
 	useEffect(() => {
 		// on language select
@@ -126,14 +133,10 @@ export default function Python({
 					</div>
 
 					<div className="content-container">
-						<ReactMarkdown
-							components={{
-								pre: Pre,
-								code: Code,
-							}}
-						>
-							{selectedFrameWorkDocs}
-						</ReactMarkdown>
+						<MarkdownRenderer
+							markdownContent={selectedFrameWorkDocs}
+							variables={variables}
+						/>
 					</div>
 				</div>
 			)}

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

@@ -50,24 +50,13 @@ Please make sure that you have installed all the dependencies of your applicatio
 Step 4. Run your application
 
 ```bash
-OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
-OTEL_EXPORTER_OTLP_ENDPOINT="https://ingest.{region}.signoz.cloud:443" \
-OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>" \
+OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
+OTEL_EXPORTER_OTLP_ENDPOINT="https://ingest.{{REGION}}.signoz.cloud:443" \
+OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token={{SIGNOZ_INGESTION_KEY}}" \
 OTEL_EXPORTER_OTLP_PROTOCOL=grpc \
 opentelemetry-instrument <your_run_command>
 ```
-
-- `<service_name>` is the name of the service you want
 - <your_run_command> can be `python3 app.py` or `python manage.py runserver --noreload`
-- Replace `<SIGNOZ_INGESTION_KEY>` with the api token provided by SigNoz. You can find it in the email sent by SigNoz with your cloud account details.
-
-Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
-
- US -	ingest.us.signoz.cloud:443 
-
- IN -	ingest.in.signoz.cloud:443 
-
- EU - ingest.eu.signoz.cloud:443 
 
 Note:
 Don’t run app in reloader/hot-reload mode as it breaks instrumentation. For example, you can disable the auto reload with `--noreload`.
@@ -103,13 +92,11 @@ opentelemetry-bootstrap --action=install
 Step 4. To run your application and send data to collector in same VM
 
 ```bash
-OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
+OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
 OTEL_EXPORTER_OTLP_ENDPOINT="http://localhost:4317" \
-OTEL_EXPORTER_OTLP_PROTOCOL=grpc opentelemetry-instrument <your run command>
+OTEL_EXPORTER_OTLP_PROTOCOL=grpc opentelemetry-instrument <your_run_command>
 ```
 
-- <service_name> is the name of service you want
-
 - <your_run_command>* can be `python3 app.py` or `python manage.py runserver --noreload`
 
 - `http://localhost:4317` for gRPC exporter and `http://localhost:4318` for HTTP exporter.
@@ -149,13 +136,11 @@ opentelemetry-bootstrap --action=install
 Step 4. Run your application:
 
 ```bash
-OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
+OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
 OTEL_EXPORTER_OTLP_ENDPOINT="http://localhost:4317" \
-OTEL_EXPORTER_OTLP_PROTOCOL=grpc opentelemetry-instrument <your run command>
+OTEL_EXPORTER_OTLP_PROTOCOL=grpc opentelemetry-instrument <your_run_command>
 ```
 
-<service_name> is the name of service you want
-
 <your_run_command> can be `python3 app.py` or `python manage.py runserver --noreload`
 
 `http://localhost:4317` for gRPC exporter and `http://localhost:4318` for HTTP exporter.

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

@@ -40,24 +40,14 @@ Please make sure that you have installed all the dependencies of your applicatio
 Step 4. Run your application
 
 ```bash
-OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
-OTEL_EXPORTER_OTLP_ENDPOINT="https://ingest.{region}.signoz.cloud:443" \
-OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>" \
+OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
+OTEL_EXPORTER_OTLP_ENDPOINT="https://ingest.{{REGION}}.signoz.cloud:443" \
+OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token={{SIGNOZ_INGESTION_KEY}}" \
 OTEL_EXPORTER_OTLP_PROTOCOL=grpc \
 opentelemetry-instrument <your_run_command>
 ```
 
-- *`<service_name>`* is the name of the service you want
 - *<your_run_command>* can be `python3 app.py` or `gunicorn src.app -b 0.0.0.0:8001`
-- Replace `<SIGNOZ_INGESTION_KEY>` with the api token provided by SigNoz. You can find it in the email sent by SigNoz with your cloud account details.
-
-Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
-
- US -	ingest.us.signoz.cloud:443 
-
- IN -	ingest.in.signoz.cloud:443 
-
- EU - ingest.eu.signoz.cloud:443 
 
 Note:
 Don’t run app in reloader/hot-reload mode as it breaks instrumentation. For example, you can disable the auto reload with `--noreload`.
@@ -94,16 +84,14 @@ Please make sure that you have installed all the dependencies of your applicatio
 Step 4. To run your application and send data to collector in same VM
 
 ```bash
-OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
+OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
 OTEL_EXPORTER_OTLP_ENDPOINT="http://localhost:4317" \
-OTEL_EXPORTER_OTLP_PROTOCOL=grpc opentelemetry-instrument <your run command>
+OTEL_EXPORTER_OTLP_PROTOCOL=grpc opentelemetry-instrument <your_run_command>
 ```
 
 Note:
 Don’t run app in reloader/hot-reload mode as it breaks instrumentation.
 
-*<service_name>* is the name of service you want
-
 *<your_run_command>* can be `python3 app.py` or `flask run`
 
 `http://localhost:4317` for gRPC exporter and `http://localhost:4318` for HTTP exporter.
@@ -146,16 +134,14 @@ Please make sure that you have installed all the dependencies of your applicatio
 Step 4. Run your application
 
 ```bash
-OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
+OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
 OTEL_EXPORTER_OTLP_ENDPOINT="http://localhost:4317" \
-OTEL_EXPORTER_OTLP_PROTOCOL=grpc opentelemetry-instrument <your run command>
+OTEL_EXPORTER_OTLP_PROTOCOL=grpc opentelemetry-instrument <your_run_command>
 ```
 
 Note:
 Don’t run app in reloader/hot-reload mode as it breaks instrumentation.
 
-*<service_name>* is the name of service you want
-
 *<your_run_command>* can be `python3 app.py` or `flask run`
 
 `http://localhost:4317` for gRPC exporter and `http://localhost:4318` for HTTP exporter.

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

@@ -40,24 +40,13 @@ Please make sure that you have installed all the dependencies of your applicatio
 Step 4. Run your application
 
 ```bash
-OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
-OTEL_EXPORTER_OTLP_ENDPOINT="https://ingest.{region}.signoz.cloud:443" \
-OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>" \
+OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
+OTEL_EXPORTER_OTLP_ENDPOINT="https://ingest.{{REGION}}.signoz.cloud:443" \
+OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token={{SIGNOZ_INGESTION_KEY}}" \
 OTEL_EXPORTER_OTLP_PROTOCOL=grpc \
 opentelemetry-instrument <your_run_command>
 ```
-
-- *`<service_name>`* is the name of the service you want
 - *<your_run_command>* can be `python3 app.py` or `uvicorn main:app --host localhost --port 5002`
-- Replace `<SIGNOZ_INGESTION_KEY>` with the api token provided by SigNoz. You can find it in the email sent by SigNoz with your cloud account details.
-
-Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
-
- US -	ingest.us.signoz.cloud:443 
-
- IN -	ingest.in.signoz.cloud:443 
-
- EU - ingest.eu.signoz.cloud:443 
 
 Note:
 Don’t run app in reloader/hot-reload mode as it breaks instrumentation. For example, you can disable the auto reload with `--noreload`.
@@ -95,13 +84,10 @@ Please make sure that you have installed all the dependencies of your applicatio
 Step 4. To run your application and send data to collector in same VM
 
 ```bash
-OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
+OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
 OTEL_EXPORTER_OTLP_ENDPOINT="http://localhost:4317" \
-OTEL_EXPORTER_OTLP_PROTOCOL=grpc opentelemetry-instrument <your run command>
+OTEL_EXPORTER_OTLP_PROTOCOL=grpc opentelemetry-instrument <your_run_command>
 ```
-
-*<service_name>* is the name of service you want
-
 *<your_run_command>* can be `python3 app.py` or `python manage.py runserver --noreload`
 
 `http://localhost:4317` for gRPC exporter and `http://localhost:4318` for HTTP exporter.
@@ -144,13 +130,11 @@ Please make sure that you have installed all the dependencies of your applicatio
 Step 4. Run your application
 
 ```bash
-OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
+OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
 OTEL_EXPORTER_OTLP_ENDPOINT="http://localhost:4317" \
-OTEL_EXPORTER_OTLP_PROTOCOL=grpc opentelemetry-instrument <your run command>
+OTEL_EXPORTER_OTLP_PROTOCOL=grpc opentelemetry-instrument <your_run_command>
 ```
 
-*<service_name>* is the name of service you want
-
 *<your_run_command>* can be `python3 app.py` or `python manage.py runserver --noreload`
 
 `http://localhost:4317` for gRPC exporter and `http://localhost:4318` for HTTP exporter.

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

@@ -40,24 +40,13 @@ Please make sure that you have installed all the dependencies of your applicatio
 Step 4. Run your application
 
 ```bash
-OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
-OTEL_EXPORTER_OTLP_ENDPOINT="https://ingest.{region}.signoz.cloud:443" \
-OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>" \
+OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
+OTEL_EXPORTER_OTLP_ENDPOINT="https://ingest.{{REGION}}.signoz.cloud:443" \
+OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token={{SIGNOZ_INGESTION_KEY}}" \
 OTEL_EXPORTER_OTLP_PROTOCOL=grpc \
 opentelemetry-instrument <your_run_command>
 ```
-
-- *`<service_name>`* is the name of the service you want
 - *<your_run_command>* can be `python3 app.py` or `flask run`
-- Replace `<SIGNOZ_INGESTION_KEY>` with the api token provided by SigNoz. You can find it in the email sent by SigNoz with your cloud account details.
-
-Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
-
- US -	ingest.us.signoz.cloud:443 
-
- IN -	ingest.in.signoz.cloud:443 
-
- EU - ingest.eu.signoz.cloud:443 
 
 Note:
 Don’t run app in reloader/hot-reload mode as it breaks instrumentation. For example, you can disable the auto reload with `--noreload`.
@@ -95,16 +84,14 @@ Please make sure that you have installed all the dependencies of your applicatio
 Step 4. To run your application and send data to collector in same VM
 
 ```bash
-OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
+OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
 OTEL_EXPORTER_OTLP_ENDPOINT="http://localhost:4317" \
-OTEL_EXPORTER_OTLP_PROTOCOL=grpc opentelemetry-instrument <your run command>
+OTEL_EXPORTER_OTLP_PROTOCOL=grpc opentelemetry-instrument <your_run_command>
 ```
 
 Note:
 Don’t run app in reloader/hot-reload mode as it breaks instrumentation. For example, if you use `export Flask_ENV=development`, it enables the reloader mode which breaks OpenTelemetry instrumentation.
 
-*<service_name>* is the name of service you want
-
 *<your_run_command>* can be `python3 app.py` or `flask run`
 
 `http://localhost:4317` for gRPC exporter and `http://localhost:4318` for HTTP exporter.
@@ -147,16 +134,14 @@ Please make sure that you have installed all the dependencies of your applicatio
 Step 4. Run your application
 
 ```bash
-OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
+OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
 OTEL_EXPORTER_OTLP_ENDPOINT="http://localhost:4317" \
-OTEL_EXPORTER_OTLP_PROTOCOL=grpc opentelemetry-instrument <your run command>
+OTEL_EXPORTER_OTLP_PROTOCOL=grpc opentelemetry-instrument <your_run_command>
 ```
 
 Note:
 Don’t run app in reloader/hot-reload mode as it breaks instrumentation. For example, if you use `export Flask_ENV=development`, it enables the reloader mode which breaks OpenTelemetry instrumentation.
 
-*<service_name>* is the name of service you want
-
 *<your_run_command>* can be `python3 app.py` or `flask run`
 
 `http://localhost:4317` for gRPC exporter and `http://localhost:4318` for HTTP exporter.

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

@@ -31,23 +31,12 @@ opentelemetry-bootstrap --action=install
 Step 3. Run your application
 
 ```bash
-OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
-OTEL_EXPORTER_OTLP_ENDPOINT="https://ingest.{region}.signoz.cloud:443" \
-OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>" \
+OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
+OTEL_EXPORTER_OTLP_ENDPOINT="https://ingest.{{REGION}}.signoz.cloud:443" \
+OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token={{SIGNOZ_INGESTION_KEY}}" \
 opentelemetry-instrument <your_run_command>
 ```
-
-- *`<service_name>`* is the name of the service you want
 - *`<your_run_command>`* can be `python3 app.py` or `flask run`
-- Replace `<SIGNOZ_INGESTION_KEY>` with the api token provided by SigNoz. You can find it in the email sent by SigNoz with your cloud account details.
-
-Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary according to this table.
-
- US -	ingest.us.signoz.cloud:443 
-
- IN -	ingest.in.signoz.cloud:443 
-
- EU - ingest.eu.signoz.cloud:443 
 
 Note:
 Don’t run app in reloader/hot-reload mode as it breaks instrumentation.
@@ -76,20 +65,15 @@ opentelemetry-bootstrap --action=install
 Step 3. To run your application and send data to collector in same VM
 
 ```bash
-OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
+OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
 OTEL_EXPORTER_OTLP_ENDPOINT="http://localhost:4317" \
-OTEL_EXPORTER_OTLP_PROTOCOL=grpc opentelemetry-instrument <your run command>
+OTEL_EXPORTER_OTLP_PROTOCOL=grpc opentelemetry-instrument <your_run_command>
 ```
 
 where,
 
-- *`<service_name>`* is the name of the service you want
 - *`<your_run_command>`* can be `python3 app.py` or `flask run`
 
-*<service_name>* is the name of service you want
-
-*<your_run_command>* can be `python3 app.py` or `flask run`
-
 `http://localhost:4317` for gRPC exporter and `http://localhost:4318` for HTTP exporter.
 
 The port numbers are 4317 and 4318 for the gRPC and HTTP exporters respectively.
@@ -121,14 +105,13 @@ opentelemetry-bootstrap --action=install
 Step 3. Run your application
 
 ```bash
-OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \
+OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
 OTEL_EXPORTER_OTLP_ENDPOINT="http://localhost:4317" \
-OTEL_EXPORTER_OTLP_PROTOCOL=grpc opentelemetry-instrument <your run command>
+OTEL_EXPORTER_OTLP_PROTOCOL=grpc opentelemetry-instrument <your_run_command>
 ```
 
 where,
 
-- *`<service_name>`* is the name of the service you want
 - *`<your_run_command>`* can be `python3 app.py` or `flask run`
 
 

frontend/src/container/TopNav/Breadcrumbs/index.tsx

@@ -15,6 +15,7 @@ const breadcrumbNameMap = {
 	[ROUTES.ALL_ERROR]: 'Exceptions',
 	[ROUTES.VERSION]: 'Status',
 	[ROUTES.ORG_SETTINGS]: 'Organization Settings',
+	[ROUTES.INGESTION_SETTINGS]: 'Ingestion Settings',
 	[ROUTES.MY_SETTINGS]: 'My Settings',
 	[ROUTES.ERROR_DETAIL]: 'Exceptions',
 	[ROUTES.LIST_ALL_ALERT]: 'Alerts',

frontend/src/container/TopNav/DateTimeSelection/config.ts

@@ -78,6 +78,7 @@ export const routesToSkip = [
 	ROUTES.VERSION,
 	ROUTES.ALL_DASHBOARD,
 	ROUTES.ORG_SETTINGS,
+	ROUTES.INGESTION_SETTINGS,
 	ROUTES.ERROR_DETAIL,
 	ROUTES.ALERTS_NEW,
 	ROUTES.EDIT_ALERTS,

frontend/src/pages/Settings/config.ts

@@ -2,6 +2,7 @@ import { RouteTabProps } from 'components/RouteTab/types';
 import ROUTES from 'constants/routes';
 import AlertChannels from 'container/AllAlertChannels';
 import GeneralSettings from 'container/GeneralSettings';
+import IngestionSettings from 'container/IngestionSettings/IngestionSettings';
 import OrganizationSettings from 'container/OrganizationSettings';
 import { TFunction } from 'i18next';
 
@@ -18,6 +19,12 @@ export const commonRoutes = (t: TFunction): RouteTabProps['routes'] => [
 		route: ROUTES.ALL_CHANNELS,
 		key: ROUTES.ALL_CHANNELS,
 	},
+	{
+		Component: IngestionSettings,
+		name: t('routes:ingestion_settings').toString(),
+		route: ROUTES.INGESTION_SETTINGS,
+		key: ROUTES.INGESTION_SETTINGS,
+	},
 ];
 
 export const organizationSettings = (t: TFunction): RouteTabProps['routes'] => [

frontend/src/pages/SignUp/SignUp.tsx

@@ -233,6 +233,8 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 
 	const handleSubmit = (): void => {
 		(async (): Promise<void> => {
+			const { hostname } = window.location;
+
 			try {
 				const values = form.getFieldsValue();
 				setLoading(true);
@@ -258,7 +260,11 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 					await commonHandler(
 						values,
 						async (): Promise<void> => {
-							if (isOnboardingEnabled) {
+							if (
+								isOnboardingEnabled &&
+								hostname &&
+								hostname.endsWith('signoz.cloud')
+							) {
 								history.push(ROUTES.GET_STARTED);
 							} else {
 								history.push(ROUTES.APPLICATION);

frontend/src/types/api/settings/ingestion.ts

@@ -0,0 +1,18 @@
+export interface IngestionInfo {
+	keyId: string;
+	name: string;
+	createdAt: string;
+	ingestionKey: string;
+	ingestionURL: string;
+	dataRegion: string;
+}
+
+export interface IngestionResponseProps {
+	payload: IngestionInfo[];
+}
+
+export interface IngestionDataType {
+	key: string;
+	name: string;
+	value: string;
+}

frontend/src/utils/permission/index.ts

@@ -46,6 +46,7 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	MY_SETTINGS: ['ADMIN', 'EDITOR', 'VIEWER'],
 	SERVICE_MAP: ['ADMIN', 'EDITOR', 'VIEWER'],
 	ALL_CHANNELS: ['ADMIN', 'EDITOR', 'VIEWER'],
+	INGESTION_SETTINGS: ['ADMIN', 'EDITOR', 'VIEWER'],
 	ALL_DASHBOARD: ['ADMIN', 'EDITOR', 'VIEWER'],
 	ALL_ERROR: ['ADMIN', 'EDITOR', 'VIEWER'],
 	APPLICATION: ['ADMIN', 'EDITOR', 'VIEWER'],