From 2e57e4af49ff8c3eb4141ad6ba0930d9d2e10dce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Thu, 31 Oct 2019 22:39:38 +0000
Subject: [PATCH] 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      | 34 ++-----------------------
 ui/src/Components/Fetcher/index.test.js |  4 ++-
 ui/src/Stores/AlertStore.js             |  5 ++++
 3 files changed, 10 insertions(+), 33 deletions(-)

diff --git a/ui/src/Components/Fetcher/index.js b/ui/src/Components/Fetcher/index.js
index c32d21f7b..7efd73673 100644
--- a/ui/src/Components/Fetcher/index.js
+++ b/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();
       }
     }
diff --git a/ui/src/Components/Fetcher/index.test.js b/ui/src/Components/Fetcher/index.test.js
index b4417364e..8d311ce6e 100644
--- a/ui/src/Components/Fetcher/index.test.js
+++ b/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;
diff --git a/ui/src/Stores/AlertStore.js b/ui/src/Stores/AlertStore.js
index 8e187606d..5efcc252b 100644
--- a/ui/src/Stores/AlertStore.js
+++ b/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;