From 6e3c79e569669a0dc69de50bd7f2173730d0f759 Mon Sep 17 00:00:00 2001 From: ggracechoi <52022191+ggracechoi@users.noreply.github.com> Date: Wed, 19 Jul 2023 17:23:43 -0500 Subject: [PATCH] feat: Systems data source template (#3) Co-authored-by: Carson Moore --- src/datasources/system/README.md | 8 ++++ src/datasources/system/SystemDataSource.ts | 46 +++++++++++++++++++ .../system/components/SystemQueryEditor.tsx | 32 +++++++++++++ src/datasources/system/img/logo-ni.svg | 11 +++++ src/datasources/system/module.ts | 8 ++++ src/datasources/system/types.ts | 6 +++ 6 files changed, 111 insertions(+) create mode 100644 src/datasources/system/README.md create mode 100644 src/datasources/system/SystemDataSource.ts create mode 100644 src/datasources/system/components/SystemQueryEditor.tsx create mode 100644 src/datasources/system/img/logo-ni.svg create mode 100644 src/datasources/system/module.ts create mode 100644 src/datasources/system/types.ts diff --git a/src/datasources/system/README.md b/src/datasources/system/README.md new file mode 100644 index 0000000..a6f8da1 --- /dev/null +++ b/src/datasources/system/README.md @@ -0,0 +1,8 @@ +# Systemlink System data source + +This is a plugin for the Systems Management service. It allows you to: +- Populate a + [query variable](https://grafana.com/docs/grafana/latest/dashboards/variables/add-template-variables/#add-a-query-variable) + with a list of systems connected to the server +- Visualize system connection status counts on a dashboard +- Visualize system metadata on a dashboard \ No newline at end of file diff --git a/src/datasources/system/SystemDataSource.ts b/src/datasources/system/SystemDataSource.ts new file mode 100644 index 0000000..e2f0695 --- /dev/null +++ b/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 { + 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): Promise { + 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 { + // TODO: Implement a health and authentication check + await getBackendSrv().get(this.baseUrl + '/bar'); + return { status: 'success', message: 'Data source connected and authentication successful!' }; + } +} diff --git a/src/datasources/system/components/SystemQueryEditor.tsx b/src/datasources/system/components/SystemQueryEditor.tsx new file mode 100644 index 0000000..67bcf8d --- /dev/null +++ b/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; + +export function SystemQueryEditor({ query, onChange, onRunQuery }: Props) { + const onQueryTextChange = (event: ChangeEvent) => { + onChange({ ...query, queryText: event.target.value }); + }; + + const onConstantChange = (event: ChangeEvent) => { + onChange({ ...query, constant: parseFloat(event.target.value) }); + // executes the query + onRunQuery(); + }; + + const { queryText, constant } = query; + + return ( +
+ + + + + + +
+ ); +} diff --git a/src/datasources/system/img/logo-ni.svg b/src/datasources/system/img/logo-ni.svg new file mode 100644 index 0000000..76f8758 --- /dev/null +++ b/src/datasources/system/img/logo-ni.svg @@ -0,0 +1,11 @@ + + + 9B441361-9BF9-4E57-A772-8A5F7846467E + + + + + + \ No newline at end of file diff --git a/src/datasources/system/module.ts b/src/datasources/system/module.ts new file mode 100644 index 0000000..0a03421 --- /dev/null +++ b/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); diff --git a/src/datasources/system/types.ts b/src/datasources/system/types.ts new file mode 100644 index 0000000..d657b93 --- /dev/null +++ b/src/datasources/system/types.ts @@ -0,0 +1,6 @@ +import { DataQuery } from '@grafana/schema' + +export interface SystemQuery extends DataQuery { + queryText?: string; + constant: number; +}