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

2 years ago · 0a1f31814a
parent 0c8a2bbfd5
commit 0a1f31814a
13 changed files with 106 additions and 58 deletions
--- a/packages/grafana-ui/src/components/DataSourceSettings/SecureSocksProxySettings.tsx
+++ 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>
+    </>
+  );
+}
--- 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';
--- 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
--- 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">
--- 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>
--- 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>
--- 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} />
--- 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 {
--- 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} />
    </>
  );
--- 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} />
--- 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;
 }

--- 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>
--- 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>