Merge pull request 'Auto API-key configuration' (#11) from auto-api-key-configuration into master

Reviewed-on: #11

src/components/PluginConfigPage/PluginConfigPage.tsx

@@ -1,15 +1,14 @@
-import React, { FC, useCallback, useEffect, useState } from 'react';
-
-import { Legend, LoadingPlaceholder } from '@grafana/ui';
-import { useLocation } from 'react-router-dom';
-
-// import logo from '../../img/logo.svg';
 import PluginState, { PluginConnectedStatusResponse } from '../../plugin_state';
 
 import ConfigurationForm from './parts/ConfigurationForm';
 import RemoveCurrentConfigurationButton from './parts/RemoveCurrentConfigurationButton';
 import StatusMessageBlock from './parts/StatusMessageBlock';
-import { DataExporterPluginConfigPageProps } from 'types';
+import { DataExporterPluginConfigPageProps } from '../../types';
+
+import { Legend, LoadingPlaceholder } from '@grafana/ui';
+import { useLocation } from 'react-router-dom';
+
+import React, { FC, useCallback, useEffect, useState } from 'react';
 
 const PLUGIN_CONFIGURED_QUERY_PARAM = 'pluginConfigured';
 const PLUGIN_CONFIGURED_QUERY_PARAM_TRUTHY_VALUE = 'true';
@@ -71,24 +70,30 @@ export const PluginConfigPage: FC<DataExporterPluginConfigPageProps> = ({
 
   const resetQueryParams = useCallback(() => removePluginConfiguredQueryParams(pluginIsEnabled), [pluginIsEnabled]);
 
-  const checkConnection = useCallback(async () => {
+  const checkConnection = useCallback(
-    setCheckingIfPluginIsConnected(true);
+    async (grafanaDataExporterUrl?: string) => {
-    setPluginConnectionCheckError(null);
+      setCheckingIfPluginIsConnected(true);
-    if (!pluginMetaDataExporterApiUrl) {
+      setPluginConnectionCheckError(null);
-      setCheckingIfPluginIsConnected(false);
-      return;
-    }
-    const pluginConnectionResponse = await PluginState.checkIfPluginIsConnected(pluginMetaDataExporterApiUrl);
 
-    if (typeof pluginConnectionResponse === 'string') {
+      const backendUrl = grafanaDataExporterUrl || pluginMetaDataExporterApiUrl;
-      setPluginConnectionCheckError(pluginConnectionResponse);
-    } else {
-      setPluginIsConnected(pluginConnectionResponse);
-      reloadPageWithPluginConfiguredQueryParams(pluginConnectionResponse, true);
-    }
 
-    setCheckingIfPluginIsConnected(false);
+      if (!backendUrl) {
-  }, [pluginMetaDataExporterApiUrl]);
+        setCheckingIfPluginIsConnected(false);
+        return;
+      }
+      const pluginConnectionResponse = await PluginState.checkIfPluginIsConnected(backendUrl);
+
+      if (typeof pluginConnectionResponse === 'string') {
+        setPluginConnectionCheckError(pluginConnectionResponse);
+      } else {
+        setPluginIsConnected(pluginConnectionResponse);
+        reloadPageWithPluginConfiguredQueryParams(pluginConnectionResponse, true);
+      }
+
+      setCheckingIfPluginIsConnected(false);
+    },
+    [pluginMetaDataExporterApiUrl]
+  );
 
   useEffect(resetQueryParams, [resetQueryParams]);
 
@@ -166,10 +171,7 @@ export const PluginConfigPage: FC<DataExporterPluginConfigPageProps> = ({
       <Legend>Configure DataExporter</Legend>
       {pluginIsConnected ? (
         <>
-          <p>
+          <p>Plugin is connected! You can now go to a dashboard and add the DataExporter panel there.</p>
-            Plugin is connected! Continue to DataExporter by clicking the{' '}
-            {/* <img alt="DataExporter Logo" src={logo} width={18} /> icon over there 👈 */}
-          </p>
           <StatusMessageBlock text={`Connected to DataExporter`} />
         </>
       ) : (

src/components/PluginConfigPage/parts/ConfigurationForm/index.tsx

@@ -16,7 +16,7 @@ import { isEmpty } from 'lodash-es';
 const cx = cn.bind(styles);
 
 type Props = {
-  onSuccessfulSetup: () => void;
+  onSuccessfulSetup: (grafanaDataExporterUrl: string) => void;
   defaultDataExporterApiUrl: string;
 };
 
@@ -68,7 +68,7 @@ const ConfigurationForm: FC<Props> = ({ onSuccessfulSetup, defaultDataExporterAp
       const errorMsg = await PluginState.installPlugin(dataExporterApiUrl);
 
       if (!errorMsg) {
-        onSuccessfulSetup();
+        onSuccessfulSetup(dataExporterApiUrl);
       } else {
         setSetupErrorMsg(errorMsg);
         setFormLoading(false);

src/plugin_state.ts

@@ -14,10 +14,7 @@ export type UpdateGrafanaPluginSettingsProps = {
   secureJsonData?: Partial<DataExporterPluginMetaSecureJSONData>;
 };
 
-type InstallPluginResponse<DataExporterAPIResponse = any> = Pick<
+type InstallPluginResponse<DataExporterAPIResponse = any> = Pick<DataExporterPluginMetaSecureJSONData, 'apiToken'> & {
-  DataExporterPluginMetaSecureJSONData,
-  'grafanaToken'
-> & {
   dataExporterAPIResponse: DataExporterAPIResponse;
 };
 
@@ -125,13 +122,14 @@ class PluginState {
   static timeout = (pollCount: number) => new Promise((resolve) => setTimeout(resolve, 10 * 2 ** pollCount));
 
   static connectBackend = async <RT>(): Promise<InstallPluginResponse<RT>> => {
-    // TODO: try to disable success alerts from Grafana API
+    const { key: apiToken } = await this.createGrafanaToken();
-    const { key: grafanaToken } = await this.createGrafanaToken();
+    await this.updateGrafanaPluginSettings({ secureJsonData: { apiToken } });
-    await this.updateGrafanaPluginSettings({ secureJsonData: { grafanaToken } });
+    // TODO: display alert on error
     const dataExporterAPIResponse = await queryApi<RT>(`/connect`, {
       method: 'POST',
+      data: { apiToken, url: window.location.toString() },
     });
-    return { grafanaToken, dataExporterAPIResponse };
+    return { apiToken, dataExporterAPIResponse };
   };
 
   static installPlugin = async (dataExporterApiUrl: string): Promise<string | null> => {
@@ -158,14 +156,14 @@ class PluginState {
 
     // Step 3. reprovision the Grafana plugin settings, storing information that we get back from DataExporter's backend
     try {
-      const { grafanaToken } = pluginInstallationDataExporterResponse;
+      const { apiToken } = pluginInstallationDataExporterResponse;
 
       await this.updateGrafanaPluginSettings({
         jsonData: {
           dataExporterApiUrl,
         },
         secureJsonData: {
-          grafanaToken,
+          apiToken,
         },
       });
     } catch (e) {
@@ -179,11 +177,13 @@ class PluginState {
     dataExporterApiUrl: string
   ): Promise<PluginConnectedStatusResponse | string> => {
     try {
-      const resp = await queryApi<PluginConnectedStatusResponse>(`/status`, {
+      const resp = await queryApi<PluginConnectedStatusResponse>(`/connect`, {
         method: 'GET',
+        params: { url: window.location.toString() },
       });
 
       // TODO: check if the server version is compatible with the plugin
+      // TODO: remove configuration if backend says that api key doesn't work
       if (resp.version) {
         return resp;
       } else {
@@ -204,7 +204,7 @@ class PluginState {
       dataExporterApiUrl: null,
     };
     const secureJsonData: Required<DataExporterPluginMetaSecureJSONData> = {
-      grafanaToken: null,
+      apiToken: null,
     };
 
     return this.updateGrafanaPluginSettings({ jsonData, secureJsonData }, false);

src/types.ts

@@ -5,7 +5,7 @@ export type DataExporterPluginMetaJSONData = {
 };
 
 export type DataExporterPluginMetaSecureJSONData = {
-  grafanaToken: string | null;
+  apiToken: string | null;
 };
 
 export type AppRootProps = BaseAppRootProps<DataExporterPluginMetaJSONData>;