Plugins: add UI toggle for additional datasources for secure socks proxy (#64934)

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

@@ -2,7 +2,8 @@ import React, { PureComponent } from 'react';
 
 import { DataSourcePluginOptionsEditorProps, SelectableValue, updateDatasourcePluginOption } from '@grafana/data';
 import { getBackendSrv, getTemplateSrv, isFetchError, TemplateSrv } from '@grafana/runtime';
-import { Alert } from '@grafana/ui';
+import { Alert, SecureSocksProxySettings } from '@grafana/ui';
+import { config } from 'app/core/config';
 
 import ResponseParser from '../azure_monitor/response_parser';
 import { AzureDataSourceJsonData, AzureDataSourceSecureJsonData, AzureDataSourceSettings } from '../types';
@@ -84,7 +85,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
   };
 
   render() {
-    const { options } = this.props;
+    const { options, onOptionsChange } = this.props;
     const { error } = this.state;
 
     return (
@@ -96,6 +97,9 @@ export class ConfigEditor extends PureComponent<Props, State> {
             {error.details && <details style={{ whiteSpace: 'pre-wrap' }}>{error.details}</details>}
           </Alert>
         )}
+        {config.featureToggles.secureSocksDatasourceProxy && (
+          <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+        )}
       </>
     );
   }

public/app/plugins/datasource/cloud-monitoring/components/ConfigEditor/ConfigEditor.tsx

@@ -2,6 +2,8 @@ import React, { PureComponent } from 'react';
 
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
 import { ConnectionConfig } from '@grafana/google-sdk';
+import { SecureSocksProxySettings } from '@grafana/ui';
+import { config } from 'app/core/config';
 
 import { CloudMonitoringOptions, CloudMonitoringSecureJsonData } from '../../types';
 
@@ -9,9 +11,13 @@ export type Props = DataSourcePluginOptionsEditorProps<CloudMonitoringOptions, C
 
 export class ConfigEditor extends PureComponent<Props> {
   render() {
+    const { options, onOptionsChange } = this.props;
     return (
       <>
         <ConnectionConfig {...this.props}></ConnectionConfig>
+        {config.featureToggles.secureSocksDatasourceProxy && (
+          <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+        )}
       </>
     );
   }

public/app/plugins/datasource/parca/ConfigEditor.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
-import { DataSourceHttpSettings } from '@grafana/ui';
+import { DataSourceHttpSettings, SecureSocksProxySettings } from '@grafana/ui';
+import { config } from 'app/core/config';
 
 import { ParcaDataSourceOptions } from './types';
 
@@ -18,6 +19,9 @@ export const ConfigEditor = (props: Props) => {
         showAccessOptions={false}
         onChange={onOptionsChange}
       />
+      {config.featureToggles.secureSocksDatasourceProxy && (
+        <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+      )}
     </>
   );
 };

public/app/plugins/datasource/phlare/ConfigEditor.tsx

@@ -1,7 +1,14 @@
 import React from 'react';
 
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
-import { DataSourceHttpSettings, EventsWithValidation, LegacyForms, regexValidation } from '@grafana/ui';
+import {
+  DataSourceHttpSettings,
+  EventsWithValidation,
+  LegacyForms,
+  regexValidation,
+  SecureSocksProxySettings,
+} from '@grafana/ui';
+import { config } from 'app/core/config';
 
 import { PhlareDataSourceOptions } from './types';
 
@@ -19,6 +26,9 @@ export const ConfigEditor = (props: Props) => {
         onChange={onOptionsChange}
       />
 
+      {config.featureToggles.secureSocksDatasourceProxy && (
+        <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+      )}
       <h3 className="page-heading">Querying</h3>
       <div className="gf-form-group">
         <div className="gf-form-inline">