AzureMonitor: Remove Angular query editor (#37532)

* Remove angular query editor

* call debounced onRunQuery, and set some default query values

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

@@ -1,6 +1,6 @@
 import { Alert } from '@grafana/ui';
 import { QueryEditorProps } from '@grafana/data';
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import AzureMonitorDatasource from '../../datasource';
 import {
   AzureMonitorQuery,
@@ -17,6 +17,8 @@ import ArgQueryEditor from '../ArgQueryEditor';
 import ApplicationInsightsEditor from '../ApplicationInsightsEditor';
 import InsightsAnalyticsEditor from '../InsightsAnalyticsEditor';
 import { Space } from '../Space';
+import { debounce } from 'lodash';
+import useDefaultQuery from './useDefaultQuery';
 
 export type AzureMonitorQueryEditorProps = QueryEditorProps<
   AzureMonitorDatasource,
@@ -24,8 +26,25 @@ export type AzureMonitorQueryEditorProps = QueryEditorProps<
   AzureDataSourceJsonData
 >;
 
-const QueryEditor: React.FC<AzureMonitorQueryEditorProps> = ({ query, datasource, onChange }) => {
+const QueryEditor: React.FC<AzureMonitorQueryEditorProps> = ({
+  query: baseQuery,
+  datasource,
+  onChange,
+  onRunQuery: baseOnRunQuery,
+}) => {
   const [errorMessage, setError] = useLastError();
+  const onRunQuery = useMemo(() => debounce(baseOnRunQuery, 500), [baseOnRunQuery]);
+
+  const onQueryChange = useCallback(
+    (newQuery: AzureMonitorQuery) => {
+      onChange(newQuery);
+      onRunQuery();
+    },
+    [onChange, onRunQuery]
+  );
+
+  const query = useDefaultQuery(baseQuery, onQueryChange);
+
   const subscriptionId = query.subscription || datasource.azureMonitorDatasource.defaultSubscriptionId;
   const variableOptionGroup = {
     label: 'Template Variables',
@@ -34,13 +53,13 @@ const QueryEditor: React.FC<AzureMonitorQueryEditorProps> = ({ query, datasource
 
   return (
     <div data-testid="azure-monitor-query-editor">
-      <QueryTypeField query={query} onQueryChange={onChange} />
+      <QueryTypeField query={query} onQueryChange={onQueryChange} />
 
       <EditorForQueryType
         subscriptionId={subscriptionId}
         query={query}
         datasource={datasource}
-        onChange={onChange}
+        onChange={onQueryChange}
         variableOptionGroup={variableOptionGroup}
         setError={setError}
       />
@@ -72,7 +91,6 @@ const EditorForQueryType: React.FC<EditorForQueryTypeProps> = ({
   setError,
 }) => {
   switch (query.queryType) {
-    case undefined:
     case AzureQueryType.AzureMonitor:
       return (
         <MetricsQueryEditor
@@ -114,6 +132,9 @@ const EditorForQueryType: React.FC<EditorForQueryTypeProps> = ({
           setError={setError}
         />
       );
+
+    default:
+      return <Alert title="Unknown query type" />;
   }
 
   return null;

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

@@ -0,0 +1,35 @@
+import { useEffect, useMemo } from 'react';
+import { AzureMonitorQuery, AzureQueryType } from '../../types';
+
+const DEFAULT_QUERY_TYPE = AzureQueryType.AzureMonitor;
+
+const createQueryWithDefaults = (query: AzureMonitorQuery) => {
+  // A quick and easy way to set just the default query type. If we want to set any other defaults,
+  // we might want to look into something more robust
+  if (!query.queryType) {
+    return {
+      ...query,
+      queryType: query.queryType ?? DEFAULT_QUERY_TYPE,
+    };
+  }
+
+  return query;
+};
+
+/**
+ * Returns queries with some defaults, and calls onChange function to notify if it changes
+ */
+const useDefaultQuery = (query: AzureMonitorQuery, onChangeQuery: (newQuery: AzureMonitorQuery) => void) => {
+  const queryWithDefaults = useMemo(() => createQueryWithDefaults(query), [query]);
+
+  useEffect(() => {
+    if (queryWithDefaults !== query) {
+      console.log('changing default query');
+      onChangeQuery(queryWithDefaults);
+    }
+  }, [queryWithDefaults, query, onChangeQuery]);
+
+  return queryWithDefaults;
+};
+
+export default useDefaultQuery;

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

@@ -1,11 +1,11 @@
 import { DataSourcePlugin } from '@grafana/data';
-import { AzureMonitorQueryCtrl } from './query_ctrl';
 import Datasource from './datasource';
 import { ConfigEditor } from './components/ConfigEditor';
+import AzureMonitorQueryEditor from './components/QueryEditor';
 import { AzureMonitorAnnotationsQueryCtrl } from './annotations_query_ctrl';
 import { AzureMonitorQuery, AzureDataSourceJsonData } from './types';
 
 export const plugin = new DataSourcePlugin<Datasource, AzureMonitorQuery, AzureDataSourceJsonData>(Datasource)
   .setConfigEditor(ConfigEditor)
-  .setQueryCtrl(AzureMonitorQueryCtrl)
+  .setQueryEditor(AzureMonitorQueryEditor)
   .setAnnotationQueryCtrl(AzureMonitorAnnotationsQueryCtrl);