diff --git a/.gitignore b/.gitignore index f06235c..6b699e1 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules dist +.eslintcache diff --git a/src/components/PluginConfigPage/PluginConfigPage.tsx b/src/components/PluginConfigPage/PluginConfigPage.tsx index 490032c..694e00c 100644 --- a/src/components/PluginConfigPage/PluginConfigPage.tsx +++ b/src/components/PluginConfigPage/PluginConfigPage.tsx @@ -50,6 +50,7 @@ export const PluginConfigPage: FC = ({ const pluginConfiguredQueryParam = queryParams.get(PLUGIN_CONFIGURED_QUERY_PARAM); const pluginConfiguredRedirect = pluginConfiguredQueryParam === PLUGIN_CONFIGURED_QUERY_PARAM_TRUTHY_VALUE; + console.log(pluginConfiguredRedirect); const [checkingIfPluginIsConnected, setCheckingIfPluginIsConnected] = useState(!pluginConfiguredRedirect); const [pluginConnectionCheckError, setPluginConnectionCheckError] = useState(null); @@ -74,6 +75,7 @@ export const PluginConfigPage: FC = ({ * Supplying the env var basically allows to skip the configuration form * (check webpack.config.js to see how this is set) */ + console.log(pluginMetaDataExporterApiUrl); if (!pluginMetaDataExporterApiUrl) { /** * DataExporterApiUrl is not yet saved in the grafana plugin settings, but has been supplied as an env var @@ -94,6 +96,8 @@ export const PluginConfigPage: FC = ({ if (dataExporterApiUrl) { const pluginConnectionResponse = await PluginState.checkIfPluginIsConnected(dataExporterApiUrl); + console.log(pluginConnectionResponse); + if (typeof pluginConnectionResponse === 'string') { setPluginConnectionCheckError(pluginConnectionResponse); } @@ -102,7 +106,7 @@ export const PluginConfigPage: FC = ({ }; /** - * don't check the plugin status (or trigger a data sync) if the user was just redirected after a successful + * don't check the plugin status if the user was just redirected after a successful * plugin setup */ if (!pluginConfiguredRedirect) { @@ -167,12 +171,7 @@ export const PluginConfigPage: FC = ({ ); } else if (!pluginIsConnected) { - content = ( - - ); + content = ; } else { // plugin is fully connected and synced content = ; diff --git a/src/components/PluginConfigPage/parts/ConfigurationForm/index.tsx b/src/components/PluginConfigPage/parts/ConfigurationForm/index.tsx index 546f2a4..a07d3e1 100644 --- a/src/components/PluginConfigPage/parts/ConfigurationForm/index.tsx +++ b/src/components/PluginConfigPage/parts/ConfigurationForm/index.tsx @@ -49,17 +49,12 @@ const FormErrorMessage: FC<{ errorMsg: string }> = ({ errorMsg }) => ( > Need help? -
- Reach out to the OnCall team in the{' '} - - #grafana-oncall - {' '} - community Slack channel -
- Ask questions on our GitHub Discussions page{' '} - - here - {' '} -
- Or file bugs on our GitHub Issues page{' '} - +
- file bugs on our GitHub Issues page{' '} +
here
@@ -71,25 +66,24 @@ const ConfigurationForm: FC = ({ onSuccessfulSetup, defaultDataExporterAp const [setupErrorMsg, setSetupErrorMsg] = useState(null); const [formLoading, setFormLoading] = useState(false); - const setupPlugin: SubmitHandler = useCallback(async ({ dataExporterApiUrl }) => { - setFormLoading(true); + const setupPlugin: SubmitHandler = useCallback( + async ({ dataExporterApiUrl }) => { + setFormLoading(true); - const errorMsg = await PluginState.installPlugin(dataExporterApiUrl); + const errorMsg = await PluginState.installPlugin(dataExporterApiUrl); - if (!errorMsg) { - onSuccessfulSetup(); - } else { - setSetupErrorMsg(errorMsg); - setFormLoading(false); - } - }, []); + if (!errorMsg) { + onSuccessfulSetup(); + } else { + setSetupErrorMsg(errorMsg); + setFormLoading(false); + } + }, + [onSuccessfulSetup] + ); return ( - - defaultValues={{ dataExporterApiUrl: defaultDataExporterApiUrl }} - onSubmit={setupPlugin} - data-testid="plugin-configuration-form" - > + defaultValues={{ dataExporterApiUrl: defaultDataExporterApiUrl }} onSubmit={setupPlugin}> {({ register, errors }) => ( <>
= ({ onSuccessfulSetup, defaultDataExporterAp 'margin-top': '24px', })} > -

1. Launch the OnCall backend

+

1. Launch the DataExporter backend

Run hobby, dev or production backend. See{' '} - + here {' '} on how to get started. @@ -114,18 +108,17 @@ const ConfigurationForm: FC = ({ onSuccessfulSetup, defaultDataExporterAp 'margin-top': '24px', })} > -

2. Let us know the base URL of your OnCall API

+

2. Let us know the base URL of your DataExporter API

- The OnCall backend must be reachable from your Grafana installation. Some examples are: + The DataExporter backend must be reachable from your Grafana installation. Some examples are:
- http://host.docker.internal:8080
- http://localhost:8080
- + = Pick< dataExporterAPIResponse: DataExporterAPIResponse; }; -type PluginConnectedStatusResponse = string; +type PluginConnectedStatusResponse = { + version: string; +}; class PluginState { static DATA_EXPORTER_BASE_URL = '/plugin'; @@ -159,13 +161,22 @@ class PluginState { return null; }; - static checkIfPluginIsConnected = async (DataExporterApiUrl: string): Promise => { + static checkIfPluginIsConnected = async ( + dataExporterApiUrl: string + ): Promise => { try { - return await makeRequest(`${this.DATA_EXPORTER_BASE_URL}/status`, { + const resp = await makeRequest(`${this.DATA_EXPORTER_BASE_URL}/status`, { method: 'GET', }); + + // TODO: check if the server version is compatible with the plugin + if (resp.version) { + return resp; + } else { + throw new Error(`Something is working at ${dataExporterApiUrl} but it's not DataExporter backend`); + } } catch (e) { - return this.getHumanReadableErrorFromDataExporterError(e, DataExporterApiUrl); + return this.getHumanReadableErrorFromDataExporterError(e, dataExporterApiUrl); } };