GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 14:18:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Yunus M 2023-10-11 15:33:24 +05:30 committed by GitHub
parent 2c96512a8a
commit 0d3cbb1db2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
35 changed files with 512 additions and 423 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/public/locales/en-GB/routes.json
View File

@ -1,13 +1,14 @@
{ {
"general": "General", "general": "General",
"alert_channels": "Alert Channels", "alert_channels": "Alert Channels",
"organization_settings": "Organization Settings", "organization_settings": "Organization Settings",
"my_settings": "My Settings", "ingestion_settings": "Ingestion Settings",
"overview_metrics": "Overview Metrics", "my_settings": "My Settings",
"dbcall_metrics": "Database Calls", "overview_metrics": "Overview Metrics",
"external_metrics": "External Calls", "dbcall_metrics": "Database Calls",
"pipeline": "Pipeline", "external_metrics": "External Calls",
"pipelines": "Pipelines", "pipeline": "Pipeline",
"archives": "Archives", "pipelines": "Pipelines",
"logs_to_metrics": "Logs To Metrics" "archives": "Archives",
} "logs_to_metrics": "Logs To Metrics"
}

75
frontend/public/locales/en-GB/titles.json
View File

@ -1,37 +1,38 @@
{ {
"SIGN_UP": "SigNoz | Sign Up", "SIGN_UP": "SigNoz | Sign Up",
"LOGIN": "SigNoz | Login", "LOGIN": "SigNoz | Login",
"GET_STARTED": "SigNoz | Get Started", "GET_STARTED": "SigNoz | Get Started",
"SERVICE_METRICS": "SigNoz | Service Metrics", "SERVICE_METRICS": "SigNoz | Service Metrics",
"SERVICE_MAP": "SigNoz | Service Map", "SERVICE_MAP": "SigNoz | Service Map",
"TRACE": "SigNoz | Trace", "TRACE": "SigNoz | Trace",
"TRACE_DETAIL": "SigNoz | Trace Detail", "TRACE_DETAIL": "SigNoz | Trace Detail",
"TRACES_EXPLORER": "SigNoz | Traces Explorer", "TRACES_EXPLORER": "SigNoz | Traces Explorer",
"SETTINGS": "SigNoz | Settings", "SETTINGS": "SigNoz | Settings",
"USAGE_EXPLORER": "SigNoz | Usage Explorer", "USAGE_EXPLORER": "SigNoz | Usage Explorer",
"APPLICATION": "SigNoz | Home", "APPLICATION": "SigNoz | Home",
"ALL_DASHBOARD": "SigNoz | All Dashboards", "ALL_DASHBOARD": "SigNoz | All Dashboards",
"DASHBOARD": "SigNoz | Dashboard", "DASHBOARD": "SigNoz | Dashboard",
"DASHBOARD_WIDGET": "SigNoz | Dashboard Widget", "DASHBOARD_WIDGET": "SigNoz | Dashboard Widget",
"EDIT_ALERTS": "SigNoz | Edit Alerts", "EDIT_ALERTS": "SigNoz | Edit Alerts",
"LIST_ALL_ALERT": "SigNoz | All Alerts", "LIST_ALL_ALERT": "SigNoz | All Alerts",
"ALERTS_NEW": "SigNoz | New Alert", "ALERTS_NEW": "SigNoz | New Alert",
"ALL_CHANNELS": "SigNoz | All Channels", "ALL_CHANNELS": "SigNoz | All Channels",
"CHANNELS_NEW": "SigNoz | New Channel", "CHANNELS_NEW": "SigNoz | New Channel",
"CHANNELS_EDIT": "SigNoz | Edit Channel", "CHANNELS_EDIT": "SigNoz | Edit Channel",
"ALL_ERROR": "SigNoz | All Errors", "ALL_ERROR": "SigNoz | All Errors",
"ERROR_DETAIL": "SigNoz | Error Detail", "ERROR_DETAIL": "SigNoz | Error Detail",
"VERSION": "SigNoz | Version", "VERSION": "SigNoz | Version",
"MY_SETTINGS": "SigNoz | My Settings", "MY_SETTINGS": "SigNoz | My Settings",
"ORG_SETTINGS": "SigNoz | Organization Settings", "ORG_SETTINGS": "SigNoz | Organization Settings",
"SOMETHING_WENT_WRONG": "SigNoz | Something Went Wrong", "INGESTION_SETTINGS": "SigNoz | Ingestion Settings",
"UN_AUTHORIZED": "SigNoz | Unauthorized", "SOMETHING_WENT_WRONG": "SigNoz | Something Went Wrong",
"NOT_FOUND": "SigNoz | Page Not Found", "UN_AUTHORIZED": "SigNoz | Unauthorized",
"LOGS": "SigNoz | Logs", "NOT_FOUND": "SigNoz | Page Not Found",
"LOGS_EXPLORER": "SigNoz | Logs Explorer", "LOGS": "SigNoz | Logs",
"LIVE_LOGS": "SigNoz | Live Logs", "LOGS_EXPLORER": "SigNoz | Logs Explorer",
"HOME_PAGE": "Open source Observability Platform | SigNoz", "LIVE_LOGS": "SigNoz | Live Logs",
"PASSWORD_RESET": "SigNoz | Password Reset", "HOME_PAGE": "Open source Observability Platform | SigNoz",
"LIST_LICENSES": "SigNoz | List of Licenses", "PASSWORD_RESET": "SigNoz | Password Reset",
"DEFAULT": "Open source Observability Platform | SigNoz" "LIST_LICENSES": "SigNoz | List of Licenses",
} "DEFAULT": "Open source Observability Platform | SigNoz"
}

27
frontend/public/locales/en/routes.json
View File

@ -1,13 +1,14 @@
{ {
"general": "General", "general": "General",
"alert_channels": "Alert Channels", "alert_channels": "Alert Channels",
"organization_settings": "Organization Settings", "organization_settings": "Organization Settings",
"my_settings": "My Settings", "ingestion_settings": "Ingestion Settings",
"overview_metrics": "Overview Metrics", "my_settings": "My Settings",
"dbcall_metrics": "Database Calls", "overview_metrics": "Overview Metrics",
"external_metrics": "External Calls", "dbcall_metrics": "Database Calls",
"pipeline": "Pipeline", "external_metrics": "External Calls",
"pipelines": "Pipelines", "pipeline": "Pipeline",
"archives": "Archives", "pipelines": "Pipelines",
"logs_to_metrics": "Logs To Metrics" "archives": "Archives",
} "logs_to_metrics": "Logs To Metrics"
}

75
frontend/public/locales/en/titles.json
View File

@ -1,37 +1,38 @@
{ {
"SIGN_UP": "SigNoz | Sign Up", "SIGN_UP": "SigNoz | Sign Up",
"LOGIN": "SigNoz | Login", "LOGIN": "SigNoz | Login",
"SERVICE_METRICS": "SigNoz | Service Metrics", "SERVICE_METRICS": "SigNoz | Service Metrics",
"SERVICE_MAP": "SigNoz | Service Map", "SERVICE_MAP": "SigNoz | Service Map",
"GET_STARTED": "SigNoz | Get Started", "GET_STARTED": "SigNoz | Get Started",
"TRACE": "SigNoz | Trace", "TRACE": "SigNoz | Trace",
"TRACE_DETAIL": "SigNoz | Trace Detail", "TRACE_DETAIL": "SigNoz | Trace Detail",
"TRACES_EXPLORER": "SigNoz | Traces Explorer", "TRACES_EXPLORER": "SigNoz | Traces Explorer",
"SETTINGS": "SigNoz | Settings", "SETTINGS": "SigNoz | Settings",
"USAGE_EXPLORER": "SigNoz | Usage Explorer", "USAGE_EXPLORER": "SigNoz | Usage Explorer",
"APPLICATION": "SigNoz | Home", "APPLICATION": "SigNoz | Home",
"ALL_DASHBOARD": "SigNoz | All Dashboards", "ALL_DASHBOARD": "SigNoz | All Dashboards",
"DASHBOARD": "SigNoz | Dashboard", "DASHBOARD": "SigNoz | Dashboard",
"DASHBOARD_WIDGET": "SigNoz | Dashboard Widget", "DASHBOARD_WIDGET": "SigNoz | Dashboard Widget",
"EDIT_ALERTS": "SigNoz | Edit Alerts", "EDIT_ALERTS": "SigNoz | Edit Alerts",
"LIST_ALL_ALERT": "SigNoz | All Alerts", "LIST_ALL_ALERT": "SigNoz | All Alerts",
"ALERTS_NEW": "SigNoz | New Alert", "ALERTS_NEW": "SigNoz | New Alert",
"ALL_CHANNELS": "SigNoz | All Channels", "ALL_CHANNELS": "SigNoz | All Channels",
"CHANNELS_NEW": "SigNoz | New Channel", "CHANNELS_NEW": "SigNoz | New Channel",
"CHANNELS_EDIT": "SigNoz | Edit Channel", "CHANNELS_EDIT": "SigNoz | Edit Channel",
"ALL_ERROR": "SigNoz | All Errors", "ALL_ERROR": "SigNoz | All Errors",
"ERROR_DETAIL": "SigNoz | Error Detail", "ERROR_DETAIL": "SigNoz | Error Detail",
"VERSION": "SigNoz | Version", "VERSION": "SigNoz | Version",
"MY_SETTINGS": "SigNoz | My Settings", "MY_SETTINGS": "SigNoz | My Settings",
"ORG_SETTINGS": "SigNoz | Organization Settings", "ORG_SETTINGS": "SigNoz | Organization Settings",
"SOMETHING_WENT_WRONG": "SigNoz | Something Went Wrong", "INGESTION_SETTINGS": "SigNoz | Ingestion Settings",
"UN_AUTHORIZED": "SigNoz | Unauthorized", "SOMETHING_WENT_WRONG": "SigNoz | Something Went Wrong",
"NOT_FOUND": "SigNoz | Page Not Found", "UN_AUTHORIZED": "SigNoz | Unauthorized",
"LOGS": "SigNoz | Logs", "NOT_FOUND": "SigNoz | Page Not Found",
"LOGS_EXPLORER": "SigNoz | Logs Explorer", "LOGS": "SigNoz | Logs",
"LIVE_LOGS": "SigNoz | Live Logs", "LOGS_EXPLORER": "SigNoz | Logs Explorer",
"HOME_PAGE": "Open source Observability Platform | SigNoz", "LIVE_LOGS": "SigNoz | Live Logs",
"PASSWORD_RESET": "SigNoz | Password Reset", "HOME_PAGE": "Open source Observability Platform | SigNoz",
"LIST_LICENSES": "SigNoz | List of Licenses", "PASSWORD_RESET": "SigNoz | Password Reset",
"DEFAULT": "Open source Observability Platform | SigNoz" "LIST_LICENSES": "SigNoz | List of Licenses",
} "DEFAULT": "Open source Observability Platform | SigNoz"
}

4
frontend/src/AppRoutes/pageComponents.ts
View File

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

8
frontend/src/AppRoutes/routes.ts
View File

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

24
frontend/src/api/settings/getIngestionData.ts Normal file
View File

@ -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;

60
frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx
View File

@ -1,10 +1,18 @@
/* eslint-disable no-restricted-syntax */
/* eslint-disable react/jsx-props-no-spreading */ /* 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 { CodeProps } from 'react-markdown/lib/ast-to-react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { a11yDark } from 'react-syntax-highlighter/dist/cjs/styles/prism'; import { a11yDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
import CodeCopyBtn from './CodeCopyBtn/CodeCopyBtn'; import CodeCopyBtn from './CodeCopyBtn/CodeCopyBtn';
interface LinkProps {
href: string;
children: React.ReactElement;
}
function Pre({ children }: { children: React.ReactNode }): JSX.Element { function Pre({ children }: { children: React.ReactNode }): JSX.Element {
return ( return (
<pre className="code-snippet-container"> <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 };

1
frontend/src/constants/routes.ts
View File

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

3
frontend/src/container/IngestionSettings/IngestionSettings.styles.scss Normal file
View File

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

82
frontend/src/container/IngestionSettings/IngestionSettings.tsx Normal file
View File

@ -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>
);
}

43
frontend/src/container/OnboardingContainer/APM/APM.tsx
View File

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

26
frontend/src/container/OnboardingContainer/APM/GoLang/GoLang.tsx
View File

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

30
frontend/src/container/OnboardingContainer/APM/GoLang/goLang.md
View File

@ -134,25 +134,11 @@ 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: The run command must have some environment variables to send data to SigNoz cloud. The run command:
```bash ```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) If you want to update your `service_name`, you can modify the `SERVICE_NAME` variable.
`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
--- ---
#### **Send traces via OTel Collector binary** #### **Send traces via OTel Collector binary**
@ -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: The run command must have some environment variables to send data to SigNoz. The run command:
```bash ```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. 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: The run command must have some environment variables to send data to SigNoz. The run command:
```bash ```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. 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)

30
frontend/src/container/OnboardingContainer/APM/Java/Java.tsx
View File

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

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

@ -28,24 +28,12 @@ wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releas
Step 2. Run your application Step 2. Run your application
```bash ```bash
OTEL_RESOURCE_ATTRIBUTES=service.name=<app_name> \ OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>" \ OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token={{SIGNOZ_INGESTION_KEY}}" \
OTEL_EXPORTER_OTLP_ENDPOINT=https://ingest.{region}.signoz.cloud:443 \ OTEL_EXPORTER_OTLP_ENDPOINT=https://ingest.{{REGION}}.signoz.cloud:443 \
java -javaagent:<path>/opentelemetry-javaagent.jar -jar <my-app>.jar java -javaagent:<path>/opentelemetry-javaagent.jar -jar {{MYAPP}}.jar
``` ```
- `<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.
- `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
--- ---
@ -64,11 +52,10 @@ wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releas
Step 2. Run your application Step 2. Run your application
```bash ```bash
java -javaagent:<path>/opentelemetry-javaagent.jar -jar <myapp>.jar java -javaagent:<path>/opentelemetry-javaagent.jar -jar {{MYAPP}}.jar
``` ```
- `<myapp>` is the name of your application 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 Step 2. Run your application
```bash ```bash
java -javaagent:<path>/opentelemetry-javaagent.jar -jar <myapp>.jar java -javaagent:<path>/opentelemetry-javaagent.jar -jar {{MYAPP}}.jar
``` ```
- `<myapp>` is the name of your application 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. Step 3. Make sure to dockerise your application along with OpenTelemetry instrumentation.

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

@ -36,24 +36,13 @@ Update `JAVA_OPTS` environment variable with configurations required to send dat
```bash ```bash
JAVA_OPTS="-javaagent:/<path>/opentelemetry-javaagent.jar JAVA_OPTS="-javaagent:/<path>/opentelemetry-javaagent.jar
-Dotel.exporter.otlp.endpoint=https://ingest.{region}.signoz.cloud:443 -Dotel.exporter.otlp.endpoint=https://ingest.{{REGION}}.signoz.cloud:443
-Dotel.exporter.otlp.headers="signoz-access-token=<SIGNOZ_INGESTION_KEY>" -Dotel.exporter.otlp.headers="signoz-access-token={{SIGNOZ_INGESTION_KEY}}"
-Dotel.resource.attributes="service.name=<app_name>"" -Dotel.resource.attributes="service.name={{MYAPP}}""
``` ```
You need to replace the following things based on your environment: You need to replace the following things based on your environment:
- `<path>` - Update it to the path of your downloaded Java JAR agent. - `<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 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. Update `JAVA_OPTS` environment variable with configurations required to send data to SigNoz cloud in your configuration file.
```bash ```bash
JAVA_OPTS="-javaagent:/path/opentelemetry-javaagent.jar" JAVA_OPTS="-javaagent:/<path>/opentelemetry-javaagent.jar"
``` ```
where, 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. Update `JAVA_OPTS` environment variable with configurations required to send data to SigNoz cloud in your configuration file.
```bash ```bash
JAVA_OPTS="-javaagent:/path/opentelemetry-javaagent.jar" JAVA_OPTS="-javaagent:/<path>/opentelemetry-javaagent.jar"
``` ```
where, 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. Step 4. Make sure to dockerise your application along with OpenTelemetry instrumentation.

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

@ -27,22 +27,12 @@ wget https://github.com/open-telemetry/opentelemetry-java-instrumentation/releas
Step 2. Run your application Step 2. Run your application
```bash ```bash
OTEL_RESOURCE_ATTRIBUTES=service.name=<myapp> \ OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>" \ OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token={{SIGNOZ_INGESTION_KEY}}" \
OTEL_EXPORTER_OTLP_ENDPOINT=https://ingest.{region}.signoz.cloud:443 \ OTEL_EXPORTER_OTLP_ENDPOINT=https://ingest.{{REGION}}.signoz.cloud:443 \
java -javaagent:<path>/opentelemetry-javaagent.jar -jar <myapp>.jar 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 - `<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 Step 2. Run your application
```bash ```bash
java -javaagent:<path>/opentelemetry-javaagent.jar -jar <myapp>.jar java -javaagent:<path>/opentelemetry-javaagent.jar -jar {{MYAPP}}.jar
``` ```
- `<myapp>` is the name of your application
- `<path>` - update it to the path of your downloaded Java JAR agent - `<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 Step 2. Run your application
```bash ```bash
java -javaagent:<path>/opentelemetry-javaagent.jar -jar <myapp>.jar java -javaagent:<path>/opentelemetry-javaagent.jar -jar {{MYAPP}}.jar
``` ```
- `<myapp>` is the name of your application
- `<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. Step 3. Make sure to dockerise your application along with OpenTelemetry instrumentation.

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

@ -31,22 +31,12 @@ If you run your `.war` package by putting in `webapps` folder, just add `setenv.
```bash ```bash
export CATALINA_OPTS="$CATALINA_OPTS -javaagent:/<path>/opentelemetry-javaagent.jar" 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_HEADERS="signoz-access-token={{SIGNOZ_INGESTION_KEY}}"
export OTEL_EXPORTER_OTLP_ENDPOINT=https://ingest.{region}.signoz.cloud:443 export OTEL_EXPORTER_OTLP_ENDPOINT=https://ingest.{{REGION}}.signoz.cloud:443
export OTEL_RESOURCE_ATTRIBUTES=service.name=<app_name> 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. - `<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
--- ---

29
frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.tsx
View File

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

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

@ -28,7 +28,7 @@ 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`. This file will have your SigNoz cloud endpoint and service name configued as values of `url` and `SERVICE_NAME` respectively.
```js ```js
// tracing.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 // https://github.com/open-telemetry/opentelemetry-specification/blob/main/specification/protocol/exporter.md#specifying-headers-via-environment-variables
const exporterOptions = { 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); const traceExporter = new OTLPTraceExporter(exporterOptions);
@ -52,7 +52,7 @@ const sdk = new opentelemetry.NodeSDK({
traceExporter, traceExporter,
instrumentations: [getNodeAutoInstrumentations()], instrumentations: [getNodeAutoInstrumentations()],
resource: new Resource({ 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 Step 3. Run the application
Make sure you set the `OTEL_EXPORTER_OTLP_HEADERS` env as follows Make sure you set the `OTEL_EXPORTER_OTLP_HEADERS` env as follows
```bash ```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** #### **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 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 ```js
// tracing.js // tracing.js
@ -127,7 +116,7 @@ const sdk = new opentelemetry.NodeSDK({
traceExporter, traceExporter,
instrumentations: [getNodeAutoInstrumentations()], instrumentations: [getNodeAutoInstrumentations()],
resource: new Resource({ 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 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 ```js
// tracing.js // tracing.js
@ -188,7 +177,7 @@ const sdk = new opentelemetry.NodeSDK({
traceExporter, traceExporter,
instrumentations: [getNodeAutoInstrumentations()], instrumentations: [getNodeAutoInstrumentations()],
resource: new Resource({ resource: new Resource({
[SemanticResourceAttributes.SERVICE_NAME]: 'node_app' [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}'
}) })
}); });

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

@ -26,7 +26,7 @@ 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`. This file will have your SigNoz cloud endpoint and service name configued as values of `url` and `SERVICE_NAME` respectively.
```js ```js
// tracing.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 // https://github.com/open-telemetry/opentelemetry-specification/blob/main/specification/protocol/exporter.md#specifying-headers-via-environment-variables
const exporterOptions = { 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); const traceExporter = new OTLPTraceExporter(exporterOptions);
@ -50,7 +50,7 @@ const sdk = new opentelemetry.NodeSDK({
traceExporter, traceExporter,
instrumentations: [getNodeAutoInstrumentations()], instrumentations: [getNodeAutoInstrumentations()],
resource: new Resource({ 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 Step 3. Run the application
Make sure you set the `OTEL_EXPORTER_OTLP_HEADERS` env as follows Make sure you set the `OTEL_EXPORTER_OTLP_HEADERS` env as follows
```bash ```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** #### **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 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 ```js
// tracing.js // tracing.js
@ -125,7 +115,7 @@ const sdk = new opentelemetry.NodeSDK({
traceExporter, traceExporter,
instrumentations: [getNodeAutoInstrumentations()], instrumentations: [getNodeAutoInstrumentations()],
resource: new Resource({ 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 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 ```js
// tracing.js // tracing.js
@ -188,7 +178,7 @@ const sdk = new opentelemetry.NodeSDK({
traceExporter, traceExporter,
instrumentations: [getNodeAutoInstrumentations()], instrumentations: [getNodeAutoInstrumentations()],
resource: new Resource({ resource: new Resource({
[SemanticResourceAttributes.SERVICE_NAME]: 'node_app' [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}'
}) })
}); });

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

@ -28,7 +28,7 @@ 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`. This file will have your SigNoz cloud endpoint and service name configued as values of `url` and `SERVICE_NAME` respectively.
```js ```js
'use strict' 'use strict'
@ -40,7 +40,7 @@ const {Resource} = require('@opentelemetry/resources');
const {SemanticResourceAttributes} = require('@opentelemetry/semantic-conventions'); const {SemanticResourceAttributes} = require('@opentelemetry/semantic-conventions');
const exporterOptions = { 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); const traceExporter = new OTLPTraceExporter(exporterOptions);
@ -48,7 +48,7 @@ const sdk = new opentelemetry.NodeSDK({
traceExporter, traceExporter,
instrumentations: [getNodeAutoInstrumentations()], instrumentations: [getNodeAutoInstrumentations()],
resource: new Resource({ resource: new Resource({
[SemanticResourceAttributes.SERVICE_NAME]: 'sampleNestjsApplication' [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}'
}) })
}); });
@ -67,23 +67,12 @@ const sdk = new opentelemetry.NodeSDK({
module.exports = sdk 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)` Step 3. Import the tracer module where your app starts `(Ex —> main.ts)`
```jsx ```jsx
const tracer = require('./tracer') 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: 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 Step 5. Run the application
```bash ```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. 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** #### **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 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 ```js
'use strict' 'use strict'
@ -154,7 +141,7 @@ const sdk = new opentelemetry.NodeSDK({
traceExporter, traceExporter,
instrumentations: [getNodeAutoInstrumentations()], instrumentations: [getNodeAutoInstrumentations()],
resource: new Resource({ 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 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 ```js
'use strict' 'use strict'
@ -242,7 +229,7 @@ const sdk = new opentelemetry.NodeSDK({
traceExporter, traceExporter,
instrumentations: [getNodeAutoInstrumentations()], instrumentations: [getNodeAutoInstrumentations()],
resource: new Resource({ resource: new Resource({
[SemanticResourceAttributes.SERVICE_NAME]: 'sampleNestjsApplication' [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}'
}) })
}); });

29
frontend/src/container/OnboardingContainer/APM/Python/Python.tsx
View File

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

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

@ -50,24 +50,13 @@ Please make sure that you have installed all the dependencies of your applicatio
Step 4. Run your application Step 4. Run your application
```bash ```bash
OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \ OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
OTEL_EXPORTER_OTLP_ENDPOINT="https://ingest.{region}.signoz.cloud:443" \ OTEL_EXPORTER_OTLP_ENDPOINT="https://ingest.{{REGION}}.signoz.cloud:443" \
OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>" \ OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token={{SIGNOZ_INGESTION_KEY}}" \
OTEL_EXPORTER_OTLP_PROTOCOL=grpc \ OTEL_EXPORTER_OTLP_PROTOCOL=grpc \
opentelemetry-instrument <your_run_command> 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` - <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: Note:
Don’t run app in reloader/hot-reload mode as it breaks instrumentation. For example, you can disable the auto reload with `--noreload`. 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 Step 4. To run your application and send data to collector in same VM
```bash ```bash
OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \ OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
OTEL_EXPORTER_OTLP_ENDPOINT="http://localhost:4317" \ 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` - <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. - `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: Step 4. Run your application:
```bash ```bash
OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \ OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
OTEL_EXPORTER_OTLP_ENDPOINT="http://localhost:4317" \ 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` <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. `http://localhost:4317` for gRPC exporter and `http://localhost:4318` for HTTP exporter.

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

@ -40,24 +40,14 @@ Please make sure that you have installed all the dependencies of your applicatio
Step 4. Run your application Step 4. Run your application
```bash ```bash
OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \ OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
OTEL_EXPORTER_OTLP_ENDPOINT="https://ingest.{region}.signoz.cloud:443" \ OTEL_EXPORTER_OTLP_ENDPOINT="https://ingest.{{REGION}}.signoz.cloud:443" \
OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>" \ OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token={{SIGNOZ_INGESTION_KEY}}" \
OTEL_EXPORTER_OTLP_PROTOCOL=grpc \ OTEL_EXPORTER_OTLP_PROTOCOL=grpc \
opentelemetry-instrument <your_run_command> 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` - *<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: Note:
Don’t run app in reloader/hot-reload mode as it breaks instrumentation. For example, you can disable the auto reload with `--noreload`. 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 Step 4. To run your application and send data to collector in same VM
```bash ```bash
OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \ OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
OTEL_EXPORTER_OTLP_ENDPOINT="http://localhost:4317" \ 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: Note:
Don’t run app in reloader/hot-reload mode as it breaks instrumentation. 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` *<your_run_command>* can be `python3 app.py` or `flask run`
`http://localhost:4317` for gRPC exporter and `http://localhost:4318` for HTTP exporter. `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 Step 4. Run your application
```bash ```bash
OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \ OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
OTEL_EXPORTER_OTLP_ENDPOINT="http://localhost:4317" \ 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: Note:
Don’t run app in reloader/hot-reload mode as it breaks instrumentation. 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` *<your_run_command>* can be `python3 app.py` or `flask run`
`http://localhost:4317` for gRPC exporter and `http://localhost:4318` for HTTP exporter. `http://localhost:4317` for gRPC exporter and `http://localhost:4318` for HTTP exporter.

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

@ -40,24 +40,13 @@ Please make sure that you have installed all the dependencies of your applicatio
Step 4. Run your application Step 4. Run your application
```bash ```bash
OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \ OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
OTEL_EXPORTER_OTLP_ENDPOINT="https://ingest.{region}.signoz.cloud:443" \ OTEL_EXPORTER_OTLP_ENDPOINT="https://ingest.{{REGION}}.signoz.cloud:443" \
OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>" \ OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token={{SIGNOZ_INGESTION_KEY}}" \
OTEL_EXPORTER_OTLP_PROTOCOL=grpc \ OTEL_EXPORTER_OTLP_PROTOCOL=grpc \
opentelemetry-instrument <your_run_command> 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` - *<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: Note:
Don’t run app in reloader/hot-reload mode as it breaks instrumentation. For example, you can disable the auto reload with `--noreload`. 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 Step 4. To run your application and send data to collector in same VM
```bash ```bash
OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \ OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
OTEL_EXPORTER_OTLP_ENDPOINT="http://localhost:4317" \ 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` *<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. `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 Step 4. Run your application
```bash ```bash
OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \ OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
OTEL_EXPORTER_OTLP_ENDPOINT="http://localhost:4317" \ 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` *<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. `http://localhost:4317` for gRPC exporter and `http://localhost:4318` for HTTP exporter.

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

@ -40,24 +40,13 @@ Please make sure that you have installed all the dependencies of your applicatio
Step 4. Run your application Step 4. Run your application
```bash ```bash
OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \ OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
OTEL_EXPORTER_OTLP_ENDPOINT="https://ingest.{region}.signoz.cloud:443" \ OTEL_EXPORTER_OTLP_ENDPOINT="https://ingest.{{REGION}}.signoz.cloud:443" \
OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>" \ OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token={{SIGNOZ_INGESTION_KEY}}" \
OTEL_EXPORTER_OTLP_PROTOCOL=grpc \ OTEL_EXPORTER_OTLP_PROTOCOL=grpc \
opentelemetry-instrument <your_run_command> 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` - *<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: Note:
Don’t run app in reloader/hot-reload mode as it breaks instrumentation. For example, you can disable the auto reload with `--noreload`. 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 Step 4. To run your application and send data to collector in same VM
```bash ```bash
OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \ OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
OTEL_EXPORTER_OTLP_ENDPOINT="http://localhost:4317" \ 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: 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. 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` *<your_run_command>* can be `python3 app.py` or `flask run`
`http://localhost:4317` for gRPC exporter and `http://localhost:4318` for HTTP exporter. `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 Step 4. Run your application
```bash ```bash
OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \ OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
OTEL_EXPORTER_OTLP_ENDPOINT="http://localhost:4317" \ 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: 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. 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` *<your_run_command>* can be `python3 app.py` or `flask run`
`http://localhost:4317` for gRPC exporter and `http://localhost:4318` for HTTP exporter. `http://localhost:4317` for gRPC exporter and `http://localhost:4318` for HTTP exporter.

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

@ -31,23 +31,12 @@ opentelemetry-bootstrap --action=install
Step 3. Run your application Step 3. Run your application
```bash ```bash
OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \ OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
OTEL_EXPORTER_OTLP_ENDPOINT="https://ingest.{region}.signoz.cloud:443" \ OTEL_EXPORTER_OTLP_ENDPOINT="https://ingest.{{REGION}}.signoz.cloud:443" \
OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token=<SIGNOZ_INGESTION_KEY>" \ OTEL_EXPORTER_OTLP_HEADERS="signoz-access-token={{SIGNOZ_INGESTION_KEY}}" \
opentelemetry-instrument <your_run_command> 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` - *`<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: Note:
Don’t run app in reloader/hot-reload mode as it breaks instrumentation. 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 Step 3. To run your application and send data to collector in same VM
```bash ```bash
OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \ OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
OTEL_EXPORTER_OTLP_ENDPOINT="http://localhost:4317" \ 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, where,
- *`<service_name>`* is the name of the service you want
- *`<your_run_command>`* can be `python3 app.py` or `flask run` - *`<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. `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. 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 Step 3. Run your application
```bash ```bash
OTEL_RESOURCE_ATTRIBUTES=service.name=<service_name> \ OTEL_RESOURCE_ATTRIBUTES=service.name={{MYAPP}} \
OTEL_EXPORTER_OTLP_ENDPOINT="http://localhost:4317" \ 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, where,
- *`<service_name>`* is the name of the service you want
- *`<your_run_command>`* can be `python3 app.py` or `flask run` - *`<your_run_command>`* can be `python3 app.py` or `flask run`

1
frontend/src/container/TopNav/Breadcrumbs/index.tsx
View File

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

1
frontend/src/container/TopNav/DateTimeSelection/config.ts
View File

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

7
frontend/src/pages/Settings/config.ts
View File

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

8
frontend/src/pages/SignUp/SignUp.tsx
View File

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

18
frontend/src/types/api/settings/ingestion.ts Normal file
View File

@ -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;
}

1
frontend/src/utils/permission/index.ts
View File

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