Plugins: add a bundle plugins folder (#20850)

2020-04-07 00:04:24 -07:00
parent 553f50e4f5
commit 03e3ddcbdb
25 changed files with 411 additions and 10 deletions
@@ -0,0 +1,69 @@
+// Libraries
+import React, { PureComponent } from 'react';
+
+// Types
+import { InputOptions } from './types';
+
+import { TableInputCSV } from '@grafana/ui';
+import { DataSourcePluginOptionsEditorProps, DataFrame, MutableDataFrame } from '@grafana/data';
+import { dataFrameToCSV } from './utils';
+
+interface Props extends DataSourcePluginOptionsEditorProps<InputOptions> {}
+
+interface State {
+  text: string;
+}
+
+export class InputConfigEditor extends PureComponent<Props, State> {
+  state = {
+    text: '',
+  };
+
+  componentDidMount() {
+    const { options } = this.props;
+    if (options.jsonData.data) {
+      const text = dataFrameToCSV(options.jsonData.data);
+      this.setState({ text });
+    }
+  }
+
+  onSeriesParsed = (data: DataFrame[], text: string) => {
+    const { options, onOptionsChange } = this.props;
+    if (!data) {
+      data = [new MutableDataFrame()];
+    }
+    // data is a property on 'jsonData'
+    const jsonData = {
+      ...options.jsonData,
+      data,
+    };
+
+    onOptionsChange({
+      ...options,
+      jsonData,
+    });
+    this.setState({ text });
+  };
+
+  render() {
+    const { text } = this.state;
+    return (
+      <div>
+        <div className="gf-form-group">
+          <h4>Shared Data:</h4>
+          <span>Enter CSV</span>
+          <TableInputCSV text={text} onSeriesParsed={this.onSeriesParsed} width={'100%'} height={200} />
+        </div>
+
+        <div className="grafana-info-box">
+          This data is stored in the datasource json and is returned to every user in the initial request for any
+          datasource. This is an appropriate place to enter a few values. Large datasets will perform better in other
+          datasources.
+          <br />
+          <br />
+          <b>NOTE:</b> Changes to this data will only be reflected after a browser refresh.
+        </div>
+      </div>
+    );
+  }
+}
@@ -0,0 +1,55 @@
+import InputDatasource, { describeDataFrame } from './InputDatasource';
+import { InputOptions, InputQuery } from './types';
+import {
+  DataFrame,
+  DataFrameDTO,
+  DataSourceInstanceSettings,
+  MutableDataFrame,
+  PluginMeta,
+  readCSV,
+} from '@grafana/data';
+
+import { getQueryOptions } from './testHelpers';
+
+describe('InputDatasource', () => {
+  const data = readCSV('a,b,c\n1,2,3\n4,5,6');
+  const instanceSettings: DataSourceInstanceSettings<InputOptions> = {
+    id: 1,
+    type: 'x',
+    name: 'xxx',
+    meta: {} as PluginMeta,
+    jsonData: {
+      data,
+    },
+  };
+
+  describe('when querying', () => {
+    test('should return the saved data with a query', () => {
+      const ds = new InputDatasource(instanceSettings);
+      const options = getQueryOptions<InputQuery>({
+        targets: [{ refId: 'Z' }],
+      });
+
+      return ds.query(options).then(rsp => {
+        expect(rsp.data.length).toBe(1);
+
+        const series: DataFrame = rsp.data[0];
+        expect(series.refId).toBe('Z');
+        expect(series.fields[0].values).toEqual(data[0].fields[0].values);
+      });
+    });
+  });
+
+  test('DataFrame descriptions', () => {
+    expect(describeDataFrame([])).toEqual('');
+    expect(describeDataFrame((null as unknown) as Array<DataFrameDTO | DataFrame>)).toEqual('');
+    expect(
+      describeDataFrame([
+        new MutableDataFrame({
+          name: 'x',
+          fields: [{ name: 'a' }],
+        }),
+      ])
+    ).toEqual('1 Fields, 0 Rows');
+  });
+});
@@ -0,0 +1,123 @@
+// Types
+import {
+  DataQueryRequest,
+  DataQueryResponse,
+  DataSourceApi,
+  DataSourceInstanceSettings,
+  MetricFindValue,
+  DataFrame,
+  DataFrameDTO,
+  toDataFrame,
+} from '@grafana/data';
+
+import { InputQuery, InputOptions } from './types';
+
+export class InputDatasource extends DataSourceApi<InputQuery, InputOptions> {
+  data: DataFrame[] = [];
+
+  constructor(instanceSettings: DataSourceInstanceSettings<InputOptions>) {
+    super(instanceSettings);
+
+    if (instanceSettings.jsonData.data) {
+      this.data = instanceSettings.jsonData.data.map(v => toDataFrame(v));
+    }
+  }
+
+  /**
+   * Convert a query to a simple text string
+   */
+  getQueryDisplayText(query: InputQuery): string {
+    if (query.data) {
+      return 'Panel Data: ' + describeDataFrame(query.data);
+    }
+    return `Shared Data From: ${this.name} (${describeDataFrame(this.data)})`;
+  }
+
+  metricFindQuery(query: string, options?: any): Promise<MetricFindValue[]> {
+    return new Promise((resolve, reject) => {
+      const names = [];
+      for (const series of this.data) {
+        for (const field of series.fields) {
+          // TODO, match query/options?
+          names.push({
+            text: field.name,
+          });
+        }
+      }
+      resolve(names);
+    });
+  }
+
+  query(options: DataQueryRequest<InputQuery>): Promise<DataQueryResponse> {
+    const results: DataFrame[] = [];
+    for (const query of options.targets) {
+      if (query.hide) {
+        continue;
+      }
+      let data = this.data;
+      if (query.data) {
+        data = query.data.map(v => toDataFrame(v));
+      }
+      for (let i = 0; i < data.length; i++) {
+        results.push({
+          ...data[i],
+          refId: query.refId,
+        });
+      }
+    }
+    return Promise.resolve({ data: results });
+  }
+
+  testDatasource() {
+    return new Promise((resolve, reject) => {
+      let rowCount = 0;
+      let info = `${this.data.length} Series:`;
+      for (const series of this.data) {
+        const length = series.length;
+        info += ` [${series.fields.length} Fields, ${length} Rows]`;
+        rowCount += length;
+      }
+
+      if (rowCount > 0) {
+        resolve({
+          status: 'success',
+          message: info,
+        });
+      }
+      reject({
+        status: 'error',
+        message: 'No Data Entered',
+      });
+    });
+  }
+}
+
+function getLength(data?: DataFrameDTO | DataFrame) {
+  if (!data || !data.fields || !data.fields.length) {
+    return 0;
+  }
+  if (data.hasOwnProperty('length')) {
+    return (data as DataFrame).length;
+  }
+  return data.fields[0].values!.length;
+}
+
+export function describeDataFrame(data: Array<DataFrameDTO | DataFrame>): string {
+  if (!data || !data.length) {
+    return '';
+  }
+  if (data.length > 1) {
+    const count = data.reduce((acc, series) => {
+      return acc + getLength(series);
+    }, 0);
+    return `${data.length} Series, ${count} Rows`;
+  }
+  const series = data[0];
+  if (!series.fields) {
+    return 'Missing Fields';
+  }
+  const length = getLength(series);
+  return `${series.fields.length} Fields, ${length} Rows`;
+}
+
+export default InputDatasource;
@@ -0,0 +1,90 @@
+// Libraries
+import React, { PureComponent } from 'react';
+
+// Types
+import { InputDatasource, describeDataFrame } from './InputDatasource';
+import { InputQuery, InputOptions } from './types';
+
+import { FormLabel, LegacyForms, TableInputCSV } from '@grafana/ui';
+const { Select } = LegacyForms;
+import { DataFrame, toCSV, SelectableValue, MutableDataFrame, QueryEditorProps } from '@grafana/data';
+
+import { dataFrameToCSV } from './utils';
+
+type Props = QueryEditorProps<InputDatasource, InputQuery, InputOptions>;
+
+const options = [
+  { value: 'panel', label: 'Panel', description: 'Save data in the panel configuration.' },
+  { value: 'shared', label: 'Shared', description: 'Save data in the shared datasource object.' },
+];
+
+interface State {
+  text: string;
+}
+
+export class InputQueryEditor extends PureComponent<Props, State> {
+  state = {
+    text: '',
+  };
+
+  onComponentDidMount() {
+    const { query } = this.props;
+    const text = dataFrameToCSV(query.data);
+    this.setState({ text });
+  }
+
+  onSourceChange = (item: SelectableValue<string>) => {
+    const { datasource, query, onChange, onRunQuery } = this.props;
+    let data: DataFrame[] | undefined = undefined;
+    if (item.value === 'panel') {
+      if (query.data) {
+        return;
+      }
+      data = [...datasource.data];
+      if (!data) {
+        data = [new MutableDataFrame()];
+      }
+      this.setState({ text: toCSV(data) });
+    }
+    onChange({ ...query, data });
+    onRunQuery();
+  };
+
+  onSeriesParsed = (data: DataFrame[], text: string) => {
+    const { query, onChange, onRunQuery } = this.props;
+    this.setState({ text });
+    if (!data) {
+      data = [new MutableDataFrame()];
+    }
+    onChange({ ...query, data });
+    onRunQuery();
+  };
+
+  render() {
+    const { datasource, query } = this.props;
+    const { id, name } = datasource;
+    const { text } = this.state;
+
+    const selected = query.data ? options[0] : options[1];
+    return (
+      <div>
+        <div className="gf-form">
+          <FormLabel width={4}>Data</FormLabel>
+          <Select width={6} options={options} value={selected} onChange={this.onSourceChange} />
+
+          <div className="btn btn-link">
+            {query.data ? (
+              describeDataFrame(query.data)
+            ) : (
+              <a href={`datasources/edit/${id}/`}>
+                {name}: {describeDataFrame(datasource.data)} &nbsp;&nbsp;
+                <i className="fa fa-pencil-square-o" />
+              </a>
+            )}
+          </div>
+        </div>
+        {query.data && <TableInputCSV text={text} onSeriesParsed={this.onSeriesParsed} width={'100%'} height={200} />}
+      </div>
+    );
+  }
+}
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
+<defs>
+<style>.cls-1{fill:url(#linear-gradient);}</style>
+<linearGradient id="linear-gradient" x1="50" y1="101.02" x2="50" y2="4.05" gradientTransform="matrix(1, 0, 0, -1, 0, 102)" gradientUnits="userSpaceOnUse">
+<stop offset="0" stop-color="#70b0df"/>
+<stop offset="0.5" stop-color="#1b81c5"/>
+<stop offset="1" stop-color="#4a98ce"/>
+</linearGradient>
+</defs>
+<g><path class="cls-1" d="M889.5,814.1h-201v50.2H701c20.8,0,37.7,16.9,37.7,37.7c0,20.8-16.9,37.7-37.7,37.7H600.5c-20.8,0-37.7-16.9-37.7-37.7c0-20.8,16.9-37.7,37.7-37.7h12.6v-50.2H110.5C55,814.1,10,769.1,10,713.6V286.5c0-55.5,45-100.5,100.5-100.5h502.6v-50.3h-12.6c-20.8,0-37.7-16.9-37.7-37.7c0-20.8,16.9-37.7,37.7-37.7H701c20.8,0,37.7,16.9,37.7,37.7c0,20.8-16.9,37.7-37.7,37.7h-12.6v50.3h201c55.5,0,100.5,45,100.5,100.5v427.2C990,769.1,945,814.1,889.5,814.1z M562.8,738.8h50.3V261.3h-50.3 M688.5,261.3v477.5h50.3V261.3H688.5z"/></g>
+</svg>
@@ -0,0 +1,11 @@
+import { DataSourcePlugin } from '@grafana/data';
+
+import { InputDatasource } from './InputDatasource';
+
+import { InputQueryEditor } from './InputQueryEditor';
+import { InputConfigEditor } from './InputConfigEditor';
+import { InputOptions, InputQuery } from './types';
+
+export const plugin = new DataSourcePlugin<InputDatasource, InputQuery, InputOptions>(InputDatasource)
+  .setConfigEditor(InputConfigEditor)
+  .setQueryEditor(InputQueryEditor);
@@ -0,0 +1,20 @@
+{
+  "type": "datasource",
+  "name": "Direct Input",
+  "id": "input",
+  "state": "alpha",
+
+  "metrics": true,
+
+  "info": {
+    "description": "Data source that supports manual table & CSV input",
+    "author": {
+      "name": "Grafana Project",
+      "url": "https://grafana.com"
+    },
+    "logos": {
+      "small": "img/input.svg",
+      "large": "img/input.svg"
+    }
+  }
+}
@@ -0,0 +1,28 @@
+import { DataQueryRequest, DataQuery, CoreApp } from '@grafana/data';
+import { dateTime } from '@grafana/data';
+
+export function getQueryOptions<TQuery extends DataQuery>(
+  options: Partial<DataQueryRequest<TQuery>>
+): DataQueryRequest<TQuery> {
+  const raw = { from: 'now', to: 'now-1h' };
+  const range = { from: dateTime(), to: dateTime(), raw: raw };
+
+  const defaults: DataQueryRequest<TQuery> = {
+    requestId: 'TEST',
+    app: CoreApp.Dashboard,
+    range: range,
+    targets: [],
+    scopedVars: {},
+    timezone: 'browser',
+    panelId: 1,
+    dashboardId: 1,
+    interval: '60s',
+    intervalMs: 60000,
+    maxDataPoints: 500,
+    startTime: 0,
+  };
+
+  Object.assign(defaults, options);
+
+  return defaults;
+}
@@ -0,0 +1,11 @@
+import { DataQuery, DataSourceJsonData, DataFrameDTO } from '@grafana/data';
+
+export interface InputQuery extends DataQuery {
+  // Data saved in the panel
+  data?: DataFrameDTO[];
+}
+
+export interface InputOptions extends DataSourceJsonData {
+  // Saved in the datasource and download with bootData
+  data?: DataFrameDTO[];
+}
@@ -0,0 +1,8 @@
+import { toDataFrame, DataFrameDTO, toCSV } from '@grafana/data';
+
+export function dataFrameToCSV(dto?: DataFrameDTO[]) {
+  if (!dto || !dto.length) {
+    return '';
+  }
+  return toCSV(dto.map(v => toDataFrame(v)));
+}