Button panel trigger is not working with infinity Json API

Grafana Configuration
1

  • What Grafana version and what operating system are you using?
    Grafana Version 12.0.2 & operating system - Windows 11

  • What are you trying to achieve?
    To Connect Grafana’s Infinity plugin / Json fetcher / Json API to a FastAPI backend (JSON API) via a button panel.
    Trigger API calls (e.g., POST /predict) when the button is clicked to send input value from to FastAPI .

  • How are you trying to achieve it?

  • Configured a JSON API data source in Grafana pointing to http://localhost:8000 (FastAPI).

  • Used a button panel with an action to trigger Post call the API endpoint.

  • Enabled CORS in FastAPI to allow requests from Grafana (http://localhost:3000).

  • What happened?
    When Button clicked : “GET / HTTP/1.1” 404 Not Found in backend API
    Button panel actions do not trigger successful API calls.

  • CORS preflight (OPTIONS request) fails despite CORS middleware in FastAPI.

  • What did you expect to happen?

    • Clicking the button should trigger a POST request to /predict and send value from frontend to FastAPI (eg. input value from Text box)

  • CORS should allow requests from Grafana’s origin (http://localhost:3000).

  • Can you copy/paste the configuration(s) that you are having problems with?

  • FastAPI CORS Setup

  • app.add_middleware(
    CORSMiddleware,
    allow_origins=[““], # Or specify your Grafana origin
    allow_credentials=True,
    allow_methods=[”    ”], # Allow all methods for testing
    allow_headers=[“*”],
    )

Button Panel Configuration

  • Issue: Missing or incorrect URL/API endpoint in the button action.

  • Fix:

    • Set the button’s Link to http://localhost:8000/predict.
    • Use ${__variables} for dynamic values.

  • Did you receive any errors in the Grafana UI or in related logs? If so, please tell us exactly what they were.
    INFO: 127.0.0.1:55699 - “GET / HTTP/1.1” 404 Not Found
    INFO: 127.0.0.1:59093 - “GET / HTTP/1.1” 404 Not Found

  • Did you follow any online instructions? If so, what is the URL?
    *I have tried with cursor AI/ deep seek to fix the issue

2

Hi All, Can someone help me to fix the issue in button panel ? Thanks

3

You can try this solution to resolve your issue—I hope it proves helpful
Step : 1 Fix Cors in FastAPI
Ensure your FastAPI main.py includes

from fastapi.middleware.cors import CORSMiddleware
from fastapi import FastAPI

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.post("/predict")
async def predict(data: dict):
    return {"result": f"You sent: {data}"}

Step : 2 Install the Infinity Plugin in Grafana

Run this in your terminal (Grafana must be stopped first):

grafana-cli plugins install yesoreyeram-infinity-datasource

Then restart Grafana
Step : 3 Create a text variable in grafana

dashboard >Settings>Variables
Click New Name it inputValue.
Type: Text box. Set a default value, like "hello".
Save the variable.

This will allow the user to input dynamic data.

Step :4 Add Infinity Data Source
Connections> Data Sources> Add data source. Choose Infinity
Name it FastAPI Predict.
Leave the default settings (you’ll configure the URL in the panel).
Save & Test.

Step : 5 Create a Panel to Send POST Request
Create a new panel.
Under Query, select:
Data source: FastAPI Predict
Type: JSON
Method: POST

  • URL: http://localhost:8000/predict
  • Body type: JSON
  • Request Body:
{
  "input": "${inputValue}"
}

This sends the value from the dashboard variable to FastAPI!
Under Format, choose Table or JSON.
Save and go back to the dashboard.

image