Merge pull request #14 from hoptical/add-proxy

Use getBackendSrv/Proxy

Author: hoptical

README.md

@@ -1,6 +1,8 @@
 # Nodegraph API Plugin for Grafana
 
-[![Build](https://github.com/grafana/grafana-starter-datasource/workflows/CI/badge.svg)](https://github.com/grafana/grafana-starter-datasource/actions?query=workflow%3A%22CI%22)
+[![License](https://img.shields.io/github/license/hoptical/nodegraph-api-plugin)](LICENSE)
+[![CI](https://github.com/hoptical/nodegraph-api-plugin/actions/workflows/ci.yml/badge.svg)](https://github.com/hoptical/nodegraph-api-plugin/actions/workflows/ci.yml)
+[![Release](https://github.com/hoptical/nodegraph-api-plugin/actions/workflows/release.yml/badge.svg)](https://github.com/hoptical/nodegraph-api-plugin/actions/workflows/release.yml)
 
 This plugin provides a data source to connect a REST API to [nodegraph](https://grafana.com/docs/grafana/latest/visualizations/node-graph/) panel of Grafana. It is [signed and published by Grafana](https://grafana.com/grafana/plugins/hamedkarbasi93-nodegraphapi-datasource/).
 
@@ -29,17 +31,17 @@ Alternatively, you can manually download the [latest](https://github.com/hoptica
 
 You can now add the data source. Just enter the URL of your API app and push "Save & Test." You will get an error in case of connection failure.
 
-> Important note: The browser should have access to the application, not the Grafana server.
-
 ![Add Datasource](https://raw.githubusercontent.com/hoptical/nodegraph-api-plugin/f447b74ecefd827b388e791a34792730e9a9a11d/src/img/add-datasource.png)
 
 In the Grafana dashboard, pick the Nodegraph panel and visualize the graph.
 
-## API Configuration
+> Note on Application Access: 
+> - Versions 0.x.x work in *direct* mode. i.e., The browser must have access to the API application.
+> - Versions 1.x.x+ work in *proxy* mode. i.e., The Grafana server should have access to the API application.
 
-The REST API application should return data in the following format:
+## API Configuration
 
-   > Note: Your API application should handle CORS policy. Otherwise, you will face a CORS-Policy error in Grafana.
+The REST API application should handle three requests: *fields*, *data*, and *health*. They are described below.
 
 ### Fetch Graph Fields
 
@@ -174,7 +176,6 @@ In the `example` folder, you can find a simple API application in Python Flask.
 ### Requirements:
 
 - flask
-- flask-cors
 
 ### Run
 

example/api/python/run.py

@@ -1,7 +1,6 @@
 from flask import Flask, jsonify
-from flask_cors import CORS
+
 app = Flask(__name__)
-CORS(app)
 
 
 @app.route('/api/graph/fields')

src/ConfigEditor.tsx

@@ -1,78 +1,39 @@
 import React, { ChangeEvent, PureComponent } from 'react';
 import { LegacyForms } from '@grafana/ui';
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
-import { MyDataSourceOptions, MySecureJsonData } from './types';
+import { MyDataSourceOptions } from './types';
 
-const { SecretFormField, FormField } = LegacyForms;
+const { FormField } = LegacyForms;
 
 interface Props extends DataSourcePluginOptionsEditorProps<MyDataSourceOptions> {}
 
 interface State {}
 
 export class ConfigEditor extends PureComponent<Props, State> {
-  // Secure field (only sent to the backend)
-  onAPIKeyChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const { onOptionsChange, options } = this.props;
-    onOptionsChange({
-      ...options,
-      secureJsonData: {
-        apiKey: event.target.value,
-      },
-    });
-  };
-
-  onResetAPIKey = () => {
-    const { onOptionsChange, options } = this.props;
-    onOptionsChange({
-      ...options,
-      secureJsonFields: {
-        ...options.secureJsonFields,
-        apiKey: false,
-      },
-      secureJsonData: {
-        ...options.secureJsonData,
-        apiKey: '',
-      },
-    });
-  };
   onURLChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { onOptionsChange, options } = this.props;
     const jsonData = {
       ...options.jsonData,
-      baseUrl: event.target.value,
+      url: event.target.value,
     };
     onOptionsChange({ ...options, jsonData });
   };
 
   render() {
     const { options } = this.props;
-    const { jsonData, secureJsonFields } = options;
-    const secureJsonData = (options.secureJsonData || {}) as MySecureJsonData;
+    const { jsonData } = options;
+    //const secureJsonData = (options.secureJsonData || {}) as MySecureJsonData;
 
     return (
       <div className="gf-form-group">
         <div className="gf-form">
           <FormField
             label="URL"
             onChange={this.onURLChange}
-            value={jsonData.baseUrl || ''}
+            value={jsonData.url || ''}
             placeholder="http://localhost:5000"
           />
         </div>
-        <div className="gf-form-inline">
-          <div className="gf-form">
-            <SecretFormField
-              isConfigured={(secureJsonFields && secureJsonFields.apiKey) as boolean}
-              value={secureJsonData.apiKey || ''}
-              label="API Key"
-              placeholder="secure json field (backend only)"
-              labelWidth={6}
-              inputWidth={20}
-              onReset={this.onResetAPIKey}
-              onChange={this.onAPIKeyChange}
-            />
-          </div>
-        </div>
       </div>
     );
   }

src/datasource.ts

@@ -16,12 +16,16 @@ import { getTemplateSrv } from '@grafana/runtime';
 
 import { MyQuery, MyDataSourceOptions, defaultQuery } from './types';
 
+// proxy route
+const routePath = '/nodegraphds';
+
 export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
-  baseUrl: string; // base url of the api
+  url: string;
   constructor(instanceSettings: DataSourceInstanceSettings<MyDataSourceOptions>) {
     super(instanceSettings);
 
-    this.baseUrl = instanceSettings.jsonData.baseUrl || '';
+    // proxy url
+    this.url = instanceSettings.url || '';
   }
 
   async query(options: DataQueryRequest<MyQuery>): Promise<DataQueryResponse> {
@@ -98,13 +102,11 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
     return Promise.all(promises).then(data => ({ data: data[0] }));
   }
   async doRequest(endpoint: string, params?: string) {
-    //   const result = await getBackendSrv().datasourceRequest({
-    //     method: 'GET',
-    //     url: `${this.baseUrl}${endpoint}${`?${params}`}`,
-    //   });
+    // Do the request on proxy; the server will replace url + routePath with the url
+    // defined in plugin.json
     const result = getBackendSrv().datasourceRequest({
       method: 'GET',
-      url: `${this.baseUrl}${endpoint}${params?.length ? `?${params}` : ''}`,
+      url: `${this.url}${routePath}${endpoint}${params?.length ? `?${params}` : ''}`,
     });
     return result;
   }

src/plugin.json

@@ -1,5 +1,11 @@
 {
   "$schema": "https://raw.githubusercontent.com/grafana/grafana/master/docs/sources/developers/plugins/plugin.schema.json",
+  "routes": [
+    {
+      "path": "nodegraphds",
+      "url": "{{ .JsonData.url }}"
+    }
+  ],
   "type": "datasource",
   "name": "Node Graph API",
   "id": "hamedkarbasi93-nodegraphapi-datasource",

src/types.ts

@@ -10,12 +10,10 @@ export const defaultQuery: Partial<MyQuery> = {};
  * These are options configured for each DataSource instance
  */
 export interface MyDataSourceOptions extends DataSourceJsonData {
-  baseUrl?: string;
+  url: string;
 }
 
 /**
  * Value that is used in the backend, but never sent over HTTP to the frontend
  */
-export interface MySecureJsonData {
-  apiKey?: string;
-}
+export interface MySecureJsonData {}