Plugins: add UI for more supported datasources with secure socks proxy feature toggle (#61962)

packages/grafana-ui/src/components/DataSourceSettings/SecureSocksProxySettings.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { DataSourceJsonData, DataSourcePluginOptionsEditorProps } from '@grafana/data';
+
+import { InlineSwitch } from '../../components/Switch/Switch';
+import { InlineField } from '../Forms/InlineField';
+
+export interface Props<T extends DataSourceJsonData>
+  extends Pick<DataSourcePluginOptionsEditorProps<T>, 'options' | 'onOptionsChange'> {}
+
+export interface SecureSocksProxyConfig extends DataSourceJsonData {
+  enableSecureSocksProxy?: boolean;
+}
+
+export function SecureSocksProxySettings<T extends SecureSocksProxyConfig>({
+  options,
+  onOptionsChange,
+}: Props<T>): JSX.Element {
+  return (
+    <>
+      <h3 className="page-heading">Secure Socks Proxy</h3>
+      <div className="gf-form-group">
+        <div className="gf-form-inline">
+          <div className="gf-form">
+            <InlineField
+              labelWidth={26}
+              label="Enabled"
+              tooltip="Connect to this datasource via the secure socks proxy."
+            >
+              <InlineSwitch
+                value={options.jsonData.enableSecureSocksProxy ?? false}
+                onChange={(event) =>
+                  onOptionsChange({
+                    ...options,
+                    jsonData: { ...options.jsonData, enableSecureSocksProxy: event!.currentTarget.checked },
+                  })
+                }
+              />
+            </InlineField>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

packages/grafana-ui/src/components/index.ts

@@ -185,6 +185,7 @@ export {
 export { ErrorWithStack } from './ErrorBoundary/ErrorWithStack';
 export { DataSourceHttpSettings } from './DataSourceSettings/DataSourceHttpSettings';
 export { AlertingSettings } from './DataSourceSettings/AlertingSettings';
+export { SecureSocksProxySettings } from './DataSourceSettings/SecureSocksProxySettings';
 export { TLSAuthSettings } from './DataSourceSettings/TLSAuthSettings';
 export { CertificationKey } from './DataSourceSettings/CertificationKey';
 export { Spinner } from './Spinner/Spinner';

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

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
 
 import { SIGV4ConnectionConfig } from '@grafana/aws-sdk';
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
-import { Alert, DataSourceHttpSettings } from '@grafana/ui';
+import { Alert, DataSourceHttpSettings, SecureSocksProxySettings } from '@grafana/ui';
 import { config } from 'app/core/config';
 
 import { ElasticsearchOptions } from '../types';
@@ -57,6 +57,10 @@ export const ConfigEditor = (props: Props) => {
         renderSigV4Editor={<SIGV4ConnectionConfig {...props}></SIGV4ConnectionConfig>}
       />
 
+      {config.featureToggles.secureSocksDatasourceProxy && (
+        <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+      )}
+
       <ElasticDetails value={options} onChange={onOptionsChange} />
 
       <LogsConfig

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

@@ -6,7 +6,15 @@ import {
   onUpdateDatasourceJsonDataOptionSelect,
   onUpdateDatasourceJsonDataOptionChecked,
 } from '@grafana/data';
-import { Alert, DataSourceHttpSettings, InlineFormLabel, LegacyForms, Select } from '@grafana/ui';
+import {
+  Alert,
+  DataSourceHttpSettings,
+  InlineFormLabel,
+  LegacyForms,
+  Select,
+  SecureSocksProxySettings,
+} from '@grafana/ui';
+import { config } from 'app/core/config';
 import store from 'app/core/store';
 
 import { GraphiteOptions, GraphiteType } from '../types';
@@ -75,6 +83,9 @@ export class ConfigEditor extends PureComponent<Props, State> {
           dataSourceConfig={options}
           onChange={onOptionsChange}
         />
+        {config.featureToggles.secureSocksDatasourceProxy && (
+          <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+        )}
         <h3 className="page-heading">Graphite details</h3>
         <div className="gf-form-group">
           <div className="gf-form-inline">

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

@@ -11,7 +11,17 @@ import {
   onUpdateDatasourceSecureJsonDataOption,
   updateDatasourcePluginJsonDataOption,
 } from '@grafana/data';
-import { Alert, DataSourceHttpSettings, InfoBox, InlineField, InlineFormLabel, LegacyForms, Select } from '@grafana/ui';
+import {
+  Alert,
+  DataSourceHttpSettings,
+  InfoBox,
+  InlineField,
+  InlineFormLabel,
+  LegacyForms,
+  Select,
+  SecureSocksProxySettings,
+} from '@grafana/ui';
+import { config } from 'app/core/config';
 
 const { Input, SecretFormField } = LegacyForms;
 import { BROWSER_MODE_DISABLED_MESSAGE } from '../constants';
@@ -316,6 +326,10 @@ export class ConfigEditor extends PureComponent<Props, State> {
           onChange={onOptionsChange}
         />
 
+        {config.featureToggles.secureSocksDatasourceProxy && (
+          <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+        )}
+
         <div className="gf-form-group">
           <div>
             <h3 className="page-heading">InfluxDB Details</h3>

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { DataSourceHttpSettings } from '@grafana/ui';
+import { DataSourceHttpSettings, SecureSocksProxySettings } from '@grafana/ui';
 import { SpanBarSettings } from '@jaegertracing/jaeger-ui-components';
 import { NodeGraphSettings } from 'app/core/components/NodeGraphSettings';
 import { TraceToLogsSettings } from 'app/core/components/TraceToLogs/TraceToLogsSettings';
@@ -20,6 +20,10 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
         onChange={onOptionsChange}
       />
 
+      {config.featureToggles.secureSocksDatasourceProxy && (
+        <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+      )}
+
       <div className="gf-form-group">
         <TraceToLogsSettings options={options} onOptionsChange={onOptionsChange} />
       </div>

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

@@ -1,12 +1,8 @@
 import React from 'react';
 
-import {
+import { DataSourcePluginOptionsEditorProps, DataSourceSettings } from '@grafana/data';
-  DataSourcePluginOptionsEditorProps,
-  DataSourceSettings,
-  onUpdateDatasourceJsonDataOptionChecked,
-} from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { AlertingSettings, DataSourceHttpSettings, InlineField, InlineSwitch } from '@grafana/ui';
+import { AlertingSettings, DataSourceHttpSettings, SecureSocksProxySettings } from '@grafana/ui';
 
 import { LokiOptions } from '../types';
 
@@ -32,7 +28,6 @@ const setDerivedFields = makeJsonUpdater('derivedFields');
 
 export const ConfigEditor = (props: Props) => {
   const { options, onOptionsChange } = props;
-  const socksProxy = config.featureToggles.secureSocksDatasourceProxy;
 
   return (
     <>
@@ -43,23 +38,8 @@ export const ConfigEditor = (props: Props) => {
         onChange={onOptionsChange}
       />
 
-      {socksProxy && (
+      {config.featureToggles.secureSocksDatasourceProxy && (
-        <>
+        <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
-          <h3 className="page-heading">Secure Socks Proxy</h3>
-          <div className="gf-form-group">
-            <div className="gf-form-inline"></div>
-            <InlineField
-              labelWidth={28}
-              label="Enabled"
-              tooltip="Connect to this datasource via the secure socks proxy."
-            >
-              <InlineSwitch
-                value={options.jsonData.enableSecureSocksProxy ?? false}
-                onChange={onUpdateDatasourceJsonDataOptionChecked(props, 'enableSecureSocksProxy')}
-              />
-            </InlineField>
-          </div>
-        </>
       )}
 
       <AlertingSettings<LokiOptions> options={options} onOptionsChange={onOptionsChange} />

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

@@ -56,7 +56,6 @@ export interface LokiOptions extends DataSourceJsonData {
   derivedFields?: DerivedFieldConfig[];
   alertmanager?: string;
   keepCookies?: string[];
-  enableSecureSocksProxy?: boolean;
 }
 
 export interface LokiStats {

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

@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
-import { DataSourceHttpSettings } from '@grafana/ui';
+import { config } from '@grafana/runtime';
+import { DataSourceHttpSettings, SecureSocksProxySettings } from '@grafana/ui';
 
 import { OpenTsdbOptions } from '../types';
 
@@ -17,6 +18,9 @@ export const ConfigEditor = (props: DataSourcePluginOptionsEditorProps<OpenTsdbO
         dataSourceConfig={options}
         onChange={onOptionsChange}
       />
+      {config.featureToggles.secureSocksDatasourceProxy && (
+        <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+      )}
       <OpenTsdbDetails value={options} onChange={onOptionsChange} />
     </>
   );

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

@@ -1,12 +1,8 @@
 import React, { useRef } from 'react';
 
 import { SIGV4ConnectionConfig } from '@grafana/aws-sdk';
-import {
+import { DataSourcePluginOptionsEditorProps, DataSourceSettings } from '@grafana/data';
-  DataSourcePluginOptionsEditorProps,
+import { AlertingSettings, DataSourceHttpSettings, Alert, SecureSocksProxySettings } from '@grafana/ui';
-  DataSourceSettings,
-  onUpdateDatasourceJsonDataOptionChecked,
-} from '@grafana/data';
-import { AlertingSettings, DataSourceHttpSettings, Alert, InlineField, InlineSwitch } from '@grafana/ui';
 import { config } from 'app/core/config';
 
 import { PromOptions } from '../types';
@@ -29,8 +25,6 @@ export const ConfigEditor = (props: Props) => {
     azureSettingsUI: AzureAuthSettings,
   };
 
-  const socksProxy = config.featureToggles.secureSocksDatasourceProxy;
-
   return (
     <>
       {options.access === 'direct' && (
@@ -49,23 +43,8 @@ export const ConfigEditor = (props: Props) => {
         renderSigV4Editor={<SIGV4ConnectionConfig {...props}></SIGV4ConnectionConfig>}
       />
 
-      {socksProxy && (
+      {config.featureToggles.secureSocksDatasourceProxy && (
-        <>
+        <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
-          <h3 className="page-heading">Secure Socks Proxy</h3>
-          <div className="gf-form-group">
-            <div className="gf-form-inline"></div>
-            <InlineField
-              labelWidth={28}
-              label="Enabled"
-              tooltip="Connect to this datasource via the secure socks proxy."
-            >
-              <InlineSwitch
-                value={options.jsonData.enableSecureSocksProxy ?? false}
-                onChange={onUpdateDatasourceJsonDataOptionChecked(props, 'enableSecureSocksProxy')}
-              />
-            </InlineField>
-          </div>
-        </>
       )}
 
       <AlertingSettings<PromOptions> options={options} onOptionsChange={onOptionsChange} />

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

@@ -34,7 +34,6 @@ export interface PromOptions extends DataSourceJsonData {
   exemplarTraceIdDestinations?: ExemplarTraceIdDestination[];
   prometheusType?: PromApplication;
   prometheusVersion?: string;
-  enableSecureSocksProxy?: boolean;
   defaultEditor?: QueryEditorMode;
 }
 

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { DataSourceHttpSettings } from '@grafana/ui';
+import { DataSourceHttpSettings, SecureSocksProxySettings } from '@grafana/ui';
 import { SpanBarSettings } from '@jaegertracing/jaeger-ui-components';
 import { NodeGraphSettings } from 'app/core/components/NodeGraphSettings';
 import { TraceToLogsSettings } from 'app/core/components/TraceToLogs/TraceToLogsSettings';
@@ -25,6 +25,10 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
         onChange={onOptionsChange}
       />
 
+      {config.featureToggles.secureSocksDatasourceProxy && (
+        <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+      )}
+
       <div className="gf-form-group">
         <TraceToLogsSettings options={options} onOptionsChange={onOptionsChange} />
       </div>

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { DataSourceHttpSettings } from '@grafana/ui';
+import { DataSourceHttpSettings, SecureSocksProxySettings } from '@grafana/ui';
 import { SpanBarSettings } from '@jaegertracing/jaeger-ui-components';
 import { NodeGraphSettings } from 'app/core/components/NodeGraphSettings';
 import { TraceToLogsSettings } from 'app/core/components/TraceToLogs/TraceToLogsSettings';
@@ -20,6 +20,10 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
         onChange={onOptionsChange}
       />
 
+      {config.featureToggles.secureSocksDatasourceProxy && (
+        <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+      )}
+
       <div className="gf-form-group">
         <TraceToLogsSettings options={options} onOptionsChange={onOptionsChange} />
       </div>