Fetch data source only when component is mounted

This way, data for components that are hidden at first (for example in
inactive tabs) won't be fetched until required. We then save a bunch of
requests to the server, when navigating from one page to another,
without opening tabs.

On date range refresh, however, the data sources will be requested
again even if the component using the data is not visible anymore.

powa/static/js/composables/DataLoaderService.js

@@ -6,7 +6,12 @@ export function useDataLoader(metric) {
   const { dataSources } = storeToRefs(useDashboardStore());
   const source = computed(() => dataSources.value[metric]);
   const loading = computed(() => source.value.isFetching);
-  const data = computed(() => source.value.data);
+  const data = computed(() => {
+    if (!source.value.executed) {
+      source.value.execute();
+    }
+    return source.value.data;
+  });
 
   return { data, loading, source };
 }

powa/static/js/stores/dashboard.js

@@ -73,12 +73,32 @@ export const useDashboardStore = defineStore("dashboard", () => {
         );
       }
 
+      function executeFn() {
+        source.isFetching = true;
+        source.controller = new AbortController();
+        fetch(`${source.config.data_url}?${urlSearchParams.value}`, {
+          signal: source.controller.signal,
+        })
+          .then((res) => res.json())
+          .then((json) => {
+            source.data = json;
+            addAlertMessages(json.messages);
+          })
+          .catch((err) => (source.error = err))
+          .finally(() => {
+            source.isFetching = false;
+          });
+        source.executed = true;
+      }
+
       const source = reactive({
         config,
         isFetching: true,
         data: null,
         error: null,
         controller: null,
+        executed: false,
+        execute: executeFn,
       });
       dataSources.value[config.name] = source;
     });
@@ -91,20 +111,7 @@ export const useDashboardStore = defineStore("dashboard", () => {
   function fetchDataSources() {
     cleanUpDataSources();
     _.each(dataSources.value, (source) => {
-      source.isFetching = true;
-      source.controller = new AbortController();
-      fetch(`${source.config.data_url}?${urlSearchParams.value}`, {
-        signal: source.controller.signal,
-      })
-        .then((res) => res.json())
-        .then((json) => {
-          source.data = json;
-          addAlertMessages(json.messages);
-        })
-        .catch((err) => (source.error = err))
-        .finally(() => {
-          source.isFetching = false;
-        });
+      source.executed && source.execute();
     });
   }