diff --git a/frontend/public/Logos/fluent-bit.png b/frontend/public/Logos/fluent-bit.png new file mode 100644 index 0000000000..55c4e4ae4a Binary files /dev/null and b/frontend/public/Logos/fluent-bit.png differ diff --git a/frontend/public/Logos/fluentd.png b/frontend/public/Logos/fluentd.png new file mode 100644 index 0000000000..e87fc62999 Binary files /dev/null and b/frontend/public/Logos/fluentd.png differ diff --git a/frontend/public/Logos/logstash.svg b/frontend/public/Logos/logstash.svg new file mode 100644 index 0000000000..cf718cd088 --- /dev/null +++ b/frontend/public/Logos/logstash.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/AppRoutes/index.tsx b/frontend/src/AppRoutes/index.tsx index deff831a36..2b55907c17 100644 --- a/frontend/src/AppRoutes/index.tsx +++ b/frontend/src/AppRoutes/index.tsx @@ -7,6 +7,7 @@ import { FeatureKeys } from 'constants/features'; import { LOCALSTORAGE } from 'constants/localStorage'; import ROUTES from 'constants/routes'; import AppLayout from 'container/AppLayout'; +import useAnalytics from 'hooks/analytics/useAnalytics'; import { useThemeConfig } from 'hooks/useDarkMode'; import useGetFeatureFlag from 'hooks/useGetFeatureFlag'; import useLicense, { LICENSE_PLAN_KEY } from 'hooks/useLicense'; @@ -25,7 +26,6 @@ import AppActions from 'types/actions'; import { UPDATE_FEATURE_FLAG_RESPONSE } from 'types/actions/app'; import AppReducer, { User } from 'types/reducer/app'; import { extractDomain, isCloudUser, isEECloudUser } from 'utils/app'; -import { trackPageView } from 'utils/segmentAnalytics'; import PrivateRoute from './Private'; import defaultRoutes, { AppRoutes, SUPPORT_ROUTE } from './routes'; @@ -41,6 +41,8 @@ function App(): JSX.Element { const dispatch = useDispatch>(); + const { trackPageView } = useAnalytics(); + const { hostname, pathname } = window.location; const isCloudUserVal = isCloudUser(); @@ -156,6 +158,7 @@ function App(): JSX.Element { useEffect(() => { trackPageView(pathname); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [pathname]); return ( diff --git a/frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.scss b/frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.scss index 78bfa54dad..2d2166ff52 100644 --- a/frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.scss +++ b/frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.scss @@ -1,6 +1,8 @@ .code-snippet-container { position: relative; - background-color: rgb(43, 43, 43); + // background-color: rgb(43, 43, 43); + background-color: #111a2c; + border-color: #111a2c; } .code-copy-btn { diff --git a/frontend/src/container/AppLayout/styles.ts b/frontend/src/container/AppLayout/styles.ts index d3a030bf1f..8bed914d66 100644 --- a/frontend/src/container/AppLayout/styles.ts +++ b/frontend/src/container/AppLayout/styles.ts @@ -5,7 +5,7 @@ export const Layout = styled(LayoutComponent)` &&& { display: flex; position: relative; - min-height: calc(100vh - 4rem); + min-height: calc(100vh - 8rem); overflow: hidden; height: 100%; } diff --git a/frontend/src/container/BillingContainer/BillingContainer.tsx b/frontend/src/container/BillingContainer/BillingContainer.tsx index 31bbf3d163..7c1bfe374f 100644 --- a/frontend/src/container/BillingContainer/BillingContainer.tsx +++ b/frontend/src/container/BillingContainer/BillingContainer.tsx @@ -9,6 +9,7 @@ import getUsage from 'api/billing/getUsage'; import manageCreditCardApi from 'api/billing/manage'; import { SOMETHING_WENT_WRONG } from 'constants/api'; import { REACT_QUERY_KEY } from 'constants/reactQueryKeys'; +import useAnalytics from 'hooks/analytics/useAnalytics'; import useAxiosError from 'hooks/useAxiosError'; import useLicense from 'hooks/useLicense'; import { useNotifications } from 'hooks/useNotifications'; @@ -109,9 +110,11 @@ export default function BillingContainer(): JSX.Element { const [data, setData] = useState([]); const billCurrency = '$'; + const { trackEvent } = useAnalytics(); + const { isFetching, data: licensesData, error: licenseError } = useLicense(); - const { user } = useSelector((state) => state.app); + const { user, org } = useSelector((state) => state.app); const { notifications } = useNotifications(); const handleError = useAxiosError(); @@ -301,18 +304,29 @@ export default function BillingContainer(): JSX.Element { const handleBilling = useCallback(async () => { if (isFreeTrial && !licensesData?.payload?.trialConvertedToSubscription) { + trackEvent('Billing : Upgrade Plan', { + user, + org, + }); + updateCreditCard({ licenseKey: activeLicense?.key || '', successURL: window.location.href, cancelURL: window.location.href, }); } else { + trackEvent('Billing : Manage Billing', { + user, + org, + }); + manageCreditCard({ licenseKey: activeLicense?.key || '', successURL: window.location.href, cancelURL: window.location.href, }); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [ activeLicense?.key, isFreeTrial, @@ -432,7 +446,12 @@ export default function BillingContainer(): JSX.Element { - diff --git a/frontend/src/container/Header/index.tsx b/frontend/src/container/Header/index.tsx index c7eb709452..ff4c560c67 100644 --- a/frontend/src/container/Header/index.tsx +++ b/frontend/src/container/Header/index.tsx @@ -135,14 +135,13 @@ function HeaderContainer(): JSX.Element { <> {showTrialExpiryBanner && (
- You are in free trial period. Your free trial will end on{' '} + You are in free trial period. Your free trial will end on {getFormattedDate(licenseData?.payload?.trialEnd || Date.now())}. {role === 'ADMIN' ? ( - {' '} - Please{' '} + Please diff --git a/frontend/src/container/OnboardingContainer/APM/APM.styles.scss b/frontend/src/container/OnboardingContainer/APM/APM.styles.scss deleted file mode 100644 index 49d2380a07..0000000000 --- a/frontend/src/container/OnboardingContainer/APM/APM.styles.scss +++ /dev/null @@ -1,144 +0,0 @@ -.apm-module-container { - padding: 48px 0; - - .header { - h1 { - font-size: 24px; - font-weight: 500; - } - - h4 { - font-size: 14px; - font-weight: 300; - } - } -} - -.supported-languages-container { - display: flex; - gap: 24px; -} - -.supported-language { - display: flex; - justify-content: center; - align-items: center; - width: 300px; - height: 120px; - background: #1d1d1d; - border: 1px solid #424242; - border-radius: 3px; - color: #424242; - cursor: pointer; - - &.selected { - background-color: #111a2c; - border: 0.5px solid #3c89e8; - } -} - -.supported-langauge-img { - height: 48px; -} - -.selected-langauage-setup-instructions { - padding: 24px 0; -} - -div[class*='-setup-instructions-container'] { - .header { - display: flex; - align-items: center; - - margin: 16px 0; - - img { - height: 40px; - } - - h1 { - font-size: 18px; - display: flex; - align-items: center; - color: #e5e7eb; - gap: 16px; - margin: 12px; - } - } -} - -.label { - font-size: 14px; - margin-bottom: 8px; - font-weight: 300; -} - -pre { - background-color: #292d3e; - padding: 8px; - overflow: auto; - border-radius: 3px; - - code { - overflow: auto; - text-wrap: wrap; - } -} - -.content-container { - padding: 24px; - margin: 16px 0; - background: rgba(29, 29, 29, 1); - line-height: 20px; -} - -.detailed-docs-link { - display: flex; - margin: 12px; - font-size: 12px; - - a { - padding-left: 4px; - } -} - -.form-container { - display: flex; - align-items: flex-start; - width: 100%; - gap: 16px; - - & .ant-form-item { - margin-bottom: 0px; - } -} - -$lightModeFontColor: rgb(29, 29, 29); - -.lightMode { - .apm-module-container { - .header { - color: $lightModeFontColor; - } - - div[class*='-setup-instructions-container'] { - .header { - h1 { - color: $lightModeFontColor; - } - } - - .framework-selector { - .label { - color: $lightModeFontColor; - } - } - - .service-name-container { - .label { - color: $lightModeFontColor; - } - } - } - } -} diff --git a/frontend/src/container/OnboardingContainer/APM/APM.tsx b/frontend/src/container/OnboardingContainer/APM/APM.tsx deleted file mode 100644 index ef81752345..0000000000 --- a/frontend/src/container/OnboardingContainer/APM/APM.tsx +++ /dev/null @@ -1,147 +0,0 @@ -/* eslint-disable jsx-a11y/click-events-have-key-events */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -import './APM.styles.scss'; - -import getIngestionData from 'api/settings/getIngestionData'; -import cx from 'classnames'; -import { useEffect, useState } from 'react'; -import { useQuery } from 'react-query'; -import { trackEvent } from 'utils/segmentAnalytics'; - -import GoLang from './GoLang/GoLang'; -import Java from './Java/Java'; -import Javascript from './Javascript/Javascript'; -import Python from './Python/Python'; -import RoR from './RubyOnRails/ROR'; - -interface IngestionInfoProps { - SIGNOZ_INGESTION_KEY?: string; - REGION?: string; -} -export interface LangProps { - ingestionInfo: IngestionInfoProps; - activeStep: number; -} - -const supportedLanguages = [ - { - name: 'java', - imgURL: `Logos/java.png`, - }, - { - name: 'python', - imgURL: `Logos/java.png`, - }, - { - name: 'javascript', - imgURL: `Logos/java.png`, - }, - { - name: 'go', - imgURL: `Logos/java.png`, - }, - { - name: 'rails', - imgURL: `Logos/rails.png`, - }, -]; - -export default function APM({ - activeStep, -}: { - activeStep: number; -}): JSX.Element { - const [selectedLanguage, setSelectedLanguage] = useState('java'); - - const [ingestionInfo, setIngestionInfo] = useState({}); - - const { status, data: ingestionData } = useQuery({ - queryFn: () => getIngestionData(), - }); - - useEffect(() => { - if ( - status === 'success' && - ingestionData.payload && - Array.isArray(ingestionData.payload) - ) { - const payload = ingestionData.payload[0] || { - ingestionKey: '', - dataRegion: '', - }; - - setIngestionInfo({ - SIGNOZ_INGESTION_KEY: payload?.ingestionKey, - REGION: payload?.dataRegion, - }); - } - }, [status, ingestionData?.payload]); - - useEffect(() => { - // on language select - trackEvent('Onboarding: APM', { - selectedLanguage, - activeStep, - }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [selectedLanguage]); - - const renderSelectedLanguageSetupInstructions = (): JSX.Element => { - switch (selectedLanguage) { - case 'java': - return ; - case 'python': - return ; - case 'javascript': - return ; - case 'go': - return ; - case 'rails': - return ; - default: - return <> ; - } - }; - - return ( -
- {activeStep === 2 && ( - <> -
-

- Get Started to instrument your applications and sending data to SigNoz -

-

Select the data source

-
- -
- {supportedLanguages.map((supportedLanguage) => ( -
setSelectedLanguage(supportedLanguage.name)} - > - -
- ))} -
- - )} - - {selectedLanguage && ( -
- {renderSelectedLanguageSetupInstructions()} -
- )} -
- ); -} diff --git a/frontend/src/container/OnboardingContainer/APM/GoLang/GoLang.styles.scss b/frontend/src/container/OnboardingContainer/APM/GoLang/GoLang.styles.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/frontend/src/container/OnboardingContainer/APM/GoLang/GoLang.tsx b/frontend/src/container/OnboardingContainer/APM/GoLang/GoLang.tsx deleted file mode 100644 index f65a4f41fd..0000000000 --- a/frontend/src/container/OnboardingContainer/APM/GoLang/GoLang.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import './GoLang.styles.scss'; - -import { Form, Input } from 'antd'; -import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer'; -import Header from 'container/OnboardingContainer/common/Header/Header'; - -import { LangProps } from '../APM'; -import ConnectionStatus from '../common/ConnectionStatus/ConnectionStatus'; -import GoLangDocs from './goLang.md'; - -export default function GoLang({ - ingestionInfo, - activeStep, -}: LangProps): JSX.Element { - const [form] = Form.useForm(); - const serviceName = Form.useWatch('Service Name', form); - - const variables = { - MYAPP: serviceName || '', - SIGNOZ_INGESTION_KEY: - ingestionInfo.SIGNOZ_INGESTION_KEY || '', - REGION: ingestionInfo.REGION || 'region', - }; - - return ( - <> - {activeStep === 2 && ( -
-
- -
-
-
Service Name
- -
- - - -
-
-
- -
- -
-
- )} - {activeStep === 3 && ( - - )} - - ); -} diff --git a/frontend/src/container/OnboardingContainer/APM/Java/Java.styles.scss b/frontend/src/container/OnboardingContainer/APM/Java/Java.styles.scss deleted file mode 100644 index 5a6fc3baaf..0000000000 --- a/frontend/src/container/OnboardingContainer/APM/Java/Java.styles.scss +++ /dev/null @@ -1,10 +0,0 @@ -.form-container { - display: flex; - align-items: flex-start; - width: 100%; - gap: 16px; - - & .ant-form-item { - margin-bottom: 0px; - } -} diff --git a/frontend/src/container/OnboardingContainer/APM/Java/Java.tsx b/frontend/src/container/OnboardingContainer/APM/Java/Java.tsx deleted file mode 100644 index ed256410b8..0000000000 --- a/frontend/src/container/OnboardingContainer/APM/Java/Java.tsx +++ /dev/null @@ -1,146 +0,0 @@ -import './Java.styles.scss'; - -import { Form, Input, Select } from 'antd'; -import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer'; -import Header from 'container/OnboardingContainer/common/Header/Header'; -import { useEffect, useState } from 'react'; -import { trackEvent } from 'utils/segmentAnalytics'; -import { popupContainer } from 'utils/selectPopupContainer'; - -import { LangProps } from '../APM'; -import ConnectionStatus from '../common/ConnectionStatus/ConnectionStatus'; -import JavaDocs from './md-docs/java.md'; -import JbossDocs from './md-docs/jboss.md'; -import SprintBootDocs from './md-docs/spring_boot.md'; -import TomcatDocs from './md-docs/tomcat.md'; - -enum FrameworksMap { - tomcat = 'Tomcat', - spring_boot = 'Spring Boot', - jboss = 'JBoss', - other = 'Others', -} - -export default function Java({ - ingestionInfo, - activeStep, -}: LangProps): JSX.Element { - const [selectedFrameWork, setSelectedFrameWork] = useState('spring_boot'); - const [selectedFrameWorkDocs, setSelectedFrameWorkDocs] = useState( - SprintBootDocs, - ); - - const [form] = Form.useForm(); - const serviceName = Form.useWatch('Service Name', form); - - useEffect(() => { - // on language select - trackEvent('Onboarding: APM : Java', { - selectedFrameWork, - }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [selectedFrameWork]); - - const handleFrameworkChange = (selectedFrameWork: string): void => { - setSelectedFrameWork(selectedFrameWork); - - switch (selectedFrameWork) { - case 'tomcat': - setSelectedFrameWorkDocs(TomcatDocs); - break; - case 'spring_boot': - setSelectedFrameWorkDocs(SprintBootDocs); - break; - case 'jboss': - setSelectedFrameWorkDocs(JbossDocs); - break; - default: - setSelectedFrameWorkDocs(JavaDocs); - break; - } - }; - - const variables = { - MYAPP: serviceName || '', - SIGNOZ_INGESTION_KEY: - ingestionInfo.SIGNOZ_INGESTION_KEY || '', - REGION: ingestionInfo.REGION || 'region', - }; - - return ( - <> - {activeStep === 2 && ( -
-
- -
-
-
Select Framework
- - - - -
-
- -
- -
-
- )} - {activeStep === 3 && ( - - )} - - ); -} diff --git a/frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.styles.scss b/frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.styles.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.tsx b/frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.tsx deleted file mode 100644 index 466fd72db7..0000000000 --- a/frontend/src/container/OnboardingContainer/APM/Javascript/Javascript.tsx +++ /dev/null @@ -1,143 +0,0 @@ -import './Javascript.styles.scss'; - -import { Form, Input, Select } from 'antd'; -import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer'; -import Header from 'container/OnboardingContainer/common/Header/Header'; -import { useEffect, useState } from 'react'; -import { trackEvent } from 'utils/segmentAnalytics'; -import { popupContainer } from 'utils/selectPopupContainer'; - -import { LangProps } from '../APM'; -import ConnectionStatus from '../common/ConnectionStatus/ConnectionStatus'; -import ExpressDocs from './md-docs/express.md'; -import JavascriptDocs from './md-docs/javascript.md'; -import NestJsDocs from './md-docs/nestjs.md'; - -const frameworksMap = { - express: 'Express', - nestjs: 'Nest JS', - nodejs: 'Nodejs', -}; - -export default function Javascript({ - ingestionInfo, - activeStep, -}: LangProps): JSX.Element { - const [selectedFrameWork, setSelectedFrameWork] = useState('express'); - const [selectedFrameWorkDocs, setSelectedFrameWorkDocs] = useState( - ExpressDocs, - ); - const [form] = Form.useForm(); - const serviceName = Form.useWatch('Service Name', form); - - const variables = { - MYAPP: serviceName || '', - SIGNOZ_INGESTION_KEY: - ingestionInfo.SIGNOZ_INGESTION_KEY || '', - REGION: ingestionInfo.REGION || 'region', - }; - - useEffect(() => { - // on language select - trackEvent('Onboarding: APM : Javascript', { - selectedFrameWork, - }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [selectedFrameWork]); - - const handleFrameworkChange = (selectedFrameWork: string): void => { - setSelectedFrameWork(selectedFrameWork); - - switch (selectedFrameWork) { - case 'nodejs': - setSelectedFrameWorkDocs(JavascriptDocs); - break; - case 'nestjs': - setSelectedFrameWorkDocs(NestJsDocs); - break; - default: - setSelectedFrameWorkDocs(ExpressDocs); - break; - } - }; - - return ( - <> - {activeStep === 2 && ( -
-
- -
-
-
Select Framework
- - - - -
-
- -
- -
-
- )} - {activeStep === 3 && ( - - )} - - ); -} diff --git a/frontend/src/container/OnboardingContainer/APM/Python/Python.styles.scss b/frontend/src/container/OnboardingContainer/APM/Python/Python.styles.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/frontend/src/container/OnboardingContainer/APM/Python/Python.tsx b/frontend/src/container/OnboardingContainer/APM/Python/Python.tsx deleted file mode 100644 index 9f70406e68..0000000000 --- a/frontend/src/container/OnboardingContainer/APM/Python/Python.tsx +++ /dev/null @@ -1,152 +0,0 @@ -import './Python.styles.scss'; - -import { Form, Input, Select } from 'antd'; -import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer'; -import Header from 'container/OnboardingContainer/common/Header/Header'; -import { useEffect, useState } from 'react'; -import { trackEvent } from 'utils/segmentAnalytics'; -import { popupContainer } from 'utils/selectPopupContainer'; - -import { LangProps } from '../APM'; -import ConnectionStatus from '../common/ConnectionStatus/ConnectionStatus'; -import DjangoDocs from './md-docs/django.md'; -import FalconDocs from './md-docs/falcon.md'; -import FastAPIDocs from './md-docs/fastAPI.md'; -import FlaskDocs from './md-docs/flask.md'; -import PythonDocs from './md-docs/python.md'; - -const frameworksMap = { - django: 'Django', - fastAPI: 'Fast API', - flask: 'Flask', - falcon: 'Falcon', - other: 'Others', -}; - -export default function Python({ - ingestionInfo, - activeStep, -}: LangProps): JSX.Element { - const [selectedFrameWork, setSelectedFrameWork] = useState('django'); - const [selectedFrameWorkDocs, setSelectedFrameWorkDocs] = useState(DjangoDocs); - const [form] = Form.useForm(); - const serviceName = Form.useWatch('Service Name', form); - - const variables = { - MYAPP: serviceName || '', - SIGNOZ_INGESTION_KEY: - ingestionInfo.SIGNOZ_INGESTION_KEY || '', - REGION: ingestionInfo.REGION || 'region', - }; - - useEffect(() => { - // on language select - trackEvent('Onboarding: APM : Python', { - selectedFrameWork, - }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [selectedFrameWork]); - - const handleFrameworkChange = (selectedFrameWork: string): void => { - setSelectedFrameWork(selectedFrameWork); - - switch (selectedFrameWork) { - case 'django': - setSelectedFrameWorkDocs(DjangoDocs); - break; - case 'fastAPI': - setSelectedFrameWorkDocs(FastAPIDocs); - break; - case 'flask': - setSelectedFrameWorkDocs(FlaskDocs); - break; - case 'falcon': - setSelectedFrameWorkDocs(FalconDocs); - break; - default: - setSelectedFrameWorkDocs(PythonDocs); - break; - } - }; - - return ( - <> - {activeStep === 2 && ( -
-
- -
-
-
Select Framework
- - - - -
-
- -
- -
-
- )} - {activeStep === 3 && ( - - )} - - ); -} diff --git a/frontend/src/container/OnboardingContainer/APM/RubyOnRails/ROR.styles.scss b/frontend/src/container/OnboardingContainer/APM/RubyOnRails/ROR.styles.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/frontend/src/container/OnboardingContainer/APM/RubyOnRails/ROR.tsx b/frontend/src/container/OnboardingContainer/APM/RubyOnRails/ROR.tsx deleted file mode 100644 index c19dbf34db..0000000000 --- a/frontend/src/container/OnboardingContainer/APM/RubyOnRails/ROR.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import './ROR.styles.scss'; - -import { Form, Input } from 'antd'; -import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer'; -import Header from 'container/OnboardingContainer/common/Header/Header'; - -import { LangProps } from '../APM'; -import ConnectionStatus from '../common/ConnectionStatus/ConnectionStatus'; -import RORDocs from './RubyOnRails.md'; - -export default function RoR({ - ingestionInfo, - activeStep, -}: LangProps): JSX.Element { - const [form] = Form.useForm(); - const serviceName = Form.useWatch('Service Name', form); - - const variables = { - MYAPP: serviceName || '', - SIGNOZ_INGESTION_KEY: - ingestionInfo.SIGNOZ_INGESTION_KEY || '', - REGION: ingestionInfo.REGION || 'region', - }; - - return ( - <> - {activeStep === 2 && ( -
-
- -
-
-
Service Name
- -
- - - -
-
-
- -
- -
-
- )} - {activeStep === 3 && ( - - )} - - ); -} diff --git a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.styles.scss b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.styles.scss deleted file mode 100644 index fbd2eb0bda..0000000000 --- a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.styles.scss +++ /dev/null @@ -1,45 +0,0 @@ -.infrastructure-monitoring-module-container { - padding: 48px 0; - - .module-header { - h1 { - font-size: 24px; - font-weight: 500; - } - - h4 { - font-size: 14px; - font-weight: 300; - } - } - - .content-container { - .heading { - .title { - a { - color: rgb(232, 112, 64); - } - } - } - - .subheading { - display: flex; - flex-direction: column; - gap: 12px; - margin-bottom: 16px; - - .recevier-types { - display: flex; - flex-direction: column; - } - } - } - - .header { - display: flex; - gap: 16px; - justify-content: flex-start; - align-items: center; - margin: 16px 0; - } -} diff --git a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.tsx b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.tsx deleted file mode 100644 index 998b6fa6e4..0000000000 --- a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/InfrastructureMonitoring.tsx +++ /dev/null @@ -1,154 +0,0 @@ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ -import './InfrastructureMonitoring.styles.scss'; - -import cx from 'classnames'; -import { Code, Pre } from 'components/MarkdownRenderer/MarkdownRenderer'; -import { useEffect, useState } from 'react'; -import ReactMarkdown from 'react-markdown'; -import { trackEvent } from 'utils/segmentAnalytics'; - -import Header from '../common/Header/Header'; -import hostMetricsMonitoring from './md-docs/hostMetricsMonitoring.md'; -import k8sInfraMonitoringDocs from './md-docs/kubernetesInfraMonitoring.md'; -import otherMetrics from './md-docs/otherMetrics.md'; - -export default function InfrastructureMonitoring({ - activeStep, -}: { - activeStep: number; -}): JSX.Element { - const [selectedInfraMetrics, setSelectedInfraMetrics] = useState('kubernetes'); - const [selectedInfraMetricsDocs, setSelectedInfraMetricsDocs] = useState( - k8sInfraMonitoringDocs, - ); - - useEffect(() => { - // on metrics Type select - trackEvent('Onboarding: APM : Java', { - selectedInfraMetrics, - }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [selectedInfraMetrics]); - - const supportedInfraMetrics = [ - { - name: 'Kubernetes Infra Metrics', - id: 'kubernetes', - imgURL: `Logos/kubernetes.svg`, - }, - { - name: 'HostMetrics', - id: 'hostMetrics', - imgURL: `Logos/software-window.svg`, - }, - { - name: 'Other Metrics', - id: 'otherMetrics', - imgURL: `Logos/cmd-terminal.svg`, - }, - ]; - - const handleMetricsTypeChange = (selectedMetricsType: string): void => { - setSelectedInfraMetrics(selectedMetricsType); - - switch (selectedMetricsType) { - case 'kubernetes': - setSelectedInfraMetricsDocs(k8sInfraMonitoringDocs); - break; - case 'hostMetrics': - setSelectedInfraMetricsDocs(hostMetricsMonitoring); - break; - case 'otherMetrics': - setSelectedInfraMetricsDocs(otherMetrics); - break; - default: - setSelectedInfraMetricsDocs(otherMetrics); - break; - } - }; - - const getHeaderBasedOnType = (): JSX.Element => { - switch (selectedInfraMetrics) { - case 'hostMetrics': - return ( -
- ); - - case 'otherMetrics': - return ( -
- ); - - default: - return ( -
- ); - } - }; - - return ( -
- {activeStep === 2 && ( - <> -
-

Select an Infra Metrics type

- {/*

Choose the logs that you want to receive on SigNoz

*/} -
- -
- {supportedInfraMetrics.map((logType) => ( -
handleMetricsTypeChange(logType.id)} - > - - -
{logType.name}
-
- ))} -
- - {getHeaderBasedOnType()} - -
- - {selectedInfraMetricsDocs} - -
- - )} -
- ); -} diff --git a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/md-docs/hostMetricsMonitoring.md b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/md-docs/hostMetricsMonitoring.md deleted file mode 100644 index fa483a3e70..0000000000 --- a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/md-docs/hostMetricsMonitoring.md +++ /dev/null @@ -1,10 +0,0 @@ -## Hostmetrics Monitoring -You can collect Hostmetrics from your VM and send it to SigNoz cloud using OpenTelemetry Collector. - -Steps to send hostmetrics to SigNoz Cloud: - -- Install OpenTelemetry Collector binary agent. Please find instructions [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/#setup-otel-collector-as-agent). - -- Import Hostmetrics Dashboard in SigNoz. Please find instructions [here](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/#hostmetrics-dashboard). - -Learn how to create dashboards and panels [here](https://signoz.io/docs/userguide/manage-dashboards-and-panels/). diff --git a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/md-docs/kubernetesInfraMonitoring.md b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/md-docs/kubernetesInfraMonitoring.md deleted file mode 100644 index c74ac6e5d0..0000000000 --- a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/md-docs/kubernetesInfraMonitoring.md +++ /dev/null @@ -1,9 +0,0 @@ -## Kubernetes Infra Metrics - -You can collect Kubernetes infra metrics from your k8s cluster and send it to SigNoz cloud using k8s-infra chart. - -Steps to send kubernetes infra metrics to SigNoz Cloud: - -- Install OpenTelemetry Collectors in your k8s infra. Please find instructions [here](https://signoz.io/docs/tutorial/kubernetes-infra-metrics/). - -- Plot metrics in SigNoz UI by following the instructions [here](https://signoz.io/docs/tutorial/kubernetes-infra-metrics/#plot-metrics-in-signoz-ui). \ No newline at end of file diff --git a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/md-docs/otherMetrics.md b/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/md-docs/otherMetrics.md deleted file mode 100644 index adabc59050..0000000000 --- a/frontend/src/container/OnboardingContainer/InfrastructureMonitoring/md-docs/otherMetrics.md +++ /dev/null @@ -1,195 +0,0 @@ -## Send metrics from any third-party integrations - -This document helps you to send metrics from any third-party integrations such as RabbitMQ, Nginx, MySQL, etc. - -There are two ways in which you can send metrics to SigNoz using OpenTelemetry: - -- From your application -- From OpenTelemetry Collector - -In this document, we will cover how to send metrics from OpenTelemetry Collector. The Collector is a swiss-army knife that can collect metrics from various sources and send them to SigNoz. - -- Enable a Specific Metric Receiver -- Enable a Prometheus Receiver - -## Enable a Specific Metric Receiver - -SigNoz supports all the receivers that are listed in the [opentelemetry-collector-contrib](https://github.com/open-telemetry/opentelemetry-collector-contrib/tree/main/receiver) GitHub repository. To configure a new metric receiver, you must edit the `receivers` and `service::pipelines` sections of the `otel-collector-config.yaml` file. The following example shows the default configuration in which the `hostmetrics` receiver is enabled: - -```yaml {8-20,52} -receivers: - otlp: - protocols: - grpc: - endpoint: localhost:4317 - http: - endpoint: localhost:4318 - hostmetrics: - collection_interval: 30s - scrapers: - cpu: {} - disk: {} - load: {} - filesystem: {} - memory: {} - network: {} - paging: {} - process: - mute_process_name_error: true - processes: {} -processors: - batch: - send_batch_size: 1000 - timeout: 10s - # Ref: https://github.com/open-telemetry/opentelemetry-collector-contrib/blob/main/processor/resourcedetectionprocessor/README.md - resourcedetection: - detectors: [env, system, ec2] # include ec2 for AWS, gce for GCP and azure for Azure. - # Using OTEL_RESOURCE_ATTRIBUTES envvar, env detector adds custom labels. - timeout: 2s - override: false - system: - hostname_sources: [os] # alternatively, use [dns,os] for setting FQDN as host.name and os as fallback -exporters: - otlp: - endpoint: 'ingest.{region}.signoz.cloud:443' # replace {region} with your region - tls: - insecure: false - headers: - 'signoz-access-token': '' - logging: - loglevel: debug -service: - telemetry: - metrics: - address: localhost:8888 - pipelines: - metrics: - receivers: [otlp] - processors: [batch] - exporters: [otlp] - metrics/hostmetrics: - receivers: [hostmetrics] - processors: [resourcedetection, batch] - exporters: [otlp] -``` - -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 - -To enable a new OpenTelemetry receiver, follow the steps below: - -1. Open the `otel-collector-config.yaml` file in a plain-text editor. -2. Configure your receivers. The following example shows how you can enable a `rabbitmq` receiver: - -```yaml {21-25,53} -receivers: - otlp: - protocols: - grpc: - endpoint: localhost:4317 - http: - endpoint: localhost:4318 - hostmetrics: - collection_interval: 30s - scrapers: - cpu: {} - disk: {} - load: {} - filesystem: {} - memory: {} - network: {} - paging: {} - process: - mute_process_name_error: true - processes: {} - rabbitmq: - endpoint: http://localhost:15672 - username: - password: - collection_interval: 10s -processors: - batch: - send_batch_size: 1000 - timeout: 10s - # Ref: https://github.com/open-telemetry/opentelemetry-collector-contrib/blob/main/processor/resourcedetectionprocessor/README.md - resourcedetection: - detectors: [env, system, ec2] # include ec2 for AWS, gce for GCP and azure for Azure. - # Using OTEL_RESOURCE_ATTRIBUTES envvar, env detector adds custom labels. - timeout: 2s - override: false - system: - hostname_sources: [os] # alternatively, use [dns,os] for setting FQDN as host.name and os as fallback -exporters: - otlp: - endpoint: 'ingest.{region}.signoz.cloud:443' # replace {region} with your region - tls: - insecure: false - headers: - 'signoz-access-token': '' - logging: - loglevel: debug -service: - telemetry: - metrics: - address: localhost:8888 - pipelines: - metrics: - receivers: [otlp, rabbitmq] - processors: [batch] - exporters: [otlp] - metrics/hostmetrics: - receivers: [hostmetrics] - processors: [resourcedetection, batch] - exporters: [otlp] -``` - -For details about configuring OpenTelemetry receivers, see the [README](https://github.com/open-telemetry/opentelemetry-collector/blob/main/receiver/README.md) page of the `opentelemetry-collector` GitHub repository. - -## Enable a Prometheus Receiver - -SigNoz supports all the exporters that are listed on the [Exporters and Integrations](https://prometheus.io/docs/instrumenting/exporters/) page of the Prometheus documentation. If you have a running Prometheus instance, and you expose metrics in Prometheus, then you can scrape them in SigNoz by configuring Prometheus receivers in the `receivers::prometheus::config::scrape_configs` section of the `otel-collector-config.yaml` file. - -To enable a Prometheus receiver, follow the steps below: - -1. Open the `otel-collector-config.yaml` file in a plain-text editor. -2. Enable a new Prometheus receiver. Depending on your use case, there are two ways in which you can enable a new Prometheus exporter: - - **By creating a new job**: The following example shows how you can enable a Prometheus receiver by creating a new job named `my-new-job`: - ```yaml {10-13} - ... - # Data sources: metrics - prometheus: - config: - scrape_configs: - - job_name: "otel-collector" - scrape_interval: 30s - static_configs: - - targets: ["otel-collector:8889"] - - job_name: "my-new-job" - scrape_interval: 30s - static_configs: - - targets: ["localhost:8080"] - ... - # This file was truncated for brevity. - ``` - - **By adding a new target to an existing job**: The following example shows the default `otel-collector` job to which a new target (`localhost:8080`) was added: - ```yaml {9} - ... - # Data sources: metrics - prometheus: - config: - scrape_configs: - - job_name: "otel-collector" - scrape_interval: 30s - static_configs: - - targets: ["otel-collector:8889", "localhost:8080"] - ... - # This file was truncated for brevity. - ``` - Note that all the jobs are scraped in parallel, and all targets inside a job are scraped serially. For more details about configuring jobs and targets, see the following sections of the Prometheus documentation: - - [](https://prometheus.io/docs/prometheus/latest/configuration/configuration/#scrape_config) - - [Jobs and Instances](https://prometheus.io/docs/concepts/jobs_instances/) diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/ApplicationLogs.tsx b/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/ApplicationLogs.tsx deleted file mode 100644 index 3341dadaff..0000000000 --- a/frontend/src/container/OnboardingContainer/LogsManagement/ApplicationLogs/ApplicationLogs.tsx +++ /dev/null @@ -1,53 +0,0 @@ -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'; - -interface ApplicationLogsProps { - type: string; - activeStep: number; -} - -const collectLogsFromFileURL = - 'https://signoz.io/docs/userguide/collect_logs_from_file/'; - -export default function ApplicationLogs({ - type, - activeStep, -}: ApplicationLogsProps): JSX.Element { - const docsURL = collectLogsFromFileURL; - - return ( - <> - {activeStep === 2 && ( -
-
- -
- - {LogsFromLogFile} - -
-
- )} - {activeStep === 3 && ( -
- -
- )} - - ); -} diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/Docker/Docker.tsx b/frontend/src/container/OnboardingContainer/LogsManagement/Docker/Docker.tsx deleted file mode 100644 index e88d62632b..0000000000 --- a/frontend/src/container/OnboardingContainer/LogsManagement/Docker/Docker.tsx +++ /dev/null @@ -1,44 +0,0 @@ -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 DockerDocs from './docker.md'; - -export default function Docker({ - activeStep, -}: { - activeStep: number; -}): JSX.Element { - return ( - <> - {activeStep === 2 && ( -
-
- -
- - {DockerDocs} - -
-
- )} - {activeStep === 3 && ( -
- -
- )} - - ); -} diff --git a/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/ExistingCollectors.tsx b/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/ExistingCollectors.tsx deleted file mode 100644 index e86bbabfe4..0000000000 --- a/frontend/src/container/OnboardingContainer/LogsManagement/ExistingCollectors/ExistingCollectors.tsx +++ /dev/null @@ -1,97 +0,0 @@ -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'; - -import FluentBit from './md-docs/fluentBit.md'; -import FluentD from './md-docs/fluentD.md'; -import LogStashDocs from './md-docs/logStash.md'; - -enum FrameworksMap { - fluent_d = 'FluentD', - fluent_bit = 'FluentBit', - logstash = 'Logstash', -} - -export default function ExistingCollectors(): JSX.Element { - const [selectedFrameWork, setSelectedFrameWork] = useState('fluent_d'); - const [selectedFrameWorkDocs, setSelectedFrameWorkDocs] = useState(FluentD); - - useEffect(() => { - // on language select - trackEvent('Onboarding: Logs Management: Existing Collectors', { - selectedFrameWork, - }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [selectedFrameWork]); - - const handleFrameworkChange = (selectedFrameWork: string): void => { - setSelectedFrameWork(selectedFrameWork); - - switch (selectedFrameWork) { - case 'fluent_d': - setSelectedFrameWorkDocs(FluentD); - break; - case 'fluent_bit': - setSelectedFrameWorkDocs(FluentBit); - break; - default: - setSelectedFrameWorkDocs(LogStashDocs); - break; - } - }; - - return ( -
-
- -
-
-
Select Framework
- - + + + {enableFrameworks && ( +
+ +