Finding Path to my plugin's directory [ts]

Grafana Plugin Development
1

I’ve been creating a plugin based on the original table plugin and need to point the editor and column styles templates to the current directory rather than “public/app/plugins/panel/table/”.

How do I find the directory from within typescript? This will eventually be placed into /var/lib/grafana/plugins/, but I don’t want to assume that in the future.

1 Like
2

The path is from the Grafana root. The plugin id that is defined in the plugin.json file is used:

public/plugins/<plugin-id>

See here for an example with the editor partial:

http://docs.grafana.org/plugins/developing/defaults-and-editor-mode/#plugin-defaults-and-editor-mode

1 Like
3

Looking at the link, the table plugin is done slightly differently. In the module.ts file there are the lines (snipped for brevity):

import {tablePanelEditor} from './editor';
import {columnOptionsTab} from './column_options';
...
this.addEditorTab('Options', tablePanelEditor, 2);
this.addEditorTab('Column Styles', columnOptionsTab, 3);

and both editor.ts and column_options.ts respectively contain something to the effect of:

export function tablePanelEditor($q, uiSegmentSrv) {
  'use strict';
   return {
     restrict: 'E',
     scope: true,
     templateUrl: 'public/plugins/windstream-table2-panel/editor.html',
     controller: TablePanelEditorCtrl,
};

Here I assume that its the templateUrl that needs changing. I’ve set it in the way that I feel is proper, but still am unable to pull up the tabs. Originally the html files are in the project directory, do I need to move everything to a “src” directory and then the templates down to the partials?

4

You shouldn’t need to add files to src directory if you do not want to. Grafana will serve files from the root or from the dist subdirectory if it exists. public/plugins/windstream-table2-panel is the root of your plugin directory or /dist if it exists.

Just to double check, windstream-table2-panel matches the id field in the plugin.json file and editor.html is in the root of your plugin directory?

Below the url path to the worldmap plugin in Chrome Dev Tools. It has plugin id grafana-worldmap-panel.

5

Thanks for the tip. The former comment fixed my original problem. The new problem was me just being an idiot and missing that transformer.ts was pulling files from a relative path. (Your tip about looking at the sources helped me find the error). Changed the paths to absolute and now everything is good.

Thanks again @daniellee,
Darkmyr

1 Like