VolkovLabs / business-forms

The Business Forms panel is a conceptually new plugin for Grafana. It is the first plugin that allows inserting and updating application data, as well as modifying configuration directly from your Grafana dashboard.
https://docs.volkovlabs.io
Apache License 2.0
86 stars 10 forks source link

Cannot show a specific HTTP Response Header value in notification message #415

Closed canob closed 5 months ago

canob commented 5 months ago

After discussing this on Grafana Community (https://community.grafana.com/t/data-manipulation-panel-plugin-how-to-show-a-specific-http-response-header-value-in-notification-message/120642), I'm opening this issue to be reviewed.

It is not possible to use a Response Header value in the notification message of Grafana, using Custom Code.

I can confirm that reviewing it with the Navigator Network Console, I'm receiving the Header Response, in this case, Ticket:

image

I added the console.log(response) in the Custom Code, and review Console tab with Dev Tools of the Browser, additionally to the Network tab:

As you can see, even that at the Network tab you have the Response Header {"Error": "Please add a Ticket ID"} , and you have the Response Body {"error":"Enter Ticket ID"}, you don’t have that in the Headers or in the Body in the Console tab:

image image image

I understand that to be usable by Data Manipulation Plugin, the value need to be there. For example, I tried with “type” field (“cors” value) as a test, and it showed in the error message:

image

So, at the end, is there any options that you know to customize the error message with a specific text that you can provide, based on the response?

Thanks in advance.

vitPinchuk commented 5 months ago

Hi, @canob You can use context.panel.response.headers.get('youHeaderName') context.panel.response.headers.get('tickets') But no all headers allow read in response on client as exammple I use GET method and url https://jsonplaceholder.typicode.com/users Here is my initial request. I use response header Content-Type

image

Additionally I see Date header in response. But if I try to use it, nothing to display. One of reason, it might not be accessible in the client-side code due to the way the browser's CORS policy works

image

I create simmple node.js file and run it locally. For Response I added header "tickets", "No tickets"

const express = require("express");
const app = express();
const port = 8008;

app.use(express.json());

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");
  res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
  res.setHeader("Access-Control-Allow-Headers", "Content-Type");
  // Should be added
  // res.setHeader("Access-Control-Expose-Headers", "tickets");
  next();
});

// GET route
app.get("/getapi", (req, res) => {
  res.setHeader("Content-Type", "application/json");
  res.setHeader("tickets", "No tickets");
  res.status(200).json({ message: "This is a GET response" });
});

// POST route
app.post("/sendapi", (req, res) => {
  res.setHeader("Content-Type", "application/json");
  res.setHeader("tickets", "No tickets");
  res.status(201).json({ message: "This is a POST response" });
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

And I see it in response headers in Networks but I can read this in code on client side.

image

header may be part of the configuration on the server I added res.setHeader("Access-Control-Expose-Headers", "tickets") and that allows me to use my header.

image

This is a sample for a GET request, but similar behavior will occur for a POST request as well

If you can't do this kind of customization at the moment, try a different approach and use response status/code if possible, or as you mention Response Body {"error":"Enter Ticket ID"}

here is example with 404 and response

example code update req

const getResponse = async (response) => {
  const body = await response.json()

  /*
  * Get Response body
  */

  console.log('console >>> ', body)

  if (body.error) {
    context.grafana.notifyError(['Tickets Error', body.error])
  }
}

if (context.panel.response) {
  console.log('console >>> Response POST', context.panel.response)
  /*
  * Get Response body
  */
  getResponse(context.panel.response)
}

image

canob commented 5 months ago

Thanks @vitPinchuk ! With your explanation and the additional information gived by ebabeshko (to use it with Node-RED) in this post of Grafana Community, https://community.grafana.com/t/data-manipulation-panel-plugin-how-to-show-a-specific-http-response-header-value-in-notification-message/120642/9, it worked perfectly. Thanks again!

mikhail-vl commented 5 months ago

@canob Thank you for confirming.

Please let us know if there is anything else.