Re-add: Complete grafana-test-datasource plugin + upgrade E2E infrastructure

E2E Test Plugin:
- Add missing webpack.config.ts and all other plugin files
- Resolves 'build-test-plugins' failure in CI
- Complete E2E test plugin now buildable with NX
- Plugin structure: datasource.ts, components/, tests/, webpack.config.ts, etc.

E2E Infrastructure Upgrades:
- Upgrade all runners to github-hosted-ubuntu-x64-large (8-cores, 32GB RAM, 300GB SSD)
- Temporarily disable concurrency to bypass stuck workflow blocking
- Standardized dedicated runners for better reliability vs shared ubuntu-latest instances
- Should resolve intermittent E2E failures due to resource contention

.github/workflows/pr-e2e-tests.yml

@@ -7,16 +7,17 @@ on:
       - main
       - release-*.*.*
 
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: ${{ startsWith(github.ref, 'refs/pull/') }}
+# Temporarily disabled concurrency to bypass stuck workflow
+# concurrency:
+#   group: ${{ github.workflow }}-${{ github.ref }}
+#   cancel-in-progress: ${{ startsWith(github.ref, 'refs/pull/') }}
 
 permissions: {}
 
 jobs:
   detect-changes:
     name: Detect whether code changed
-    runs-on: ubuntu-latest
+    runs-on: github-hosted-ubuntu-x64-large
     permissions:
       contents: read
     outputs:
@@ -36,7 +37,7 @@ jobs:
     needs: detect-changes
     if: needs.detect-changes.outputs.changed == 'true'
     name: Build & Package Grafana
-    runs-on: ubuntu-latest-16-cores
+    runs-on: github-hosted-ubuntu-x64-large
     permissions:
       contents: read
     outputs:
@@ -64,7 +65,7 @@ jobs:
     needs: detect-changes
     if: needs.detect-changes.outputs.changed == 'true'
     name: Build E2E test runner
-    runs-on: ubuntu-latest
+    runs-on: github-hosted-ubuntu-x64-large
     permissions:
       contents: read
     outputs:
@@ -121,7 +122,7 @@ jobs:
             path: e2e/old-arch/panels-suite
             flags: --flags="--env DISABLE_SCENES=true"
     name: ${{ matrix.suite }}
-    runs-on: ubuntu-latest-8-cores
+    runs-on: github-hosted-ubuntu-x64-large
     permissions:
       contents: read
 
@@ -163,7 +164,7 @@ jobs:
     needs:
       - build-grafana
     name: A11y test
-    runs-on: ubuntu-latest-8-cores
+    runs-on: github-hosted-ubuntu-x64-large
     permissions:
       contents: read
 
@@ -201,7 +202,7 @@ jobs:
     if: always()
 
     name: All E2E tests complete
-    runs-on: ubuntu-latest
+    runs-on: github-hosted-ubuntu-x64-large
     steps:
       - name: Check test suites
         env:

e2e/test-plugins/grafana-test-datasource/CHANGELOG.md

@@ -0,0 +1 @@
+# Changelog

e2e/test-plugins/grafana-test-datasource/components/ConfigEditor.tsx

@@ -0,0 +1,96 @@
+import { ChangeEvent } from 'react';
+import { Checkbox, InlineField, InlineSwitch, Input, SecretInput, Select } from '@grafana/ui';
+import { DataSourcePluginOptionsEditorProps, SelectableValue, toOption } from '@grafana/data';
+import { MyDataSourceOptions, MySecureJsonData } from '../types';
+
+interface Props extends DataSourcePluginOptionsEditorProps<MyDataSourceOptions, MySecureJsonData> {}
+
+export function ConfigEditor(props: Props) {
+  const { onOptionsChange, options } = props;
+  const { jsonData, secureJsonFields, secureJsonData } = options;
+
+  const onJsonDataChange = (key: string, value: string | number | boolean) => {
+    onOptionsChange({
+      ...options,
+      jsonData: {
+        ...jsonData,
+        [key]: value,
+      },
+    });
+  };
+
+  // Secure field (only sent to the backend)
+  const onSecureJsonDataChange = (key: string, value: string | number) => {
+    onOptionsChange({
+      ...options,
+      secureJsonData: {
+        [key]: value,
+      },
+    });
+  };
+
+  const onResetAPIKey = () => {
+    onOptionsChange({
+      ...options,
+      secureJsonFields: {
+        ...options.secureJsonFields,
+        apiKey: false,
+      },
+      secureJsonData: {
+        ...options.secureJsonData,
+        apiKey: '',
+      },
+    });
+  };
+
+  return (
+    <>
+      <InlineField label="Path" labelWidth={14} interactive tooltip={'Json field returned to frontend'}>
+        <Input
+          id="config-editor-path"
+          onChange={(e: ChangeEvent<HTMLInputElement>) => onJsonDataChange('path', e.target.value)}
+          value={jsonData.path}
+          placeholder="Enter the path, e.g. /api/v1"
+          width={40}
+        />
+      </InlineField>
+      <InlineField label="API Key" labelWidth={14} interactive tooltip={'Secure json field (backend only)'}>
+        <SecretInput
+          required
+          id="config-editor-api-key"
+          isConfigured={secureJsonFields.apiKey}
+          value={secureJsonData?.apiKey}
+          placeholder="Enter your API key"
+          width={40}
+          onReset={onResetAPIKey}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => onSecureJsonDataChange('path', e.target.value)}
+        />
+      </InlineField>
+      <InlineField label="Switch Enabled">
+        <InlineSwitch
+          width={40}
+          label="Switch Enabled"
+          value={jsonData.switchEnabled ?? false}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => onJsonDataChange('switchEnabled', e.target.checked)}
+        />
+      </InlineField>
+      <InlineField label="Checkbox Enabled">
+        <Checkbox
+          width={40}
+          id="config-checkbox-enabled"
+          value={jsonData.checkboxEnabled}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => onJsonDataChange('checkboxEnabled', e.target.checked)}
+        />
+      </InlineField>
+      <InlineField label="Auth type">
+        <Select
+          width={40}
+          inputId="config-auth-type"
+          value={jsonData.authType ?? 'keys'}
+          options={['keys', 'credentials'].map(toOption)}
+          onChange={(e: SelectableValue<string>) => onJsonDataChange('authType', e.value!)}
+        />
+      </InlineField>
+    </>
+  );
+}

e2e/test-plugins/grafana-test-datasource/components/QueryEditor.tsx

@@ -0,0 +1,45 @@
+import { ChangeEvent } from 'react';
+import { InlineField, Input, Stack } from '@grafana/ui';
+import { QueryEditorProps } from '@grafana/data';
+import { DataSource } from '../datasource';
+import { MyDataSourceOptions, MyQuery } from '../types';
+
+type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>;
+
+export function QueryEditor({ query, onChange, onRunQuery }: Props) {
+  const onQueryTextChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange({ ...query, queryText: event.target.value });
+  };
+
+  const onConstantChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange({ ...query, constant: parseFloat(event.target.value) });
+    // executes the query
+    onRunQuery();
+  };
+
+  const { queryText, constant } = query;
+
+  return (
+    <Stack gap={0}>
+      <InlineField label="Constant">
+        <Input
+          id="query-editor-constant"
+          onChange={onConstantChange}
+          value={constant}
+          width={8}
+          type="number"
+          step="0.1"
+        />
+      </InlineField>
+      <InlineField label="Query Text" labelWidth={16} tooltip="Not used yet">
+        <Input
+          id="query-editor-query-text"
+          onChange={onQueryTextChange}
+          value={queryText || ''}
+          required
+          placeholder="Enter a query"
+        />
+      </InlineField>
+    </Stack>
+  );
+}

e2e/test-plugins/grafana-test-datasource/datasource.ts

@@ -0,0 +1,94 @@
+import { getBackendSrv, isFetchError } from '@grafana/runtime';
+import {
+  CoreApp,
+  DataQueryRequest,
+  DataQueryResponse,
+  DataSourceApi,
+  DataSourceInstanceSettings,
+  createDataFrame,
+  FieldType,
+} from '@grafana/data';
+
+import { MyQuery, MyDataSourceOptions, DEFAULT_QUERY, DataSourceResponse } from './types';
+import { lastValueFrom } from 'rxjs';
+import { VariableSupport } from './variables';
+
+export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
+  baseUrl: string;
+
+  constructor(instanceSettings: DataSourceInstanceSettings<MyDataSourceOptions>) {
+    super(instanceSettings);
+    this.baseUrl = instanceSettings.url!;
+    this.variables = new VariableSupport();
+  }
+
+  getDefaultQuery(_: CoreApp): Partial<MyQuery> {
+    return DEFAULT_QUERY;
+  }
+
+  filterQuery(query: MyQuery): boolean {
+    // if no query has been provided, prevent the query from being executed
+    return !!query.queryText;
+  }
+
+  async query(options: DataQueryRequest<MyQuery>): Promise<DataQueryResponse> {
+    const { range } = options;
+    const from = range!.from.valueOf();
+    const to = range!.to.valueOf();
+
+    return {
+      data: [
+        createDataFrame({
+          refId: 'A',
+          fields: [
+            { name: 'Time', values: [from, to], type: FieldType.time },
+            { name: 'Value', values: ['A', 'B'], type: FieldType.string },
+          ],
+        }),
+      ],
+    };
+  }
+
+  async request(url: string, params?: string) {
+    const response = getBackendSrv().fetch<DataSourceResponse>({
+      url: `${this.baseUrl}${url}${params?.length ? `?${params}` : ''}`,
+    });
+    return lastValueFrom(response);
+  }
+
+  /**
+   * Checks whether we can connect to the API.
+   */
+  async testDatasource() {
+    const defaultErrorMessage = 'Cannot connect to API';
+
+    try {
+      const response = await this.request('/health');
+      if (response.status === 200) {
+        return {
+          status: 'success',
+          message: 'Success',
+        };
+      } else {
+        return {
+          status: 'error',
+          message: response.statusText ? response.statusText : defaultErrorMessage,
+        };
+      }
+    } catch (err) {
+      let message = '';
+      if (typeof err === 'string') {
+        message = err;
+      } else if (isFetchError(err)) {
+        message = 'Fetch error: ' + (err.statusText ? err.statusText : defaultErrorMessage);
+        if (err.data && err.data.error && err.data.error.code) {
+          message += ': ' + err.data.error.code + '. ' + err.data.error.message;
+        }
+      }
+      return {
+        status: 'error',
+        message,
+      };
+    }
+  }
+}

e2e/test-plugins/grafana-test-datasource/img/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 81.9 71.52"><defs><style>.cls-1{fill:#84aff1;}.cls-2{fill:#3865ab;}.cls-3{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="42.95" y1="16.88" x2="81.9" y2="16.88" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f2cc0c"/><stop offset="1" stop-color="#ff9830"/></linearGradient></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M55.46,62.43A2,2,0,0,1,54.07,59l4.72-4.54a2,2,0,0,1,2.2-.39l3.65,1.63,3.68-3.64a2,2,0,1,1,2.81,2.84l-4.64,4.6a2,2,0,0,1-2.22.41L60.6,58.26l-3.76,3.61A2,2,0,0,1,55.46,62.43Z"/><path class="cls-2" d="M37,0H2A2,2,0,0,0,0,2V31.76a2,2,0,0,0,2,2H37a2,2,0,0,0,2-2V2A2,2,0,0,0,37,0ZM4,29.76V8.84H35V29.76Z"/><path class="cls-3" d="M79.9,0H45a2,2,0,0,0-2,2V31.76a2,2,0,0,0,2,2h35a2,2,0,0,0,2-2V2A2,2,0,0,0,79.9,0ZM47,29.76V8.84h31V29.76Z"/><path class="cls-2" d="M37,37.76H2a2,2,0,0,0-2,2V69.52a2,2,0,0,0,2,2H37a2,2,0,0,0,2-2V39.76A2,2,0,0,0,37,37.76ZM4,67.52V46.6H35V67.52Z"/><path class="cls-2" d="M79.9,37.76H45a2,2,0,0,0-2,2V69.52a2,2,0,0,0,2,2h35a2,2,0,0,0,2-2V39.76A2,2,0,0,0,79.9,37.76ZM47,67.52V46.6h31V67.52Z"/><rect class="cls-1" x="10.48" y="56.95" width="4" height="5.79"/><rect class="cls-1" x="17.43" y="53.95" width="4" height="8.79"/><rect class="cls-1" x="24.47" y="50.95" width="4" height="11.79"/><path class="cls-1" d="M19.47,25.8a6.93,6.93,0,1,1,6.93-6.92A6.93,6.93,0,0,1,19.47,25.8Zm0-9.85a2.93,2.93,0,1,0,2.93,2.93A2.93,2.93,0,0,0,19.47,16Z"/></g></g></svg>

e2e/test-plugins/grafana-test-datasource/module.ts

@@ -0,0 +1,9 @@
+import { DataSourcePlugin } from '@grafana/data';
+import { DataSource } from './datasource';
+import { ConfigEditor } from './components/ConfigEditor';
+import { QueryEditor } from './components/QueryEditor';
+import { MyQuery, MyDataSourceOptions } from './types';
+
+export const plugin = new DataSourcePlugin<DataSource, MyQuery, MyDataSourceOptions>(DataSource)
+  .setConfigEditor(ConfigEditor)
+  .setQueryEditor(QueryEditor);

e2e/test-plugins/grafana-test-datasource/plugin.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://raw.githubusercontent.com/grafana/grafana/main/docs/sources/developers/plugins/plugin.schema.json",
+  "type": "datasource",
+  "name": "Test",
+  "id": "grafana-e2etest-datasource",
+  "metrics": true,
+  "info": {
+    "description": "",
+    "author": {
+      "name": "Grafana"
+    },
+    "keywords": ["datasource"],
+    "logos": {
+      "small": "img/logo.svg",
+      "large": "img/logo.svg"
+    },
+    "links": [],
+    "screenshots": [],
+    "version": "%VERSION%",
+    "updated": "%TODAY%"
+  },
+  "dependencies": {
+    "grafanaDependency": ">=10.4.0",
+    "plugins": []
+  }
+}

e2e/test-plugins/grafana-test-datasource/tests/configEditor.spec.ts

@@ -0,0 +1,39 @@
+import { test, expect, DataSourceConfigPage } from '@grafana/plugin-e2e';
+
+// The following tests verify that label and input field association is working correctly.
+// If these tests break, e2e tests in external plugins will break too.
+
+test.describe('config editor ', () => {
+  let configPage: DataSourceConfigPage;
+  test.beforeEach(async ({ createDataSourceConfigPage }) => {
+    configPage = await createDataSourceConfigPage({ type: 'grafana-e2etest-datasource' });
+  });
+
+  test('text input field', async ({ page }) => {
+    const field = page.getByRole('textbox', { name: 'API key' });
+    await expect(field).toBeEmpty();
+    await field.fill('test text');
+    await expect(field).toHaveValue('test text');
+  });
+
+  test('switch field', async ({ page }) => {
+    const field = page.getByLabel('Switch Enabled');
+    await expect(field).not.toBeChecked();
+    await field.check();
+    await expect(field).toBeChecked();
+  });
+
+  test('checkbox field', async ({ page }) => {
+    const field = page.getByRole('checkbox', { name: 'Checkbox Enabled' });
+    await expect(field).not.toBeChecked();
+    await field.check({ force: true });
+    await expect(field).toBeChecked();
+  });
+
+  test('select field', async ({ page, selectors }) => {
+    const field = page.getByRole('combobox', { name: 'Auth type' });
+    await field.click();
+    const option = selectors.components.Select.option;
+    await expect(configPage.getByGrafanaSelector(option)).toHaveText(['keys', 'credentials']);
+  });
+});

e2e/test-plugins/grafana-test-datasource/tests/variables.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@grafana/plugin-e2e';
+
+test('should render variable editor', async ({ variableEditPage, page }) => {
+  await variableEditPage.datasource.set('gdev-e2etestdatasource');
+  await expect(page.getByRole('textbox', { name: 'Query Text' })).toBeVisible();
+});
+
+test('create new, successful variable query', async ({ variableEditPage, page }) => {
+  await variableEditPage.datasource.set('gdev-e2etestdatasource');
+  await page.getByRole('textbox', { name: 'Query Text' }).fill('variableQuery');
+  await variableEditPage.runQuery();
+  await expect(variableEditPage).toDisplayPreviews(['A', 'B']);
+});

e2e/test-plugins/grafana-test-datasource/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "types": ["node", "jest", "@testing-library/jest-dom"]
+  },
+  "extends": "@grafana/plugin-configs/tsconfig.json",
+  "include": ["."]
+}

e2e/test-plugins/grafana-test-datasource/types.ts

@@ -0,0 +1,37 @@
+import { DataSourceJsonData } from '@grafana/data';
+import { DataQuery } from '@grafana/schema';
+
+export interface MyQuery extends DataQuery {
+  queryText?: string;
+  constant: number;
+}
+
+export const DEFAULT_QUERY: Partial<MyQuery> = {
+  constant: 6.5,
+};
+
+export interface DataPoint {
+  Time: number;
+  Value: number;
+}
+
+export interface DataSourceResponse {
+  datapoints: DataPoint[];
+}
+
+/**
+ * These are options configured for each DataSource instance
+ */
+export interface MyDataSourceOptions extends DataSourceJsonData {
+  switchEnabled: boolean;
+  checkboxEnabled: boolean;
+  authType: string;
+  path?: string;
+}
+
+/**
+ * Value that is used in the backend, but never sent over HTTP to the frontend
+ */
+export interface MySecureJsonData {
+  apiKey?: string;
+}

e2e/test-plugins/grafana-test-datasource/variables.ts

@@ -0,0 +1,13 @@
+import { VariableSupportBase, VariableSupportType } from '@grafana/data';
+import { DEFAULT_QUERY, MyQuery } from './types';
+import { DataSource } from './datasource';
+
+export class VariableSupport extends VariableSupportBase<DataSource> {
+  getType(): VariableSupportType {
+    return VariableSupportType.Datasource;
+  }
+
+  getDefaultQuery(): Partial<MyQuery> {
+    return DEFAULT_QUERY;
+  }
+}

e2e/test-plugins/grafana-test-datasource/webpack.config.ts

@@ -0,0 +1,44 @@
+import CopyWebpackPlugin from 'copy-webpack-plugin';
+import grafanaConfig from '@grafana/plugin-configs/webpack.config';
+import { mergeWithCustomize, unique } from 'webpack-merge';
+import { Configuration } from 'webpack';
+
+function skipFiles(f: string): boolean {
+  if (f.includes('/dist/')) {
+    // avoid copying files already in dist
+    return false;
+  }
+  if (f.includes('/node_modules/')) {
+    // avoid copying tsconfig.json
+    return false;
+  }
+  if (f.includes('/package.json')) {
+    // avoid copying package.json
+    return false;
+  }
+  return true;
+}
+
+const config = async (env: Record<string, unknown>): Promise<Configuration> => {
+  const baseConfig = await grafanaConfig(env);
+  const customConfig = {
+    plugins: [
+      new CopyWebpackPlugin({
+        patterns: [
+          // To `compiler.options.output`
+          { from: 'README.md', to: '.', force: true },
+          { from: 'plugin.json', to: '.' },
+          { from: 'CHANGELOG.md', to: '.', force: true },
+          { from: '**/*.json', to: '.', filter: skipFiles },
+          { from: '**/*.svg', to: '.', noErrorOnMissing: true, filter: skipFiles }, // Optional
+        ],
+      }),
+    ],
+  };
+
+  return mergeWithCustomize({
+    customizeArray: unique('plugins', ['CopyPlugin'], (plugin) => plugin.constructor && plugin.constructor.name),
+  })(baseConfig, customConfig);
+};
+
+export default config;