diff --git a/README.md b/README.md index 57cc01e..89fcc44 100644 --- a/README.md +++ b/README.md @@ -1,133 +1,11 @@ -# Grafana data source plugin template +# Accessibility Issue Tracker -This template is a starting point for building a Data Source Plugin for Grafana. +Still under active development to get into an alpha version. -## What are Grafana data source plugins? +This is an opionated Grafana Plugin that allows you to track accessibility issues in your web application utilizing GitHub and a dedicated workflow to manage your issues. -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. +![The plugin showing two pie charts side by side. The left one outlines the main areas which have accessibility issues in the grafana/grafana repo. The right one shows the most popular labels. Beneath them are label cards highlighing the oldest issue, the newest issue and the issue with the most WCAG violations.](./docs/img/areas-labels-issues.png) -## Getting started +![The plugin showing a list of all the WCAG failures in a horizontal bar chart.](./docs/img/wcag-violations.png) -### Backend - -1. Update [Grafana plugin SDK for Go](https://grafana.com/developers/plugin-tools/introduction/grafana-plugin-sdk-for-go) dependency to the latest minor version: - - ```bash - go get -u github.com/grafana/grafana-plugin-sdk-go - go mod tidy - ``` - -2. Build backend plugin binaries for Linux, Windows and Darwin: - - ```bash - mage -v - ``` - -3. List all available Mage targets for additional commands: - - ```bash - mage -l - ``` - -### Frontend - -1. Install dependencies - - ```bash - npm install - ``` - -2. Build plugin in development mode and run in watch mode - - ```bash - npm run dev - ``` - -3. Build plugin in production mode - - ```bash - npm run build - ``` - -4. Run the tests (using Jest) - - ```bash - # Runs the tests and watches for changes, requires git init first - npm run test - - # Exits after running all the tests - npm run test:ci - ``` - -5. Spin up a Grafana instance and run the plugin inside it (using Docker) - - ```bash - npm run server - ``` - -6. Run the E2E tests (using Cypress) - - ```bash - # Spins up a Grafana instance first that we tests against - npm run server - - # Starts the tests - npm run e2e - ``` - -7. Run the linter - - ```bash - npm run lint - - # or - - npm run lint:fix - ``` - -# Distributing your plugin - -When distributing a Grafana plugin either within the community or privately the plugin must be signed so the Grafana application can verify its authenticity. This can be done with the `@grafana/sign-plugin` package. - -_Note: It's not necessary to sign a plugin during development. The docker development environment that is scaffolded with `@grafana/create-plugin` caters for running the plugin without a signature._ - -## Initial steps - -Before signing a plugin please read the Grafana [plugin publishing and signing criteria](https://grafana.com/legal/plugins/#plugin-publishing-and-signing-criteria) documentation carefully. - -`@grafana/create-plugin` has added the necessary commands and workflows to make signing and distributing a plugin via the grafana plugins catalog as straightforward as possible. - -Before signing a plugin for the first time please consult the Grafana [plugin signature levels](https://grafana.com/legal/plugins/#what-are-the-different-classifications-of-plugins) documentation to understand the differences between the types of signature level. - -1. Create a [Grafana Cloud account](https://grafana.com/signup). -2. Make sure that the first part of the plugin ID matches the slug of your Grafana Cloud account. - - _You can find the plugin ID in the `plugin.json` file inside your plugin directory. For example, if your account slug is `acmecorp`, you need to prefix the plugin ID with `acmecorp-`._ -3. Create a Grafana Cloud API key with the `PluginPublisher` role. -4. Keep a record of this API key as it will be required for signing a plugin - -## Signing a plugin - -### Using Github actions release workflow - -If the plugin is using the github actions supplied with `@grafana/create-plugin` signing a plugin is included out of the box. The [release workflow](./.github/workflows/release.yml) can prepare everything to make submitting your plugin to Grafana as easy as possible. Before being able to sign the plugin however a secret needs adding to the Github repository. - -1. Please navigate to "settings > secrets > actions" within your repo to create secrets. -2. Click "New repository secret" -3. Name the secret "GRAFANA_API_KEY" -4. Paste your Grafana Cloud API key in the Secret field -5. Click "Add secret" - -#### Push a version tag - -To trigger the workflow we need to push a version tag to github. This can be achieved with the following steps: - -1. Run `npm version ` -2. Run `git push origin main --follow-tags` - -## Learn more - -Below you can find source code for existing app plugins and other related documentation. - -- [Basic data source plugin example](https://github.com/grafana/grafana-plugin-examples/tree/master/examples/datasource-basic#readme) -- [`plugin.json` documentation](https://grafana.com/developers/plugin-tools/reference-plugin-json) -- [How to sign a plugin?](https://grafana.com/developers/plugin-tools/publish-a-plugin/sign-a-plugin) +![The plugin showing a line graph visualising the velocity of how many issues have been closed versus opened in the last six months in the grafana/grafana repo.](./docs/img/velocity.png) diff --git a/docs/img/areas-labels-issues.png b/docs/img/areas-labels-issues.png new file mode 100644 index 0000000..3330515 Binary files /dev/null and b/docs/img/areas-labels-issues.png differ diff --git a/docs/img/velocity.png b/docs/img/velocity.png new file mode 100644 index 0000000..0680e3c Binary files /dev/null and b/docs/img/velocity.png differ diff --git a/docs/img/wcag-violations.png b/docs/img/wcag-violations.png new file mode 100644 index 0000000..dee44d1 Binary files /dev/null and b/docs/img/wcag-violations.png differ