Commit 2fb301cc by Marcus Olsson Committed by GitHub

Docs: Improve guides for contributing (#19575)

* Move style guides into contribute directory

* Move contribution guides into contribute directory

* Refactor CONTRIBUTING.md

* Clean up docs/README.md

* Update reference to style guide and minor formatting fixes

* Apply suggestions from code review

Co-Authored-By: gotjosh <josue.abreu@gmail.com>

* Update CONTRIBUTING.md

Co-Authored-By: gotjosh <josue.abreu@gmail.com>
parent 27ddd2d6
+++
title = "Developing on macOS"
description = "Developing on macOS"
type = "docs"
[menu.docs]
parent = "development"
weight = 1
+++
# Develop Grafana
# Developing on macOS
This guide helps you get started developing Grafana on macOS.
This guide helps you get started developing Grafana.
## Dependencies
......@@ -20,6 +11,8 @@ Make sure you have the following dependencies installed before moving on to set
- [Node.js (Long Term Support)](https://nodejs.org)
- [Yarn](https://yarnpkg.com)
### macOS
We recommend using [Homebrew](https://brew.sh/) for installing any missing dependencies:
```
......@@ -50,7 +43,7 @@ Before we can build the frontend assets, we need to install the dependencies:
yarn install --pure-lockfile
```
When this is done, we can start building our source code:
After the command has finished, we can start building our source code:
```
yarn start
......@@ -64,19 +57,19 @@ Next, we'll build the web server that will serve the frontend assets we just bui
Build and run the backend, by running `make run` in the root directory of the repository. This command will compile the Go source code, and start a web server.
By default, the web server will be served at `http://localhost:3000/`.
By default, you can access the web server at `http://localhost:3000/`.
Log in using the default credentials:
| username | password |
|----------|----------|
| `admin` | `admin` |
| -------- | -------- |
| `admin` | `admin` |
When you log in for the first time, you'll be asked to change your password.
When you log in for the first time, Grafana will ask you to change your password.
## Test Grafana
The tests for the frontend are written using [jest](https://jestjs.io/). Run them using yarn:
We use [jest](https://jestjs.io/) for our frontend tests. Run them using yarn:
```
yarn jest
......@@ -90,7 +83,7 @@ go test -v ./pkg/...
## Add data sources
By now, you should be able to build and test a change you've made to the Grafana source code. Most likely though, you're going to need to add a few data sources to verify the change you made.
By now, you should be able to build and test a change you've made to the Grafana source code. In most cases, you need to add at least one data source to verify the change.
To set up data sources for your development environment, go to the `devenv` directory in the Grafana repository:
......@@ -98,7 +91,7 @@ To set up data sources for your development environment, go to the `devenv` dire
cd devenv
```
Run the `setup.sh` script to setup a set of data sources and dashboards in your local Grafana. Data sources are named **gdev-\<type\>**, and dashboards are located in a folder called **gdev dashboards**.
Run the `setup.sh` script to setup a set of data sources and dashboards in your local Grafana. The script creates a set of data sources called **gdev-\<type\>**, and a set of dashboards located in a folder called **gdev dashboards**.
Some of the data sources require databases to run in the background.
......@@ -116,4 +109,6 @@ See the repository for all the [available data sources](https://github.com/grafa
## Learn more
- [How to contribute to Grafana as a junior dev](https://medium.com/@ivanahuckova/how-to-contribute-to-grafana-as-junior-dev-c01fe3064502) by [Ivana Huckova](https://medium.com/@ivanahuckova).
- Read our [style guides](/contribute/style-guides).
- Learn how to [Create a pull request](/contribute/pull-request.md).
- Read [How to contribute to Grafana as a junior dev](https://medium.com/@ivanahuckova/how-to-contribute-to-grafana-as-junior-dev-c01fe3064502) by [Ivana Huckova](https://medium.com/@ivanahuckova).
+++
title = "Documentation"
description = "Contributing to documentation"
type = "docs"
[menu.docs]
parent = "contribute"
weight = 2
+++
# Contributing to documentation
## How do I contribute?
This documents guides you through the process of contributing to the Grafana documentation. Make sure you've read the guide for [Contributing to Grafana](/CONTRIBUTING.md).
## Your first contribution
If you’re unsure about where to start, check out some of our [open docs issues](https://github.com/grafana/grafana/issues?q=is%3Aopen+is%3Aissue+label%3Atype%2Fdocs).
......@@ -19,20 +12,18 @@ When you’ve found an issue you want to work on, you’re encouraged to comment
If you encounter any misspellings, or violations to the style guide, please let us know by submitting an issue.
On every page in the documentation there are two links:
On every page in the [documentation](https://grafana.com/docs/) there are two links:
- __Edit this page__ takes you directly to the file on GitHub where you can contribute a fix.
- __Request doc changes__ prepares an issue on GitHub with relevant information already filled in.
- **Edit this page** takes you directly to the file on GitHub where you can contribute a fix.
- **Request doc changes** prepares an issue on GitHub with relevant information already filled in.
## Community
If you have questions on a specific issue, post a comment to ask for clarification, or to give feedback.
For general discussions on documentation, you’re welcome to join the `#docs` channel on our [public Grafana Slack](http://slack.raintank.io) team.
## Guidelines
All Grafana documentation is written using [Markdown](https://en.wikipedia.org/wiki/Markdown), and can be found in the [docs](https://github.com/grafana/grafana/tree/master/docs) directory in the [Grafana GitHub repository](https://github.com/grafana/grafana). The [documentation website](https://grafana.com/docs) is generated with [hugo](https://gohugo.io) which uses [Blackfriday](https://github.com/russross/blackfriday) as its Markdown rendering engine.
All Grafana documentation is written using [Markdown](https://en.wikipedia.org/wiki/Markdown), and can be found in the [docs](https://github.com/grafana/grafana/tree/master/docs) directory in the [Grafana GitHub repository](https://github.com/grafana/grafana). The [documentation website](https://grafana.com/docs) is generated with [Hugo](https://gohugo.io) which uses [Blackfriday](https://github.com/russross/blackfriday) as its Markdown rendering engine.
### Structure
......
# Create a pull request
We're excited that you're considering making a contribution to the Grafana project! This document guides you through the process of creating a [pull request](https://help.github.com/en/articles/about-pull-requests/).
## Before you begin
We know you're excited to create your first pull request. Before we get started, read these resources first:
- Learn how to start [Contributing to Grafana](https://grafana.com/docs/contribute/overview/).
- Make sure your code follows the relevant [style guides](/contribute/style-guides).
## Your first pull request
If this is your first time contributing to an open-source project on GitHub, make sure you read about [Creating a pull request](https://help.github.com/en/articles/creating-a-pull-request).
To increase the chance of having your pull request accepted, make sure your pull request follows these guidelines:
- Title and description matches the implementation.
- Commits within the pull request follow the [style guide](#style-guide).
- The pull request closes one related issue.
- The pull request contains necessary tests that verify the intended behavior.
- If your pull request has conflicts, rebase your branch onto the master branch.
If the pull request fixes a bug:
- The pull request description must include `Closes #<issue number>` or `Fixes #<issue number>`.
- To avoid regressions, the pull request should include tests that replicate the fixed bug.
### Frontend-specific guidelines
Pull requests for frontend contributions must:
- Use [Emotion](https://github.com/grafana/grafana/blob/master/style_guides/styling.md) for styling.
- Not increase the Angular code base.
- Not use `any` or `{}` without reason.
- Not contain large React components that could easily be split into several smaller components.
- Not contain backend calls directly from components—use actions and Redux instead.
Pull requests for Redux contributions must:
- Use the `actionCreatorFactory` and `reducerFactory` helpers instead of traditional switch statement reducers in Redux. Refer to [Redux framework](https://github.com/grafana/grafana/tree/master/style_guides/redux.md) for more details.
- Use `reducerTester` to test reducers. Refer to [Redux framework](https://github.com/grafana/grafana/tree/master/style_guides/redux.md) for more details.
- Not contain code that mutates state in reducers or thunks.
- Not contain code that accesses the reducers state slice directly. Instead, the code should use state selectors to access state.
## Code review
Once you've created a pull request, the next step is to have someone review your change. A review is a learning opportunity for both the reviewer and the author of the pull request.
If you think a specific person needs to review your pull request, then you can tag them in the description or in a comment. Tag a user by typing the `@` symbol followed by their GitHub username.
We recommend that you read [How to do a code review](https://google.github.io/eng-practices/review/reviewer/) to learn more about code reviews.
## Formatting guidelines
A well-written pull request minimizes the time to get your change accepted. These guidelines help you write good commit messages and descriptions for your pull requests.
### Commit message format
Grafana uses the guidelines for commit messages outlined in [How to Write a Git Commit Message](https://chris.beams.io/posts/git-commit/), with the following additions:
- Subject line must begin with the _area_ of the commit.
- A footer in the form of an optional [keyword and issue reference](https://help.github.com/en/articles/closing-issues-using-keywords).
#### Area
The area should use upper camel case, e.g. UpperCamelCase.
Prefer using one of the following areas:
- **Build:** Changes to the build system, or external dependencies.
- **Chore:** Changes that don't affect functionality.
- **Dashboard:** Changes to the Dashboard feature.
- **Docs:** Changes to documentation.
- **Explore:** Changes to the Explore feature.
- **Plugins:** Changes to any of the plugins.
For changes to data sources, the area should be the name of the data source, e.g., AzureMonitor, Graphite, and Prometheus.
For changes to panels, the area should be the name of the panel, suffixed with Panel, e.g., GraphPanel, SinglestatPanel, and TablePanel.
**Example**
- `Build: Support publishing MSI to grafana.com`
- `Explore: Add Live option for supported data sources`
- `GraphPanel: Fix legend sorting issues`
### Pull request titles
The Grafana team _squashes_ all commits into one when we accept a pull request. The title of the pull request becomes the subject line of the squashed commit message. We still encourage contributors to write informative commit messages, as they becomes a part of the Git commit body.
We use the pull request title when we generate change logs for releases. As such, we strive to make the title as informative as possible.
Make sure that the title for your pull request uses the same format as the subject line in the commit message.
......@@ -2,8 +2,8 @@
This section contains style guides for the Grafana software project and documentation.
- [Backend style guide](https://github.com/grafana/grafana/blob/master/pkg/STYLEGUIDE.md): Provides guidance on how to style and format backend functionality and code.
- [Backend style guide](backend.md): Provides guidance on how to style and format backend functionality and code.
- [Documentation style guide](documentation-style-guide.md): Provides guidance on how to style and format documentation.
- [Frontend style guide](frontend.md): Provides guidance on how to style and format the user-facing functionality and code.
- [Redux framework](redux.md): Provides guidance on designing the Grafana redux framework.
- [Themes style guide](themes.md): Provides guidance on designing and updating Grafana themes.
\ No newline at end of file
- [Themes style guide](themes.md): Provides guidance on designing and updating Grafana themes.
......@@ -5,7 +5,7 @@ Grafanas backend has been developed for a long time with a mix of code styles.
This style guide is a guide for how we want to write Go code in the future. Generally, we want to follow the style guides used in Go [Code Review Comments](https://code.google.com/p/go-wiki/wiki/CodeReviewComments) and Peter Bourgon's [Go: Best Practices for Production Environments](http://peter.bourgon.org/go-in-production/#formatting-and-style)
## Linting and formatting
We enforce strict `gofmt` formating and use some linters on our codebase. You can lint the codebase with <akefile -
We enforce strict `gofmt` formatting and use some linters on our codebase. You can lint the codebase with <akefile -
```bash
$ make lint-go
```
......
......@@ -59,7 +59,7 @@ For all items not covered in this guide, refer to the [Microsoft Style Guide](ht
### Word usage
Grafana products has some words, abbreviations, and slang particular to this discourse commmunity.
Grafana products has some words, abbreviations, and slang particular to this discourse community.
#### data source
......
......@@ -9,7 +9,7 @@ Generally we follow the Airbnb [React Style Guide](https://github.com/airbnb/jav
- [Basic rules](#basic-rules)
- [Organization](#organization)
- [Props](#props)
- [State mangement](#state-mangement)
- [State management](#state-management)
## Basic rules
......@@ -85,9 +85,9 @@ static defaultProps: Partial<Props> = { ... }
static defaultProps = { ... }
```
## State mangement
## State management
- Don't mutate state in reducers or thunks.
- Use helpers `actionCreatorFactory` and `reducerFactory` instead of traditional `switch statement` reducers in Redux. See [Redux framework](https://github.com/grafana/grafana/tree/master/style_guides/redux.md) for more details.
- Use `reducerTester` to test reducers. See [Redux framework](https://github.com/grafana/grafana/tree/master/style_guides/redux.md) for more details.
- Use state selectors to access state instead of accessing state directly.
\ No newline at end of file
- Use helpers `actionCreatorFactory` and `reducerFactory` instead of traditional `switch statement` reducers in Redux. See [Redux framework](redux.md) for more details.
- Use `reducerTester` to test reducers. See [Redux framework](redux.md) for more details.
- Use state selectors to access state instead of accessing state directly.
......@@ -6,14 +6,14 @@ The Markdown content however, is still public in this repository. We still encou
# Building the docs
To build the docs locally, you need to have docker installed. The docs are built using [Hugo](http://gohugo.io/) - a static site generator.
To build the docs locally, you need to have Docker installed. The docs are built using [Hugo](http://gohugo.io/) - a static site generator.
**Prepare the Docker Image**:
**Prepare the Docker image**:
> Due to migration to new static site, the docker image needs to be built from `old-docs` branch.
> Due to migration to new static site, the Docker image needs to be built from `old-docs` branch.
Git clone `grafana/website` repo. Run these commands in the root of that repo. **Note** that you may require ``sudo``
when running ``make docs-build`` depending on how your system's docker
Git clone `grafana/website` repo. Run these commands in the root of that repo. **Note** that you may require `sudo`
when running `make docs-build` depending on how your system's Docker
service is configured):
```
......@@ -24,7 +24,7 @@ make docs-build
**Build the Documentation**:
Now that the docker image has been prepared we can build the
Now that the Docker image has been prepared we can build the
grafana docs and start a docs server.
If you have not cloned the Grafana repository already then:
......@@ -47,14 +47,14 @@ An AWS config file is required to build the docs Docker image and to publish the
touch awsconfig
```
Then run (possibly with ``sudo``):
Then run (possibly with `sudo`):
```
make watch
```
This command will not return control of the shell to the user. Instead
the command is now running a new docker container built from the image
the command is now running a new Docker container built from the image
we created in the previous step.
Open [localhost:3004](http://localhost:3004) to view the docs.
......@@ -63,20 +63,21 @@ Open [localhost:3004](http://localhost:3004) to view the docs.
All markdown files are part of [this repository](https://github.com/grafana/grafana). However, all images are added to the [website repository](https://github.com/grafana/website). Therefore, the process of adding images is not as straightforward. These are the steps:
1. Ensure you create a feature branch within the [website repository](https://github.com/grafana/website) to make the change. This branch needs to be based on the `old-docs` branch.
2. Ensure the image(s) are compressed and optimised e.g. Using [tinypng](https://tinypng.com/)
2. Add the image(s) to the `/static/img/docs` directory
3. Then, make a commit that adds the image(s)
4. The Pull Request you create needs to target where you branched off, the branch `old-docs`
1. Ensure you create a feature branch within the [website repository](https://github.com/grafana/website) to make the change. This branch needs to be based on the `old-docs` branch.
1. Ensure the image(s) are compressed and optimised e.g. Using [tinypng](https://tinypng.com/).
1. Add the image(s) to the `/static/img/docs` directory.
1. Then, make a commit that adds the image(s).
1. The Pull Request you create needs to target where you branched off, the branch `old-docs`.
Finally, run:
```
make docs-build
```
This will rebuild the docs docker image.
This will rebuild the docs Docker image.
To be able to use your image(s) you have to quit (CTRL-C) the `make watch` command (that you run in the same directory as this README). Then simply rerun `make watch`, it will restart the docs server but now with access to your image(s).
To be able to use your image(s) you have to quit (CTRL-C) the `make watch` command (that you run in the same directory as this README). Then simply rerun `make watch`, it will restart the docs server but now with access to your image(s).
### Editing content
......@@ -86,4 +87,4 @@ Changes to the markdown files should automatically cause a docs rebuild and live
#### Running `make watch` errors out with `Warning: Task "default" not found.`
Ensure that the docker image from the [website repository](https://github.com/grafana/website) is built using the `old-docs` branch.
Ensure that the Docker image from the [website repository](https://github.com/grafana/website) is built using the `old-docs` branch.
+++
title = "Development"
type = "docs"
[menu.docs]
name = "Development"
identifier = "development"
parent = "contribute"
weight = 2
+++
# Development
# Grafana backend codebase
The code [styleguide](STYLEGUIDE.md) and brief description of the [architecture](ARCHITECTURE.md)
The code [styleguide](/contribute/style-guides/backend.md) and brief description of the [architecture](ARCHITECTURE.md)
# On going refactorings.
These issues are not something we want to address all at once but something we will improve over time. Since Grafana is released at a regular schedule the prefer approuch is to do this in batches. Not only is it easier to review, it also reduces the risk of conflicts when cherry-picking fixes from master to release branches. Changes that spawn multiple locations are therefore prefered in the end of the release cycle since we make fewer patch releases in the end of the cycle.
# Ongoing refactorings
These issues are not something we want to address all at once but something we will improve over time. Since Grafana is released at a regular schedule the preferred approach is to do this in batches. Not only is it easier to review, but it also reduces the risk of conflicts when cherry-picking fixes from master to release branches. Please try to submit changes that span multiple locations at the end of the release cycle. We prefer waiting until the end because we make fewer patch releases at the end of the release cycle, so there are fewer opportunities for complications.
## Global state
Global state makes testing and debugging software harder and its something we want to avoid when possible.
Unfortunately, there is quite a lot of global state in Grafana. The way we want to migrate away from this
is to use the `inject` package to wire up all dependencies either in `pkg/cmd/grafana-server/main.go` or
self registering using `registry.RegisterService` ex https://github.com/grafana/grafana/blob/master/pkg/services/cleanup/cleanup.go#L25
## Reduce the use of the init() function
Should only be used to register services/implementations.
## Settings refactoring
The plan is to move all settings to from package level vars in settings package to the [setting.Cfg](https://github.com/grafana/grafana/blob/df917663e6f358a076ed3daa9b199412e95c11f4/pkg/setting/setting.go#L210) struct. To access the settings services/components can inject this setting.Cfg struct.
[Cfg struct](https://github.com/grafana/grafana/blob/df917663e6f358a076ed3daa9b199412e95c11f4/pkg/setting/setting.go#L210)
[Injection example](https://github.com/grafana/grafana/blob/df917663e6f358a076ed3daa9b199412e95c11f4/pkg/services/cleanup/cleanup.go#L20)
## Reduce the use of Goconvey
We want to migrated away from using Goconvey and use stdlib testing as its the most common approuch in the GO community and we think it will make it easier for new contributors. Read more about how we want to write tests in the [ARCHITECTURE.MD](ARCHITECTURE.md#Testing) docs.
## Sqlstore refactoring
The sqlstore handlers all use a global xorm engine variable. This should be refactored to use the Sqlstore instance.
## Avoid global HTTP Handler functions
HTTP handlers should be refactored to so the handler methods are on the HttpServer instance or a more detailed handler struct. E.g (AuthHandler). This way they get access to HttpServer service dependencies (& Cfg object) and can avoid global state
## Date comparison
Newly introduced date columns in the database should be stored as epochs if date comparison is required. This permits to have a unifed approach for comparing dates against all the supported databases instead of handling seperately each one of them. In addition to this, by comparing epochs error pruning transformations from/to other time zones are no more needed.
# Dependency management
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment