123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 |
- import {useState} from 'react';
- import styled from '@emotion/styled';
- import {Location} from 'history';
- import EventTagsPill from 'sentry/components/events/eventTags/eventTagsPill';
- import {SecondaryHeader} from 'sentry/components/events/interfaces/spans/header';
- import Panel from 'sentry/components/panels/panel';
- import Pills from 'sentry/components/pills';
- import SearchBar from 'sentry/components/searchBar';
- import {t} from 'sentry/locale';
- import {space} from 'sentry/styles/space';
- import {Organization} from 'sentry/types';
- import {defined} from 'sentry/utils';
- import {TraceFullDetailed} from 'sentry/utils/performance/quickTrace/types';
- import {appendTagCondition} from 'sentry/utils/queryString';
- import {transactionSummaryRouteWithQuery} from 'sentry/views/performance/transactionSummary/utils';
- export {
- Row,
- SpanDetails as TransactionDetails,
- SpanDetailContainer as TransactionDetailsContainer,
- } from 'sentry/components/events/interfaces/spans/spanDetail';
- export const TraceSearchContainer = styled('div')`
- display: flex;
- width: 100%;
- `;
- export const TraceSearchBar = styled(SearchBar)`
- flex-grow: 1;
- `;
- export const TraceViewHeaderContainer = styled(SecondaryHeader)`
- border-top: none;
- border-bottom: 1px solid ${p => p.theme.border};
- position: sticky;
- top: 0;
- z-index: 1;
- `;
- export const TraceDetailHeader = styled('div')`
- display: grid;
- grid-template-columns: 1fr;
- gap: ${space(3)};
- margin-bottom: ${space(2)};
- @media (min-width: ${p => p.theme.breakpoints.medium}) {
- grid-template-columns: max-content max-content;
- grid-row-gap: 0;
- }
- `;
- export const TraceDetailBody = styled('div')`
- height: 100%;
- `;
- export const TraceViewContainer = styled('div')`
- overflow-x: hidden;
- border-bottom-left-radius: 3px;
- border-bottom-right-radius: 3px;
- `;
- export const TracePanel = styled(Panel)`
- height: 100%;
- overflow: auto;
- `;
- export const ProjectBadgeContainer = styled('span')`
- margin-right: ${space(0.75)};
- display: flex;
- flex-direction: column;
- justify-content: center;
- `;
- const StyledPills = styled(Pills)`
- padding-top: ${space(1.5)};
- `;
- export function Tags({
- location,
- organization,
- enableHiding,
- transaction,
- }: {
- location: Location;
- organization: Organization;
- transaction: TraceFullDetailed;
- enableHiding?: boolean;
- }) {
- const {tags} = transaction;
- const [showingAll, setShowingAll] = useState(enableHiding ? false : true);
- if (!tags || tags.length <= 0) {
- return null;
- }
- const orgSlug = organization.slug;
- const renderText = showingAll ? t('Show less') : t('Show more') + '...';
- return (
- <tr>
- <td className="key">Tags</td>
- <td className="value">
- <StyledPills>
- {tags.slice(0, showingAll ? tags.length : 5).map((tag, index) => {
- const {pathname: streamPath, query} = transactionSummaryRouteWithQuery({
- orgSlug,
- transaction: transaction.transaction,
- projectID: String(transaction.project_id),
- query: {
- ...location.query,
- query: appendTagCondition(location.query.query, tag.key, tag.value),
- },
- });
- return (
- <EventTagsPill
- key={!defined(tag.key) ? `tag-pill-${index}` : tag.key}
- tag={tag}
- projectSlug={transaction.project_slug}
- projectId={transaction.project_id.toString()}
- organization={organization}
- query={query}
- streamPath={streamPath}
- />
- );
- })}
- {tags.length > 5 && enableHiding && (
- <div style={{position: 'relative', height: '20px'}}>
- <a
- style={{position: 'absolute', bottom: '0px', whiteSpace: 'nowrap'}}
- onClick={() => setShowingAll(prev => !prev)}
- >
- {renderText}
- </a>
- </div>
- )}
- </StyledPills>
- </td>
- </tr>
- );
- }
|