Grafana simplejson dashboard

4

Hi,

I’m going to try to explain the steps involved using the SimpleJSON datasource plugin using the fake-simple-json-datasource linked above.

  1. Start fake-simple-json-datasource (nodejs required)
git clone https://github.com/bergquist/fake-simple-json-datasource 
cd fake-simple-json-datasource 
npm install
node index.js
  1. Configure a new Simple JSON datasource in Grafana using the url of your custom built REST API, for example http://localhost:3333 which is default port that the fake-simple-json-datasource are listening on.
    • I choose Access=proxy
    • Then you save it and it should give you response that it went good

image
image1196×912 106 KB

  1. Create a new dashboard

  2. Add a graph panel and go into edit panel

  3. Switch to the metric tab

  4. Select your Simple JSON datasource that you’ve created earlier

    • When you’ve selected the Simple JSON datasource the browser are doing a request to fetch available metrics. The Simple JSON datasource plugin will receive the request from Grafana frontend and then issue a request to the url configured, i.e. http://localhost:3333/query. This is how the request/response to/from SimpleJSON datasource looks like in chrome dev tools:

image
image1040×765 81.8 KB

image
image702×163 10 KB

Similar, this is what the request to http://localhost:3333/query from SimpleJSON datasource plugin looks like:

{ timezone: 'browser',
  panelId: 6,
  range:
   { from: '2018-02-23T04:14:50.889Z',
     to: '2018-02-23T10:14:50.889Z',
     raw: { from: 'now-6h', to: 'now' } },
  rangeRaw: { from: 'now-6h', to: 'now' },
  interval: '30s',
  intervalMs: 30000,
  targets: [ { target: '', refId: 'A', type: 'timeserie' } ],
  maxDataPoints: 755,
  scopedVars:
   { __interval: { text: '30s', value: '30s' },
     __interval_ms: { text: 30000, value: 30000 } } }
  1. Select upper_95 metric for example and the following request/response are sent

image
image1047×883 101 KB

image
image1028×167 15 KB

Similar, this is what the request to http://localhost:3333/query from SimpleJSON datasource plugin looks like:

{ timezone: 'browser',
  panelId: 6,
  range: 
   { from: '2018-02-23T04:31:36.797Z',
     to: '2018-02-23T10:31:36.797Z',
     raw: { from: 'now-6h', to: 'now' } },
  rangeRaw: { from: 'now-6h', to: 'now' },
  interval: '30s',
  intervalMs: 30000,
  targets: [ { target: 'upper_95', refId: 'A', type: 'timeserie' } ],
  maxDataPoints: 755,
  scopedVars: 
   { __interval: { text: '30s', value: '30s' },
     __interval_ms: { text: 30000, value: 30000 } } }
  1. This is my result

image
image1426×803 87.9 KB

Hope this clears up any confusion about how to implement/use the SimpleJSON datasource plugin?

Marcus