diff --git a/ui/src/Components/NavBar/FetchIndicator/__snapshots__/index.test.js.snap b/ui/src/Components/NavBar/FetchIndicator/__snapshots__/index.test.js.snap index 2aeed6d1c..19ea854d1 100644 --- a/ui/src/Components/NavBar/FetchIndicator/__snapshots__/index.test.js.snap +++ b/ui/src/Components/NavBar/FetchIndicator/__snapshots__/index.test.js.snap @@ -24,7 +24,7 @@ exports[` matches snapshot when idle 1`] = ` matches snapshot when idle 1`] = ` " `; + +exports[` matches snapshot when response is processed 1`] = ` +" + + + + +" +`; diff --git a/ui/src/Components/NavBar/FetchIndicator/index.js b/ui/src/Components/NavBar/FetchIndicator/index.js index b2e2f9a9b..f34eb21ae 100644 --- a/ui/src/Components/NavBar/FetchIndicator/index.js +++ b/ui/src/Components/NavBar/FetchIndicator/index.js @@ -13,11 +13,19 @@ class FetchIndicator extends Component { render() { const { status } = this.props; - const visible = status === AlertStoreStatuses.InProgress.toString(); + + const visible = + status === AlertStoreStatuses.Fetching.toString() || + status === AlertStoreStatuses.Processing.toString(); + const textClass = + status === AlertStoreStatuses.Fetching.toString() + ? "text-muted" + : "text-success"; + return ( ", () => { it("opacity is 1 when fetch is in progress", () => { const tree = mount( - + ); expect(tree.find("FontAwesomeIcon").props().style.opacity).toEqual(1); }); + it("uses text-muted when fetch is in progress", () => { + const tree = mount( + + ); + expect(tree.find("FontAwesomeIcon").hasClass("text-muted")).toBe(true); + }); + + it("opacity is 1 when response is processed", () => { + const tree = mount( + + ); + expect(tree.find("FontAwesomeIcon").props().style.opacity).toEqual(1); + }); + + it("uses text-success when response is processed", () => { + const tree = mount( + + ); + expect(tree.find("FontAwesomeIcon").hasClass("text-success")).toBe(true); + }); + it("opacity is 0 when idle", () => { const tree = mount( @@ -31,7 +52,14 @@ describe("", () => { it("matches snapshot when fetch is in progress", () => { const tree = mount( - + + ); + expect(toDiffableHtml(tree.html())).toMatchSnapshot(); + }); + + it("matches snapshot when response is processed", () => { + const tree = mount( + ); expect(toDiffableHtml(tree.html())).toMatchSnapshot(); }); diff --git a/ui/src/Stores/AlertStore.js b/ui/src/Stores/AlertStore.js index b7fc40d9a..1380ff992 100644 --- a/ui/src/Stores/AlertStore.js +++ b/ui/src/Stores/AlertStore.js @@ -67,7 +67,8 @@ function UpdateLocationSearch(newParams) { const AlertStoreStatuses = Object.freeze({ Idle: Symbol("idle"), - InProgress: Symbol("in-progres"), + Fetching: Symbol("fetching"), + Processing: Symbol("processing"), Failure: Symbol("failure") }); @@ -172,8 +173,12 @@ class AlertStore { this.value = AlertStoreStatuses.Idle; this.error = null; }, - setInProgress() { - this.value = AlertStoreStatuses.InProgress; + setFetching() { + this.value = AlertStoreStatuses.Fetching; + this.error = null; + }, + setProcessing() { + this.value = AlertStoreStatuses.Processing; this.error = null; }, setFailure(err) { @@ -183,7 +188,8 @@ class AlertStore { }, { setIdle: action, - setInProgress: action, + setFetching: action, + setProcessing: action, setFailure: action }, { name: "Store status" } @@ -194,14 +200,17 @@ class AlertStore { } fetch = action(() => { - this.status.setInProgress(); + this.status.setFetching(); const alertsURI = FormatBackendURI("alerts.json?") + FormatAPIFilterQuery(this.filters.values.map(f => f.raw)); return fetch(alertsURI, { credentials: "include" }) - .then(result => result.json()) + .then(result => { + this.status.setProcessing(); + return result.json(); + }) .then(result => { return this.parseAPIResponse(result); }) diff --git a/ui/src/Stores/AlertStore.test.js b/ui/src/Stores/AlertStore.test.js index f67559b8c..22b446e02 100644 --- a/ui/src/Stores/AlertStore.test.js +++ b/ui/src/Stores/AlertStore.test.js @@ -25,10 +25,17 @@ describe("AlertStore.status", () => { expect(store.status.error).toBeNull(); }); - it("status is InProgress with no error after setInProgress", () => { + it("status is Fetching with no error after setFetching()", () => { const store = new AlertStore([]); - store.status.setInProgress(); - expect(store.status.value).toEqual(AlertStoreStatuses.InProgress); + store.status.setFetching(); + expect(store.status.value).toEqual(AlertStoreStatuses.Fetching); + expect(store.status.error).toBeNull(); + }); + + it("status is Processing with no error after setProcessing()", () => { + const store = new AlertStore([]); + store.status.setProcessing(); + expect(store.status.value).toEqual(AlertStoreStatuses.Processing); expect(store.status.error).toBeNull(); }); @@ -39,9 +46,9 @@ describe("AlertStore.status", () => { expect(store.status.error).toEqual("my error"); }); - it("status is Idle with no error after setInProgress and setIdle", () => { + it("status is Idle with no error after setFetching and setIdle", () => { const store = new AlertStore([]); - store.status.setInProgress(); + store.status.setFetching(); store.status.setIdle(); expect(store.status.value).toEqual(AlertStoreStatuses.Idle); expect(store.status.error).toBeNull();