feat: Systems data source template

src/datasources/system/README.md

@@ -0,0 +1,6 @@
+# Systemlink System data source
+
+<!--
+    TODO: Write a short description of your plugin and document any extra
+    configuration that is required for development.
+-->

src/datasources/system/SystemDataSource.ts

@@ -0,0 +1,46 @@
+import {
+  DataQueryRequest,
+  DataQueryResponse,
+  DataSourceApi,
+  DataSourceInstanceSettings,
+  MutableDataFrame,
+  FieldType,
+} from '@grafana/data';
+
+import { TestingStatus, getBackendSrv } from '@grafana/runtime';
+
+import { SystemQuery } from './types';
+
+export class SystemDataSource extends DataSourceApi<SystemQuery> {
+  baseUrl: string;
+  constructor(private instanceSettings: DataSourceInstanceSettings) {
+    super(instanceSettings);
+    // TODO: set base path of the service
+    this.baseUrl = this.instanceSettings.url + '/nifoo/v2';
+  }
+
+  async query(options: DataQueryRequest<SystemQuery>): Promise<DataQueryResponse> {
+    const { range } = options;
+    const from = range!.from.valueOf();
+    const to = range!.to.valueOf();
+
+    // Return a constant for each query.
+    const data = options.targets.map((target) => {
+      return new MutableDataFrame({
+        refId: target.refId,
+        fields: [
+          { name: 'Time', values: [from, to], type: FieldType.time },
+          { name: 'Value', values: [target.constant, target.constant], type: FieldType.number },
+        ],
+      });
+    });
+
+    return { data };
+  }
+
+  async testDatasource(): Promise<TestingStatus> {
+    // TODO: Implement a health and authentication check
+    await getBackendSrv().get(this.baseUrl + '/bar');
+    return { status: 'success', message: 'Data source connected and authentication successful!' };
+  }
+}

src/datasources/system/components/SystemQueryEditor.tsx

@@ -0,0 +1,32 @@
+import React, { ChangeEvent } from 'react';
+import { InlineField, Input } from '@grafana/ui';
+import { QueryEditorProps } from '@grafana/data';
+import { SystemDataSource } from '../SystemDataSource';
+import { SystemQuery } from '../types';
+
+type Props = QueryEditorProps<SystemDataSource, SystemQuery>;
+
+export function SystemQueryEditor({ query, onChange, onRunQuery }: Props) {
+  const onQueryTextChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange({ ...query, queryText: event.target.value });
+  };
+
+  const onConstantChange = (event: ChangeEvent<HTMLInputElement>) => {
+    onChange({ ...query, constant: parseFloat(event.target.value) });
+    // executes the query
+    onRunQuery();
+  };
+
+  const { queryText, constant } = query;
+
+  return (
+    <div className="gf-form">
+      <InlineField label="Constant">
+        <Input onChange={onConstantChange} value={constant} width={8} type="number" step="0.1" />
+      </InlineField>
+      <InlineField label="Query Text" labelWidth={16} tooltip="Not used yet">
+        <Input onChange={onQueryTextChange} value={queryText || ''} />
+      </InlineField>
+    </div>
+  );
+}

src/datasources/system/module.ts

@@ -0,0 +1,8 @@
+import { DataSourcePlugin } from '@grafana/data';
+import { SystemDataSource } from './SystemDataSource';
+import { SystemQueryEditor } from './components/SystemQueryEditor';
+import { HttpConfigEditor } from 'core/HttpConfigEditor';
+
+export const plugin = new DataSourcePlugin(SystemDataSource)
+  .setConfigEditor(HttpConfigEditor)
+  .setQueryEditor(SystemQueryEditor);

src/datasources/system/types.ts

@@ -0,0 +1,6 @@
+import { DataQuery } from '@grafana/schema'
+
+export interface SystemQuery extends DataQuery {
+  queryText?: string;
+  constant: number;
+}