[gui] Fix refresh page overuse

This change introduces reasons for report filters to why the emit was
invoked. Based on this, it can be filtered when a refresh was actually
needed and when not.

Author: gulyasgergely902

web/server/vue-cli/src/components/Report/ReportFilter/ReportFilter.vue

@@ -702,7 +702,7 @@ function beforeInit() {
 }
 
 function afterInit() {
-  emit("refresh");
+  emit("refresh", "filter-init");
   registerWatchers();
   syncGroupPanels();
 }
@@ -729,20 +729,20 @@ function registerWatchers() {
   reportFilterUnwatch.value = store.watch(
     state => state.reportFilter, () => {
       if (!isInitializing.value)
-        emit("refresh");
+        emit("refresh", "filter-change");
 
     }, { deep: true });
 
   runIdsUnwatch.value = store.watch(
     state => state.runIds, () => {
       if (!isInitializing.value)
-        emit("refresh");
+        emit("refresh", "filter-change");
     });
 
   cmpDataUnwatch.value = store.watch(
     state => state.cmpData, () => {
       if (!isInitializing.value)
-        emit("refresh");
+        emit("refresh", "filter-change");
     }, { deep: true });
 }
 
@@ -828,7 +828,7 @@ function updateAllFilters() {
   if (!_filters?.length) return;
 
   _filters.forEach(filter => filter?.update?.() );
-  emit("refresh");
+  emit("refresh", "filter-change");
 }
 
 onBeforeUnmount(() => {

web/server/vue-cli/src/components/Statistics/Overview/OutstandingReportsChart.vue

@@ -62,7 +62,7 @@ const chart = ref();
 const dates = ref([]);
 const filterDateFormat = ref("");
 
-const refreshHandler = () => fetchDataHandler();
+const refreshHandler = () => fetchData(dates.value);
 
 const options = ref({
   plugins: {
@@ -193,10 +193,6 @@ onDeactivated(function() {
   props.bus.off("refresh", refreshHandler);
 });
 
-function fetchDataHandler() {
-  fetchData(dates.value);
-}
-
 /* eslint-disable no-unused-vars */
 function setChartDataOld() {
   const _interval = parseInt(props.interval);

web/server/vue-cli/src/views/Statistics.vue

@@ -12,7 +12,7 @@
           :report-count="reportCount"
           :refresh-filter="refreshFilterState"
           :hidden-filters="hiddenFilters"
-          @refresh="refresh"
+          @refresh="refreshByReportFilter"
           @set-refresh-filter-state="setRefreshFilterState"
         />
       </div>
@@ -146,6 +146,7 @@ const tabs = [
 const refreshFilterState = ref(false);
 const reportCount = ref(0);
 const tab = ref(null);
+const reportFiltersReady = ref(false);
 
 const bus = mitt();
 
@@ -169,10 +170,6 @@ const reportFilter = computed(function() {
 });
 
 watch(() => tab.value, async () => {
-  // FIXME: At page reload, this
-  // event triggers, but the report filter
-  // is not ready yet.
-
   if (tab.value == null) return;
 
   const currentTab = tabs[tab.value];
@@ -183,30 +180,44 @@ watch(() => tab.value, async () => {
     ...currentTab.hiddenFiltersByTab
   ];
 
+  if (!reportFiltersReady.value) return;
+
   await nextTick();
-  refreshCurrentTab();
+  emitRefresh();
 });
 
-function refresh() {
-  ccService.getClient().getRunResultCount(
-    runIds.value,
-    reportFilter.value,
-    null,
-    handleThriftError(_res => {
-      reportCount.value = _res.toNumber();
-    }));
-
-  tabs.forEach(_tab => {
-    const _resolve = router.resolve(_tab.to);
-    if (_resolve.route?.name) {
-      refreshTabs[_resolve.route.name] = true;
-    }
-  });
-
-  refreshCurrentTab();
+function refreshByReportFilter(reason) {
+  if (reason === "filter-change" && !reportFiltersReady.value) {
+    return;
+  }
+
+  if (reportFiltersReady.value) {
+    ccService.getClient().getRunResultCount(
+      runIds.value,
+      reportFilter.value,
+      null,
+      handleThriftError(_res => {
+        reportCount.value = _res.toNumber();
+      }));
+
+    tabs.forEach(_tab => {
+      const _resolve = router.resolve(_tab.to);
+      if (_resolve.route?.name) {
+        refreshTabs[_resolve.route.name] = true;
+      }
+    });
+  }
+
+  if (reason === "filter-init") {
+    reportFiltersReady.value = true;
+    emitRefreshStatistics();
+    return;
+  }
+
+  emitRefreshStatistics();
 }
 
-function refreshCurrentTab() {
+function emitRefreshStatistics() {
   bus.emit("refresh");
 
   if (tab.value == null) return;