apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Divider: Remove core component and replace with `grafana/ui` components (#80574)

Browse Source 
* Divider: Remove core component and replace with grafana/ui components

* Update gap

* Bump experimental in tempo

---------

Co-authored-by: Fabrizio <fabrizio.casati@grafana.com>
pull/80473/head^2
Ivana Huckova 2 years ago committed by GitHub
parent 07778cb221
commit 712c505251
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 145 additions and 202 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 25
      public/app/core/components/Divider.tsx
  2. 14
      public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.tsx
  3. 13
      public/app/plugins/datasource/jaeger/configuration/ConfigEditor.tsx
  4. 14
      public/app/plugins/datasource/loki/configuration/ConfigEditor.tsx
  5. 27
      public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx
  6. 2
      public/app/plugins/datasource/tempo/package.json
  7. 12
      public/app/plugins/datasource/zipkin/ConfigEditor.tsx
  8. 22
      yarn.lock

25
public/app/core/components/Divider.tsx
Unescape View File

@ -1,25 +0,0 @@
import { css } from '@emotion/css';
import React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
export const Divider = ({ hideLine = false }) => {
const styles = useStyles2(getStyles);
if (hideLine) {
return <hr className={styles.dividerHideLine} />;
}
return <hr className={styles.divider} />;
};
const getStyles = (theme: GrafanaTheme2) => ({
divider: css({
margin: theme.spacing(4, 0),
}),
dividerHideLine: css({
border: 'none',
margin: theme.spacing(3, 0),
}),
});

14
public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.tsx
Unescape View File

@ -11,8 +11,7 @@ import {
convertLegacyAuthProps, convertLegacyAuthProps,
DataSourceDescription, DataSourceDescription,
} from '@grafana/experimental'; } from '@grafana/experimental';
import { Alert, SecureSocksProxySettings } from '@grafana/ui'; import { Alert, SecureSocksProxySettings, Divider, Stack } from '@grafana/ui';
import { Divider } from 'app/core/components/Divider';
import { config } from 'app/core/config'; import { config } from 'app/core/config';
import { ElasticsearchOptions } from '../types'; import { ElasticsearchOptions } from '../types';
@ -61,9 +60,9 @@ export const ConfigEditor = (props: Props) => {
docsLink="https://grafana.com/docs/grafana/latest/datasources/elasticsearch" docsLink="https://grafana.com/docs/grafana/latest/datasources/elasticsearch"
hasRequiredFields={false} hasRequiredFields={false}
/> />
<Divider /> <Divider spacing={4} />
<ConnectionSettings config={options} onChange={onOptionsChange} urlPlaceholder="http://localhost:9200" /> <ConnectionSettings config={options} onChange={onOptionsChange} urlPlaceholder="http://localhost:9200" />
<Divider /> <Divider spacing={4} />
<Auth <Auth
{...authProps} {...authProps}
onAuthMethodSelect={(method) => { onAuthMethodSelect={(method) => {
@ -79,20 +78,19 @@ export const ConfigEditor = (props: Props) => {
}); });
}} }}
/> />
<Divider /> <Divider spacing={4} />
<ConfigSection <ConfigSection
title="Additional settings" title="Additional settings"
description="Additional settings are optional settings that can be configured for more control over your data source." description="Additional settings are optional settings that can be configured for more control over your data source."
isCollapsible={true} isCollapsible={true}
isInitiallyOpen isInitiallyOpen
> >
<Stack gap={5} direction="column">
<AdvancedHttpSettings config={options} onChange={onOptionsChange} /> <AdvancedHttpSettings config={options} onChange={onOptionsChange} />
<Divider hideLine />
{config.secureSocksDSProxyEnabled && ( {config.secureSocksDSProxyEnabled && (
<SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} /> <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
)} )}
<ElasticDetails value={options} onChange={onOptionsChange} /> <ElasticDetails value={options} onChange={onOptionsChange} />
<Divider hideLine />
<LogsConfig <LogsConfig
value={options.jsonData} value={options.jsonData}
onChange={(newValue) => onChange={(newValue) =>
@ -102,7 +100,6 @@ export const ConfigEditor = (props: Props) => {
}) })
} }
/> />
<Divider hideLine />
<DataLinks <DataLinks
value={options.jsonData.dataLinks} value={options.jsonData.dataLinks}
onChange={(newValue) => { onChange={(newValue) => {
@ -115,6 +112,7 @@ export const ConfigEditor = (props: Props) => {
}); });
}} }}
/> />
</Stack>
</ConfigSection> </ConfigSection>
</> </>
); );

13
public/app/plugins/datasource/jaeger/configuration/ConfigEditor.tsx
Unescape View File

@ -4,8 +4,7 @@ import React from 'react';
import { DataSourcePluginOptionsEditorProps, GrafanaTheme2 } from '@grafana/data'; import { DataSourcePluginOptionsEditorProps, GrafanaTheme2 } from '@grafana/data';
import { ConfigSection, DataSourceDescription } from '@grafana/experimental'; import { ConfigSection, DataSourceDescription } from '@grafana/experimental';
import { config } from '@grafana/runtime'; import { config } from '@grafana/runtime';
import { DataSourceHttpSettings, useStyles2 } from '@grafana/ui'; import { DataSourceHttpSettings, useStyles2, Divider, Stack } from '@grafana/ui';
import { Divider } from 'app/core/components/Divider';
import { NodeGraphSection } from 'app/core/components/NodeGraphSettings'; import { NodeGraphSection } from 'app/core/components/NodeGraphSettings';
import { TraceToLogsSection } from 'app/core/components/TraceToLogs/TraceToLogsSettings'; import { TraceToLogsSection } from 'app/core/components/TraceToLogs/TraceToLogsSettings';
import { TraceToMetricsSection } from 'app/core/components/TraceToMetrics/TraceToMetricsSettings'; import { TraceToMetricsSection } from 'app/core/components/TraceToMetrics/TraceToMetricsSettings';
@ -26,7 +25,7 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
hasRequiredFields={false} hasRequiredFields={false}
/> />
<Divider /> <Divider spacing={4} />
<DataSourceHttpSettings <DataSourceHttpSettings
defaultUrl="http://localhost:16686" defaultUrl="http://localhost:16686"
@ -38,12 +37,12 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
<TraceToLogsSection options={options} onOptionsChange={onOptionsChange} /> <TraceToLogsSection options={options} onOptionsChange={onOptionsChange} />
<Divider /> <Divider spacing={4} />
{config.featureToggles.traceToMetrics ? ( {config.featureToggles.traceToMetrics ? (
<> <>
<TraceToMetricsSection options={options} onOptionsChange={onOptionsChange} /> <TraceToMetricsSection options={options} onOptionsChange={onOptionsChange} />
<Divider /> <Divider spacing={4} />
</> </>
) : null} ) : null}
@ -53,11 +52,11 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
isCollapsible={true} isCollapsible={true}
isInitiallyOpen={false} isInitiallyOpen={false}
> >
<Stack gap={5} direction="column">
<NodeGraphSection options={options} onOptionsChange={onOptionsChange} /> <NodeGraphSection options={options} onOptionsChange={onOptionsChange} />
<Divider hideLine={true} />
<SpanBarSection options={options} onOptionsChange={onOptionsChange} /> <SpanBarSection options={options} onOptionsChange={onOptionsChange} />
<Divider hideLine={true} />
<TraceIdTimeParams options={options} onOptionsChange={onOptionsChange} /> <TraceIdTimeParams options={options} onOptionsChange={onOptionsChange} />
</Stack>
</ConfigSection> </ConfigSection>
</div> </div>
); );

14
public/app/plugins/datasource/loki/configuration/ConfigEditor.tsx
Unescape View File

@ -10,8 +10,7 @@ import {
AdvancedHttpSettings, AdvancedHttpSettings,
} from '@grafana/experimental'; } from '@grafana/experimental';
import { config, reportInteraction } from '@grafana/runtime'; import { config, reportInteraction } from '@grafana/runtime';
import { SecureSocksProxySettings } from '@grafana/ui'; import { Divider, SecureSocksProxySettings, Stack } from '@grafana/ui';
import { Divider } from 'app/core/components/Divider';
import { LokiOptions } from '../types'; import { LokiOptions } from '../types';
@ -55,40 +54,39 @@ export const ConfigEditor = (props: Props) => {
docsLink="https://grafana.com/docs/grafana/latest/datasources/loki/configure-loki-data-source/" docsLink="https://grafana.com/docs/grafana/latest/datasources/loki/configure-loki-data-source/"
hasRequiredFields={false} hasRequiredFields={false}
/> />
<Divider /> <Divider spacing={4} />
<ConnectionSettings config={options} onChange={onOptionsChange} urlPlaceholder="http://localhost:3100" /> <ConnectionSettings config={options} onChange={onOptionsChange} urlPlaceholder="http://localhost:3100" />
<Divider /> <Divider spacing={4} />
<Auth <Auth
{...convertLegacyAuthProps({ {...convertLegacyAuthProps({
config: options, config: options,
onChange: onOptionsChange, onChange: onOptionsChange,
})} })}
/> />
<Divider /> <Divider spacing={4} />
<ConfigSection <ConfigSection
title="Additional settings" title="Additional settings"
description="Additional settings are optional settings that can be configured for more control over your data source." description="Additional settings are optional settings that can be configured for more control over your data source."
isCollapsible={true} isCollapsible={true}
isInitiallyOpen isInitiallyOpen
> >
<Stack gap={5} direction="column">
<AdvancedHttpSettings config={options} onChange={onOptionsChange} /> <AdvancedHttpSettings config={options} onChange={onOptionsChange} />
<Divider hideLine />
{config.secureSocksDSProxyEnabled && ( {config.secureSocksDSProxyEnabled && (
<SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} /> <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
)} )}
<AlertingSettings options={options} onOptionsChange={onOptionsChange} /> <AlertingSettings options={options} onOptionsChange={onOptionsChange} />
<Divider hideLine />
<QuerySettings <QuerySettings
maxLines={options.jsonData.maxLines || ''} maxLines={options.jsonData.maxLines || ''}
onMaxLinedChange={(value) => onOptionsChange(setMaxLines(options, value))} onMaxLinedChange={(value) => onOptionsChange(setMaxLines(options, value))}
predefinedOperations={options.jsonData.predefinedOperations || ''} predefinedOperations={options.jsonData.predefinedOperations || ''}
onPredefinedOperationsChange={updatePredefinedOperations} onPredefinedOperationsChange={updatePredefinedOperations}
/> />
<Divider hideLine />
<DerivedFields <DerivedFields
fields={options.jsonData.derivedFields} fields={options.jsonData.derivedFields}
onChange={(value) => onOptionsChange(setDerivedFields(options, value))} onChange={(value) => onOptionsChange(setDerivedFields(options, value))}
/> />
</Stack>
</ConfigSection> </ConfigSection>
</> </>
); );

27
public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx
Unescape View File

@ -6,16 +6,15 @@ import {
AdvancedHttpSettings, AdvancedHttpSettings,
Auth, Auth,
ConfigSection, ConfigSection,
ConfigDescriptionLink,
ConfigSubSection, ConfigSubSection,
ConnectionSettings, ConnectionSettings,
convertLegacyAuthProps, convertLegacyAuthProps,
DataSourceDescription, DataSourceDescription,
} from '@grafana/experimental'; } from '@grafana/experimental';
import { config } from '@grafana/runtime'; import { config } from '@grafana/runtime';
import { SecureSocksProxySettings, useStyles2 } from '@grafana/ui'; import { SecureSocksProxySettings, useStyles2, Divider, Stack } from '@grafana/ui';
import { ConfigDescriptionLink } from '../_importedDependencies/components/ConfigDescriptionLink';
import { Divider } from '../_importedDependencies/components/Divider';
import { NodeGraphSection } from '../_importedDependencies/components/NodeGraphSettings'; import { NodeGraphSection } from '../_importedDependencies/components/NodeGraphSettings';
import { SpanBarSection } from '../_importedDependencies/components/TraceView/SpanBarSettings'; import { SpanBarSection } from '../_importedDependencies/components/TraceView/SpanBarSettings';
import { import {
@ -42,10 +41,10 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
hasRequiredFields={false} hasRequiredFields={false}
/> />
<Divider /> <Divider spacing={4} />
<ConnectionSettings config={options} onChange={onOptionsChange} urlPlaceholder="http://localhost:3200" /> <ConnectionSettings config={options} onChange={onOptionsChange} urlPlaceholder="http://localhost:3200" />
<Divider /> <Divider spacing={4} />
<Auth <Auth
{...convertLegacyAuthProps({ {...convertLegacyAuthProps({
config: options, config: options,
@ -53,40 +52,38 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
})} })}
/> />
<Divider /> <Divider spacing={4} />
<TraceToLogsSection options={options} onOptionsChange={onOptionsChange} /> <TraceToLogsSection options={options} onOptionsChange={onOptionsChange} />
<Divider /> <Divider spacing={4} />
{config.featureToggles.traceToMetrics ? ( {config.featureToggles.traceToMetrics ? (
<> <>
<TraceToMetricsSection options={options} onOptionsChange={onOptionsChange} /> <TraceToMetricsSection options={options} onOptionsChange={onOptionsChange} />
<Divider /> <Divider spacing={4} />
</> </>
) : null} ) : null}
{config.featureToggles.traceToProfiles && ( {config.featureToggles.traceToProfiles && (
<> <>
<TraceToProfilesSection options={options} onOptionsChange={onOptionsChange} /> <TraceToProfilesSection options={options} onOptionsChange={onOptionsChange} />
<Divider /> <Divider spacing={4} />
</> </>
)} )}
<ConfigSection <ConfigSection
title="Additional settings" title="Additional settings"
description="Additional settings are optional settings that can be configured for more control over your data source." description="Additional settings are optional settings that can be configured for more control over your data source."
isCollapsible={true} isCollapsible={true}
isInitiallyOpen={false} isInitiallyOpen={false}
> >
<Stack gap={5} direction="column">
<AdvancedHttpSettings config={options} onChange={onOptionsChange} /> <AdvancedHttpSettings config={options} onChange={onOptionsChange} />
{config.secureSocksDSProxyEnabled && ( {config.secureSocksDSProxyEnabled && (
<> <>
<Divider hideLine />
<SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} /> <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
</> </>
)} )}
<Divider hideLine />
<ConfigSubSection <ConfigSubSection
title="Service graph" title="Service graph"
description={ description={
@ -100,10 +97,8 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
<ServiceGraphSettings options={options} onOptionsChange={onOptionsChange} /> <ServiceGraphSettings options={options} onOptionsChange={onOptionsChange} />
</ConfigSubSection> </ConfigSubSection>
<Divider hideLine />
<NodeGraphSection options={options} onOptionsChange={onOptionsChange} /> <NodeGraphSection options={options} onOptionsChange={onOptionsChange} />
<Divider hideLine />
<ConfigSubSection <ConfigSubSection
title="Tempo search" title="Tempo search"
description={ description={
@ -117,7 +112,6 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
<TraceQLSearchSettings options={options} onOptionsChange={onOptionsChange} /> <TraceQLSearchSettings options={options} onOptionsChange={onOptionsChange} />
</ConfigSubSection> </ConfigSubSection>
<Divider hideLine />
<ConfigSubSection <ConfigSubSection
title="Loki search" title="Loki search"
description={ description={
@ -131,7 +125,6 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
<LokiSearchSettings options={options} onOptionsChange={onOptionsChange} /> <LokiSearchSettings options={options} onOptionsChange={onOptionsChange} />
</ConfigSubSection> </ConfigSubSection>
<Divider hideLine />
<ConfigSubSection <ConfigSubSection
title="TraceID query" title="TraceID query"
description={ description={
@ -145,8 +138,8 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
<QuerySettings options={options} onOptionsChange={onOptionsChange} /> <QuerySettings options={options} onOptionsChange={onOptionsChange} />
</ConfigSubSection> </ConfigSubSection>
<Divider hideLine />
<SpanBarSection options={options} onOptionsChange={onOptionsChange} /> <SpanBarSection options={options} onOptionsChange={onOptionsChange} />
</Stack>
</ConfigSection> </ConfigSection>
</div> </div>
); );

2
public/app/plugins/datasource/tempo/package.json
Unescape View File

@ -7,7 +7,7 @@
"@emotion/css": "11.11.2", "@emotion/css": "11.11.2",
"@grafana/data": "workspace:*", "@grafana/data": "workspace:*",
"@grafana/e2e-selectors": "workspace:*", "@grafana/e2e-selectors": "workspace:*",
"@grafana/experimental": "1.7.4", "@grafana/experimental": "1.7.5",
"@grafana/lezer-logql": "0.2.1", "@grafana/lezer-logql": "0.2.1",
"@grafana/lezer-traceql": "0.0.12", "@grafana/lezer-traceql": "0.0.12",
"@grafana/monaco-logql": "^0.0.7", "@grafana/monaco-logql": "^0.0.7",

12
public/app/plugins/datasource/zipkin/ConfigEditor.tsx
Unescape View File

@ -4,8 +4,7 @@ import React from 'react';
import { DataSourcePluginOptionsEditorProps, GrafanaTheme2 } from '@grafana/data'; import { DataSourcePluginOptionsEditorProps, GrafanaTheme2 } from '@grafana/data';
import { ConfigSection, DataSourceDescription } from '@grafana/experimental'; import { ConfigSection, DataSourceDescription } from '@grafana/experimental';
import { config } from '@grafana/runtime'; import { config } from '@grafana/runtime';
import { DataSourceHttpSettings, useStyles2 } from '@grafana/ui'; import { DataSourceHttpSettings, useStyles2, Divider, Stack } from '@grafana/ui';
import { Divider } from 'app/core/components/Divider';
import { NodeGraphSection } from 'app/core/components/NodeGraphSettings'; import { NodeGraphSection } from 'app/core/components/NodeGraphSettings';
import { TraceToLogsSection } from 'app/core/components/TraceToLogs/TraceToLogsSettings'; import { TraceToLogsSection } from 'app/core/components/TraceToLogs/TraceToLogsSettings';
import { TraceToMetricsSection } from 'app/core/components/TraceToMetrics/TraceToMetricsSettings'; import { TraceToMetricsSection } from 'app/core/components/TraceToMetrics/TraceToMetricsSettings';
@ -24,7 +23,7 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
hasRequiredFields={false} hasRequiredFields={false}
/> />
<Divider /> <Divider spacing={4} />
<DataSourceHttpSettings <DataSourceHttpSettings
defaultUrl="http://localhost:9411" defaultUrl="http://localhost:9411"
@ -36,12 +35,12 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
<TraceToLogsSection options={options} onOptionsChange={onOptionsChange} /> <TraceToLogsSection options={options} onOptionsChange={onOptionsChange} />
<Divider /> <Divider spacing={4} />
{config.featureToggles.traceToMetrics ? ( {config.featureToggles.traceToMetrics ? (
<> <>
<TraceToMetricsSection options={options} onOptionsChange={onOptionsChange} /> <TraceToMetricsSection options={options} onOptionsChange={onOptionsChange} />
<Divider /> <Divider spacing={4} />
</> </>
) : null} ) : null}
@ -51,9 +50,10 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
isCollapsible={true} isCollapsible={true}
isInitiallyOpen={false} isInitiallyOpen={false}
> >
<Stack gap={5} direction="column">
<NodeGraphSection options={options} onOptionsChange={onOptionsChange} /> <NodeGraphSection options={options} onOptionsChange={onOptionsChange} />
<Divider hideLine={true} />
<SpanBarSection options={options} onOptionsChange={onOptionsChange} /> <SpanBarSection options={options} onOptionsChange={onOptionsChange} />
</Stack>
</ConfigSection> </ConfigSection>
</div> </div>
); );

22
yarn.lock
Unescape View File

@ -3060,7 +3060,7 @@ __metadata:
"@emotion/css": "npm:11.11.2" "@emotion/css": "npm:11.11.2"
"@grafana/data": "workspace:*" "@grafana/data": "workspace:*"
"@grafana/e2e-selectors": "workspace:*" "@grafana/e2e-selectors": "workspace:*"
"@grafana/experimental": "npm:1.7.4" "@grafana/experimental": "npm:1.7.5"
"@grafana/lezer-logql": "npm:0.2.1" "@grafana/lezer-logql": "npm:0.2.1"
"@grafana/lezer-traceql": "npm:0.0.12" "@grafana/lezer-traceql": "npm:0.0.12"
"@grafana/monaco-logql": "npm:^0.0.7" "@grafana/monaco-logql": "npm:^0.0.7"
@ -3329,26 +3329,6 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@grafana/experimental@npm:1.7.4":
version: 1.7.4
resolution: "@grafana/experimental@npm:1.7.4"
dependencies:
"@types/uuid": "npm:^8.3.3"
semver: "npm:^7.5.4"
uuid: "npm:^8.3.2"
peerDependencies:
"@emotion/css": 11.1.3
"@grafana/data": ^10.0.0
"@grafana/runtime": ^10.0.0
"@grafana/ui": ^10.0.0
react: 17.0.2
react-dom: 17.0.2
react-select: ^5.2.1
rxjs: 7.8.0
checksum: e62e6382396d282281e31011c936fe9164650ea8caea7a09c4ef8615a66bb0ab0f74c4946354276457a2f5d1276016fc4225a08b8afb043c81e11b010f52b26d
languageName: node
linkType: hard
"@grafana/experimental@npm:1.7.5": "@grafana/experimental@npm:1.7.5":
version: 1.7.5 version: 1.7.5
resolution: "@grafana/experimental@npm:1.7.5" resolution: "@grafana/experimental@npm:1.7.5"

Write Preview
Loading…
Cancel
Save