styles.tsx 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. import {useState} from 'react';
  2. import styled from '@emotion/styled';
  3. import type {Location} from 'history';
  4. import EventTagsPill from 'sentry/components/events/eventTags/eventTagsPill';
  5. import {SecondaryHeader} from 'sentry/components/events/interfaces/spans/header';
  6. import Panel from 'sentry/components/panels/panel';
  7. import Pills from 'sentry/components/pills';
  8. import SearchBar from 'sentry/components/searchBar';
  9. import {t} from 'sentry/locale';
  10. import {space} from 'sentry/styles/space';
  11. import type {EventTag, Organization} from 'sentry/types';
  12. import {defined, generateQueryWithTag} from 'sentry/utils';
  13. import type {
  14. TraceError,
  15. TraceFullDetailed,
  16. } from 'sentry/utils/performance/quickTrace/types';
  17. import {isTraceTransaction} from 'sentry/utils/performance/quickTrace/utils';
  18. import {appendTagCondition} from 'sentry/utils/queryString';
  19. import {transactionSummaryRouteWithQuery} from 'sentry/views/performance/transactionSummary/utils';
  20. export {
  21. Row,
  22. SpanDetails as TransactionDetails,
  23. SpanDetailContainer as TransactionDetailsContainer,
  24. } from 'sentry/components/events/interfaces/spans/spanDetail';
  25. export const TraceSearchContainer = styled('div')`
  26. display: flex;
  27. width: 100%;
  28. `;
  29. export const TraceSearchBar = styled(SearchBar)`
  30. flex-grow: 1;
  31. `;
  32. export const TraceViewHeaderContainer = styled(SecondaryHeader)`
  33. border-top: none;
  34. border-bottom: 1px solid ${p => p.theme.border};
  35. position: sticky;
  36. top: 0;
  37. z-index: 1;
  38. `;
  39. export const TraceDetailHeader = styled('div')`
  40. display: grid;
  41. grid-template-columns: 1fr;
  42. gap: ${space(3)};
  43. margin-bottom: ${space(2)};
  44. @media (min-width: ${p => p.theme.breakpoints.medium}) {
  45. grid-template-columns: max-content max-content;
  46. grid-row-gap: 0;
  47. }
  48. `;
  49. export const TraceDetailBody = styled('div')`
  50. height: 100%;
  51. `;
  52. export const TraceViewContainer = styled('div')`
  53. overflow-x: hidden;
  54. border-bottom-left-radius: 3px;
  55. border-bottom-right-radius: 3px;
  56. `;
  57. export const TracePanel = styled(Panel)`
  58. height: 100%;
  59. overflow: auto;
  60. `;
  61. export const ProjectBadgeContainer = styled('span')`
  62. margin-right: ${space(0.75)};
  63. display: flex;
  64. flex-direction: column;
  65. justify-content: center;
  66. `;
  67. const StyledPills = styled(Pills)`
  68. padding-top: ${space(1.5)};
  69. `;
  70. export function Tags({
  71. location,
  72. organization,
  73. enableHiding,
  74. event,
  75. tags,
  76. }: {
  77. event: TraceFullDetailed | TraceError;
  78. location: Location;
  79. organization: Organization;
  80. tags: EventTag[];
  81. enableHiding?: boolean;
  82. }) {
  83. const [showingAll, setShowingAll] = useState(enableHiding ? false : true);
  84. if (!tags || tags.length <= 0) {
  85. return null;
  86. }
  87. const orgSlug = organization.slug;
  88. const renderText = showingAll ? t('Show less') : t('Show more') + '...';
  89. return (
  90. <tr>
  91. <td className="key">Tags</td>
  92. <td className="value">
  93. <StyledPills>
  94. {tags.slice(0, showingAll ? tags.length : 5).map((tag, index) => {
  95. let streamPath = '';
  96. let query = {};
  97. if (isTraceTransaction(event)) {
  98. const route = transactionSummaryRouteWithQuery({
  99. orgSlug,
  100. transaction: event.transaction,
  101. projectID: String(event.project_id),
  102. query: {
  103. ...location.query,
  104. query: appendTagCondition(location.query.query, tag.key, tag.value),
  105. },
  106. });
  107. streamPath = route.pathname;
  108. query = route.query;
  109. } else {
  110. streamPath = `/organizations/${organization.slug}/issues/`;
  111. query = generateQueryWithTag(
  112. {...location.query, referrer: 'event-tags'},
  113. tag
  114. );
  115. }
  116. return (
  117. <EventTagsPill
  118. key={!defined(tag.key) ? `tag-pill-${index}` : tag.key}
  119. tag={tag}
  120. projectSlug={event.project_slug}
  121. projectId={event.project_id.toString()}
  122. organization={organization}
  123. query={query}
  124. streamPath={streamPath}
  125. />
  126. );
  127. })}
  128. {tags.length > 5 && enableHiding && (
  129. <div style={{position: 'relative', height: '20px'}}>
  130. <a
  131. style={{position: 'absolute', bottom: '0px', whiteSpace: 'nowrap'}}
  132. onClick={() => setShowingAll(prev => !prev)}
  133. >
  134. {renderText}
  135. </a>
  136. </div>
  137. )}
  138. </StyledPills>
  139. </td>
  140. </tr>
  141. );
  142. }