JS code into Panel

Grafana
1

I am interested in creating a panel that will allow me to write js code in it.
I tried to use Data Manipulation and dynamic text but it is not possible to add an import there.
Is there another plugin that can help me?

2

Which library are you trying to import.
Also what are you trying to solve

3

@yosiasz
I would like to create a server request within my existing panel.
I am interested in grafana server requests to fish a request that will update me other existing panel.
I imported import axios from "axios"
And I got the error:
Uncaught (in promise) SyntaxError: Cannot use import statement outside a module
Is there another way to do this?

4

@yosiasz
I succeeded

const axiosScript = document.createElement('script');
axiosScript.src = 'https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js';
document.head.appendChild(axiosScript);

and now I creating a example API request :

axiosScript.onload = function () {
  axios.interceptors.request.use(config => {
    config.auth = {
      username: 'user-name',
      password: 'password'
    };
    return config;
  });
  axios.get('http://user-name:password@host.docker.internal:3000/api/folders')
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.error(error);
    });
};

but I get error:

Access to XMLHttpRequest at 'http://user-name:pasword@host.docker.internal:3000/api/folders' 
from origin 'http://localhost:3000'  has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' 
header is present on the requested resource.

someone can help me?

2 Likes
5

what do you get when you run

http://user-name:password@host.docker.internal:3000/api/folders using curl

6

@yosiasz
how can I using with curl into pannel ?
what did you mean?
Thank you for responding.

7
8

@yosiasz
I understood what Curl is, should I make a curl request instead of a url?
is there a way to make a curl request from panel? in JS? how?
what between Curl and url?
Thank you

9

What do you get when you run this?
curl http://user-name:password@host.docker.internal:3000/api/folders

10

@gitigershtenkoren Direct imports are not supported in the Dynamic Text panel. You can use external scripts instead as described in the documentation:

You can also use fetch instead of axios, which supported out of the box.

I believe you are confusing server and client side. host.docker.internal won’t work, because panel’s JS run on the client side, it’s not on the server side.

1 Like