Merge pull request #1113 from prymitive/fetcher

chore(ui): only fetch updates if  seconds passed since last fetch

ui/src/Components/Fetcher/index.js

@@ -1,7 +1,6 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 
-import { observable, action } from "mobx";
 import { observer } from "mobx-react";
 
 import moment from "moment";
@@ -16,23 +15,6 @@ const Fetcher = observer(
       settingsStore: PropTypes.instanceOf(Settings).isRequired
     };
 
-    lastTick = observable(
-      {
-        time: moment(0),
-        completedAt: moment(0),
-        update() {
-          this.time = moment();
-        },
-        markCompleted() {
-          this.completedAt = moment();
-        }
-      },
-      {
-        update: action,
-        markCompleted: action
-      }
-    );
-
     getSortSettings = () => {
       const { settingsStore } = this.props;
 
@@ -77,11 +59,7 @@ const Fetcher = observer(
     fetchIfIdle = () => {
       const { alertStore, settingsStore } = this.props;
 
-      // add 5s minimum interval between fetches
-      const idleAt = moment(this.lastTick.completedAt).add(5, "seconds");
-      const isIdle = moment().isSameOrAfter(idleAt);
-
-      const nextTick = moment(this.lastTick.time).add(
+      const nextTick = moment(alertStore.status.lastUpdateAt).add(
         settingsStore.fetchConfig.config.interval,
         "seconds"
       );
@@ -93,13 +71,7 @@ const Fetcher = observer(
         status === AlertStoreStatuses.Fetching.toString() ||
         status === AlertStoreStatuses.Processing.toString();
 
-      if (
-        isIdle &&
-        pastDeadline &&
-        !updateInProgress &&
-        !alertStore.status.paused
-      ) {
-        this.lastTick.update();
+      if (pastDeadline && !updateInProgress && !alertStore.status.paused) {
         this.callFetch();
       }
     };
@@ -117,7 +89,6 @@ const Fetcher = observer(
         sortSettings.sortLabel,
         sortSettings.sortReverse
       );
-      this.lastTick.markCompleted();
     };
 
     componentDidMount() {
@@ -130,7 +101,6 @@ const Fetcher = observer(
       const { alertStore } = this.props;
 
       if (!alertStore.status.paused) {
-        this.lastTick.update();
         this.callFetch();
       }
     }

ui/src/Components/Fetcher/index.test.js

@@ -25,7 +25,9 @@ beforeEach(() => {
   alertStore = new AlertStore(["label=value"]);
   fetchSpy = jest
     .spyOn(alertStore, "fetchWithThrottle")
-    .mockImplementation(() => {});
+    .mockImplementation(() => {
+      alertStore.status.setIdle();
+    });
 
   settingsStore = new Settings();
   settingsStore.fetchConfig.config.interval = 30;

ui/src/Stores/AlertStore.js

@@ -6,6 +6,8 @@ import equal from "fast-deep-equal";
 
 import qs from "qs";
 
+import moment from "moment";
+
 import { FetchWithCredentials } from "Common/Fetch";
 
 const QueryStringEncodeOptions = {
@@ -210,11 +212,13 @@ class AlertStore {
   status = observable(
     {
       value: AlertStoreStatuses.Idle,
+      lastUpdateAt: 0,
       error: null,
       paused: false,
       setIdle() {
         this.value = AlertStoreStatuses.Idle;
         this.error = null;
+        this.lastUpdateAt = moment();
       },
       setFetching() {
         this.value = AlertStoreStatuses.Fetching;
@@ -226,6 +230,7 @@ class AlertStore {
       setFailure(err) {
         this.value = AlertStoreStatuses.Failure;
         this.error = err;
+        this.lastUpdateAt = moment();
       },
       pause() {
         this.paused = true;