HSLayers grafana plugin

This template is a starting point for building Grafana Panel Plugins in Grafana 7.0+

Getting started

Clone this repo inside /var/lib/grafana/plugins or your own plugins directory.

cd hslayers-grafana

1. Install dependencies

   yarn install

1.1. Currently needs to be compiled against a special hslayers branch where app bundle code is not minified: https://github.com/hslayers/hslayers-ng/tree/enable-source-maps This checkout hslayers at this branch and in hslayers repo directory do npm run build-app && cd dist/hslayers-app && npm link and inside hslayers-graphana directory do npm link hslayers-app

2. Build plugin in development mode or run in watch mode

   yarn dev

   or

   yarn watch

3. Build plugin in production mode

   yarn build --skipLint

4. HsLayers panel configuration is done by providing a global function source-code which gets eval-ed on plugin creation. Its is done in the panel configuration options. See example code:

window.hslayersNgConfig = function(ol) {
        return {
          default_layers: [
            new ol.layer.Tile({
              source: new ol.source.OSM(),
              title: "OpenStreetMap",
              base: true,
              visible: true,
              removable: false
            })
          ],
    
          default_view: new ol.View({
            center: ol.proj.fromLonLat([17.474129, 52.574000]),
            zoom: 4,
            units: "m"
          })
        }
      }

Grafana config

Currently the plugin is not signed so set in grafana.ini:

[plugins]
enable_alpha = true
allow_loading_unsigned_plugins = "hslayers-grafana"

and restart grafana

sudo systemctl restart grafana

In grafana.log should see

logger=plugin.signature.validator t=2022-03-22T16:44:43.78+0200 lvl=warn msg="Permitting unsigned plugin. This is not recommended" pluginID=hslayers-grafana pluginDir=/var/lib/grafana/plugins/hslayers-grafana/dist
logger=plugin.manager t=2022-03-22T16:44:43.78+0200 lvl=info msg="Plugin registered" pluginId=hslayers-grafana

Learn more

• Build a panel plugin tutorial
• Grafana documentation
• Grafana Tutorials - Grafana Tutorials are step-by-step guides that help you make the most of Grafana
• Grafana UI Library - UI components to help you build interfaces using Grafana Design System