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();