diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/index.js b/ui/src/Components/SilenceModal/DateTimeSelect/index.js
index e8f902ec8..9592772cd 100644
--- a/ui/src/Components/SilenceModal/DateTimeSelect/index.js
+++ b/ui/src/Components/SilenceModal/DateTimeSelect/index.js
@@ -14,8 +14,6 @@ import { HourMinute } from "./HourMinute";
import "./index.css";
const OffsetBadge = ({ startDate, endDate, prefixLabel }) => {
- if (!startDate) startDate = moment().seconds(0);
-
const days = endDate.diff(startDate, "days");
const hours = endDate.diff(startDate, "hours") % 24;
const minutes = endDate.diff(startDate, "minutes") % 60;
@@ -30,7 +28,7 @@ const OffsetBadge = ({ startDate, endDate, prefixLabel }) => {
);
};
OffsetBadge.propTypes = {
- startDate: PropTypes.instanceOf(moment),
+ startDate: PropTypes.instanceOf(moment).isRequired,
endDate: PropTypes.instanceOf(moment).isRequired,
prefixLabel: PropTypes.string.isRequired
};
@@ -183,15 +181,29 @@ const DateTimeSelect = observer(
},
setDuration() {
this.current = TabNames.Duration;
+ },
+ timeNow: null,
+ updateTimeNow() {
+ this.timeNow = moment().seconds(0);
}
},
{
setStart: action.bound,
setEnd: action.bound,
- setDuration: action.bound
+ setDuration: action.bound,
+ updateTimeNow: action.bound
}
);
+ componentDidMount() {
+ this.tab.updateTimeNow();
+ this.nowUpdateTimer = setInterval(this.tab.updateTimeNow, 30 * 1000);
+ }
+ componentWillUnmount() {
+ clearInterval(this.nowUpdateTimer);
+ this.nowUpdateTimer = null;
+ }
+
render() {
const { silenceFormStore } = this.props;
@@ -204,6 +216,7 @@ const DateTimeSelect = observer(
Starts
@@ -217,6 +230,7 @@ const DateTimeSelect = observer(
Ends
diff --git a/ui/src/Components/SilenceModal/DateTimeSelect/index.test.js b/ui/src/Components/SilenceModal/DateTimeSelect/index.test.js
index ec4a59d76..fc0a5459e 100644
--- a/ui/src/Components/SilenceModal/DateTimeSelect/index.test.js
+++ b/ui/src/Components/SilenceModal/DateTimeSelect/index.test.js
@@ -2,6 +2,8 @@ import React from "react";
import { mount, shallow } from "enzyme";
+import { advanceTo, clear } from "jest-date-mock";
+
import moment from "moment";
import { SilenceFormStore } from "Stores/SilenceFormStore";
@@ -20,6 +22,10 @@ beforeEach(() => {
silenceFormStore.data.endsAt = moment([2061, 1, 1, 0, 0, 0]);
});
+afterEach(() => {
+ clear();
+});
+
const ShallowDateTimeSelect = () => {
return shallow();
};
@@ -74,6 +80,39 @@ describe("", () => {
tab.simulate("click");
expect(tree.find(".tab-content").text()).toBe("366days0hours0minutes");
});
+
+ it("'Ends' tab offset badge is updated after 1 minute", () => {
+ jest.useFakeTimers();
+ advanceTo(new Date(2060, 1, 1, 12, 0, 0));
+ silenceFormStore.data.startsAt = moment([2060, 1, 1, 12, 0, 0]);
+ silenceFormStore.data.endsAt = moment([2060, 1, 1, 13, 0, 0]);
+
+ const tree = MountedDateTimeSelect();
+ expect(
+ tree
+ .find(".nav-link")
+ .at(1)
+ .text()
+ ).toBe("Endsin 1h ");
+
+ advanceTo(new Date(2060, 1, 1, 12, 1, 0));
+ jest.runOnlyPendingTimers();
+
+ expect(
+ tree
+ .find(".nav-link")
+ .at(1)
+ .text()
+ ).toBe("Endsin 59m ");
+ });
+
+ it("nowUpdateTimer is destroyed before unmount", () => {
+ const tree = MountedDateTimeSelect();
+ const instance = tree.instance();
+ expect(instance.nowUpdateTimer).toBeDefined();
+ instance.componentWillUnmount();
+ expect(instance.nowUpdateTimer).toBeNull();
+ });
});
const ValidateTimeButton = (