Johannes Schill 406ef962fc Explore & Dashboard: New Refresh picker (#16505)
* Added RefreshButton

* Added RefreshSelect

* Added RefreshSelectButton

* Added RefreshPicker

* Removed the magic string Paused

* Minor style changes and using Off instead of Pause

* Added HeadlessSelect

* Added HeadlessSelect story

* Added SelectButton

* Removed RefreshSelectButton

* Added TimePicker and moved ClickOutsideWrapper to ui/components

* Added TimePickerPopOver

* Added react-calendar

* Missed yarn lock file

* Added inputs to popover

* Added TimePicker and RefreshPicker to DashNav

* Moved TimePicker and RefreshPicker to app/core

* Added react-calendar to app and removed from ui/components

* Fixed PopOver onClick

* Moved everything back to ui components because of typings problems

* Exporing RefreshPicker and TimePicker

* Added Apply and inputs

* Added typings

* Added TimePickerInput and logic

* Fixed parsing of string to Moments

* Fixed range string

* Styling and connecting the calendars and inputs

* Changed Calendar styling

* Added backward forward and zoom

* Fixed responsive styles

* Moved TimePicker and RefreshPicker into app core

* Renamed menuIsOpen to isOpen

* Changed from className={} to className=""

* Moved Popover to TimePickerOptionGroup

* Renamed all PopOver to Popover

* Renamed popOver to popover and some minor refactorings

* Renamed files with git mv

* Added ButtonSelect and refactored RefreshPicker

* Refactored TimePicker to use new ButtonSelect

* Removed HeadlessSelect as suggested

* fix: Fix typings and misc errors after rebase

* wip: Enable time picker on dashboard and add tooltip

* Merge branch 'master' into hugoh/new-timepicker-and-unified-component

# Conflicts:
#	packages/grafana-ui/package.json
#	packages/grafana-ui/src/components/Input/Input.test.tsx
#	packages/grafana-ui/src/components/Input/Input.tsx
#	packages/grafana-ui/src/utils/validate.ts
#	public/app/features/dashboard/panel_editor/QueryOptions.tsx
#	yarn.lock

* fix: Snapshot update

* Move TimePicker default options into the TimePicker as statics, pass the tooltipContent down the line when wanted and wrap the button in a tooltip element

* fix: Override internal state prop if we provide one in a prop

* Updated snapshots

* Let dashnav control refreshPicker state

* feat: Add a stringToMs function

* wip: RefreshPicker

* wip: Move RefreshPicker to @grafana/ui

* wip: Move TimePicker to @grafana/ui

* wip: Remove comments

* wip: Add refreshPicker to explore

* wip: Use default intervals if the prop is missing

* wip: Nicer way of setting defaults

* fix: Control the select component

* wip: Add onMoveForward/onMoveBack

* Remove code related to the new time picker and refresh picker from dashnav

* Fix: Typings after merge

* chore: Minor fix after merge

* chore: Remove _.map usage

* chore: Moved refresh-picker logic out of the refresh picker since it will work a little differently in explore and dashboards until we have replaced the TimeSrv

* feat: Add an Interval component to @grafana/ui

* chore: Remove intervalId from redux state and move setInterval logic from ExploreToolbar to its own Interval component

* feat: Add refreshInterval to Explore's URL state

* feat: Pick up refreshInterval from url on page load

* fix: Set default refreshInterval when no value can be retained from URL

* fix: Update test initial state with refreshInterval

* fix: Handle URLs before RefreshPicker

* fix: Move RefreshInterval to url position 3 since the segments can take multiple positions

* fix: A better way of detecting urls without RefreshInterval in Explore

* chore: Some Explore typings

* fix: Attach refresh picker to interval picker

* chore: Sass fix for refresh button border radius

* fix: Remove refreshInterval from URL

* fix: Intervals now start when previous interval is finished

* fix: Use clearTimeout instead of clearInterval

* fix: Make sure there's a delay set before adding a timeout when we have slow explore queries

* wip: Add refresh picker to dashboard

* feat: Add util for removing keys with empty values

* feat: RefreshPicker in dashboards and tmp rem out old RefreshPicker

* fix: Remove the jumpy:ness in the refreshpicker

* Changed placement and made it hide when your in dashboard settings

* chore: Move logic related to refresh picker out of DashNav to its own component

* feat: Add tooltip to refreshpicker

* fix: Fix bug with refreshpicker not updating when setting to 'off'

* fix: Make it possible to override refresh intervals using the dashboard intervals

* chore: Change name of Interval to SetInterval to align with ecmascripts naming since its basically the same but declarative and async

* fix: Use default intervals when auto refresh is empty in dashboard settings

* fix: Hide time/interval picker when hidden is true on the model, such as on the home dashboard

* fix: Interval picker will have to handle location changes since timeSrv wont

* RefreshPicker: Refactoring refresh picker

* RefreshPicker: minor refactoring
2019-04-16 09:15:23 +02:00
2019-04-05 15:09:48 +02:00
2019-04-15 14:13:03 +02:00
2018-09-22 00:54:56 +03:00
2018-10-29 12:20:10 +01:00
2019-03-27 17:53:49 +01:00
2019-03-08 13:56:21 +01:00
2019-04-09 20:36:49 +02:00
2019-03-09 00:30:20 +08:00
2019-04-09 20:39:13 +02:00
2019-03-21 16:36:24 +01:00
2019-03-27 17:53:49 +01:00
2018-08-09 10:51:04 +02:00
2019-03-20 12:24:54 -07: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)
    • bra [go get github.com/Unknwon/bra]
  • 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

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

Run and rebuild on source change

Backend

To run the backend and rebuild on source change:

$GOPATH/bin/bra 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 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/...

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.

Description
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.
Readme 1.9 GiB
Languages
TypeScript 56.6%
Go 40.2%
Rich Text Format 0.7%
HTML 0.6%
CUE 0.4%
Other 1.3%