diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.test.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.test.tsx
new file mode 100644
index 00000000000..0f072dde808
--- /dev/null
+++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.test.tsx
@@ -0,0 +1,77 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { DataSourceHttpSettings } from '@grafana/ui';
+
+import { HttpSettingsProps } from './types';
+
+const setup = (propOverrides?: object) => {
+  const onChange = jest.fn();
+  const props: HttpSettingsProps = {
+    dataSourceConfig: {
+      id: 4,
+      uid: 'x',
+      orgId: 1,
+      name: 'gdev-influxdb',
+      type: 'influxdb',
+      typeName: 'Influxdb',
+      typeLogoUrl: '',
+      access: 'direct',
+      url: 'http://localhost:8086',
+      password: '',
+      user: 'grafana',
+      database: 'site',
+      basicAuth: false,
+      basicAuthUser: '',
+      basicAuthPassword: '',
+      withCredentials: false,
+      isDefault: false,
+      jsonData: {
+        timeInterval: '15s',
+        httpMode: 'GET',
+        keepCookies: ['cookie1', 'cookie2'],
+      },
+      secureJsonData: {
+        password: true,
+      },
+      secureJsonFields: {},
+      readOnly: true,
+    },
+    onChange,
+    ...propOverrides,
+    defaultUrl: '',
+  };
+
+  render(<DataSourceHttpSettings {...props} />);
+  return { onChange };
+};
+
+const SIGV4TestEditor = (props: { renderText: string }) => {
+  return <>{props.renderText}</>;
+};
+
+describe('DataSourceHttpSettings', () => {
+  it('should render SIGV4 label if SIGV4 is enabled', () => {
+    setup({ sigV4AuthToggleEnabled: true });
+    expect(screen.getByLabelText('SigV4 auth')).toBeInTheDocument();
+  });
+
+  it('should not render SIGV4 label if SIGV4 is not enabled', () => {
+    setup({ sigV4AuthToggleEnabled: false });
+    expect(screen.queryByText('SigV4 auth')).toBeNull();
+  });
+
+  it('should render SIGV4 editor if provided and SIGV4 is enabled', () => {
+    const expectedText = 'sigv4-test-editor';
+    setup({
+      sigV4AuthToggleEnabled: true,
+      renderSigV4Editor: <SIGV4TestEditor renderText={expectedText}></SIGV4TestEditor>,
+      dataSourceConfig: {
+        jsonData: {
+          sigV4Auth: true,
+        },
+      },
+    });
+    expect(screen.getByText(expectedText)).toBeInTheDocument();
+  });
+});
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
index f27e2bb2825..f65a405d359 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
+++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
@@ -17,7 +17,6 @@ import { TagsInput } from '../TagsInput/TagsInput';
 import { BasicAuthSettings } from './BasicAuthSettings';
 import { CustomHeadersSettings } from './CustomHeadersSettings';
 import { HttpProxySettings } from './HttpProxySettings';
-import { SigV4AuthSettings } from './SigV4AuthSettings';
 import { TLSAuthSettings } from './TLSAuthSettings';
 import { HttpSettingsProps } from './types';
 
@@ -71,6 +70,7 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = (props) => {
     sigV4AuthToggleEnabled,
     showForwardOAuthIdentityOption,
     azureAuthSettings,
+    renderSigV4Editor,
   } = props;
   let urlTooltip;
   const [isAccessHelpVisible, setIsAccessHelpVisible] = useState(false);
@@ -292,8 +292,7 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = (props) => {
           <azureAuthSettings.azureSettingsUI dataSourceConfig={dataSourceConfig} onChange={onChange} />
         )}
 
-        {dataSourceConfig.jsonData.sigV4Auth && sigV4AuthToggleEnabled && <SigV4AuthSettings {...props} />}
-
+        {dataSourceConfig.jsonData.sigV4Auth && sigV4AuthToggleEnabled && renderSigV4Editor}
         {(dataSourceConfig.jsonData.tlsAuth || dataSourceConfig.jsonData.tlsAuthWithCACert) && (
           <TLSAuthSettings dataSourceConfig={dataSourceConfig} onChange={onChange} />
         )}
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/SigV4AuthSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/SigV4AuthSettings.tsx
deleted file mode 100644
index 965721d9fc1..00000000000
--- a/packages/grafana-ui/src/components/DataSourceSettings/SigV4AuthSettings.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react';
-
-import {
-  AwsAuthDataSourceSecureJsonData,
-  AwsAuthDataSourceJsonData,
-  ConnectionConfig,
-  ConnectionConfigProps,
-} from '@grafana/aws-sdk';
-import { DataSourceSettings } from '@grafana/data';
-
-import { HttpSettingsBaseProps } from './types';
-
-export const SigV4AuthSettings: React.FC<HttpSettingsBaseProps> = (props) => {
-  const { dataSourceConfig, onChange } = props;
-
-  // The @grafana/aws-sdk ConnectionConfig is designed to be rendered in a ConfigEditor,
-  // taking DataSourcePluginOptionsEditorProps as props. We therefore need to map the props accordingly.
-  const connectionConfigProps: ConnectionConfigProps<AwsAuthDataSourceJsonData, AwsAuthDataSourceSecureJsonData> = {
-    onOptionsChange: (awsDataSourceSettings) => {
-      const dataSourceSettings: DataSourceSettings<any, any> = {
-        ...dataSourceConfig,
-        jsonData: {
-          ...dataSourceConfig.jsonData,
-          sigV4AuthType: awsDataSourceSettings.jsonData.authType,
-          sigV4Profile: awsDataSourceSettings.jsonData.profile,
-          sigV4AssumeRoleArn: awsDataSourceSettings.jsonData.assumeRoleArn,
-          sigV4ExternalId: awsDataSourceSettings.jsonData.externalId,
-          sigV4Region: awsDataSourceSettings.jsonData.defaultRegion,
-          sigV4Endpoint: awsDataSourceSettings.jsonData.endpoint,
-        },
-        secureJsonFields: {
-          sigV4AccessKey: awsDataSourceSettings.secureJsonFields?.accessKey,
-          sigV4SecretKey: awsDataSourceSettings.secureJsonFields?.secretKey,
-        },
-        secureJsonData: {
-          sigV4AccessKey: awsDataSourceSettings.secureJsonData?.accessKey,
-          sigV4SecretKey: awsDataSourceSettings.secureJsonData?.secretKey,
-        },
-      };
-      onChange(dataSourceSettings);
-    },
-    options: {
-      ...dataSourceConfig,
-      jsonData: {
-        ...dataSourceConfig.jsonData,
-        authType: dataSourceConfig.jsonData.sigV4AuthType,
-        profile: dataSourceConfig.jsonData.sigV4Profile,
-        assumeRoleArn: dataSourceConfig.jsonData.sigV4AssumeRoleArn,
-        externalId: dataSourceConfig.jsonData.sigV4ExternalId,
-        defaultRegion: dataSourceConfig.jsonData.sigV4Region,
-        endpoint: dataSourceConfig.jsonData.sigV4Endpoint,
-      },
-      secureJsonFields: {
-        accessKey: dataSourceConfig.secureJsonFields?.sigV4AccessKey,
-        secretKey: dataSourceConfig.secureJsonFields?.sigV4SecretKey,
-      },
-      secureJsonData: {
-        accessKey: dataSourceConfig.secureJsonData?.sigV4AccessKey,
-        secretKey: dataSourceConfig.secureJsonData?.sigV4SecretKey,
-      },
-    },
-  };
-
-  return (
-    <>
-      <div className="gf-form">
-        <h6>SigV4 Auth Details</h6>
-      </div>
-      <ConnectionConfig {...connectionConfigProps} skipHeader skipEndpoint></ConnectionConfig>
-    </>
-  );
-};
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/types.ts b/packages/grafana-ui/src/components/DataSourceSettings/types.ts
index c5c2cc4789a..8190332383d 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/types.ts
+++ b/packages/grafana-ui/src/components/DataSourceSettings/types.ts
@@ -37,4 +37,6 @@ export interface HttpSettingsProps extends HttpSettingsBaseProps {
   sigV4AuthToggleEnabled?: boolean;
   /** Azure authentication settings **/
   azureAuthSettings?: AzureAuthSettings;
+  /** If SIGV4 is enabled, provide an editor for SIGV4 connection config  **/
+  renderSigV4Editor?: React.ReactNode;
 }
diff --git a/public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.tsx b/public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.tsx
index 20a16e1ecf7..df512e5b7e0 100644
--- a/public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 
+import { SIGV4ConnectionConfig } from '@grafana/aws-sdk';
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
 import { Alert, DataSourceHttpSettings } from '@grafana/ui';
 import { config } from 'app/core/config';
@@ -41,13 +42,13 @@ export const ConfigEditor = (props: Props) => {
           {`Support for Elasticsearch versions after their end-of-life (currently versions < 7.10) was removed`}
         </Alert>
       )}
-
       <DataSourceHttpSettings
         defaultUrl="http://localhost:9200"
         dataSourceConfig={options}
         showAccessOptions
         onChange={onOptionsChange}
         sigV4AuthToggleEnabled={config.sigV4AuthEnabled}
+        renderSigV4Editor={<SIGV4ConnectionConfig {...props}></SIGV4ConnectionConfig>}
       />
 
       <ElasticDetails value={options} onChange={onOptionsChange} />
diff --git a/public/app/plugins/datasource/prometheus/configuration/ConfigEditor.tsx b/public/app/plugins/datasource/prometheus/configuration/ConfigEditor.tsx
index 1f10fde398f..692e7cfe24d 100644
--- a/public/app/plugins/datasource/prometheus/configuration/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/configuration/ConfigEditor.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { SIGV4ConnectionConfig } from '@grafana/aws-sdk';
 import { DataSourcePluginOptionsEditorProps, DataSourceSettings } from '@grafana/data';
 import { AlertingSettings, DataSourceHttpSettings, Alert } from '@grafana/ui';
 import { config } from 'app/core/config';
@@ -39,6 +40,7 @@ export const ConfigEditor = (props: Props) => {
         onChange={onOptionsChange}
         sigV4AuthToggleEnabled={config.sigV4AuthEnabled}
         azureAuthSettings={azureAuthSettings}
+        renderSigV4Editor={<SIGV4ConnectionConfig {...props}></SIGV4ConnectionConfig>}
       />
 
       <AlertingSettings<PromOptions>