Writing new panel based on .ts example

This is an absolute beginner question and I am aware that the problem probably has a very easy answer. Still I was not able to solve it over the last few days (I am an absolute beginner in JavaScript and Typescript).

What I am trying to do is to create a new panel based on the grafana build-in table panel. The point I am failing at is basically the compilation from .ts to .js

  1. I have copied one of the panels available for download, pasted it in data/plugins and adjusted it (to some extent). The original Panel was written in .js, so I just followed the instructions with the commands

npm install
grunt

which creates a dist folder.
The plugin seems to be working correctly.

  1. I have downloaded the grafana-plugin-template-webpack-typescript-master, which is a Panel containing a module.ts, I have made a small change and compiled it with

npm install
npm run build

The panel is working correctly.

  1. What I actually want to achieve is to take the original table panel and adjust it to my needs. I have copied the files of the table panel from
    public\app\plugins\panel\table
    to
    data\plugins\my_custom_table

All the files are written in .ts. I tried compiling it like the panel in 2) but it failed with unresolved paths


ERROR in D:\Installation\grafana-6.0.1\data\plugins\grafana-plugin-template-webpack-typescript-master\src\types.ts
(2,24): error TS2307: Cannot find module ā€˜@grafana/dataā€™.

ERROR in D:\Installation\grafana-6.0.1\data\plugins\grafana-plugin-template-webpack-typescript-master\src\types.ts
(3,29): error TS2307: Cannot find module ā€˜@grafana/ui/src/components/Table/TableCellBuilderā€™.

ERROR in ./transformers.ts
(1,15): error TS2307: Cannot find module ā€˜lodashā€™.

ERROR in ./transformers.ts
(4,22): error TS2305: Module ā€˜ā€œD:/Installation/grafana-6.0.1/data/plugins/grafana-plugin-template-webpack-typescript-master/node_modules/@types/grafana/app/core/table_modelā€ā€™ has no exported member ā€˜mergeTablesIntoModelā€™.

ERROR in ./transformers.ts
(233,25): error TS2345: Argument of type ā€˜anyā€™ is not assignable to parameter of type ā€˜neverā€™.


and some moreā€¦
Apparently the paths are not correct after copying the plugin to a new location - I tried experimenting changing the paths in the files but could not solve the problem. I was wandering if there is a global path that should be set here for the compilation process?

  1. I also tried downloading the Grafana source code to build it from source as described in ā€œbuilding_from_sourceā€
    I assumed I could copy the table panel from
    \src\github.com\grafana\grafana\public\app\plugins\panel\table
    to
    \src\github.com\grafana\grafana\public\app\plugins\panel\my_custom_table
    adjust it, and build it with the Overall graphana build process.

It worked fine up to the step

yarn start

First I get Errors
ā€œCould not open cafile: EOENTā€

Later (not sure if related to EOENT) the compilation ā€œhungs upā€

I am kind of lost what else I can doā€¦ Any hints would be greatly appreciatedā€¦

Thanks a lot
Agnieszka

2 Likes