diff --git a/frontend/public/locales/en/titles.json b/frontend/public/locales/en/titles.json index b8cc27821d..e707c998f7 100644 --- a/frontend/public/locales/en/titles.json +++ b/frontend/public/locales/en/titles.json @@ -4,6 +4,10 @@ "SERVICE_METRICS": "SigNoz | Service Metrics", "SERVICE_MAP": "SigNoz | Service Map", "GET_STARTED": "SigNoz | Get Started", + "GET_STARTED_APPLICATION_MONITORING": "SigNoz | Get Started | APM", + "GET_STARTED_LOGS_MANAGEMENT": "SigNoz | Get Started | Logs", + "GET_STARTED_INFRASTRUCTURE_MONITORING": "SigNoz | Get Started | Infrastructure", + "GET_STARTED_AWS_MONITORING": "SigNoz | Get Started | AWS", "TRACE": "SigNoz | Trace", "TRACE_DETAIL": "SigNoz | Trace Detail", "TRACES_EXPLORER": "SigNoz | Traces Explorer", diff --git a/frontend/src/AppRoutes/routes.ts b/frontend/src/AppRoutes/routes.ts index d9921d94d1..360c74d8da 100644 --- a/frontend/src/AppRoutes/routes.ts +++ b/frontend/src/AppRoutes/routes.ts @@ -59,7 +59,7 @@ const routes: AppRoutes[] = [ }, { path: ROUTES.GET_STARTED, - exact: true, + exact: false, component: Onboarding, isPrivate: true, key: 'GET_STARTED', diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts index d579d7791a..0b087ff8cd 100644 --- a/frontend/src/constants/routes.ts +++ b/frontend/src/constants/routes.ts @@ -7,6 +7,11 @@ const ROUTES = { TRACE_DETAIL: '/trace/:id', TRACES_EXPLORER: '/traces-explorer', GET_STARTED: '/get-started', + GET_STARTED_APPLICATION_MONITORING: '/get-started/application-monitoring', + GET_STARTED_LOGS_MANAGEMENT: '/get-started/logs-management', + GET_STARTED_INFRASTRUCTURE_MONITORING: + '/get-started/infrastructure-monitoring', + GET_STARTED_AWS_MONITORING: '/get-started/aws-monitoring', USAGE_EXPLORER: '/usage-explorer', APPLICATION: '/services', ALL_DASHBOARD: '/dashboard', diff --git a/frontend/src/container/AppLayout/index.tsx b/frontend/src/container/AppLayout/index.tsx index d44a2d26b8..5d18e7d307 100644 --- a/frontend/src/container/AppLayout/index.tsx +++ b/frontend/src/container/AppLayout/index.tsx @@ -231,7 +231,12 @@ function AppLayout(props: AppLayoutProps): JSX.Element { const routeKey = useMemo(() => getRouteKey(pathname), [pathname]); const pageTitle = t(routeKey); const renderFullScreen = - pathname === ROUTES.GET_STARTED || pathname === ROUTES.WORKSPACE_LOCKED; + pathname === ROUTES.GET_STARTED || + pathname === ROUTES.WORKSPACE_LOCKED || + pathname === ROUTES.GET_STARTED_APPLICATION_MONITORING || + pathname === ROUTES.GET_STARTED_INFRASTRUCTURE_MONITORING || + pathname === ROUTES.GET_STARTED_LOGS_MANAGEMENT || + pathname === ROUTES.GET_STARTED_AWS_MONITORING; const [showTrialExpiryBanner, setShowTrialExpiryBanner] = useState(false); diff --git a/frontend/src/container/NoLogs/NoLogs.tsx b/frontend/src/container/NoLogs/NoLogs.tsx index 7745d130f3..d317da69ce 100644 --- a/frontend/src/container/NoLogs/NoLogs.tsx +++ b/frontend/src/container/NoLogs/NoLogs.tsx @@ -1,14 +1,34 @@ import './NoLogs.styles.scss'; import { Typography } from 'antd'; +import ROUTES from 'constants/routes'; +import history from 'lib/history'; import { ArrowUpRight } from 'lucide-react'; import { DataSource } from 'types/common/queryBuilder'; +import { isCloudUser } from 'utils/app'; export default function NoLogs({ dataSource, }: { dataSource: DataSource; }): JSX.Element { + const cloudUser = isCloudUser(); + const handleLinkClick = ( + e: React.MouseEvent, + ): void => { + e.preventDefault(); + e.stopPropagation(); + + if (cloudUser) { + history.push( + dataSource === 'traces' + ? ROUTES.GET_STARTED_APPLICATION_MONITORING + : ROUTES.GET_STARTED_LOGS_MANAGEMENT, + ); + } else { + window.open(`https://signoz.io/docs/userguide/${dataSource}/`, '_blank'); + } + }; return (
@@ -21,11 +41,7 @@ export default function NoLogs({ - + Sending {dataSource} to SigNoz
diff --git a/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx b/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx index ae294e2fb8..7eea6be655 100644 --- a/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx +++ b/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx @@ -6,9 +6,11 @@ import { ArrowRightOutlined } from '@ant-design/icons'; import { Button, Card, Typography } from 'antd'; import getIngestionData from 'api/settings/getIngestionData'; import cx from 'classnames'; +import ROUTES from 'constants/routes'; import FullScreenHeader from 'container/FullScreenHeader/FullScreenHeader'; import useAnalytics from 'hooks/analytics/useAnalytics'; import { useIsDarkMode } from 'hooks/useDarkMode'; +import history from 'lib/history'; import { useEffect, useState } from 'react'; import { useQuery } from 'react-query'; import { useEffectOnce } from 'react-use'; @@ -21,9 +23,11 @@ import { } from './context/OnboardingContext'; import { DataSourceType } from './Steps/DataSource/DataSource'; import { + defaultApplicationDataSource, defaultAwsServices, defaultInfraMetricsType, defaultLogsType, + moduleRouteMap, } from './utils/dataSourceUtils'; import { APM_STEPS, @@ -89,6 +93,7 @@ export default function Onboarding(): JSX.Element { const [current, setCurrent] = useState(0); const isDarkMode = useIsDarkMode(); const { trackEvent } = useAnalytics(); + const { location } = history; const { selectedDataSource, @@ -191,12 +196,13 @@ export default function Onboarding(): JSX.Element { } } else if (selectedModule?.id === ModulesMap.APM) { handleAPMSteps(); + updateSelectedDataSource(defaultApplicationDataSource); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [selectedModule, selectedDataSource, selectedEnvironment, selectedMethod]); - const handleNext = (): void => { + const handleNextStep = (): void => { if (activeStep <= 3) { const nextStep = activeStep + 1; @@ -217,12 +223,36 @@ export default function Onboarding(): JSX.Element { } }; + const handleNext = (): void => { + if (activeStep <= 3) { + handleNextStep(); + history.replace(moduleRouteMap[selectedModule.id as ModulesMap]); + } + }; + const handleModuleSelect = (module: ModuleProps): void => { setSelectedModule(module); updateSelectedModule(module); updateSelectedDataSource(null); }; + useEffect(() => { + if (location.pathname === ROUTES.GET_STARTED_APPLICATION_MONITORING) { + handleModuleSelect(useCases.APM); + updateSelectedDataSource(defaultApplicationDataSource); + handleNextStep(); + } else if ( + location.pathname === ROUTES.GET_STARTED_INFRASTRUCTURE_MONITORING + ) { + handleModuleSelect(useCases.InfrastructureMonitoring); + handleNextStep(); + } else if (location.pathname === ROUTES.GET_STARTED_LOGS_MANAGEMENT) { + handleModuleSelect(useCases.LogsManagement); + handleNextStep(); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + return (
{activeStep === 1 && ( @@ -285,6 +315,7 @@ export default function Onboarding(): JSX.Element { setActiveStep(activeStep - 1); setSelectedModule(useCases.APM); resetProgress(); + history.push(ROUTES.GET_STARTED); }} selectedModule={selectedModule} selectedModuleSteps={selectedModuleSteps} diff --git a/frontend/src/container/OnboardingContainer/utils/dataSourceUtils.ts b/frontend/src/container/OnboardingContainer/utils/dataSourceUtils.ts index 7b851feac9..140cefadd5 100644 --- a/frontend/src/container/OnboardingContainer/utils/dataSourceUtils.ts +++ b/frontend/src/container/OnboardingContainer/utils/dataSourceUtils.ts @@ -1,6 +1,15 @@ -import { ModuleProps, ModulesMap } from '../OnboardingContainer'; +import ROUTES from 'constants/routes'; + +import { ModuleProps } from '../OnboardingContainer'; import { DataSourceType } from '../Steps/DataSource/DataSource'; +export enum ModulesMap { + APM = 'APM', + LogsManagement = 'LogsManagement', + InfrastructureMonitoring = 'InfrastructureMonitoring', + AwsMonitoring = 'AwsMonitoring', +} + export const frameworksMap = { APM: { java: [ @@ -81,174 +90,174 @@ const supportedLanguages = [ { name: 'java', id: 'java', - imgURL: `Logos/java.png`, + imgURL: `/Logos/java.png`, }, { name: 'python', id: 'python', - imgURL: `Logos/python.png`, + imgURL: `/Logos/python.png`, }, { name: 'go', id: 'go', - imgURL: `Logos/go.png`, + imgURL: `/Logos/go.png`, }, { name: 'javascript', id: 'javascript', - imgURL: `Logos/javascript.png`, + imgURL: `/Logos/javascript.png`, }, { name: 'rails', id: 'rails', - imgURL: `Logos/rails.png`, + imgURL: `/Logos/rails.png`, }, { name: '.NET', id: 'dotnet', - imgURL: `Logos/dotnet.png`, + imgURL: `/Logos/dotnet.png`, }, { name: 'rust', id: 'rust', - imgURL: `Logos/rust.png`, + imgURL: `/Logos/rust.png`, }, { name: 'elixir', id: 'elixir', - imgURL: `Logos/elixir.png`, + imgURL: `/Logos/elixir.png`, }, { name: 'swift', id: 'swift', - imgURL: `Logos/swift.png`, + imgURL: `/Logos/swift.png`, }, ]; export const defaultLogsType = { name: 'Kubernetes Pod Logs', id: 'kubernetes', - imgURL: `Logos/kubernetes.svg`, + imgURL: `/Logos/kubernetes.svg`, }; const supportedLogsTypes = [ { name: 'Kubernetes Pod Logs', id: 'kubernetes', - imgURL: `Logos/kubernetes.svg`, + imgURL: `/Logos/kubernetes.svg`, }, { name: 'Docker Container Logs', id: 'docker', - imgURL: `Logos/docker.svg`, + imgURL: `/Logos/docker.svg`, }, { name: 'SysLogs', id: 'syslogs', - imgURL: `Logos/syslogs.svg`, + imgURL: `/Logos/syslogs.svg`, }, { name: 'Application Logs', id: 'application_logs', - imgURL: `Logos/software-window.svg`, + imgURL: `/Logos/software-window.svg`, }, { name: 'FluentBit', id: 'fluentBit', - imgURL: `Logos/fluent-bit.png`, + imgURL: `/Logos/fluent-bit.png`, }, { name: 'FluentD', id: 'fluentD', - imgURL: `Logos/fluentd.png`, + imgURL: `/Logos/fluentd.png`, }, { name: 'LogStash', id: 'logStash', - imgURL: `Logos/logstash.svg`, + imgURL: `/Logos/logstash.svg`, }, { name: 'Heroku', id: 'heroku', - imgURL: `Logos/heroku.png`, + imgURL: `/Logos/heroku.png`, }, { name: 'Vercel', id: 'vercel', - imgURL: `Logos/vercel.png`, + imgURL: `/Logos/vercel.png`, }, { name: 'HTTP', id: 'http', - imgURL: `Logos/http.png`, + imgURL: `/Logos/http.png`, }, { name: 'Cloudwatch', id: 'cloudwatch', - imgURL: `Logos/cloudwatch.png`, + imgURL: `/Logos/cloudwatch.png`, }, ]; export const defaultInfraMetricsType = { name: 'Kubernetes Infra Metrics', id: 'kubernetesInfraMetrics', - imgURL: `Logos/kubernetes.svg`, + imgURL: `/Logos/kubernetes.svg`, }; const supportedInfraMetrics = [ { name: 'Kubernetes Infra Metrics', id: 'kubernetesInfraMetrics', - imgURL: `Logos/kubernetes.svg`, + imgURL: `/Logos/kubernetes.svg`, }, { name: 'HostMetrics', id: 'hostMetrics', - imgURL: `Logos/software-window.svg`, + imgURL: `/Logos/software-window.svg`, }, { name: 'Other Metrics', id: 'otherMetrics', - imgURL: `Logos/cmd-terminal.svg`, + imgURL: `/Logos/cmd-terminal.svg`, }, ]; export const defaultAwsServices = { name: 'EC2 - Application Logs', id: 'awsEc2ApplicationLogs', - imgURL: `Logos/ec2.svg`, + imgURL: `/Logos/ec2.svg`, }; const supportedAwsServices = [ { name: 'EC2 - App/Server Logs', id: 'awsEc2ApplicationLogs', - imgURL: `Logos/ec2.svg`, + imgURL: `/Logos/ec2.svg`, }, { name: 'EC2 - Infra Metrics', id: 'awsEc2InfrastructureMetrics', - imgURL: `Logos/ec2.svg`, + imgURL: `/Logos/ec2.svg`, }, { name: 'ECS - EC2', id: 'awsEcsEc2', - imgURL: `Logos/ecs.svg`, + imgURL: `/Logos/ecs.svg`, }, { name: 'ECS - Fargate', id: 'awsEcsFargate', - imgURL: `Logos/ecs.svg`, + imgURL: `/Logos/ecs.svg`, }, { name: 'ECS - External', id: 'awsEcsExternal', - imgURL: `Logos/ecs.svg`, + imgURL: `/Logos/ecs.svg`, }, { name: 'EKS', id: 'awsEks', - imgURL: `Logos/eks.svg`, + imgURL: `/Logos/eks.svg`, }, ]; @@ -320,3 +329,11 @@ export const hasFrameworks = ({ return true; }; + +export const moduleRouteMap = { + [ModulesMap.APM]: ROUTES.GET_STARTED_APPLICATION_MONITORING, + [ModulesMap.LogsManagement]: ROUTES.GET_STARTED_LOGS_MANAGEMENT, + [ModulesMap.InfrastructureMonitoring]: + ROUTES.GET_STARTED_INFRASTRUCTURE_MONITORING, + [ModulesMap.AwsMonitoring]: ROUTES.GET_STARTED_AWS_MONITORING, +}; diff --git a/frontend/src/container/TopNav/DateTimeSelection/config.ts b/frontend/src/container/TopNav/DateTimeSelection/config.ts index bc77afe7d6..3618686c95 100644 --- a/frontend/src/container/TopNav/DateTimeSelection/config.ts +++ b/frontend/src/container/TopNav/DateTimeSelection/config.ts @@ -81,6 +81,10 @@ export const routesToSkip = [ ROUTES.ALL_CHANNELS, ROUTES.USAGE_EXPLORER, ROUTES.GET_STARTED, + ROUTES.GET_STARTED_APPLICATION_MONITORING, + ROUTES.GET_STARTED_INFRASTRUCTURE_MONITORING, + ROUTES.GET_STARTED_LOGS_MANAGEMENT, + ROUTES.GET_STARTED_AWS_MONITORING, ROUTES.VERSION, ROUTES.ALL_DASHBOARD, ROUTES.ORG_SETTINGS, diff --git a/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts b/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts index 7999845550..6231505580 100644 --- a/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts +++ b/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts @@ -117,6 +117,10 @@ export const routesToSkip = [ ROUTES.ALL_CHANNELS, ROUTES.USAGE_EXPLORER, ROUTES.GET_STARTED, + ROUTES.GET_STARTED_APPLICATION_MONITORING, + ROUTES.GET_STARTED_INFRASTRUCTURE_MONITORING, + ROUTES.GET_STARTED_LOGS_MANAGEMENT, + ROUTES.GET_STARTED_AWS_MONITORING, ROUTES.VERSION, ROUTES.ALL_DASHBOARD, ROUTES.ORG_SETTINGS, diff --git a/frontend/src/utils/permission/index.ts b/frontend/src/utils/permission/index.ts index 5667b93ce0..b18be180cd 100644 --- a/frontend/src/utils/permission/index.ts +++ b/frontend/src/utils/permission/index.ts @@ -82,6 +82,10 @@ export const routePermission: Record = { LOGS_PIPELINES: ['ADMIN', 'EDITOR', 'VIEWER'], TRACE_EXPLORER: ['ADMIN', 'EDITOR', 'VIEWER'], GET_STARTED: ['ADMIN', 'EDITOR', 'VIEWER'], + GET_STARTED_APPLICATION_MONITORING: ['ADMIN', 'EDITOR', 'VIEWER'], + GET_STARTED_INFRASTRUCTURE_MONITORING: ['ADMIN', 'EDITOR', 'VIEWER'], + GET_STARTED_LOGS_MANAGEMENT: ['ADMIN', 'EDITOR', 'VIEWER'], + GET_STARTED_AWS_MONITORING: ['ADMIN', 'EDITOR', 'VIEWER'], WORKSPACE_LOCKED: ['ADMIN', 'EDITOR', 'VIEWER'], BILLING: ['ADMIN', 'EDITOR', 'VIEWER'], SUPPORT: ['ADMIN', 'EDITOR', 'VIEWER'],