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

Right now fetcher will always trigger fetch if enough time passes, make it aware of the last fetch timestamp so the timer resets after each 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;