Tempo: Use grafana/ui divider (#82141)

* Use Grafana divider

* Remove custom divider
This commit is contained in:
Joey 2024-02-13 10:56:37 +00:00 committed by GitHub
parent 55d17c7fcb
commit 4054590526
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 2 additions and 64 deletions

View File

@ -3612,11 +3612,6 @@ exports[`better eslint`] = {
"public/app/features/explore/TraceView/components/common/CopyIcon.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"]
],
"public/app/features/explore/TraceView/components/common/Divider.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"]
],
"public/app/features/explore/TraceView/components/common/LabeledList.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],

View File

@ -21,12 +21,11 @@ import { DataFrame, dateTimeFormat, GrafanaTheme2, IconName, LinkModel } from '@
import { TraceToProfilesOptions } from '@grafana/o11y-ds-frontend';
import { config, locationService, reportInteraction } from '@grafana/runtime';
import { TimeZone } from '@grafana/schema';
import { DataLinkButton, Icon, TextArea, useStyles2 } from '@grafana/ui';
import { DataLinkButton, Divider, Icon, TextArea, useStyles2 } from '@grafana/ui';
import { RelatedProfilesTitle } from '@grafana-plugins/tempo/resultTransformer';
import { pyroscopeProfileIdTagKey } from '../../../createSpanLink';
import { autoColor } from '../../Theme';
import { Divider } from '../../common/Divider';
import LabeledList from '../../common/LabeledList';
import { KIND, LIBRARY_NAME, LIBRARY_VERSION, STATUS, STATUS_MESSAGE, TRACE_STATE } from '../../constants/span';
import { SpanLinkFunc, TNil } from '../../types';
@ -329,7 +328,7 @@ export default function SpanDetail(props: SpanDetailProps) {
</div>
<span style={{ marginRight: '10px' }}>{logLinkButton}</span>
{profileLinkButton}
<Divider type={'horizontal'} />
<Divider spacing={1} />
<div>
<div>
<AccordianKeyValues

View File

@ -1,56 +0,0 @@
import { css, cx } from '@emotion/css';
import React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
import { autoColor } from '../Theme';
const getStyles = (theme: GrafanaTheme2) => {
return {
Divider: css`
background: ${autoColor(theme, '#ddd')};
`,
DividerVertical: css`
label: DividerVertical;
display: inline-block;
width: 1px;
height: 0.9em;
margin: 0 8px;
vertical-align: middle;
`,
DividerHorizontal: css`
label: DividerHorizontal;
display: block;
height: 1px;
width: 100%;
margin-top: ${theme.spacing(2)};
margin-bottom: ${theme.spacing(0.5)};
clear: both;
vertical-align: middle;
position: relative;
top: -0.06em;
`,
};
};
interface Props {
className?: string;
style?: React.CSSProperties;
type?: 'vertical' | 'horizontal';
}
export function Divider({ className, style, type }: Props) {
const styles = useStyles2(getStyles);
return (
<div
style={style}
className={cx(
styles.Divider,
type === 'horizontal' ? styles.DividerHorizontal : styles.DividerVertical,
className
)}
/>
);
}