While trying to extend the singlestat plugin for an existing Grafana deployment I realised that I’d better clone the Grafana repo locally to avoid messing with TypeScript and all the tooling.
Everything went fine, webpack compiled fine (with lots of TS errors though) but I just can’t find a way to start the local Grafana front-end using the existing backend.
I looked in the config files, community site, GitHub issues but couldn’t find a way to run a local instance connected to the existing backend, although from what I’ve read there is no reason why it shouldn’t work: it’s just a single-page-app served from a simple http server (which could be local as well) and connecting to a REST API for some requests, while connecting independently to data sources.
Is there a workaround for this kind of setup? I’m trying to avoid running the Grafana server locally, I just need a way to modify some .ts files to test a new plugin.
Any advice would be appreciated, thanks in advance!
webpack compiled fine (with lots of TS errors though)
Strange, no TS errors locally or on our CI. Did you “yarn install” ? what errors?
Everything went fine, webpack compiled fine (with lots of TS errors though) but I just can’t find a way to start the local Grafana front-end using the existing backend.
You cannot do this easily. You have to copy the public folder to the /usr/share/grafana/public folder (need to run v4.6 nightly build for this as we changed asset paths). you also need to restart grafana-server every time you copy the files (or set app_mode=development in grafana.ini)
Actually I did npm install as we have a custom npm registry and yarn wasn’t able the read the registry setting from the .npmrc file. However I am sure the packages installed fine, with the correct version.
Here is some sample output:
[at-loader] Checking finished with 172 errors
[at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3420:13
TS2403: Subsequent variable declarations must have the same type. Variable 'a' must be of type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>', but here has type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
[at-loader] ./node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3421:13
TS2403: Subsequent variable declarations must have the same type. Variable 'abbr' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
Most of them - if not all - are related to type checking but the types are close enough.
This is the last one in the output log:
[at-loader] ./public/app/core/components/colorpicker/ColorPicker.tsx:35:21
TS2345: Argument of type 'Element' is not assignable to parameter of type 'ReactElement<any>'.
Types of property 'type' are incompatible.
Type 'string | ComponentClass<any> | StatelessComponent<any>' is not assignable to type 'string | StatelessComponent<any> | ComponentClass<any>'.
Type 'ComponentClass<any>' is not assignable to type 'string | StatelessComponent<any> | ComponentClass<any>'.
Type 'React.ComponentClass<any>' is not assignable to type 'React.ComponentClass<any>'. Two different types with this name exist, but they are unrelated.
Type 'React.Component<any, React.ComponentState>' is not assignable to type 'React.Component<any, React.ComponentState>'. Two different types with this name exist, but they are unrelated.
Types of property 'render' are incompatible.
Type '() => string | number | false | Element | Element[]' is not assignable to type '() => false | Element'.
Type 'string | number | false | Element | Element[]' is not assignable to type 'false | Element'.
Type 'string' is not assignable to type 'false | Element'.
This is overkill for my needs as we run Grafana in a docker container which is built on another machine (network restrictions) and we only have volumes mounted for the plugins folder.
I was hoping I can set the url for the backend somewhere in the configuration section and probably mess around with a few other settings.
Can you think of a better way of tweaking a built-in plugin for custom needs?
Having missed the whole bit about yarn install, I used npm install, and proceeded to get a huge number of TS errors as well. After clearing this all out and using yarn, things worked better. Package listing looked pretty similar but I didn’t dive any deeper.
