Bohandley/integration tests

.github/workflows/e2e.yml

@@ -0,0 +1,88 @@
+name: E2E Tests
+on:
+  pull_request:
+    paths-ignore:
+      - 'docs/**'
+  push:
+    paths-ignore:
+      - 'docs/**'
+concurrency:
+  group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Go environment
+        uses: actions/setup-go@v4
+        with:
+          go-version: '1.21.6'
+      # NOT TESTING THE BACKEND YET
+      # - name: Test backend
+      #   uses: magefile/mage-action@v2
+      #   with:
+      #     version: latest
+      #     args: coverage
+      - name: Build backend
+        uses: magefile/mage-action@v2
+        with:
+          version: latest
+          args: buildAll
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+      - name: Install dependencies
+        run: npm install -g yarn && yarn install --frozen-lockfile;
+      - name: Build Frontend
+        run: |
+          yarn build;
+      - name: Start the docker container for E2E
+        run: |
+          docker compose -f docker-compose-debug.yaml pull
+          docker compose -f docker-compose-debug.yaml up -d
+      - name: Wait for prometheus to start
+        uses: nev7n/wait_for_response@v1
+        with:
+          url: 'http://localhost:9090/-/ready'
+          responseCode: 200
+          timeout: 20000
+          interval: 500
+      - name: Wait for grafana to start
+        uses: nev7n/wait_for_response@v1
+        with:
+          url: 'http://localhost:3099/'
+          responseCode: 200
+          timeout: 20000
+          interval: 500
+      - name: Wait for prometheus to be configured in grafana
+        uses: nev7n/wait_for_response@v1
+        with:
+          url: 'http://localhost:3099/api/datasources/uid/prometheus-amazon/health'
+          responseCode: 200
+          timeout: 20000
+          interval: 500
+      - name: Install Playwright Browsers
+        run: yarn playwright install --with-deps
+      - name: Run E2E tests
+        run: yarn test:e2e
+      - name: Run E2E report
+        uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+      - name: Run E2E videos
+        uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: test-results
+          path: test-results/
+          retention-days: 30
+      - name: Stop the docker container
+        if: always()
+        run: docker-compose -f docker-compose-debug.yaml down

.gitignore

@@ -32,4 +32,8 @@ e2e-results/
 # Editor
 .idea
 
-.eslintcache
+.eslintcache
+/test-results/
+# /playwright-report/
+/blob-report/
+/playwright/.cache/

README.md

@@ -1,10 +1,12 @@
-# Grafana data source plugin template
+# Prometheus Amazon Data Source
 
-This template is a starting point for building a Data Source Plugin for Grafana.
+This data source plugin is is for Amazon Prometheus. It has all the features of the Grafana core Prometheus plugin with Amazon specific authentication in the configuration page.
 
-## What are Grafana data source plugins?
+Amazon Managed Service for Prometheus is a Prometheus-compatible service that monitors and provides alerts on containerized applications and infrastructure at scale.
 
-Grafana supports a wide range of data sources, including Prometheus, MySQL, and even Datadog. There’s a good chance you can already visualize metrics from the systems you have set up. In some cases, though, you already have an in-house metrics solution that you’d like to add to your Grafana dashboards. Grafana Data Source Plugins enables integrating such solutions with Grafana.
+Read more about it here:
+
+[https://aws.amazon.com/prometheus/](https://aws.amazon.com/prometheus/)
 
 ## Getting started
 
@@ -33,55 +35,55 @@ Grafana supports a wide range of data sources, including Prometheus, MySQL, and
 1. Install dependencies
 
    ```bash
-   npm install
+   yarn install
    ```
 
 2. Build plugin in development mode and run in watch mode
 
    ```bash
-   npm run dev
+   yarn run dev
    ```
 
 3. Build plugin in production mode
 
    ```bash
-   npm run build
+   yarn run build
    ```
 
 4. Run the tests (using Jest)
 
    ```bash
    # Runs the tests and watches for changes, requires git init first
-   npm run test
+   yarn run test
 
    # Exits after running all the tests
-   npm run test:ci
+   yarn run test:ci
    ```
 
 5. Spin up a Grafana instance and run the plugin inside it (using Docker)
 
    ```bash
-   npm run server
+   yarn run server
    ```
 
-6. Run the E2E tests (using Cypress)
+6. Run the E2E tests (using Playwright and @grafana/plugin-e2e)
 
    ```bash
-   # Spins up a Grafana instance first that we tests against
-   npm run server
+   # Spins up a Grafana docker instance (port 3099) with an actual Prometheus instance (port 9090)
+   docker compose -f docker-compose-debug.yaml
 
    # Starts the tests
-   npm run e2e
+   yarn run test:e2e
    ```
 
 7. Run the linter
 
    ```bash
-   npm run lint
+   yarn run lint
 
    # or
 
-   npm run lint:fix
+   yarn run lint:fix
    ```
 
 

docker-compose-debug.yaml

@@ -0,0 +1,33 @@
+version: "3.7"
+services:
+  prometheus:
+    image: prom/prometheus:v2.45.0
+    container_name: prometheus-debug
+    command:
+      - '--config.file=/etc/prometheus/prometheus.yml'
+    ports:
+      - 9090:9090
+    restart: unless-stopped
+    volumes:
+      - ./prometheus:/etc/prometheus
+      - prom_data:/prometheus
+  grafana:
+    image: grafana/grafana-enterprise:${GF_VERSION:-main}
+    container_name: grafana-prometheus-amazon-debug
+    ports:
+      - 3099:3099
+    restart: unless-stopped
+    environment:
+      - GF_DEFAULT_APP_MODE=development
+      - GF_AUTH_ANONYMOUS_ORG_ROLE=Admin
+      - GF_AUTH_ANONYMOUS_ENABLED=true
+      - GF_AUTH_BASIC_ENABLED=false
+      - GF_SERVER_HTTP_PORT=3099
+    volumes:
+      - ./provisioning/datasources:/etc/grafana/provisioning/datasources
+      - ./dist:/var/lib/grafana/plugins/prometheus-amazon
+    depends_on:
+      prometheus:
+        condition: service_started
+volumes:
+  prom_data:

docker-compose.yaml

@@ -1,4 +1,4 @@
-version: '3.0'
+version: '3.7'
 
 services:
   grafana:
@@ -12,4 +12,4 @@ services:
       - 3000:3000/tcp
     volumes:
       - ./dist:/var/lib/grafana/plugins/prometheus-amazon-datasource
-      - ./provisioning:/etc/grafana/provisioning
+      - ./provisioning/datasources:/etc/grafana/provisioning

e2e/annotation-editor.spec.ts

@@ -0,0 +1,20 @@
+import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
+import { test, expect } from '@grafana/plugin-e2e';
+import { PromOptions } from '@grafana/prometheus';
+
+test.describe('Prometheus annotation query editor', () => {
+  test('Check that the editor uses the code editor', async ({
+    readProvisionedDataSource,
+    annotationEditPage
+  }) => {
+    const ds = await readProvisionedDataSource<DataSourcePluginOptionsEditorProps<PromOptions>>({ fileName: 'datasources.yml' });
+
+    await annotationEditPage.datasource.set(ds.name);
+    await annotationEditPage
+      .getByTestIdOrAriaLabel(selectors.components.DataSource.Prometheus.queryEditor.code.queryField).focus();
+
+    await expect(annotationEditPage
+      .getByTestIdOrAriaLabel(selectors.components.DataSource.Prometheus.queryEditor.code.queryField)).toBeVisible();
+  });
+});