Using a proxy for my datasource plugin

Grafana Plugin Development
1

After hours of searching, I keep getting stuck on the following error:

logger=data-proxy-log userId=1 orgId=1 uname=admin path=/api/datasources/proxy/uid/f321b4d8-3bb1-45b8-9256-60386ec34adf/influx remote_addr=172.19.0.1 referer=“http://localhost:3000/dashboard/new?orgId=1&editPanel=1” t=2023-08-29T11:30:05.9923144Z level=error msg=“Proxy request failed” err=“http: no Host in request URL”
vintecc-capturegrafanaplugin-datasource | logger=context userId=1 orgId=1 uname=admin t=2023-08-29T11:30:05.99235Z level=error msg=“Request Completed” method=GET path=/api/datasources/proxy/uid/f321b4d8-3bb1-45b8-9256-60386ec34adf/influx status=502 remote_addr=172.19.0.1 time_ms=9 duration=9.0361ms size=0 referer=“same_link_as_previous” handler=/api/datasources/proxy/uid/:uid/*

This is how i tried to set up the proxy:
plugin.json:

{
  "$schema": "https://raw.githubusercontent.com/grafana/grafana/master/docs/sources/developers/plugins/plugin.schema.json",
  "type": "datasource",
  "name": "Capture Grafana Plugin",
  "id": "vintecc-capturegrafanaplugin-datasource",
  "metrics": true,
  "backend": true,
  "executable": "gpx_capture_grafana_plugin",
  "info": {
    "description": "Take time series data and use the image provider to get corresponding images",
    "author": {
      "name": "Vintecc"
    },
    "keywords": ["datasource"],
    "logos": {
      "small": "img/logo.svg",
      "large": "img/logo.svg"
    },
    "links": [],
    "screenshots": [],
    "version": "%VERSION%",
    "updated": "%TODAY%"
  },
  "dependencies": {
    "grafanaDependency": ">=9.5.3",
    "plugins": []
  },
  "routes": [
    {
      "path": "/influx",
      "url": "http://localhost:8086/query"
    }
  ]
}

part of my datasource.ts:

  doRequest(query: string) {
    console.log("to proxy:", `${this.proxyUrl}/influx`);
    const observable = getBackendSrv().fetch({
      method: "GET",
      url: `${this.proxyUrl}/influx`,
      params: {
        db: this.database,
        q: query,
      },
    });
    return new Promise<any>((resolve, reject) => {
      observable.subscribe({
        next: (response) => {
          // console.log("Response:", response);
          resolve(response.data); // Resolve the Promise with the response data
        },
        error: (error) => {
          console.error("Error:", error);
          reject(error); // Reject the Promise with the error
        }
      });
    });  
  }

my proxyUrl looks like: to proxy: http://localhost:3000/api/datasources/proxy/uid/f321b4d8-3bb1-45b8-9256-60386ec34adf/influx (this is the output of the console.log)

what am i doing wrong? I hope someone can help me. A BIG thank you in advance!

2

Are you running grafana via Docker?

How are you running your API server? The one in http://localhost:8086/

If you are running grafana inside docker then it won’t be able to access localhost:8086 because the container “localhost” it is not the host machine, but the container itself, unless you run docket with --network=host or you modify your docker configuration to add an internal domain for the host machine

--add-host host.docker.internal:host-gateway if you use the docker command or add this if you use docker compose

extra_hosts:
   - "host.docker.internal:host-gateway"

and then refer to your API server as host.docker.internal:8086

Nevertheless this is a fragile setup. It will only work in your specific machine. the best is to use a server accessible via internet.

3

Thank you for your fast reply! You are right, i am running Grafana in Docker by doing ‘npm run server’. (I also tried the ‘make run’ method but this gave me the same result).
I changed my docker-compose to this configuration:

version: '3.0'

services:
  grafana:
    container_name: 'vintecc-capturegrafanaplugin-datasource'
    build:
      context: ./.config
      args:
        grafana_image: ${GRAFANA_IMAGE:-grafana-enterprise}
        grafana_version: ${GRAFANA_VERSION:-9.5.3}
    ports:
      - 3000:3000
    volumes:
      - ./dist:/var/lib/grafana/plugins/vintecc-capturegrafanaplugin-datasource
      - ./provisioning:/etc/grafana/provisioning
    networks:
      - mynetwork

  influxdb:
    image: influxdb
    container_name: influxdb_container
    ports:
      - "8087:8086"
      - "8089:8088"
    expose:
      - "8086"
      - "8088"
    networks:
      - mynetwork

networks:
  mynetwork:
    driver: bridge

I know this is for the moment a configuration that should only work on my own device. It is just for testing the hole project before working with the real servers.

Sadly enough i still get the same bad gateway error.
Ofcourse i changed my plugin.json to:

...
"routes": [
    {
      "path": "/influx",
      "url": "http://localhost:8087/query"
    }
  ]
4

Localhost still won’t work. Technically influxdb is in a different container and not in “local”. Because you created a common network you can use "url": "http://influxdb:8087/query" or whatever name your container has, so maybe it is influxdb_container not just influxdb. You can also set the hostname in the container if you want to be sure.

5

I forgot to add in my reply that influxdb is running as a service on my device and not in a dockercontainer…

6

Try adding this to your grafana docker-compose configuration and use "url": "http://host.docker.internal:8087/query" in your proxy route.

7

Hmm so this is what i got for the moment:
first i changed my plugin.json to:

"routes": [
    {
      "path": "/influx",
      "url": "http://host.docker.internal:8086/query"
    }
  ]

then i changed the docker compose to:

version: '3.0'

services:
  grafana:
    container_name: 'vintecc-capturegrafanaplugin-datasource'
    build:
      context: ./.config
      args:
        grafana_image: ${GRAFANA_IMAGE:-grafana-enterprise}
        grafana_version: ${GRAFANA_VERSION:-9.5.3}
    ports:
      - 3000:3000
    volumes:
      - ./dist:/var/lib/grafana/plugins/vintecc-capturegrafanaplugin-datasource
      - ./provisioning:/etc/grafana/provisioning
    extra_hosts:
      - "host.docker.internal:host-gateway"

then i did a restart of grafana with npm run server.
i tried making a new dashboard-vizualisation and got again this error:

vintecc-capturegrafanaplugin-datasource | logger=data-proxy-log userId=1 orgId=1 uname=admin path=/api/datasources/proxy/uid/d6912fdd-13fd-442a-b150-7c1f2fbf6616/influx remote_addr=172.19.0.1 referer=“http://localhost:3000/dashboard/new?orgId=1&editPanel=1” t=2023-08-29T14:42:21.7898542Z level=error msg=“Proxy request failed” err=“http: no Host in request URL”
vintecc-capturegrafanaplugin-datasource | logger=context userId=1 orgId=1 uname=admin t=2023-08-29T14:42:21.7899227Z level=error msg=“Request Completed” method=GET path=/api/datasources/proxy/uid/d6912fdd-13fd-442a-b150-7c1f2fbf6616/influx status=502 remote_addr=172.19.0.1 time_ms=1 duration=1.5536ms size=0 referer=“http://localhost:3000/dashboard/new?editPanel=1&orgId=1” handler=/api/datasources/proxy/uid/:uid/*
and a bad gateway error in the console of my browser.

again a huge thank you for helping me out. i’m new to Grafana and docker

8

Did you rebuild your plugin (npm run build) after modifying the plugin.json?