From 7ef7307c821c2543a3c2ff2c3e32aad741eb51b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Mon, 14 Mar 2022 16:56:50 +0000
Subject: [PATCH] feat(ui): mark silences expiring in the next 5 minutes

---
 .../ManagedSilence/SilenceComment.tsx         | 21 +++++++++++++------
 .../Components/ManagedSilence/index.test.tsx  |  7 +++++++
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/ui/src/Components/ManagedSilence/SilenceComment.tsx b/ui/src/Components/ManagedSilence/SilenceComment.tsx
index 6705252e9..8b7a36337 100644
--- a/ui/src/Components/ManagedSilence/SilenceComment.tsx
+++ b/ui/src/Components/ManagedSilence/SilenceComment.tsx
@@ -3,6 +3,7 @@ import type { FC } from "react";
 import { observer } from "mobx-react-lite";
 
 import parseISO from "date-fns/parseISO";
+import { differenceInSeconds } from "date-fns";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBellSlash } from "@fortawesome/free-solid-svg-icons/faBellSlash";
@@ -16,12 +17,20 @@ import { DateFromNow } from "Components/DateFromNow";
 const SilenceProgress: FC<{
   silence: APISilenceT;
 }> = observer(({ silence }) => {
-  return parseISO(silence.endsAt) < new Date() ? (
-    <span className="badge bg-danger components-label">
-      Expired <DateFromNow timestamp={silence.endsAt} />
-    </span>
-  ) : (
-    <span className="badge bg-light components-label">
+  const diff = differenceInSeconds(parseISO(silence.endsAt), new Date());
+  if (diff <= 0) {
+    return (
+      <span className="badge bg-danger components-label">
+        Expired <DateFromNow timestamp={silence.endsAt} />
+      </span>
+    );
+  }
+  return (
+    <span
+      className={`badge ${
+        diff <= 300 ? "bg-warning" : "bg-light"
+      } components-label`}
+    >
       Expires <DateFromNow timestamp={silence.endsAt} />
     </span>
   );
diff --git a/ui/src/Components/ManagedSilence/index.test.tsx b/ui/src/Components/ManagedSilence/index.test.tsx
index 0c3c23001..683c44ff1 100644
--- a/ui/src/Components/ManagedSilence/index.test.tsx
+++ b/ui/src/Components/ManagedSilence/index.test.tsx
@@ -206,6 +206,13 @@ describe("<ManagedSilence progress bar />", () => {
     expect(tree.text()).toMatch(/Expired 1 year ago/);
   });
 
+  it("renders with class 'warning' if <= 5m is left", () => {
+    jest.setSystemTime(new Date(Date.UTC(2000, 0, 1, 0, 56, 0)));
+    const tree = MountedManagedSilence();
+    expect(toDiffableHtml(tree.html())).toMatch(/bg-warning/);
+    expect(tree.text()).toMatch(/Expires in 4 minutes/);
+  });
+
   it("progressbar uses class 'danger' when > 90%", () => {
     jest.setSystemTime(new Date(Date.UTC(2000, 0, 1, 0, 55, 0)));
     const tree = MountedManagedSilence();