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() ? (
-
- Expired
-
- ) : (
-
+ const diff = differenceInSeconds(parseISO(silence.endsAt), new Date());
+ if (diff <= 0) {
+ return (
+
+ Expired
+
+ );
+ }
+ return (
+
Expires
);
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("", () => {
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();