Is it feasible to develop a Grafana datasource plugin that does not rely on an external backend system?

I am in the process of developing a Grafana datasource plugin that operates independently without relying on an external backend.

My plugin is based on the simple-json datasource plugin available at: https://github.com/grafana/simple-json-datasource

In attempting to modify the query function in the datasource.js file, I encountered the following differences:

The original code snippet:

 query(options) {
    var query = this.buildQueryParameters(options);

    if (query.targets.length <= 0) {
      return this.q.when([]);
    }

    return this.backendSrv.datasourceRequest({
      url: this.url + '/query',
      data: query,
      method: 'POST',
      headers: { 'Content-Type': 'application/json' }
    });

My revised query function:

  query(options) {
      return [
      {
        "target":"upper_75",
        "datapoints":[
          [622,1450754160000],
          [365,1450754220000]
        ]
      },
      {
        "target":"upper_90",
        "datapoints":[
          [861,1450754160000],
          [767,1450754220000]
        ]
      }
    ];
  }

Upon implementing my custom query function and trying to visualize the graph in the Grafana panel, I encountered the following error message:

"undefined is not an object (evaluating 'dataList.map')"

Despite experimenting with different data formats, it appears that Grafana expects a specific format as return value, which remains elusive to me.

I have closely studied the output of the original implementation and attempted to replicate it, but without success.

I suspect that

this.backendSrv.datasourceRequest({
      url: this.url + '/query',
      data: query,
      method: 'POST',
      headers: { 'Content-Type': 'application/json' }
    });

is meant to provide a formatted HTTP response, leaving me wondering why I cannot manually return it.

Any assistance would be greatly appreciated. Thank you!

Answer №1

It seems like the code needs to be wrapped in a promise and cannot be directly returned. The Angular $q component is used for this purpose. I got it working by returning:

return this.q(function(resolve, reject) {
    var result = {
      data : [
        {
          "target":"upper_75",
          "datapoints":[
            [622,1450754160000],
            [365,1450754220000]
          ]
        },
        {
          "target":"upper_90",
          "datapoints":[
            [861,1450754160000],
            [767,1450754220000]
          ]
        }
      ]
    }
    resolve(result)
});

You need to inject $q in the constructor to access it:

constructor(instanceSettings, $q, backendSrv) {
this.type = instanceSettings.type;
this.url = instanceSettings.url;
this.name = instanceSettings.name;
this.q = $q;
this.backendSrv = backendSrv;}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Add a class to alternate elements when mapping over data in React

Check out the code snippet below: <div className="grid md:grid-cols-2 sm:grid-cols-2 grid-cols-1 gap-16 mt-24 px-4"> {status === "success" && delve(data, "restaurants") && data.r ...

Unable to modify the value of an object variable generated from a query in JavaScript, ExpressJS, and MongoDB

Here is the code snippet I've been working on: let addSubmissions = await Submission.find({"type": "add-information"}, (err) => { if(err) { console.log(err) req.flash('error', 'No "add submissions" were found&apo ...

What is the best way to create TypeScript declarations for both commonjs modules and global variables?

Wanting to make my TypeScript project compatible with both the commonjs module system and globals without modules. I'm considering using webpack for bundling and publishing it into the global namespace, but running into issues with the definitions (.d ...

Is the Angular-fullstack generator production application experiencing issues with serving socket.io correctly?

Having a bit of trouble with two angular-fullstack apps deployed on AWS using the same setup and configuration. It appears that socket.io-client/socket.io.js is not being properly served on one of them, despite both apps having identical settings. There ...

What is the best way to set the active class on the initial tab that is determined dynamically rather than a static tab in Angular?

I'm currently facing a problem with ui-bootstrap's tabsets. I have one tab that is static (Other) and the rest are dynamically added using ng-repeat. The issue I'm having is that I can't seem to make the first dynamically loaded tab act ...

Error encountered: Vue.js encountered an unexpected token, which is 'export'

Having an issue with Google location autocomplete, specifically this error: SyntaxError Unexpected token 'export' Here is the link to the functional code: https://codesandbox.io/s/nifty-bardeen-5eock ...

Setting an environment map in Three.js can replace the original texture on a model

I'm having trouble setting an environment map to an OBJ model. It seems like the appearance has changed drastically! In its usual view, it looks like this: https://i.sstatic.net/4VcIG.png But when I set the environment map, it transforms into this: ht ...

Finding the distance between two points in JavaScript requires a simple formula

Here is a code snippet that generates two TRACER points and displays them on a map, as well as shows the union between the two points. <?php $latitudInicio = $_GET['latitudInicio']; $longitudInicio = $_GET['longitudInicio']; $latit ...

Querying Mongodb with extended millisecond intervals

I have a collection that I need to export every 5 minutes based on the timestamp field. When querying the collection, the maximum date is as follows: db.testcol.find({},{_id : 0,ts : 1}).sort({ts:-1}) 2017-04-14 23:40:27.690Z I converted it to mil ...

Angular 13's APP_INITIALIZER doesn't wait as expected

Recently, I have been in the process of upgrading from okta/okta-angular version 3.x to 5.x and encountered an unexpected bug. Upon startup of the application, we utilized APP_INITIALIZER to trigger appInitializerFactory(configService: ConfigService), whi ...

Merge two JSON files into a single document

I am currently working on a script that is able to access a JSON file by using the code: $.getJSON( 'alfred.json', function(data) { ... } Recently, I have obtained a second file named alfred_offline.json, which follows the same structure a ...

Unlocking the npm package event emitter on the client side in Meteor

Having some trouble with a seemingly basic issue. I came across an NPM package called LOG-WATCHER (used as an example) which keeps an eye on a specific log file on a client's local file system. This package emits events such as 'START', &apo ...

The SQL statement functions correctly in the MYSQL command line but encounters issues when executed within a NODE.JS application

When running the following SQL as the root user, everything works fine: sudo mysql -u root -p DROP DATABASE IF EXISTS bugtracker; CREATE DATABASE bugtracker; USE bugtracker; However, when executing the node.js code, an error is encountered: Error: There ...

Employing AJAX, execute a synchronous function asynchronously (Javascript)

Here's a code snippet for the sync function. I've been calling it inside an Ajax, but apparently it's deprecated because it's synchronous. Is there any way to make it run as if it were asynchronous? Or is there a way to convert it into ...

The JSX Configuration in TypeScript: Comparing ReactJSX and React

When working with Typescript and React, it's necessary to specify the jsx option in the compilerOptions section of the tsconfig.json file. Available values for this option include preserve, react, react-native, and react-jsx. { "compilerOptions": { ...

Guide to sending API request utilizing PHP cURL and transmitting multidimensional JSON array

I'm struggling to understand this concept. Dealing with a multidimensional JSON array and making an API request using PHP cURL has me puzzled. While I found the curl_setopt_array function in the manual, I could still use some assistance on how to succ ...

Retrieve elements from an array based on the value of an object

I have a list of items that resembles the following structure: var entries = [ { sys: {id:"1"}, fields: "article1" }, { sys: {id:"2"}, fields: "place1" }, { sys: {id:"3"}, fields: "offer2" }, { sys: {id:"1"}, fields: "article2" }, { sys: {id:"1" ...

Retrieving information from a designated section in a json document using Python

Here is a snippet of my JSON data: {"text": "Home - Homepage des Kunstvereins Pro Ars Lausitz e.V.\nKunst. Und so weiter.", "timestamp": "2018-01-20T18:56:35Z", "url": "http://proarslausitz.de/1.h ...

What is the best way to enlarge text size with jquery?

I am attempting to: $('a[data-text="size-bigger"]').click(function () { a=$('span'); b=$('span').css('font-size'); a.css('font-size', b+1); } ); Initially, I ha ...

Passing a jQuery dialog variable for use in a php function using ajax

I am struggling to successfully pass variables from jQuery to a PHP function using AJAX. I have included the necessary HTML and script, but I'm confused as to whether the PHP file specified in the "url:" parameter should be external or can it be follo ...