feat: get labels and all possible values from /timeline API

SigNoz · Sep 9, 2024 · 074796f · 074796f
1 parent d585234
commit 074796f
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 41 deletions.
diff --git a/frontend/src/container/AlertHistory/Timeline/Table/Table.tsx b/frontend/src/container/AlertHistory/Timeline/Table/Table.tsx
@@ -6,8 +6,7 @@ import {
 	useGetAlertRuleDetailsTimelineTable,
 	useTimelineTable,
 } from 'pages/AlertDetails/hooks';
-import { useAlertRule } from 'providers/Alert';
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
@@ -25,11 +24,12 @@ function TimelineTable(): JSX.Element {
 		ruleId,
 	} = useGetAlertRuleDetailsTimelineTable({ filters });
 
-	const { timelineData, totalItems } = useMemo(() => {
+	const { timelineData, totalItems, labels } = useMemo(() => {
 		const response = data?.payload?.data;
 		return {
 			timelineData: response?.items,
 			totalItems: response?.total,
+			labels: response?.labels,
 		};
 	}, [data?.payload?.data]);
 
@@ -38,17 +38,6 @@ function TimelineTable(): JSX.Element {
 	});
 
 	const { t } = useTranslation('common');
-	const { setAlertRuleLabels } = useAlertRule();
-
-	useEffect(() => {
-		const labelsFromFirstItem = data?.payload?.data?.items?.[0]?.labels ?? {};
-
-		if (ruleId && Object.keys(labelsFromFirstItem).length > 0) {
-			setAlertRuleLabels((prevLabels) =>
-				new Map(prevLabels).set(ruleId, labelsFromFirstItem),
-			);
-		}
-	}, [data, setAlertRuleLabels, ruleId]);
 
 	if (isError || !isValidRuleId || !ruleId) {
 		return <div>{t('something_went_wrong')}</div>;
@@ -60,6 +49,7 @@ function TimelineTable(): JSX.Element {
 				rowKey={(row): string => `${row.fingerprint}-${row.value}-${row.unixMilli}`}
 				columns={timelineTableColumns({
 					filters,
+					labels: labels ?? {},
 					setFilters,
 				})}
 				dataSource={timelineData}

diff --git a/frontend/src/container/AlertHistory/Timeline/Table/useTimelineTable.tsx b/frontend/src/container/AlertHistory/Timeline/Table/useTimelineTable.tsx
@@ -6,37 +6,40 @@ import ClientSideQBSearch, {
 	AttributeKey,
 } from 'components/ClientSideQBSearch/ClientSideQBSearch';
 import { ConditionalAlertPopover } from 'container/AlertHistory/AlertPopover/AlertPopover';
+import { transformKeyValuesToAttributeValuesMap } from 'container/QueryBuilder/filters/utils';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Search } from 'lucide-react';
-import AlertLabels from 'pages/AlertDetails/AlertHeader/AlertLabels/AlertLabels';
+import AlertLabels, {
+	AlertLabelsProps,
+} from 'pages/AlertDetails/AlertHeader/AlertLabels/AlertLabels';
 import AlertState from 'pages/AlertDetails/AlertHeader/AlertState/AlertState';
-import { useAlertHistoryQueryParams } from 'pages/AlertDetails/hooks';
-import { useAlertRule } from 'providers/Alert';
 import { useMemo } from 'react';
 import { AlertRuleTimelineTableResponse } from 'types/api/alerts/def';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { formatEpochTimestamp } from 'utils/timeUtils';
 
-const transfromLabelsToQbKeys = (
+const transformLabelsToQbKeys = (
 	labels: AlertRuleTimelineTableResponse['labels'],
-): AttributeKey[] => Object.keys(labels).map((key) => ({ key }));
+): AttributeKey[] => Object.keys(labels).flatMap((key) => [{ key }]);
 
 function LabelFilter({
 	filters,
 	setFilters,
+	labels,
 }: {
 	setFilters: (filters: TagFilter) => void;
 	filters: TagFilter;
+	labels: AlertLabelsProps['labels'];
 }): JSX.Element | null {
 	const isDarkMode = useIsDarkMode();
 
-	const { ruleId } = useAlertHistoryQueryParams();
-	const { alertRuleLabels } = useAlertRule();
-
-	const transformedKeys = useMemo(() => {
-		if (!ruleId) return [];
-		return transfromLabelsToQbKeys(alertRuleLabels?.get(ruleId) || {});
-	}, [alertRuleLabels, ruleId]);
+	const { transformedKeys, attributesMap } = useMemo(
+		() => ({
+			transformedKeys: transformLabelsToQbKeys(labels || {}),
+			attributesMap: transformKeyValuesToAttributeValuesMap(labels),
+		}),
+		[labels],
+	);
 
 	const handleSearch = (tagFilters: TagFilter): void => {
 		const tagFiltersLength = tagFilters.items.length;
@@ -56,6 +59,7 @@ function LabelFilter({
 			filters={filters}
 			className="alert-history-label-search"
 			attributeKeys={transformedKeys}
+			attributeValuesMap={attributesMap}
 			suffixIcon={
 				<Search
 					size={14}
@@ -68,9 +72,11 @@ function LabelFilter({
 
 export const timelineTableColumns = ({
 	filters,
+	labels,
 	setFilters,
 }: {
 	filters: TagFilter;
+	labels: AlertLabelsProps['labels'];
 	setFilters: (filters: TagFilter) => void;
 }): ColumnsType<AlertRuleTimelineTableResponse> => [
 	{
@@ -85,7 +91,9 @@ export const timelineTableColumns = ({
 		),
 	},
 	{
-		title: <LabelFilter setFilters={setFilters} filters={filters} />,
+		title: (
+			<LabelFilter setFilters={setFilters} filters={filters} labels={labels} />
+		),
 		dataIndex: 'labels',
 		render: (labels): JSX.Element => (
 			<div className="alert-rule-labels">

diff --git a/frontend/src/container/QueryBuilder/filters/utils.ts b/frontend/src/container/QueryBuilder/filters/utils.ts
@@ -98,7 +98,7 @@ export const transformKeyValuesToAttributeValuesMap = (
 	attributeValuesMap: Record<string, string[] | number[] | boolean[]>,
 ): AttributeValuesMap =>
 	Object.fromEntries(
-		Object.entries(attributeValuesMap).map(([key, values]) => [
+		Object.entries(attributeValuesMap || {}).map(([key, values]) => [
 			key,
 			{
 				stringAttributeValues:

diff --git a/frontend/src/pages/AlertDetails/AlertHeader/AlertLabels/AlertLabels.tsx b/frontend/src/pages/AlertDetails/AlertHeader/AlertLabels/AlertLabels.tsx
@@ -4,7 +4,7 @@ import KeyValueLabel from 'periscope/components/KeyValueLabel';
 import SeeMore from 'periscope/components/SeeMore';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-type AlertLabelsProps = {
+export type AlertLabelsProps = {
 	labels: Record<string, any>;
 	initialCount?: number;
 };

diff --git a/frontend/src/providers/Alert.tsx b/frontend/src/providers/Alert.tsx
@@ -5,10 +5,6 @@ interface AlertRuleContextType {
 	setIsAlertRuleDisabled: React.Dispatch<
 		React.SetStateAction<boolean | undefined>
 	>;
-	alertRuleLabels: Map<string, Record<string, string>>;
-	setAlertRuleLabels: React.Dispatch<
-		React.SetStateAction<Map<string, Record<string, string>>>
-	>;
 }
 
 const AlertRuleContext = createContext<AlertRuleContextType | undefined>(
@@ -24,18 +20,12 @@ function AlertRuleProvider({
 		boolean | undefined
 	>(undefined);
 
-	const [alertRuleLabels, setAlertRuleLabels] = useState<
-		Map<string, Record<string, string>>
-	>(new Map());
-
 	const value = React.useMemo(
 		() => ({
 			isAlertRuleDisabled,
 			setIsAlertRuleDisabled,
-			alertRuleLabels,
-			setAlertRuleLabels,
 		}),
-		[isAlertRuleDisabled, alertRuleLabels],
+		[isAlertRuleDisabled],
 	);
 
 	return (

diff --git a/frontend/src/types/api/alerts/def.ts b/frontend/src/types/api/alerts/def.ts
@@ -1,3 +1,4 @@
+import { AlertLabelsProps } from 'pages/AlertDetails/AlertHeader/AlertLabels/AlertLabels';
 import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery';
 
 // default match type for threshold
@@ -94,7 +95,11 @@ export interface AlertRuleTimelineTableResponse {
 	relatedLogsLink: string;
 }
 export type AlertRuleTimelineTableResponsePayload = {
-	data: { items: AlertRuleTimelineTableResponse[]; total: number };
+	data: {
+		items: AlertRuleTimelineTableResponse[];
+		total: number;
+		labels: AlertLabelsProps['labels'];
+	};
 };
 type AlertState = 'firing' | 'normal' | 'no-data' | 'muted';