diff --git a/public/app/features/alerting/unified/components/rules/state-history/useRuleHistoryRecords.test.tsx b/public/app/features/alerting/unified/components/rules/state-history/useRuleHistoryRecords.test.tsx
index 17346ae6434..bea142fa90f 100644
--- a/public/app/features/alerting/unified/components/rules/state-history/useRuleHistoryRecords.test.tsx
+++ b/public/app/features/alerting/unified/components/rules/state-history/useRuleHistoryRecords.test.tsx
@@ -48,17 +48,19 @@ describe('logRecordsToDataFrame', () => {
     const frame = logRecordsToDataFrame(JSON.stringify(instanceLabels), records, [], theme);
 
     const stateField = frame.fields[1];
-    expect(stateField.config.mappings).toHaveLength(1);
+    expect(stateField.config.mappings).toHaveLength(3);
     expect(stateField.config.mappings![0].options).toMatchObject({
-      Alerting: {
-        color: theme.colors.error.main,
-      },
+      pattern: '/^normal/i',
+      result: { color: theme.colors.success.main },
+    });
+    expect(stateField.config.mappings![1].options).toMatchObject({
+      pattern: '/Alerting/',
+      result: { color: theme.colors.error.main },
+    });
+    expect(stateField.config.mappings![2].options).toMatchObject({
       Pending: {
         color: theme.colors.warning.main,
       },
-      Normal: {
-        color: theme.colors.success.main,
-      },
       NoData: {
         color: theme.colors.info.main,
       },
diff --git a/public/app/features/alerting/unified/components/rules/state-history/useRuleHistoryRecords.tsx b/public/app/features/alerting/unified/components/rules/state-history/useRuleHistoryRecords.tsx
index 613938eebb5..2dc9a5abf94 100644
--- a/public/app/features/alerting/unified/components/rules/state-history/useRuleHistoryRecords.tsx
+++ b/public/app/features/alerting/unified/components/rules/state-history/useRuleHistoryRecords.tsx
@@ -119,18 +119,27 @@ export function logRecordsToDataFrame(
           color: { mode: 'thresholds' },
           custom: { fillOpacity: 100 },
           mappings: [
+            {
+              type: MappingType.RegexToText,
+              options: {
+                //  Map as a regex so we capture `Normal`, and `Normal (Updated)`
+                pattern: '/^normal/i',
+                result: { color: theme.colors.success.main },
+              },
+            },
+            {
+              type: MappingType.RegexToText,
+              options: {
+                pattern: '/Alerting/',
+                result: { color: theme.colors.error.main },
+              },
+            },
             {
               type: MappingType.ValueToText,
               options: {
-                Alerting: {
-                  color: theme.colors.error.main,
-                },
                 Pending: {
                   color: theme.colors.warning.main,
                 },
-                Normal: {
-                  color: theme.colors.success.main,
-                },
                 NoData: {
                   color: theme.colors.info.main,
                 },
diff --git a/public/app/features/alerting/unified/mocks/grafanaRulerApi.ts b/public/app/features/alerting/unified/mocks/grafanaRulerApi.ts
index 35734bb7b47..a2fc3a99764 100644
--- a/public/app/features/alerting/unified/mocks/grafanaRulerApi.ts
+++ b/public/app/features/alerting/unified/mocks/grafanaRulerApi.ts
@@ -91,14 +91,14 @@ export const namespaces: Record<string, RulerRuleGroupDTO[]> = {
 
 //-------------------- for alert history tests we reuse these constants --------------------
 export const time_0 = 1718368710000;
-// time1 + 30 seg
-export const time_plus_30 = 1718368740000;
 // time1 + 5 seg
-export const time_plus_5 = 1718368715000;
+export const time_plus_5 = time_0 + 5 * 1000;
 // time1 + 15 seg
-export const time_plus_15 = 1718368725000;
+export const time_plus_15 = time_0 + 15 * 1000;
 // time1 + 10 seg
-export const time_plus_10 = 1718368720000;
+export const time_plus_10 = time_0 + 10 * 1000;
+// time1 + 30 seg
+export const time_plus_30 = time_0 + 30 * 1000;
 
 // returns 4 transitions. times is an array of 4 timestamps.
 export const getHistoryResponse = (times: number[]) => ({