diff --git a/ui/src/Components/Grid/UpgradeNeeded/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/UpgradeNeeded/__snapshots__/index.test.js.snap
new file mode 100644
index 000000000..d7d65b563
--- /dev/null
+++ b/ui/src/Components/Grid/UpgradeNeeded/__snapshots__/index.test.js.snap
@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[` matches snapshot 1`] = `
+"
+
+
+
+
+
+
+
+ Upgrading to a new version: 1.2.3
+
+
+
+"
+`;
diff --git a/ui/src/Components/Grid/UpgradeNeeded/index.js b/ui/src/Components/Grid/UpgradeNeeded/index.js
new file mode 100644
index 000000000..51ff62c8c
--- /dev/null
+++ b/ui/src/Components/Grid/UpgradeNeeded/index.js
@@ -0,0 +1,44 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBoxOpen } from "@fortawesome/free-solid-svg-icons/faBoxOpen";
+import { faSpinner } from "@fortawesome/free-solid-svg-icons/faSpinner";
+
+class UpgradeNeeded extends Component {
+ static propTypes = {
+ newVersion: PropTypes.string.isRequired
+ };
+
+ reloadApp = () => {
+ window.location.reload();
+ };
+
+ componentDidMount() {
+ this.timer = setTimeout(this.reloadApp, 3000);
+ }
+
+ componentWillUnmount() {
+ clearTimeout(this.timer);
+ this.timer = null;
+ }
+
+ render() {
+ const { newVersion } = this.props;
+ return (
+
+
+
+
+
+
+
+ Upgrading to a new version: {newVersion}
+
+
+
+ );
+ }
+}
+
+export { UpgradeNeeded };
diff --git a/ui/src/Components/Grid/UpgradeNeeded/index.test.js b/ui/src/Components/Grid/UpgradeNeeded/index.test.js
new file mode 100644
index 000000000..4afac369a
--- /dev/null
+++ b/ui/src/Components/Grid/UpgradeNeeded/index.test.js
@@ -0,0 +1,38 @@
+import React from "react";
+
+import { mount, shallow } from "enzyme";
+
+import toDiffableHtml from "diffable-html";
+
+import { UpgradeNeeded } from ".";
+
+beforeEach(() => {
+ jest.useFakeTimers();
+ jest.clearAllTimers();
+});
+
+afterEach(() => {
+ jest.clearAllTimers();
+});
+
+describe("", () => {
+ it("matches snapshot", () => {
+ const tree = shallow();
+ expect(toDiffableHtml(tree.html())).toMatchSnapshot();
+ });
+
+ it("calls window.location.reload after timer is done", () => {
+ const reloadSpy = jest.spyOn(global.window.location, "reload");
+ mount();
+ jest.runOnlyPendingTimers();
+ expect(reloadSpy).toBeCalled();
+ });
+
+ it("timer is cleared on unmount", () => {
+ const tree = mount();
+ const instance = tree.instance();
+
+ instance.componentWillUnmount();
+ expect(instance.timer).toBeNull();
+ });
+});
diff --git a/ui/src/Components/Grid/index.js b/ui/src/Components/Grid/index.js
index 950c10d33..67f71e16f 100644
--- a/ui/src/Components/Grid/index.js
+++ b/ui/src/Components/Grid/index.js
@@ -9,6 +9,7 @@ import { SilenceFormStore } from "Stores/SilenceFormStore";
import { AlertGrid } from "./AlertGrid";
import { FatalError } from "./FatalError";
import { UpstreamError } from "./UpstreamError";
+import { UpgradeNeeded } from "./UpgradeNeeded";
const Grid = observer(
class Grid extends Component {
@@ -25,6 +26,10 @@ const Grid = observer(
return ;
}
+ if (alertStore.info.upgradeNeeded) {
+ return ;
+ }
+
if (
alertStore.data.upstreams.counters &&
alertStore.data.upstreams.counters.total === 1 &&
diff --git a/ui/src/Components/Grid/index.test.js b/ui/src/Components/Grid/index.test.js
index 291343ae1..42e491a39 100644
--- a/ui/src/Components/Grid/index.test.js
+++ b/ui/src/Components/Grid/index.test.js
@@ -73,4 +73,10 @@ describe("", () => {
const tree = ShallowGrid();
expect(tree.text()).toBe("");
});
+
+ it("renders UpgradeNeeded when alertStore.info.upgradeNeeded=true", () => {
+ alertStore.info.upgradeNeeded = true;
+ const tree = ShallowGrid();
+ expect(tree.text()).toBe("");
+ });
});