From 0a1f31814a1b9b9749db8fd55aa7348252fb4915 Mon Sep 17 00:00:00 2001
From: Stephanie Hingtgen <stephanie.hingtgen@grafana.com>
Date: Wed, 25 Jan 2023 09:39:17 -0600
Subject: [PATCH] Plugins: add UI for more supported datasources with secure
 socks proxy feature toggle (#61962)

---
 .../SecureSocksProxySettings.tsx              | 45 +++++++++++++++++++
 packages/grafana-ui/src/components/index.ts   |  1 +
 .../configuration/ConfigEditor.tsx            |  6 ++-
 .../graphite/configuration/ConfigEditor.tsx   | 13 +++++-
 .../influxdb/components/ConfigEditor.tsx      | 16 ++++++-
 .../jaeger/components/ConfigEditor.tsx        |  6 ++-
 .../loki/configuration/ConfigEditor.tsx       | 28 ++----------
 public/app/plugins/datasource/loki/types.ts   |  1 -
 .../opentsdb/components/ConfigEditor.tsx      |  6 ++-
 .../prometheus/configuration/ConfigEditor.tsx | 29 ++----------
 .../plugins/datasource/prometheus/types.ts    |  1 -
 .../tempo/configuration/ConfigEditor.tsx      |  6 ++-
 .../datasource/zipkin/ConfigEditor.tsx        |  6 ++-
 13 files changed, 106 insertions(+), 58 deletions(-)
 create mode 100644 packages/grafana-ui/src/components/DataSourceSettings/SecureSocksProxySettings.tsx

diff --git a/packages/grafana-ui/src/components/DataSourceSettings/SecureSocksProxySettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/SecureSocksProxySettings.tsx
new file mode 100644
index 00000000000..79e244a99b3
--- /dev/null
+++ b/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>
+    </>
+  );
+}
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index 154e11ad566..37afc91a265 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/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';
diff --git a/public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.tsx b/public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.tsx
index eb288ebc49d..93b20ad676d 100644
--- a/public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.tsx
+++ b/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
diff --git a/public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx b/public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx
index d0fdf8c752b..acdd562496f 100644
--- a/public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx
+++ b/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">
diff --git a/public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx b/public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx
index 7918fc0546b..331f5fed3c2 100644
--- a/public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx
+++ b/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>
diff --git a/public/app/plugins/datasource/jaeger/components/ConfigEditor.tsx b/public/app/plugins/datasource/jaeger/components/ConfigEditor.tsx
index 2ad3f9865f7..6b20122169d 100644
--- a/public/app/plugins/datasource/jaeger/components/ConfigEditor.tsx
+++ b/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>
diff --git a/public/app/plugins/datasource/loki/configuration/ConfigEditor.tsx b/public/app/plugins/datasource/loki/configuration/ConfigEditor.tsx
index 64403d5328d..73706113841 100644
--- a/public/app/plugins/datasource/loki/configuration/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/loki/configuration/ConfigEditor.tsx
@@ -1,12 +1,8 @@
 import React from 'react';
 
-import {
-  DataSourcePluginOptionsEditorProps,
-  DataSourceSettings,
-  onUpdateDatasourceJsonDataOptionChecked,
-} from '@grafana/data';
+import { DataSourcePluginOptionsEditorProps, DataSourceSettings } 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 && (
-        <>
-          <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>
-        </>
+      {config.featureToggles.secureSocksDatasourceProxy && (
+        <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
       )}
 
       <AlertingSettings<LokiOptions> options={options} onOptionsChange={onOptionsChange} />
diff --git a/public/app/plugins/datasource/loki/types.ts b/public/app/plugins/datasource/loki/types.ts
index 574d3e1a52f..ec900a654ab 100644
--- a/public/app/plugins/datasource/loki/types.ts
+++ b/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 {
diff --git a/public/app/plugins/datasource/opentsdb/components/ConfigEditor.tsx b/public/app/plugins/datasource/opentsdb/components/ConfigEditor.tsx
index fc0cf8395cf..061a37acbf9 100644
--- a/public/app/plugins/datasource/opentsdb/components/ConfigEditor.tsx
+++ b/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} />
     </>
   );
diff --git a/public/app/plugins/datasource/prometheus/configuration/ConfigEditor.tsx b/public/app/plugins/datasource/prometheus/configuration/ConfigEditor.tsx
index f1ca5d5806a..65aa4a669a1 100644
--- a/public/app/plugins/datasource/prometheus/configuration/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/configuration/ConfigEditor.tsx
@@ -1,12 +1,8 @@
 import React, { useRef } from 'react';
 
 import { SIGV4ConnectionConfig } from '@grafana/aws-sdk';
-import {
-  DataSourcePluginOptionsEditorProps,
-  DataSourceSettings,
-  onUpdateDatasourceJsonDataOptionChecked,
-} from '@grafana/data';
-import { AlertingSettings, DataSourceHttpSettings, Alert, InlineField, InlineSwitch } from '@grafana/ui';
+import { DataSourcePluginOptionsEditorProps, DataSourceSettings } from '@grafana/data';
+import { AlertingSettings, DataSourceHttpSettings, Alert, SecureSocksProxySettings } 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 && (
-        <>
-          <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>
-        </>
+      {config.featureToggles.secureSocksDatasourceProxy && (
+        <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
       )}
 
       <AlertingSettings<PromOptions> options={options} onOptionsChange={onOptionsChange} />
diff --git a/public/app/plugins/datasource/prometheus/types.ts b/public/app/plugins/datasource/prometheus/types.ts
index 3fbede5a34c..62aec75433b 100644
--- a/public/app/plugins/datasource/prometheus/types.ts
+++ b/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;
 }
 
diff --git a/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx b/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx
index 32f633a5414..b883cc8e611 100644
--- a/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx
+++ b/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>
diff --git a/public/app/plugins/datasource/zipkin/ConfigEditor.tsx b/public/app/plugins/datasource/zipkin/ConfigEditor.tsx
index b6fc6fe8255..f3621bfef59 100644
--- a/public/app/plugins/datasource/zipkin/ConfigEditor.tsx
+++ b/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>