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

)

* feat: hoc to support markdown content with variable interpolation

* feat: add ingestion settings page

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

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

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

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

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

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

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

frontend/public/locales/en/routes.json

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

frontend/public/locales/en/titles.json

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

frontend/src/AppRoutes/pageComponents.ts

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

frontend/src/AppRoutes/routes.ts

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

frontend/src/api/settings/getIngestionData.ts

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

frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx

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

frontend/src/constants/routes.ts

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

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

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