Implementing i18n support for Grafana dashboards

improvement
i18n
grafana

#1

Introduction

As @wtf is currently working on i18n support for Grafana dashboards, the generic grafana-metadata-api might also help him along for properly addressing multiple JSON files for different languages through a single virtual datasource.

Example implementation / Blueprint

Provisionierung

Für Deine Arbeiten habe ich Dir auf weather nun testweise die Datei

/var/lib/grafana-metadata-api/i18n/test.en.json

hinterlegt.

HTTP Zugriff

Der Zugriff darauf klappt konkret folgendermaßen:

# GET request with filename in URI
http https://weather.hiveeyes.org/metadata/i18n/test.en.json

# POST with filename as target
echo '{"target": "i18n/test.en.json"}' | http POST https://weather.hiveeyes.org/metadata/search

Grafana Zugriff

Wie man das dynamisch und variablengesteuert à la

image

von der Datenquelle bezieht, ist unter grafana-metadata-api: Howto: Publish and consume your own JSON metadata file beschrieben. Vielleicht hilft es Dir weiter.


Developing the »grafana-metadata-api«
Erarbeitung eines kanonischen Datenschemas für imkerliche Meßdaten
#3

The “i18next” JSON translation file format

Thoughts

When thinking of i18n and Javascript, we might consider to use the JSON file layout of the translation files as defined by the i18next internationalization-framework written in and for JavaScript.

Benefits

i18next gives us access to the whole GNU gettext ecosystem including web-based collaborative translation tools and platforms like

See also i18next » Introduction » Ecosystem.

JSON Format i18next JSON v3

In fact, it’s really just key => value ;], see JSON Format - i18next documentation.

Resources


Example from the wild


#4

Research

Grafana i18n

This is about i18n support for Grafana itself.

Grafana metadata mapping

These fine discussions and projects dedicate themselves to convenient metadata mapping through JSON files over HTTP and beyond.

Discussions

Duplicates

JSON data sources

1. simple-json-datasource

2. grafana-json-datasource (successor)

Backends

Others


#5

Wishlist / Feature requests / Requirements

  • Address multiple JSON resources (e.g. i18next files) through single virtual datasource.
  • Perform simple key => value lookup and return value.
  • Value should be usable from a template variable assignment using a convenient query syntax.

#6

GrafanaSimpleJsonValueMapper

Just trying the GrafanaSimpleJsonValueMapper on eltiempo.

Install

git clone https://github.com/CymaticLabs/GrafanaSimpleJsonValueMapper /opt/GrafanaSimpleJsonValueMapper
cd /opt/GrafanaSimpleJsonValueMapper
yarn install

Configure

cat /opt/GrafanaSimpleJsonValueMapper/server/data.json
{
  "en": {
    "close": "close",
    "mean": "mean"
  },
  "fr": {
    "close": "Fermer",
    "mean": "Moyenne"
  },
  "nl": {
    "close": "sluiten",
    "mean": "gemiddelde"
  }
}

Start

cd /opt/GrafanaSimpleJsonValueMapper
yarn start

Example

Dashboard

amo-i18n-tests

Add SimpleJson datasource

image

Add variable

List of variables

image

Works

image


Bottom line

Re. Wishlist / Feature requests / Requirements

Address multiple JSON resources (e.g. i18next files) through single virtual datasource.

Not there yet. Let’s just pack all into a single file as outlined above then.

Perform simple key => value lookup and return value.

Lookup expression like {"data": "$lang", "id": "mean"} feels reasonably simple.

Value should be usable from a template variable assignment using a convenient query syntax.

Looks like this works.

Outlook

We recognize

  • It’s still a hassle to enumerate all translation strings as Grafana variables. With the current implementation, it will be tedious to maintain. Sigh.

  • It’s not yet possible to directly use multiple i18next translation files as outlined above.


#7

Problem

The variables in text panels and metric aliases do not refresh at all when toggling dependent ones.

Investigations

While it doesn’t work with the Simple JSON datasource, it does work with InfluxDB.


#8

Placeholder for @wtf’s way of storing this into and querying it from InfluxDB.


#9

Backlog


#10

A bunch of terms “reference codes” and its translations are transformed in influxDB’s lineprotocol like this (everything is a tag, the field has a dummy-value):

term,ref=close,en=close,nl=sluiten,fr=Fermer,de=schließen v=1
term,ref=mean,en=mean,nl=gemiddelde,fr=Moyenne,de=Mittel v=1
term,ref=selected,en=selected,nl=geselecteerd,fr=Sélectionné,de=ausgewählt(e) v=1
term,ref=hourly,en=hourly,nl=per\ uur,fr=par\ heure,de=stündlich v=1
term,ref=daily,en=daily,nl=per\ dag,fr=par\ jour,de=täglich v=1
term,ref=station,en=station,nl=station,fr=station,de=Station v=1

and stored in an influx database, here named vmm_i18n:
$ curl -i -XPOST 'http://localhost:8086/write?db=vmm_i18n' --data-binary @linefeed.txt

and then added as a datasource to Grafana. In this example dashboard there is first a variable named $lang of the type “Custom” with a list of the language-codes available:

en,fr,nl,de

Then for every term used a variable will be created which calls the term-code (here: particulateMatter) together with the currently selected value of $lang:

SHOW TAG VALUES FROM term WITH KEY IN ("$lang") WHERE "ref" = 'particulateMatter'.

This variable is now named $t_particulateMatter and can be used in every corner of your dashboard (panel headings, html-texts, graph-aliases, …) and changes automagically to another language when another is selected for variable $lang. This can be done in the variable’s drop-down – or within the paramater var-lang=xy in the dashboards’s URL.

See the test-dashboard directly starting in english, dutch, french or german and don’t forget to click within the languge-dropdown.

See two embeds of one and the same panel (showing the vocabulary) - in two languages:

While just changing the paramater in the URL used in “src” of the iframe:

/grafana/d-solo/Wr3h02gZz/wtf-i18n-tests?orgId=1&var-lang=fr&panelId=2

to:

/grafana/d-solo/Wr3h02gZz/wtf-i18n-tests?orgId=1&var-lang=nl&panelId=2