AzureMonitor: add feature toggle azureMonitorExperimentalUI for migrating to experimental UI (#48658)

* feat: add feature toggle azureMonitorExperimentalUI

Add QueryHeader which adds an experimental header to AzureMonitor. This work is documented in #44432.
This commit is contained in:
Adam Simpson 2022-05-04 09:54:09 -04:00 committed by GitHub
parent f85e758972
commit b2644de6c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 80 additions and 1 deletions

View File

@ -59,4 +59,5 @@ export interface FeatureToggles {
savedItems?: boolean;
cloudWatchDynamicLabels?: boolean;
datasourceQueryMultiStatus?: boolean;
azureMonitorExperimentalUI?: boolean;
}

View File

@ -241,5 +241,12 @@ var (
Description: "Introduce HTTP 207 Multi Status for api/ds/query",
State: FeatureStateAlpha,
},
{
Name: "azureMonitorExperimentalUI",
Description: "Use grafana-experimental UI in Azure Monitor",
State: FeatureStateAlpha,
RequiresDevMode: true,
FrontendOnly: true,
},
}
)

View File

@ -178,4 +178,8 @@ const (
// FlagDatasourceQueryMultiStatus
// Introduce HTTP 207 Multi Status for api/ds/query
FlagDatasourceQueryMultiStatus = "datasourceQueryMultiStatus"
// FlagAzureMonitorExperimentalUI
// Use grafana-experimental UI in Azure Monitor
FlagAzureMonitorExperimentalUI = "azureMonitorExperimentalUI"
)

View File

@ -90,4 +90,22 @@ describe('Azure Monitor QueryEditor', () => {
// reset config to not impact future tests
config.featureToggles.azureMonitorResourcePickerForMetrics = originalConfigValue;
});
it('should render the experimental QueryHeader when feature toggle is enabled', async () => {
const originalConfigValue = config.featureToggles.azureMonitorExperimentalUI;
config.featureToggles.azureMonitorExperimentalUI = true;
const mockDatasource = createMockDatasource();
const mockQuery = {
...createMockQuery(),
queryType: AzureQueryType.AzureMonitor,
};
render(<QueryEditor query={mockQuery} datasource={mockDatasource} onChange={() => {}} onRunQuery={() => {}} />);
await waitFor(() => expect(screen.getByTestId('azure-monitor-experimental-header')).toBeInTheDocument());
config.featureToggles.azureMonitorExperimentalUI = originalConfigValue;
});
});

View File

@ -18,6 +18,7 @@ import ArgQueryEditor from '../ArgQueryEditor';
import LogsQueryEditor from '../LogsQueryEditor';
import MetricsQueryEditor from '../MetricsQueryEditor';
import NewMetricsQueryEditor from '../NewMetricsQueryEditor/MetricsQueryEditor';
import { QueryHeader } from '../QueryHeader';
import { Space } from '../Space';
import QueryTypeField from './QueryTypeField';
@ -57,7 +58,10 @@ const QueryEditor: React.FC<AzureMonitorQueryEditorProps> = ({
return (
<div data-testid="azure-monitor-query-editor">
<QueryTypeField query={query} onQueryChange={onQueryChange} />
{config.featureToggles.azureMonitorExperimentalUI && <QueryHeader query={query} onQueryChange={onQueryChange} />}
{!config.featureToggles.azureMonitorExperimentalUI && (
<QueryTypeField query={query} onQueryChange={onQueryChange} />
)}
<EditorForQueryType
data={data}

View File

@ -0,0 +1,45 @@
import React, { useCallback } from 'react';
import { SelectableValue } from '@grafana/data';
import { EditorHeader, InlineSelect } from '@grafana/experimental';
import { AzureMonitorQuery, AzureQueryType } from '../types';
interface QueryTypeFieldProps {
query: AzureMonitorQuery;
onQueryChange: (newQuery: AzureMonitorQuery) => void;
}
export const QueryHeader: React.FC<QueryTypeFieldProps> = ({ query, onQueryChange }) => {
const queryTypes: Array<{ value: AzureQueryType; label: string }> = [
{ value: AzureQueryType.AzureMonitor, label: 'Metrics' },
{ value: AzureQueryType.LogAnalytics, label: 'Logs' },
{ value: AzureQueryType.AzureResourceGraph, label: 'Azure Resource Graph' },
];
const handleChange = useCallback(
(change: SelectableValue<AzureQueryType>) => {
change.value &&
onQueryChange({
...query,
queryType: change.value,
});
},
[onQueryChange, query]
);
return (
<span data-testid="azure-monitor-experimental-header">
<EditorHeader>
<InlineSelect
label="Service"
value={query.queryType}
placeholder="Service..."
allowCustomValue
options={queryTypes}
onChange={handleChange}
/>
</EditorHeader>
</span>
);
};