Azure Monitor: Read only App Insights page in React (#33651)

Azure Monitor: Migrate App Insights to React (create read only version)

public/app/plugins/datasource/grafana-azure-monitor-datasource/app_insights/app_insights_datasource.ts

@@ -110,7 +110,6 @@ export default class AppInsightsDatasource extends DataSourceWithBackend<AzureMo
       queryType: AzureQueryType.ApplicationInsights,
       appInsights: {
         timeGrain: templateSrv.replace((item.timeGrain || '').toString(), scopedVars),
-        allowedTimeGrainsMs: item.allowedTimeGrainsMs,
         metricName: templateSrv.replace(item.metricName, scopedVars),
         aggregation: templateSrv.replace(item.aggregation, scopedVars),
         dimension: item.dimension.map((d) => templateSrv.replace(d, scopedVars)),

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 (
+    <Field label="Timegrain">
+      <>
+        {timeFields.map((timeField) => (
+          <Input value={timeField} disabled={true} onChange={() => {}} key={timeField} width={10} />
+        ))}
+      </>
+    </Field>
+  );
+};
+
+const ApplicationInsightsEditor = ({ query }: { query: AzureMonitorQuery }) => {
+  const groupBy = query.appInsights?.dimension || [];
+
+  return (
+    <div data-testid="azure-monitor-application-insights-query-editor">
+      <Field label="Metric" disabled={true}>
+        <Input
+          value={query.appInsights?.metricName}
+          disabled={true}
+          onChange={() => {}}
+          id="azure-monitor-application-insights-metric"
+        />
+      </Field>
+      <Field label="Aggregation" disabled={true}>
+        <Input value={query.appInsights?.aggregation} disabled={true} onChange={() => {}} />
+      </Field>
+      {groupBy.length > 0 && (
+        <Field label="Group by">
+          <>
+            {groupBy.map((dimension) => (
+              <Input value={dimension} disabled={true} onChange={() => {}} key={dimension} />
+            ))}
+          </>
+        </Field>
+      )}
+      <Field label="Filter" disabled={true}>
+        <Input value={query.appInsights?.dimensionFilter} disabled={true} onChange={() => {}} />
+      </Field>
+      <ReadOnlyTimeGrain
+        timeGrainCount={query.appInsights?.timeGrainCount || ''}
+        timeGrainType={query.appInsights?.timeGrainType || 'auto'}
+        timeGrainUnit={query.appInsights?.timeGrainUnit || 'minute'}
+      />
+      <Field label="Legend format" disabled={true}>
+        <Input placeholder="Alias patterns" value={query.appInsights?.alias} onChange={() => {}} disabled={true} />
+      </Field>
+      <Alert severity="info" title="Deprecated">
+        Application Insights is deprecated and is now read only. Migrate your queries to Metrics to make changes.
+      </Alert>
+    </div>
+  );
+};
+
+export default ApplicationInsightsEditor;

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(
+      <QueryEditor
+        query={mockQuery}
+        datasource={mockDatasource}
+        variableOptionGroup={variableOptionGroup}
+        onChange={() => {}}
+      />
+    );
+    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();

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<EditorForQueryTypeProps> = ({
           setError={setError}
         />
       );
+
+    case AzureQueryType.ApplicationInsights:
+      return <ApplicationInsightsEditor query={query} />;
   }
 
   return null;

public/app/plugins/datasource/grafana-azure-monitor-datasource/partials/query.editor.html

@@ -509,7 +509,7 @@
 
   <div
     class="gf-form"
-    ng-if="ctrl.target.queryType === 'Application Insights' || ctrl.target.queryType === 'Insights Analytics'"
+    ng-if="ctrl.target.queryType === 'Insights Analytics'"
   >
     <p class="gf-form-pre alert alert-info">
       Application Insights and Insights Analytics will be deprecated and merged with Metrics and Logs in an upcomming

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;
 

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!