chore(deps): Bump @grafana from 8 to 9.4.3

Signed-off-by: Matthieu MOREL <[email protected]>

.github/dependabot.yml

@@ -17,7 +17,7 @@ updates:
     schedule:
       interval: "weekly"
     groups:
-      @grafana:
+      grafana:
           patterns:
             - "@grafana/*"
     labels:

README.md

@@ -42,13 +42,14 @@ Add to the datasource configuration:
     datasources:
       - name: Prometheus
         type: prometheus
+        uid: prometheus
         access: proxy
         url: http://prometheus-server.mesh-observability
       - name: Kuma
         type: kumahq-kuma-datasource
         url: http://kuma-control-plane.kuma-system:5681
         jsonData:
-          prometheusDataSourceId: "1"
+          prometheusDataSourceUid: "prometheus"
 ```
 
 #### kuma < 1.7.0
@@ -57,13 +58,14 @@ Add to the datasource configuration:
     datasources:
       - name: Prometheus
         type: prometheus
+        uid: prometheus
         access: proxy
         url: http://prometheus-server.kuma-metrics
       - name: Kuma
         type: kumahq-kuma-datasource
         url: http://kuma-control-plane.kuma-system:5681
         jsonData:
-          prometheusDataSourceId: "1"
+          prometheusDataSourceUid: "prometheus"
 ```
 
 ### With `kumactl`

package.json

@@ -13,10 +13,10 @@
   "author": "Charly Molter",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@grafana/data": "8.2.5",
-    "@grafana/toolkit": "8.2.4",
-    "@grafana/runtime": "8.2.5",
-    "@grafana/ui": "8.3.0",
+    "@grafana/data": "9.4.3",
+    "@grafana/runtime": "9.4.3",
+    "@grafana/toolkit": "9.4.3",
+    "@grafana/ui": "9.4.3",
     "@types/lodash": "latest",
     "react-use": "latest"
   },

src/ConfigEditor.tsx

@@ -13,11 +13,11 @@ export function ConfigEditor(props: Props) {
   const allDatasources = [];
   let curDatasource;
   for (let v of all || []) {
-    if (!v.id) {
+    if (!v.uid) {
       continue;
     }
-    const elt = { label: v.name, value: v.id.toString(), text: v.name };
-    if (v.id.toString() === props.options.jsonData.prometheusDataSourceId) {
+    const elt = { label: v.name, value: v.uid, text: v.name };
+    if (v.uid === props.options.jsonData.prometheusDataSourceUid) {
       curDatasource = elt;
     }
     allDatasources.push(elt);
@@ -46,7 +46,7 @@ export function ConfigEditor(props: Props) {
             value={curDatasource}
             onChange={(entry: SelectableValue<string>) => {
               const { onOptionsChange, options } = props;
-              onOptionsChange({ ...options, jsonData: { prometheusDataSourceId: entry.value } });
+              onOptionsChange({ ...options, jsonData: { prometheusDataSourceUid: entry.value } });
             }}
           />
         </InlineField>

src/datasource.ts

@@ -8,10 +8,11 @@ import {
   LoadingState,
   MutableDataFrame,
 } from '@grafana/data';
-import { DataSourceWithBackend, FetchResponse, getBackendSrv, getTemplateSrv } from '@grafana/runtime';
-import { KumaDataSourceOptions, KumaQuery, MeshGraphQType } from './types';
+import { DataSourceWithBackend, getTemplateSrv, toDataQueryError } from '@grafana/runtime';
+import { PrometheusDatasource } from 'prometheus/datasource';
 import { from, Observable } from 'rxjs';
 import { processEdgePromQueries, processGatewayPromQueries, processServicePromQueries, Stats } from './stats';
+import { KumaDataSourceOptions, KumaQuery, MeshGraphQType } from './types';
 
 function assembleNodeDf(serviceStats: Stats): DataFrame {
   const df = new MutableDataFrame();
@@ -131,11 +132,11 @@ function assembleEdgeDf(serviceStats: Stats): DataFrame {
 }
 
 export class DataSource extends DataSourceWithBackend<KumaQuery, KumaDataSourceOptions> {
-  private prometheusDs: string | undefined;
+  private prometheusDs: PrometheusDatasource;
 
   constructor(instanceSettings: DataSourceInstanceSettings<KumaDataSourceOptions>) {
     super(instanceSettings);
-    this.prometheusDs = instanceSettings.jsonData.prometheusDataSourceId;
+    this.prometheusDs = new PrometheusDatasource(instanceSettings.jsonData.prometheusDataSourceUid);
   }
 
   query(request: DataQueryRequest<KumaQuery>): Observable<DataQueryResponse> {
@@ -245,28 +246,11 @@ export class DataSource extends DataSourceWithBackend<KumaQuery, KumaDataSourceO
       return { data: [nodeDf, edgeDf], error: undefined, key: '', state: undefined };
     } catch (e) {
       console.error('failed', e);
-      return { data: [], key: request.requestId, state: LoadingState.Error, error: e };
+      return { data: [], key: request.requestId, state: LoadingState.Error, error: toDataQueryError(e as any) };
     }
   }
 
   private async sendPromQuery(q: string, t: number): Promise<any> {
-    return getBackendSrv()
-      .fetch({
-        url: `/api/datasources/proxy/${this.prometheusDs}/api/v1/query`,
-        method: 'POST',
-        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-        data: { query: q, time: t / 1000 },
-      })
-      .toPromise()
-      .then((res: FetchResponse) => {
-        if (res.status === 200) {
-          if (res.data.status === 'success') {
-            return res.data.data.result;
-          }
-          throw new Error(`Prom query failed body: ${res.data}`);
-        } else {
-          throw new Error(`Failed with status ${res.status} body: ${res.data}`);
-        }
-      });
+    return this.prometheusDs.sendInstantQuery({ query: q, time: t / 1000 });
   }
 }

src/prometheus/datasource.ts

@@ -0,0 +1,78 @@
+import { DataQueryError } from '@grafana/data';
+import { FetchError, FetchResponse, getBackendSrv } from '@grafana/runtime';
+import { of, throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import { InstantQueryParam, PromDataErrorResponse, PromDataSuccessResponse, PromScalarData, PromVectorData } from './types';
+
+export class PrometheusDatasource {
+  private instantQueryURL;
+
+  constructor(uid?: string) {
+    this.instantQueryURL = `/api/datasources/proxy/uid/${uid}/api/v1/query`;
+  }
+
+  async sendInstantQuery(data: InstantQueryParam) {
+    return getBackendSrv()
+      .fetch<PromDataSuccessResponse<PromVectorData | PromScalarData>>({
+        url: this.instantQueryURL,
+        method: 'POST',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        data,
+      }).pipe(
+        catchError((err: FetchError<PromDataErrorResponse<PromVectorData | PromScalarData>>) => {
+          if (err.cancelled) {
+            return of(err);
+          }
+          return throwError(this.handleErrors(err));
+        })
+      )
+      .toPromise()
+      .then((res: FetchResponse<PromDataSuccessResponse<PromVectorData | PromScalarData>> | FetchError<PromDataErrorResponse<PromVectorData | PromScalarData>>) => {
+        if (res.status === 200) {
+          if (res.data.status === 'success') {
+            return res.data.data.result;
+          }
+          throw new Error(`Prom query failed body: ${res.data}`);
+        } else {
+          throw new Error(`Failed with status ${res.status} body: ${res.data}`);
+        }
+      });
+  }
+
+  private handleErrors = (err: any): DataQueryError => {
+    const error: DataQueryError = {
+      message: (err && err.statusText) || 'Unknown error during query transaction. Please check JS console logs.',
+    };
+
+    if (err.data) {
+      if (typeof err.data === 'string') {
+        error.message = err.data;
+      } else if (err.data.error) {
+        error.message = this.safeStringifyValue(err.data.error);
+      }
+    } else if (err.message) {
+      error.message = err.message;
+    } else if (typeof err === 'string') {
+      error.message = err;
+    }
+
+    error.status = err.status;
+    error.statusText = err.statusText;
+
+    return error;
+  };
+
+  private safeStringifyValue = (value: any): string => {
+    if (!value) {
+      return '';
+    }
+
+    try {
+      return JSON.stringify(value, null);
+    } catch (error) {
+      console.error(error);
+    }
+
+    return '';
+  };
+}

src/prometheus/types.ts

@@ -0,0 +1,38 @@
+export interface InstantQueryParam {
+  query: string;
+  time: number;
+}
+
+export interface PromDataSuccessResponse<T = PromData> {
+  status: 'success';
+  data: T;
+}
+
+export interface PromDataErrorResponse<T = PromData> {
+  status: 'error';
+  errorType: string;
+  error: string;
+  data: T;
+}
+
+export type PromData = PromVectorData | PromScalarData;
+
+export interface PromVectorData {
+  resultType: 'vector';
+  result: Array<{
+    metric: PromMetric;
+    value: PromValue;
+  }>;
+}
+
+export interface PromScalarData {
+  resultType: 'scalar';
+  result: PromValue;
+}
+
+export type PromValue = [number, any];
+
+export interface PromMetric {
+  __name__?: string;
+  [index: string]: any;
+}

src/types.ts

@@ -22,7 +22,7 @@ export const defaultQuery: Partial<KumaQuery> = {
  */
 export interface KumaDataSourceOptions extends DataSourceJsonData {
   url?: string;
-  prometheusDataSourceId?: string;
+  prometheusDataSourceUid?: string;
 }
 
 /**

tools/setup_k3d.sh

@@ -13,7 +13,7 @@ curl -s https://gist.githubusercontent.com/lahabana/b0181c680fb7ed63f9f634199226
 echo "Waiting to example apps to get started"
 kubectl wait -n kuma-test --timeout=30s --for condition=Ready --all pods
 
-docker run  -p 3000:3000 -d  --network k3d-kuma-demo -e GF_DEFAULT_APP_MODE=development -v /Users/cmolter/code/kuma-datasource/dist:/var/lib/grafana/plugins --name=grafana grafana/grafana:8.2.2
+docker run  -p 3000:3000 -d  --network k3d-kuma-demo -e GF_DEFAULT_APP_MODE=development -v /Users/cmolter/code/kuma-datasource/dist:/var/lib/grafana/plugins --name=grafana grafana/grafana:9.4.3
 
 
 echo "grafana is exposed on port 3000, control-plane on 5681 and prometheus-server on 9090 interrupt to close these port-forward"