diff --git a/frontend/public/Logos/elixir.png b/frontend/public/Logos/elixir.png new file mode 100644 index 0000000000..909a736e0f Binary files /dev/null and b/frontend/public/Logos/elixir.png differ diff --git a/frontend/public/Logos/go.png b/frontend/public/Logos/go.png new file mode 100644 index 0000000000..70f7bd9728 Binary files /dev/null and b/frontend/public/Logos/go.png differ diff --git a/frontend/public/Logos/java.png b/frontend/public/Logos/java.png new file mode 100644 index 0000000000..9e48da3616 Binary files /dev/null and b/frontend/public/Logos/java.png differ diff --git a/frontend/public/Logos/javascript.png b/frontend/public/Logos/javascript.png new file mode 100644 index 0000000000..f58be12e19 Binary files /dev/null and b/frontend/public/Logos/javascript.png differ diff --git a/frontend/public/Logos/ms-net-framework.png b/frontend/public/Logos/ms-net-framework.png new file mode 100644 index 0000000000..5b0baac0de Binary files /dev/null and b/frontend/public/Logos/ms-net-framework.png differ diff --git a/frontend/public/Logos/php.png b/frontend/public/Logos/php.png new file mode 100644 index 0000000000..9abe0a96f6 Binary files /dev/null and b/frontend/public/Logos/php.png differ diff --git a/frontend/public/Logos/python.png b/frontend/public/Logos/python.png new file mode 100644 index 0000000000..664f75d425 Binary files /dev/null and b/frontend/public/Logos/python.png differ diff --git a/frontend/public/Logos/rails.png b/frontend/public/Logos/rails.png new file mode 100644 index 0000000000..0a44785da6 Binary files /dev/null and b/frontend/public/Logos/rails.png differ diff --git a/frontend/public/Logos/rust.png b/frontend/public/Logos/rust.png new file mode 100644 index 0000000000..2637dc9314 Binary files /dev/null and b/frontend/public/Logos/rust.png differ diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts index c9fc9fe90a..6fe138d33b 100644 --- a/frontend/src/constants/routes.ts +++ b/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', diff --git a/frontend/src/container/SideNav/Slack.tsx b/frontend/src/container/SideNav/Slack.tsx index c0abe5d3ba..f4f1e8e5c6 100644 --- a/frontend/src/container/SideNav/Slack.tsx +++ b/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 ( ); } +Slack.defaultProps = { + width: 28, + height: 28, +}; export default Slack; diff --git a/frontend/src/container/SideNav/menuItems.ts b/frontend/src/container/SideNav/menuItems.ts index d3e400dedf..f811c333a3 100644 --- a/frontend/src/container/SideNav/menuItems.ts +++ b/frontend/src/container/SideNav/menuItems.ts @@ -62,7 +62,7 @@ const menus: SidebarMenu[] = [ { Icon: ApiOutlined, to: ROUTES.INSTRUMENTATION, - name: 'Add instrumentation', + name: 'Get Started', }, ]; diff --git a/frontend/src/container/TopNav/Breadcrumbs/index.tsx b/frontend/src/container/TopNav/Breadcrumbs/index.tsx index a79e5e3885..85cb0227a1 100644 --- a/frontend/src/container/TopNav/Breadcrumbs/index.tsx +++ b/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', diff --git a/frontend/src/pages/AddInstrumentation/DocCard.tsx b/frontend/src/pages/AddInstrumentation/DocCard.tsx new file mode 100644 index 0000000000..38bf63c16d --- /dev/null +++ b/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((state) => state.app); + + return ( + + + {icon} + {text} + + + ); +} + +export default DocCard; diff --git a/frontend/src/pages/AddInstrumentation/Section.tsx b/frontend/src/pages/AddInstrumentation/Section.tsx new file mode 100644 index 0000000000..4a90b746de --- /dev/null +++ b/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 ( +
+ {sectionData.heading} + + {sectionData.description && ( + + {sectionData.description} + + )} + {map(sectionData.items, (item, idx) => ( + + + + ))} + +
+ ); +} + +export default DocSection; diff --git a/frontend/src/pages/AddInstrumentation/index.tsx b/frontend/src/pages/AddInstrumentation/index.tsx index f4adc07b2c..5703239b51 100644 --- a/frontend/src/pages/AddInstrumentation/index.tsx +++ b/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((state) => state.app); - return ( <> - Instrument your application - - Congrats, you have successfully installed SigNoz!{' '} - - To start seeing YOUR application data here, follow the instructions in the - docs - - - - https://signoz.io/docs/instrumentation/overview - -  If you face any issues, join our - -  slack community  - - to ask any questions or mail us at  - - support@signoz.io - - + + Congrats, you have successfully installed SigNoz! Now lets get some data in + and start deriving insights from them + + {GetStartedContent().map((section) => { + return ; + })} ); } diff --git a/frontend/src/pages/AddInstrumentation/renderConfig.tsx b/frontend/src/pages/AddInstrumentation/renderConfig.tsx new file mode 100644 index 0000000000..86aa6b5ed7 --- /dev/null +++ b/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: ( + + ), + url: 'https://signoz.io/docs/instrumentation/java/', + }, + { + title: 'Instrument your Python Application', + icon: ( + + ), + url: 'https://signoz.io/docs/instrumentation/python/', + }, + { + title: 'Instrument your JS Application', + icon: ( + + ), + url: 'https://signoz.io/docs/instrumentation/javascript/', + }, + { + title: 'Instrument your Go Application', + icon: ( + + ), + url: 'https://signoz.io/docs/instrumentation/golang/', + }, + { + title: 'Instrument your .NET Application', + icon: ( + + ), + url: 'https://signoz.io/docs/instrumentation/dotnet/', + }, + { + title: 'Instrument your PHP Application', + icon: ( + + ), + url: 'https://signoz.io/docs/instrumentation/php/', + }, + { + title: 'Instrument your Rails Application', + icon: ( + + ), + url: 'https://signoz.io/docs/instrumentation/ruby-on-rails/', + }, + { + title: 'Instrument your Rust Application', + icon: ( + + ), + url: 'https://signoz.io/docs/instrumentation/rust/', + }, + { + title: 'Instrument your Elixir Application', + icon: ( + + ), + url: 'https://signoz.io/docs/instrumentation/elixir/', + }, + ], + }, + { + heading: 'Send Metrics from your Infrastructure & create Dashboards', + items: [ + { + title: 'Send metrics to SigNoz', + icon: , + url: 'https://signoz.io/docs/userguide/send-metrics/', + }, + { + title: 'Create and Manage Dashboards', + icon: , + url: 'https://signoz.io/docs/userguide/manage-dashboards-and-panels/', + }, + ], + }, + { + heading: 'Send your logs to SigNoz', + items: [ + { + title: 'Send your logs to SigNoz', + icon: , + url: 'https://signoz.io/docs/userguide/logs/', + }, + { + title: 'Existing log collectors to SigNoz', + icon: , + url: 'https://signoz.io/docs/userguide/fluentbit_to_signoz/', + }, + ], + }, + { + heading: 'Create alerts on Metrics', + items: [ + { + title: 'Create alert rules on metrics', + icon: , + url: 'https://signoz.io/docs/userguide/alerts-management/', + }, + { + title: 'Configure alert notification channels', + icon: , + 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 '} + + #support + + {' or '} + + #general + + + ), + + items: [ + { + title: 'Join SigNoz slack community ', + icon: ( +
+ +
+ ), + url: 'https://signoz.io/slack', + }, + ], + }, + ]; +}; diff --git a/frontend/src/pages/AddInstrumentation/styles.ts b/frontend/src/pages/AddInstrumentation/styles.ts index af4a0bfb29..6e1ec7ad44 100644 --- a/frontend/src/pages/AddInstrumentation/styles.ts +++ b/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; +`; diff --git a/frontend/src/pages/AddInstrumentation/types.ts b/frontend/src/pages/AddInstrumentation/types.ts new file mode 100644 index 0000000000..b544254038 --- /dev/null +++ b/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[]; +}; diff --git a/frontend/src/pages/AddInstrumentation/utmParams.ts b/frontend/src/pages/AddInstrumentation/utmParams.ts new file mode 100644 index 0000000000..1aa01f503b --- /dev/null +++ b/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;