Treeview in a datasource plugin. Can't find the control from html

Grafana Plugin Development
1

We’re creating a Grafana data source. We want to create a treeview component to allow users to select the data sources to show in a graph. To do this, we’re trying to use React and then create a module.js file with both the React component and the Grafana specific code inside.

The problem we’re having is that the HTML for the data source controls doesn’t see to have access to our control. For example, gets interpreted as a generic HTML control.

We’re using Webpack to create the module.js file and other than the Treeview control not being found, the rest of it works fine. It just seems like the connection between the HTML and the available control isn’t hooking up correctly.

Does anyone have any ideas about what we’re doing wrong? I have included some code from assorted files below:

partial/query.editor.html:
<div class=“gf-form”>
<Treeview data=“ctrl.getDefaultData()” />
</div>

webpack.config.js:

const path = require("path");
const nodeExternals = require("webpack-node-externals");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
	context: path.join(__dirname, "src"),
	entry: path.resolve(__dirname, "./src/index.js"),
	externals: [
		"react",
		"react-dom",
		function (context, request, callback) {
			var prefix = "grafana/";
			if (request.indexOf(prefix) === 0) {
				return callback(null, request.substr(prefix.length));
			}
			callback();
		},
	],
	module: {
		rules: [
			{
				exclude: /(node_modules|bower_components)/,
				loader: "babel-loader",
				options: {
					presets: [
						"@babel/flow",
						"@babel/preset-env",
						"@babel/preset-react",
					],
				},
				test: /\.js$/,
			},
			{
				test: /\.css$/,
				use: ["style-loader", "css-loader"],
			},
		],
	},
	optimization: {
		// We do not want to minimize our code.
		minimize: false,
	},
	output: {
		filename: "module.js",
		library: "",
		libraryTarget: "commonjs",
		path: path.resolve(__dirname, "./dist"),
	},
	plugins: [
		new CopyWebpackPlugin([
			{ from: "datasource.js", to: "." },
			{ from: "query_ctrl.js", to: "." },
			{ from: "plugin.json", to: "." },
			{ from: "partials/*", to: "." },
			{ from: "img/*", to: "." },
		]),
	],
	target: "web",
};

module.js:

import { GenericDatasource } from "./datasource";
import { GenericDatasourceQueryCtrl } from "./query_ctrl";
import { Treeview } from "./Treeview/Treeview";
import { Dropdown} from "./Dropdown/Dropdown";

class GenericConfigCtrl {}
GenericConfigCtrl.templateUrl = "./partials/config.html";

class GenericQueryOptionsCtrl {}
GenericQueryOptionsCtrl.templateUrl = "./partials/query.options.html";

class GenericAnnotationsQueryCtrl {}
GenericAnnotationsQueryCtrl.templateUrl = "./partials/annotations.editor.html";

export {
   GenericDatasource as Datasource,
   GenericDatasourceQueryCtrl as QueryCtrl,
   GenericConfigCtrl as ConfigCtrl,
   GenericQueryOptionsCtrl as QueryOptionsCtrl,
   GenericAnnotationsQueryCtrl as AnnotationsQueryCtrl,
   Treeview,
   Dropdown,
};
1 Like