From c7c7b25651b5396d70ebaeef7631f8d0e2accc0e Mon Sep 17 00:00:00 2001
From: Amlan Kumar Nandy <45410599+amlannandy@users.noreply.github.com>
Date: Wed, 5 Feb 2025 18:27:12 +0530
Subject: [PATCH] feat: metrics explorer base setup (#7024)
---
frontend/public/locales/en/titles.json | 5 +-
frontend/src/AppRoutes/pageComponents.ts | 5 ++
frontend/src/AppRoutes/routes.ts | 22 ++++++++
frontend/src/constants/routes.ts | 3 ++
.../MetricsExplorer/Explorer/Explorer.tsx | 12 +++++
.../MetricsExplorer/Explorer/index.ts | 3 ++
.../MetricsExplorer/Summary/Summary.tsx | 12 +++++
.../MetricsExplorer/Summary/index.ts | 3 ++
.../container/MetricsExplorer/Views/Views.tsx | 12 +++++
.../container/MetricsExplorer/Views/index.ts | 3 ++
frontend/src/container/SideNav/menuItems.tsx | 7 +++
.../TopNav/DateTimeSelectionV2/config.ts | 3 ++
.../MetricsExplorerPage.styles.scss | 52 +++++++++++++++++++
.../MetricsExplorer/MetricsExplorerPage.tsx | 22 ++++++++
.../src/pages/MetricsExplorer/constants.tsx | 39 ++++++++++++++
frontend/src/pages/MetricsExplorer/index.ts | 3 ++
frontend/src/utils/permission/index.ts | 3 ++
17 files changed, 208 insertions(+), 1 deletion(-)
create mode 100644 frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx
create mode 100644 frontend/src/container/MetricsExplorer/Explorer/index.ts
create mode 100644 frontend/src/container/MetricsExplorer/Summary/Summary.tsx
create mode 100644 frontend/src/container/MetricsExplorer/Summary/index.ts
create mode 100644 frontend/src/container/MetricsExplorer/Views/Views.tsx
create mode 100644 frontend/src/container/MetricsExplorer/Views/index.ts
create mode 100644 frontend/src/pages/MetricsExplorer/MetricsExplorerPage.styles.scss
create mode 100644 frontend/src/pages/MetricsExplorer/MetricsExplorerPage.tsx
create mode 100644 frontend/src/pages/MetricsExplorer/constants.tsx
create mode 100644 frontend/src/pages/MetricsExplorer/index.ts
diff --git a/frontend/public/locales/en/titles.json b/frontend/public/locales/en/titles.json
index 766352a44a0..a75e02b2748 100644
--- a/frontend/public/locales/en/titles.json
+++ b/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"
}
diff --git a/frontend/src/AppRoutes/pageComponents.ts b/frontend/src/AppRoutes/pageComponents.ts
index 8bccc4c50fc..c1385e8bdf6 100644
--- a/frontend/src/AppRoutes/pageComponents.ts
+++ b/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'),
+);
diff --git a/frontend/src/AppRoutes/routes.ts b/frontend/src/AppRoutes/routes.ts
index 37bcee42a4f..ace656085ce 100644
--- a/frontend/src/AppRoutes/routes.ts
+++ b/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 = {
diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts
index bd6a4f97bca..5c40f1ddd4e 100644
--- a/frontend/src/constants/routes.ts
+++ b/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;
diff --git a/frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx b/frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx
new file mode 100644
index 00000000000..753e6359429
--- /dev/null
+++ b/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 (
+ }>
+ Explorer
+
+ );
+}
+
+export default Explorer;
diff --git a/frontend/src/container/MetricsExplorer/Explorer/index.ts b/frontend/src/container/MetricsExplorer/Explorer/index.ts
new file mode 100644
index 00000000000..8473e81d460
--- /dev/null
+++ b/frontend/src/container/MetricsExplorer/Explorer/index.ts
@@ -0,0 +1,3 @@
+import Explorer from './Explorer';
+
+export default Explorer;
diff --git a/frontend/src/container/MetricsExplorer/Summary/Summary.tsx b/frontend/src/container/MetricsExplorer/Summary/Summary.tsx
new file mode 100644
index 00000000000..df1396dbc79
--- /dev/null
+++ b/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 (
+ }>
+ Summary
+
+ );
+}
+
+export default Summary;
diff --git a/frontend/src/container/MetricsExplorer/Summary/index.ts b/frontend/src/container/MetricsExplorer/Summary/index.ts
new file mode 100644
index 00000000000..ae90b3f8016
--- /dev/null
+++ b/frontend/src/container/MetricsExplorer/Summary/index.ts
@@ -0,0 +1,3 @@
+import Summary from './Summary';
+
+export default Summary;
diff --git a/frontend/src/container/MetricsExplorer/Views/Views.tsx b/frontend/src/container/MetricsExplorer/Views/Views.tsx
new file mode 100644
index 00000000000..4b2bf652631
--- /dev/null
+++ b/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 (
+ }>
+ Views
+
+ );
+}
+
+export default Views;
diff --git a/frontend/src/container/MetricsExplorer/Views/index.ts b/frontend/src/container/MetricsExplorer/Views/index.ts
new file mode 100644
index 00000000000..7893d1b90ad
--- /dev/null
+++ b/frontend/src/container/MetricsExplorer/Views/index.ts
@@ -0,0 +1,3 @@
+import Views from './Views';
+
+export default Views;
diff --git a/frontend/src/container/SideNav/menuItems.tsx b/frontend/src/container/SideNav/menuItems.tsx
index c2b8f3c401c..b579319f143 100644
--- a/frontend/src/container/SideNav/menuItems.tsx
+++ b/frontend/src/container/SideNav/menuItems.tsx
@@ -82,6 +82,13 @@ const menuItems: SidebarItem[] = [
label: 'Logs',
icon: ,
},
+ // TODO - Enable this when the metrics explorer feature is read for release
+ // {
+ // key: ROUTES.METRICS_EXPLORER,
+ // label: 'Metrics',
+ // icon: ,
+ // isNew: true,
+ // },
{
key: ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
label: 'Infra Monitoring',
diff --git a/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts b/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts
index 56ca05c94b9..4a63dbba33e 100644
--- a/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts
+++ b/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];
diff --git a/frontend/src/pages/MetricsExplorer/MetricsExplorerPage.styles.scss b/frontend/src/pages/MetricsExplorer/MetricsExplorerPage.styles.scss
new file mode 100644
index 00000000000..333bf1b9022
--- /dev/null
+++ b/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;
+ }
+ }
+ }
+}
diff --git a/frontend/src/pages/MetricsExplorer/MetricsExplorerPage.tsx b/frontend/src/pages/MetricsExplorer/MetricsExplorerPage.tsx
new file mode 100644
index 00000000000..7a13a65ac9c
--- /dev/null
+++ b/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 (
+
+
+
+ );
+}
+
+export default MetricsExplorerPage;
diff --git a/frontend/src/pages/MetricsExplorer/constants.tsx b/frontend/src/pages/MetricsExplorer/constants.tsx
new file mode 100644
index 00000000000..a1c12d09067
--- /dev/null
+++ b/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: (
+
+ Summary
+
+ ),
+ route: ROUTES.METRICS_EXPLORER,
+ key: ROUTES.METRICS_EXPLORER,
+};
+
+export const Explorer: TabRoutes = {
+ Component: ExplorerPage,
+ name: (
+
+ Explorer
+
+ ),
+ route: ROUTES.METRICS_EXPLORER_EXPLORER,
+ key: ROUTES.METRICS_EXPLORER_EXPLORER,
+};
+
+export const Views: TabRoutes = {
+ Component: ViewsPage,
+ name: (
+
+ Views
+
+ ),
+ route: ROUTES.METRICS_EXPLORER_VIEWS,
+ key: ROUTES.METRICS_EXPLORER_VIEWS,
+};
diff --git a/frontend/src/pages/MetricsExplorer/index.ts b/frontend/src/pages/MetricsExplorer/index.ts
new file mode 100644
index 00000000000..c331fbed3c6
--- /dev/null
+++ b/frontend/src/pages/MetricsExplorer/index.ts
@@ -0,0 +1,3 @@
+import MetricsExplorer from './MetricsExplorerPage';
+
+export default MetricsExplorer;
diff --git a/frontend/src/utils/permission/index.ts b/frontend/src/utils/permission/index.ts
index 2d61302d48b..2377faa1ef2 100644
--- a/frontend/src/utils/permission/index.ts
+++ b/frontend/src/utils/permission/index.ts
@@ -110,4 +110,7 @@ export const routePermission: Record = {
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'],
};