feat: base setup for inspect metrics feature (#7490)

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);
+		}
+	}
+}

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 (
+		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
+			<Drawer
+				width="100%"
+				title={
+					<div className="inspect-metrics-title">
+						<Typography.Text>Metrics Explorer —</Typography.Text>
+						<Button
+							className="inspect-metrics-button"
+							size="small"
+							icon={<Compass size={14} />}
+							disabled
+						>
+							Inspect Metric
+						</Button>
+					</div>
+				}
+				open={isOpen}
+				onClose={onClose}
+				style={{
+					overscrollBehavior: 'contain',
+					background: isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100,
+				}}
+				className="inspect-metrics-modal"
+				destroyOnClose
+			>
+				<div>Inspect</div>
+				<div>{metricName}</div>
+			</Drawer>
+		</Sentry.ErrorBoundary>
+	);
+}
+
+export default Inspect;

frontend/src/container/MetricsExplorer/Inspect/constants.ts

@@ -0,0 +1 @@
+export const INSPECT_FEATURE_FLAG_KEY = 'metrics-explorer-inspect-feature-flag';

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

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

frontend/src/container/MetricsExplorer/Inspect/types.ts

@@ -0,0 +1,5 @@
+export type InspectProps = {
+	metricName: string | null;
+	isOpen: boolean;
+	onClose: () => void;
+};

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';
+}

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 {

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
 					</Button> */}
+					{/* Show the based on the feature flag. Will remove before releasing the feature */}
+					{showInspectFeature && (
+						<Button
+							className="inspect-metrics-button"
+							aria-label="Inspect Metric"
+							icon={<Compass size={18} />}
+							onClick={(): void => {
+								if (metric?.name) {
+									openInspectModal(metric.name);
+								}
+							}}
+						/>
+					)}
 				</div>
 			}
 			placement="right"

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 {

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<string | null>(
 		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 (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<div className="metrics-explorer-summary-tab">
@@ -184,6 +197,14 @@ function Summary(): JSX.Element {
 					onClose={closeMetricDetails}
 					metricName={selectedMetricName}
 					isModalTimeSelection={false}
+					openInspectModal={openInspectModal}
+				/>
+			)}
+			{isInspectModalOpen && (
+				<InspectModal
+					isOpen={isInspectModalOpen}
+					onClose={closeInspectModal}
+					metricName={selectedMetricName}
 				/>
 			)}
 		</Sentry.ErrorBoundary>