Add support for reloading a panel data

What does this MR do and why?

Some panels need support for reloading their own data, e.g. if panel visualisation options changes or to support pagination.

To achieve that, this MR is adding an updateQuery even that can be emitted by the viz to override the query parameters, and passed down to the datasource so that it can reload the data accordingly.

References

Please include cross links to any resources that are relevant to this MR. This will give reviewers and future readers helpful context to give an efficient review of the changes introduced.

• Add support for reloading a panel data (#518648 - closed)

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

No visual changes

How to set up and validate locally

You can apply the following patch to simulate the event being emitted by the usage_overview visualisation

diff --git a/ee/app/assets/javascripts/analytics/analytics_dashboards/components/visualizations/usage_overview.vue b/ee/app/assets/javascripts/analytics/analytics_dashboards/components/visualizations/usage_overview.vue
index 9acd2acd8154..ced1c684f836 100644
--- a/ee/app/assets/javascripts/analytics/analytics_dashboards/components/visualizations/usage_overview.vue
+++ b/ee/app/assets/javascripts/analytics/analytics_dashboards/components/visualizations/usage_overview.vue
@@ -65,6 +65,9 @@ export default {
         canRetry: false,
       });
     }
+    setInterval(() => {
+      this.$emit('updateQuery', { foo: `bar-${Date.now()}` });
+    }, 5000);
   },
   methods: {
     displayValue(value) {
diff --git a/ee/app/assets/javascripts/analytics/analytics_dashboards/data_sources/usage_overview.js b/ee/app/assets/javascripts/analytics/analytics_dashboards/data_sources/usage_overview.js
index 34dc94f7aab4..43d1e4a2f5d1 100644
--- a/ee/app/assets/javascripts/analytics/analytics_dashboards/data_sources/usage_overview.js
+++ b/ee/app/assets/javascripts/analytics/analytics_dashboards/data_sources/usage_overview.js
@@ -122,13 +122,12 @@ export const prepareQuery = (queryKeysToInclude = []) => {
 /**
  * Fetch usage overview metrics for a given namespace
  */
-export default async function fetch({
-  namespace,
-  queryOverrides: {
-    namespace: namespaceOverride,
-    filters: { include = USAGE_OVERVIEW_IDENTIFIERS } = {},
-  } = {},
-}) {
+export default async function fetch({ namespace, queryOverrides = {} }) {
+  const { namespace: namespaceOverride, filters: { include = USAGE_OVERVIEW_IDENTIFIERS } = {} } =
+    queryOverrides;
+
+  console.log(`Fetching data with query overrides:`, queryOverrides);
+
   const fullPath = namespaceOverride || namespace;
   const variableOverrides = prepareQuery(include);
   const { startDate, endDate } = USAGE_OVERVIEW_DEFAULT_DATE_RANGE;
diff --git a/ee/lib/gitlab/analytics/value_stream_dashboard/dashboards/value_streams_dashboard.yaml b/ee/lib/gitlab/analytics/value_stream_dashboard/dashboards/value_streams_dashboard.yaml
index 73b6e8e28111..3b6983118de0 100644
--- a/ee/lib/gitlab/analytics/value_stream_dashboard/dashboards/value_streams_dashboard.yaml
+++ b/ee/lib/gitlab/analytics/value_stream_dashboard/dashboards/value_streams_dashboard.yaml
@@ -5,6 +5,8 @@ version: "2"
 panels:
   - visualization: usage_overview
     title: Usage overview for the %{namespaceName} %{namespaceType}
+    queryOverrides:
+      namespace: 'test'
     gridAttributes:
       yPos: 0
       xPos: 0