Implementing a DataSource front end with react - I'm in generic hell

Grafana Plugin Development
1

I’m working on a new datasource with a go backend and a react front end. From the perspectiver of the backend api github.com/grafana/grafana-plugin-model/go/datasource I don’t really appear to have access to the user or basicAuthUser through either the Datasource nor the DataSourceRequest. This perplexes me - these fields are making it into the sqlite (grafana.db) database just fine. So instead, I’ve taken up to storing my username in jsonData instead.

That works fine, but it leads to a question. I defined a couple of

export interface MyDataSourceJsonData extends DataSourceJsonData {
    user: string;
}

export interface MyDataSourceSecureJsonData extends DataSourceJsonData {
    password: string;
}

Then I declare my datasource editor with:

type Props = DataSourcePluginOptionsEditorProps<MyDataSourceJsonData, MyDataSourceSecureJsonData>;

export class MyConfigEditor extends React.PureComponent<Props, State> {
    /* guts */
}

That causes the typescript side to refuses to compile:

  [tsl] ERROR in module.ts(7,44)
        TS2344: Type 'MyDatasource' does not satisfy the constraint 'DataSourceApi<MyQuery, MyDataSourceJsonData>'.
    Types of property 'components' are incompatible.

The problem seems to be that it’s expecting there is no definition, base class, or interface for the secure data, S - it’s simply {}

interface DataSourceSettings<T extends DataSourceJsonData = DataSourceJsonData, S = {}>

I can get it to compile if I basically disable type checking in module.ts as follows:

export const plugin = new DataSourcePlugin<AlcDatasource, AlcQuery, any>(AlcDatasource)
    .setConfigEditor(AlcConfigEditor)
    .setQueryCtrl(AlcQueryEditor);

but again that’s really not ideal - why have typescript if it doesn’t work unless you disable type checking here?


  [tsl] ERROR in module.ts(7,44)
        TS2344: Type 'MyDatasource' does not satisfy the constraint 'DataSourceApi<MyQuery, MyDataSourceJsonData>'.
    Types of property 'components' are incompatible.


    Type 'typeof MyConfigEditor' is not assignable to type 'ComponentClass<DataSourcePluginOptionsEditorProps<any, {}>, any>'.
      Types of parameters 'props' and 'props' are incompatible.

In order to get everything to compile without using what I have to do is to leave both MyDataSourceJsonData and MyDataSourceSecureJsonData as empty interfaces. Of course, what’s the point of that if you can’t store any data :slight_smile: To reiterate, the whole problem is in .setConfigEditor() which has a prototype like this:

setConfigEditor(editor: ComponentType<DataSourcePluginOptionsEditorProps<TOptions>>):

where

export interface DataSourcePluginOptionsEditorProps<JSONData = DataSourceJsonData, SecureJSONData = {}

TOptions extends DataSourceJsonData

I’m an experienced developer, including in other languages that make heavy use of generic types, but it’s still hard to not get lost in all of the above. I’ve asked a few questions on here and on slack, and I’m not entirely sure anybody else is out there, or at least anybody working at this level … am I simply blazing a trail here?

–Chris