From e3753bef6fd874a15bc47a230a9528465dd413d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Thu, 3 Feb 2022 15:54:53 +0000
Subject: [PATCH] fix(ui): un-escape regex values when editing silences

---
 CHANGELOG.md                           |  6 +++
 ui/src/Stores/SilenceFormStore.test.ts | 54 ++++++++++++++++++++++++++
 ui/src/Stores/SilenceFormStore.ts      | 21 +++++++---
 3 files changed, 76 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2dd3d6680..01e60df15 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## v0.97
+
+### Fixed
+
+- Fix escaping regex values in when editing silences #3936.
+
 ## v0.96
 
 ### Fixed
diff --git a/ui/src/Stores/SilenceFormStore.test.ts b/ui/src/Stores/SilenceFormStore.test.ts
index 1a8f0388b..b5135818c 100644
--- a/ui/src/Stores/SilenceFormStore.test.ts
+++ b/ui/src/Stores/SilenceFormStore.test.ts
@@ -681,6 +681,60 @@ describe("SilenceFormStore.data", () => {
       },
       result: { name: "foo", values: ["server(0|1)"] },
     },
+    {
+      matcher: {
+        name: "foo",
+        value: "10\\.0\\.0\\.1|10\\.0\\.0\\.2",
+        isRegex: true,
+        isEqual: true,
+      },
+      result: { name: "foo", values: ["10.0.0.1", "10.0.0.2"] },
+    },
+    {
+      matcher: {
+        name: "foo",
+        value: "10\\.0\\.0\\.1|10\\.0\\.0\\.2",
+        isRegex: false,
+        isEqual: true,
+      },
+      result: { name: "foo", values: ["10\\.0\\.0\\.1|10\\.0\\.0\\.2"] },
+    },
+    {
+      matcher: {
+        name: "foo",
+        value: "(bar\\-1|bar\\-2|1\\.2)",
+        isRegex: true,
+        isEqual: true,
+      },
+      result: { name: "foo", values: ["bar-1", "bar-2", "1.2"] },
+    },
+    {
+      matcher: {
+        name: "foo",
+        value: "(bar\\-1|bar\\-2|1\\.2)",
+        isRegex: false,
+        isEqual: true,
+      },
+      result: { name: "foo", values: ["(bar\\-1|bar\\-2|1\\.2)"] },
+    },
+    {
+      matcher: {
+        name: "foo",
+        value: "foo bar|1-2",
+        isRegex: true,
+        isEqual: true,
+      },
+      result: { name: "foo", values: ["foo bar", "1-2"] },
+    },
+    {
+      matcher: {
+        name: "foo",
+        value: "foo bar|1-2",
+        isRegex: false,
+        isEqual: true,
+      },
+      result: { name: "foo", values: ["foo bar|1-2"] },
+    },
   ];
   for (const t of tests) {
     it(`fillFormFromSilence() unpacks ${t.matcher.name}=${t.matcher.value} isRegex=${t.matcher.isRegex} into ${t.result.name}=${t.result.values}`, () => {
diff --git a/ui/src/Stores/SilenceFormStore.ts b/ui/src/Stores/SilenceFormStore.ts
index 3ecc14345..aaf93e24e 100644
--- a/ui/src/Stores/SilenceFormStore.ts
+++ b/ui/src/Stores/SilenceFormStore.ts
@@ -81,6 +81,10 @@ export const EscapeRegex = (v: string): string => {
   return v.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
 };
 
+export const UnescapeRegex = (v: string): string => {
+  return v.replaceAll("\\", "");
+};
+
 const MatchersFromGroup = (
   group: APIAlertGroupT,
   stripLabels: string[],
@@ -247,15 +251,22 @@ const GenerateAlertmanagerSilenceData = (
 };
 
 const UnpackRegexMatcherValues = (isRegex: boolean, value: string) => {
-  if (isRegex && value.match(/^\((\w+\|)+\w+\)$/)) {
-    return value
+  let val: string = value;
+  if (isRegex) {
+    val = UnescapeRegex(val);
+  }
+  if (isRegex && val.match(/^\(([a-zA-Z0-9_\-. ]+\|)+[a-zA-Z0-9_\-. ]+\)$/)) {
+    return val
       .slice(1, -1)
       .split("|")
       .map((v) => StringToOption(v));
-  } else if (isRegex && value.match(/^(\w+\|)+\w+$/)) {
-    return value.split("|").map((v) => StringToOption(v));
+  } else if (
+    isRegex &&
+    val.match(/^([a-zA-Z0-9_\-. ]+\|)+[a-zA-Z0-9_\-. ]+$/)
+  ) {
+    return val.split("|").map((v) => StringToOption(v));
   } else {
-    return [StringToOption(value)];
+    return [StringToOption(val)];
   }
 };