Creating Custom Plugins

npm init @grafana/plugin my-plugin

import { PanelPlugin } from '@grafana/data';

export const plugin = new PanelPlugin(MyPanel)
  .setPanelOptions(builder => {
    return builder.addTextInput({
      path: 'myOption',
      name: 'My Option',
      description: 'Description of my option',
    });
  });

import React from 'react';
import { PanelProps } from '@grafana/data';

interface MyPanelOptions {
  myOption: string;
}

export const MyPanel: React.FC<PanelProps<MyPanelOptions>> = ({ options, data }) => {
  return (
    <div>
      <p>My Option Value: {options.myOption}</p>
    </div>
  );
};

{
  "id": "my-datasource",
  "name": "My Data Source",
  "type": "datasource",
  "backend": true,
  "info": {
    "description": "A custom data source plugin",
    "version": "1.0.0"
  }
}

my-datasource/
├── src/
│   ├── module.ts
│   └── datasource.ts
├── dist/
├── plugin.json

class MyDataSource extends DataSourcePlugin<MyQuery, MyDataSourceOptions> {
  async query(options: DataQueryRequest<MyQuery>): Promise<DataQueryResponse> {
    const { targets } = options;
    return targets.map(target => ({
      data: [
        {
          fields: [
            { name: 'time', values: [1, 2, 3] },
            { name: 'value', values: [10, 20, 30] }
          ]
        }
      ]
    }));
  }
}

{
  "name": "My Data Source",
  "id": "my-datasource",
  "type": "datasource",
  "jsonData": {
    "url": "https://api.example.com",
    "timeout": 5000
  }
}

{
  "id": "my-app-plugin",
  "name": "My App Plugin",
  "type": "app",
  "version": "1.0.0",
  "appPlugin": {
    "rootPath": "/a/my-app-plugin"
  }
}

import { AppPlugin } from '@grafana/data';
import { App } from './components/App';

export const plugin = new AppPlugin<AppSettings>()
  .setRootComponent(App);

{
  "pluginId": "my-custom-plugin",
  "name": "My Custom Plugin",
  "description": "A plugin that visualizes custom data sources",
  "version": "2.1.0",
  "backend": true
}

import { Button } from "@grafana/ui";

function MyComponent() {
  return (
    <Button variant="primary" onClick={() => console.log("Clicked!")}>
      Primary Button
    </Button>
  );
}

import { Card, CardBody, CardTitle } from "@grafana/ui";

function MyCard() {
  return (
    <Card>
      <CardTitle>Dashboard Card</CardTitle>
      <CardBody>
        <p>This is a sample card content.</p>
      </CardBody>
    </Card>
  );
}

import { DataQueryRequest, DataQueryResponse } from '@grafana/data';

export class MyDataSource extends DataSourceApi<MyQuery> {
  async query(options: DataQueryRequest<MyQuery>): Promise<DataQueryResponse> {
    const { targets } = options;
    const results = await Promise.all(
      targets.map(async (target) => {
        const response = await this.backendSrv.get(`/api/plugins/my-plugin/resources/data`, {
          params: { query: target.query },
        });
        return {
          refId: target.refId,
          data: response.data,
        };
      })
    );
    return { data: results };
  }
}

import { AnnotationQueryRequest } from '@grafana/data';

export class MyAnnotationPlugin extends DataSourceApi<MyAnnotationQuery> {
  async annotationQuery(options: AnnotationQueryRequest<MyAnnotationQuery>): Promise<AnnotationEvent[]> {
    const response = await this.backendSrv.get(`/api/plugins/my-plugin/resources/annotations`, {
      params: { timeFrom: options.range.from.unix(), timeTo: options.range.to.unix() },
    });
    return response.data.map((event: any) => ({
      ...event,
      time: event.time.unix(),
    }));
  }
}

export class MyMetricFindQueryPlugin extends DataSourceApi<MyQuery> {
  async metricFindQuery(query: string): Promise<MetricFindValue[]> {
    const response = await this.backendSrv.get(`/api/plugins/my-plugin/resources/metrics`, {
      params: { query },
    });
    return response.data.map((item: any) => ({
      text: item.name,
      value: item.id,
    }));
  }
}

mkdir my-grafana-plugin
cd my-grafana-plugin
npm init -y
npm install @grafana/cli @grafana/data @grafana/runtime

// plugin.json
{
  "id": "myorg-myplugin",
  "name": "My Plugin",
  "type": "panel",
  "version": "1.0.0",
  "backend": false,
  "dependencies": {
    "grafanaVersion": "^10.0.0"
  }
}

// src/panel.ts
import { PanelPlugin } from "@grafana/data";

export const plugin = new PanelPlugin(MyPanel)
  .setPanelOptions(builder => {
    return builder.addTextInput({
      path: "showTitle",
      name: "Show Title",
      description: "Toggle title display",
      defaultValue: true
    });
  });

// src/datasource.ts
import { DataSourceApi } from "@grafana/data";

export class MyDataSource extends DataSourceApi<MyQuery> {
  constructor(instanceSettings: DataSourceInstanceSettings) {
    super(instanceSettings);
  }

  async query(options: DataQueryRequest<MyQuery>): Promise<DataQueryResponse> {
    // Query logic here
  }
}

grafana-sign sign --pluginDir ./my-plugin --keyFile /path/to/key.pem --certFile /path/to/cert.pem