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

Tempo: remove gf-form from TagMappingInput in trace to logs config section (#77835)

Browse Source 
ref: remove gf-form from TagMappingInput
This commit is contained in:
Daniel Benjamin 2023-11-08 14:31:01 +01:00 committed by GitHub
parent 848efba0de
commit 714dd0ec47
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.betterer.results
View File

@ -1442,9 +1442,7 @@ exports[`better eslint`] = {
[0, 0, 0, "Unexpected any. Specify a different type.", "2"] [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
], ],
"public/app/core/components/TraceToLogs/TagMappingInput.tsx:5381": [ "public/app/core/components/TraceToLogs/TagMappingInput.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"], [0, 0, 0, "Do not use any type assertions.", "0"]
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"]
], ],
"public/app/core/components/TraceToMetrics/TraceToMetricsSettings.tsx:5381": [ "public/app/core/components/TraceToMetrics/TraceToMetricsSettings.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"], [0, 0, 0, "Styles should be written using objects.", "0"],

69
public/app/core/components/TraceToLogs/TagMappingInput.tsx
View File

@ -1,8 +1,9 @@
import { css } from '@emotion/css'; import { css, cx } from '@emotion/css';
import React from 'react'; import React from 'react';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { SegmentInput, useStyles2, InlineLabel, Icon } from '@grafana/ui'; import { InlineLabel, SegmentInput, ToolbarButton, useStyles2 } from '@grafana/ui';
import { ToolbarButtonVariant } from '@grafana/ui/src/components/ToolbarButton';
import { TraceToLogsTag } from './TraceToLogsSettings'; import { TraceToLogsTag } from './TraceToLogsSettings';
@ -12,6 +13,8 @@ interface Props {
id?: string; id?: string;
} }
const VARIANT = 'none' as ToolbarButtonVariant;
export const TagMappingInput = ({ values, onChange, id }: Props) => { export const TagMappingInput = ({ values, onChange, id }: Props) => {
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
@ -53,53 +56,57 @@ export const TagMappingInput = ({ values, onChange, id }: Props) => {
); );
}} }}
/> />
<button <ToolbarButton
onClick={() => onChange([...values.slice(0, idx), ...values.slice(idx + 1)])} onClick={() => onChange([...values.slice(0, idx), ...values.slice(idx + 1)])}
className="gf-form-label query-part" className={cx(styles.removeTag, 'query-part')}
aria-label="Remove tag" aria-label="Remove tag"
variant={VARIANT}
type="button" type="button"
> icon="times"
<Icon name="times" /> />
</button>
{idx === values.length - 1 ? ( {idx === values.length - 1 ? (
<button <ToolbarButton
onClick={() => onChange([...values, { key: '', value: '' }])} onClick={() => onChange([...values, { key: '', value: '' }])}
className="gf-form-label query-part" className="query-part"
aria-label="Add tag" aria-label="Add tag"
type="button" type="button"
> variant={VARIANT}
<Icon name="plus" /> icon="plus"
</button> />
) : null} ) : null}
</div> </div>
)) ))
) : ( ) : (
<button <ToolbarButton
icon="plus"
onClick={() => onChange([...values, { key: '', value: '' }])} onClick={() => onChange([...values, { key: '', value: '' }])}
className="gf-form-label query-part" className="query-part"
aria-label="Add tag" aria-label="Add tag"
type="button" type="button"
> variant={VARIANT}
<Icon name="plus" /> />
</button>
)} )}
</div> </div>
); );
}; };
const getStyles = (theme: GrafanaTheme2) => ({ const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css` wrapper: css({
display: flex; display: 'flex',
flex-direction: column; flexDirection: 'column',
gap: ${theme.spacing(0.5)} 0; gap: `${theme.spacing(0.5)} 0`,
`, }),
pair: css` pair: css({
display: flex; display: 'flex',
justify-content: start; justifyContent: 'start',
align-items: center; alignItems: 'center',
`, }),
operator: css` operator: css({
color: ${theme.v1.palette.orange}; color: theme.v1.palette.orange,
width: auto; width: 'auto',
`, }),
removeTag: css({
marginRight: theme.spacing(0.5),
}),
}); });