AzureMonitor: Create read-only React view for Insights Analytics (#33719)

* AzureMonitor: Create read-only React view for Insights Analytics

* Fix spacing

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/InsightsAnalyticsEditor/index.tsx

@@ -0,0 +1,49 @@
+import { Alert, CodeEditor, Select } from '@grafana/ui';
+import React from 'react';
+import { AzureMonitorOption, AzureMonitorQuery, AzureResultFormat } from '../../types';
+import { findOption } from '../../utils/common';
+import { Field } from '../Field';
+import { Space } from '../Space';
+
+interface InsightsAnalyticsEditorProps {
+  query: AzureMonitorQuery;
+}
+
+const FORMAT_OPTIONS: Array<AzureMonitorOption<AzureResultFormat>> = [
+  { label: 'Time series', value: 'time_series' },
+  { label: 'Table', value: 'table' },
+];
+
+const InsightsAnalyticsEditor: React.FC<InsightsAnalyticsEditorProps> = ({ query }) => {
+  return (
+    <div data-testid="azure-monitor-insights-analytics-query-editor">
+      <CodeEditor
+        language="kusto"
+        value={query.insightsAnalytics.query}
+        height={200}
+        width="100%"
+        readOnly={true}
+        showMiniMap={false}
+      />
+
+      <Field label="Format as">
+        <Select
+          inputId="azure-monitor-logs-workspaces-field"
+          value={findOption(FORMAT_OPTIONS, query.insightsAnalytics.resultFormat)}
+          disabled={true}
+          options={FORMAT_OPTIONS}
+          onChange={() => {}}
+          width={38}
+        />
+      </Field>
+
+      <Space v={2} />
+
+      <Alert severity="info" title="Deprecated">
+        Insights Analytics is deprecated and is now read only. Migrate your queries to Logs to make changes.
+      </Alert>
+    </div>
+  );
+};
+
+export default InsightsAnalyticsEditor;

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/QueryEditor/QueryEditor.tsx

@@ -1,4 +1,4 @@
-import { Alert, VerticalGroup } from '@grafana/ui';
+import { Alert } from '@grafana/ui';
 import React from 'react';
 import Datasource from '../../datasource';
 import { AzureMonitorQuery, AzureQueryType, AzureMonitorOption, AzureMonitorErrorish } from '../../types';
@@ -7,6 +7,8 @@ import QueryTypeField from './QueryTypeField';
 import useLastError from '../../utils/useLastError';
 import LogsQueryEditor from '../LogsQueryEditor';
 import ApplicationInsightsEditor from '../ApplicationInsightsEditor';
+import InsightsAnalyticsEditor from '../InsightsAnalyticsEditor';
+import { Space } from '../Space';
 
 interface BaseQueryEditorProps {
   query: AzureMonitorQuery;
@@ -27,7 +29,6 @@ const QueryEditor: React.FC<BaseQueryEditorProps> = ({ query, datasource, onChan
     <div data-testid="azure-monitor-query-editor">
       <QueryTypeField query={query} onQueryChange={onChange} />
 
-      <VerticalGroup>
       <EditorForQueryType
         subscriptionId={subscriptionId}
         query={query}
@@ -38,11 +39,13 @@ const QueryEditor: React.FC<BaseQueryEditorProps> = ({ query, datasource, onChan
       />
 
       {errorMessage && (
+        <>
+          <Space v={2} />
           <Alert severity="error" title="An error occurred while requesting metadata from Azure Monitor">
             {errorMessage}
           </Alert>
+        </>
       )}
-      </VerticalGroup>
     </div>
   );
 };
@@ -87,6 +90,9 @@ const EditorForQueryType: React.FC<EditorForQueryTypeProps> = ({
 
     case AzureQueryType.ApplicationInsights:
       return <ApplicationInsightsEditor query={query} />;
+
+    case AzureQueryType.InsightsAnalytics:
+      return <InsightsAnalyticsEditor query={query} />;
   }
 
   return null;

public/app/plugins/datasource/grafana-azure-monitor-datasource/components/Space.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { css, cx } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import { stylesFactory, useTheme2 } from '@grafana/ui';
+
+export interface SpaceProps {
+  v?: number;
+  h?: number;
+  layout?: 'block' | 'inline';
+}
+
+export const Space = (props: SpaceProps) => {
+  const theme = useTheme2();
+  const styles = getStyles(theme, props);
+
+  return <span className={cx(styles.wrapper)} />;
+};
+
+Space.defaultProps = {
+  v: 0,
+  h: 0,
+  layout: 'block',
+};
+
+const getStyles = stylesFactory((theme: GrafanaTheme2, props: SpaceProps) => ({
+  wrapper: css([
+    {
+      paddingRight: theme.spacing(props.h ?? 0),
+      paddingBottom: theme.spacing(props.v ?? 0),
+    },
+    props.layout === 'inline' && {
+      display: 'inline-block',
+    },
+    props.layout === 'block' && {
+      display: 'block',
+    },
+  ]),
+}));

public/app/plugins/datasource/grafana-azure-monitor-datasource/query_ctrl.ts

@@ -30,7 +30,12 @@ export class AzureMonitorQueryCtrl extends QueryCtrl {
   ];
 
   // Query types that have been migrated to React
-  reactQueryEditors = [AzureQueryType.AzureMonitor, AzureQueryType.LogAnalytics, AzureQueryType.ApplicationInsights];
+  reactQueryEditors = [
+    AzureQueryType.AzureMonitor,
+    AzureQueryType.LogAnalytics,
+    AzureQueryType.ApplicationInsights,
+    AzureQueryType.InsightsAnalytics,
+  ];
 
   // target: AzureMonitorQuery;