Datasources: Upgrade data source configs for several data sources (#89365)

Upgrade data source configs for several data sources
2024-11-22 08:56:43 -06:00 · 2024-06-19 13:39:41 +01:00 · 2024-06-19 13:39:41 +01:00 · d928fac5c3
commit d928fac5c3
parent ceaf510a7d
6 changed files with 174 additions and 68 deletions
--- a/.betterer.results
+++ b/.betterer.results
@ -6656,9 +6656,6 @@ exports[`better eslint`] = {
    "public/app/plugins/datasource/jaeger/components/QueryEditor.tsx:5381": [
      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
    ],
-    "public/app/plugins/datasource/jaeger/configuration/ConfigEditor.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
    "public/app/plugins/datasource/jaeger/configuration/TraceIdTimeParams.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"]
@ -6874,9 +6871,6 @@ exports[`better eslint`] = {
    "public/app/plugins/datasource/tempo/webpack.config.ts:5381": [
      [0, 0, 0, "Do not re-export imported variable (\`config\`)", "0"]
    ],
-    "public/app/plugins/datasource/zipkin/ConfigEditor.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
    "public/app/plugins/datasource/zipkin/QueryField.tsx:5381": [
      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
      [0, 0, 0, "Do not use any type assertions.", "1"],
@ -7984,11 +7978,6 @@ exports[`no gf-form usage`] = {
    "public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx:5381": [
      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
    ],
-    "public/app/plugins/datasource/grafana-pyroscope-datasource/ConfigEditor.tsx:5381": [
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
-    ],
    "public/app/plugins/datasource/influxdb/components/editor/annotation/AnnotationEditor.tsx:5381": [
      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
    ],
--- a/public/app/plugins/datasource/grafana-pyroscope-datasource/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/grafana-pyroscope-datasource/ConfigEditor.tsx
@ -1,8 +1,26 @@
+import { css } from '@emotion/css';
 import React from 'react';

-import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
+import { DataSourcePluginOptionsEditorProps, GrafanaTheme2 } from '@grafana/data';
+import {
+  AdvancedHttpSettings,
+  Auth,
+  ConfigSection,
+  ConfigSubSection,
+  ConnectionSettings,
+  DataSourceDescription,
+  convertLegacyAuthProps,
+} from '@grafana/experimental';
 import { config } from '@grafana/runtime';
-import { DataSourceHttpSettings, EventsWithValidation, LegacyForms, regexValidation } from '@grafana/ui';
+import {
+  Divider,
+  EventsWithValidation,
+  LegacyForms,
+  SecureSocksProxySettings,
+  Stack,
+  regexValidation,
+  useStyles2,
+} from '@grafana/ui';

 import { PyroscopeDataSourceOptions } from './types';

@ -10,21 +28,43 @@ interface Props extends DataSourcePluginOptionsEditorProps<PyroscopeDataSourceOp

 export const ConfigEditor = (props: Props) => {
  const { options, onOptionsChange } = props;
+  const styles = useStyles2(getStyles);

  return (
-    <>
-      <DataSourceHttpSettings
-        defaultUrl={'http://localhost:4040'}
-        dataSourceConfig={options}
-        showAccessOptions={false}
-        onChange={onOptionsChange}
-        secureSocksDSProxyEnabled={config.secureSocksDSProxyEnabled}
+    <div className={styles.container}>
+      <DataSourceDescription
+        dataSourceName="Pyroscope"
+        docsLink="https://grafana.com/docs/grafana/latest/datasources/pyroscope"
+        hasRequiredFields={false}
      />

-      <h3 className="page-heading">Querying</h3>
-      <div className="gf-form-group">
-        <div className="gf-form-inline">
-          <div className="gf-form">
+      <Divider spacing={4} />
+
+      <ConnectionSettings config={options} onChange={onOptionsChange} urlPlaceholder="http://localhost:4040" />
+
+      <Divider spacing={4} />
+      <Auth
+        {...convertLegacyAuthProps({
+          config: options,
+          onChange: onOptionsChange,
+        })}
+      />
+
+      <Divider spacing={4} />
+      <ConfigSection
+        title="Additional settings"
+        description="Additional settings are optional settings that can be configured for more control over your data source."
+        isCollapsible={true}
+        isInitiallyOpen={false}
+      >
+        <Stack gap={5} direction="column">
+          <AdvancedHttpSettings config={options} onChange={onOptionsChange} />
+
+          {config.secureSocksDSProxyEnabled && (
+            <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+          )}
+
+          <ConfigSubSection title="Querying">
            <LegacyForms.FormField
              label="Minimal step"
              labelWidth={13}
@ -55,9 +95,16 @@ export const ConfigEditor = (props: Props) => {
              }
              tooltip="Minimal step used for metric query. Should be the same or higher as the scrape interval setting in the Pyroscope database."
            />
-          </div>
-        </div>
-      </div>
-    </>
+          </ConfigSubSection>
+        </Stack>
+      </ConfigSection>
+    </div>
  );
 };
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  container: css({
+    marginBottom: theme.spacing(2),
+    maxWidth: '900px',
+  }),
+});
--- a/public/app/plugins/datasource/jaeger/configuration/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/jaeger/configuration/ConfigEditor.tsx
@ -2,10 +2,17 @@ import { css } from '@emotion/css';
 import React from 'react';

 import { DataSourcePluginOptionsEditorProps, GrafanaTheme2 } from '@grafana/data';
-import { ConfigSection, DataSourceDescription } from '@grafana/experimental';
+import {
+  AdvancedHttpSettings,
+  Auth,
+  ConfigSection,
+  ConnectionSettings,
+  DataSourceDescription,
+  convertLegacyAuthProps,
+} from '@grafana/experimental';
 import { NodeGraphSection, SpanBarSection, TraceToLogsSection, TraceToMetricsSection } from '@grafana/o11y-ds-frontend';
 import { config } from '@grafana/runtime';
-import { DataSourceHttpSettings, useStyles2, Divider, Stack } from '@grafana/ui';
+import { useStyles2, Divider, Stack, SecureSocksProxySettings } from '@grafana/ui';

 import { TraceIdTimeParams } from './TraceIdTimeParams';

@ -24,14 +31,17 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {

      <Divider spacing={4} />

-      <DataSourceHttpSettings
-        defaultUrl="http://localhost:16686"
-        dataSourceConfig={options}
-        showAccessOptions={false}
-        onChange={onOptionsChange}
-        secureSocksDSProxyEnabled={config.secureSocksDSProxyEnabled}
+      <ConnectionSettings config={options} onChange={onOptionsChange} urlPlaceholder="http://localhost:16686" />
+
+      <Divider spacing={4} />
+      <Auth
+        {...convertLegacyAuthProps({
+          config: options,
+          onChange: onOptionsChange,
+        })}
      />

+      <Divider spacing={4} />
      <TraceToLogsSection options={options} onOptionsChange={onOptionsChange} />
      <Divider spacing={4} />

@ -45,6 +55,12 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
        isInitiallyOpen={false}
      >
        <Stack gap={5} direction="column">
+          <AdvancedHttpSettings config={options} onChange={onOptionsChange} />
+
+          {config.secureSocksDSProxyEnabled && (
+            <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+          )}
+
          <NodeGraphSection options={options} onOptionsChange={onOptionsChange} />
          <SpanBarSection options={options} onOptionsChange={onOptionsChange} />
          <TraceIdTimeParams options={options} onOptionsChange={onOptionsChange} />
@ -55,9 +71,8 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
 };

 const getStyles = (theme: GrafanaTheme2) => ({
-  container: css`
-    label: container;
-    margin-bottom: ${theme.spacing(2)};
-    max-width: 900px;
-  `,
+  container: css({
+    marginBottom: theme.spacing(2),
+    maxWidth: '900px',
+  }),
 });
--- a/public/app/plugins/datasource/parca/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/parca/ConfigEditor.tsx
@ -1,8 +1,17 @@
+import { css } from '@emotion/css';
 import React from 'react';

-import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
+import { DataSourcePluginOptionsEditorProps, GrafanaTheme2 } from '@grafana/data';
+import {
+  AdvancedHttpSettings,
+  Auth,
+  ConfigSection,
+  ConnectionSettings,
+  DataSourceDescription,
+  convertLegacyAuthProps,
+} from '@grafana/experimental';
 import { config } from '@grafana/runtime';
-import { DataSourceHttpSettings } from '@grafana/ui';
+import { Divider, SecureSocksProxySettings, Stack, useStyles2 } from '@grafana/ui';

 import { ParcaDataSourceOptions } from './types';

@ -10,16 +19,50 @@ interface Props extends DataSourcePluginOptionsEditorProps<ParcaDataSourceOption

 export const ConfigEditor = (props: Props) => {
  const { options, onOptionsChange } = props;
+  const styles = useStyles2(getStyles);

  return (
-    <>
-      <DataSourceHttpSettings
-        defaultUrl={'http://localhost:7070'}
-        dataSourceConfig={options}
-        showAccessOptions={false}
-        onChange={onOptionsChange}
-        secureSocksDSProxyEnabled={config.secureSocksDSProxyEnabled}
+    <div className={styles.container}>
+      <DataSourceDescription
+        dataSourceName="Parca"
+        docsLink="https://grafana.com/docs/grafana/latest/datasources/parca"
+        hasRequiredFields={false}
      />
-    </>
+
+      <Divider spacing={4} />
+
+      <ConnectionSettings config={options} onChange={onOptionsChange} urlPlaceholder="http://localhost:7070" />
+
+      <Divider spacing={4} />
+      <Auth
+        {...convertLegacyAuthProps({
+          config: options,
+          onChange: onOptionsChange,
+        })}
+      />
+
+      <Divider spacing={4} />
+      <ConfigSection
+        title="Additional settings"
+        description="Additional settings are optional settings that can be configured for more control over your data source."
+        isCollapsible={true}
+        isInitiallyOpen={false}
+      >
+        <Stack gap={5} direction="column">
+          <AdvancedHttpSettings config={options} onChange={onOptionsChange} />
+
+          {config.secureSocksDSProxyEnabled && (
+            <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+          )}
+        </Stack>
+      </ConfigSection>
+    </div>
  );
 };
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  container: css({
+    marginBottom: theme.spacing(2),
+    maxWidth: '900px',
+  }),
+});
--- a/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx
@ -70,9 +70,7 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
          <AdvancedHttpSettings config={options} onChange={onOptionsChange} />

          {config.secureSocksDSProxyEnabled && (
-            <>
-              <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
-            </>
+            <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
          )}

          <ConfigSubSection
@ -125,7 +123,6 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {

 const getStyles = (theme: GrafanaTheme2) => ({
  container: css({
-    label: 'container',
    marginBottom: theme.spacing(2),
    maxWidth: '900px',
  }),
--- a/public/app/plugins/datasource/zipkin/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/zipkin/ConfigEditor.tsx
@ -2,10 +2,17 @@ import { css } from '@emotion/css';
 import React from 'react';

 import { DataSourcePluginOptionsEditorProps, GrafanaTheme2 } from '@grafana/data';
-import { ConfigSection, DataSourceDescription } from '@grafana/experimental';
+import {
+  AdvancedHttpSettings,
+  Auth,
+  ConfigSection,
+  ConnectionSettings,
+  DataSourceDescription,
+  convertLegacyAuthProps,
+} from '@grafana/experimental';
 import { NodeGraphSection, SpanBarSection, TraceToLogsSection, TraceToMetricsSection } from '@grafana/o11y-ds-frontend';
 import { config } from '@grafana/runtime';
-import { DataSourceHttpSettings, useStyles2, Divider, Stack } from '@grafana/ui';
+import { useStyles2, Divider, Stack, SecureSocksProxySettings } from '@grafana/ui';

 export type Props = DataSourcePluginOptionsEditorProps;

@ -22,14 +29,17 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {

      <Divider spacing={4} />

-      <DataSourceHttpSettings
-        defaultUrl="http://localhost:9411"
-        dataSourceConfig={options}
-        showAccessOptions={false}
-        onChange={onOptionsChange}
-        secureSocksDSProxyEnabled={config.secureSocksDSProxyEnabled}
+      <ConnectionSettings config={options} onChange={onOptionsChange} urlPlaceholder="http://localhost:9411" />
+
+      <Divider spacing={4} />
+      <Auth
+        {...convertLegacyAuthProps({
+          config: options,
+          onChange: onOptionsChange,
+        })}
      />

+      <Divider spacing={4} />
      <TraceToLogsSection options={options} onOptionsChange={onOptionsChange} />
      <Divider spacing={4} />

@ -43,6 +53,12 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
        isInitiallyOpen={false}
      >
        <Stack gap={5} direction="column">
+          <AdvancedHttpSettings config={options} onChange={onOptionsChange} />
+
+          {config.secureSocksDSProxyEnabled && (
+            <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+          )}
+
          <NodeGraphSection options={options} onOptionsChange={onOptionsChange} />
          <SpanBarSection options={options} onOptionsChange={onOptionsChange} />
        </Stack>
@ -52,9 +68,8 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
 };

 const getStyles = (theme: GrafanaTheme2) => ({
-  container: css`
-    label: container;
-    margin-bottom: ${theme.spacing(2)};
-    max-width: 900px;
-  `,
+  container: css({
+    marginBottom: theme.spacing(2),
+    maxWidth: '900px',
+  }),
 });