+ );
+}
diff --git a/frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx b/frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx
new file mode 100644
index 0000000000..82b438dcd0
--- /dev/null
+++ b/frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx
@@ -0,0 +1,43 @@
+/* eslint-disable react/jsx-props-no-spreading */
+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';
+
+function Pre({ children }: { children: React.ReactNode }): JSX.Element {
+ return (
+
+ {children}
+ {children}
+
+ );
+}
+
+function Code({
+ node,
+ inline,
+ className = 'blog-code',
+ children,
+ ...props
+}: CodeProps): JSX.Element {
+ const match = /language-(\w+)/.exec(className || '');
+ return !inline && match ? (
+
+ {String(children).replace(/\n$/, '')}
+
+ ) : (
+
+ {children}
+
+ );
+}
+
+export { Code, Pre };
diff --git a/frontend/src/container/OnboardingContainer/APM/GoLang/GoLang.tsx b/frontend/src/container/OnboardingContainer/APM/GoLang/GoLang.tsx
index f2310ec292..8319979f9a 100644
--- a/frontend/src/container/OnboardingContainer/APM/GoLang/GoLang.tsx
+++ b/frontend/src/container/OnboardingContainer/APM/GoLang/GoLang.tsx
@@ -1,8 +1,9 @@
import './GoLang.styles.scss';
-import { MDXProvider } from '@mdx-js/react';
import { Form, Input } from 'antd';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
import Header from 'container/OnboardingContainer/common/Header/Header';
+import ReactMarkdown from 'react-markdown';
import ConnectionStatus from '../common/ConnectionStatus/ConnectionStatus';
import GoLangDocs from './goLang.md';
@@ -44,9 +45,14 @@ export default function GoLang({
-
-
-
+
+ {GoLangDocs}
+
)}
diff --git a/frontend/src/container/OnboardingContainer/APM/GoLang/goLang.md b/frontend/src/container/OnboardingContainer/APM/GoLang/goLang.md
index 284d45e5e8..e3ec94dde2 100644
--- a/frontend/src/container/OnboardingContainer/APM/GoLang/goLang.md
+++ b/frontend/src/container/OnboardingContainer/APM/GoLang/goLang.md
@@ -9,7 +9,7 @@ From VMs, there are two ways to send data to SigNoz Cloud.
#### **Send traces directly to SigNoz Cloud**
-1. **Install Dependencies**
+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).
@@ -24,7 +24,7 @@ From VMs, there are two ways to send data to SigNoz Cloud.
go.opentelemetry.io/otel/exporters/otlp/otlptrace/otlptracegrpc
```
-2. **Declare environment variables for configuring OpenTelemetry**
+2. **Declare environment variables for configuring OpenTelemetry**
Declare the following global variables in `main.go` which we will use to configure OpenTelemetry:
@@ -36,7 +36,7 @@ From VMs, there are two ways to send data to SigNoz Cloud.
)
```
-3. **Instrument your Go application with OpenTelemetry**
+3. **Instrument your Go application with OpenTelemetry**
To configure your application to send data we will need a function to initialize OpenTelemetry. Add the following snippet of code in your `main.go` file.
@@ -98,7 +98,7 @@ From VMs, there are two ways to send data to SigNoz Cloud.
}
```
-4. **Initialize the tracer in main.go**
+4. **Initialize the tracer in main.go**
Modify the main function to initialise the tracer in `main.go`. Initiate the tracer at the very beginning of our main function.
@@ -111,7 +111,7 @@ From VMs, there are two ways to send data to SigNoz Cloud.
}
```
-5. **Add the OpenTelemetry Gin middleware**
+5. **Add the OpenTelemetry Gin middleware**
Configure Gin to use the middleware by adding the following lines in `main.go`.
@@ -129,7 +129,7 @@ From VMs, there are two ways to send data to SigNoz Cloud.
}
```
-6. **Set environment variables and run your Go Gin application**
+6. **Set environment variables and run your Go Gin application**
The run command must have some environment variables to send data to SigNoz cloud. The run command:
@@ -146,11 +146,11 @@ From VMs, there are two ways to send data to SigNoz Cloud.
`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
+ US - ingest.us.signoz.cloud:443
- IN - ingest.in.signoz.cloud:443
+ IN - ingest.in.signoz.cloud:443
- EU - ingest.eu.signoz.cloud:443
+ EU - ingest.eu.signoz.cloud:443
---
@@ -161,7 +161,7 @@ OTel Collector binary helps to collect logs, hostmetrics, resource and infra att
You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Golang application.
-1. **Install Dependencies**
+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).
@@ -176,7 +176,7 @@ You can find instructions to install OTel Collector binary [here](https://signoz
go.opentelemetry.io/otel/exporters/otlp/otlptrace/otlptracegrpc
```
-2. **Declare environment variables for configuring OpenTelemetry**
+2. **Declare environment variables for configuring OpenTelemetry**
Declare the following global variables in `main.go` which we will use to configure OpenTelemetry:
@@ -188,7 +188,7 @@ You can find instructions to install OTel Collector binary [here](https://signoz
)
```
-3. **Instrument your Go application with OpenTelemetry**
+3. **Instrument your Go application with OpenTelemetry**
To configure your application to send data we will need a function to initialize OpenTelemetry. Add the following snippet of code in your `main.go` file.
@@ -249,7 +249,7 @@ You can find instructions to install OTel Collector binary [here](https://signoz
return exporter.Shutdown
}
-4. **Initialize the tracer in main.go**
+4. **Initialize the tracer in main.go**
Modify the main function to initialise the tracer in `main.go`. Initiate the tracer at the very beginning of our main function.
@@ -262,7 +262,7 @@ You can find instructions to install OTel Collector binary [here](https://signoz
}
```
-5. **Add the OpenTelemetry Gin middleware**
+5. **Add the OpenTelemetry Gin middleware**
Configure Gin to use the middleware by adding the following lines in `main.go`.
@@ -280,7 +280,7 @@ You can find instructions to install OTel Collector binary [here](https://signoz
}
```
-6. **Set environment variables and run your Go Gin application**
+6. **Set environment variables and run your Go Gin application**
The run command must have some environment variables to send data to SigNoz. The run command:
@@ -288,7 +288,7 @@ You can find instructions to install OTel Collector binary [here](https://signoz
SERVICE_NAME=goGinApp 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.
+ 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)
---
@@ -299,7 +299,7 @@ For Golang application deployed on Kubernetes, you need to install OTel Collecto
Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Golang instrumentation by following the below steps:
-1. **Install Dependencies**
+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).
@@ -314,7 +314,7 @@ Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Go
go.opentelemetry.io/otel/exporters/otlp/otlptrace/otlptracegrpc
```
-2. **Declare environment variables for configuring OpenTelemetry**
+2. **Declare environment variables for configuring OpenTelemetry**
Declare the following global variables in `main.go` which we will use to configure OpenTelemetry:
@@ -326,7 +326,7 @@ Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Go
)
```
-3. **Instrument your Go application with OpenTelemetry**
+3. **Instrument your Go application with OpenTelemetry**
To configure your application to send data we will need a function to initialize OpenTelemetry. Add the following snippet of code in your `main.go` file.
@@ -387,7 +387,7 @@ Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Go
return exporter.Shutdown
}
-4. **Initialize the tracer in main.go**
+4. **Initialize the tracer in main.go**
Modify the main function to initialise the tracer in `main.go`. Initiate the tracer at the very beginning of our main function.
@@ -400,7 +400,7 @@ Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Go
}
```
-5. **Add the OpenTelemetry Gin middleware**
+5. **Add the OpenTelemetry Gin middleware**
Configure Gin to use the middleware by adding the following lines in `main.go`.
@@ -418,7 +418,7 @@ Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Go
}
```
-6. **Set environment variables and run your Go Gin application**
+6. **Set environment variables and run your Go Gin application**
The run command must have some environment variables to send data to SigNoz. The run command:
@@ -426,5 +426,5 @@ Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Go
SERVICE_NAME=goGinApp 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.
+ 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)
\ No newline at end of file
diff --git a/frontend/src/container/OnboardingContainer/APM/Java/Java.tsx b/frontend/src/container/OnboardingContainer/APM/Java/Java.tsx
index 205d68d4c0..2ebcba93e0 100644
--- a/frontend/src/container/OnboardingContainer/APM/Java/Java.tsx
+++ b/frontend/src/container/OnboardingContainer/APM/Java/Java.tsx
@@ -1,9 +1,10 @@
import './Java.styles.scss';
-import { MDXProvider } from '@mdx-js/react';
import { Form, Input, Select } from 'antd';
+import { Code, Pre } 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';
@@ -26,7 +27,9 @@ export default function Java({
activeStep: number;
}): JSX.Element {
const [selectedFrameWork, setSelectedFrameWork] = useState('spring_boot');
-
+ const [selectedFrameWorkDocs, setSelectedFrameWorkDocs] = useState(
+ SprintBootDocs,
+ );
const [form] = Form.useForm();
useEffect(() => {
@@ -37,16 +40,22 @@ export default function Java({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedFrameWork]);
- const renderDocs = (): JSX.Element => {
+ const handleFrameworkChange = (selectedFrameWork: string): void => {
+ setSelectedFrameWork(selectedFrameWork);
+
switch (selectedFrameWork) {
case 'tomcat':
- return ;
+ setSelectedFrameWorkDocs(TomcatDocs);
+ break;
case 'spring_boot':
- return ;
+ setSelectedFrameWorkDocs(SprintBootDocs);
+ break;
case 'jboss':
- return ;
+ setSelectedFrameWorkDocs(JbossDocs);
+ break;
default:
- return ;
+ setSelectedFrameWorkDocs(JavaDocs);
+ break;
}
};
@@ -71,7 +80,7 @@ export default function Java({
defaultValue="spring_boot"
style={{ minWidth: 120 }}
placeholder="Select Framework"
- onChange={(value): void => setSelectedFrameWork(value)}
+ onChange={(value): void => handleFrameworkChange(value)}
options={[
{
value: 'spring_boot',
@@ -110,7 +119,14 @@ export default function Java({
- {renderDocs()}
+
+ {selectedFrameWorkDocs}
+
)}
diff --git a/frontend/src/container/OnboardingContainer/APM/Java/md-docs/java.md b/frontend/src/container/OnboardingContainer/APM/Java/md-docs/java.md
index 54ee11d642..6b2ae7e2ba 100644
--- a/frontend/src/container/OnboardingContainer/APM/Java/md-docs/java.md
+++ b/frontend/src/container/OnboardingContainer/APM/Java/md-docs/java.md
@@ -39,11 +39,11 @@ java -javaagent:$PWD/opentelemetry-javaagent.jar -jar .jar
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
+ US - ingest.us.signoz.cloud:443
- IN - ingest.in.signoz.cloud:443
+ IN - ingest.in.signoz.cloud:443
- EU - ingest.eu.signoz.cloud:443
+ EU - ingest.eu.signoz.cloud:443
---
@@ -54,13 +54,13 @@ OTel Collector binary helps to collect logs, hostmetrics, resource and infra att
You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Java application.
-Step 1. Download OTel java binary agent
+Step 1. Download OTel java binary agent
```bash
wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
```
-Step 2. Run your application
+Step 2. Run your application
```bash
java -javaagent:$PWD/opentelemetry-javaagent.jar -jar .jar
@@ -77,13 +77,13 @@ 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
+1. Download otel java binary
```bash
wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
```
-2. Run your application
+2. Run your application
```bash
java -javaagent:$PWD/opentelemetry-javaagent.jar -jar .jar
diff --git a/frontend/src/container/OnboardingContainer/APM/Java/md-docs/jboss.md b/frontend/src/container/OnboardingContainer/APM/Java/md-docs/jboss.md
index 378b085261..2dc72e5082 100644
--- a/frontend/src/container/OnboardingContainer/APM/Java/md-docs/jboss.md
+++ b/frontend/src/container/OnboardingContainer/APM/Java/md-docs/jboss.md
@@ -40,20 +40,20 @@ JAVA_OPTS="-javaagent://opentelemetry-javaagent.jar
-Dotel.exporter.otlp.headers="signoz-access-token="
-Dotel.resource.attributes="service.name=""
```
-You need to replace the following things based on your environment:
+You need to replace the following things based on your environment:
-- `` - Update it to the path of your downloaded Java JAR agent.
+- `` - Update it to the path of your downloaded Java JAR agent.
- `` is the name for your application
- `` 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
+ US - ingest.us.signoz.cloud:443
- IN - ingest.in.signoz.cloud:443
+ IN - ingest.in.signoz.cloud:443
- EU - ingest.eu.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
@@ -69,7 +69,7 @@ OTel Collector binary helps to collect logs, hostmetrics, resource and infra att
You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Java application.
-Step 1. Download OTel java binary agent
+Step 1. Download OTel java binary agent
```bash
wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
```
@@ -90,7 +90,7 @@ 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.
---
@@ -100,7 +100,7 @@ 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:
-Step 1. Download otel java binary
+Step 1. Download otel java binary
```bash
wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
@@ -121,7 +121,7 @@ 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.
\ No newline at end of file
diff --git a/frontend/src/container/OnboardingContainer/APM/Java/md-docs/spring_boot.md b/frontend/src/container/OnboardingContainer/APM/Java/md-docs/spring_boot.md
index 66f1fbc659..e4d02bfe4d 100644
--- a/frontend/src/container/OnboardingContainer/APM/Java/md-docs/spring_boot.md
+++ b/frontend/src/container/OnboardingContainer/APM/Java/md-docs/spring_boot.md
@@ -38,11 +38,11 @@ java -javaagent:/opentelemetry-javaagent.jar -jar .jar
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
+ US - ingest.us.signoz.cloud:443
- IN - ingest.in.signoz.cloud:443
+ IN - ingest.in.signoz.cloud:443
- EU - ingest.eu.signoz.cloud:443
+ EU - ingest.eu.signoz.cloud:443
---
@@ -52,12 +52,12 @@ OTel Collector binary helps to collect logs, hostmetrics, resource and infra att
You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Java application.
-Step 1. Download OTel java binary agent
+Step 1. Download OTel java binary agent
```bash
wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
```
-Step 2. Run your application
+Step 2. Run your application
```bash
java -javaagent:/opentelemetry-javaagent.jar -jar .jar
@@ -74,13 +74,13 @@ 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
+1. Download otel java binary
```bash
wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
```
-2. Run your application
+2. Run your application
```bash
java -javaagent:/opentelemetry-javaagent.jar -jar .jar
diff --git a/frontend/src/container/OnboardingContainer/APM/Java/md-docs/tomcat.md b/frontend/src/container/OnboardingContainer/APM/Java/md-docs/tomcat.md
index 6cb29b33ff..f0b0ee9c20 100644
--- a/frontend/src/container/OnboardingContainer/APM/Java/md-docs/tomcat.md
+++ b/frontend/src/container/OnboardingContainer/APM/Java/md-docs/tomcat.md
@@ -42,11 +42,11 @@ export OTEL_RESOURCE_ATTRIBUTES=service.name=
Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary accordingly.
- US - ingest.us.signoz.cloud:443
+ US - ingest.us.signoz.cloud:443
- IN - ingest.in.signoz.cloud:443
+ IN - ingest.in.signoz.cloud:443
- EU - ingest.eu.signoz.cloud:443
+ EU - ingest.eu.signoz.cloud:443
---
@@ -56,12 +56,12 @@ OTel Collector binary helps to collect logs, hostmetrics, resource and infra att
You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Java application.
-Step 1. Download OTel java binary agent
+Step 1. Download OTel java binary agent
```bash
wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
```
-Step 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.
@@ -82,13 +82,13 @@ 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
+1. Download otel java binary
```bash
wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releases/latest/download/opentelemetry-javaagent.jar
```
-2. Enable the instrumentation agent and run your application
+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.
diff --git a/frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.tsx b/frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.tsx
index ff32c0230d..d467dc161c 100644
--- a/frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.tsx
+++ b/frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.tsx
@@ -1,9 +1,10 @@
import './Javascript.styles.scss';
-import { MDXProvider } from '@mdx-js/react';
import { Form, Input, Select } from 'antd';
+import { Code, Pre } 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';
@@ -24,7 +25,9 @@ export default function Javascript({
activeStep: number;
}): JSX.Element {
const [selectedFrameWork, setSelectedFrameWork] = useState('express');
-
+ const [selectedFrameWorkDocs, setSelectedFrameWorkDocs] = useState(
+ ExpressDocs,
+ );
const [form] = Form.useForm();
useEffect(() => {
@@ -35,14 +38,19 @@ export default function Javascript({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedFrameWork]);
- const renderDocs = (): JSX.Element => {
+ const handleFrameworkChange = (selectedFrameWork: string): void => {
+ setSelectedFrameWork(selectedFrameWork);
+
switch (selectedFrameWork) {
case 'nodejs':
- return ;
+ setSelectedFrameWorkDocs(JavascriptDocs);
+ break;
case 'nestjs':
- return ;
+ setSelectedFrameWorkDocs(NestJsDocs);
+ break;
default:
- return ;
+ setSelectedFrameWorkDocs(ExpressDocs);
+ break;
}
};
@@ -67,7 +75,7 @@ export default function Javascript({
defaultValue="express"
style={{ minWidth: 120 }}
placeholder="Select Framework"
- onChange={(value): void => setSelectedFrameWork(value)}
+ onChange={(value): void => handleFrameworkChange(value)}
options={[
{
value: 'nodejs',
@@ -108,7 +116,14 @@ export default function Javascript({
- {renderDocs()}
+
+ {selectedFrameWorkDocs}
+
)}
diff --git a/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/express.md b/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/express.md
index a6a4790d39..2d008e3458 100644
--- a/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/express.md
+++ b/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/express.md
@@ -26,7 +26,7 @@ npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
```
-Step 2. Create tracing.js file
+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`.
@@ -71,13 +71,13 @@ 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
+ US - ingest.us.signoz.cloud:443/v1/traces
- IN - ingest.in.signoz.cloud:443/v1/traces
+ IN - ingest.in.signoz.cloud:443/v1/traces
- EU - ingest.eu.signoz.cloud:443/v1/traces
+ EU - ingest.eu.signoz.cloud:443/v1/traces
-Step 3. Run the application
+Step 3. Run the application
Make sure you set the `OTEL_EXPORTER_OTLP_HEADERS` env as follows
```bash
@@ -104,7 +104,7 @@ npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
```
-Step 2. Create tracing.js file
+Step 2. Create tracing.js file
You need to configure your service name. In this example, we have used `node_app`.
@@ -144,7 +144,7 @@ process.on('SIGTERM', () => {
});
```
-Step 3. Run the application
+Step 3. Run the application
```bash
node -r ./tracing.js app.js
```
@@ -165,7 +165,7 @@ npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
```
-Step 2. Create tracing.js file
+Step 2. Create tracing.js file
You also need to configure your service name. In this example, we have used `node_app`.
@@ -205,7 +205,7 @@ process.on('SIGTERM', () => {
});
```
-Step 3. Run the application
+Step 3. Run the application
```bash
node -r ./tracing.js app.js
diff --git a/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/javascript.md b/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/javascript.md
index 30eb052951..81fc46b08d 100644
--- a/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/javascript.md
+++ b/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/javascript.md
@@ -1,6 +1,6 @@
## Requirements
-- Node.js version 14 or newer ([See here](https://github.com/open-telemetry/opentelemetry-js#supported-runtimes))
+- Node.js version 14 or newer ([See here](https://github.com/open-telemetry/opentelemetry-js#supported-runtimes))
## Send traces to SigNoz Cloud
@@ -24,7 +24,7 @@ npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
```
-Step 2. Create tracing.js file
+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`.
@@ -69,13 +69,13 @@ 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
+ US - ingest.us.signoz.cloud:443/v1/traces
- IN - ingest.in.signoz.cloud:443/v1/traces
+ IN - ingest.in.signoz.cloud:443/v1/traces
- EU - ingest.eu.signoz.cloud:443/v1/traces
+ EU - ingest.eu.signoz.cloud:443/v1/traces
-Step 3. Run the application
+Step 3. Run the application
Make sure you set the `OTEL_EXPORTER_OTLP_HEADERS` env as follows
@@ -102,7 +102,7 @@ npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
```
-Step 2. Create tracing.js file
+Step 2. Create tracing.js file
You need to configure your service name. In this example, we have used `node_app`.
@@ -142,7 +142,7 @@ process.on('SIGTERM', () => {
});
```
-Step 3. Run the application
+Step 3. Run the application
```bash
node -r ./tracing.js app.js
@@ -165,7 +165,7 @@ npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
```
-Step 2. Create tracing.js file
+Step 2. Create tracing.js file
You need to configure your service name. In this example, we have used `node_app`.
@@ -205,7 +205,7 @@ process.on('SIGTERM', () => {
});
```
-Step 3. Run the application
+Step 3. Run the application
```bash
node -r ./tracing.js app.js
```
\ No newline at end of file
diff --git a/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/nestjs.md b/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/nestjs.md
index 54ba57c58a..0baace6abe 100644
--- a/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/nestjs.md
+++ b/frontend/src/container/OnboardingContainer/APM/Javascript/md-docs/nestjs.md
@@ -26,7 +26,7 @@ npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
```
-Step 2. Create `tracer.ts` file
+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`.
@@ -69,11 +69,11 @@ const sdk = new opentelemetry.NodeSDK({
Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary accordingly.
- US - ingest.us.signoz.cloud:443/v1/traces
+ US - ingest.us.signoz.cloud:443/v1/traces
- IN - ingest.in.signoz.cloud:443/v1/traces
+ IN - ingest.in.signoz.cloud:443/v1/traces
- EU - ingest.eu.signoz.cloud:443/v1/traces
+ EU - ingest.eu.signoz.cloud:443/v1/traces
@@ -84,7 +84,7 @@ const tracer = require('./tracer')
```
-Step 4. Start the 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:
@@ -131,7 +131,7 @@ npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
```
-Step 2. Create `tracer.ts` file
+Step 2. Create `tracer.ts` file
You need to configure your service name. In this example, we have used `sampleNestjsApplication`.
@@ -180,7 +180,7 @@ const tracer = require('./tracer')
```
-Step 4. Start the tracer
+Step 4. Start the tracer
In the `async function boostrap` section of the application code, initialize the tracer as follows:
@@ -219,7 +219,7 @@ npm install --save @opentelemetry/auto-instrumentations-node@^0.37.0
npm install --save @opentelemetry/exporter-trace-otlp-http@^0.39.1
```
-Step 2. Create `tracer.ts` file
+Step 2. Create `tracer.ts` file
You need to configure your service name. In this example, we have used `sampleNestjsApplication`.
@@ -268,7 +268,7 @@ const tracer = require('./tracer')
```
-Step 4. Start the tracer
+Step 4. Start the tracer
In the `async function boostrap` section of the application code, initialize the tracer as follows:
diff --git a/frontend/src/container/OnboardingContainer/APM/Python/Python.tsx b/frontend/src/container/OnboardingContainer/APM/Python/Python.tsx
index 526b566124..faf7dfee86 100644
--- a/frontend/src/container/OnboardingContainer/APM/Python/Python.tsx
+++ b/frontend/src/container/OnboardingContainer/APM/Python/Python.tsx
@@ -1,9 +1,10 @@
import './Python.styles.scss';
-import { MDXProvider } from '@mdx-js/react';
import { Form, Input, Select } from 'antd';
+import { Code, Pre } 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';
@@ -28,7 +29,7 @@ export default function Python({
activeStep: number;
}): JSX.Element {
const [selectedFrameWork, setSelectedFrameWork] = useState('django');
-
+ const [selectedFrameWorkDocs, setSelectedFrameWorkDocs] = useState(DjangoDocs);
const [form] = Form.useForm();
useEffect(() => {
@@ -39,18 +40,25 @@ export default function Python({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedFrameWork]);
- const renderDocs = (): JSX.Element => {
+ const handleFrameworkChange = (selectedFrameWork: string): void => {
+ setSelectedFrameWork(selectedFrameWork);
+
switch (selectedFrameWork) {
case 'django':
- return ;
+ setSelectedFrameWorkDocs(DjangoDocs);
+ break;
case 'fastAPI':
- return ;
+ setSelectedFrameWorkDocs(FastAPIDocs);
+ break;
case 'flask':
- return ;
+ setSelectedFrameWorkDocs(FlaskDocs);
+ break;
case 'falcon':
- return ;
+ setSelectedFrameWorkDocs(FalconDocs);
+ break;
default:
- return ;
+ setSelectedFrameWorkDocs(PythonDocs);
+ break;
}
};
@@ -75,7 +83,7 @@ export default function Python({
defaultValue="Django"
style={{ minWidth: 120 }}
placeholder="Select Framework"
- onChange={(value): void => setSelectedFrameWork(value)}
+ onChange={(value): void => handleFrameworkChange(value)}
options={[
{
value: 'django',
@@ -118,7 +126,14 @@ export default function Python({
- {renderDocs()}
+
+ {selectedFrameWorkDocs}
+
)}
diff --git a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/django.md b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/django.md
index 4709adc91f..5daecee6b1 100644
--- a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/django.md
+++ b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/django.md
@@ -24,7 +24,7 @@ From VMs, there are two ways to send data to SigNoz Cloud.
#### **Send traces directly to SigNoz Cloud**
-Step 1. Create a virtual environment
+Step 1. Create a virtual environment
```bash
python3 -m venv .venv
@@ -38,22 +38,6 @@ pip install opentelemetry-distro==0.38b0
pip install opentelemetry-exporter-otlp==1.17.0
```
-
Step 3. Add automatic instrumentation
@@ -79,11 +63,11 @@ opentelemetry-instrument
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
+ US - ingest.us.signoz.cloud:443
- IN - ingest.in.signoz.cloud:443
+ IN - ingest.in.signoz.cloud:443
- EU - ingest.eu.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`.
@@ -96,7 +80,7 @@ OTel Collector binary helps to collect logs, hostmetrics, resource and infra att
You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Python application.
-Step 1. Create a virtual environment
+Step 1. Create a virtual environment
```bash
python3 -m venv .venv
@@ -142,7 +126,7 @@ For Python application deployed on Kubernetes, you need to install OTel Collecto
Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Python instrumentation by following the below steps:
-Step 1. Create a virtual environment
+Step 1. Create a virtual environment
```bash
python3 -m venv .venv
diff --git a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/falcon.md b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/falcon.md
index 13b8c331da..549c75e804 100644
--- a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/falcon.md
+++ b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/falcon.md
@@ -15,7 +15,7 @@ From VMs, there are two ways to send data to SigNoz Cloud.
#### **Send traces directly to SigNoz Cloud**
-Step 1. Create a virtual environment
+Step 1. Create a virtual environment
```bash
python3 -m venv .venv
@@ -29,23 +29,6 @@ pip install opentelemetry-distro==0.38b0
pip install opentelemetry-exporter-otlp==1.17.0
```
-
-
Step 3. Add automatic instrumentation
```bash
@@ -70,11 +53,11 @@ opentelemetry-instrument
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
+ US - ingest.us.signoz.cloud:443
- IN - ingest.in.signoz.cloud:443
+ IN - ingest.in.signoz.cloud:443
- EU - ingest.eu.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`.
@@ -87,7 +70,7 @@ OTel Collector binary helps to collect logs, hostmetrics, resource and infra att
You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Python application.
-Step 1. Create a virtual environment
+Step 1. Create a virtual environment
```bash
python3 -m venv .venv
@@ -138,7 +121,7 @@ For Python application deployed on Kubernetes, you need to install OTel Collecto
Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Python instrumentation by following the below steps:
-Step 1. Create a virtual environment
+Step 1. Create a virtual environment
```bash
python3 -m venv .venv
diff --git a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/fastAPI.md b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/fastAPI.md
index f29a743272..9855eba3f9 100644
--- a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/fastAPI.md
+++ b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/fastAPI.md
@@ -15,7 +15,7 @@ From VMs, there are two ways to send data to SigNoz Cloud.
#### **Send traces directly to SigNoz Cloud**
-Step 1. Create a virtual environment
+Step 1. Create a virtual environment
```bash
python3 -m venv .venv
@@ -53,11 +53,11 @@ opentelemetry-instrument
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
+ US - ingest.us.signoz.cloud:443
- IN - ingest.in.signoz.cloud:443
+ IN - ingest.in.signoz.cloud:443
- EU - ingest.eu.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`.
@@ -70,7 +70,7 @@ OTel Collector binary helps to collect logs, hostmetrics, resource and infra att
You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Python application.
-Step 1. Create a virtual environment
+Step 1. Create a virtual environment
```bash
python3 -m venv .venv
@@ -119,7 +119,7 @@ For Python application deployed on Kubernetes, you need to install OTel Collecto
Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Python instrumentation by following the below steps:
-Step 1. Create a virtual environment
+Step 1. Create a virtual environment
```bash
python3 -m venv .venv
diff --git a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/flask.md b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/flask.md
index 1c593b6f4a..2ce0daec6b 100644
--- a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/flask.md
+++ b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/flask.md
@@ -15,7 +15,7 @@ From VMs, there are two ways to send data to SigNoz Cloud.
#### **Send traces directly to SigNoz Cloud**
-Step 1. Create a virtual environment
+Step 1. Create a virtual environment
```bash
python3 -m venv .venv
@@ -53,11 +53,11 @@ opentelemetry-instrument
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
+ US - ingest.us.signoz.cloud:443
- IN - ingest.in.signoz.cloud:443
+ IN - ingest.in.signoz.cloud:443
- EU - ingest.eu.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`.
@@ -70,7 +70,7 @@ OTel Collector binary helps to collect logs, hostmetrics, resource and infra att
You can find instructions to install OTel Collector binary [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/) in your VM. Once you are done setting up your OTel Collector binary, you can follow the below steps for instrumenting your Python application.
-Step 1. Create a virtual environment
+Step 1. Create a virtual environment
```bash
python3 -m venv .venv
@@ -121,7 +121,7 @@ For Python application deployed on Kubernetes, you need to install OTel Collecto
Once you have set up OTel Collector agent, you can proceed with OpenTelemetry Python instrumentation by following the below steps:
-Step 1. Create a virtual environment
+Step 1. Create a virtual environment
```bash
python3 -m venv .venv
diff --git a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/python.md b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/python.md
index 218ad40c4e..c5b625b30c 100644
--- a/frontend/src/container/OnboardingContainer/APM/Python/md-docs/python.md
+++ b/frontend/src/container/OnboardingContainer/APM/Python/md-docs/python.md
@@ -43,11 +43,11 @@ opentelemetry-instrument
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
+ US - ingest.us.signoz.cloud:443
- IN - ingest.in.signoz.cloud:443
+ IN - ingest.in.signoz.cloud:443
- EU - ingest.eu.signoz.cloud:443
+ EU - ingest.eu.signoz.cloud:443
Note:
Don’t run app in reloader/hot-reload mode as it breaks instrumentation.
diff --git a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.tsx b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.tsx
index 0b61a0d442..dc0f642340 100644
--- a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.tsx
+++ b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.tsx
@@ -1,6 +1,7 @@
import './InfrastructureMonitoring.styles.scss';
-import { MDXProvider } from '@mdx-js/react';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
+import ReactMarkdown from 'react-markdown';
import InfraMonitoringDocs from './infraMonitoringDocs.md';
@@ -28,9 +29,14 @@ export default function InfrastructureMonitoring({
-
-
-
+
+ {InfraMonitoringDocs}
+
)}
{activeStep === 3 &&
Infra Monitoring Step 3
}
diff --git a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/infraMonitoringDocs.md b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/infraMonitoringDocs.md
index 351c4542c6..b8e44e1fe9 100644
--- a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/infraMonitoringDocs.md
+++ b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/infraMonitoringDocs.md
@@ -71,11 +71,11 @@ service:
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
+US - ingest.us.signoz.cloud:443
-IN - ingest.in.signoz.cloud:443
+IN - ingest.in.signoz.cloud:443
-EU - ingest.eu.signoz.cloud:443
+EU - ingest.eu.signoz.cloud:443
To enable a new OpenTelemetry receiver, follow the steps below:
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/ApplicationLogs.tsx b/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/ApplicationLogs.tsx
index f08da7d539..3341dadaff 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/ApplicationLogs.tsx
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/ApplicationLogs.tsx
@@ -1,11 +1,9 @@
-import { MDXProvider } from '@mdx-js/react';
-import { Tabs } from 'antd';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
import Header from 'container/OnboardingContainer/common/Header/Header';
+import ReactMarkdown from 'react-markdown';
import ConnectionStatus from '../common/LogsConnectionStatus/LogsConnectionStatus';
import LogsFromLogFile from './applicationLogsFromLogFile.md';
-import LogsUsingJavaOtelSDK from './applicationLogsUsingJavaOtelSDK.md';
-import LogsUsingPythonOtelSDK from './applicationLogsUsingPythonOtelSDK.md';
interface ApplicationLogsProps {
type: string;
@@ -14,29 +12,12 @@ interface ApplicationLogsProps {
const collectLogsFromFileURL =
'https://signoz.io/docs/userguide/collect_logs_from_file/';
-const collectLogsFromOTELSDK =
- 'https://signoz.io/docs/userguide/collecting_application_logs_otel_sdk_java/';
export default function ApplicationLogs({
type,
activeStep,
}: ApplicationLogsProps): JSX.Element {
- function renderContentForCollectingLogsOtelSDK(language: string): JSX.Element {
- if (language === 'Java') {
- return ;
- }
- return ;
- }
-
- enum ApplicationLogsType {
- FROM_LOG_FILE = 'from-log-file',
- USING_OTEL_COLLECTOR = 'using-otel-sdk',
- }
-
- const docsURL =
- type === ApplicationLogsType.FROM_LOG_FILE
- ? collectLogsFromFileURL
- : collectLogsFromOTELSDK;
+ const docsURL = collectLogsFromFileURL;
return (
<>
@@ -44,38 +25,21 @@ export default function ApplicationLogs({
)}
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/applicationLogsUsingJavaOtelSDK.md b/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/applicationLogsUsingJavaOtelSDK.md
index dd3591d472..f0e512581a 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/applicationLogsUsingJavaOtelSDK.md
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/applicationLogsUsingJavaOtelSDK.md
@@ -13,7 +13,7 @@ The command for it will look like
OTEL_LOGS_EXPORTER=otlp OTEL_EXPORTER_OTLP_ENDPOINT="http://:4317" OTEL_RESOURCE_ATTRIBUTES=service.name= java -javaagent:/path/opentelemetry-javaagent.jar -jar .jar
```
-
+
In the below example we will configure a java application to send logs to SigNoz.
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/Docker/Docker.tsx b/frontend/src/container/OnboardingContainer/LogsManagement/Docker/Docker.tsx
index 972372c59d..e88d62632b 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/Docker/Docker.tsx
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/Docker/Docker.tsx
@@ -1,8 +1,9 @@
-import { MDXProvider } from '@mdx-js/react';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
import Header from 'container/OnboardingContainer/common/Header/Header';
+import ReactMarkdown from 'react-markdown';
import ConnectionStatus from '../common/LogsConnectionStatus/LogsConnectionStatus';
-import Post from './docker.md';
+import DockerDocs from './docker.md';
export default function Docker({
activeStep,
@@ -22,9 +23,14 @@ export default function Docker({
/>
-
-
-
+
+ {DockerDocs}
+
)}
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/Docker/docker.md b/frontend/src/container/OnboardingContainer/LogsManagement/Docker/docker.md
index 008dcf598d..1c1025963a 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/Docker/docker.md
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/Docker/docker.md
@@ -6,11 +6,11 @@
Depending on the choice of your region for SigNoz cloud, the ingest endpoint will vary accordingly.
- US - ingest.us.signoz.cloud:443
+ US - ingest.us.signoz.cloud:443
- IN - ingest.in.signoz.cloud:443
+ IN - ingest.in.signoz.cloud:443
- EU - ingest.eu.signoz.cloud:443
+ EU - ingest.eu.signoz.cloud:443
- Start the containers
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/ExistingCollectors.tsx b/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/ExistingCollectors.tsx
index 6ad936134b..e86bbabfe4 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/ExistingCollectors.tsx
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/ExistingCollectors.tsx
@@ -1,7 +1,8 @@
-import { MDXProvider } from '@mdx-js/react';
import { Select } from 'antd';
+import { Code, Pre } 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';
@@ -17,6 +18,7 @@ enum FrameworksMap {
export default function ExistingCollectors(): JSX.Element {
const [selectedFrameWork, setSelectedFrameWork] = useState('fluent_d');
+ const [selectedFrameWorkDocs, setSelectedFrameWorkDocs] = useState(FluentD);
useEffect(() => {
// on language select
@@ -26,14 +28,19 @@ export default function ExistingCollectors(): JSX.Element {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedFrameWork]);
- const renderDocs = (): JSX.Element => {
+ const handleFrameworkChange = (selectedFrameWork: string): void => {
+ setSelectedFrameWork(selectedFrameWork);
+
switch (selectedFrameWork) {
case 'fluent_d':
- return ;
+ setSelectedFrameWorkDocs(FluentD);
+ break;
case 'fluent_bit':
- return ;
+ setSelectedFrameWorkDocs(FluentBit);
+ break;
default:
- return ;
+ setSelectedFrameWorkDocs(LogStashDocs);
+ break;
}
};
@@ -56,7 +63,7 @@ export default function ExistingCollectors(): JSX.Element {
defaultValue="fluent_d"
style={{ minWidth: 120 }}
placeholder="Select Framework"
- onChange={(value): void => setSelectedFrameWork(value)}
+ onChange={(value): void => handleFrameworkChange(value)}
options={[
{
value: 'fluent_d',
@@ -76,7 +83,14 @@ export default function ExistingCollectors(): JSX.Element {
- {renderDocs()}
+
+ {selectedFrameWorkDocs}
+
);
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/Kubernetes/Kubernetes.tsx b/frontend/src/container/OnboardingContainer/LogsManagement/Kubernetes/Kubernetes.tsx
index 9c93ce5aa9..0a60acc7db 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/Kubernetes/Kubernetes.tsx
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/Kubernetes/Kubernetes.tsx
@@ -1,8 +1,9 @@
-import { MDXProvider } from '@mdx-js/react';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
import Header from 'container/OnboardingContainer/common/Header/Header';
+import ReactMarkdown from 'react-markdown';
import ConnectionStatus from '../common/LogsConnectionStatus/LogsConnectionStatus';
-import Post from './kubernetes.md';
+import KubernetesDocs from './kubernetes.md';
export default function Kubernetes({
activeStep,
@@ -22,9 +23,14 @@ export default function Kubernetes({
/>
-
-
-
+
+ {KubernetesDocs}
+
)}
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/LogsManagement.tsx b/frontend/src/container/OnboardingContainer/LogsManagement/LogsManagement.tsx
index ef7bae252e..0a54cbce0f 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/LogsManagement.tsx
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/LogsManagement.tsx
@@ -35,16 +35,6 @@ const supportedLogTypes = [
id: 'application_logs_log_file',
imgURL: `Logos/software-window.svg`,
},
- // {
- // name: 'NodeJS Winston Logs ',
- // id: 'nodejs',
- // imgURL: `Logos/node-js.svg`,
- // },
- // {
- // name: 'Application Logs using OTEL SDK',
- // id: 'application_logs_otel_sdk',
- // imgURL: `Logos/cmd-terminal.svg`,
- // },
{
name: 'Logs from existing collectors',
id: 'existing_collectors',
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/Nodejs/Nodejs.tsx b/frontend/src/container/OnboardingContainer/LogsManagement/Nodejs/Nodejs.tsx
index 5ebc044205..75f9a3a487 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/Nodejs/Nodejs.tsx
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/Nodejs/Nodejs.tsx
@@ -1,8 +1,9 @@
-import { MDXProvider } from '@mdx-js/react';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
import Header from 'container/OnboardingContainer/common/Header/Header';
+import ReactMarkdown from 'react-markdown';
import ConnectionStatus from '../common/LogsConnectionStatus/LogsConnectionStatus';
-import Post from './nodejs.md';
+import NodeJsDocs from './nodejs.md';
export default function Nodejs({
activeStep,
@@ -22,9 +23,14 @@ export default function Nodejs({
/>
-
-
-
+
+ {NodeJsDocs}
+
)}
diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/SysLogs/SysLogs.tsx b/frontend/src/container/OnboardingContainer/LogsManagement/SysLogs/SysLogs.tsx
index eb00380e44..9cd568f79d 100644
--- a/frontend/src/container/OnboardingContainer/LogsManagement/SysLogs/SysLogs.tsx
+++ b/frontend/src/container/OnboardingContainer/LogsManagement/SysLogs/SysLogs.tsx
@@ -1,8 +1,9 @@
-import { MDXProvider } from '@mdx-js/react';
+import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer';
import Header from 'container/OnboardingContainer/common/Header/Header';
+import ReactMarkdown from 'react-markdown';
import ConnectionStatus from '../common/LogsConnectionStatus/LogsConnectionStatus';
-import Post from './syslogs.md';
+import SysLogsDocs from './syslogs.md';
export default function SysLogs({
activeStep,
@@ -22,9 +23,14 @@ export default function SysLogs({
/>