From a4ed9e4d4747108367067228d9a6c24365d35a5f Mon Sep 17 00:00:00 2001
From: Amlan Kumar Nandy <45410599+amlannandy@users.noreply.github.com>
Date: Tue, 1 Apr 2025 17:17:38 +0530
Subject: [PATCH] feat: base setup for inspect metrics feature (#7490)
---
.../Inspect/Inspect.styles.scss | 16 +++++++
.../MetricsExplorer/Inspect/Inspect.tsx | 48 +++++++++++++++++++
.../MetricsExplorer/Inspect/constants.ts | 1 +
.../MetricsExplorer/Inspect/index.ts | 3 ++
.../MetricsExplorer/Inspect/types.ts | 5 ++
.../MetricsExplorer/Inspect/utils.tsx | 11 +++++
.../MetricDetails/MetricDetails.styles.scss | 6 +++
.../MetricDetails/MetricDetails.tsx | 29 ++++++++++-
.../MetricsExplorer/MetricDetails/types.ts | 1 +
.../MetricsExplorer/Summary/Summary.tsx | 21 ++++++++
10 files changed, 139 insertions(+), 2 deletions(-)
create mode 100644 frontend/src/container/MetricsExplorer/Inspect/Inspect.styles.scss
create mode 100644 frontend/src/container/MetricsExplorer/Inspect/Inspect.tsx
create mode 100644 frontend/src/container/MetricsExplorer/Inspect/constants.ts
create mode 100644 frontend/src/container/MetricsExplorer/Inspect/index.ts
create mode 100644 frontend/src/container/MetricsExplorer/Inspect/types.ts
create mode 100644 frontend/src/container/MetricsExplorer/Inspect/utils.tsx
diff --git a/frontend/src/container/MetricsExplorer/Inspect/Inspect.styles.scss b/frontend/src/container/MetricsExplorer/Inspect/Inspect.styles.scss
new file mode 100644
index 0000000000..938b5a534b
--- /dev/null
+++ b/frontend/src/container/MetricsExplorer/Inspect/Inspect.styles.scss
@@ -0,0 +1,16 @@
+.inspect-metrics-modal {
+ .inspect-metrics-title {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ gap: 6px;
+
+ .inspect-metrics-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: default;
+ color: var(--text-vanilla-500);
+ }
+ }
+}
diff --git a/frontend/src/container/MetricsExplorer/Inspect/Inspect.tsx b/frontend/src/container/MetricsExplorer/Inspect/Inspect.tsx
new file mode 100644
index 0000000000..443d67ee92
--- /dev/null
+++ b/frontend/src/container/MetricsExplorer/Inspect/Inspect.tsx
@@ -0,0 +1,48 @@
+import './Inspect.styles.scss';
+
+import * as Sentry from '@sentry/react';
+import { Color } from '@signozhq/design-tokens';
+import { Button, Drawer, Typography } from 'antd';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { Compass } from 'lucide-react';
+import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+
+import { InspectProps } from './types';
+
+function Inspect({ metricName, isOpen, onClose }: InspectProps): JSX.Element {
+ const isDarkMode = useIsDarkMode();
+
+ return (
+ }>
+
+ Metrics Explorer —
+ }
+ disabled
+ >
+ Inspect Metric
+
+
+ }
+ open={isOpen}
+ onClose={onClose}
+ style={{
+ overscrollBehavior: 'contain',
+ background: isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100,
+ }}
+ className="inspect-metrics-modal"
+ destroyOnClose
+ >
+ Inspect
+ {metricName}
+
+
+ );
+}
+
+export default Inspect;
diff --git a/frontend/src/container/MetricsExplorer/Inspect/constants.ts b/frontend/src/container/MetricsExplorer/Inspect/constants.ts
new file mode 100644
index 0000000000..be043c09d6
--- /dev/null
+++ b/frontend/src/container/MetricsExplorer/Inspect/constants.ts
@@ -0,0 +1 @@
+export const INSPECT_FEATURE_FLAG_KEY = 'metrics-explorer-inspect-feature-flag';
diff --git a/frontend/src/container/MetricsExplorer/Inspect/index.ts b/frontend/src/container/MetricsExplorer/Inspect/index.ts
new file mode 100644
index 0000000000..635cb052e2
--- /dev/null
+++ b/frontend/src/container/MetricsExplorer/Inspect/index.ts
@@ -0,0 +1,3 @@
+import Inspect from './Inspect';
+
+export default Inspect;
diff --git a/frontend/src/container/MetricsExplorer/Inspect/types.ts b/frontend/src/container/MetricsExplorer/Inspect/types.ts
new file mode 100644
index 0000000000..3d5df05aa8
--- /dev/null
+++ b/frontend/src/container/MetricsExplorer/Inspect/types.ts
@@ -0,0 +1,5 @@
+export type InspectProps = {
+ metricName: string | null;
+ isOpen: boolean;
+ onClose: () => void;
+};
diff --git a/frontend/src/container/MetricsExplorer/Inspect/utils.tsx b/frontend/src/container/MetricsExplorer/Inspect/utils.tsx
new file mode 100644
index 0000000000..175a0d7f6b
--- /dev/null
+++ b/frontend/src/container/MetricsExplorer/Inspect/utils.tsx
@@ -0,0 +1,11 @@
+import { INSPECT_FEATURE_FLAG_KEY } from './constants';
+
+/**
+ * Check if the inspect feature flag is enabled
+ * returns true if the feature flag is enabled, false otherwise
+ * Show the inspect button in metrics explorer if the feature flag is enabled
+ */
+export function isInspectEnabled(): boolean {
+ const featureFlag = localStorage.getItem(INSPECT_FEATURE_FLAG_KEY);
+ return featureFlag === 'true';
+}
diff --git a/frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.styles.scss b/frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.styles.scss
index 31d72ff197..82fd4b77d0 100644
--- a/frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.styles.scss
+++ b/frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.styles.scss
@@ -20,6 +20,12 @@
gap: 4px;
background-color: var(--bg-slate-300);
}
+
+ .inspect-metrics-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
}
.metric-details-content {
diff --git a/frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.tsx b/frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.tsx
index 8473cd68b6..0d0a640b20 100644
--- a/frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.tsx
+++ b/frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.tsx
@@ -2,12 +2,21 @@ import './MetricDetails.styles.scss';
import '../Summary/Summary.styles.scss';
import { Color } from '@signozhq/design-tokens';
-import { Divider, Drawer, Empty, Skeleton, Tooltip, Typography } from 'antd';
+import {
+ Button,
+ Divider,
+ Drawer,
+ Empty,
+ Skeleton,
+ Tooltip,
+ Typography,
+} from 'antd';
import { useGetMetricDetails } from 'hooks/metricsExplorer/useGetMetricDetails';
import { useIsDarkMode } from 'hooks/useDarkMode';
-import { X } from 'lucide-react';
+import { Compass, X } from 'lucide-react';
import { useMemo } from 'react';
+import { isInspectEnabled } from '../Inspect/utils';
import { formatNumberIntoHumanReadableFormat } from '../Summary/utils';
import AllAttributes from './AllAttributes';
import DashboardsAndAlertsPopover from './DashboardsAndAlertsPopover';
@@ -22,6 +31,7 @@ function MetricDetails({
onClose,
isOpen,
metricName,
+ openInspectModal,
}: MetricDetailsProps): JSX.Element {
const isDarkMode = useIsDarkMode();
// const { safeNavigate } = useSafeNavigate();
@@ -43,6 +53,8 @@ function MetricDetails({
return formatTimestampToReadableDate(metric.lastReceived);
}, [metric]);
+ const showInspectFeature = useMemo(() => isInspectEnabled(), []);
+
const isMetricDetailsLoading = isLoading || isFetching;
const timeSeries = useMemo(() => {
@@ -92,6 +104,19 @@ function MetricDetails({
>
Open in Explorer
*/}
+ {/* Show the based on the feature flag. Will remove before releasing the feature */}
+ {showInspectFeature && (
+ }
+ onClick={(): void => {
+ if (metric?.name) {
+ openInspectModal(metric.name);
+ }
+ }}
+ />
+ )}
}
placement="right"
diff --git a/frontend/src/container/MetricsExplorer/MetricDetails/types.ts b/frontend/src/container/MetricsExplorer/MetricDetails/types.ts
index 9dad275610..de4e864f0a 100644
--- a/frontend/src/container/MetricsExplorer/MetricDetails/types.ts
+++ b/frontend/src/container/MetricsExplorer/MetricDetails/types.ts
@@ -10,6 +10,7 @@ export interface MetricDetailsProps {
isOpen: boolean;
metricName: string | null;
isModalTimeSelection: boolean;
+ openInspectModal: (metricName: string) => void;
}
export interface DashboardsAndAlertsPopoverProps {
diff --git a/frontend/src/container/MetricsExplorer/Summary/Summary.tsx b/frontend/src/container/MetricsExplorer/Summary/Summary.tsx
index 30a8fdc1d8..a16acd734a 100644
--- a/frontend/src/container/MetricsExplorer/Summary/Summary.tsx
+++ b/frontend/src/container/MetricsExplorer/Summary/Summary.tsx
@@ -13,6 +13,7 @@ import { AppState } from 'store/reducers';
import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
import { GlobalReducer } from 'types/reducer/globalTime';
+import InspectModal from '../Inspect';
import MetricDetails from '../MetricDetails';
import MetricsSearch from './MetricsSearch';
import MetricsTable from './MetricsTable';
@@ -35,6 +36,7 @@ function Summary(): JSX.Element {
TreemapViewType.TIMESERIES,
);
const [isMetricDetailsOpen, setIsMetricDetailsOpen] = useState(false);
+ const [isInspectModalOpen, setIsInspectModalOpen] = useState(false);
const [selectedMetricName, setSelectedMetricName] = useState(
null,
);
@@ -150,6 +152,17 @@ function Summary(): JSX.Element {
setIsMetricDetailsOpen(false);
};
+ const openInspectModal = (metricName: string): void => {
+ setSelectedMetricName(metricName);
+ setIsInspectModalOpen(true);
+ setIsMetricDetailsOpen(false);
+ };
+
+ const closeInspectModal = (): void => {
+ setIsInspectModalOpen(false);
+ setSelectedMetricName(null);
+ };
+
return (
}>
@@ -184,6 +197,14 @@ function Summary(): JSX.Element {
onClose={closeMetricDetails}
metricName={selectedMetricName}
isModalTimeSelection={false}
+ openInspectModal={openInspectModal}
+ />
+ )}
+ {isInspectModalOpen && (
+
)}