Encode custom query parameters

Fixes #15

Author: marcusolsson

src/api.ts

@@ -4,30 +4,30 @@ import cache from 'memory-cache';
 export default class Api {
   cache: any;
   baseUrl: string;
-  params: string;
+  params: URLSearchParams;
   lastCacheDuration: number | undefined;
 
   constructor(baseUrl: string, params: string) {
     this.baseUrl = baseUrl;
-    this.params = params;
+    this.params = new URLSearchParams('?' + params);
     this.cache = new cache.Cache();
   }
 
   /**
    * Queries the API and returns the response data.
    */
-  async get(params: string) {
-    const allParams = new URLSearchParams('?' + this.params);
-    new URLSearchParams('?' + params).forEach((value, key) => {
-      allParams.set(key, value);
+  async get(params?: string) {
+    const data: Record<string, string> = {};
+
+    this.params.forEach((key, value) => {
+      data[key] = value;
     });
 
-    const req = {
-      url: `${this.baseUrl}${allParams.toString().length ? `?${allParams.toString()}` : ''}`,
-      method: 'GET',
-    };
+    new URLSearchParams('?' + params).forEach((value, key) => {
+      data[key] = value;
+    });
 
-    const response = await getBackendSrv().datasourceRequest(req);
+    const response = await this._request(data);
 
     return response.data;
   }
@@ -36,11 +36,13 @@ export default class Api {
    * Used as a health check.
    */
   async test() {
-    const req = {
-      url: `${this.baseUrl}${this.params.length ? `?${this.params}` : ''}`,
-      method: 'GET',
-    };
-    return getBackendSrv().datasourceRequest(req);
+    const data: Record<string, string> = {};
+
+    this.params.forEach((value, key) => {
+      data[key] = value;
+    });
+
+    return this._request(data);
   }
 
   /**
@@ -69,4 +71,26 @@ export default class Api {
 
     return result;
   }
+
+  async _request(data?: Record<string, string>) {
+    const req = {
+      url: `${this.baseUrl}`,
+      method: 'GET',
+    };
+
+    console.log(data);
+
+    if (data && Object.keys(data).length > 0) {
+      req.url =
+        req.url +
+        (req.url.search(/\?/) >= 0 ? '&' : '?') +
+        Object.entries(data)
+          .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
+          .join('&');
+    }
+
+    console.log(req.url);
+
+    return getBackendSrv().datasourceRequest(req);
+  }
 }

src/ConfigEditor.tsx renamed to src/components/ConfigEditor.tsx

@@ -2,7 +2,7 @@ import React, { ChangeEvent } from 'react';
 
 import { LegacyForms, DataSourceHttpSettings } from '@grafana/ui';
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
-import { JsonApiDataSourceOptions } from './types';
+import { JsonApiDataSourceOptions } from '../types';
 
 import {} from '@emotion/core';
 

src/JsonPathQueryField.tsx renamed to src/components/JsonPathQueryField.tsx

@@ -2,8 +2,8 @@ import defaults from 'lodash/defaults';
 import React, { ChangeEvent } from 'react';
 import { Icon, InlineFormLabel, Segment } from '@grafana/ui';
 import { QueryEditorProps } from '@grafana/data';
-import { DataSource } from './DataSource';
-import { JsonApiDataSourceOptions, JsonApiQuery, defaultQuery } from './types';
+import { DataSource } from '../datasource';
+import { JsonApiDataSourceOptions, JsonApiQuery, defaultQuery } from '../types';
 import { JsonPathQueryField } from './JsonPathQueryField';
 import { cx } from 'emotion';
 

src/QueryEditor.tsx renamed to src/components/QueryEditor.tsx

@@ -1,7 +1,7 @@
 import defaults from 'lodash/defaults';
 
 import React, { useState } from 'react';
-import { JsonApiVariableQuery, defaultVariableQuery } from './types';
+import { JsonApiVariableQuery, defaultVariableQuery } from '../types';
 import { InlineFormLabel } from '@grafana/ui';
 import { JsonPathQueryField } from './JsonPathQueryField';
 

src/VariableQueryEditor.tsx renamed to src/components/VariableQueryEditor.tsx

@@ -1,4 +1,4 @@
-import { detectFieldType } from './DataSource';
+import { detectFieldType } from './datasource';
 import { format } from 'date-fns';
 
 test('years and months gets parsed as string to reduce false positives', () => {

src/detectFieldType.test.ts

@@ -1,8 +1,8 @@
 import { DataSourcePlugin } from '@grafana/data';
-import { DataSource } from './DataSource';
-import { ConfigEditor } from './ConfigEditor';
-import { QueryEditor } from './QueryEditor';
-import { VariableQueryEditor } from './VariableQueryEditor';
+import { DataSource } from './datasource';
+import { ConfigEditor } from './components/ConfigEditor';
+import { QueryEditor } from './components/QueryEditor';
+import { VariableQueryEditor } from './components/VariableQueryEditor';
 import { JsonApiQuery, JsonApiDataSourceOptions } from './types';
 
 export const plugin = new DataSourcePlugin<DataSource, JsonApiQuery, JsonApiDataSourceOptions>(DataSource)