Add support for custom paths (#24)

* Add support for custom paths

* Fix variable query editor

* Update docs

Author: marcusolsson

README.md

@@ -1,21 +1,40 @@
 # JSON API data source for Grafana
 
-[![License](https://img.shields.io/github/license/marcusolsson/grafana-jsonapi-datasource)](LICENSE)
+[![License](https://img.shields.io/github/license/marcusolsson/grafana-json-datasource)](LICENSE)
 [![PRs welcome!](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](#contribute)
-[![Build](https://github.com/marcusolsson/grafana-jsonapi-datasource/workflows/CI/badge.svg)](https://github.com/marcusolsson/grafana-jsonapi-datasource/actions?query=workflow%3A%22CI%22)
-[![Release](https://github.com/marcusolsson/grafana-jsonapi-datasource/workflows/Release/badge.svg)](https://github.com/marcusolsson/grafana-jsonapi-datasource/actions?query=workflow%3ARelease)
+[![Build](https://github.com/marcusolsson/grafana-json-datasource/workflows/CI/badge.svg)](https://github.com/marcusolsson/grafana-json-datasource/actions?query=workflow%3A%22CI%22)
+[![Release](https://github.com/marcusolsson/grafana-json-datasource/workflows/Release/badge.svg)](https://github.com/marcusolsson/grafana-json-datasource/actions?query=workflow%3ARelease)
 
 A data source plugin for loading JSON APIs into [Grafana](https://grafana.com).
 
-![Screenshot](https://github.com/marcusolsson/grafana-jsonapi-datasource/raw/master/src/img/screenshot.png)
+![Screenshot](https://github.com/marcusolsson/grafana-json-datasource/raw/master/src/img/screenshot.png)
 
 Extract one or more values from a JSON API using [JSON Path](https://goessner.net/articles/JsonPath/). Each path results in a field in the query result. All fields need to be of the same length.
 
-The field name defaults to the name of the property referenced by the JSON Path but can be set to an **Alias**. **This is going away in a future release, since Grafana now lets you rename any field.**
+## Configuration
 
-The **Cache Time** determines the time in seconds to save the API response.
+This section lists the available configuration options for the JSON API data source.
 
-**Custom query parameters** lets you override the query parameters configured by the data source.
+### Query editor
+
+| Configuration | Description |
+|---------------|-------------|
+| **Path** | Appends a URL path to the URL configured by the data source. |
+| **Query string** | Overrides the custom query parameters configured by the data source. |
+| **Cache Time** | Determines the time in seconds to save the API response. |
+| **Query** | Defines the [JSON Path](https://goessner.net/articles/JsonPath/) used to extract the field. |
+
+### Variables
+
+[Variables](https://grafana.com/docs/grafana/latest/variables) are supported for all text configuration options.
+
+### Macros
+
+Use macros in your query string and JSON Path queries to add dashboard context to your queries. Macros are available for the **Query string** and (JSON Path) **Query** options.
+| Macro | Description |
+|-------|-------------|
+| `$__unixEpochFrom()` | Start of the dashboard time interval as a Unix timestamp, i.e. 1494410783 |
+| `$__unixEpochTo()` | End of the dashboard time interval as a Unix timestamp, i.e. 1494410783 |
 
 ## Public data sets
 
@@ -42,7 +61,7 @@ List episodes from your favorite TV series.
 #### Configuration
 
 - **URL:** `http://api.tvmaze.com/singlesearch/shows`
-- **Custom query parameters:** `q=rick-&-morty&embed=episodes`
+- **Query string:** `q=archer&embed=episodes`
 
 #### Sample queries
 

src/api.ts

@@ -16,7 +16,7 @@ export default class Api {
   /**
    * Queries the API and returns the response data.
    */
-  async get(params?: string) {
+  async get(path: string, params?: string) {
     const data: Record<string, string> = {};
 
     this.params.forEach((value, key) => {
@@ -27,7 +27,7 @@ export default class Api {
       data[key] = value;
     });
 
-    const response = await this._request(data);
+    const response = await this._request(path, data);
 
     return response.data;
   }
@@ -42,42 +42,58 @@ export default class Api {
       data[key] = value;
     });
 
-    return this._request(data);
+    return this._request('', data);
   }
 
   /**
    * Returns a cached API response if it exists, otherwise queries the API.
    */
-  async cachedGet(cacheDurationSeconds: number, params: string) {
+  async cachedGet(cacheDurationSeconds: number, path: string, params: string) {
     if (cacheDurationSeconds === 0) {
-      return await this.get(params);
+      return await this.get(path, params);
     }
 
+    const rawUrl = this.baseUrl + path;
+
     const force = this.lastCacheDuration !== cacheDurationSeconds;
 
     if (force) {
-      this.cache.del(this.baseUrl);
+      this.cache.del(rawUrl);
     }
 
-    const cachedItem = this.cache.get(this.baseUrl);
+    const cachedItem = this.cache.get(rawUrl);
     if (cachedItem && !force) {
       return Promise.resolve(cachedItem);
     }
     this.lastCacheDuration = cacheDurationSeconds;
 
-    const result = await this.get(params);
+    const result = await this.get(path, params);
 
-    this.cache.put(this.baseUrl, result, Math.max(cacheDurationSeconds * 1000, 1));
+    this.cache.put(rawUrl, result, Math.max(cacheDurationSeconds * 1000, 1));
 
     return result;
   }
 
-  async _request(data?: Record<string, string>) {
+  /**
+   * Make an API request using the data source configuration as defaults.
+   * Allows the user to append a path, or override query parameters.
+   *
+   * @param path to append to URL
+   * @param data to set as query parameters
+   */
+  async _request(path: string, data?: Record<string, string>) {
     const req = {
-      url: `${this.baseUrl}`,
+      url: `${this.baseUrl}${path}`,
       method: 'GET',
     };
 
+    // Deduplicate forward slashes, i.e. /// becomes /. This enables sensible
+    // defaults for empty variables.
+    //
+    // For example, `/orgs/${orgId}/list` becomes `/orgs/list` instead of
+    // `/orgs//list`.
+    req.url = req.url.replace(/[\/]+/g, '/');
+
     if (data && Object.keys(data).length > 0) {
       req.url =
         req.url +

src/components/ConfigEditor.tsx

@@ -38,7 +38,7 @@ export const ConfigEditor: React.FC<Props> = ({ options, onOptionsChange }) => {
       to set them explicitly.  */}
       <h3 className="page-heading">Misc</h3>
       <InlineFieldRow>
-        <InlineField label="Custom query parameters" tooltip="Add custom parameters to your queries.">
+        <InlineField label="Query string" tooltip="Add a custom query string to your queries.">
           <Input
             width={50}
             value={options.jsonData.queryParams}

src/components/JsonPathQueryField.tsx

@@ -12,6 +12,9 @@ interface Props {
  * JsonPathQueryField is an editor for JSON Path.
  */
 export const JsonPathQueryField: React.FC<Props> = ({ query, onBlur, onChange }) => {
+  /**
+   * The QueryField supports Slate plugins, so let's add a few useful ones.
+   */
   const plugins = [
     BracesPlugin(),
     SlatePrism({

src/components/QueryEditor.tsx

@@ -34,6 +34,28 @@ export const QueryEditor: React.FC<Props> = ({ onRunQuery, onChange, query }) =>
   return (
     <>
       <InlineFieldRow>
+        <InlineField
+          label="Path"
+          tooltip="Append a custom path to the data source URL. Should start with a forward slash (/)."
+          grow
+        >
+          <Input
+            placeholder="/orders/${orderId}"
+            value={query.urlPath}
+            onChange={e => onChange({ ...query, urlPath: e.currentTarget.value })}
+          />
+        </InlineField>
+        <InlineField
+          label="Query string"
+          tooltip="Add custom query parameters to your URL. Any parameters you add here overrides the custom parameters that have been configured by the data source."
+          grow
+        >
+          <Input
+            placeholder="page=1&limit=100"
+            value={query.queryParams}
+            onChange={e => onChange({ ...query, queryParams: e.currentTarget.value })}
+          />
+        </InlineField>
         <InlineField
           label="Cache Time"
           tooltip="Time in seconds that the response will be cached in Grafana after receiving it."
@@ -49,19 +71,6 @@ export const QueryEditor: React.FC<Props> = ({ onRunQuery, onChange, query }) =>
           />
         </InlineField>
       </InlineFieldRow>
-      <InlineFieldRow>
-        <InlineField
-          label="Custom query parameters"
-          tooltip="Add custom parameters to your queries. Any parameters you add here overrides the custom parameters that have been configured by the data source."
-          grow
-        >
-          <Input
-            placeholder="page=1&limit=100"
-            value={query.queryParams}
-            onChange={e => onChange({ ...query, queryParams: e.currentTarget.value })}
-          />
-        </InlineField>
-      </InlineFieldRow>
       {fields
         ? fields.map((field, index) => (
             <InlineFieldRow key={index}>

src/components/VariableQueryEditor.tsx

@@ -20,14 +20,27 @@ export const VariableQueryEditor: React.FC<VariableQueryProps> = ({ onChange, qu
   };
 
   const onChangePath = (jsonPath: string) => setState({ ...state, jsonPath });
+  const onChangeUrlPath = (urlPath: string) => setState({ ...state, urlPath });
   const onQueryParams = (queryParams: string) => setState({ ...state, queryParams });
 
   return (
     <>
       <InlineFieldRow>
         <InlineField
-          label="Custom query parameters"
-          tooltip="Add custom parameters to your queries. Any parameters you add here overrides the custom parameters that have been configured by the data source."
+          label="Path"
+          tooltip="Append a custom path to the data source URL. Should start with a forward slash (/)."
+          grow
+        >
+          <Input
+            placeholder="/orders/${orderId}"
+            value={query.urlPath}
+            onChange={e => onChangeUrlPath(e.currentTarget.value)}
+            onBlur={saveQuery}
+          />
+        </InlineField>
+        <InlineField
+          label="Query string"
+          tooltip="Add custom query parameters to your URL. Any parameters you add here overrides the custom parameters that have been configured by the data source."
           grow
         >
           <Input

src/datasource.ts

@@ -35,8 +35,9 @@ export class DataSource extends DataSourceApi<JsonApiQuery, JsonApiDataSourceOpt
 
     const promises = request.targets.map(async query => {
       const queryParamsTreated = replaceMacros(templateSrv.replace(query.queryParams, request.scopedVars));
+      const urlPathTreated = templateSrv.replace(query.urlPath, request.scopedVars);
 
-      const response = await this.api.cachedGet(query.cacheDurationSeconds, queryParamsTreated);
+      const response = await this.api.cachedGet(query.cacheDurationSeconds, urlPathTreated, queryParamsTreated);
 
       const fields = query.fields
         .filter(field => field.jsonPath)
@@ -87,10 +88,16 @@ export class DataSource extends DataSourceApi<JsonApiQuery, JsonApiDataSourceOpt
       return [];
     }
 
-    const response = await this.api.get(query.queryParams);
+    const templateSrv = getTemplateSrv();
+
+    const queryParamsTreated = templateSrv.replace(query.queryParams);
+    const urlPathTreated = templateSrv.replace(query.urlPath);
+    const jsonPathTreated = templateSrv.replace(query.jsonPath);
+
+    const response = await this.api.get(urlPathTreated, queryParamsTreated);
 
     return JSONPath({
-      path: query.jsonPath,
+      path: jsonPathTreated,
       json: response,
     }).map((_: any) => ({ text: _ }));
   }

src/img/screenshot.png

@@ -9,22 +9,26 @@ export interface JsonApiQuery extends DataQuery {
   fields: JsonField[];
   cacheDurationSeconds: number;
   queryParams: string;
+  urlPath: string;
 }
 
 export interface JsonApiVariableQuery extends DataQuery {
   jsonPath: string;
   queryParams: string;
+  urlPath: string;
 }
 
 export const defaultQuery: Partial<JsonApiQuery> = {
   fields: [{ name: '', jsonPath: '' }],
   cacheDurationSeconds: 300,
   queryParams: '',
+  urlPath: '',
 };
 
 export const defaultVariableQuery: Partial<JsonApiVariableQuery> = {
   jsonPath: '',
   queryParams: '',
+  urlPath: '',
 };
 
 export interface JsonApiDataSourceOptions extends DataSourceJsonData {