From 275f33cf37bb4221ef120310a87c17d2e0ff5f35 Mon Sep 17 00:00:00 2001 From: Sarah Zinger Date: Mon, 14 Mar 2022 15:07:45 -0400 Subject: [PATCH] Azure Monitor: Add feature gating for new MetricsQueryEditor with resource picker (#46124) * Azure Monitor: Use feature toggle for dev of new UI for Metrics Queries. * Fixes after CR --- .../src/types/featureToggles.gen.ts | 1 + pkg/services/featuremgmt/registry.go | 7 ++++++ pkg/services/featuremgmt/toggles_gen.go | 4 ++++ .../MetricsQueryEditor.tsx | 9 ++++++++ .../QueryEditor/QueryEditor.test.tsx | 23 +++++++++++++++++++ .../components/QueryEditor/QueryEditor.tsx | 6 +++++ 6 files changed, 50 insertions(+) create mode 100644 public/app/plugins/datasource/grafana-azure-monitor-datasource/components/NewMetricsQueryEditor/MetricsQueryEditor.tsx diff --git a/packages/grafana-data/src/types/featureToggles.gen.ts b/packages/grafana-data/src/types/featureToggles.gen.ts index c566a4b2998..4cfe981b949 100644 --- a/packages/grafana-data/src/types/featureToggles.gen.ts +++ b/packages/grafana-data/src/types/featureToggles.gen.ts @@ -46,4 +46,5 @@ export interface FeatureToggles { dashboardComments?: boolean; annotationComments?: boolean; migrationLocking?: boolean; + azureMonitorResourcePickerForMetrics?: boolean; } diff --git a/pkg/services/featuremgmt/registry.go b/pkg/services/featuremgmt/registry.go index f0a542c248f..3dc7a0b675a 100644 --- a/pkg/services/featuremgmt/registry.go +++ b/pkg/services/featuremgmt/registry.go @@ -162,5 +162,12 @@ var ( Description: "Lock database during migrations", State: FeatureStateBeta, }, + { + Name: "azureMonitorResourcePickerForMetrics", + Description: "New UI for Azure Monitor Metrics Query", + State: FeatureStateAlpha, + RequiresDevMode: true, + FrontendOnly: true, + }, } ) diff --git a/pkg/services/featuremgmt/toggles_gen.go b/pkg/services/featuremgmt/toggles_gen.go index bb15e26e660..ba09cd822ca 100644 --- a/pkg/services/featuremgmt/toggles_gen.go +++ b/pkg/services/featuremgmt/toggles_gen.go @@ -122,4 +122,8 @@ const ( // FlagMigrationLocking // Lock database during migrations FlagMigrationLocking = "migrationLocking" + + // FlagAzureMonitorResourcePickerForMetrics + // New UI for Azure Monitor Metrics Query + FlagAzureMonitorResourcePickerForMetrics = "azureMonitorResourcePickerForMetrics" ) diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/NewMetricsQueryEditor/MetricsQueryEditor.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/NewMetricsQueryEditor/MetricsQueryEditor.tsx new file mode 100644 index 00000000000..595d3203fd7 --- /dev/null +++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/NewMetricsQueryEditor/MetricsQueryEditor.tsx @@ -0,0 +1,9 @@ +import React from 'react'; + +interface MetricsQueryEditorProps {} + +const MetricsQueryEditor: React.FC = ({}) => { + return
New Query Editor
; +}; + +export default MetricsQueryEditor; diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryEditor/QueryEditor.test.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryEditor/QueryEditor.test.tsx index fec1347043d..891327b463d 100644 --- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryEditor/QueryEditor.test.tsx +++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryEditor/QueryEditor.test.tsx @@ -1,4 +1,5 @@ import * as ui from '@grafana/ui'; +import { config } from '@grafana/runtime'; import { render, screen, waitFor } from '@testing-library/react'; import React from 'react'; import selectEvent from 'react-select-event'; @@ -130,4 +131,26 @@ describe('Azure Monitor QueryEditor', () => { expect(screen.queryByText('Application Insights')).toBeInTheDocument(); }); + + it('renders the new query editor for metrics when enabled with a feature toggle', async () => { + const originalConfigValue = config.featureToggles.azureMonitorResourcePickerForMetrics; + + // To do this irl go to custom.ini file and add resourcePickerForMetrics = true under [feature_toggles] + config.featureToggles.azureMonitorResourcePickerForMetrics = true; + + const mockDatasource = createMockDatasource(); + const mockQuery = { + ...createMockQuery(), + queryType: AzureQueryType.AzureMonitor, + }; + + render( {}} onRunQuery={() => {}} />); + + await waitFor(() => + expect(screen.getByTestId('azure-monitor-metrics-query-editor-with-resource-picker')).toBeInTheDocument() + ); + + // reset config to not impact future tests + config.featureToggles.azureMonitorResourcePickerForMetrics = originalConfigValue; + }); }); diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryEditor/QueryEditor.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryEditor/QueryEditor.tsx index 3d74ba05af5..85382626a38 100644 --- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryEditor/QueryEditor.tsx +++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryEditor/QueryEditor.tsx @@ -1,5 +1,7 @@ import { QueryEditorProps } from '@grafana/data'; import { Alert } from '@grafana/ui'; +import { config } from '@grafana/runtime'; + import { debounce } from 'lodash'; import React, { useCallback, useMemo } from 'react'; @@ -19,6 +21,7 @@ import InsightsAnalyticsEditor from '../deprecated/components/InsightsAnalyticsE import { gtGrafana9 } from '../deprecated/utils'; import LogsQueryEditor from '../LogsQueryEditor'; import MetricsQueryEditor from '../MetricsQueryEditor'; +import NewMetricsQueryEditor from '../NewMetricsQueryEditor/MetricsQueryEditor'; import { Space } from '../Space'; import QueryTypeField from './QueryTypeField'; import usePreparedQuery from './usePreparedQuery'; @@ -95,6 +98,9 @@ const EditorForQueryType: React.FC = ({ }) => { switch (query.queryType) { case AzureQueryType.AzureMonitor: + if (config.featureToggles.azureMonitorResourcePickerForMetrics) { + return ; + } return (