@burna/osjs-grafana-widget

A Widget for os.js to work with Grafana.

Usage no npm install needed!

<script type="module">
  import burnaOsjsGrafanaWidget from 'https://cdn.skypack.dev/@burna/osjs-grafana-widget';
</script>

README

osjs-grafana-widget

A widget to show Grafana data in multiple types of charts

Screenshot from 2020-11-02 10-45-21

Introduction

OS.js Widget is a module of OS.js web desktop platform, which we utilize it to develop a widget named GrafanaWidget. This widget shows Grafana data in different types of charts.

You need to clone official OS.js repository and install OS.js Widget module, prior to installing GrafanaWidget.

Installation

1. Installation by by using source code:

1- Navigate to the following directory of OS.js project

cd src/client

2- Clone GrafanaWidget in this directory

git clone https://github.com/BurnaSmartLab/osjs-grafana-widget.git

3- Then navigate to osjs-grafana-widget directory

cd osjs-grafana-widget

5- Run following command in the current directory to install dependencies

npm install

2. Installion by using npm dependency manager:

Just execute the following command:

npm install @burna/osjs-grafana-widget

Usage

1- Add following lines to the src/client/index.js file

// import GrafanaWidget from its directory
// use following line, if the first approach for installation has been used
import GrafanaWidget  from './osjs-grafana-widget';
// use following line, if the second approach for installation has been used
import GrafanaWidget from '@burna/osjs-grafana-widget'

// register GrafanaWidget
  osjs.register(WidgetServiceProvider, {
    args: {
      registry: {
        GrafanaWidget
      }
    }
  });

2- Add following lines to the src/server/config.js file

 // replace 'http://localhost:12345' and 'GRAFANA API KEY' with your valid grafana server address and its Authorization key
  proxy: [{
    source: '/grafana',
    destination: 'http://localhost:12345',
    options: {
      proxyReqOptDecorator: function(proxyReqOpts, srcReq) {
        proxyReqOpts.headers = {
           'Authorization': 'GRAFANA API KEY',
        };
        return proxyReqOpts;
      }
    }
  }]

Links

OS.js
OS.js Widget
Grafana