feat(ui): mark silences expiring in the next 5 minutes

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>
   );

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();