AzureMonitor: Add support for selecting multiple options when using the equals and not equals dimension filters (#48650)

* Add support for multiselect

- Add filters param to Dimensions
- Update existing tests
- Add MultiSelect component
- Add helper function to determine valid options
- Update labels hook to account for custom values
- Update go type
- Add function to build valid filters string

* Additional go tests

- Ensure query targets are built correctly

* Update DimensionFields frontend test

- Corrently rerender components
- Additional test for multiple labels selection
- Better selection of options in react-select components

* Fix lint issue

* Reset filters when operator or dimension changes

* Terminology

* Update test

* Add backend migration

- Update types (deprecate Filter field)
- Add migration logic
- Update tests
- Update dimension filters buliding

* Add migration test code

* Simplify some logic

* Add frontend deprecation notice

* Add frontend migration logic and migration tests

* Update setting of filter values

* Update DimensionFields test

* Fix linting issues

* PR comment updates

- Remove unnecessary if/else condition
- Don't set filter default value as queries should be migrated
- Add comment explaining why sw operator only accepts one value
- Remove unnecessary test for merging of old and new filters

* Nit on terminology

Co-authored-by: Andres Martinez Gotor <andres.martinez@grafana.com>

* Rename migrations for clarity

Co-authored-by: Andres Martinez Gotor <andres.martinez@grafana.com>

public/app/plugins/datasource/grafana-azure-monitor-datasource/utils/migrateQuery.ts

@@ -5,7 +5,7 @@ import {
   setTimeGrain as setMetricsTimeGrain,
 } from '../components/MetricsQueryEditor/setQueryValue';
 import TimegrainConverter from '../time_grain_converter';
-import { AzureMonitorQuery, AzureQueryType } from '../types';
+import { AzureMetricDimension, AzureMonitorQuery, AzureQueryType } from '../types';
 
 const OLD_DEFAULT_DROPDOWN_VALUE = 'select';
 
@@ -20,8 +20,9 @@ export default function migrateQuery(query: AzureMonitorQuery): AzureMonitorQuer
   workingQuery = migrateTimeGrains(workingQuery);
   workingQuery = migrateLogAnalyticsToFromTimes(workingQuery);
   workingQuery = migrateToDefaultNamespace(workingQuery);
-  workingQuery = migrateMetricsDimensionFilters(workingQuery);
+  workingQuery = migrateDimensionToDimensionFilter(workingQuery);
   workingQuery = migrateResourceUri(workingQuery);
+  workingQuery = migrateDimensionFilterToArray(workingQuery);
 
   return workingQuery;
 }
@@ -79,17 +80,14 @@ function migrateToDefaultNamespace(query: AzureMonitorQuery): AzureMonitorQuery
   return query;
 }
 
-function migrateMetricsDimensionFilters(query: AzureMonitorQuery): AzureMonitorQuery {
+function migrateDimensionToDimensionFilter(query: AzureMonitorQuery): AzureMonitorQuery {
   let workingQuery = query;
 
   const oldDimension = workingQuery.azureMonitor?.dimension;
   if (oldDimension && oldDimension !== 'None') {
-    workingQuery = appendDimensionFilter(
-      workingQuery,
-      oldDimension,
-      'eq',
-      workingQuery.azureMonitor?.dimensionFilter || ''
-    );
+    workingQuery = appendDimensionFilter(workingQuery, oldDimension, 'eq', [
+      workingQuery.azureMonitor?.dimensionFilter || '',
+    ]);
   }
 
   return workingQuery;
@@ -122,6 +120,43 @@ function migrateResourceUri(query: AzureMonitorQuery): AzureMonitorQuery {
   };
 }
 
+function migrateDimensionFilterToArray(query: AzureMonitorQuery): AzureMonitorQuery {
+  const azureMonitorQuery = query.azureMonitor;
+
+  if (!azureMonitorQuery) {
+    return query;
+  }
+
+  const newFilters: AzureMetricDimension[] = [];
+  const dimensionFilters = azureMonitorQuery.dimensionFilters;
+  if (dimensionFilters && dimensionFilters.length > 0) {
+    dimensionFilters.forEach((filter) => {
+      const staticProps = { dimension: filter.dimension, operator: filter.operator };
+      if (!filter.filters && filter.filter) {
+        newFilters.push({ ...staticProps, filters: [filter.filter] });
+      } else {
+        let hasFilter = false;
+        if (filter.filters && filter.filter) {
+          for (const oldFilter of filter.filters) {
+            if (filter.filter === oldFilter) {
+              hasFilter = true;
+              break;
+            }
+          }
+          if (!hasFilter && filter.filter !== '*') {
+            filter.filters.push(filter.filter);
+          }
+          newFilters.push({ ...staticProps, filters: filter.filters });
+        }
+      }
+    });
+    if (newFilters.length > 0) {
+      return { ...query, azureMonitor: { ...azureMonitorQuery, dimensionFilters: newFilters } };
+    }
+  }
+  return query;
+}
+
 // datasource.ts also contains some migrations, which have been moved to here. Unsure whether
 // they should also do all the other migrations...
 export function datasourceMigrations(query: AzureMonitorQuery): AzureMonitorQuery {
@@ -135,8 +170,9 @@ export function datasourceMigrations(query: AzureMonitorQuery): AzureMonitorQuer
   }
 
   if (workingQuery.queryType === AzureQueryType.AzureMonitor && workingQuery.azureMonitor) {
-    workingQuery = migrateMetricsDimensionFilters(workingQuery);
+    workingQuery = migrateDimensionToDimensionFilter(workingQuery);
     workingQuery = migrateResourceUri(workingQuery);
+    workingQuery = migrateDimensionFilterToArray(workingQuery);
   }
 
   return workingQuery;