Is it possible to reference/include/import a javascript file in the code block

[rantinray]

Hi,

I have some reasonably complex javascript code that I continue to paste into the code block windows, but maintain in separate files to be able to more easily edit. Would it be possible to install these files on the Grafana server and reference/include/import them in the code blocks?

Thanks, -Ray

[mikhail-vl]

@rantinray That's an interesting questions.

@asimonok What do you think?

[asimonok]

@rantinray you can insert your script files in the self hosted grafana to folder: /usr/share/grafana/public and add urls in external resources.

Example of access to static file in browser: [host]/public/[filePath] or upload them to CDN.

[rantinray]

@asimonok Could you provide an example of how to reference .js files from the codeblock window. I have added js files to the directory you suggest, but it is not clear to me how to import and reference functions in those files from a data manipulation panel code block. Any help would be greatly appreciated.

-Ray

[rantinray]

Hi,

Is there any more information on this issue?

-Ray

[asimonok]

@rantinray you need to import scripts through https://github.com/VolkovLabs/volkovlabs-dynamictext-panel. Documentation - https://volkovlabs.io/plugins/volkovlabs-dynamictext-panel/external/ But it's not a recommended approach because we can't guarantee if scripts are loaded or not for the form panel. You have to add checking it yourself.

Here is a dashboard example

{
  "annotations": {
    "list": [
      {
        "builtIn": 1,
        "datasource": {
          "type": "grafana",
          "uid": "-- Grafana --"
        },
        "enable": true,
        "hide": true,
        "iconColor": "rgba(0, 211, 255, 1)",
        "name": "Annotations & Alerts",
        "type": "dashboard"
      }
    ]
  },
  "editable": true,
  "fiscalYearStartMonth": 0,
  "graphTooltip": 0,
  "id": 6,
  "links": [],
  "liveNow": false,
  "panels": [
    {
      "datasource": {
        "type": "marcusolsson-static-datasource",
        "uid": "P1D2C73DC01F2359B"
      },
      "fieldConfig": {
        "defaults": {
          "thresholds": {
            "mode": "absolute",
            "steps": [
              {
                "color": "green",
                "value": null
              },
              {
                "color": "red",
                "value": 80
              }
            ]
          },
          "unitScale": true
        },
        "overrides": []
      },
      "gridPos": {
        "h": 1,
        "w": 1,
        "x": 0,
        "y": 0
      },
      "id": 1,
      "options": {
        "content": "",
        "defaultContent": "The query didn't return any results.",
        "editor": {
          "format": "auto",
          "height": 200,
          "language": "markdown"
        },
        "editors": [],
        "everyRow": false,
        "externalScripts": [
          {
            "id": "3c5dbd79-10a3-4802-a08d-6f127bdd9bea",
            "url": "http://localhost:3000/public/scripts/script.js"
          }
        ],
        "externalStyles": [],
        "helpers": "",
        "styles": ""
      },
      "targets": [
        {
          "datasource": {
            "type": "marcusolsson-static-datasource",
            "uid": "P1D2C73DC01F2359B"
          },
          "frame": {
            "fields": [
              {
                "config": {},
                "name": "1",
                "type": "string",
                "values": [
                  ""
                ]
              }
            ],
            "meta": {}
          },
          "refId": "A"
        }
      ],
      "title": " Load scripts",
      "type": "marcusolsson-dynamictext-panel"
    },
    {
      "datasource": {
        "type": "marcusolsson-static-datasource",
        "uid": "P1D2C73DC01F2359B"
      },
      "gridPos": {
        "h": 8,
        "w": 12,
        "x": 0,
        "y": 1
      },
      "id": 2,
      "options": {
        "buttonGroup": {
          "orientation": "center",
          "size": "md"
        },
        "confirmModal": {
          "body": "Please confirm to update changed values",
          "cancel": "Cancel",
          "columns": {
            "name": "Label",
            "newValue": "New Value",
            "oldValue": "Old Value"
          },
          "confirm": "Confirm",
          "title": "Confirm update request"
        },
        "elementValueChanged": "",
        "elements": [
          {
            "hidden": false,
            "id": "element",
            "labelWidth": 10,
            "section": "",
            "title": "Element",
            "tooltip": "",
            "type": "string",
            "uid": "0ee97eca-e386-41eb-a46c-70e8288eabb6",
            "unit": "",
            "value": ""
          }
        ],
        "initial": {
          "code": "if (window.myScript) {\n  window.myScript();\n}",
          "contentType": "application/json",
          "getPayload": "return {\n  rawSql: '',\n  format: 'table',\n}",
          "highlight": false,
          "highlightColor": "red",
          "method": "-"
        },
        "layout": {
          "orientation": "horizontal",
          "padding": 10,
          "variant": "single"
        },
        "reset": {
          "backgroundColor": "purple",
          "foregroundColor": "yellow",
          "icon": "process",
          "text": "Reset",
          "variant": "hidden"
        },
        "resetAction": {
          "code": "if (response && response.ok) {\n  notifySuccess(['Update', 'Values updated successfully.']);\n  locationService.reload();\n} else {\n  notifyError(['Update', 'An error occured updating values.']);\n}",
          "confirm": false,
          "getPayload": "return {\n  rawSql: '',\n  format: 'table',\n}",
          "mode": "initial"
        },
        "saveDefault": {
          "icon": "save",
          "text": "Save Default",
          "variant": "hidden"
        },
        "submit": {
          "backgroundColor": "purple",
          "foregroundColor": "yellow",
          "icon": "cloud-upload",
          "text": "Submit",
          "variant": "primary"
        },
        "sync": true,
        "update": {
          "code": "if (response && response.ok) {\n  notifySuccess(['Update', 'Values updated successfully.']);\n  locationService.reload();\n} else {\n  notifyError(['Update', 'An error occured updating values.']);\n}",
          "confirm": false,
          "contentType": "application/json",
          "getPayload": "const payload = {};\n\nelements.forEach((element) => {\n  if (!element.value) {\n    return;\n  }\n\n  payload[element.id] = element.value;\n})\n\nreturn payload;\n\n/**\n * Data Source payload\n */ \nreturn {\n  rawSql: '',\n  format: 'table',\n};",
          "method": "-",
          "payloadMode": "all"
        }
      },
      "pluginVersion": "3.6.0",
      "targets": [
        {
          "datasource": {
            "type": "marcusolsson-static-datasource",
            "uid": "P1D2C73DC01F2359B"
          },
          "frame": {
            "fields": [
              {
                "config": {},
                "name": "1",
                "type": "string",
                "values": [
                  "1"
                ]
              }
            ],
            "meta": {}
          },
          "refId": "A"
        }
      ],
      "title": "Form with external scripts",
      "type": "volkovlabs-form-panel"
    }
  ],
  "refresh": "",
  "schemaVersion": 39,
  "tags": [],
  "templating": {
    "list": []
  },
  "time": {
    "from": "now-6h",
    "to": "now"
  },
  "timepicker": {},
  "timezone": "",
  "title": "External scripts usage",
  "uid": "f15f9777-f7fa-4418-a826-c3d3ba4bd448",
  "version": 9,
  "weekStart": ""
}

/usr/share/grafana/public/scripts/script.js

window.myScript = () => {
  alert('hello');
};

Usage in form/data manipulation panel

if (window.myScript) {
  window.myScript();
}