Allow to configure the api url path

src/QueryEditor.tsx

@@ -16,9 +16,19 @@ export class QueryEditor extends PureComponent<Props> {
     onChange({ ...query, queryText: event.target.value });
   };
 
+  onFieldApiUrlPathChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const { onChange, query } = this.props;
+    onChange({ ...query, fieldApiUrlPath: event.target.value });
+  };
+
+  onDataApiUrlPathChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const { onChange, query } = this.props;
+    onChange({ ...query, dataApiUrlPath: event.target.value });
+  };
+
   render() {
     const query = defaults(this.props.query, defaultQuery);
-    const { queryText } = query;
+    const { queryText, fieldApiUrlPath, dataApiUrlPath } = query;
     return (
       <div className="gf-form">
         <FormField
@@ -29,6 +39,22 @@ export class QueryEditor extends PureComponent<Props> {
           label="Query String"
           tooltip="The query string for data endpoint of the node graph api; i.e. /api/graph/data?query=sometext"
         />
+        <FormField
+          labelWidth={8}
+          inputWidth={20}
+          value={fieldApiUrlPath || '/api/graph/field'}
+          onChange={this.onFieldApiUrlPathChange}
+          label="Field Endpoint"
+          tooltip="The field endpoint of the node graph api"
+        />
+        <FormField
+          labelWidth={8}
+          inputWidth={20}
+          value={dataApiUrlPath || '/api/graph/data'}
+          onChange={this.onDataApiUrlPathChange}
+          label="Data Endpoint"
+          tooltip="The data endpoint of the node graph api"
+        />
       </div>
     );
   }

src/datasource.ts

@@ -33,9 +33,11 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
       const query = defaults(target, defaultQuery);
       const dataQuery = getTemplateSrv().replace(query.queryText, options.scopedVars);
       // fetch graph fields from api
-      const responseGraphFields = await this.doRequest('/api/graph/fields', `${dataQuery}`);
+      const fieldApiUrlPath = getTemplateSrv().replace(query.fieldApiUrlPath, options.scopedVars);
+      const responseGraphFields = await this.doRequest(`${fieldApiUrlPath}`, `${dataQuery}`);
       // fetch graph data from api
-      const responseGraphData = await this.doRequest('/api/graph/data', `${dataQuery}`);
+      const dataApiUrlPath = getTemplateSrv().replace(query.dataApiUrlPath, options.scopedVars);
+      const responseGraphData = await this.doRequest(`${dataApiUrlPath}`, `${dataQuery}`);
       // extract fields of the nodes and edges in the graph fields object
       const nodeFieldsResponse = responseGraphFields.data.nodes_fields;
       const edgeFieldsResponse = responseGraphFields.data.edges_fields;

src/types.ts

@@ -2,9 +2,14 @@ import { DataQuery, DataSourceJsonData } from '@grafana/data';
 
 export interface MyQuery extends DataQuery {
   queryText?: string;
+  fieldApiUrlPath: string;
+  dataApiUrlPath: string;
 }
 
-export const defaultQuery: Partial<MyQuery> = {};
+export const defaultQuery: Partial<MyQuery> = {
+  fieldApiUrlPath: '/api/graph/fields',
+  dataApiUrlPath: '/api/graph/data',
+};
 
 /**
  * These are options configured for each DataSource instance