codeLocations.tsx 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
  1. import {useCallback, useMemo, useState} from 'react';
  2. import styled from '@emotion/styled';
  3. import {Button} from 'sentry/components/button';
  4. import {CopyToClipboardButton} from 'sentry/components/copyToClipboardButton';
  5. import EmptyMessage from 'sentry/components/emptyMessage';
  6. import ContextLine from 'sentry/components/events/interfaces/frame/contextLine';
  7. import DefaultTitle from 'sentry/components/events/interfaces/frame/defaultTitle';
  8. import LoadingError from 'sentry/components/loadingError';
  9. import LoadingIndicator from 'sentry/components/loadingIndicator';
  10. import type {SelectionRange} from 'sentry/components/metrics/chart/types';
  11. import {IconChevron, IconSearch} from 'sentry/icons';
  12. import {t} from 'sentry/locale';
  13. import {space} from 'sentry/styles/space';
  14. import type {Frame} from 'sentry/types/event';
  15. import type {MRI} from 'sentry/types/metrics';
  16. import type {MetricCodeLocationFrame} from 'sentry/utils/metrics/types';
  17. import {useMetricCodeLocations} from 'sentry/utils/metrics/useMetricsCodeLocations';
  18. interface CodeLocationsProps extends SelectionRange {
  19. mri?: MRI;
  20. }
  21. export function CodeLocations({mri, ...rangeOpts}: CodeLocationsProps) {
  22. const {data, isFetching, isError, refetch} = useMetricCodeLocations(mri, rangeOpts);
  23. if (isFetching) {
  24. return <LoadingIndicator />;
  25. }
  26. if (isError) {
  27. return <LoadingError onRetry={refetch} />;
  28. }
  29. if (!mri) {
  30. return (
  31. <CenterContent>
  32. <EmptyMessage
  33. style={{margin: 'auto'}}
  34. icon={<IconSearch size="xxl" />}
  35. title={t('Nothing to show!')}
  36. description={t('Choose a metric to display data.')}
  37. />
  38. </CenterContent>
  39. );
  40. }
  41. if (!Array.isArray(data) || data.length === 0) {
  42. return (
  43. <CenterContent>
  44. <EmptyMessage
  45. style={{margin: 'auto'}}
  46. icon={<IconSearch size="xxl" />}
  47. title={t('Nothing to show!')}
  48. description={t('No code locations found for this metric.')}
  49. />
  50. </CenterContent>
  51. );
  52. }
  53. const codeLocations = data[0].frames ?? [];
  54. // We only want to show the first 5 code locations
  55. const codeLocationsToShow = codeLocations.slice(0, 5);
  56. return (
  57. <CodeLocationsWrapper>
  58. {codeLocationsToShow.slice(0, 5).map((location, index) => (
  59. <CodeLocation
  60. key={`location-${index}`}
  61. codeLocation={location}
  62. isFirst={index === 0}
  63. isLast={index === codeLocationsToShow.length - 1}
  64. />
  65. ))}
  66. </CodeLocationsWrapper>
  67. );
  68. }
  69. type CodeLocationProps = {
  70. codeLocation: MetricCodeLocationFrame;
  71. isFirst?: boolean;
  72. isLast?: boolean;
  73. };
  74. function CodeLocation({codeLocation, isFirst, isLast}: CodeLocationProps) {
  75. const [showContext, setShowContext] = useState(!!isFirst);
  76. const toggleShowContext = useCallback(() => {
  77. setShowContext(prevState => !prevState);
  78. }, []);
  79. const hasContext = !!codeLocation.contextLine;
  80. return (
  81. <CodeLocationWrapper>
  82. <DefaultLineWrapper
  83. onClick={() => {
  84. if (!hasContext) {
  85. return;
  86. }
  87. toggleShowContext();
  88. }}
  89. isFirst={isFirst}
  90. isLast={isLast}
  91. hasContext={hasContext}
  92. >
  93. <DefaultLine className="title" showContext={showContext}>
  94. <DefaultLineTitleWrapper>
  95. <LeftLineTitle>
  96. <DefaultTitle
  97. frame={codeLocation as Frame}
  98. isHoverPreviewed={false}
  99. platform="other"
  100. />
  101. </LeftLineTitle>
  102. <DefaultLineActionButtons>
  103. <CopyToClipboardButton
  104. text={`${codeLocation.filename}:${codeLocation.lineNo}`}
  105. size="zero"
  106. iconSize="xs"
  107. borderless
  108. onClick={e => {
  109. e.stopPropagation();
  110. }}
  111. />
  112. <ToggleCodeLocationContextButton
  113. disabled={!hasContext}
  114. isToggled={showContext}
  115. handleToggle={toggleShowContext}
  116. />
  117. </DefaultLineActionButtons>
  118. </DefaultLineTitleWrapper>
  119. </DefaultLine>
  120. {showContext && hasContext && (
  121. <CodeLocationContext codeLocation={codeLocation} isLast={isLast} />
  122. )}
  123. </DefaultLineWrapper>
  124. </CodeLocationWrapper>
  125. );
  126. }
  127. type ToggleCodeLocationContextButtonProps = {
  128. disabled: boolean;
  129. handleToggle: () => void;
  130. isToggled: boolean;
  131. };
  132. function ToggleCodeLocationContextButton({
  133. disabled,
  134. isToggled,
  135. handleToggle,
  136. }: ToggleCodeLocationContextButtonProps) {
  137. return (
  138. <Button
  139. title={disabled ? t('No context available') : t('Toggle Context')}
  140. size="zero"
  141. onClick={event => {
  142. event.stopPropagation();
  143. handleToggle();
  144. }}
  145. disabled={disabled}
  146. >
  147. {/* legacy size is deprecated but the icon is too big without it */}
  148. <IconChevron direction={isToggled ? 'up' : 'down'} size="xs" legacySize="8px" />
  149. </Button>
  150. );
  151. }
  152. type CodeLocationContextProps = {
  153. codeLocation: MetricCodeLocationFrame;
  154. isLast?: boolean;
  155. };
  156. function CodeLocationContext({codeLocation, isLast}: CodeLocationContextProps) {
  157. const lineNo = codeLocation.lineNo ?? 0;
  158. const preContextLines: [number, string][] = useMemo(
  159. () => codeLocation.preContext?.map((line, index) => [lineNo - 5 + index, line]) ?? [],
  160. [codeLocation.preContext, lineNo]
  161. );
  162. const postContextLines: [number, string][] = useMemo(
  163. () => codeLocation.postContext?.map((line, index) => [lineNo + index, line]) ?? [],
  164. [codeLocation.postContext, lineNo]
  165. );
  166. return (
  167. <SourceContextWrapper isLast={isLast}>
  168. {preContextLines.map(line => (
  169. <ContextLine key={`pre-${line[0]}-${line[1]}`} line={line} isActive={false} />
  170. ))}
  171. <ContextLine line={[lineNo, codeLocation.contextLine ?? '']} isActive />
  172. {postContextLines.map(line => (
  173. <ContextLine key={`post-${line[0]}-${line[1]}`} line={line} isActive={false} />
  174. ))}
  175. </SourceContextWrapper>
  176. );
  177. }
  178. const CodeLocationWrapper = styled('div')`
  179. display: flex;
  180. `;
  181. const DefaultLineActionButtons = styled('div')`
  182. display: flex;
  183. gap: ${space(1)};
  184. `;
  185. const CodeLocationsWrapper = styled('div')`
  186. & code {
  187. font-family: inherit;
  188. font-size: inherit;
  189. }
  190. `;
  191. const SourceContextWrapper = styled('div')<{isLast?: boolean}>`
  192. word-wrap: break-word;
  193. font-family: ${p => p.theme.text.familyMono};
  194. font-size: ${p => p.theme.fontSizeSmall};
  195. line-height: 24px;
  196. min-height: ${space(3)};
  197. white-space: pre;
  198. white-space: pre-wrap;
  199. background-color: ${p => p.theme.background};
  200. `;
  201. const DefaultLineWrapper = styled('div')<{
  202. hasContext?: boolean;
  203. isFirst?: boolean;
  204. isLast?: boolean;
  205. }>`
  206. :hover {
  207. cursor: ${p => p.hasContext && 'pointer'};
  208. }
  209. flex-grow: 1;
  210. border-top-left-radius: ${p => (p.isFirst ? p.theme.borderRadius : 0)};
  211. border-top-right-radius: ${p => (p.isFirst ? p.theme.borderRadius : 0)};
  212. border-bottom-left-radius: ${p => (p.isLast ? p.theme.borderRadius : 0)};
  213. border-bottom-right-radius: ${p => (p.isLast ? p.theme.borderRadius : 0)};
  214. border: 1px solid ${p => p.theme.border};
  215. border-top: ${p => (p.isFirst ? `1px solid ${p.theme.border}` : 'none')};
  216. background-color: ${p => p.theme.backgroundTertiary};
  217. `;
  218. const DefaultLine = styled('div')<{showContext?: boolean}>`
  219. display: flex;
  220. justify-content: space-between;
  221. align-items: center;
  222. border-bottom: ${p => (p.showContext ? `1px solid ${p.theme.border}` : 'none')};
  223. `;
  224. const DefaultLineTitleWrapper = styled('div')`
  225. width: 100%;
  226. display: flex;
  227. align-items: center;
  228. justify-content: space-between;
  229. font-size: ${p => p.theme.codeFontSize};
  230. line-height: ${p => p.theme.fontSizeLarge};
  231. font-style: normal;
  232. padding: ${space(0.75)} ${space(3)} ${space(0.75)} ${space(1.5)};
  233. word-break: break-all;
  234. word-break: break-word;
  235. `;
  236. const LeftLineTitle = styled('div')`
  237. display: flex;
  238. flex-wrap: wrap;
  239. align-items: center;
  240. `;
  241. const CenterContent = styled('div')`
  242. display: flex;
  243. justify-content: center;
  244. align-items: center;
  245. height: 100%;
  246. `;