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

Convert the value into boolean using Jackson JSON parsing, whether it is TRUE or FALSE

Currently, I am utilizing Jackson annotations to convert JSON responses into POJO objects. Initially, I had been using a boolean variable in the POJO for mapping values of "true" and "false" from the JSON data. However, an issue arose when the JSON start ...

Pause the audio using jQuery when the slide changes

I have a Drupal website with a slider that includes an audio player on each slide. I need the audio to stop whenever the slide changes. The slider plugin I'm using is owlCarousel. Here is my current code: $("#owl-demo").owlCarousel({ afterAction: ...

How can the Header of a get-request for an npm module be modified?

Currently, I am utilizing an npm module to perform an API request: const api_req = require('my-npm-module-that-makes-an-api-request'); However, I am seeking a way to modify the user-agent used for requests generated internally by the npm module ...

Gather keyboard information continuously

Currently working with Angular 10 and attempting to capture window:keyup events over a specific period using RXJS. So far, I've been facing some challenges in achieving the desired outcome. Essentially, my goal is to input data and submit the request ...

Angular select tag failing to display input data accurately

When constructing select type questions for my web app using a JSON file, the code snippet for the select tag appears as follows: <div class="form-group" ng-class="{ 'has-error': form.$submitted && form[field.id].$invalid }" ng-if="fi ...

JavaScript seems to have difficulty correctly parsing objects from JSON

Having trouble populating a Repeat Box with objects from a JSON document. Despite my efforts, it keeps duplicating the first item instead of adding each one individually. Any ideas on what might be causing this issue? Below is the code I am currently usin ...

Is it possible to extract tooltip text from a website using Python and Selenium, specifically when the text is generated by JavaScript?

Can anyone help me retrieve the tooltip text that appears when I hover over the time indicating how long ago a game was played? You can find my summoner profile here. I have noticed that the tooltip text is not visible in the HTML code and suspect it may ...

The use of a map with Next/image seems to be preventing the src image from loading properly

Utilizing next/image for loading images in my application has been successful, except when it comes to a carousel featuring multiple images. Whenever I attempt this, I encounter the following error: Error: Image is missing required "src" property. Make su ...

Animating a div in CSS3 to expand horizontally from left to right without affecting its original position

I am currently in the process of developing a calendar using HTML, CSS, and JavaScript. The main purpose of this calendar is to showcase upcoming and past events. However, I am facing difficulties in ensuring that my event blocks occupy the remaining space ...

Odd Behavior when altering button attribute using Jquery

After disabling a button with a click handler, I have noticed an interesting behavior where the button does not submit afterwards. The issue seems to vary between different browsers, with Firefox still allowing form submission after the button is disabled, ...

Organize the array following the guidelines of a card game with a versatile approach

deck = ['Jack', 8, 2, 6, 'King', 5, 3, 'Queen', "Jack", "Queen", "King"] <!- Desired Result = [2,3,5,6,8,'Jack','Queen','King'] Explore the challenge: Arrange the ...

The call stack is overflowing due to excessive use of async.queue, causing a

I'm encountering an issue where I am receiving a "stack size exceeded" error when running the code snippet below. The code works perfectly fine with fewer items (tested up to 1000), but as soon as I increase the number of items, this error occurs cons ...

The table's content extends beyond the confines of the page

I have an HTML page where I am embedding an SSRS report. The report extends beyond the page as shown in the image below: This is the table that is generated: <table cellpadding="0" cellspacing="0" id="ctl00_MainContent_FiveYearReportViewer_fixedTable" ...

Can you tell me how to display the currently utilized Node.js version and path within npm?

I’m encountering a similar issue to the one discussed in this Stackoverflow thread: SyntaxError: Use of const in strict mode?. However, my problem arises when attempting to install Flux. I followed the steps outlined in the linked Stackoverflow question ...

What is the optimal approach for displaying numerous button components with varying values?

I've been developing a calculator in React and I decided to render all the buttons using the Button Panel component with what some might call a "brute force" method. return ( <> <div> <Button value="A/C" cl ...

Utilizing ExpressJS for IP handling combined with AngularJS for $http GET requests

Struggling to grasp ExpressJS, I'm facing difficulties in displaying the IP address from an Express route in the browser using an Angular controller. To achieve this, I am utilizing two Node.js modules - request-ip and geoip2. These modules help me r ...

Error message saying 'Callback has already been invoked' returned by an async waterfall function

I'm facing an error that I understand the reason for, but I'm unsure how to resolve it. Here's a breakdown of my initial function: Essentially, I am making a get request for all URLs stored in the database and then, for each URL response, I ...

Include certain variables in the JSON response within the Aspect

Our goal is to include some variables in the JSON response, embedded within a specific aspect. We are looking to implement a process similar to this function, but focusing on modifying the response rather than the request. ...

Guide on managing firebase and webrtc tasks within a client-side component using Next.js 13

I developed a Next.js 13 application to share the camera feed using WebRTC and Firestore. Below is my page.tsx file where I am facing some challenges. I can't make this server-side because I'm using React hooks, and moving it to the client side i ...

Using JSF 2.1 for Ajax autocomplete with server search triggered only when user pauses typing

Currently, I am working on developing an autocomplete feature that involves database search based on user input events (specifically onkeyup) in a <h:inputText />. There are two specific preconditions that need to be met for the application to perfo ...