Using Grafana API in OSJS

[miladhashemi]

Hi,
I have plan to use grafana api in osjs/widget.
Because of CORS policy I can't use it directly in client side.
What is your suggestion to use grafana api in osjs?
Is it need to use server service provider to handle this kind of problem or should be addressed in other ways?

[andersevenrud]

Try using a proxy on the server:

https://manual.os-js.org/config/#proxies

[andersevenrud]

Example:

  proxy: [{
    source: '/grafana',
    destination: 'http://localhost:8080',
  }],

[miladhashemi]

Then, Is it possible to call grafana API directly in widget?

[andersevenrud]

Not directly, via the OS.js server as a proxy request.

[andersevenrud]

If you can't control the policies on the grafana server, this is what you need. If you run OS.js on a reverse-proxy server like nginx, you can just set up the proxy there instead.

[miladhashemi]

I thought, it must be like swiftstack, that writing an adapter was helpful.
I think I need something like VFSServiceProvider,which present some method. Then we could write our custom adapters that implement must implement VFSServiceProvider methods. At the last application like filemanager uses registered adapter.

Here I want to show grafana data on widget as a chart. I need to call method in widget for getting information from grafana.

You say if I add grafana as proxy then I can call its api?

[andersevenrud]

You say if I add grafana as proxy then I can call its api?

Yes, then you can call the HTTP APIs in your client via your proxy just using an URL likke /mygrafana/api/users.

[miladhashemi]

Thanks a lot.

[andersevenrud]

No problem! Closing the issue, but feel free to keep commenting if you run into something.

[miladhashemi]

I defined bellow code in servers's config, but I'm not certain how to use it in widget(I tested in widget by fetch, but already i get cors policy error). How must i use api in widget?

proxy: [{
    source: 'http://zdrive.ir:3000',
    destination: 'http://localhost:8000/',
    options: {
      proxyReqOptDecorator: function(proxyReqOpts, srcReq) {
        proxyReqOpts.headers = {'Authorization': `Bearer ${token}`};
        return proxyReqOpts;
      }
    }
  }]

[andersevenrud]

You have to define the proxy like in my example:

  proxy: [{
    source: '/grafana',
    destination: 'http://localhost:8080',
  }],

This allows you just to use /grafana as the URL in your widget (or if you need an absolute URL do core.url('/grafana').

[miladhashemi]

Oh, shame on me. You are right. first I must define my source path and use it in widget then proxy converts it to destination path. Such a huge mistake :'|

[andersevenrud]

No worries :) Hopefully this will solve your issue!