Plugins: Externalise Azure Monitor data source (#79545)

* Set up frontend linting for Azure

- Fix final frontend import
- Fix other lint issues

* Add Azure Monitor to backend linting

* Remove featuremgmt dependency

* Add intervalv2 to list of disallowed imports

* Remove config dependency

- Replace with function from azure-sdk

* Remove util dependency

* Duplicate interval functionality from core

* Add required backend wrappers

* Update frontend

* Add testing helper

* Add missing package

* Bump minimum grafana dependency

* Fix dependency

* Regen cue

* Fix lint

* Update expected response file

* Update import and dependency

public/app/features/plugins/built_in_plugins.ts

@@ -32,7 +32,7 @@ const testDataDSPlugin = async () =>
 const cloudMonitoringPlugin = async () =>
   await import(/* webpackChunkName: "cloudMonitoringPlugin" */ 'app/plugins/datasource/cloud-monitoring/module');
 const azureMonitorPlugin = async () =>
-  await import(/* webpackChunkName: "azureMonitorPlugin" */ 'app/plugins/datasource/azuremonitor/module');
+  await import(/* webpackChunkName: "azureMonitorPlugin" */ '@grafana-plugins/grafana-azure-monitor-datasource/module');
 const tempoPlugin = async () =>
   await import(/* webpackChunkName: "tempoPlugin" */ 'app/plugins/datasource/tempo/module');
 const alertmanagerPlugin = async () =>

public/app/plugins/datasource/azuremonitor/__mocks__/variables.ts

@@ -1,4 +1,4 @@
-import { BaseVariableModel, CustomVariableModel, LoadingState, VariableHide } from '@grafana/data';
+import { BaseVariableModel, CustomVariableModel, LoadingState, VariableHide, VariableOption } from '@grafana/data';
 
 const initialVariableModelState: BaseVariableModel = {
   id: '00000000-0000-0000-0000-000000000000',
@@ -63,3 +63,14 @@ export const multiVariable: CustomVariableModel = {
   hide: VariableHide.dontHide,
   type: 'custom',
 };
+
+export const initialCustomVariableModelState: CustomVariableModel = {
+  ...initialVariableModelState,
+  type: 'custom',
+  multi: false,
+  includeAll: false,
+  allValue: null,
+  query: '',
+  options: [],
+  current: {} as VariableOption,
+};

public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/DimensionFields.test.tsx

@@ -2,11 +2,11 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { openMenu } from 'react-select-event';
-import { selectOptionInTest } from 'test/helpers/selectOptionInTest';
 
 import createMockDatasource from '../../__mocks__/datasource';
 import createMockPanelData from '../../__mocks__/panelData';
 import createMockQuery from '../../__mocks__/query';
+import { selectOptionInTest } from '../../utils/testUtils';
 
 import DimensionFields from './DimensionFields';
 import { appendDimensionFilter, setDimensionFilterValue } from './setQueryValue';

public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/MetricsQueryEditor.test.tsx

@@ -1,7 +1,6 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { selectOptionInTest } from 'test/helpers/selectOptionInTest';
 
 import createMockDatasource from '../../__mocks__/datasource';
 import { createMockInstanceSetttings } from '../../__mocks__/instanceSettings';
@@ -14,6 +13,7 @@ import {
 } from '../../__mocks__/resourcePickerRows';
 import { selectors } from '../../e2e/selectors';
 import ResourcePickerData from '../../resourcePicker/resourcePickerData';
+import { selectOptionInTest } from '../../utils/testUtils';
 
 import MetricsQueryEditor from './MetricsQueryEditor';
 

public/app/plugins/datasource/azuremonitor/components/QueryEditor/QueryEditor.test.tsx

@@ -1,6 +1,5 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
-import { selectOptionInTest } from 'test/helpers/selectOptionInTest';
 
 import * as ui from '@grafana/ui';
 
@@ -9,6 +8,7 @@ import { invalidNamespaceError } from '../../__mocks__/errors';
 import createMockQuery from '../../__mocks__/query';
 import { selectors } from '../../e2e/selectors';
 import { AzureQueryType } from '../../types';
+import { selectOptionInTest } from '../../utils/testUtils';
 
 import QueryEditor from './QueryEditor';
 

public/app/plugins/datasource/azuremonitor/components/TracesQueryEditor/Filters.test.tsx

@@ -3,7 +3,6 @@ import userEvent from '@testing-library/user-event';
 import { UserEvent } from '@testing-library/user-event/dist/types/setup/setup';
 import React from 'react';
 import { of } from 'rxjs';
-import { selectOptionInTest } from 'test/helpers/selectOptionInTest';
 
 import { CoreApp } from '@grafana/data';
 
@@ -12,6 +11,7 @@ import createMockQuery from '../../__mocks__/query';
 import { AzureQueryType } from '../../dataquery.gen';
 import Datasource from '../../datasource';
 import { AzureMonitorQuery } from '../../types';
+import { selectOptionInTest } from '../../utils/testUtils';
 
 import Filters from './Filters';
 import { setFilters } from './setQueryValue';

public/app/plugins/datasource/azuremonitor/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@grafana-plugins/grafana-azure-monitor-datasource",
+  "description": "Grafana data source for Azure Monitor",
+  "private": true,
+  "version": "10.3.0-pre",
+  "dependencies": {
+    "@emotion/css": "11.11.2",
+    "@grafana/data": "10.3.0-pre",
+    "@grafana/experimental": "1.7.4",
+    "@grafana/runtime": "10.3.0-pre",
+    "@grafana/schema": "10.3.0-pre",
+    "@grafana/ui": "10.3.0-pre",
+    "@kusto/monaco-kusto": "^7.4.0",
+    "fast-deep-equal": "^3.1.3",
+    "i18next": "^22.0.0",
+    "immer": "10.0.2",
+    "lodash": "4.17.21",
+    "monaco-editor": "0.34.0",
+    "prismjs": "1.29.0",
+    "react": "18.2.0",
+    "react-use": "17.4.0",
+    "rxjs": "7.8.1",
+    "tslib": "2.6.0"
+  },
+  "devDependencies": {
+    "@grafana/e2e-selectors": "10.3.0-pre",
+    "@grafana/plugin-configs": "10.3.0-pre",
+    "@testing-library/react": "14.0.0",
+    "@testing-library/user-event": "14.5.1",
+    "@types/jest": "29.5.4",
+    "@types/lodash": "4.14.195",
+    "@types/node": "20.8.10",
+    "@types/prismjs": "1.26.0",
+    "@types/react": "18.2.15",
+    "@types/testing-library__jest-dom": "5.14.8",
+    "react-select-event": "5.5.1",
+    "ts-node": "10.9.1",
+    "typescript": "5.2.2",
+    "webpack": "5.89.0"
+  },
+  "peerDependencies": {
+    "@grafana/runtime": "*"
+  },
+  "scripts": {
+    "build": "webpack -c ./webpack.config.ts --env production",
+    "build:commit": "webpack -c ./webpack.config.ts --env production --env commit=$(git rev-parse --short HEAD)",
+    "dev": "webpack -w -c ./webpack.config.ts --env development"
+  },
+  "packageManager": "yarn@3.6.0"
+}

public/app/plugins/datasource/azuremonitor/plugin.json

@@ -77,7 +77,7 @@
     },
     { "type": "dashboard", "name": "Azure / Resources Overview", "path": "dashboards/arg.json" }
   ],
-
+  "executable": "gpx_azuremonitor",
   "info": {
     "description": "Data source for Microsoft Azure Monitor & Application Insights",
     "author": {
@@ -98,11 +98,11 @@
       { "name": "Azure Monitor Network", "path": "img/azure_monitor_network.png" },
       { "name": "Azure Monitor CPU", "path": "img/azure_monitor_cpu.png" }
     ],
-    "version": "1.0.0"
+    "version": "%VERSION%"
   },
 
   "dependencies": {
-    "grafanaVersion": "5.2.x",
+    "grafanaDependency": ">=10.3.0",
     "plugins": []
   },
 

public/app/plugins/datasource/azuremonitor/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@grafana/plugin-configs/tsconfig.json",
+  "include": ["."]
+}

public/app/plugins/datasource/azuremonitor/utils/common.test.ts

@@ -1,4 +1,4 @@
-import { initialCustomVariableModelState } from 'app/features/variables/custom/reducer';
+import { initialCustomVariableModelState } from '../__mocks__/variables';
 
 import { hasOption, interpolateVariable } from './common';
 

public/app/plugins/datasource/azuremonitor/utils/testUtils.ts

@@ -0,0 +1,8 @@
+import { waitFor } from '@testing-library/react';
+import { select } from 'react-select-event';
+
+// Used to select an option or options from a Select in unit tests
+export const selectOptionInTest = async (
+  input: HTMLElement,
+  optionOrOptions: string | RegExp | Array<string | RegExp>
+) => await waitFor(() => select(input, optionOrOptions, { container: document.body }));

public/app/plugins/datasource/azuremonitor/webpack.config.ts

@@ -0,0 +1,3 @@
+import config from '@grafana/plugin-configs/webpack.config';
+
+export default config;