fix: resolve sentry issues in alert list (#8878)

* fix: resolve sentry issues in alert list

* chore: update the key

---------

Co-authored-by: srikanthccv <[email protected]>

Author: amlannandy

frontend/src/container/FormAlertRules/labels/utils.ts

@@ -23,7 +23,7 @@ export const flattenLabels = (labels: Labels): ILabelRecord[] => {
 		if (!hiddenLabels.includes(key)) {
 			recs.push({
 				key,
-				value: labels[key],
+				value: labels[key] || '',
 			});
 		}
 	});

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -272,12 +272,11 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 			width: 80,
 			key: 'severity',
 			sorter: (a, b): number =>
-				(a.labels ? a.labels.severity.length : 0) -
-				(b.labels ? b.labels.severity.length : 0),
+				(a?.labels?.severity?.length || 0) - (b?.labels?.severity?.length || 0),
 			render: (value): JSX.Element => {
-				const objectKeys = Object.keys(value);
+				const objectKeys = value ? Object.keys(value) : [];
 				const withSeverityKey = objectKeys.find((e) => e === 'severity') || '';
-				const severityValue = value[withSeverityKey];
+				const severityValue = withSeverityKey ? value[withSeverityKey] : '-';
 
 				return <Typography>{severityValue}</Typography>;
 			},
@@ -290,7 +289,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 			align: 'center',
 			width: 100,
 			render: (value): JSX.Element => {
-				const objectKeys = Object.keys(value);
+				const objectKeys = value ? Object.keys(value) : [];
 				const withOutSeverityKeys = objectKeys.filter((e) => e !== 'severity');
 
 				if (withOutSeverityKeys.length === 0) {

frontend/src/pages/AlertDetails/AlertHeader/AlertHeader.tsx

@@ -14,7 +14,7 @@ export type AlertHeaderProps = {
 		state: string;
 		alert: string;
 		id: string;
-		labels: Record<string, string>;
+		labels: Record<string, string | undefined> | undefined;
 		disabled: boolean;
 	};
 };
@@ -23,13 +23,14 @@ function AlertHeader({ alertDetails }: AlertHeaderProps): JSX.Element {
 	const { alertRuleState } = useAlertRule();
 	const [updatedName, setUpdatedName] = useState(alertName);
 
-	const labelsWithoutSeverity = useMemo(
-		() =>
-			Object.fromEntries(
+	const labelsWithoutSeverity = useMemo(() => {
+		if (labels) {
+			return Object.fromEntries(
 				Object.entries(labels).filter(([key]) => key !== 'severity'),
-			),
-		[labels],
-	);
+			);
+		}
+		return {};
+	}, [labels]);
 
 	return (
 		<div className="alert-info">
@@ -43,7 +44,7 @@ function AlertHeader({ alertDetails }: AlertHeaderProps): JSX.Element {
 					</div>
 				</div>
 				<div className="bottom-section">
-					{labels.severity && <AlertSeverity severity={labels.severity} />}
+					{labels?.severity && <AlertSeverity severity={labels.severity} />}
 
 					{/* // TODO(shaheer): Get actual data when we are able to get alert firing from state from API */}
 					{/* <AlertStatus

frontend/src/types/api/alerts/def.ts

@@ -48,7 +48,7 @@ export interface RuleCondition {
 	seasonality?: string;
 }
 export interface Labels {
-	[key: string]: string;
+	[key: string]: string | undefined;
 }
 
 export interface AlertRuleStats {

pkg/transition/migrate_common.go

@@ -366,7 +366,7 @@ func (mc *migrateCommon) createAggregations(ctx context.Context, queryData map[s
 			aggregation = map[string]any{
 				"metricName":       aggregateAttr["key"],
 				"temporality":      queryData["temporality"],
-				"timeAggregation":  aggregateOp,
+				"timeAggregation":  queryData["timeAggregation"],
 				"spaceAggregation": queryData["spaceAggregation"],
 			}
 			if reduceTo, ok := queryData["reduceTo"].(string); ok {