From 8c072d963be1eab9d1b491db1947f677d449a64e Mon Sep 17 00:00:00 2001 From: Sarah Zinger Date: Wed, 5 May 2021 11:05:40 -0400 Subject: [PATCH] Azure Monitor: Read only App Insights page in React (#33651) Azure Monitor: Migrate App Insights to React (create read only version) --- .../app_insights/app_insights_datasource.ts | 1 - .../ApplicationInsightsEditor/index.tsx | 71 +++++++++++++++++++ .../QueryEditor/QueryEditor.test.tsx | 37 +++++++++- .../components/QueryEditor/QueryEditor.tsx | 4 ++ .../partials/query.editor.html | 2 +- .../query_ctrl.ts | 2 +- .../grafana-azure-monitor-datasource/types.ts | 5 +- 7 files changed, 116 insertions(+), 6 deletions(-) create mode 100644 public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ApplicationInsightsEditor/index.tsx diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/app_insights/app_insights_datasource.ts b/public/app/plugins/datasource/grafana-azure-monitor-datasource/app_insights/app_insights_datasource.ts index 872a20af6cb..26ba7346c1c 100644 --- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/app_insights/app_insights_datasource.ts +++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/app_insights/app_insights_datasource.ts @@ -110,7 +110,6 @@ export default class AppInsightsDatasource extends DataSourceWithBackend templateSrv.replace(d, scopedVars)), diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ApplicationInsightsEditor/index.tsx b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ApplicationInsightsEditor/index.tsx new file mode 100644 index 00000000000..51395bb39c6 --- /dev/null +++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/ApplicationInsightsEditor/index.tsx @@ -0,0 +1,71 @@ +import React from 'react'; +import { AzureMonitorQuery } from '../../types'; +import { Alert, Input } from '@grafana/ui'; +import { Field } from '../Field'; + +const ReadOnlyTimeGrain = ({ + timeGrainCount, + timeGrainType, + timeGrainUnit, +}: { + timeGrainCount: string; + timeGrainType: string; + timeGrainUnit: string; +}) => { + const timeFields = timeGrainType === 'specific' ? ['specific', timeGrainCount, timeGrainUnit] : [timeGrainType]; + + return ( + + <> + {timeFields.map((timeField) => ( + {}} key={timeField} width={10} /> + ))} + + + ); +}; + +const ApplicationInsightsEditor = ({ query }: { query: AzureMonitorQuery }) => { + const groupBy = query.appInsights?.dimension || []; + + return ( +
+ + {}} + id="azure-monitor-application-insights-metric" + /> + + + {}} /> + + {groupBy.length > 0 && ( + + <> + {groupBy.map((dimension) => ( + {}} key={dimension} /> + ))} + + + )} + + {}} /> + + + + {}} disabled={true} /> + + + Application Insights is deprecated and is now read only. Migrate your queries to Metrics to make changes. + +
+ ); +}; + +export default ApplicationInsightsEditor; 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 00685feda96..be9f2fdbc8c 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 @@ -42,7 +42,7 @@ describe('Azure Monitor QueryEditor', () => { await waitFor(() => expect(screen.getByTestId('azure-monitor-metrics-query-editor')).toBeInTheDocument()); }); - it('renders the Metrics query editor when the query type is Metrics', async () => { + it('renders the Logs query editor when the query type is Logs', async () => { const mockDatasource = createMockDatasource(); const mockQuery = { ...createMockQuery(), @@ -60,6 +60,41 @@ describe('Azure Monitor QueryEditor', () => { await waitFor(() => expect(screen.queryByTestId('azure-monitor-logs-query-editor')).toBeInTheDocument()); }); + it('renders the ApplicationInsights query editor when the query type is Application Insights and renders values in disabled inputs', async () => { + const mockDatasource = createMockDatasource(); + const mockQuery = { + ...createMockQuery(), + queryType: AzureQueryType.ApplicationInsights, + appInsights: { + metricName: 'requests/count', + timeGrain: 'PT1H', + timeGrainCount: '1', + timeGrainType: 'specific', + timeGrainUnit: 'hour', + aggregation: 'average', + dimension: ['request/name'], + dimensionFilter: "request/name eq 'GET Home/Index'", + alias: '{{ request/name }}', + }, + }; + + render( + {}} + /> + ); + await waitFor(() => + expect(screen.queryByTestId('azure-monitor-application-insights-query-editor')).toBeInTheDocument() + ); + + const metricInput = await screen.getByLabelText('Metric'); + expect(metricInput).toBeDisabled(); + expect(metricInput).toHaveValue('requests/count'); + }); + it('changes the query type when selected', async () => { const mockDatasource = createMockDatasource(); const mockQuery = createMockQuery(); 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 2cdc8e7caba..62757dc55b8 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 @@ -6,6 +6,7 @@ import MetricsQueryEditor from '../MetricsQueryEditor'; import QueryTypeField from './QueryTypeField'; import useLastError from '../../utils/useLastError'; import LogsQueryEditor from '../LogsQueryEditor'; +import ApplicationInsightsEditor from '../ApplicationInsightsEditor'; interface BaseQueryEditorProps { query: AzureMonitorQuery; @@ -83,6 +84,9 @@ const EditorForQueryType: React.FC = ({ setError={setError} /> ); + + case AzureQueryType.ApplicationInsights: + return ; } return null; diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/partials/query.editor.html b/public/app/plugins/datasource/grafana-azure-monitor-datasource/partials/query.editor.html index a61b37ebf1a..4187d44edce 100644 --- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/partials/query.editor.html +++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/partials/query.editor.html @@ -509,7 +509,7 @@

Application Insights and Insights Analytics will be deprecated and merged with Metrics and Logs in an upcomming 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 4f0fe904b16..70dac04ccd9 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, AzureQueryType.LogAnalytics]; + reactQueryEditors = [AzureQueryType.AzureMonitor, AzureQueryType.LogAnalytics, AzureQueryType.ApplicationInsights]; // 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 602e79cdf12..14e110a6a5e 100644 --- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/types.ts +++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/types.ts @@ -77,9 +77,10 @@ export interface AzureLogsQuery { export interface ApplicationInsightsQuery { metricName: string; - timeGrainUnit: string; timeGrain: string; - allowedTimeGrainsMs: number[]; + timeGrainCount: string; + timeGrainType: string; + timeGrainUnit: string; aggregation: string; dimension: string[]; // Was string before 7.1 // dimensions: string[]; why is this metadata stored on the object!