Development Workflow and Testing

Relevant source files

• .citools/README.md
• .dockerignore
• .github/actions/setup-go/action.yml
• .github/workflows/add-to-whats-new.yml
• .github/workflows/alerting-swagger-gen.yml
• .github/workflows/alerting-update-module.yml
• .github/workflows/analytics-events-report.yml
• .github/workflows/backend-code-checks.yml
• .github/workflows/backend-unit-tests.yml
• .github/workflows/backport-trigger.yml
• .github/workflows/backport-workflow.yml
• .github/workflows/bump-version.yml
• .github/workflows/changelog.yml
• .github/workflows/create-next-release-branch.yml
• .github/workflows/create-release-branch.yml
• .github/workflows/create-release-tag.yml
• .github/workflows/create-security-branch.yml
• .github/workflows/create-security-patch-from-security-mirror.yml
• .github/workflows/deploy-storybook.yml
• .github/workflows/detect-breaking-changes-levitate.yml
• .github/workflows/ephemeral-instances-pr-comment.yml
• .github/workflows/feature-toggles-ci.yml
• .github/workflows/frontend-lint.yml
• .github/workflows/github-release.yml
• .github/workflows/go-lint.yml
• .github/workflows/lint-build-docs.yml
• .github/workflows/migrate-prs.yml
• .github/workflows/pr-build-grafana.yml
• .github/workflows/pr-dependabot-update-go-workspace.yml
• .github/workflows/pr-e2e-tests.yml
• .github/workflows/pr-frontend-unit-tests.yml
• .github/workflows/pr-go-workspace-check.yml
• .github/workflows/pr-k8s-codegen-check.yml
• .github/workflows/pr-patch-check.yml
• .github/workflows/pr-test-integration.yml
• .github/workflows/publish-artifact.yml
• .github/workflows/release-build.yml
• .github/workflows/release-pr.yml
• .github/workflows/release-verify-packages.yml
• .github/workflows/release-verify.yml
• .github/workflows/run-schema-v2-e2e.yml
• .github/workflows/scripts/create-security-branch/create-security-branch.sh
• .github/workflows/storybook-a11y.yml
• .github/workflows/swagger-gen.yml
• .github/workflows/sync-mirror-event.yml
• .gitignore
• CONTRIBUTING.md
• README.md
• contribute/README.md
• contribute/breaking-changes-guide/breaking-changes-guide.md
• contribute/create-feature-request.md
• contribute/developer-guide.md
• devenv/README.md
• devenv/docker/blocks/mysql_tests/docker-compose.yaml
• devenv/frontend-service/.gitignore
• devenv/frontend-service/README.md
• devenv/frontend-service/Tiltfile
• devenv/frontend-service/build-grafana.sh
• devenv/frontend-service/configs/alloy/_databases.alloy
• devenv/frontend-service/configs/alloy/alloy.alloy
• devenv/frontend-service/configs/alloy/docker.alloy
• devenv/frontend-service/configs/alloy/faro-receiver.alloy
• devenv/frontend-service/configs/alloy/grafana.alloy
• devenv/frontend-service/configs/alloy/otel-receiver.alloy
• devenv/frontend-service/configs/nginx.conf
• devenv/frontend-service/configs/tempo.yaml
• devenv/frontend-service/docker-compose.yaml
• devenv/frontend-service/grafana-fs-dev.dockerfile
• devenv/frontend-service/local-init.sh
• devenv/frontend-service/provisioning/dashboards/dashboards/instance.json
• devenv/frontend-service/provisioning/dashboards/devenv.yaml
• devenv/frontend-service/provisioning/datasources/default.yaml
• devenv/frontend-service/proxy.dockerfile
• devenv/frontend-service/run.sh
• docs/sources/setup-grafana/installation/_index.md
• e2e-playwright/dashboard-new-layouts/dashboard-group-panels.spec.ts
• e2e-playwright/dashboard-new-layouts/dashboard-repeats-row-layout.spec.ts
• e2e-playwright/dashboard-new-layouts/dashboards-edit-variables.spec.ts
• e2e-playwright/dashboard-new-layouts/dashboards-panel-layouts.spec.ts
• e2e-playwright/dashboard-new-layouts/dashboards-repeats-auto-grid.spec.ts
• e2e-playwright/dashboard-new-layouts/dashboards-repeats-custom-grid.spec.ts
• e2e-playwright/dashboard-new-layouts/dashboards-repeats-tabs-layout.spec.ts
• e2e-playwright/dashboard-new-layouts/utils.ts
• e2e-playwright/dashboards/DashboardForConditionalRendering.json
• e2e-playwright/dashboards/DashboardWithAllConditionalRendering.json
• e2e-playwright/dashboards/README.md
• e2e-playwright/dashboards/TestV2Dashboard.json
• e2e-playwright/dashboards/V2DashWithRepeats.json
• e2e-playwright/dashboards/V2DashWithRowRepeats.json
• e2e-playwright/dashboards/V2DashWithTabRepeats.json
• e2e-playwright/panels-suite/canvas-scene.spec.ts
• e2e-playwright/plugin-e2e/plugin-e2e-api-tests/as-admin-user/panelDataAssertion.spec.ts
• e2e-playwright/plugin-e2e/plugin-e2e-api-tests/as-admin-user/panelEditPage.spec.ts
• e2e-playwright/plugin-e2e/plugin-e2e-api-tests/as-admin-user/timeRange.spec.ts
• e2e-playwright/smoke-tests-suite/accessibility.spec.ts
• e2e-playwright/test-plugins/grafana-test-panel/tests/translations/french.spec.ts
• e2e-playwright/test-plugins/grafana-test-panel/tests/translations/swedish.spec.ts
• packages/grafana-data/src/datetime/timezones.test.ts
• packages/grafana-data/src/datetime/timezones.ts
• packages/grafana-e2e-selectors/src/selectors/components.ts
• packages/grafana-e2e-selectors/src/selectors/pages.ts
• packages/grafana-ui/src/components/ColorPicker/ColorSwatch.tsx
• packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx
• packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx
• packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneDescription.tsx
• pkg/services/sqlstore/session_test.go
• pkg/storage/unified/sql/db/dbimpl/db.go
• pkg/storage/unified/sql/db/mocks/DB.go
• pkg/storage/unified/sql/db/service.go
• pkg/util/sqlite/sqlite_nocgo.go
• public/app/core/components/OptionsUI/NumberInput.tsx
• public/app/core/components/OptionsUI/color.tsx
• public/app/core/components/OptionsUI/slider.test.tsx
• public/app/core/components/OptionsUI/slider.tsx
• public/app/core/components/OptionsUI/strings.tsx
• public/app/core/components/Select/TeamPicker.tsx
• public/app/features/admin/UserOrgs.tsx
• public/app/features/admin/UserProfile.tsx
• public/app/features/annotations/components/AnnotationResultMapper.tsx
• public/app/features/dashboard-scene/addToDashboard/AddToDashboardFormExposedComponent.tsx
• public/app/features/dashboard-scene/scene/layouts-shared/DashboardLayoutSelector.test.tsx
• public/app/features/dashboard-scene/scene/layouts-shared/DashboardLayoutSelector.tsx
• public/app/features/dashboard-scene/settings/annotations/AnnotationSettingsEdit.tsx
• public/app/features/dashboard-scene/settings/variables/components/VariableMultiPropStaticOptionsForm.test.tsx
• public/app/features/dashboard-scene/settings/variables/components/VariableMultiPropStaticOptionsForm.tsx
• public/app/features/dashboard-scene/settings/variables/components/VariableValuesPreview.test.tsx
• public/app/features/dashboard-scene/settings/variables/components/VariableValuesPreview.tsx
• public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor/ModalEditor.test.tsx
• public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor/ModalEditor.tsx
• public/app/features/dashboard-scene/settings/variables/editors/CustomVariableEditor/PaneItem.tsx
• public/app/features/dashboard/components/ShareModal/ShareExport.tsx
• public/app/features/datasources/components/DataSourceAddButton.tsx
• public/app/features/explore/extensions/ToolbarExtensionPointMenu.tsx
• public/app/index.ts
• public/app/initPreferences.test.ts
• public/app/initPreferences.ts
• public/app/types/window.d.ts
• public/boot/README.md
• public/boot/index.ts
• scripts/check-enterprise-linked.sh
• scripts/modowners/README.md
• scripts/modowners/modowners.go
• tsconfig.json

This document describes the local development workflow, testing infrastructure, and quality tools used in the Grafana repository. It covers hot reload configuration, build automation, CI/CD optimization, test sharding strategies, and the testing frameworks used across frontend and backend.

For information about the build system architecture, see Frontend Monorepo and Backend Build System. For feature management, see Feature Toggles.

---

Local Development Setup

Development Commands

Grafana provides multiple entry points for local development, each optimized for different workflows. The primary interface for backend development is the Makefile, while frontend development primarily uses yarn.

Development Workflow Overview

Sources: contribute/developer-guide.md99-153 .github/workflows/pr-e2e-tests.yml65 .github/workflows/pr-test-integration.yml14

Environment Configuration

The development environment relies on specific tool versions and configurations:

• Node.js & Yarn: Managed via .nvmrc and corepack contribute/developer-guide.md11 contribute/developer-guide.md41-46
• Pre-commit Hooks: Managed via lefthook, these perform linting and eslint-suppressions.json synchronization contribute/developer-guide.md50-64
• Knip: Used to detect unused code and dependencies in the frontend contribute/developer-guide.md66-78

Build Flags and Parameters: The backend build process uses optimized flags for fast iteration:

• CGO_ENABLED=0 is used in CI and local dev to produce pure Go binaries, avoiding the need for a C compiler contribute/developer-guide.md168-171 .github/workflows/pr-test-integration.yml82
• Matrix builds in CI handle multiple architectures including linux-amd64, linux-arm64, and windows-amd64 .github/workflows/release-build.yml160-181

Sources: contribute/developer-guide.md1-175 .github/workflows/release-build.yml135-182 .github/workflows/pr-test-integration.yml82

---

CI/CD Change Detection

Grafana uses intelligent change detection to run only necessary tests in pull requests, significantly reducing CI time. This is managed via the .github/actions/change-detection action.

Change Detection Architecture

Sources: .github/workflows/pr-e2e-tests.yml34-36 .github/workflows/pr-test-integration.yml52-54 .github/workflows/frontend-lint.yml28-32

Conditional Workflow Execution

Workflows check change detection outputs to skip unnecessary work. For example, the E2E test workflow detects changes and sets a run-e2e-tests output:

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

The subsequent jobs use this output to decide whether to run:

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

---

Test Sharding

Grafana parallelizes test execution across multiple CI workers using sharding strategies.

Backend Test Sharding

The backend tests are split using shard.sh. The SHARD environment variable (e.g., 1/16) controls package distribution. Integration tests specifically target tests named TestIntegration:

.github/workflows/pr-test-integration.yml85-86 .github/workflows/pr-test-integration.yml130-134

Frontend and E2E Sharding

E2E tests (Playwright) are sharded using a matrix strategy:

• shard: [1, 2, 3, 4, 5, 6, 7, 8]
• shardTotal: [8] .github/workflows/pr-e2e-tests.yml169-170

---

Testing Frameworks

Backend Testing (Go)

Test Types:

1. Unit Tests: Fast tests running in CI using go test .github/workflows/backend-unit-tests.yml1
2. Integration Tests: Tests targeting specific databases (SQLite, MySQL, Postgres).
3. Database Integration: Integration tests use make devenv to spin up database containers .github/workflows/pr-test-integration.yml114 .github/workflows/pr-test-integration.yml167

End-to-End Testing (Playwright)

Grafana utilizes Playwright for its modern E2E suite, replacing legacy Cypress tests.

Playwright Setup: Playwright tests are located in e2e-playwright/. The CI workflow downloads pre-built backend and frontend artifacts to assemble a standalone distribution for testing .github/workflows/pr-e2e-tests.yml187-203

Selector Management: Selectors are centrally managed in packages/grafana-e2e-selectors to ensure stability across UI changes packages/grafana-e2e-selectors/src/selectors/components.ts15 packages/grafana-e2e-selectors/src/selectors/pages.ts8

E2E Utility Functions: Common flows like importing dashboards or saving changes are abstracted into utility functions:

• importTestDashboard: Handles JSON dashboard imports e2e-playwright/dashboard-new-layouts/utils.ts184
• saveDashboard: Interacts with the Save Drawer e2e-playwright/dashboard-new-layouts/utils.ts79

Quality Tools

• Levitate: Detects breaking changes in public packages by comparing the PR against the base branch .github/workflows/detect-breaking-changes-levitate.yml161-163
• Storybook Testing: Playwright verifies Storybook components via yarn e2e:playwright:storybook .github/workflows/pr-e2e-tests.yml154
• Frontend Linting: Enforces code style using Prettier and ESLint .github/workflows/frontend-lint.yml52-53

---

Development Environment (devenv)

The devenv/ directory contains Docker Compose configurations and Tiltfile definitions for local infrastructure.

Frontend Service Devenv: The devenv/frontend-service/docker-compose.yaml defines a multi-service stack:

• grafana-api: Core backend service devenv/frontend-service/docker-compose.yaml20
• frontend-service: Target for frontend server testing devenv/frontend-service/docker-compose.yaml50
• postgres: Database for the dev environment devenv/frontend-service/docker-compose.yaml88
• Observability: Includes Alloy, Prometheus, Loki, and Tempo for telemetry devenv/frontend-service/docker-compose.yaml99-147

Sources: devenv/frontend-service/docker-compose.yaml1-163 .github/workflows/pr-test-integration.yml23

---

Summary of Quality Checks

Tool	Scope	Implementation
go test	Backend Unit/Integration	go test -run '^TestIntegration' .github/workflows/pr-test-integration.yml134
Playwright	E2E / Storybook	yarn e2e:playwright .github/workflows/pr-e2e-tests.yml154
Levitate	API Breaking Changes	check-breaking-changes.sh .github/workflows/detect-breaking-changes-levitate.yml163
Yarn Lint	Frontend Style	yarn run lint .github/workflows/frontend-lint.yml53
Release Build	Packaging	make build-targz .github/workflows/release-build.yml24

Sources: .github/workflows/release-build.yml1-33 .github/workflows/pr-e2e-tests.yml150-170 .github/workflows/frontend-lint.yml1-81