From d2bdb4ed41247e7ad24dbfb6d13f2d5faf7c381c Mon Sep 17 00:00:00 2001 From: Josh Hunt Date: Tue, 13 Apr 2021 14:29:32 +0100 Subject: [PATCH] AzureMonitor: Convert Logs to React (#32315) * Convert Logs to React * copy changes * fix effect deps * tests for logs * remove any from test * Update QueryEditor.tsx --- .../__mocks__/datasource.ts | 2 + .../LogsQueryEditor/FormatAsField.tsx | 47 +++++++++++++ .../LogsQueryEditor/LogsQueryEditor.tsx | 69 +++++++++++++++++++ .../components/LogsQueryEditor/QueryField.tsx | 32 +++++++++ .../LogsQueryEditor/WorkspaceField.tsx | 64 +++++++++++++++++ .../components/LogsQueryEditor/index.tsx | 1 + .../MetricsQueryEditor/LegendFormatField.tsx | 2 +- .../MetricNamespaceField.tsx | 2 +- .../ResourceGroupsField.tsx | 2 +- .../MetricsQueryEditor/ResourceNameField.tsx | 2 +- .../MetricsQueryEditor/TimeGrainField.tsx | 2 +- .../QueryEditor/QueryEditor.test.tsx | 28 ++++++-- .../components/QueryEditor/QueryEditor.tsx | 13 ++++ .../query_ctrl.ts | 2 +- .../grafana-azure-monitor-datasource/types.ts | 2 + 15 files changed, 257 insertions(+), 13 deletions(-) create mode 100644 public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/FormatAsField.tsx create mode 100644 public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/LogsQueryEditor.tsx create mode 100644 public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/QueryField.tsx create mode 100644 public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/WorkspaceField.tsx create mode 100644 public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/index.tsx diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/__mocks__/datasource.ts b/public/app/plugins/datasource/grafana-azure-monitor-datasource/__mocks__/datasource.ts index f1b85b0c570..7b20c3a23ba 100644 --- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/__mocks__/datasource.ts +++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/__mocks__/datasource.ts @@ -17,6 +17,8 @@ export default function createMockDatasource() { getSubscriptions: jest.fn().mockResolvedValueOnce([]), }, + getAzureLogAnalyticsWorkspaces: jest.fn().mockResolvedValueOnce([]), + getResourceGroups: jest.fn().mockResolvedValueOnce([]), getMetricDefinitions: jest.fn().mockResolvedValueOnce([]), getResourceNames: jest.fn().mockResolvedValueOnce([]), diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/FormatAsField.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/FormatAsField.tsx new file mode 100644 index 00000000000..1530f8b7ce6 --- /dev/null +++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/FormatAsField.tsx @@ -0,0 +1,47 @@ +import { SelectableValue } from '@grafana/data'; +import { Select } from '@grafana/ui'; +import React, { useCallback, useMemo } from 'react'; +import { AzureMonitorOption, AzureQueryEditorFieldProps, AzureResultFormat } from '../../types'; +import { findOption } from '../../utils/common'; +import { Field } from '../Field'; + +const FORMAT_OPTIONS: Array> = [ + { label: 'Time series', value: 'time_series' }, + { label: 'Table', value: 'table' }, +]; + +const FormatAsField: React.FC = ({ query, variableOptionGroup, onQueryChange }) => { + const options = useMemo(() => [...FORMAT_OPTIONS, variableOptionGroup], [variableOptionGroup]); + + const handleChange = useCallback( + (change: SelectableValue) => { + const { value } = change; + if (!value) { + return; + } + + onQueryChange({ + ...query, + azureLogAnalytics: { + ...query.azureLogAnalytics, + resultFormat: value, + }, + }); + }, + [onQueryChange, query] + ); + + return ( + + + + ); +}; + +export default WorkspaceField; diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/index.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/index.tsx new file mode 100644 index 00000000000..ea14e635722 --- /dev/null +++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/LogsQueryEditor/index.tsx @@ -0,0 +1 @@ +export { default } from './LogsQueryEditor'; diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/LegendFormatField.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/LegendFormatField.tsx index 7c7925760c0..ad8bdab1ba3 100644 --- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/LegendFormatField.tsx +++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/MetricsQueryEditor/LegendFormatField.tsx @@ -26,7 +26,7 @@ const LegendFormatField: React.FC = ({ onQueryChange }, [onQueryChange, query, value]); return ( - + = ({ const options = useMemo(() => [...metricNamespaces, variableOptionGroup], [metricNamespaces, variableOptionGroup]); return ( - + = ({ const selectedResourceNameValue = findOption(resourceNames, query.azureMonitor.resourceName); return ( - + ({ + ...jest.requireActual('@grafana/ui'), + CodeEditor: function CodeEditor({ value }: { value: string }) { + return 
{value}
; + }, +})); const variableOptionGroup = { label: 'Template variables', @@ -17,9 +26,14 @@ const variableOptionGroup = { describe('Azure Monitor QueryEditor', () => { it('renders the Metrics query editor when the query type is Metrics', async () => { const mockDatasource = createMockDatasource(); + const mockQuery = { + ...createMockQuery(), + queryType: AzureQueryType.AzureMonitor, + }; + render( {}} @@ -28,22 +42,22 @@ describe('Azure Monitor QueryEditor', () => { await waitFor(() => expect(screen.getByTestId('azure-monitor-metrics-query-editor')).toBeInTheDocument()); }); - it("does not render the Metrics query editor when the query type isn't Metrics", async () => { + it('renders the Metrics query editor when the query type is Metrics', async () => { const mockDatasource = createMockDatasource(); - const mockQuery = createMockQuery(); - const logsMockQuery = { - ...mockQuery, + const mockQuery = { + ...createMockQuery(), queryType: AzureQueryType.LogAnalytics, }; + render( {}} /> ); - await waitFor(() => expect(screen.queryByTestId('azure-monitor-metrics-query-editor')).not.toBeInTheDocument()); + await waitFor(() => expect(screen.queryByTestId('azure-monitor-logs-query-editor')).toBeInTheDocument()); }); it('changes the query type when selected', async () => { 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 48a70ec4182..2cdc8e7caba 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 @@ -5,6 +5,7 @@ import { AzureMonitorQuery, AzureQueryType, AzureMonitorOption, AzureMonitorErro import MetricsQueryEditor from '../MetricsQueryEditor'; import QueryTypeField from './QueryTypeField'; import useLastError from '../../utils/useLastError'; +import LogsQueryEditor from '../LogsQueryEditor'; interface BaseQueryEditorProps { query: AzureMonitorQuery; @@ -70,6 +71,18 @@ const EditorForQueryType: React.FC = ({ setError={setError} /> ); + + case AzureQueryType.LogAnalytics: + return ( + + ); } return null; diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/query_ctrl.ts b/public/app/plugins/datasource/grafana-azure-monitor-datasource/query_ctrl.ts index 04a84e463b3..db6309e1a42 100644 --- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/query_ctrl.ts +++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/query_ctrl.ts @@ -30,7 +30,7 @@ export class AzureMonitorQueryCtrl extends QueryCtrl { ]; // Query types that have been migrated to React - reactQueryEditors = [AzureQueryType.AzureMonitor]; + reactQueryEditors = [AzureQueryType.AzureMonitor, AzureQueryType.LogAnalytics]; // target: AzureMonitorQuery; diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/types.ts b/public/app/plugins/datasource/grafana-azure-monitor-datasource/types.ts index 00d557f86c1..4c60dadab5d 100644 --- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/types.ts +++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/types.ts @@ -3,6 +3,8 @@ import Datasource from './datasource'; export type AzureDataSourceSettings = DataSourceSettings; +export type AzureResultFormat = 'time_series' | 'table'; + export enum AzureQueryType { AzureMonitor = 'Azure Monitor', ApplicationInsights = 'Application Insights',