IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages 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>
This commit is contained in:
Ivana Huckova 2024-01-16 12:27:51 +01:00 committed by GitHub
parent 07778cb221
commit 712c505251
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 138 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
public/app/core/components/Divider.tsx
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),
}),
});

66
public/app/plugins/datasource/elasticsearch/configuration/ConfigEditor.tsx
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,42 +78,41 @@ 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
> >
<AdvancedHttpSettings config={options} onChange={onOptionsChange} /> <Stack gap={5} direction="column">
<Divider hideLine /> <AdvancedHttpSettings config={options} onChange={onOptionsChange} />
{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) => onOptionsChange({
onOptionsChange({ ...options,
...options, jsonData: newValue,
jsonData: newValue, })
}) }
} />
/> <DataLinks
<Divider hideLine /> value={options.jsonData.dataLinks}
<DataLinks onChange={(newValue) => {
value={options.jsonData.dataLinks} onOptionsChange({
onChange={(newValue) => { ...options,
onOptionsChange({ jsonData: {
...options, ...options.jsonData,
jsonData: { dataLinks: newValue,
...options.jsonData, },
dataLinks: newValue, });
}, }}
}); />
}} </Stack>
/>
</ConfigSection> </ConfigSection>
</> </>
); );

19
public/app/plugins/datasource/jaeger/configuration/ConfigEditor.tsx
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}
> >
<NodeGraphSection options={options} onOptionsChange={onOptionsChange} /> <Stack gap={5} direction="column">
<Divider hideLine={true} /> <NodeGraphSection options={options} onOptionsChange={onOptionsChange} />
<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>
); );

44
public/app/plugins/datasource/loki/configuration/ConfigEditor.tsx
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
> >
<AdvancedHttpSettings config={options} onChange={onOptionsChange} /> <Stack gap={5} direction="column">
<Divider hideLine /> <AdvancedHttpSettings config={options} onChange={onOptionsChange} />
{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} />
/> <DerivedFields
<Divider hideLine /> fields={options.jsonData.derivedFields}
<DerivedFields onChange={(value) => onOptionsChange(setDerivedFields(options, value))}
fields={options.jsonData.derivedFields} />
onChange={(value) => onOptionsChange(setDerivedFields(options, value))} </Stack>
/>
</ConfigSection> </ConfigSection>
</> </>
); );

139
public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx
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,100 +52,94 @@ 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}
> >
<AdvancedHttpSettings config={options} onChange={onOptionsChange} /> <Stack gap={5} direction="column">
<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={ <ConfigDescriptionLink
<ConfigDescriptionLink description="Select a Prometheus data source that contains the service graph data."
description="Select a Prometheus data source that contains the service graph data." suffix="tempo/configure-tempo-data-source/#service-graph"
suffix="tempo/configure-tempo-data-source/#service-graph" feature="the service graph"
feature="the service graph" />
/> }
} >
> <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={ <ConfigDescriptionLink
<ConfigDescriptionLink description="Modify how traces are searched."
description="Modify how traces are searched." suffix="tempo/configure-tempo-data-source/#tempo-search"
suffix="tempo/configure-tempo-data-source/#tempo-search" feature="Tempo search"
feature="Tempo search" />
/> }
} >
> <TraceQLSearchSettings options={options} onOptionsChange={onOptionsChange} />
<TraceQLSearchSettings options={options} onOptionsChange={onOptionsChange} /> </ConfigSubSection>
</ConfigSubSection>
<Divider hideLine /> <ConfigSubSection
<ConfigSubSection title="Loki search"
title="Loki search" description={
description={ <ConfigDescriptionLink
<ConfigDescriptionLink description="Select a Loki data source to search for traces. Derived fields must be configured in the Loki data source."
description="Select a Loki data source to search for traces. Derived fields must be configured in the Loki data source." suffix="tempo/configure-tempo-data-source/#loki-search"
suffix="tempo/configure-tempo-data-source/#loki-search" feature="Loki search"
feature="Loki search" />
/> }
} >
> <LokiSearchSettings options={options} onOptionsChange={onOptionsChange} />
<LokiSearchSettings options={options} onOptionsChange={onOptionsChange} /> </ConfigSubSection>
</ConfigSubSection>
<Divider hideLine /> <ConfigSubSection
<ConfigSubSection title="TraceID query"
title="TraceID query" description={
description={ <ConfigDescriptionLink
<ConfigDescriptionLink description="Modify how TraceID queries are run."
description="Modify how TraceID queries are run." suffix="tempo/configure-tempo-data-source/#traceid-query"
suffix="tempo/configure-tempo-data-source/#traceid-query" feature="the TraceID query"
feature="the TraceID query" />
/> }
} >
> <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
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",

16
public/app/plugins/datasource/zipkin/ConfigEditor.tsx
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}
> >
<NodeGraphSection options={options} onOptionsChange={onOptionsChange} /> <Stack gap={5} direction="column">
<Divider hideLine={true} /> <NodeGraphSection options={options} onOptionsChange={onOptionsChange} />
<SpanBarSection options={options} onOptionsChange={onOptionsChange} /> <SpanBarSection options={options} onOptionsChange={onOptionsChange} />
</Stack>
</ConfigSection> </ConfigSection>
</div> </div>
); );

22
yarn.lock
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"