Can't add my own developed datasource

Here is the ConfigEditor where some errors happened.

import React, { PureComponent } from 'react';
import {
  DataSourcePluginOptionsEditorProps,
  onUpdateDatasourceJsonDataOption,
  onUpdateDatasourceJsonDataOptionSelect,
  onUpdateDatasourceOption,
  onUpdateDatasourceSecureJsonDataOption,
  SelectableValue,
  updateDatasourcePluginResetOption,
} from '@grafana/data';
import { DataSourceHttpSettings, InlineFormLabel, LegacyForms } from '@grafana/ui';
import { MyOptions, MySecureJsonData } from '../types';

const { Select, Input, SecretFormField } = LegacyForms;

const httpModes = [
  { label: 'GET', value: 'GET' },
  { label: 'POST', value: 'POST' },
] as SelectableValue[];

export type Props = DataSourcePluginOptionsEditorProps<MyOptions>;

export class ConfigEditor extends PureComponent<Props> {
  onResetPassword = () => {
    updateDatasourcePluginResetOption(this.props, 'password');
  };

  render() {
    const { options, onOptionsChange } = this.props;
    const { secureJsonFields } = options;
    const secureJsonData = (options.secureJsonData || {}) as MySecureJsonData;
    return (
      <>
        <DataSourceHttpSettings
          showAccessOptions={true}
          dataSourceConfig={options}
          defaultUrl="http://localhost:8086"
          onChange={onOptionsChange}
        />

        <h3 className="page-heading">InfluxDB Details</h3>
        <div className="gf-form-group">
          <div className="gf-form-inline">
            <div className="gf-form">
              <InlineFormLabel className="width-10">Database</InlineFormLabel>
              <div className="width-20">
                <Input
                  className="width-20"
                  value={options.database || ''}
                  onChange={onUpdateDatasourceOption(this.props, 'database')}
                />
              </div>
            </div>
          </div>
          <div className="gf-form-inline">
            <div className="gf-form">
              <InlineFormLabel className="width-10">User</InlineFormLabel>
              <div className="width-10">
                <Input
                  className="width-20"
                  value={options.user || ''}
                  onChange={onUpdateDatasourceOption(this.props, 'user')}
                />
              </div>
            </div>
          </div>
          <div className="gf-form-inline">
            <div className="gf-form">
              <SecretFormField
                isConfigured={(secureJsonFields && secureJsonFields.password) as boolean}
                value={secureJsonData.password || ''}
                label="Password"
                labelWidth={10}
                inputWidth={20}
                onReset={this.onResetPassword}
                onChange={onUpdateDatasourceSecureJsonDataOption(this.props, 'password')}
              />
            </div>
          </div>
          <div className="gf-form-inline">
            <div className="gf-form">
              <InlineFormLabel
                className="width-10"
                tooltip="You can use either GET or POST HTTP method to query your InfluxDB database. The POST
          method allows you to perform heavy requests (with a lots of WHERE clause) while the GET method
          will restrict you and return an error if the query is too large."
              >
                HTTP Method
              </InlineFormLabel>
              <Select
                className="width-10"
                value={httpModes.find(httpMode => httpMode.value === options.jsonData.httpMode)}
                options={httpModes}
                defaultValue={options.jsonData.httpMode}
                onChange={onUpdateDatasourceJsonDataOptionSelect(this.props, 'httpMode')}
              />
            </div>
          </div>
        </div>
        <div className="gf-form-group">
          <div className="grafana-info-box">
            <h5>Database Access</h5>
            <p>
              Setting the database for this datasource does not deny access to other databases. The InfluxDB query
              syntax allows switching the database in the query. For example:
              <code>SHOW MEASUREMENTS ON _internal</code> or <code>SELECT * FROM "_internal".."database" LIMIT 10</code>
              <br />
              <br />
              To support data isolation and security, make sure appropriate permissions are configured in InfluxDB.
            </p>
          </div>
        </div>
        <div className="gf-form-group">
          <div className="gf-form-inline">
            <div className="gf-form">
              <InlineFormLabel
                className="width-10"
                tooltip="A lower limit for the auto group by time interval. Recommended to be set to write frequency,
				for example 1m if your data is written every minute."
              >
                Min time interval
              </InlineFormLabel>
              <div className="width-10">
                <Input
                  className="width-10"
                  placeholder="10s"
                  value={options.jsonData.timeInterval || ''}
                  onChange={onUpdateDatasourceJsonDataOption(this.props, 'timeInterval')}
                />
              </div>
            </div>
          </div>
        </div>
      </>
    );
  }
}

export default ConfigEditor;

when I add this datasource plugin. I get the error below


the error happened probably because of const { Select, Input, SecretFormField } = LegacyForms;

Hello @zhutianci123456

Please check if you have ‘@grafana/ui’ in your package.json in ‘devDependencies’ .

Overall it looks it should be Select in LegacyForms module.

Regards,
V.

I have exactly the same problem but with different field:

I’m using project generated directly from https://github.com/grafana/simple-json-datasource (but also tried to download and run without changes).

Package.json is

{
      "name": "simple-datasource",
      "version": "1.0.0",
      "description": "Grafana Data Source Plugin Template",
      "scripts": {
        "build": "grafana-toolkit plugin:build",
        "test": "grafana-toolkit plugin:test",
        "dev": "grafana-toolkit plugin:dev",
        "watch": "grafana-toolkit plugin:dev --watch"
      },
      "author": "Grafana Labs",
      "license": "Apache-2.0",
      "devDependencies": {
        "@grafana/data": "next",
        "@grafana/toolkit": "next",
        "@grafana/ui": "next",
        "@types/lodash": "latest"
      },
      "engines": {
        "node": ">=12 <13"
      }
    }
1 Like

It occurs the problem is here:

“@grafana/data”: “next”,
“@grafana/toolkit”: “next”,
“@grafana/ui”: “next”,

The version “next” seems to be beta for Grafana 7, so, basically, the template doesn’t work with current Grafana. I’ve changed version to:

"@grafana/data": "^6.7.3",
"@grafana/toolkit": "^6.7.3",
"@grafana/ui": "^6.7.3",

and the import to:

// import { LegacyForms } from '@grafana/ui';
// const { SecretFormField, FormField } = LegacyForms;
import { SecretFormField, FormField } from '@grafana/ui';
2 Likes