diff --git a/static/app/views/performance/newTraceDetails/traceRow/traceIcons.tsx b/static/app/views/performance/newTraceDetails/traceRow/traceIcons.tsx index b6f5c06827a2e5..63945b3e23d382 100644 --- a/static/app/views/performance/newTraceDetails/traceRow/traceIcons.tsx +++ b/static/app/views/performance/newTraceDetails/traceRow/traceIcons.tsx @@ -1,5 +1,9 @@ import {Fragment, useMemo} from 'react'; +import styled from '@emotion/styled'; import clamp from 'lodash/clamp'; +import {PlatformIcon} from 'platformicons'; + +import {useHasTraceNewUi} from 'sentry/views/performance/newTraceDetails/useHasTraceNewUi'; import {TraceIcons} from '../traceIcons'; import type {TraceTree} from '../traceModels/traceTree'; @@ -95,3 +99,18 @@ export function TracePerformanceIssueIcons(props: TracePerformanceIssueIconsProp ); } + +export function SpanProjectIcon({platform}: {platform: string}) { + const hasTraceNewUi = useHasTraceNewUi(); + + if (!hasTraceNewUi) { + return null; + } + + return ; +} + +const FaintProjectIcon = styled(PlatformIcon)` + opacity: 0.2; + filter: grayscale(1); +`; diff --git a/static/app/views/performance/newTraceDetails/traceRow/traceSpanRow.tsx b/static/app/views/performance/newTraceDetails/traceRow/traceSpanRow.tsx index ffbd5f1ad7e9b2..d64d4d8372e413 100644 --- a/static/app/views/performance/newTraceDetails/traceRow/traceSpanRow.tsx +++ b/static/app/views/performance/newTraceDetails/traceRow/traceSpanRow.tsx @@ -1,3 +1,5 @@ +import {SpanProjectIcon} from 'sentry/views/performance/newTraceDetails/traceRow/traceIcons'; + import {TraceIcons} from '../traceIcons'; import type {TraceTree} from '../traceModels/traceTree'; import type {TraceTreeNode} from '../traceModels/traceTreeNode'; @@ -57,6 +59,9 @@ export function TraceSpanRow(props: TraceRowProps> ) : null} + {props.node.value.op ?? ''}