GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 22:49:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: metrics explorer base setup (#7024)

Browse Source
This commit is contained in:
Amlan Kumar Nandy 2025-02-05 18:27:12 +05:30 committed by GitHub
parent f548afe284
commit c7c7b25651
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
17 changed files with 208 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/public/locales/en/titles.json
View File

@ -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"
}

5
frontend/src/AppRoutes/pageComponents.ts
View File

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

22
frontend/src/AppRoutes/routes.ts
View File

@ -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 = {

3
frontend/src/constants/routes.ts
View File

@ -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;

12
frontend/src/container/MetricsExplorer/Explorer/Explorer.tsx Normal file
View File

@ -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;

3
frontend/src/container/MetricsExplorer/Explorer/index.ts Normal file
View File

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

12
frontend/src/container/MetricsExplorer/Summary/Summary.tsx Normal file
View File

@ -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;

3
frontend/src/container/MetricsExplorer/Summary/index.ts Normal file
View File

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

12
frontend/src/container/MetricsExplorer/Views/Views.tsx Normal file
View File

@ -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;

3
frontend/src/container/MetricsExplorer/Views/index.ts Normal file
View File

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

7
frontend/src/container/SideNav/menuItems.tsx
View File

@ -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',

3
frontend/src/container/TopNav/DateTimeSelectionV2/config.ts
View File

@ -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];

52
frontend/src/pages/MetricsExplorer/MetricsExplorerPage.styles.scss Normal file
View File

@ -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;
}
}
}
}

22
frontend/src/pages/MetricsExplorer/MetricsExplorerPage.tsx Normal file
View File

@ -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;

39
frontend/src/pages/MetricsExplorer/constants.tsx Normal file
View File

@ -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,
};

3
frontend/src/pages/MetricsExplorer/index.ts Normal file
View File

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

3
frontend/src/utils/permission/index.ts
View File

@ -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'],
};