[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

@@ -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,12 +170,10 @@ 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;
 
+  if (!reportFiltersReady.value) return;
+
   const currentTab = tabs[tab.value];
   if (!currentTab) return;
 
@@ -184,10 +183,10 @@ watch(() => tab.value, async () => {
   ];
 
   await nextTick();
-  refreshCurrentTab();
+  emitRefresh();
 });
 
-function refresh() {
+function refresh(reason) {
   ccService.getClient().getRunResultCount(
     runIds.value,
     reportFilter.value,
@@ -203,10 +202,18 @@ function refresh() {
     }
   });
 
-  refreshCurrentTab();
+  if (reason === "filter-init") {
+    reportFiltersReady.value = true;
+    emitRefresh();
+    return;
+  }
+
+  if (reason === "filter-change" && reportFiltersReady.value) {
+    emitRefresh();
+  }
 }
 
-function refreshCurrentTab() {
+function emitRefresh() {
   bus.emit("refresh");
 
   if (tab.value == null) return;