diff --git a/frontend/public/locales/en/titles.json b/frontend/public/locales/en/titles.json index 766352a44a..a75e02b274 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 8bccc4c50f..c1385e8bdf 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 37bcee42a4..ace656085c 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 bd6a4f97bc..5c40f1ddd4 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 0000000000..753e635942 --- /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 0000000000..8473e81d46 --- /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 0000000000..df1396dbc7 --- /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 0000000000..ae90b3f801 --- /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 0000000000..4b2bf65263 --- /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 0000000000..7893d1b90a --- /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 c2b8f3c401..b579319f14 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 56ca05c94b..4a63dbba33 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 0000000000..333bf1b902 --- /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 0000000000..7a13a65ac9 --- /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 0000000000..a1c12d0906 --- /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 0000000000..c331fbed3c --- /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 2d61302d48..2377faa1ef 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'], };