The statistics pages flakyness at page reload

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

@@ -655,17 +655,21 @@ function registerWatchers() {
 
   reportFilterUnwatch.value = store.watch(
     state => state[props.namespace].reportFilter, () => {
-      emit("refresh");
+      if (!isInitializing.value)
+        emit("refresh");
+
     }, { deep: true });
 
   runIdsUnwatch.value = store.watch(
     state => state[props.namespace].runIds, () => {
-      emit("refresh");
+      if (!isInitializing.value)
+        emit("refresh");
     });
 
   cmpDataUnwatch.value = store.watch(
     state => state[props.namespace].cmpData, () => {
-      emit("refresh");
+      if (!isInitializing.value)
+        emit("refresh");
     }, { deep: true });
 }
 
@@ -751,7 +755,6 @@ function updateAllFilters() {
   if (!_filters?.length) return;
 
   _filters.forEach(filter => filter?.update?.() );
-
   emit("refresh");
 }
 

web/server/vue-cli/src/components/Statistics/Guideline/GuidelineStatistics.vue

@@ -239,6 +239,7 @@ const filteredStatistics = computed(() => {
   return statistics.value;
 });
 
+// Refresh the data on ReportFilter changes
 baseStatistics.setupRefreshListener(fetchStatistics);
 
 watch(() => baseStatistics.runIds, async () => {
@@ -457,7 +458,6 @@ async function fetchStatistics() {
 
 async function fetchProblematicRuns() {
   loading.value = true;
-
   const _runs = await getRunData();
   problematicRuns.value = (await Promise.all(
     _runs.map(async runData => {
@@ -474,7 +474,6 @@ async function fetchProblematicRuns() {
         return null;
       }
     }))).filter(element => element !== null);
-
   runs.value = _runs;
   loading.value = false;
 }

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

@@ -133,7 +133,12 @@ const reportFilter = computed(function() {
   return store.getters[`${namespace}/getReportFilter`];
 });
 
-watch(() => tab.value, async () => {
+watch(() => tab.value, async (value, oldValue) => {
+  // Don't refresh on page reload!
+  // When the ReportFilter is loaded
+  // from the URL it will trigger refresh.
+  if (!oldValue)
+    return;
   if (tab.value == null) return;
 
   const currentTab = tabs[tab.value];