chore: address comments

frontend/src/container/MetricsExplorer/MetricDetails/AllAttributes.tsx

@@ -21,7 +21,7 @@ import ROUTES from '../../../constants/routes';
 import { useHandleExplorerTabChange } from '../../../hooks/useHandleExplorerTabChange';
 import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
 import { AllAttributesProps, AllAttributesValueProps } from './types';
-import { getMetricDetailsQuery, transformMetricAttributes } from './utils';
+import { getMetricDetailsQuery } from './utils';
 import { useGetMetricAttributes } from 'api/generated/services/metrics';
 
 const ALL_ATTRIBUTES_KEY = 'all-attributes';
@@ -143,7 +143,10 @@ function AllAttributes({
 		}
 	}, [getMetricAttributes, metricName]);
 
-	const { attributes } = transformMetricAttributes(attributesData?.data);
+	const attributes = useMemo(
+		() => attributesData?.data?.data?.attributes ?? [],
+		[attributesData],
+	);
 
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 
@@ -205,7 +208,7 @@ function AllAttributes({
 			attributes.filter(
 				(attribute) =>
 					attribute.key.toLowerCase().includes(searchString.toLowerCase()) ||
-					attribute.values.some((value) =>
+					attribute.values?.some((value) =>
 						value.toLowerCase().includes(searchString.toLowerCase()),
 					),
 			),

frontend/src/container/MetricsExplorer/MetricDetails/DashboardsAndAlertsPopover.tsx

@@ -12,7 +12,6 @@ import { generatePath } from 'react-router-dom';
 import { pluralize } from 'utils/pluralize';
 
 import { DashboardsAndAlertsPopoverProps } from './types';
-import { transformMetricAlerts, transformMetricDashboards } from './utils';
 import {
 	useGetMetricAlerts,
 	useGetMetricDashboards,
@@ -54,8 +53,18 @@ function DashboardsAndAlertsPopover({
 		},
 	);
 
-	const alerts = transformMetricAlerts(alertsData?.data);
-	const dashboards = transformMetricDashboards(dashboardsData?.data);
+	const alerts = useMemo(() => {
+		return alertsData?.data?.data?.alerts ?? [];
+	}, [alertsData]);
+
+	const dashboards = useMemo(() => {
+		const currentDashboards = dashboardsData?.data?.data?.dashboards ?? [];
+		// Remove duplicate dashboards
+		return currentDashboards.filter(
+			(dashboard, index, self) =>
+				index === self.findIndex((t) => t.dashboardId === dashboard.dashboardId),
+		);
+	}, [dashboardsData]);
 
 	const alertsPopoverContent = useMemo(() => {
 		if (alerts && alerts.length > 0) {
@@ -134,7 +143,7 @@ function DashboardsAndAlertsPopover({
 					>
 						<Grid size={12} color={Color.BG_SIENNA_500} />
 						<Typography.Text>
-							{pluralize(dashboards.length, 'dashboard', 'dashboards')}
+							{pluralize(dashboards.length, 'dashboard')}
 						</Typography.Text>
 					</div>
 				</Dropdown>
@@ -153,7 +162,7 @@ function DashboardsAndAlertsPopover({
 					>
 						<Bell size={12} color={Color.BG_SAKURA_500} />
 						<Typography.Text>
-							{pluralize(alerts.length, 'alert rule', 'alert rules')}
+							{pluralize(alerts.length, 'alert rule')}
 						</Typography.Text>
 					</div>
 				</Dropdown>

frontend/src/container/MetricsExplorer/MetricDetails/Highlights.tsx

@@ -6,7 +6,6 @@ import { HighlightsProps } from './types';
 import {
 	formatNumberToCompactFormat,
 	formatTimestampToReadableDate,
-	transformMetricHighlights,
 } from './utils';
 import { useGetMetricHighlights } from 'api/generated/services/metrics';
 
@@ -26,7 +25,9 @@ function Highlights({ metricName }: HighlightsProps): JSX.Element {
 		},
 	);
 
-	const metricHighlights = transformMetricHighlights(metricHighlightsData?.data);
+	const metricHighlights = useMemo(() => {
+		return metricHighlightsData?.data?.data ?? null;
+	}, [metricHighlightsData]);
 
 	const dataPoints = useMemo(() => {
 		if (!metricHighlights) {
@@ -39,7 +40,7 @@ function Highlights({ metricName }: HighlightsProps): JSX.Element {
 		}
 		return (
 			<Typography.Text className="metric-details-grid-value">
-				<Tooltip title={metricHighlights?.dataPoints.toLocaleString()}>
+				<Tooltip title={metricHighlights?.dataPoints?.toLocaleString()}>
 					{formatNumberIntoHumanReadableFormat(metricHighlights?.dataPoints ?? 0)}
 				</Tooltip>
 			</Typography.Text>

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

@@ -1,3 +1,9 @@
+import {
+	MetricsexplorertypesMetricAlertDTO,
+	MetricsexplorertypesMetricAttributeDTO,
+	MetricsexplorertypesMetricDashboardDTO,
+	MetricsexplorertypesMetricHighlightsResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import { Temporality } from 'api/metricsExplorer/getMetricDetails';
 import { MetricType } from 'api/metricsExplorer/getMetricsList';
 
@@ -34,24 +40,11 @@ export interface AllAttributesValueProps {
 	goToMetricsExploreWithAppliedAttribute: (key: string, value: string) => void;
 }
 
-export interface MetricHighlight {
-	dataPoints: number;
-	lastReceived: number;
-	totalTimeSeries: number;
-	activeTimeSeries: number;
-}
+export type MetricHighlight = MetricsexplorertypesMetricHighlightsResponseDTO;
 
-export interface MetricAlert {
-	alertName: string;
-	alertId: string;
-}
+export type MetricAlert = MetricsexplorertypesMetricAlertDTO;
 
-export interface MetricDashboard {
-	dashboardName: string;
-	dashboardId: string;
-	widgetId: string;
-	widgetName: string;
-}
+export type MetricDashboard = MetricsexplorertypesMetricDashboardDTO;
 
 export interface MetricMetadata {
 	metricType: MetricType;
@@ -68,11 +61,7 @@ export interface MetricMetadataState {
 	unit: string | undefined;
 }
 
-export interface MetricAttribute {
-	key: string;
-	values: string[];
-	valueCount: number;
-}
+export type MetricAttribute = MetricsexplorertypesMetricAttributeDTO;
 
 export enum TableFields {
 	DESCRIPTION = 'description',

frontend/src/container/MetricsExplorer/MetricDetails/utils.tsx

@@ -186,59 +186,6 @@ export function getMetricDetailsQuery(
 	};
 }
 
-export function transformMetricHighlights(
-	apiData: GetMetricHighlights200 | undefined,
-): MetricHighlight | null {
-	if (!apiData || !apiData.data) {
-		return null;
-	}
-
-	const {
-		dataPoints,
-		lastReceived,
-		totalTimeSeries,
-		activeTimeSeries,
-	} = apiData.data;
-
-	return {
-		dataPoints: dataPoints ?? 0,
-		lastReceived: lastReceived ?? 0,
-		totalTimeSeries: totalTimeSeries ?? 0,
-		activeTimeSeries: activeTimeSeries ?? 0,
-	};
-}
-
-export function transformMetricAlerts(
-	apiData: GetMetricAlerts200 | undefined,
-): MetricAlert[] {
-	if (!apiData || !apiData.data || !apiData.data.alerts) {
-		return [];
-	}
-	return apiData.data.alerts.map((alert) => ({
-		alertName: alert.alertName ?? '',
-		alertId: alert.alertId ?? '',
-	}));
-}
-
-export function transformMetricDashboards(
-	apiData: GetMetricDashboards200 | undefined,
-): MetricDashboard[] {
-	if (!apiData || !apiData.data || !apiData.data.dashboards) {
-		return [];
-	}
-	const dashboards = apiData.data.dashboards.map((dashboard) => ({
-		dashboardName: dashboard.dashboardName ?? '',
-		dashboardId: dashboard.dashboardId ?? '',
-		widgetId: dashboard.widgetId ?? '',
-		widgetName: dashboard.widgetName ?? '',
-	}));
-	// Remove duplicate dashboards
-	return dashboards.filter(
-		(dashboard, index, self) =>
-			index === self.findIndex((t) => t.dashboardId === dashboard.dashboardId),
-	);
-}
-
 export function transformTemporality(
 	temporality: string | undefined,
 ): Temporality {
@@ -300,21 +247,3 @@ export function transformUpdateMetricMetadataRequest(
 		),
 	};
 }
-
-export function transformMetricAttributes(
-	apiData: GetMetricAttributes200 | undefined,
-): { attributes: MetricAttribute[]; totalKeys: number } {
-	if (!apiData || !apiData.data) {
-		return { attributes: [], totalKeys: 0 };
-	}
-	const { attributes, totalKeys } = apiData.data;
-	return {
-		attributes:
-			attributes?.map((attribute) => ({
-				key: attribute.key ?? '',
-				values: attribute.values ?? [],
-				valueCount: attribute.valueCount ?? 0,
-			})) ?? [],
-		totalKeys: totalKeys ?? 0,
-	};
-}

frontend/src/utils/pluralize.ts

@@ -1,10 +1,13 @@
 export function pluralize(
 	count: number,
 	singular: string,
-	plural: string,
+	plural?: string,
 ): string {
 	if (count === 1) {
 		return `${count} ${singular}`;
 	}
-	return `${count} ${plural}`;
+	if (plural) {
+		return `${count} ${plural}`;
+	}
+	return `${count} ${singular}s`;
 }