feat(ui): allow acks to use local timezone

Fixes #3704

CHANGELOG.md

@@ -12,6 +12,9 @@
   configured by setting `silences:expired` option or `--silences.expired` flag.
   Setting this value to `5m` will show silences if they expired in the last 5
   minutes but only if the alert started firing at least 5 minutes ago.
+- `alertAcknowledgement:comment` will replace `%NOWLOC%` string with a timestamp
+  formatted using local time zone, use `%NOW%` for timestamps using `UTC` timezone,
+  #3704.
 
 ## v0.93
 

docs/CONFIGURATION.md

@@ -497,7 +497,8 @@ alertAcknowledgement:
 - `author` - default author for acknowledgement silences. If user set the
   author field on the silence form then that value will be used instead.
 - `comment` - custom comment used for acknowledgement silences (optional).
-  If the comment contains `%NOW%` it will be replaced by current timestamp.
+  If the comment contains `%NOW%` it will be replaced by current timestamp
+  with UTC timezone, to use timestamp with local timezone use `%NOWLOC%`.
 
 Defaults:
 

ui/src/Components/AlertAck/index.test.tsx

@@ -353,7 +353,7 @@ describe("<AlertAck />", () => {
     });
   });
 
-  it("injects timestamp when configured", async () => {
+  it("injects UTC timestamp when configured", async () => {
     alertStore.settings.setValues({
       ...alertStore.settings.values,
       ...{
@@ -384,6 +384,28 @@ describe("<AlertAck />", () => {
     });
   });
 
+  it("injects local timezone timestamp when configured", async () => {
+    alertStore.settings.setValues({
+      ...alertStore.settings.values,
+      ...{
+        alertAcknowledgement: {
+          enabled: true,
+          durationSeconds: 237,
+          author: "me",
+          comment: "ACK! This alert was acknowledged using karma on %NOWLOC%",
+        },
+      },
+    });
+    await MountAndClick();
+    const comment = JSON.parse((fetchMock.lastOptions() as any).body).comment;
+    expect(comment).not.toEqual(
+      "ACK! This alert was acknowledged using karma on Tue Feb 01 2000 00:00:00 GMT"
+    );
+    expect(comment).toMatch(
+      /ACK! This alert was acknowledged using karma on (Mon Jan 31 2000 19|Tue Feb 01 2000 00):00:00 GMT([+-]+)[0-9]+ \(.*\)/
+    );
+  });
+
   it("uses author from authentication info when auth is enabled", async () => {
     alertStore.info.setAuthentication(true, "auth@example.com");
     alertStore.settings.setValues({

ui/src/Components/AlertAck/index.tsx

@@ -79,7 +79,9 @@ const AlertAck: FC<{
       const now = new Date();
       const comment = toJS(
         alertStore.settings.values.alertAcknowledgement.comment
-      ).replace("%NOW%", now.toUTCString());
+      )
+        .replace("%NOW%", now.toUTCString())
+        .replace("%NOWLOC%", now.toString());
       c.push({
         payload: GenerateAlertmanagerSilenceData(
           now,