mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
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:
parent
f85e758972
commit
b2644de6c8
@ -59,4 +59,5 @@ export interface FeatureToggles {
|
||||
savedItems?: boolean;
|
||||
cloudWatchDynamicLabels?: boolean;
|
||||
datasourceQueryMultiStatus?: boolean;
|
||||
azureMonitorExperimentalUI?: boolean;
|
||||
}
|
||||
|
@ -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,
|
||||
},
|
||||
}
|
||||
)
|
||||
|
@ -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"
|
||||
)
|
||||
|
@ -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;
|
||||
});
|
||||
});
|
||||
|
@ -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}
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
Loading…
Reference in New Issue
Block a user