Elasticsearch: HTTP settings migration (#72840)

* Elasticsearch: migrate data source http settings

* Elasticsearch: migrate data source http settings

* Remove test code

* Update unit test

* Connection settings: add url placeholder

* Elasticsearch config editor: improve on-change handling of custom auth

* Config editor: add missing oauthPassThru option

public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.test.tsx

@@ -15,7 +15,9 @@ describe('ConfigEditor', () => {
     render(<ConfigEditor onOptionsChange={() => {}} options={createDefaultConfigOptions()} />);
 
     // Check DataSourceHttpSettings are rendered
-    expect(screen.getByRole('heading', { name: 'HTTP' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Connection' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Authentication' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'Advanced HTTP settings' })).toBeInTheDocument();
 
     // Check ElasticDetails are rendered
     expect(screen.getByText('Elasticsearch details')).toBeInTheDocument();

public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.tsx

@@ -1,9 +1,17 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect } from 'react';
 
 import { SIGV4ConnectionConfig } from '@grafana/aws-sdk';
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
-import { ConfigSection, DataSourceDescription } from '@grafana/experimental';
-import { Alert, DataSourceHttpSettings } from '@grafana/ui';
+import {
+  AdvancedHttpSettings,
+  Auth,
+  AuthMethod,
+  ConfigSection,
+  ConnectionSettings,
+  convertLegacyAuthProps,
+  DataSourceDescription,
+} from '@grafana/experimental';
+import { Alert, SecureSocksProxySettings } from '@grafana/ui';
 import { Divider } from 'app/core/components/Divider';
 import { config } from 'app/core/config';
 
@@ -17,12 +25,6 @@ import { coerceOptions, isValidOptions } from './utils';
 export type Props = DataSourcePluginOptionsEditorProps<ElasticsearchOptions>;
 
 export const ConfigEditor = (props: Props) => {
-  // we decide on whether to show access options or not at the point when the config page opens.
-  // whatever happens while the page is open, this decision does not change.
-  // (we do this to avoid situations where you switch access-mode and suddenly
-  // the access-mode-select-box vanishes)
-  const showAccessOptions = useRef(props.options.access === 'direct');
-
   const { options, onOptionsChange } = props;
 
   useEffect(() => {
@@ -31,6 +33,22 @@ export const ConfigEditor = (props: Props) => {
     }
   }, [onOptionsChange, options]);
 
+  const authProps = convertLegacyAuthProps({
+    config: options,
+    onChange: onOptionsChange,
+  });
+  if (config.sigV4AuthEnabled) {
+    authProps.customMethods = [
+      {
+        id: 'custom-sigv4',
+        label: 'SigV4 auth',
+        description: 'AWS Signature Version 4 authentication',
+        component: <SIGV4ConnectionConfig inExperimentalAuthComponent={true} {...props} />,
+      },
+    ];
+    authProps.selectedMethod = options.jsonData.sigV4Auth ? 'custom-sigv4' : authProps.selectedMethod;
+  }
+
   return (
     <>
       {options.access === 'direct' && (
@@ -43,27 +61,36 @@ export const ConfigEditor = (props: Props) => {
         docsLink="https://grafana.com/docs/grafana/latest/datasources/elasticsearch"
         hasRequiredFields={false}
       />
-
       <Divider />
-
-      <DataSourceHttpSettings
-        defaultUrl="http://localhost:9200"
-        dataSourceConfig={options}
-        showAccessOptions={showAccessOptions.current}
-        onChange={onOptionsChange}
-        sigV4AuthToggleEnabled={config.sigV4AuthEnabled}
-        renderSigV4Editor={<SIGV4ConnectionConfig {...props}></SIGV4ConnectionConfig>}
-        secureSocksDSProxyEnabled={config.secureSocksDSProxyEnabled}
+      <ConnectionSettings config={options} onChange={onOptionsChange} urlPlaceholder="http://localhost:9200" />
+      <Divider />
+      <Auth
+        {...authProps}
+        onAuthMethodSelect={(method) => {
+          onOptionsChange({
+            ...options,
+            basicAuth: method === AuthMethod.BasicAuth,
+            withCredentials: method === AuthMethod.CrossSiteCredentials,
+            jsonData: {
+              ...options.jsonData,
+              sigV4Auth: method === 'custom-sigv4',
+              oauthPassThru: method === AuthMethod.OAuthForward,
+            },
+          });
+        }}
       />
-
       <Divider />
-
       <ConfigSection
         title="Additional settings"
         description="Additional settings are optional settings that can be configured for more control over your data source."
         isCollapsible={true}
         isInitiallyOpen
       >
+        <AdvancedHttpSettings config={options} onChange={onOptionsChange} />
+        <Divider hideLine />
+        {config.secureSocksDSProxyEnabled && (
+          <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+        )}
         <ElasticDetails value={options} onChange={onOptionsChange} />
         <Divider hideLine />
         <LogsConfig

public/app/plugins/datasource/elasticsearch/types.ts

@@ -64,6 +64,8 @@ export interface ElasticsearchOptions extends DataSourceJsonData {
   dataLinks?: DataLinkConfig[];
   includeFrozen?: boolean;
   index?: string;
+  sigV4Auth?: boolean;
+  oauthPassThru?: boolean;
 }
 
 export type QueryType = 'metrics' | 'logs' | 'raw_data' | 'raw_document';