From 66d64081c00b064764ebaa869eec0b869cceccca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Sun, 16 Sep 2018 21:21:06 +0100 Subject: [PATCH 1/2] feat(ui): track version changes and mark it with upgradeNeeded --- ui/src/Stores/AlertStore.js | 10 +++++++++- ui/src/Stores/AlertStore.test.js | 13 +++++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/ui/src/Stores/AlertStore.js b/ui/src/Stores/AlertStore.js index 2b899632b..b7fc40d9a 100644 --- a/ui/src/Stores/AlertStore.js +++ b/ui/src/Stores/AlertStore.js @@ -142,7 +142,8 @@ class AlertStore { info = observable( { totalAlerts: 0, - version: "unknown" + version: "unknown", + upgradeNeeded: false }, {}, { name: "API response info" } @@ -272,6 +273,13 @@ class AlertStore { this.data = Object.assign(this.data, updates); } + // before storing new version check if we need to reload + if ( + this.info.version !== "unknown" && + this.info.version !== result.version + ) { + this.info.upgradeNeeded = true; + } // update extra root level keys that are stored under 'info' for (const key of ["totalAlerts", "version"]) { if (this.info[key] !== result[key]) { diff --git a/ui/src/Stores/AlertStore.test.js b/ui/src/Stores/AlertStore.test.js index 8761c88a6..f67559b8c 100644 --- a/ui/src/Stores/AlertStore.test.js +++ b/ui/src/Stores/AlertStore.test.js @@ -304,4 +304,17 @@ describe("AlertStore.fetch", () => { annotationsVisible: [] }); }); + + it("wants to reload page after new version is returned in the API", async () => { + const response = EmptyAPIResponse(); + fetch.mockResponse(JSON.stringify(response)); + const store = new AlertStore(["label=value"]); + await expect(store.fetch()).resolves.toBeUndefined(); + expect(store.info.upgradeNeeded).toBe(false); + + response.version = "newFakeVersion"; + fetch.mockResponse(JSON.stringify(response)); + await expect(store.fetch()).resolves.toBeUndefined(); + expect(store.info.upgradeNeeded).toBe(true); + }); }); From 03a223ae000fc42dff4b3926bb87b00aa9368ea4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Sun, 16 Sep 2018 21:21:23 +0100 Subject: [PATCH 2/2] feat(ui): reload app on version change --- .../__snapshots__/index.test.js.snap | 41 +++++++++++++++++ ui/src/Components/Grid/UpgradeNeeded/index.js | 44 +++++++++++++++++++ .../Grid/UpgradeNeeded/index.test.js | 38 ++++++++++++++++ ui/src/Components/Grid/index.js | 5 +++ ui/src/Components/Grid/index.test.js | 6 +++ 5 files changed, 134 insertions(+) create mode 100644 ui/src/Components/Grid/UpgradeNeeded/__snapshots__/index.test.js.snap create mode 100644 ui/src/Components/Grid/UpgradeNeeded/index.js create mode 100644 ui/src/Components/Grid/UpgradeNeeded/index.test.js 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(""); + }); });