feat: metrics explorer base setup (#7024)

frontend/public/locales/en/titles.json

@@ -57,5 +57,8 @@
 	"ALERT_OVERVIEW": "SigNoz | Alert Rule Overview",
 	"MESSAGING_QUEUES": "SigNoz | Messaging Queues",
 	"INFRASTRUCTURE_MONITORING_HOSTS": "SigNoz | Infra Monitoring",
-	"INFRASTRUCTURE_MONITORING_KUBERNETES": "SigNoz | Infra Monitoring"
+	"INFRASTRUCTURE_MONITORING_KUBERNETES": "SigNoz | Infra Monitoring",
+	"METRICS_EXPLORER": "SigNoz | Metrics Explorer",
+	"METRICS_EXPLORER_EXPLORER": "SigNoz | Metrics Explorer",
+	"METRICS_EXPLORER_VIEWS": "SigNoz | Metrics Explorer"
 }

frontend/src/AppRoutes/pageComponents.ts

@@ -264,3 +264,8 @@ export const CeleryOverview = Loadable(
 			/* webpackChunkName: "CeleryOverview" */ 'pages/Celery/CeleryOverview/CeleryOverview'
 		),
 );
+
+export const MetricsExplorer = Loadable(
+	() =>
+		import(/* webpackChunkName: "MetricsExplorer" */ 'pages/MetricsExplorer'),
+);

frontend/src/AppRoutes/routes.ts

@@ -28,6 +28,7 @@ import {
 	LogsExplorer,
 	LogsIndexToFields,
 	LogsSaveViews,
+	MetricsExplorer,
 	MySettings,
 	NewDashboardPage,
 	OldLogsExplorer,
@@ -435,6 +436,27 @@ const routes: AppRoutes[] = [
 		key: 'INFRASTRUCTURE_MONITORING_KUBERNETES',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.METRICS_EXPLORER,
+		exact: true,
+		component: MetricsExplorer,
+		key: 'METRICS_EXPLORER',
+		isPrivate: true,
+	},
+	{
+		path: ROUTES.METRICS_EXPLORER_EXPLORER,
+		exact: true,
+		component: MetricsExplorer,
+		key: 'METRICS_EXPLORER_EXPLORER',
+		isPrivate: true,
+	},
+	{
+		path: ROUTES.METRICS_EXPLORER_VIEWS,
+		exact: true,
+		component: MetricsExplorer,
+		key: 'METRICS_EXPLORER_VIEWS',
+		isPrivate: true,
+	},
 ];
 
 export const SUPPORT_ROUTE: AppRoutes = {

frontend/src/constants/routes.ts

@@ -65,6 +65,9 @@ const ROUTES = {
 	INFRASTRUCTURE_MONITORING_KUBERNETES: '/infrastructure-monitoring/kubernetes',
 	MESSAGING_QUEUES_CELERY_TASK: '/messaging-queues/celery-task',
 	MESSAGING_QUEUES_OVERVIEW: '/messaging-queues/overview',
+	METRICS_EXPLORER: '/metrics-explorer/summary',
+	METRICS_EXPLORER_EXPLORER: '/metrics-explorer/explorer',
+	METRICS_EXPLORER_VIEWS: '/metrics-explorer/views',
 } as const;
 
 export default ROUTES;

frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx

@@ -0,0 +1,12 @@
+import * as Sentry from '@sentry/react';
+import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+
+function Explorer(): JSX.Element {
+	return (
+		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
+			Explorer
+		</Sentry.ErrorBoundary>
+	);
+}
+
+export default Explorer;

frontend/src/container/MetricsExplorer/Explorer/index.ts

@@ -0,0 +1,3 @@
+import Explorer from './Explorer';
+
+export default Explorer;

frontend/src/container/MetricsExplorer/Summary/Summary.tsx

@@ -0,0 +1,12 @@
+import * as Sentry from '@sentry/react';
+import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+
+function Summary(): JSX.Element {
+	return (
+		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
+			Summary
+		</Sentry.ErrorBoundary>
+	);
+}
+
+export default Summary;

frontend/src/container/MetricsExplorer/Summary/index.ts

@@ -0,0 +1,3 @@
+import Summary from './Summary';
+
+export default Summary;

frontend/src/container/MetricsExplorer/Views/Views.tsx

@@ -0,0 +1,12 @@
+import * as Sentry from '@sentry/react';
+import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+
+function Views(): JSX.Element {
+	return (
+		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
+			Views
+		</Sentry.ErrorBoundary>
+	);
+}
+
+export default Views;

frontend/src/container/MetricsExplorer/Views/index.ts

@@ -0,0 +1,3 @@
+import Views from './Views';
+
+export default Views;

frontend/src/container/SideNav/menuItems.tsx

@@ -82,6 +82,13 @@ const menuItems: SidebarItem[] = [
 		label: 'Logs',
 		icon: <ScrollText size={16} />,
 	},
+	// TODO - Enable this when the metrics explorer feature is read for release
+	// {
+	// 	key: ROUTES.METRICS_EXPLORER,
+	// 	label: 'Metrics',
+	// 	icon: <BarChart2 size={16} />,
+	// 	isNew: true,
+	// },
 	{
 		key: ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
 		label: 'Infra Monitoring',

frontend/src/container/TopNav/DateTimeSelectionV2/config.ts

@@ -219,6 +219,9 @@ export const routesToSkip = [
 	ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
 	ROUTES.SOMETHING_WENT_WRONG,
 	ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES,
+	ROUTES.METRICS_EXPLORER,
+	ROUTES.METRICS_EXPLORER_EXPLORER,
+	ROUTES.METRICS_EXPLORER_VIEWS,
 ];
 
 export const routesToDisable = [ROUTES.LOGS_EXPLORER, ROUTES.LIVE_LOGS];

frontend/src/pages/MetricsExplorer/MetricsExplorerPage.styles.scss

@@ -0,0 +1,52 @@
+.metrics-explorer-page {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+
+	.ant-tabs {
+		height: 100%;
+	}
+
+	.ant-tabs-nav {
+		padding: 0 8px;
+		margin-bottom: 0px;
+
+		&::before {
+			border-bottom: 1px solid var(--bg-slate-400) !important;
+		}
+	}
+
+	.ant-tabs-content-holder {
+		display: flex;
+
+		.ant-tabs-content {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+
+			.ant-tabs-tabpane {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+			}
+		}
+	}
+
+	.tab-item {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap: 8px;
+	}
+}
+
+.lightMode {
+	.metrics-explorer-page {
+		.ant-tabs-nav {
+			&::before {
+				border-bottom: 1px solid var(--bg-vanilla-300) !important;
+			}
+		}
+	}
+}

frontend/src/pages/MetricsExplorer/MetricsExplorerPage.tsx

@@ -0,0 +1,22 @@
+import './MetricsExplorerPage.styles.scss';
+
+import RouteTab from 'components/RouteTab';
+import { TabRoutes } from 'components/RouteTab/types';
+import history from 'lib/history';
+import { useLocation } from 'react-use';
+
+import { Explorer, Summary, Views } from './constants';
+
+function MetricsExplorerPage(): JSX.Element {
+	const { pathname } = useLocation();
+
+	const routes: TabRoutes[] = [Summary, Explorer, Views];
+
+	return (
+		<div className="metrics-explorer-page">
+			<RouteTab routes={routes} activeKey={pathname} history={history} />
+		</div>
+	);
+}
+
+export default MetricsExplorerPage;

frontend/src/pages/MetricsExplorer/constants.tsx

@@ -0,0 +1,39 @@
+import { TabRoutes } from 'components/RouteTab/types';
+import ROUTES from 'constants/routes';
+import ExplorerPage from 'container/MetricsExplorer/Explorer';
+import SummaryPage from 'container/MetricsExplorer/Summary';
+import ViewsPage from 'container/MetricsExplorer/Views';
+import { BarChart2, Compass, TowerControl } from 'lucide-react';
+
+export const Summary: TabRoutes = {
+	Component: SummaryPage,
+	name: (
+		<div className="tab-item">
+			<BarChart2 size={16} /> Summary
+		</div>
+	),
+	route: ROUTES.METRICS_EXPLORER,
+	key: ROUTES.METRICS_EXPLORER,
+};
+
+export const Explorer: TabRoutes = {
+	Component: ExplorerPage,
+	name: (
+		<div className="tab-item">
+			<Compass size={16} /> Explorer
+		</div>
+	),
+	route: ROUTES.METRICS_EXPLORER_EXPLORER,
+	key: ROUTES.METRICS_EXPLORER_EXPLORER,
+};
+
+export const Views: TabRoutes = {
+	Component: ViewsPage,
+	name: (
+		<div className="tab-item">
+			<TowerControl size={16} /> Views
+		</div>
+	),
+	route: ROUTES.METRICS_EXPLORER_VIEWS,
+	key: ROUTES.METRICS_EXPLORER_VIEWS,
+};

frontend/src/pages/MetricsExplorer/index.ts

@@ -0,0 +1,3 @@
+import MetricsExplorer from './MetricsExplorerPage';
+
+export default MetricsExplorer;

frontend/src/utils/permission/index.ts

@@ -110,4 +110,7 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	INFRASTRUCTURE_MONITORING_KUBERNETES: ['ADMIN', 'EDITOR', 'VIEWER'],
 	MESSAGING_QUEUES_CELERY_TASK: ['ADMIN', 'EDITOR', 'VIEWER'],
 	MESSAGING_QUEUES_OVERVIEW: ['ADMIN', 'EDITOR', 'VIEWER'],
+	METRICS_EXPLORER: ['ADMIN', 'EDITOR', 'VIEWER'],
+	METRICS_EXPLORER_EXPLORER: ['ADMIN', 'EDITOR', 'VIEWER'],
+	METRICS_EXPLORER_VIEWS: ['ADMIN', 'EDITOR', 'VIEWER'],
 };