+ {!isErrorDeploymentsData &&
+ !isLoadingDeploymentsData &&
+ !isFetchingDeploymentsData && (
+
{
});
it('renders MultiIngestionSettings page without crashing', () => {
- expect(
- screen.getByText(
- 'Find your ingestion URL and learn more about sending data to SigNoz',
- ),
- ).toBeInTheDocument();
-
expect(screen.getByText('Ingestion Keys')).toBeInTheDocument();
expect(
screen.getByText('Create and manage ingestion keys for the SigNoz Cloud'),
).toBeInTheDocument();
- const overviewLink = screen.getByRole('link', { name: /here/i });
- expect(overviewLink).toHaveAttribute(
- 'href',
- 'https://signoz.io/docs/ingestion/signoz-cloud/overview/',
- );
- expect(overviewLink).toHaveAttribute('target', '_blank');
- expect(overviewLink).toHaveClass('learn-more');
- expect(overviewLink).toHaveAttribute('rel', 'noreferrer');
-
const aboutKeyslink = screen.getByRole('link', { name: /Learn more/i });
expect(aboutKeyslink).toHaveAttribute(
'href',
diff --git a/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx b/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx
index 861786f2aa..ea120ec4f3 100644
--- a/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx
+++ b/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx
@@ -7,12 +7,14 @@ import { Button, Card, Form, Typography } from 'antd';
import logEvent from 'api/common/logEvent';
import getIngestionData from 'api/settings/getIngestionData';
import cx from 'classnames';
+import { FeatureKeys } from 'constants/features';
import ROUTES from 'constants/routes';
import FullScreenHeader from 'container/FullScreenHeader/FullScreenHeader';
import InviteUserModal from 'container/OrganizationSettings/InviteUserModal/InviteUserModal';
import { InviteMemberFormValues } from 'container/OrganizationSettings/PendingInvitesContainer';
import history from 'lib/history';
import { UserPlus } from 'lucide-react';
+import { useAppContext } from 'providers/App/App';
import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useQuery } from 'react-query';
@@ -106,6 +108,11 @@ export default function Onboarding(): JSX.Element {
const { location } = history;
const { t } = useTranslation(['onboarding']);
+ const { featureFlags } = useAppContext();
+ const isOnboardingV3Enabled = featureFlags?.find(
+ (flag) => flag.name === FeatureKeys.ONBOARDING_V3,
+ )?.active;
+
const {
selectedDataSource,
selectedEnvironment,
@@ -384,7 +391,12 @@ export default function Onboarding(): JSX.Element {
setActiveStep(activeStep - 1);
setSelectedModule(useCases.APM);
resetProgress();
- history.push(ROUTES.GET_STARTED);
+
+ if (isOnboardingV3Enabled) {
+ history.push(ROUTES.GET_STARTED_WITH_CLOUD);
+ } else {
+ history.push(ROUTES.GET_STARTED);
+ }
}}
selectedModule={selectedModule}
selectedModuleSteps={selectedModuleSteps}
diff --git a/frontend/src/container/OnboardingQuestionaire/index.tsx b/frontend/src/container/OnboardingQuestionaire/index.tsx
index 1d7975d6c5..e383a487dd 100644
--- a/frontend/src/container/OnboardingQuestionaire/index.tsx
+++ b/frontend/src/container/OnboardingQuestionaire/index.tsx
@@ -7,6 +7,7 @@ import getAllOrgPreferences from 'api/preferences/getAllOrgPreferences';
import updateOrgPreferenceAPI from 'api/preferences/updateOrgPreference';
import { AxiosError } from 'axios';
import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { FeatureKeys } from 'constants/features';
import ROUTES from 'constants/routes';
import { InviteTeamMembersProps } from 'container/OrganizationSettings/PendingInvitesContainer';
import { useNotifications } from 'hooks/useNotifications';
@@ -62,7 +63,10 @@ const ONBOARDING_COMPLETE_EVENT_NAME = 'Org Onboarding: Complete';
function OnboardingQuestionaire(): JSX.Element {
const { notifications } = useNotifications();
- const { org, updateOrgPreferences } = useAppContext();
+ const { org, updateOrgPreferences, featureFlags } = useAppContext();
+ const isOnboardingV3Enabled = featureFlags?.find(
+ (flag) => flag.name === FeatureKeys.ONBOARDING_V3,
+ )?.active;
const [currentStep, setCurrentStep] = useState
(1);
const [orgDetails, setOrgDetails] = useState(INITIAL_ORG_DETAILS);
const [signozDetails, setSignozDetails] = useState(
@@ -117,7 +121,11 @@ function OnboardingQuestionaire(): JSX.Element {
logEvent('Org Onboarding: Redirecting to Get Started', {});
- history.push(ROUTES.GET_STARTED);
+ if (isOnboardingV3Enabled) {
+ history.push(ROUTES.GET_STARTED_WITH_CLOUD);
+ } else {
+ history.push(ROUTES.GET_STARTED);
+ }
},
onError: () => {
setUpdatingOrgOnboardingStatus(false);
diff --git a/frontend/src/container/OnboardingV2Container/AddDataSource/AddDataSource.tsx b/frontend/src/container/OnboardingV2Container/AddDataSource/AddDataSource.tsx
new file mode 100644
index 0000000000..da98bf26c6
--- /dev/null
+++ b/frontend/src/container/OnboardingV2Container/AddDataSource/AddDataSource.tsx
@@ -0,0 +1,813 @@
+import '../OnboardingV2.styles.scss';
+
+import { SearchOutlined } from '@ant-design/icons';
+import {
+ Button,
+ Flex,
+ Input,
+ Layout,
+ Modal,
+ Skeleton,
+ Space,
+ Steps,
+ Typography,
+} from 'antd';
+import logEvent from 'api/common/logEvent';
+import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
+import ROUTES from 'constants/routes';
+import history from 'lib/history';
+import { isEmpty } from 'lodash-es';
+import { ArrowRight, X } from 'lucide-react';
+import { useAppContext } from 'providers/App/App';
+import React, { useEffect, useRef, useState } from 'react';
+
+import OnboardingIngestionDetails from '../IngestionDetails/IngestionDetails';
+import InviteTeamMembers from '../InviteTeamMembers/InviteTeamMembers';
+import onboardingConfigWithLinks from '../onboarding-configs/onboarding-config-with-links.json';
+
+const { Header } = Layout;
+
+interface OptionGroup {
+ id: string;
+ category: string;
+ items: string[];
+}
+
+export interface Question {
+ id: string;
+ title: string;
+ description: string;
+ options: OptionGroup[];
+ uiConfig?: {
+ showSearch?: boolean;
+ filterByCategory?: boolean;
+ };
+}
+
+interface Option {
+ imgUrl?: string;
+ label: string;
+ link?: string;
+ entityID?: string;
+}
+
+interface Entity {
+ imgUrl?: string;
+ label: string;
+ dataSource: string;
+ entityID: string;
+ module: string;
+ question?: {
+ desc: string;
+ options: Option[];
+ entityID: string;
+ question?: {
+ desc: string;
+ options: Option[];
+ entityID: string;
+ };
+ };
+ tags: string[];
+ link?: string;
+}
+
+const setupStepItemsBase = [
+ {
+ title: 'Org Setup',
+ description: ,
+ },
+ {
+ title: 'Add your first data source',
+ description: ' ',
+ },
+ {
+ title: 'Configure Your Product',
+ description: ' ',
+ },
+];
+
+const ONBOARDING_V3_ANALYTICS_EVENTS_MAP = {
+ BASE: 'Onboarding V3',
+ STARTED: 'Started',
+ DATA_SOURCE_SELECTED: 'Datasource selected',
+ FRAMEWORK_SELECTED: 'Framework selected',
+ ENVIRONMENT_SELECTED: 'Environment selected',
+ CONFIGURED_PRODUCT: 'Configure clicked',
+ BACK_BUTTON_CLICKED: 'Back clicked',
+ CONTINUE_BUTTON_CLICKED: 'Continue clicked',
+ GET_HELP_BUTTON_CLICKED: 'Get help clicked',
+ GET_EXPERT_ASSISTANCE_BUTTON_CLICKED: 'Get expert assistance clicked',
+ INVITE_TEAM_MEMBER_BUTTON_CLICKED: 'Invite team member clicked',
+ CLOSE_ONBOARDING_CLICKED: 'Close onboarding clicked',
+};
+
+function OnboardingAddDataSource(): JSX.Element {
+ const [groupedDataSources, setGroupedDataSources] = useState<{
+ [tag: string]: Entity[];
+ }>({});
+
+ const { org } = useAppContext();
+
+ const [setupStepItems, setSetupStepItems] = useState(setupStepItemsBase);
+
+ const question2Ref = useRef(null);
+ const question3Ref = useRef(null);
+ const configureProdRef = useRef(null);
+
+ const [showConfigureProduct, setShowConfigureProduct] = useState(
+ false,
+ );
+
+ const [currentStep, setCurrentStep] = useState(1);
+
+ const [hasMoreQuestions, setHasMoreQuestions] = useState(true);
+
+ const [
+ showInviteTeamMembersModal,
+ setShowInviteTeamMembersModal,
+ ] = useState(false);
+
+ const [docsUrl, setDocsUrl] = useState(
+ 'https://signoz.io/docs/instrumentation/',
+ );
+
+ const [selectedDataSource, setSelectedDataSource] = useState(
+ null,
+ );
+
+ const [selectedFramework, setSelectedFramework] = useState(
+ null,
+ );
+
+ const [selectedEnvironment, setSelectedEnvironment] = useState(
+ null,
+ );
+
+ const [selectedCategory, setSelectedCategory] = useState('All');
+
+ const handleScrollToStep = (ref: React.RefObject): void => {
+ setTimeout(() => {
+ ref.current?.scrollIntoView({
+ behavior: 'smooth',
+ block: 'start',
+ inline: 'nearest',
+ });
+ }, 100);
+ };
+
+ useEffect(() => {
+ logEvent(
+ `${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.STARTED}`,
+ {},
+ );
+ }, []);
+
+ const updateUrl = (url: string, selectedEnvironment: string | null): void => {
+ if (!url || url === '') {
+ return;
+ }
+
+ // Step 1: Parse the URL
+ const urlObj = new URL(url);
+
+ // Step 2: Update or add the 'source' parameter
+ urlObj.searchParams.set('source', 'onboarding');
+
+ if (selectedEnvironment) {
+ urlObj.searchParams.set('environment', selectedEnvironment);
+ }
+
+ // Step 3: Return the updated URL as a string
+ const updatedUrl = urlObj.toString();
+
+ setDocsUrl(updatedUrl);
+ };
+
+ const handleSelectDataSource = (dataSource: Entity): void => {
+ setSelectedDataSource(dataSource);
+ setSelectedFramework(null);
+ setSelectedEnvironment(null);
+
+ logEvent(
+ `${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.DATA_SOURCE_SELECTED}`,
+ {
+ dataSource: dataSource.label,
+ },
+ );
+
+ if (dataSource.question) {
+ setHasMoreQuestions(true);
+
+ setTimeout(() => {
+ handleScrollToStep(question2Ref);
+ }, 100);
+ } else {
+ setHasMoreQuestions(false);
+
+ updateUrl(dataSource?.link || '', null);
+
+ setShowConfigureProduct(true);
+ }
+ };
+
+ const handleSelectFramework = (option: any): void => {
+ setSelectedFramework(option);
+
+ logEvent(
+ `${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.FRAMEWORK_SELECTED}`,
+ {
+ dataSource: selectedDataSource?.label,
+ framework: option.label,
+ },
+ );
+
+ if (option.question) {
+ setHasMoreQuestions(true);
+
+ updateUrl(option?.link, null);
+
+ setTimeout(() => {
+ handleScrollToStep(question3Ref);
+ }, 100);
+ } else {
+ updateUrl(option.link, null);
+ setHasMoreQuestions(false);
+
+ setShowConfigureProduct(true);
+ }
+ };
+
+ const handleSelectEnvironment = (selectedEnvironment: any): void => {
+ setSelectedEnvironment(selectedEnvironment);
+ setHasMoreQuestions(false);
+
+ logEvent(
+ `${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.ENVIRONMENT_SELECTED}`,
+ {
+ dataSource: selectedDataSource?.label,
+ framework: selectedFramework?.label,
+ environment: selectedEnvironment?.label,
+ },
+ );
+
+ updateUrl(docsUrl, selectedEnvironment?.key);
+
+ setShowConfigureProduct(true);
+ };
+
+ const groupDataSourcesByTags = (
+ dataSources: Entity[],
+ ): { [tag: string]: Entity[] } => {
+ const groupedDataSources: { [tag: string]: Entity[] } = {};
+
+ dataSources.forEach((dataSource) => {
+ dataSource.tags.forEach((tag) => {
+ if (!groupedDataSources[tag]) {
+ groupedDataSources[tag] = [];
+ }
+ groupedDataSources[tag].push(dataSource);
+ });
+ });
+
+ return groupedDataSources;
+ };
+
+ useEffect(() => {
+ const groupedDataSources = groupDataSourcesByTags(
+ onboardingConfigWithLinks as Entity[],
+ );
+
+ setGroupedDataSources(groupedDataSources);
+ }, []);
+
+ const handleSearch = (e: React.ChangeEvent): void => {
+ const query = e.target.value.toLowerCase();
+
+ if (query === '') {
+ setGroupedDataSources(
+ groupDataSourcesByTags(onboardingConfigWithLinks as Entity[]),
+ );
+ return;
+ }
+
+ const filteredDataSources = onboardingConfigWithLinks.filter(
+ (dataSource) =>
+ dataSource.label.toLowerCase().includes(query) ||
+ dataSource.tags.some((tag) => tag.toLowerCase().includes(query)),
+ );
+
+ setGroupedDataSources(
+ groupDataSourcesByTags(filteredDataSources as Entity[]),
+ );
+ };
+
+ const handleFilterByCategory = (category: string): void => {
+ setSelectedDataSource(null);
+ setSelectedFramework(null);
+ setSelectedEnvironment(null);
+
+ if (category === 'All') {
+ setGroupedDataSources(
+ groupDataSourcesByTags(onboardingConfigWithLinks as Entity[]),
+ );
+
+ setSelectedCategory('All');
+ return;
+ }
+
+ const filteredDataSources = onboardingConfigWithLinks.filter(
+ (dataSource) =>
+ dataSource.tags.includes(category) ||
+ dataSource.tags.some((tag) => tag.toLowerCase().includes(category)),
+ );
+
+ setSelectedCategory(category);
+
+ setGroupedDataSources(
+ groupDataSourcesByTags(filteredDataSources as Entity[]),
+ );
+ };
+
+ useEffect(() => {
+ setSetupStepItems([
+ {
+ ...setupStepItemsBase[0],
+ description: org?.[0]?.name || '',
+ },
+ ...setupStepItemsBase.slice(1),
+ ]);
+ }, [org]);
+
+ const handleUpdateCurrentStep = (step: number): void => {
+ setCurrentStep(step);
+
+ if (step === 1) {
+ setSetupStepItems([
+ {
+ ...setupStepItemsBase[0],
+ description: org?.[0]?.name || '',
+ },
+ {
+ ...setupStepItemsBase[1],
+ description: '',
+ },
+ ...setupStepItemsBase.slice(2),
+ ]);
+ } else if (step === 2) {
+ setSetupStepItems([
+ {
+ ...setupStepItemsBase[0],
+ description: org?.[0]?.name || '',
+ },
+ {
+ ...setupStepItemsBase[1],
+ description: `${selectedDataSource?.label} ${
+ selectedFramework?.label ? `- ${selectedFramework?.label}` : ''
+ }`,
+ },
+ ...setupStepItemsBase.slice(2),
+ ]);
+ } else if (step === 3) {
+ switch (selectedDataSource?.module) {
+ case 'apm':
+ history.push(ROUTES.APPLICATION);
+ break;
+ case 'logs':
+ history.push(ROUTES.LOGS);
+ break;
+ case 'metrics':
+ history.push(ROUTES.ALL_DASHBOARD);
+ break;
+ default:
+ history.push(ROUTES.APPLICATION);
+ }
+ }
+ };
+
+ const handleShowInviteTeamMembersModal = (): void => {
+ logEvent(
+ `${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.INVITE_TEAM_MEMBER_BUTTON_CLICKED}`,
+ {
+ dataSource: selectedDataSource?.label,
+ framework: selectedFramework?.label,
+ environment: selectedEnvironment?.label,
+ currentPage: setupStepItems[currentStep]?.title || '',
+ },
+ );
+ setShowInviteTeamMembersModal(true);
+ };
+
+ return (
+
+
+
+
+
+ {
+ logEvent(
+ `${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.CLOSE_ONBOARDING_CLICKED}`,
+ {
+ currentPage: setupStepItems[currentStep]?.title || '',
+ },
+ );
+
+ history.push(ROUTES.APPLICATION);
+ }}
+ />
+ Get Started (2/4)
+
+
+
+
+
+
+
+
+
+ {currentStep === 1 && (
+
+
+
+
+
+ Select your data source
+
+
+ Select from a host of services to start sending data to SigNoz
+
+
+
+
+
+
+
+
+
+
+ {Object.keys(groupedDataSources).map((tag) => (
+
+
+ {tag} ({groupedDataSources[tag].length})
+
+
+ {groupedDataSources[tag].map((dataSource) => (
+
handleSelectDataSource(dataSource)}
+ >
+
+ ))}
+
+
+ ))}
+
+
+
+
+
+ {' '}
+ Filters{' '}
+
+
+
handleFilterByCategory('All')}
+ >
+ All ({onboardingConfigWithLinks.length})
+
+
+ {Object.keys(groupedDataSources).map((tag) => (
+
+ handleFilterByCategory(tag)}
+ >
+ {tag} ({groupedDataSources[tag].length})
+
+
+ ))}
+
+
+
+
+ {selectedDataSource &&
+ selectedDataSource?.question &&
+ !isEmpty(selectedDataSource?.question) && (
+
+ {selectedDataSource?.question?.desc && (
+ <>
+
+
+ {selectedDataSource?.question?.desc}
+
+
+
+
+ {selectedDataSource?.question?.options.map((option) => (
+
handleSelectFramework(option)}
+ >
+ {option.imgUrl && (
+
+ ))}
+
+
+ )}
+
+ )}
+
+ {selectedFramework &&
+ selectedFramework?.question &&
+ !isEmpty(selectedFramework?.question) && (
+
+ {selectedFramework?.question?.desc && (
+ <>
+
+
+ {selectedFramework?.question?.desc}
+
+
+
+
+ {selectedFramework?.question?.options.map((option) => (
+
handleSelectEnvironment(option)}
+ >
+
+ ))}
+
+
+ )}
+
+ )}
+
+ {!hasMoreQuestions && showConfigureProduct && (
+
+ {
+ logEvent(
+ `${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.CONFIGURED_PRODUCT}`,
+ {
+ dataSource: selectedDataSource?.label,
+ framework: selectedFramework?.label,
+ environment: selectedEnvironment?.label,
+ },
+ );
+
+ handleUpdateCurrentStep(2);
+ }}
+ >
+ Next: Configure your product
+
+
+ )}
+
+
+
+ )}
+
+ {currentStep === 2 && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ logEvent(
+ `${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BACK_BUTTON_CLICKED}`,
+ {
+ dataSource: selectedDataSource?.label,
+ framework: selectedFramework?.label,
+ environment: selectedEnvironment?.label,
+ currentPage: setupStepItems[currentStep]?.title || '',
+ },
+ );
+
+ handleUpdateCurrentStep(1);
+ }}
+ >
+ Back
+
+ {
+ logEvent(
+ `${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.CONTINUE_BUTTON_CLICKED}`,
+ {
+ dataSource: selectedDataSource?.label,
+ framework: selectedFramework?.label,
+ environment: selectedEnvironment?.label,
+ currentPage: setupStepItems[currentStep]?.title || '',
+ },
+ );
+
+ handleFilterByCategory('All');
+ handleUpdateCurrentStep(3);
+ }}
+ >
+ Continue
+
+
+
+ )}
+
+
+
+ {currentStep === 1 && (
+
+
+ Invite a team member to help with this step
+
+
Or
+
+
+ Need help with setup? Upgrade now and get expert assistance.
+
+
+
+
+ )}
+
+ {currentStep === 2 &&
}
+
+
Invite a team member}
+ open={showInviteTeamMembersModal}
+ closable
+ onCancel={(): void => setShowInviteTeamMembersModal(false)}
+ width="640px"
+ footer={null}
+ destroyOnClose
+ >
+
+ {}}
+ onNext={(): void => setShowInviteTeamMembersModal(false)}
+ onClose={(): void => setShowInviteTeamMembersModal(false)}
+ />
+
+
+
+
(
+ {} as IngestionInfo,
+ );
+
+ const {
+ status,
+ data: ingestionData,
+ isLoading: isIngestionKeysLoading,
+ error,
+ isError,
+ } = useQuery({
+ queryFn: () => getIngestionData(),
+ });
+
+ const {
+ data: deploymentsData,
+ isLoading: isLoadingDeploymentsData,
+ isFetching: isFetchingDeploymentsData,
+ isError: isDeploymentsDataError,
+ } = useGetDeploymentsData();
+
+ const handleCopyKey = (text: string): void => {
+ handleCopyToClipboard(text);
+ notifications.success({
+ message: 'Copied to clipboard',
+ });
+ };
+
+ useEffect(() => {
+ if (
+ status === 'success' &&
+ ingestionData &&
+ ingestionData &&
+ Array.isArray(ingestionData.payload)
+ ) {
+ const payload = ingestionData.payload[0] || {
+ ingestionKey: '',
+ ingestionURL: '',
+ dataRegion: '',
+ };
+
+ setFirstIngestionKey(payload);
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [status, ingestionData?.payload]);
+
+ return (
+
+ {isError && (
+
+
+
+
+
+
+
+
+ Find your ingestion URL and learn more about sending data to SigNoz{' '}
+
+ here
+
+
+
+ )}
+
+ {(isIngestionKeysLoading || !isError) && (
+ <>
+
+
+ You can use this key to send your telemetry data to SigNoz.
+
+
+
+ {isIngestionKeysLoading ||
+ isLoadingDeploymentsData ||
+ isFetchingDeploymentsData ? (
+
+
+ ) : (
+
+ {!isDeploymentsDataError &&
+ !isLoadingDeploymentsData &&
+ !isFetchingDeploymentsData && (
+
+
+
+
+
+ {deploymentsData?.data?.data?.cluster.region.name}
+
+ {
+ logEvent(
+ `${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.REGION_COPIED}`,
+ {},
+ );
+
+ handleCopyKey(
+ deploymentsData?.data?.data?.cluster.region.name || '',
+ );
+ }}
+ />
+
+
+ )}
+
+
+
+
+
+ {maskKey(firstIngestionKey?.ingestionKey)}
+
+ {
+ logEvent(
+ `${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.INGESTION_KEY_COPIED}`,
+ {},
+ );
+ handleCopyKey(firstIngestionKey?.ingestionKey);
+ }}
+ />
+
+
+
+ )}
+
+
+
+
+
+ )}
+
>(
+ {},
+ );
+ const [hasInvalidEmails, setHasInvalidEmails] = useState(false);
+
+ const [hasErrors, setHasErrors] = useState(true);
+
+ const [error, setError] = useState(null);
+
+ const [inviteUsersErrorResponse, setInviteUsersErrorResponse] = useState<
+ string[] | null
+ >(null);
+
+ const [inviteUsersSuccessResponse, setInviteUsersSuccessResponse] = useState<
+ string[] | null
+ >(null);
+
+ const [disableNextButton, setDisableNextButton] = useState(false);
+
+ const defaultTeamMember: TeamMember = {
+ email: '',
+ role: 'EDITOR',
+ name: '',
+ frontendBaseUrl: window.location.origin,
+ id: '',
+ };
+
+ useEffect(() => {
+ if (isEmpty(teamMembers)) {
+ const teamMember = {
+ ...defaultTeamMember,
+ id: uuid(),
+ };
+
+ setTeamMembersToInvite([teamMember]);
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [teamMembers]);
+
+ const handleAddTeamMember = (): void => {
+ const newTeamMember = {
+ ...defaultTeamMember,
+ id: uuid(),
+ };
+ setTeamMembersToInvite((prev) => [...(prev || []), newTeamMember]);
+ };
+
+ const handleRemoveTeamMember = (id: string): void => {
+ setTeamMembersToInvite((prev) => (prev || []).filter((m) => m.id !== id));
+ };
+
+ // Validation function to check all users
+ const validateAllUsers = (): boolean => {
+ let isValid = true;
+
+ const updatedValidity: Record = {};
+
+ teamMembersToInvite?.forEach((member) => {
+ const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(member.email);
+ if (!emailValid || !member.email) {
+ isValid = false;
+ setHasInvalidEmails(true);
+ }
+ updatedValidity[member.id!] = emailValid;
+ });
+
+ setEmailValidity(updatedValidity);
+
+ return isValid;
+ };
+
+ const parseInviteUsersSuccessResponse = (
+ response: SuccessfulInvite[],
+ ): string[] => response.map((invite) => `${invite.email} - Invite Sent`);
+
+ const parseInviteUsersErrorResponse = (response: FailedInvite[]): string[] =>
+ response.map((invite) => `${invite.email} - ${invite.error}`);
+
+ const handleError = (error: AxiosError): void => {
+ const errorMessage = error.response?.data as InviteUsersResponse;
+
+ if (errorMessage?.status === 'failure') {
+ setHasErrors(true);
+
+ const failedInvitesErrorResponse = parseInviteUsersErrorResponse(
+ errorMessage.failed_invites,
+ );
+
+ setInviteUsersErrorResponse(failedInvitesErrorResponse);
+ }
+ };
+
+ const handleInviteUsersSuccess = (
+ response: SuccessResponse,
+ ): void => {
+ const inviteUsersResponse = response.payload as InviteUsersResponse;
+
+ if (inviteUsersResponse?.status === 'success') {
+ const successfulInvites = parseInviteUsersSuccessResponse(
+ inviteUsersResponse.successful_invites,
+ );
+
+ logEvent(
+ `${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.INVITE_TEAM_MEMBER_SUCCESS}`,
+ {
+ teamMembers: teamMembersToInvite,
+ successfulInvites,
+ failedInvites: inviteUsersResponse?.failed_invites || [],
+ },
+ );
+
+ setDisableNextButton(true);
+
+ setError(null);
+ setHasErrors(false);
+ setInviteUsersErrorResponse(null);
+
+ setInviteUsersSuccessResponse(successfulInvites);
+
+ setTimeout(() => {
+ setDisableNextButton(false);
+ onNext();
+ }, 1000);
+ } else if (inviteUsersResponse?.status === 'partial_success') {
+ const successfulInvites = parseInviteUsersSuccessResponse(
+ inviteUsersResponse.successful_invites,
+ );
+
+ logEvent(
+ `${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.INVITE_TEAM_MEMBER_PARTIAL_SUCCESS}`,
+ {
+ teamMembers: teamMembersToInvite,
+ successfulInvites,
+ failedInvites: inviteUsersResponse?.failed_invites || [],
+ },
+ );
+
+ setInviteUsersSuccessResponse(successfulInvites);
+
+ if (inviteUsersResponse.failed_invites.length > 0) {
+ setHasErrors(true);
+
+ setInviteUsersErrorResponse(
+ parseInviteUsersErrorResponse(inviteUsersResponse.failed_invites),
+ );
+ }
+ }
+ };
+
+ const { mutate: sendInvites, isLoading: isSendingInvites } = useMutation(
+ inviteUsers,
+ {
+ onSuccess: (response: SuccessResponse): void => {
+ handleInviteUsersSuccess(response);
+ },
+ onError: (error: AxiosError): void => {
+ logEvent(
+ `${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.INVITE_TEAM_MEMBER_FAILED}`,
+ {
+ teamMembers: teamMembersToInvite,
+ error,
+ },
+ );
+
+ handleError(error);
+ },
+ },
+ );
+
+ const handleNext = (): void => {
+ if (validateAllUsers()) {
+ setTeamMembers(teamMembersToInvite || []);
+
+ logEvent(
+ `${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.BASE}: ${ONBOARDING_V3_ANALYTICS_EVENTS_MAP?.INVITE_TEAM_MEMBER_BUTTON_CLICKED}`,
+ {
+ teamMembers: teamMembersToInvite,
+ },
+ );
+
+ setHasInvalidEmails(false);
+ setError(null);
+ setHasErrors(false);
+ setInviteUsersErrorResponse(null);
+ setInviteUsersSuccessResponse(null);
+
+ sendInvites({
+ users: teamMembersToInvite || [],
+ });
+ }
+ };
+
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ const debouncedValidateEmail = useCallback(
+ debounce((email: string, memberId: string) => {
+ const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+ setEmailValidity((prev) => ({ ...prev, [memberId]: isValid }));
+ }, 500),
+ [],
+ );
+
+ const handleEmailChange = (
+ e: React.ChangeEvent,
+ member: TeamMember,
+ ): void => {
+ const { value } = e.target;
+ const updatedMembers = cloneDeep(teamMembersToInvite || []);
+
+ const memberToUpdate = updatedMembers.find((m) => m.id === member.id);
+ if (memberToUpdate) {
+ memberToUpdate.email = value;
+ setTeamMembersToInvite(updatedMembers);
+ debouncedValidateEmail(value, member.id!);
+ }
+ };
+
+ const handleRoleChange = (role: string, member: TeamMember): void => {
+ const updatedMembers = cloneDeep(teamMembersToInvite || []);
+ const memberToUpdate = updatedMembers.find((m) => m.id === member.id);
+ if (memberToUpdate) {
+ memberToUpdate.role = role;
+ setTeamMembersToInvite(updatedMembers);
+ }
+ };
+
+ return (
+
+
+
+
+ {teamMembersToInvite?.map((member) => (
+
+ handleRoleChange(value, member)}
+ className="team-member-role-select"
+ >
+ Viewer
+ Editor
+ Admin
+
+
+ {teamMembersToInvite?.length > 1 && (
+
+ ))}
+
+
+
+
+
+
+ {hasInvalidEmails && (
+
+
+
+
+ )}
+
+ {error && (
+
+
+
+
+ )}
+
+ {hasErrors && (
+ <>
+ {/* show only when invites are sent successfully & partial error is present */}
+ {inviteUsersSuccessResponse && inviteUsersErrorResponse && (
+
+ {inviteUsersSuccessResponse?.map((success, index) => (
+
+
+ ))}
+
+ )}
+
+
+ {inviteUsersErrorResponse?.map((error, index) => (
+
+
+ ))}
+
+
+ )}
+
+
+ {/* Partially sent invites */}
+ {inviteUsersSuccessResponse && inviteUsersErrorResponse && (
+
+
+
+
+
+ You can click on I'll do this later to go to next step.
+
+
+ )}
+
+
+
+
+
+
+ Send Invites
+
+
+
) => void;
+ questionRefs: React.MutableRefObject<(HTMLDivElement | null)[]>;
+}
+
+function QuestionBlock({
+ item,
+ index,
+ currentQuestion,
+ answers,
+ handleOptionChange,
+ animatingOption,
+ searchQuery,
+ handleSearch,
+ questionRefs,
+}: QuestionBlockProps): JSX.Element {
+ const [selectedCategory, setSelectedCategory] = useState('All');
+
+ // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+ const handleCategoryClick = (category: string): void => {
+ setSelectedCategory(category);
+ };
+
+ const filteredGroups = item.options.filter(
+ (group) => selectedCategory === 'All' || group.category === selectedCategory,
+ );
+
+ return (
+ {
+ // eslint-disable-next-line no-param-reassign
+ questionRefs.current[index] = el;
+ }}
+ >
+
+ {item.title}
+
+
{item.description}
+
+
+
+
+ {item.uiConfig?.filterByCategory && (
+
+ handleCategoryClick('All')}
+ >
+ All ({item.options.reduce((acc, group) => acc + group.items.length, 0)})
+
+ {item.options.map((group) => (
+ handleCategoryClick(group.category)}
+ >
+ {group.category} ({group.items.length})
+
+ ))}
+
+ )}
+
+
+
= {
[ROUTES.HOME_PAGE]: [QueryParams.resourceAttributes],
[ROUTES.GET_STARTED]: [QueryParams.resourceAttributes],
[ROUTES.ONBOARDING]: [QueryParams.resourceAttributes],
+ [ROUTES.GET_STARTED_WITH_CLOUD]: [QueryParams.resourceAttributes],
[ROUTES.LIST_ALL_ALERT]: [QueryParams.resourceAttributes],
[ROUTES.LIST_LICENSES]: [QueryParams.resourceAttributes],
[ROUTES.LOGIN]: [QueryParams.resourceAttributes],
diff --git a/frontend/src/container/SideNav/menuItems.tsx b/frontend/src/container/SideNav/menuItems.tsx
index b579319f14..145982c2f0 100644
--- a/frontend/src/container/SideNav/menuItems.tsx
+++ b/frontend/src/container/SideNav/menuItems.tsx
@@ -30,6 +30,12 @@ export const getStartedMenuItem = {
icon: = {
[ROUTES.SERVICE_MAP]: 'Service Map',
[ROUTES.USAGE_EXPLORER]: 'Usage Explorer',
[ROUTES.GET_STARTED]: 'Get Started',
+ [ROUTES.GET_STARTED_WITH_CLOUD]: 'Get Started',
[ROUTES.ALL_CHANNELS]: 'Channels',
[ROUTES.SETTINGS]: 'Settings',
[ROUTES.DASHBOARD]: 'Dashboard',
diff --git a/frontend/src/container/TopNav/DateTimeSelection/config.ts b/frontend/src/container/TopNav/DateTimeSelection/config.ts
index 0b8aa90bff..eda6ab99b3 100644
--- a/frontend/src/container/TopNav/DateTimeSelection/config.ts
+++ b/frontend/src/container/TopNav/DateTimeSelection/config.ts
@@ -108,6 +108,7 @@ export const routesToSkip = [
ROUTES.ALL_CHANNELS,
ROUTES.USAGE_EXPLORER,
ROUTES.GET_STARTED,
+ ROUTES.GET_STARTED_WITH_CLOUD,
ROUTES.GET_STARTED_APPLICATION_MONITORING,
ROUTES.GET_STARTED_INFRASTRUCTURE_MONITORING,
ROUTES.GET_STARTED_LOGS_MANAGEMENT,
diff --git a/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts b/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts
index bb24e884e5..3eafb58754 100644
--- a/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts
+++ b/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts
@@ -181,6 +181,7 @@ export const routesToSkip = [
ROUTES.ALL_CHANNELS,
ROUTES.USAGE_EXPLORER,
ROUTES.GET_STARTED,
+ ROUTES.GET_STARTED_WITH_CLOUD,
ROUTES.GET_STARTED_APPLICATION_MONITORING,
ROUTES.GET_STARTED_INFRASTRUCTURE_MONITORING,
ROUTES.GET_STARTED_LOGS_MANAGEMENT,
diff --git a/frontend/src/pages/OnboardingPageV2/OnboardingPageV2.tsx b/frontend/src/pages/OnboardingPageV2/OnboardingPageV2.tsx
new file mode 100644
index 0000000000..fcccbba0f1
--- /dev/null
+++ b/frontend/src/pages/OnboardingPageV2/OnboardingPageV2.tsx
@@ -0,0 +1,7 @@
+import OnboardingAddDataSource from '../../container/OnboardingV2Container/AddDataSource/AddDataSource';
+
+function OnboardingPageV2(): JSX.Element {
+ return {
+ return new Promise((resolve, reject) => {
+ try {
+ const blob = new Blob([content], { type: 'text/plain' });
+ const url = URL.createObjectURL(blob);
+
+ const link = document.createElement('a');
+ link.href = url;
+ link.setAttribute('download', filename);
+ document.body.appendChild(link);
+ link.click();
+
+ // Clean up after the download
+ document.body.removeChild(link);
+ URL.revokeObjectURL(url);
+
+ resolve(); // Resolve the promise when download is triggered
+ } catch (error) {
+ reject(error); // Reject in case of any errors
+ }
+ });
+}
diff --git a/frontend/src/utils/permission/index.ts b/frontend/src/utils/permission/index.ts
index 2377faa1ef..61b607c251 100644
--- a/frontend/src/utils/permission/index.ts
+++ b/frontend/src/utils/permission/index.ts
@@ -87,6 +87,7 @@ export const routePermission: Record = {
TRACE_EXPLORER: ['ADMIN', 'EDITOR', 'VIEWER'],
GET_STARTED: ['ADMIN', 'EDITOR', 'VIEWER'],
ONBOARDING: ['ADMIN'],
+ GET_STARTED_WITH_CLOUD: ['ADMIN', 'EDITOR', 'VIEWER'],
GET_STARTED_APPLICATION_MONITORING: ['ADMIN', 'EDITOR', 'VIEWER'],
GET_STARTED_INFRASTRUCTURE_MONITORING: ['ADMIN', 'EDITOR', 'VIEWER'],
GET_STARTED_LOGS_MANAGEMENT: ['ADMIN', 'EDITOR', 'VIEWER'],