The open and composable observability and data visualization platform. Visualize metrics, logs, and traces from multiple sources like Prometheus, Loki, Elasticsearch, InfluxDB, Postgres and many more.
Go to file
Johannes Schill 0412a28d2e TimePicker: New time picker dropdown & custom range UI (#16811)
* feat: Add new picker to DashNavTimeControls

* chore: noImplicitAny limit reached

* chore: noImplicityAny fix

* chore: Add momentUtc helper to avoid the isUtc conditionals

* chore: Move getRaw from Explore's time picker to grafana/ui utils and rename to getRawRange

* feat: Use helper functions to convert utc to browser time

* fix: Dont Select current value when pressing tab when using Time Picker

* fix: Add tabIndex to time range inputs so tab works smoothly and prevent mouseDown event to propagate to react-select

* fix: Add spacing to custom range labels

* fix: Updated snapshot

* fix: Re-adding getRaw() temporary to fix the build

* fix: Disable scroll event in Popper when we're using the TimePicker so the popup wont "follow" the menu

* fix: Move all "Last xxxx" quick ranges to the menu and show a "UTC" text when applicable

* fix: Add zoom functionality

* feat: Add logic to mark selected option as active

* fix: Add tooltip to zoom button

* fix: lint fix after rebase

* chore: Remove old time picker from DashNav

* TimePicker: minor design update

* chore: Move all time picker quick ranges to the menu

* fix: Remove the popover border-right, since the quick ranges are gone

* chore: Remove function not in use

* Fix: Close time picker on resize event

* Fix: Remove border bottom

* Fix: Use fa icons on prev/next arrows

* Fix: Pass ref from TimePicker to TimePickerOptionGroup so the popover will align as it should

* Fix: time picker ui adjustments to get better touch area on buttons

* Fix: Dont increase line height on large screens

* TimePicker: style updates

* Fix: Add more prominent colors for selected dates and fade out dates in previous/next month

* TimePicker: style updates2

* TimePicker: Big refactorings and style changes

* Removed use of Popper not sure we need that here?
* Made active selected item in the list have the "selected" checkmark
* Changed design of popover
* Changed design of and implementation of the Custom selection in the dropdown it did not feel like a item you
could select like the rest now the list is just a normal list

* TimePicker: Refactoring & style changes

* TimePicker: use same date format everywhere

* TimePicker: Calendar style updates

* TimePicker: fixed unit test

* fixed unit test

* TimeZone: refactoring time zone type

* TimePicker: refactoring

* TimePicker: finally to UTC to work

* TimePicker: better way to handle calendar utc dates

* TimePicker: Fixed tooltip issues

* Updated snapshot

* TimePicker: moved tooltip from DashNavControls into TimePicker
2019-06-24 14:39:59 +02:00
.circleci Build: Updates node image for e2e job (#17632) 2019-06-18 12:14:59 +02:00
.github Fix typo in PULL_REQUEST_TEMPLATE.md 2019-04-18 10:58:11 +02:00
conf Settings: Fix typo in defaults.ini (#17707) 2019-06-23 17:38:30 +02:00
devenv Devenv: Add nginx proxy for mac (#17572) 2019-06-13 21:29:33 +02:00
docs Docs: Flag serve_from_sub_path as available in 6.3 (#17674) 2019-06-20 07:06:09 +02:00
emails Fix: Alert email variable name typo fixed (#16232) 2019-03-27 09:42:20 +01:00
packages TimePicker: New time picker dropdown & custom range UI (#16811) 2019-06-24 14:39:59 +02:00
packaging Docker: Switch base to ubuntu:latest (#17066) 2019-06-14 22:57:55 +02:00
pkg RemoteCache: redis connection string parsing test (#17702) 2019-06-24 11:51:38 +02:00
public TimePicker: New time picker dropdown & custom range UI (#16811) 2019-06-24 14:39:59 +02:00
scripts noImplicitAny: Fix basic errors (#17668) 2019-06-19 19:59:03 +02:00
style_guides codestyle: styleguide and arch for grafanas backend (#17545) 2019-06-18 09:31:51 +02:00
tools/phantomjs Update render.js 2018-09-22 00:54:56 +03:00
vendor Feature: Parse user agent string in user auth token api response (#16… (#17504) 2019-06-11 14:12:52 +02:00
.babelrc WIP babel 7 2018-10-29 12:20:10 +01:00
.bra.toml build: internal metrics for packaging. 2018-11-15 14:42:09 +01:00
.browserslistrc Fix: Autoprefixer is now working (#16351) 2019-04-02 18:15:30 +02:00
.dockerignore remove duplicated /tmp entry in .dockerignore 2018-08-09 09:10:53 +02:00
.editorconfig Chore: Implement revive (#16200) 2019-03-27 17:53:49 +01:00
.gitignore Chore: explore possibilities of using makefile (#17039) 2019-05-16 00:29:26 +03:00
.prettierignore Updated prettierignore 2019-03-08 13:56:21 +01:00
build.go replace dep with go modules (#16017) 2019-04-16 12:00:55 +02:00
CHANGELOG.md Update the changelog with v6.2.4 information 2019-06-18 13:20:41 +01:00
CODE_OF_CONDUCT.md Spelling/grammar fixes in top level markdown files 2019-01-28 15:58:32 +00:00
CONTRIBUTING.md codestyle: styleguide and arch for grafanas backend (#17545) 2019-06-18 09:31:51 +02:00
Dockerfile Docker: Switch base to ubuntu:latest (#17066) 2019-06-14 22:57:55 +02:00
go.mod Feature: Parse user agent string in user auth token api response (#16… (#17504) 2019-06-11 14:12:52 +02:00
go.sum Feature: Parse user agent string in user auth token api response (#16… (#17504) 2019-06-11 14:12:52 +02:00
Gruntfile.js build: correctly adds enterprise to the filename. (#13831) 2018-10-25 16:55:27 +02:00
ISSUE_TRIAGE.md Document issue triage process (#17669) 2019-06-21 02:20:45 +02:00
jest.config.e2e.js Tests: Adds end-to-end tests skeleton and basic smoke test scenario (#16901) 2019-05-08 16:50:21 +02:00
jest.config.js Build: Use isolated modules for ts-jest (#16786) 2019-04-26 19:14:48 +02:00
latest.json Update latest.json for 6.2.4 2019-06-18 13:36:17 +01:00
LICENSE Small license correction 2019-03-21 16:36:24 +01:00
Makefile Build: make bra a local dependency (#17414) 2019-06-07 16:42:08 +03:00
NOTICE.md Update NOTICE.md 2018-08-09 10:51:04 +02:00
package.json noImplicitAny: slate (#17681) 2019-06-20 20:41:01 +02:00
PLUGIN_DEV.md Update PLUGIN_DEV.md 2019-03-20 12:24:54 -07:00
README.md Build: make bra a local dependency (#17414) 2019-06-07 16:42:08 +03:00
ROADMAP.md Docs: Updated roadmap issue to link to the pinned roadmap issues 2019-04-09 14:22:47 +02:00
SECURITY.md Project: Adds a security policy (#17698) 2019-06-23 00:25:29 +02:00
SUPPORT.md Project: Adds support resource docs (#17699) 2019-06-22 13:51:32 +02:00
tsconfig.json Chore: Bump ts-node to 8.1.0 (#17093) 2019-05-15 14:40:53 +02:00
tslint.json Chore: Replaces moment with Grafanas DateTime (#16919) 2019-05-08 13:51:44 +02:00
UPGRADING_DEPENDENCIES.md build: removes gopkg files from dev docker file (#16817) 2019-04-30 12:01:43 +02:00
yarn.lock noImplicitAny: slate (#17681) 2019-06-20 20:41:01 +02:00

Grafana Circle CI Go Report Card codecov

Website | Twitter | Community & Forum

Grafana is an open source, feature rich metrics dashboard and graph editor for Graphite, Elasticsearch, OpenTSDB, Prometheus and InfluxDB.

Installation

Head to docs.grafana.org for documentation or download to get the latest release.

Documentation & Support

Be sure to read the getting started guide and the other feature guides.

Run from master

If you want to build a package yourself, or contribute - here is a guide for how to do that. You can always find the latest master builds here

Dependencies

  • Go (Latest Stable)
  • Node.js LTS
    • yarn [npm install -g yarn]

Get the project

The project located in the go-path will be your working directory.

go get github.com/grafana/grafana
cd $GOPATH/src/github.com/grafana/grafana

Run and rebuild on source change

Backend

To run the backend and rebuild on source change:

make run

Frontend

Rebuild on file change, and serve them by Grafana's webserver (http://localhost:3000):

yarn start

Build the assets, rebuild on file change with Hot Module Replacement (HMR), and serve them by webpack-dev-server (http://localhost:3333):

yarn start:hot
# OR set a theme
env GRAFANA_THEME=light yarn start:hot

Note: HMR for Angular is not supported. If you edit files in the Angular part of the app, the whole page will reload.

Run tests and rebuild on source change:

yarn jest

Open grafana in your browser (default: e.g. http://localhost:3000) and login with admin user (default: user/pass = admin/admin).

Building

The backend

go run build.go setup
go run build.go build

Frontend assets

For this you need Node.js (LTS version).

yarn install --pure-lockfile

Building a Docker image

There are two different ways to build a Grafana docker image. If your machine is setup for Grafana development and you run linux/amd64 you can build just the image. Otherwise, there is the option to build Grafana completely within Docker.

Run the image you have built using: docker run --rm -p 3000:3000 grafana/grafana:dev

Building on linux/amd64 (fast)

  1. Build the frontend go run build.go build-frontend
  2. Build the docker image make build-docker-dev

The resulting image will be tagged as grafana/grafana:dev

Building anywhere (slower)

Choose this option to build on platforms other than linux/amd64 and/or not have to setup the Grafana development environment.

  1. make build-docker-full or docker build -t grafana/grafana:dev .

The resulting image will be tagged as grafana/grafana:dev

Notice: If you are using Docker for MacOS, be sure to set the memory limit to be larger than 2 GiB (at docker -> Preferences -> Advanced), otherwise grunt build may fail.

Development

Dev config

Create a custom.ini in the conf directory to override default configuration options. You only need to add the options you want to override. Config files are applied in the order of:

  1. grafana.ini
  2. custom.ini

In your custom.ini uncomment (remove the leading ;) sign. And set app_mode = development.

Running tests

Frontend

Execute all frontend tests

yarn test

Writing & watching frontend tests

  • Start watcher: yarn jest
  • Jest will run all test files that end with the name ".test.ts"

Backend

# Run Golang tests using sqlite3 as database (default)
go test ./pkg/...

# Run Golang tests using mysql as database - convenient to use /docker/blocks/mysql_tests
GRAFANA_TEST_DB=mysql go test ./pkg/...

# Run Golang tests using postgres as database - convenient to use /docker/blocks/postgres_tests
GRAFANA_TEST_DB=postgres go test ./pkg/...

End-to-end

Execute all end-to-end tests

yarn e2e-tests

Execute all end-to-end tests using using a specific url

ENV BASE_URL=http://localhost:3333 yarn e2e-tests

Debugging all end-to-end tests (BROWSER=1 will start the browser and SLOWMO=1 will delay each puppeteer operation by 100ms)

ENV BROWSER=1 SLOWMO=1 yarn e2e-tests

Datasource and dashboard provisioning

Here you can find helpful scripts and docker-compose setup that will populate your dev environment for quicker testing end experimenting.

Contribute

If you have any ideas for improvement or have found a bug, do not hesitate to open an issue. And if you have time, clone this repo and submit a pull request to help me make Grafana the kickass metrics & devops dashboard we all dream about!

Read the contributing guide then check the beginner friendly label to find issues that are easy and that we would like help with.

Plugin development

Checkout the Plugin Development Guide and checkout the PLUGIN_DEV.md file for changes in Grafana that relate to plugin development.

License

Grafana is distributed under Apache 2.0 License.