feat: getting started page (SigNoz#1560)

Co-authored-by: palashgdev <palashgdev@gmail.com>

frontend/src/constants/routes.ts

@@ -6,7 +6,7 @@ const ROUTES = {
 	TRACE: '/trace',
 	TRACE_DETAIL: '/trace/:id',
 	SETTINGS: '/settings',
-	INSTRUMENTATION: '/add-instrumentation',
+	INSTRUMENTATION: '/get-started',
 	USAGE_EXPLORER: '/usage-explorer',
 	APPLICATION: '/application',
 	ALL_DASHBOARD: '/dashboard',

frontend/src/container/SideNav/Slack.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
 
-function Slack(): JSX.Element {
+interface ISlackProps {
+	width?: number;
+	height?: number;
+}
+function Slack({ width, height }: ISlackProps): JSX.Element {
 	return (
 		<svg
-			width="28"
-			height="28"
+			width={`${width}`}
+			height={`${height}`}
 			viewBox="0 0 28 28"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
@@ -44,5 +48,9 @@ function Slack(): JSX.Element {
 		</svg>
 	);
 }
+Slack.defaultProps = {
+	width: 28,
+	height: 28,
+};
 
 export default Slack;

frontend/src/container/SideNav/menuItems.ts

@@ -62,7 +62,7 @@ const menus: SidebarMenu[] = [
 	{
 		Icon: ApiOutlined,
 		to: ROUTES.INSTRUMENTATION,
-		name: 'Add instrumentation',
+		name: 'Get Started',
 	},
 ];
 

frontend/src/container/TopNav/Breadcrumbs/index.tsx

@@ -8,7 +8,7 @@ const breadcrumbNameMap = {
 	[ROUTES.TRACE]: 'Traces',
 	[ROUTES.SERVICE_MAP]: 'Service Map',
 	[ROUTES.USAGE_EXPLORER]: 'Usage Explorer',
-	[ROUTES.INSTRUMENTATION]: 'Add instrumentation',
+	[ROUTES.INSTRUMENTATION]: 'Get Started',
 	[ROUTES.SETTINGS]: 'Settings',
 	[ROUTES.DASHBOARD]: 'Dashboard',
 	[ROUTES.ALL_ERROR]: 'Exceptions',

frontend/src/pages/AddInstrumentation/DocCard.tsx

@@ -0,0 +1,30 @@
+import { Typography } from 'antd';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { Link } from 'react-router-dom';
+import { AppState } from 'store/reducers';
+import AppReducer from 'types/reducer/app';
+
+import { DocCardContainer } from './styles';
+import { TGetStartedContentDoc } from './types';
+import UTMParams from './utmParams';
+
+interface IDocCardProps {
+	text: TGetStartedContentDoc['title'];
+	icon: TGetStartedContentDoc['icon'];
+	url: TGetStartedContentDoc['url'];
+}
+function DocCard({ icon, text, url }: IDocCardProps): JSX.Element {
+	const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
+
+	return (
+		<Link to={{ pathname: `${url}${UTMParams}` }} target="_blank">
+			<DocCardContainer isDarkMode={isDarkMode}>
+				<span style={{ color: isDarkMode ? '#ddd' : '#333' }}>{icon}</span>
+				<Typography.Text style={{ marginLeft: '0.5rem' }}>{text}</Typography.Text>
+			</DocCardContainer>
+		</Link>
+	);
+}
+
+export default DocCard;

frontend/src/pages/AddInstrumentation/Section.tsx

@@ -0,0 +1,43 @@
+import { Col, Row, Typography } from 'antd';
+import { map } from 'lodash-es';
+import React from 'react';
+
+import DocCard from './DocCard';
+import { TGetStartedContentSection } from './types';
+
+interface IDocSectionProps {
+	sectionData: TGetStartedContentSection;
+}
+
+function DocSection({ sectionData }: IDocSectionProps): JSX.Element {
+	return (
+		<div style={{ marginTop: '2rem' }}>
+			<Typography.Text strong>{sectionData.heading}</Typography.Text>
+			<Row
+				gutter={{ xs: 0, sm: 8, md: 16, lg: 24 }}
+				style={{ padding: '0 3%', marginTop: '0.5rem' }}
+			>
+				{sectionData.description && (
+					<Col span={24}>
+						<Typography.Text>{sectionData.description}</Typography.Text>
+					</Col>
+				)}
+				{map(sectionData.items, (item, idx) => (
+					<Col
+						key={`${item.title}+${idx}`}
+						sm={24}
+						md={12}
+						lg={12}
+						xl={8}
+						xxl={6}
+						style={{ margin: '1rem 0' }}
+					>
+						<DocCard icon={item.icon} text={item.title} url={item.url} />
+					</Col>
+				))}
+			</Row>
+		</div>
+	);
+}
+
+export default DocSection;

frontend/src/pages/AddInstrumentation/index.tsx

@@ -1,43 +1,19 @@
 import { Typography } from 'antd';
 import React from 'react';
-import { useSelector } from 'react-redux';
-import { AppState } from 'store/reducers';
-import AppReducer from 'types/reducer/app';
 
-import { Container, Heading } from './styles';
+import { GetStartedContent } from './renderConfig';
+import DocSection from './Section';
 
 function InstrumentationPage(): JSX.Element {
-	const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
-
 	return (
 		<>
-			<Heading>Instrument your application</Heading>
-			<Container isDarkMode={isDarkMode}>
-				<Typography>Congrats, you have successfully installed SigNoz!</Typography>{' '}
-				<Typography>
-					To start seeing YOUR application data here, follow the instructions in the
-					docs -
-				</Typography>
-				<a
-					href="https://signoz.io/docs/instrumentation/overview"
-					target="_blank"
-					rel="noreferrer"
-				>
-					https://signoz.io/docs/instrumentation/overview
-				</a>
-				&nbsp;If you face any issues, join our
-				<a
-					href="https://signoz-community.slack.com/join/shared_invite/zt-lrjknbbp-J_mI13rlw8pGF4EWBnorJA"
-					target="_blank"
-					rel="noreferrer"
-				>
-					&nbsp;slack community&nbsp;
-				</a>
-				to ask any questions or mail us at&nbsp;
-				<a href="mailto:support@signoz.io" target="_blank" rel="noreferrer">
-					support@signoz.io
-				</a>
-			</Container>
+			<Typography>
+				Congrats, you have successfully installed SigNoz! Now lets get some data in
+				and start deriving insights from them
+			</Typography>
+			{GetStartedContent().map((section) => {
+				return <DocSection key={section.heading} sectionData={section} />;
+			})}
 		</>
 	);
 }

frontend/src/pages/AddInstrumentation/renderConfig.tsx

@@ -0,0 +1,175 @@
+import {
+	AlertFilled,
+	AlignLeftOutlined,
+	ApiFilled,
+	BarChartOutlined,
+	DashboardFilled,
+	SoundFilled,
+} from '@ant-design/icons';
+import { Typography } from 'antd';
+import Slack from 'container/SideNav/Slack';
+import React from 'react';
+import store from 'store';
+
+import { TGetStartedContentSection } from './types';
+
+export const GetStartedContent = (): TGetStartedContentSection[] => {
+	const {
+		app: { currentVersion },
+	} = store.getState();
+	return [
+		{
+			heading: 'Send data from your applications to SigNoz',
+			items: [
+				{
+					title: 'Instrument your Java Application',
+					icon: (
+						<img src={`/Logos/java.png?currentVersion=${currentVersion}`} alt="" />
+					),
+					url: 'https://signoz.io/docs/instrumentation/java/',
+				},
+				{
+					title: 'Instrument your Python Application',
+					icon: (
+						<img src={`/Logos/python.png?currentVersion=${currentVersion}`} alt="" />
+					),
+					url: 'https://signoz.io/docs/instrumentation/python/',
+				},
+				{
+					title: 'Instrument your JS Application',
+					icon: (
+						<img
+							src={`/Logos/javascript.png?currentVersion=${currentVersion}`}
+							alt=""
+						/>
+					),
+					url: 'https://signoz.io/docs/instrumentation/javascript/',
+				},
+				{
+					title: 'Instrument your Go Application',
+					icon: (
+						<img src={`/Logos/go.png?currentVersion=${currentVersion}`} alt="" />
+					),
+					url: 'https://signoz.io/docs/instrumentation/golang/',
+				},
+				{
+					title: 'Instrument your .NET Application',
+					icon: (
+						<img
+							src={`/Logos/ms-net-framework.png?currentVersion=${currentVersion}`}
+							alt=""
+						/>
+					),
+					url: 'https://signoz.io/docs/instrumentation/dotnet/',
+				},
+				{
+					title: 'Instrument your PHP Application',
+					icon: (
+						<img src={`/Logos/php.png?currentVersion=${currentVersion}`} alt="" />
+					),
+					url: 'https://signoz.io/docs/instrumentation/php/',
+				},
+				{
+					title: 'Instrument your Rails Application',
+					icon: (
+						<img src={`/Logos/rails.png?currentVersion=${currentVersion}`} alt="" />
+					),
+					url: 'https://signoz.io/docs/instrumentation/ruby-on-rails/',
+				},
+				{
+					title: 'Instrument your Rust Application',
+					icon: (
+						<img src={`/Logos/rust.png?currentVersion=${currentVersion}`} alt="" />
+					),
+					url: 'https://signoz.io/docs/instrumentation/rust/',
+				},
+				{
+					title: 'Instrument your Elixir Application',
+					icon: (
+						<img src={`/Logos/elixir.png?currentVersion=${currentVersion}`} alt="" />
+					),
+					url: 'https://signoz.io/docs/instrumentation/elixir/',
+				},
+			],
+		},
+		{
+			heading: 'Send Metrics from your Infrastructure & create Dashboards',
+			items: [
+				{
+					title: 'Send metrics to SigNoz',
+					icon: <BarChartOutlined style={{ fontSize: '3.5rem' }} />,
+					url: 'https://signoz.io/docs/userguide/send-metrics/',
+				},
+				{
+					title: 'Create and Manage Dashboards',
+					icon: <DashboardFilled style={{ fontSize: '3.5rem' }} />,
+					url: 'https://signoz.io/docs/userguide/manage-dashboards-and-panels/',
+				},
+			],
+		},
+		{
+			heading: 'Send your logs to SigNoz',
+			items: [
+				{
+					title: 'Send your logs to SigNoz',
+					icon: <AlignLeftOutlined style={{ fontSize: '3.5rem' }} />,
+					url: 'https://signoz.io/docs/userguide/logs/',
+				},
+				{
+					title: 'Existing log collectors to SigNoz',
+					icon: <ApiFilled style={{ fontSize: '3.5rem' }} />,
+					url: 'https://signoz.io/docs/userguide/fluentbit_to_signoz/',
+				},
+			],
+		},
+		{
+			heading: 'Create alerts on Metrics',
+			items: [
+				{
+					title: 'Create alert rules on metrics',
+					icon: <AlertFilled style={{ fontSize: '3.5rem' }} />,
+					url: 'https://signoz.io/docs/userguide/alerts-management/',
+				},
+				{
+					title: 'Configure alert notification channels',
+					icon: <SoundFilled style={{ fontSize: '3.5rem' }} />,
+					url:
+						'https://signoz.io/docs/userguide/alerts-management/#setting-up-a-notification-channel',
+				},
+			],
+		},
+		{
+			heading: 'Need help?',
+			description: (
+				<>
+					{'Join our slack community and ask any question you may have on '}
+					<Typography.Link
+						href="https://signoz-community.slack.com/archives/C01HWUTP4HH"
+						target="_blank"
+					>
+						#support
+					</Typography.Link>
+					{' or '}
+					<Typography.Link
+						href="https://signoz-community.slack.com/archives/C01HWQ1R0BC"
+						target="_blank"
+					>
+						#general
+					</Typography.Link>
+				</>
+			),
+
+			items: [
+				{
+					title: 'Join SigNoz slack community ',
+					icon: (
+						<div style={{ padding: '0.7rem' }}>
+							<Slack width={30} height={30} />
+						</div>
+					),
+					url: 'https://signoz.io/slack',
+				},
+			],
+		},
+	];
+};

frontend/src/pages/AddInstrumentation/styles.ts

@@ -1,4 +1,4 @@
-import { Card, Typography } from 'antd';
+import { Card, Row, Typography } from 'antd';
 import styled from 'styled-components';
 
 interface Props {
@@ -18,3 +18,13 @@ export const Heading = styled(Typography)`
 		margin-bottom: 1rem;
 	}
 `;
+
+export const DocCardContainer = styled(Row)<{
+	isDarkMode: boolean;
+}>`
+	display: flex;
+	border: 1px solid ${({ isDarkMode }): string => (isDarkMode ? '#444' : '#ccc')};
+	border-radius: 0.2rem;
+	align-items: center;
+	padding: 0.5rem 0.25rem;
+`;

frontend/src/pages/AddInstrumentation/types.ts

@@ -0,0 +1,10 @@
+export type TGetStartedContentDoc = {
+	title: string;
+	icon: JSX.Element;
+	url: string;
+};
+export type TGetStartedContentSection = {
+	heading: string;
+	description?: string | JSX.Element;
+	items: TGetStartedContentDoc[];
+};

frontend/src/pages/AddInstrumentation/utmParams.ts

@@ -0,0 +1,3 @@
+const UTMParams =
+	'?utm_source=instrumentation_page&utm_medium=frontend&utm_term=language';
+export default UTMParams;