Did anything change for panel development lately?

Grafana Plugin Development
1

Hi, I was developing a panel with Reactjs, it was working fine until I upgraded from 6.1.6 to 6.2.1. Since then I had errors during the building process (with webpack) and I didn’t find any solution.

for example

Screenshot%20from%202019-06-05%2014-32-07
Screenshot%20from%202019-06-05%2014-32-071904×328 66.7 KB

I got the same error on an angular based panel

Did you change the way of coding a panel? Because I tried with the combo-panel: here and also got errors (not the same but still)

This is the first year I’m doing web dev so I really I don’t have a clue about what’s going on

Thanks for your attention

PS: when I go back to older versions of grafana, those panels build successfully

2

The newer @grafan/ui types package has requirements for specifying some typings.

I ran into this with another plugin.

In my case it was the the change to Select and SelectOptionItem:

import { Select, SelectOptionItem } from '@grafana/ui';

export interface VariableQueryState {
  selectedQueryType: SelectOptionItem<string>;
  selectedTagType: SelectOptionItem<string>;
}

I had to add the types with the newer module.

If you have an example or repo to look at I may be able to help.

3

hey thanks for your answer but this is not the problem with me.

They changed a class called ReactPanelPlugin for another called PanelPlugin.
They problem is that the parameter’s type also changed

From:
beforeChange

To:
afterChange

I don’t think I can show the project but I made an example before that has the same problem:

EDIT : Only changing the class name didn’t help so I just decided to upgrade all the installed packages and now it works

4

Sorry if i hijack this thread, i`m new and i’m trying only to compile the LA workshop plugin from the github repo. What i’ve done: i’ve cloned this repo https://github.com/grafana/react-plugin-examples and took the workshop panel. Then i’ve changed the module.tsx with the code from here: https://github.com/grafana/workshop-panel/blob/master/src/module.tsx
I’ve changed the ReactPanelPlugin to PanelPlugin and modified the last 3 rows with:

export const plugin = new PanelPlugin(MyPanel);
plugin.setEditor(MyPanelEditorProps);
plugin.setDefaults({ bigText: 'GrafanaCon' });

but when i run yarn run build i get this errors:

ERROR in /var/lib/grafana/plugins/new-workhsop-panel/workshop-panel/src/module.tsx
./module.tsx
[tsl] ERROR in /var/lib/grafana/plugins/new-workhsop-panel/workshop-panel/src/module.tsx(20,39)
TS2339: Property ‘panelData’ does not exist on type ‘Readonly<{ children?: ReactNode; }> & Readonly<PanelProps>’.

ERROR in /var/lib/grafana/plugins/new-workhsop-panel/workshop-panel/src/module.tsx
./module.tsx
[tsl] ERROR in /var/lib/grafana/plugins/new-workhsop-panel/workshop-panel/src/module.tsx(30,10)
TS2322: Type ‘{ width: number; height: number; unit: string; value: any; thresholds: { index: number; value: number; color: string; }; }’ is not assignable to type ‘IntrinsicAttributes & IntrinsicClassAttributes & Pick<Readonly<{ children?: ReactNode; }> & Readonly, “children”> & Partial<Pick<Readonly<{ children?: ReactNode; }> & Readonly<…>, “width” | … 7 more … | “theme”>> & Partial<…>’.
Property ‘unit’ does not exist on type ‘IntrinsicAttributes & IntrinsicClassAttributes & Pick<Readonly<{ children?: ReactNode; }> & Readonly, “children”> & Partial<Pick<Readonly<{ children?: ReactNode; }> & Readonly<…>, “width” | … 7 more … | “theme”>> & Partial<…>’.
error Command failed with exit code 2.

Any hint?

5

we need to update the workshop-panel example, recent @grafana/ui package has breaking changes

6

Hi, I’m experiencing what @execcr experienced and mentioned above. do you know where I can find the UPDATED workshop-panel example from? those links out there are all returning 404

7

These are the new examples, the workshop repo would require quite a bit of time to fix.

and a datasource example with backend: https://github.com/grafana/simple-json-backend-datasource

Thanks!

Brian