InfluxDB: Remove browser ('direct' access) mode. (#53529)

* Remove InfluxDB browser ('direct' access) mode.

* Improve text usage and clarity

docs/sources/datasources/influxdb/_index.md

@@ -33,19 +33,19 @@ InfluxDB data source options differ depending on which [query language](#query-l
 
 These options apply if you are using the InfluxQL query language. If you are using Flux, refer to [Flux support in Grafana]({{< relref "influxdb-flux/" >}}).
 
-| Name                | Description                                                                                                                                                                                                                    |
+| Name                | Description                                                                                                                                                                                              |
-| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Name`              | The data source name. This is how you refer to the data source in panels and queries. We recommend something like `InfluxDB-InfluxQL`.                                                                                         |
+| `Name`              | The data source name. This is how you refer to the data source in panels and queries. We recommend something like `InfluxDB-InfluxQL`.                                                                   |
-| `Default`           | Default data source means that it will be pre-selected for new panels.                                                                                                                                                         |
+| `Default`           | Default data source means that it will be pre-selected for new panels.                                                                                                                                   |
-| `URL`               | The HTTP protocol, IP address and port of your InfluxDB API. InfluxDB API port is by default 8086.                                                                                                                             |
+| `URL`               | The HTTP protocol, IP address and port of your InfluxDB API. InfluxDB API port is by default 8086.                                                                                                       |
-| `Access`            | Server (default) = URL needs to be accessible from the Grafana backend/server, Browser = URL needs to be accessible from the browser. **Note**: Browser (direct) access is deprecated and will be removed in a future release. |
+| `Access`            | Direct browser access has been deprecated. Use “Server (default)” or the datasource won’t function.                                                                                                      |
-| `Allowed cookies`   | Cookies that will be forwarded to the data source. All other cookies will be deleted.                                                                                                                                          |
+| `Allowed cookies`   | Cookies that will be forwarded to the data source. All other cookies will be deleted.                                                                                                                    |
-| `Database`          | The ID of the bucket you want to query from, copied from the [Buckets page](https://docs.influxdata.com/influxdb/v2.0/organizations/buckets/view-buckets/) of the InfluxDB UI.                                                 |
+| `Database`          | The ID of the bucket you want to query from, copied from the [Buckets page](https://docs.influxdata.com/influxdb/v2.0/organizations/buckets/view-buckets/) of the InfluxDB UI.                           |
-| `User`              | The username you use to sign into InfluxDB.                                                                                                                                                                                    |
+| `User`              | The username you use to sign into InfluxDB.                                                                                                                                                              |
-| `Password`          | The token you use to query the bucket above, copied from the [Tokens page](https://docs.influxdata.com/influxdb/v2.0/security/tokens/view-tokens/) of the InfluxDB UI.                                                         |
+| `Password`          | The token you use to query the bucket above, copied from the [Tokens page](https://docs.influxdata.com/influxdb/v2.0/security/tokens/view-tokens/) of the InfluxDB UI.                                   |
-| `HTTP mode`         | How to query the database (`GET` or `POST` HTTP verb). The `POST` verb allows heavy queries that would return an error using the `GET` verb. Default is `GET`.                                                                 |
+| `HTTP mode`         | How to query the database (`GET` or `POST` HTTP verb). The `POST` verb allows heavy queries that would return an error using the `GET` verb. Default is `GET`.                                           |
-| `Min time interval` | (Optional) Refer to [Min time interval]({{< relref "#min-time-interval" >}}).                                                                                                                                                  |
+| `Min time interval` | (Optional) Refer to [Min time interval]({{< relref "#min-time-interval" >}}).                                                                                                                            |
-| `Max series`        | (Optional) Limits the number of series/tables that Grafana processes. Lower this number to prevent abuse, and increase it if you have lots of small time series and not all are shown. Defaults to 1000.                       |
+| `Max series`        | (Optional) Limits the number of series/tables that Grafana processes. Lower this number to prevent abuse, and increase it if you have lots of small time series and not all are shown. Defaults to 1000. |
 
 ### Flux
 

public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx

@@ -14,6 +14,7 @@ import {
 import { Alert, DataSourceHttpSettings, InfoBox, InlineField, InlineFormLabel, LegacyForms, Select } from '@grafana/ui';
 
 const { Input, SecretFormField } = LegacyForms;
+import { BROWSER_MODE_DISABLED_MESSAGE } from '../constants';
 import { InfluxOptions, InfluxSecureJsonData, InfluxVersion } from '../types';
 
 const httpModes = [
@@ -270,6 +271,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
 
   render() {
     const { options, onOptionsChange } = this.props;
+    const isDirectAccess = options.access === 'direct';
 
     return (
       <>
@@ -301,14 +303,14 @@ export class ConfigEditor extends PureComponent<Props, State> {
           </InfoBox>
         )}
 
-        {options.access === 'direct' && (
+        {isDirectAccess && (
-          <Alert title="Deprecation Notice" severity="warning">
+          <Alert title="Error" severity="error">
-            Browser access mode in the InfluxDB datasource is deprecated and will be removed in a future release.
+            {BROWSER_MODE_DISABLED_MESSAGE}
           </Alert>
         )}
 
         <DataSourceHttpSettings
-          showAccessOptions={true}
+          showAccessOptions={isDirectAccess}
           dataSourceConfig={options}
           defaultUrl="http://localhost:8086"
           onChange={onOptionsChange}

public/app/plugins/datasource/influxdb/components/__snapshots__/ConfigEditor.test.tsx.snap

@@ -81,7 +81,7 @@ exports[`Render should disable basic auth password input 1`] = `
     }
     defaultUrl="http://localhost:8086"
     onChange={[MockFunction]}
-    showAccessOptions={true}
+    showAccessOptions={false}
   />
   <div
     className="gf-form-group"
@@ -344,7 +344,7 @@ exports[`Render should hide basic auth fields when switch off 1`] = `
     }
     defaultUrl="http://localhost:8086"
     onChange={[MockFunction]}
-    showAccessOptions={true}
+    showAccessOptions={false}
   />
   <div
     className="gf-form-group"
@@ -607,7 +607,7 @@ exports[`Render should hide white listed cookies input when browser access chose
     }
     defaultUrl="http://localhost:8086"
     onChange={[MockFunction]}
-    showAccessOptions={true}
+    showAccessOptions={false}
   />
   <div
     className="gf-form-group"
@@ -870,7 +870,7 @@ exports[`Render should render component 1`] = `
     }
     defaultUrl="http://localhost:8086"
     onChange={[MockFunction]}
-    showAccessOptions={true}
+    showAccessOptions={false}
   />
   <div
     className="gf-form-group"

public/app/plugins/datasource/influxdb/constants.ts

@@ -0,0 +1,2 @@
+export const BROWSER_MODE_DISABLED_MESSAGE =
+  'Direct browser access in the InfluxDB datasource is no longer available. Switch to server access mode.';

public/app/plugins/datasource/influxdb/datasource.ts

@@ -31,6 +31,7 @@ import config from 'app/core/config';
 import { getTemplateSrv, TemplateSrv } from 'app/features/templating/template_srv';
 
 import { FluxQueryEditor } from './components/FluxQueryEditor';
+import { BROWSER_MODE_DISABLED_MESSAGE } from './constants';
 import InfluxQueryModel from './influx_query_model';
 import InfluxSeries from './influx_series';
 import { buildRawQuery } from './queryUtils';
@@ -123,6 +124,7 @@ export default class InfluxDatasource extends DataSourceWithBackend<InfluxQuery,
   responseParser: any;
   httpMode: string;
   isFlux: boolean;
+  isProxyAccess: boolean;
 
   constructor(
     instanceSettings: DataSourceInstanceSettings<InfluxOptions>,
@@ -147,6 +149,7 @@ export default class InfluxDatasource extends DataSourceWithBackend<InfluxQuery,
     this.httpMode = settingsData.httpMode || 'GET';
     this.responseParser = new ResponseParser();
     this.isFlux = settingsData.version === InfluxVersion.Flux;
+    this.isProxyAccess = instanceSettings.access === 'proxy';
 
     if (this.isFlux) {
       // When flux, use an annotation processor rather than the `annotationQuery` lifecycle
@@ -157,6 +160,10 @@ export default class InfluxDatasource extends DataSourceWithBackend<InfluxQuery,
   }
 
   query(request: DataQueryRequest<InfluxQuery>): Observable<DataQueryResponse> {
+    if (!this.isProxyAccess) {
+      const error = new Error(BROWSER_MODE_DISABLED_MESSAGE);
+      return throwError(() => error);
+    }
     // for not-flux queries we call `this.classicQuery`, and that
     // handles the is-hidden situation.
     // for the flux-case, we do the filtering here

public/app/plugins/datasource/influxdb/specs/datasource.test.ts

@@ -6,6 +6,7 @@ import { FetchResponse } from '@grafana/runtime';
 import config from 'app/core/config';
 import { backendSrv } from 'app/core/services/backend_srv'; // will use the version in __mocks__
 
+import { BROWSER_MODE_DISABLED_MESSAGE } from '../constants';
 import InfluxDatasource from '../datasource';
 
 //@ts-ignore
@@ -26,6 +27,7 @@ describe('InfluxDataSource', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     ctx.instanceSettings.url = '/api/datasources/proxy/1';
+    ctx.instanceSettings.access = 'proxy';
     ctx.ds = new InfluxDatasource(ctx.instanceSettings, templateSrv);
   });
 
@@ -124,6 +126,25 @@ describe('InfluxDataSource', () => {
     });
   });
 
+  describe('When getting a request after issuing a query using outdated Browser Mode', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+      ctx.instanceSettings.url = '/api/datasources/proxy/1';
+      ctx.instanceSettings.access = 'direct';
+      ctx.ds = new InfluxDatasource(ctx.instanceSettings, templateSrv);
+    });
+
+    it('throws an error', async () => {
+      try {
+        await lastValueFrom(ctx.ds.query({}));
+      } catch (err) {
+        if (err instanceof Error) {
+          expect(err.message).toBe(BROWSER_MODE_DISABLED_MESSAGE);
+        }
+      }
+    });
+  });
+
   describe('InfluxDataSource in POST query mode', () => {
     const ctx: any = {
       instanceSettings: { url: 'url', name: 'influxDb', jsonData: { httpMode: 'POST' } },