grafana/devenv
Drew Slobodnjak b166bdc3fc
Stat: Add Percent Change Option (#78250)
* Stat: Add Percent Change Option

* Ensure div style only applied for percent change

* Add metrics section to gdev

* Apply new style and fix nan truthy

* Handle no text case properly

* Only display percent change with value

* Improve styling

* Remove VizOrientation dep and improve styling

* Display percent change for text mode name

* Add check for undefined percentChange

* Don't show percent change option for all values

* Make metric alignment more robust

* Make percent change column case tighter

Check undefined directly to avoid truthy issues

* Simplify percentChange calculation

* Add documentation for show percent change

* Add tests for percent change

* Refactor big value and pull out percent change

* minor changes

* initial approach at addressing setting % change colors to be conventional (not super happy with handling of contrast)

* Clean up initial color change approach (no need to handle 0 case as is handled as NaN currently

* Update shadow styling and include icon

* Update docs/sources/panels-visualizations/visualizations/stat/index.md

Co-authored-by: Isabel <76437239+imatwawana@users.noreply.github.com>

* Stat: Add Percent Change Option (refactor and color exploration)  (#79504)

Co-authored-by: nmarrs <nathanielmarrs@gmail.com>

* some missed cleanup :D

* update percent change to show to not be tied to text value; update docs accordingly

* initial start for fixing scaling of % change for no text mode

* Fix styling for case where textmode is none

* Tweak styling a bit for icon and minimum padding

* Apply flex wrap to container styles

* Update gdev for stat panel tests

* attempt at fixing horizontal percent change styling / placement

---------

Co-authored-by: nmarrs <nathanielmarrs@gmail.com>
Co-authored-by: Isabel <76437239+imatwawana@users.noreply.github.com>
Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
2023-12-15 16:15:31 -08:00
..
bulk_alerting_dashboards DashboardSchema: Remove old unused legacy props style and timepicker.enable (#73879) 2023-08-28 12:18:17 +02:00
bulk-dashboards DashboardSchema: Remove old unused legacy props style and timepicker.enable (#73879) 2023-08-28 12:18:17 +02:00
bulk-folders Devenv: Create script to provision many folders (#75427) 2023-09-26 15:05:37 +03:00
dev-dashboards Stat: Add Percent Change Option (#78250) 2023-12-15 16:15:31 -08:00
dev-dashboards-without-uid DevEnv: Fix missing commas in dashboards (#77359) 2023-10-30 14:18:33 +01:00
docker Elasticsearch: Fix modify query with backslashes (#79430) 2023-12-13 14:07:46 +01:00
jsonnet BarChart: Fix incorrect legend field labels (#78511) 2023-12-14 05:54:02 +02:00
local-npm Build: Improve NPM publishing (#65171) 2023-04-18 10:19:37 +02:00
vscode Add documentation for setting up debugging in VSCode (#29987) 2021-08-19 12:08:43 +02:00
create_docker_compose.sh Build: allow dynamically change docker image (#18112) 2019-07-16 08:16:10 +02:00
dashboards.yaml Allow saving of provisioned dashboards (#19820) 2019-10-31 14:27:31 +01:00
datasources_docker.yaml Elasticsearch: Deprecate the usage of the database field in provisioning (#66828) 2023-04-19 14:13:53 +01:00
datasources.yaml Instrumentation: Handle context.Canceled (#75867) 2023-10-10 12:28:39 +02:00
README.md Devenv: Add undev command to the ./setup scrip of devenv (#76684) 2023-10-18 14:05:59 +01:00
setup.sh Devenv: Add undev command to the ./setup scrip of devenv (#76684) 2023-10-18 14:05:59 +01:00

Set up your development environment

This folder contains useful scripts and configuration so you can:

  • Configure data sources in Grafana for development.
  • Configure dashboards for development and test scenarios.
  • Set up an SMTP Server + Web Interface for viewing and testing emails.
  • Create docker-compose file with databases and fake data.

Install Docker

Grafana uses Docker to make the task of setting up databases a little easier. If you do not have it already, make sure you install Docker before proceeding to the next step.

Developer dashboards and data sources

To setup developer dashboards and data sources

./setup.sh

To remove the setup developer dashboards and data sources

./setup.sh undev

After restarting the Grafana server, there should be a number of data sources named gdev-<type> provisioned as well as a dashboard folder named gdev dashboards. This folder contains dashboard and panel features tests dashboards.

Please update these dashboards or make new ones as new panels and dashboards features are developed or new bugs are found. The dashboards are located in the devenv/dev-dashboards folder.

docker-compose with databases

This command creates a docker-compose file with specified databases configured and ready to run. Each database has a prepared image with some fake data ready to use. For available databases, see docker/blocks directory. Notice that for some databases there are multiple images with different versions. Some blocks such as slow_proxy_mac or apache_proxy_mac are specifically for Macs.

make devenv sources=influxdb,prometheus,elastic5

Some of the blocks support dynamic change of the image version used in the Docker file. The signature looks like this:

make devenv sources=postgres,auth/openldap,grafana postgres_version=9.2 grafana_version=6.7.0-beta1

Notes per block

Grafana

The grafana block is pre-configured with the dev-datasources and dashboards.

Tempo

The tempo block runs loki and prometheus as well and should not be ran with prometheus as a separate source. You need to install a docker plugin for the self logging to work, without it the container won't start. See https://grafana.com/docs/loki/latest/clients/docker-driver/#installing for installation instructions.

Jaeger

Jaeger block runs both Jaeger and Loki container. Loki container sends traces to Jaeger and also logs its own logs into itself so it is possible to setup derived field for traceID from Loki to Jaeger. You need to install a docker plugin for the self logging to work, without it the container won't start. See https://grafana.com/docs/loki/latest/clients/docker-driver/#installing for installation instructions.

Graphite

version source name graphite-web port plaintext port pickle port
1.1 graphite 8180 2103 2103
1.0 graphite1 8280 2203 2203
0.9 graphite09 8380 2303 2303

MailDev

MailDev block runs an SMTP server and a web UI to test and view emails. This is useful for testing your email notifications locally.

Make sure you configure your .ini file with the following settings:

[smtp]
enabled = true
skip_verify = true
host = "localhost:1025"

You can access the web UI at http://localhost:12080/#/

Debugging setup in VS Code

An example of launch.json is provided in devenv/vscode/launch.json. It basically does what Makefile and .bra.toml do. The 'program' field is set to the folder name so VS Code loads all *.go files in it instead of just main.go.

Troubleshooting

Containers that read from log files fail to start (Mac OS)

If you are running Mac OSX, containers that read from the log files (e.g. Telegraf, Fileabeat, Promtail) can fail to start. This is because the default Docker for Mac does not have permission to create grafana folder at the /var/log location, as it runs as the current user. To solve this issue, manually create the folder /var/log/grafana, then start the containers again.

sudo mkdir /var/log/grafana