Pass values between dashboard and datasourse plugin

Grafana Plugin Development
, ,
1

Hello, i’m newbie on Grafana world and i’m trying to develop DataSourse plugin using WebSocket.
That is not so easy and i really need the community helps!

I have a dashbard with variable(combox), i want to pass the value selected from dashboard to datasourse plugin everytime when the user change the selection.
image

My DataSourse Plugin is:

import {
  CircularDataFrame,
  DataQueryRequest,
  DataQueryResponse,
  DataSourceApi,
  DataSourceInstanceSettings,
  FieldType,
  LoadingState
} from '@grafana/data';
import { MyQuery, MyDataSourceOptions } from './types';
import { merge, Observable } from 'rxjs';
import { io, Socket } from "socket.io-client";

export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
  ws: Socket<any, any>;
  dashboardUID: string | undefined;
  
  constructor(instanceSettings: DataSourceInstanceSettings<MyDataSourceOptions>) {
    super(instanceSettings);

    this.ws = initWebSocket(instanceSettings.jsonData.path || '');
  }

  query(options: DataQueryRequest<MyQuery>): Observable<DataQueryResponse> {
    const observables = options.targets.map((target) => {
      return new Observable<DataQueryResponse>((subscriber) => {
        const frame = new CircularDataFrame({
          append: 'tail',
          capacity: 2
        });

        frame.refId = target.refId;
        frame.addField({ name: 'time', type: FieldType.time });
        frame.addField({ name: 'data', type: FieldType.other });

        this.ws.on("push", (event: any) => {
          frame.add(JSON.parse(event));

          subscriber.next({
            data: [frame],
            key: target.refId,
            state: LoadingState.Streaming,
          });
        })
      });
    });

    return merge(...observables);
  }

  async testDatasource() {
    return {
      status: 'success',
      message: 'Success',
    };
  }
}

function initWebSocket(url: string) {
  let wsConn: Socket<any, any>
  wsConn = io(url, {
    transports: ["websocket"]
  });

  wsConn.on('error', (error: any) => {
    console.log(`WebSocket error: ${error}`);
  });

  return wsConn
}

I saw similar MSSql plugin, we can use ${VAR_NAME} into a quary and the DS convert the var_name to value selected by user.

How can i do something like this?

2

@eaguari Grafana already has a WebSocket data source: WebSocket API plugin for Grafana | Grafana Labs

3

Yeah, i try it but not worked for me, i have different approach and i would like to implement others features like ws rooms.

4

Hi @eaguari

in your datasource query method you can use getTemplateSrv().replace to replace the variables in the query. Take a look at the props you receive in your query method it should contain both the raw query and the scopeVariables.

5

I’m not exactly use replace, but the getTemplateSvr.getVariables() and then filtering by hide.
Cool, great tool!

Thanks guys!