IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-11 08:05:43 -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"]
],
"public/app/core/components/TraceToLogs/TagMappingInput.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"]
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"public/app/core/components/TraceToMetrics/TraceToMetricsSettings.tsx:5381": [
[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 { 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';
@ -12,6 +13,8 @@ interface Props {
id?: string;
}
const VARIANT = 'none' as ToolbarButtonVariant;
export const TagMappingInput = ({ values, onChange, id }: Props) => {
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)])}
className="gf-form-label query-part"
className={cx(styles.removeTag, 'query-part')}
aria-label="Remove tag"
variant={VARIANT}
type="button"
>
<Icon name="times" />
</button>
icon="times"
/>
{idx === values.length - 1 ? (
<button
<ToolbarButton
onClick={() => onChange([...values, { key: '', value: '' }])}
className="gf-form-label query-part"
className="query-part"
aria-label="Add tag"
type="button"
>
<Icon name="plus" />
</button>
variant={VARIANT}
icon="plus"
/>
) : null}
</div>
))
) : (
<button
<ToolbarButton
icon="plus"
onClick={() => onChange([...values, { key: '', value: '' }])}
className="gf-form-label query-part"
className="query-part"
aria-label="Add tag"
type="button"
>
<Icon name="plus" />
</button>
variant={VARIANT}
/>
)}
</div>
);
};
const getStyles = (theme: GrafanaTheme2) => ({
wrapper: css`
display: flex;
flex-direction: column;
gap: ${theme.spacing(0.5)} 0;
`,
pair: css`
display: flex;
justify-content: start;
align-items: center;
`,
operator: css`
color: ${theme.v1.palette.orange};
width: auto;
`,
wrapper: css({
display: 'flex',
flexDirection: 'column',
gap: `${theme.spacing(0.5)} 0`,
}),
pair: css({
display: 'flex',
justifyContent: 'start',
alignItems: 'center',
}),
operator: css({
color: theme.v1.palette.orange,
width: 'auto',
}),
removeTag: css({
marginRight: theme.spacing(0.5),
}),
});