Add SIG-60

frontend/src/assets/index.css

@@ -13,3 +13,10 @@
   .site-layout .site-layout-background {
     background: #fff;
   } */
+.instrument-card{
+	border-radius: 4px;
+	background: #313131;
+	padding: 33px 23px;
+	max-width: 800px;
+	margin-top: 40px;
+}

frontend/src/components/App.tsx

@@ -15,6 +15,7 @@ import {
 	AlignLeftOutlined,
 	AppstoreOutlined,
 	SettingOutlined,
+	ApiOutlined
 } from "@ant-design/icons";
 
 import DateTimeSelector from "Src/components/DateTimeSelector";
@@ -45,6 +46,10 @@ const Signup = React.lazy(() => import("Src/components/Signup"));
 const SettingsPage = React.lazy(
 	() => import("Src/components/settings/settingsPage"),
 );
+
+const IntstrumentationPage = React.lazy(
+	() => import("Src/components/add-instrumentation/instrumentationPage"),
+);
 //PNOTE
 //React. lazy currently only supports default exports. If the module you want to import uses named exports, you can create an intermediate module that reexports it as the default. This ensures that tree shaking keeps working and that you don't pull in unused components.
 
@@ -133,6 +138,11 @@ const App = () => {
 								Settings
 							</NavLink>
 						</Menu.Item>
+						<Menu.Item key="5" icon={<ApiOutlined />}>
+							<NavLink to="/add-instrumentation" style={{ fontSize: 12, textDecoration: "none" }}>
+								Add instrumentation
+							</NavLink>
+						</Menu.Item>
 					</Menu>
 				</Sider>
 				<Layout className="site-layout">
@@ -156,6 +166,7 @@ const App = () => {
 								<Route path="/traces" exact component={TraceDetail} />
 								<Route path="/traces/:id" component={TraceGraph} />
 								<Route path="/settings" exact component={SettingsPage} />
+								<Route path="/add-instrumentation" exact component={IntstrumentationPage} />
 								<Route path="/usage-explorer" component={UsageExplorer} />
 								<Route path="/" component={ServicesTable} />
 								<Route path="/application" exact component={ServicesTable} />

frontend/src/components/AppWrapper.tsx

@@ -5,7 +5,6 @@ import Signup from "./Signup";
 const App = React.lazy(() => import("Src/components/App"));
 
 const AppWrapper = () => {
-	console.log("other");
 	return (
 		<Suspense fallback={<Spin size="large" />}>
 			<Switch>
@@ -16,6 +15,7 @@ const AppWrapper = () => {
 				<Route path="/traces/:id" component={App} />
 				<Route path="/usage-explorer" component={App} />
 				<Route path="/settings" component={App} />
+				<Route path="/instumentation" component={App} />
 				<Route path="/signup" component={Signup} />
 				<Route
 					path="/"

frontend/src/components/ShowBreadcrumbs.tsx

@@ -14,6 +14,7 @@ const breadcrumbNameMap: any = {
 	"/traces": "Traces",
 	"/service-map": "Service Map",
 	"/usage-explorer": "Usage Explorer",
+	"/add-instrumentation": "Add instrumentation",
 	"/settings": "Settings",
 };
 

frontend/src/components/add-instrumentation/instrumentationPage.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from "react";
+import { Form, Input, Space } from "antd";
+import { connect } from "react-redux";
+import { Tooltip } from "antd";
+import {
+	InfoCircleOutlined,
+	EyeTwoTone,
+	EyeInvisibleOutlined,
+} from "@ant-design/icons";
+import { StoreState } from "../../reducers";
+import { useAuthenticationData } from "../../hooks/authentication";
+import { TOKEN_DATE } from "../../../../../sass/frontend/src/constants/accessToken";
+import { Alert } from "antd";
+
+interface SettingsPageProps {}
+
+const layout = {
+	labelCol: { span: 3 },
+	wrapperCol: { span: 6 },
+};
+
+const InstrumentationPage = (props: SettingsPageProps) => {
+
+
+	return (
+		<React.Fragment>
+
+
+			<Space style={{ marginLeft: 60, marginTop: 48, display: 'block' }}>
+				<div>
+					<h2>
+						Instrument your application
+					</h2>
+				</div>
+
+				<div className={"instrument-card"}>
+					Congrats, you have successfully installed SigNoz!<br/>
+					To start seeing YOUR application data here, follow the instructions in the docs -
+					<a href={"https://signoz.io/docs/instrumentation/overview"}> https://signoz.io/docs/instrumentation/overview</a>
+					<br/>
+					If you face any issues, join our <a href={"https://signoz-community.slack.com/join/shared_invite/zt-lrjknbbp-J_mI13rlw8pGF4EWBnorJA"}>
+					slack community</a> to ask any questions or mail us at <a href={"mailto:support@signoz.io"}>
+					support@signoz.io
+				</a>
+				</div>
+			</Space>
+		</React.Fragment>
+	);
+};
+
+const mapStateToProps = (state: StoreState): {} => {
+	return {};
+};
+
+export default connect(mapStateToProps, {})(InstrumentationPage);