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: Use grafana/ui divider (#82141)

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.betterer.results
View File

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

5
public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/index.tsx
View File

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

56
public/app/features/explore/TraceView/components/common/Divider.tsx
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
)}
/>
);
}