implement testDatasource for ott-vis-datasource and add configurable baseUrl (#1399)

Author: dyc3

packages/ott-vis-common/provisioning/datasources/datasources.yml

@@ -8,3 +8,5 @@ datasources:
     orgId: 1
     version: 1
     editable: true
+    jsonData:
+      baseUrl: "http://localhost:8000"

packages/ott-vis-datasource/package.json

@@ -67,6 +67,7 @@
 		"ott-vis-common": "*",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
+		"rxjs": "7.8.0",
 		"tslib": "2.5.3"
 	}
 }

packages/ott-vis-datasource/provisioning/datasources/datasources.yml

@@ -8,3 +8,5 @@ datasources:
     orgId: 1
     version: 1
     editable: true
+    jsonData:
+      baseUrl: "http://localhost:8000"

packages/ott-vis-datasource/src/components/ConfigEditor.tsx

@@ -7,10 +7,10 @@ interface Props extends DataSourcePluginOptionsEditorProps<MyDataSourceOptions>
 
 export function ConfigEditor(props: Props) {
 	const { onOptionsChange, options } = props;
-	const onPathChange = (event: ChangeEvent<HTMLInputElement>) => {
+	const onBaseUrlChange = (event: ChangeEvent<HTMLInputElement>) => {
 		const jsonData = {
 			...options.jsonData,
-			path: event.target.value,
+			baseUrl: event.target.value,
 		};
 		onOptionsChange({ ...options, jsonData });
 	};
@@ -44,11 +44,11 @@ export function ConfigEditor(props: Props) {
 
 	return (
 		<div className="gf-form-group">
-			<InlineField label="Path" labelWidth={12}>
+			<InlineField label="Base URL" labelWidth={12}>
 				<Input
-					onChange={onPathChange}
-					value={jsonData.path || ""}
-					placeholder="json field returned to frontend"
+					onChange={onBaseUrlChange}
+					value={jsonData.baseUrl || ""}
+					placeholder="URL to ott-collector"
 					width={40}
 				/>
 			</InlineField>

packages/ott-vis-datasource/src/datasource.ts

@@ -9,10 +9,15 @@ import {
 
 import { MyQuery, MyDataSourceOptions } from "./types";
 import type { SystemState } from "ott-vis-common";
+import { getBackendSrv } from "@grafana/runtime";
+import { lastValueFrom } from "rxjs";
 
 export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
+	baseUrl: string;
+
 	constructor(instanceSettings: DataSourceInstanceSettings<MyDataSourceOptions>) {
 		super(instanceSettings);
+		this.baseUrl = instanceSettings.jsonData.baseUrl;
 	}
 
 	async query(options: DataQueryRequest<MyQuery>): Promise<DataQueryResponse> {
@@ -32,7 +37,18 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
 	}
 
 	async testDatasource() {
-		// Implement a health check for your data source.
+		const obs = await getBackendSrv().fetch({
+			url: `${this.baseUrl}/status`,
+		});
+		const resp = await lastValueFrom(obs);
+
+		if (resp.status !== 200) {
+			return {
+				status: "error",
+				message: `Got HTTP status ${resp.status} from server: ${resp.statusText}`,
+			};
+		}
+
 		return {
 			status: "success",
 			message: "Success",

packages/ott-vis-datasource/src/types.ts

@@ -14,7 +14,7 @@ export const DEFAULT_QUERY: Partial<MyQuery> = {
  * These are options configured for each DataSource instance
  */
 export interface MyDataSourceOptions extends DataSourceJsonData {
-	path?: string;
+	baseUrl: string;
 }
 
 /**