httpSamplesPanel.tsx 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641
  1. import {Fragment, useCallback} from 'react';
  2. import styled from '@emotion/styled';
  3. import * as qs from 'query-string';
  4. import Feature from 'sentry/components/acl/feature';
  5. import ProjectAvatar from 'sentry/components/avatar/projectAvatar';
  6. import {Button} from 'sentry/components/button';
  7. import {CompactSelect} from 'sentry/components/compactSelect';
  8. import SearchBar from 'sentry/components/events/searchBar';
  9. import Link from 'sentry/components/links/link';
  10. import {SegmentedControl} from 'sentry/components/segmentedControl';
  11. import {t} from 'sentry/locale';
  12. import {space} from 'sentry/styles/space';
  13. import {trackAnalytics} from 'sentry/utils/analytics';
  14. import {DurationUnit, RateUnit} from 'sentry/utils/discover/fields';
  15. import {DiscoverDatasets} from 'sentry/utils/discover/types';
  16. import {PageAlertProvider} from 'sentry/utils/performance/contexts/pageAlert';
  17. import {decodeScalar} from 'sentry/utils/queryString';
  18. import {
  19. EMPTY_OPTION_VALUE,
  20. escapeFilterValue,
  21. MutableSearch,
  22. } from 'sentry/utils/tokenizeSearch';
  23. import normalizeUrl from 'sentry/utils/url/normalizeUrl';
  24. import useLocationQuery from 'sentry/utils/url/useLocationQuery';
  25. import {useLocation} from 'sentry/utils/useLocation';
  26. import useOrganization from 'sentry/utils/useOrganization';
  27. import usePageFilters from 'sentry/utils/usePageFilters';
  28. import useProjects from 'sentry/utils/useProjects';
  29. import useRouter from 'sentry/utils/useRouter';
  30. import {computeAxisMax} from 'sentry/views/insights/common/components/chart';
  31. import DetailPanel from 'sentry/views/insights/common/components/detailPanel';
  32. import {MetricReadout} from 'sentry/views/insights/common/components/metricReadout';
  33. import * as ModuleLayout from 'sentry/views/insights/common/components/moduleLayout';
  34. import {Ribbon} from 'sentry/views/insights/common/components/ribbon';
  35. import {getTimeSpentExplanation} from 'sentry/views/insights/common/components/tableCells/timeSpentCell';
  36. import {
  37. useSpanMetrics,
  38. useSpansIndexed,
  39. } from 'sentry/views/insights/common/queries/useDiscover';
  40. import {useSpanMetricsSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
  41. import {useSpanMetricsTopNSeries} from 'sentry/views/insights/common/queries/useSpanMetricsTopNSeries';
  42. import {AverageValueMarkLine} from 'sentry/views/insights/common/utils/averageValueMarkLine';
  43. import {findSampleFromDataPoint} from 'sentry/views/insights/common/utils/findDataPoint';
  44. import {
  45. DataTitles,
  46. getThroughputTitle,
  47. } from 'sentry/views/insights/common/views/spans/types';
  48. import {useSampleScatterPlotSeries} from 'sentry/views/insights/common/views/spanSummaryPage/sampleList/durationChart/useSampleScatterPlotSeries';
  49. import {DurationChart} from 'sentry/views/insights/http/components/charts/durationChart';
  50. import {ResponseCodeCountChart} from 'sentry/views/insights/http/components/charts/responseCodeCountChart';
  51. import {SpanSamplesTable} from 'sentry/views/insights/http/components/tables/spanSamplesTable';
  52. import {HTTP_RESPONSE_STATUS_CODES} from 'sentry/views/insights/http/data/definitions';
  53. import {useSpanSamples} from 'sentry/views/insights/http/queries/useSpanSamples';
  54. import {Referrer} from 'sentry/views/insights/http/referrers';
  55. import {BASE_FILTERS} from 'sentry/views/insights/http/settings';
  56. import decodePanel from 'sentry/views/insights/http/utils/queryParameterDecoders/panel';
  57. import decodeResponseCodeClass from 'sentry/views/insights/http/utils/queryParameterDecoders/responseCodeClass';
  58. import {useDebouncedState} from 'sentry/views/insights/http/utils/useDebouncedState';
  59. import {
  60. ModuleName,
  61. SpanFunction,
  62. SpanIndexedField,
  63. SpanMetricsField,
  64. type SpanMetricsQueryFilters,
  65. } from 'sentry/views/insights/types';
  66. import {TraceViewSources} from 'sentry/views/performance/newTraceDetails/traceMetadataHeader';
  67. import {useSpanFieldSupportedTags} from 'sentry/views/performance/utils/useSpanFieldSupportedTags';
  68. export function HTTPSamplesPanel() {
  69. const router = useRouter();
  70. const location = useLocation();
  71. const query = useLocationQuery({
  72. fields: {
  73. project: decodeScalar,
  74. domain: decodeScalar,
  75. transaction: decodeScalar,
  76. transactionMethod: decodeScalar,
  77. panel: decodePanel,
  78. responseCodeClass: decodeResponseCodeClass,
  79. spanSearchQuery: decodeScalar,
  80. },
  81. });
  82. const organization = useOrganization();
  83. const {projects} = useProjects();
  84. const {selection} = usePageFilters();
  85. const supportedTags = useSpanFieldSupportedTags();
  86. const project = projects.find(p => query.project === p.id);
  87. const [highlightedSpanId, setHighlightedSpanId] = useDebouncedState<string | undefined>(
  88. undefined,
  89. [],
  90. SAMPLE_HOVER_DEBOUNCE
  91. );
  92. // `detailKey` controls whether the panel is open. If all required properties are available, concat them to make a key, otherwise set to `undefined` and hide the panel
  93. const detailKey = query.transaction
  94. ? [query.domain, query.transactionMethod, query.transaction].filter(Boolean).join(':')
  95. : undefined;
  96. const handlePanelChange = newPanelName => {
  97. trackAnalytics('performance_views.sample_spans.filter_updated', {
  98. filter: 'panel',
  99. new_state: newPanelName,
  100. organization,
  101. source: ModuleName.HTTP,
  102. });
  103. router.replace({
  104. pathname: location.pathname,
  105. query: {
  106. ...location.query,
  107. panel: newPanelName,
  108. },
  109. });
  110. };
  111. const handleResponseCodeClassChange = newResponseCodeClass => {
  112. trackAnalytics('performance_views.sample_spans.filter_updated', {
  113. filter: 'status_code',
  114. new_state: newResponseCodeClass.value,
  115. organization,
  116. source: ModuleName.HTTP,
  117. });
  118. router.replace({
  119. pathname: location.pathname,
  120. query: {
  121. ...location.query,
  122. responseCodeClass: newResponseCodeClass.value,
  123. },
  124. });
  125. };
  126. const isPanelOpen = Boolean(detailKey);
  127. // The ribbon is above the data selectors, and not affected by them. So, it has its own filters.
  128. const ribbonFilters: SpanMetricsQueryFilters = {
  129. ...BASE_FILTERS,
  130. 'span.domain':
  131. query.domain === '' ? EMPTY_OPTION_VALUE : escapeFilterValue(query.domain),
  132. transaction: query.transaction,
  133. };
  134. // These filters are for the charts and samples tables
  135. const filters: SpanMetricsQueryFilters = {
  136. ...BASE_FILTERS,
  137. 'span.domain':
  138. query.domain === '' ? EMPTY_OPTION_VALUE : escapeFilterValue(query.domain),
  139. transaction: query.transaction,
  140. };
  141. const responseCodeInRange = query.responseCodeClass
  142. ? Object.keys(HTTP_RESPONSE_STATUS_CODES).filter(code =>
  143. code.startsWith(query.responseCodeClass)
  144. )
  145. : [];
  146. if (responseCodeInRange.length > 0) {
  147. // TODO: Allow automatic array parameter concatenation
  148. filters['span.status_code'] = `[${responseCodeInRange.join(',')}]`;
  149. }
  150. const search = MutableSearch.fromQueryObject(filters);
  151. const {
  152. data: domainTransactionMetrics,
  153. isFetching: areDomainTransactionMetricsFetching,
  154. } = useSpanMetrics(
  155. {
  156. search: MutableSearch.fromQueryObject(ribbonFilters),
  157. fields: [
  158. `${SpanFunction.SPM}()`,
  159. `avg(${SpanMetricsField.SPAN_SELF_TIME})`,
  160. `sum(${SpanMetricsField.SPAN_SELF_TIME})`,
  161. 'http_response_rate(3)',
  162. 'http_response_rate(4)',
  163. 'http_response_rate(5)',
  164. `${SpanFunction.TIME_SPENT_PERCENTAGE}()`,
  165. ],
  166. enabled: isPanelOpen,
  167. },
  168. Referrer.SAMPLES_PANEL_METRICS_RIBBON
  169. );
  170. const {
  171. isFetching: isDurationDataFetching,
  172. data: durationData,
  173. error: durationError,
  174. } = useSpanMetricsSeries(
  175. {
  176. search,
  177. yAxis: [`avg(span.self_time)`],
  178. enabled: isPanelOpen && query.panel === 'duration',
  179. },
  180. Referrer.SAMPLES_PANEL_DURATION_CHART
  181. );
  182. const {
  183. isFetching: isResponseCodeDataLoading,
  184. data: responseCodeData,
  185. error: responseCodeError,
  186. } = useSpanMetricsTopNSeries({
  187. search,
  188. fields: ['span.status_code', 'count()'],
  189. yAxis: ['count()'],
  190. topEvents: 5,
  191. sorts: [
  192. {
  193. kind: 'desc',
  194. field: 'count()',
  195. },
  196. ],
  197. enabled: isPanelOpen && query.panel === 'status',
  198. referrer: Referrer.SAMPLES_PANEL_RESPONSE_CODE_CHART,
  199. });
  200. // NOTE: Due to some data confusion, the `domain` column in the spans table can either be `null` or `""`. Searches like `"!has:span.domain"` are turned into the ClickHouse clause `isNull(domain)`, and do not match the empty string. We need a query that matches empty strings _and_ null_ which is `(!has:domain OR domain:[""])`. This hack can be removed in August 2024, once https://github.com/getsentry/snuba/pull/5780 has been deployed for 90 days and all `""` domains have fallen out of the data retention window. Also, `null` domains will become more rare as people upgrade the JS SDK to versions that populate the `server.address` span attribute
  201. const sampleSpansSearch = MutableSearch.fromQueryObject({
  202. ...filters,
  203. 'span.domain': undefined,
  204. });
  205. // filter by key-value filters specified in the search bar query
  206. sampleSpansSearch.addStringMultiFilter(query.spanSearchQuery);
  207. if (query.domain === '') {
  208. sampleSpansSearch.addOp('(');
  209. sampleSpansSearch.addFilterValue('!has', 'span.domain');
  210. sampleSpansSearch.addOp('OR');
  211. // HACK: Use `addOp` to add the condition `'span.domain:[""]'` and avoid escaping the double quotes. Ideally there'd be a way to specify this explicitly, but this whole thing is a hack anyway. Once a plain `!has:span.domain` condition works, this is not necessary
  212. sampleSpansSearch.addOp('span.domain:[""]');
  213. sampleSpansSearch.addOp(')');
  214. } else {
  215. sampleSpansSearch.addFilterValue('span.domain', query.domain);
  216. }
  217. const durationAxisMax = computeAxisMax([durationData?.[`avg(span.self_time)`]]);
  218. const {
  219. data: durationSamplesData,
  220. isFetching: isDurationSamplesDataFetching,
  221. error: durationSamplesDataError,
  222. refetch: refetchDurationSpanSamples,
  223. } = useSpanSamples({
  224. search: sampleSpansSearch,
  225. fields: [
  226. SpanIndexedField.TRACE,
  227. SpanIndexedField.TRANSACTION_ID,
  228. SpanIndexedField.SPAN_DESCRIPTION,
  229. SpanIndexedField.RESPONSE_CODE,
  230. ],
  231. min: 0,
  232. max: durationAxisMax,
  233. enabled: isPanelOpen && query.panel === 'duration' && durationAxisMax > 0,
  234. referrer: Referrer.SAMPLES_PANEL_DURATION_SAMPLES,
  235. });
  236. const {
  237. data: responseCodeSamplesData,
  238. isFetching: isResponseCodeSamplesDataFetching,
  239. error: responseCodeSamplesDataError,
  240. refetch: refetchResponseCodeSpanSamples,
  241. } = useSpansIndexed(
  242. {
  243. search: sampleSpansSearch,
  244. fields: [
  245. SpanIndexedField.PROJECT,
  246. SpanIndexedField.TRACE,
  247. SpanIndexedField.TRANSACTION_ID,
  248. SpanIndexedField.ID,
  249. SpanIndexedField.TIMESTAMP,
  250. SpanIndexedField.SPAN_DESCRIPTION,
  251. SpanIndexedField.RESPONSE_CODE,
  252. ],
  253. sorts: [SPAN_SAMPLES_SORT],
  254. limit: SPAN_SAMPLE_LIMIT,
  255. enabled: isPanelOpen && query.panel === 'status',
  256. },
  257. Referrer.SAMPLES_PANEL_RESPONSE_CODE_SAMPLES
  258. );
  259. const sampledSpanDataSeries = useSampleScatterPlotSeries(
  260. durationSamplesData,
  261. domainTransactionMetrics?.[0]?.['avg(span.self_time)'],
  262. highlightedSpanId
  263. );
  264. const handleSearch = (newSpanSearchQuery: string) => {
  265. router.replace({
  266. pathname: location.pathname,
  267. query: {
  268. ...location.query,
  269. spanSearchQuery: newSpanSearchQuery,
  270. },
  271. });
  272. };
  273. const handleClose = () => {
  274. router.replace({
  275. pathname: router.location.pathname,
  276. query: {
  277. ...router.location.query,
  278. transaction: undefined,
  279. transactionMethod: undefined,
  280. },
  281. });
  282. };
  283. const handleOpen = useCallback(() => {
  284. if (query.transaction) {
  285. trackAnalytics('performance_views.sample_spans.opened', {
  286. organization,
  287. source: ModuleName.HTTP,
  288. });
  289. }
  290. }, [organization, query.transaction]);
  291. return (
  292. <PageAlertProvider>
  293. <DetailPanel detailKey={detailKey} onClose={handleClose} onOpen={handleOpen}>
  294. <ModuleLayout.Layout>
  295. <ModuleLayout.Full>
  296. <HeaderContainer>
  297. {project && (
  298. <SpanSummaryProjectAvatar
  299. project={project}
  300. direction="left"
  301. size={40}
  302. hasTooltip
  303. tooltip={project.slug}
  304. />
  305. )}
  306. <Title>
  307. <Link
  308. to={normalizeUrl(
  309. `/organizations/${organization.slug}/performance/summary?${qs.stringify(
  310. {
  311. project: query.project,
  312. transaction: query.transaction,
  313. }
  314. )}`
  315. )}
  316. >
  317. {query.transaction &&
  318. query.transactionMethod &&
  319. !query.transaction.startsWith(query.transactionMethod)
  320. ? `${query.transactionMethod} ${query.transaction}`
  321. : query.transaction}
  322. </Link>
  323. </Title>
  324. </HeaderContainer>
  325. </ModuleLayout.Full>
  326. <ModuleLayout.Full>
  327. <Ribbon>
  328. <MetricReadout
  329. align="left"
  330. title={getThroughputTitle('http')}
  331. value={domainTransactionMetrics?.[0]?.[`${SpanFunction.SPM}()`]}
  332. unit={RateUnit.PER_MINUTE}
  333. isLoading={areDomainTransactionMetricsFetching}
  334. />
  335. <MetricReadout
  336. align="left"
  337. title={DataTitles.avg}
  338. value={
  339. domainTransactionMetrics?.[0]?.[
  340. `avg(${SpanMetricsField.SPAN_SELF_TIME})`
  341. ]
  342. }
  343. unit={DurationUnit.MILLISECOND}
  344. isLoading={areDomainTransactionMetricsFetching}
  345. />
  346. <MetricReadout
  347. align="left"
  348. title={t('3XXs')}
  349. value={domainTransactionMetrics?.[0]?.[`http_response_rate(3)`]}
  350. unit="percentage"
  351. isLoading={areDomainTransactionMetricsFetching}
  352. />
  353. <MetricReadout
  354. align="left"
  355. title={t('4XXs')}
  356. value={domainTransactionMetrics?.[0]?.[`http_response_rate(4)`]}
  357. unit="percentage"
  358. isLoading={areDomainTransactionMetricsFetching}
  359. />
  360. <MetricReadout
  361. align="left"
  362. title={t('5XXs')}
  363. value={domainTransactionMetrics?.[0]?.[`http_response_rate(5)`]}
  364. unit="percentage"
  365. isLoading={areDomainTransactionMetricsFetching}
  366. />
  367. <MetricReadout
  368. align="left"
  369. title={DataTitles.timeSpent}
  370. value={domainTransactionMetrics?.[0]?.['sum(span.self_time)']}
  371. unit={DurationUnit.MILLISECOND}
  372. tooltip={getTimeSpentExplanation(
  373. domainTransactionMetrics?.[0]?.['time_spent_percentage()'],
  374. 'http.client'
  375. )}
  376. isLoading={areDomainTransactionMetricsFetching}
  377. />
  378. </Ribbon>
  379. </ModuleLayout.Full>
  380. <ModuleLayout.Full>
  381. <PanelControls>
  382. <SegmentedControl
  383. value={query.panel}
  384. onChange={handlePanelChange}
  385. aria-label={t('Choose breakdown type')}
  386. >
  387. <SegmentedControl.Item key="duration">
  388. {t('By Duration')}
  389. </SegmentedControl.Item>
  390. <SegmentedControl.Item key="status">
  391. {t('By Response Code')}
  392. </SegmentedControl.Item>
  393. </SegmentedControl>
  394. <CompactSelect
  395. value={query.responseCodeClass}
  396. options={HTTP_RESPONSE_CODE_CLASS_OPTIONS}
  397. onChange={handleResponseCodeClassChange}
  398. triggerProps={{
  399. prefix: t('Response Code'),
  400. }}
  401. />
  402. </PanelControls>
  403. </ModuleLayout.Full>
  404. {query.panel === 'duration' && (
  405. <Fragment>
  406. <ModuleLayout.Full>
  407. <DurationChart
  408. series={[
  409. {
  410. ...durationData[`avg(span.self_time)`],
  411. markLine: AverageValueMarkLine(),
  412. },
  413. ]}
  414. scatterPlot={sampledSpanDataSeries}
  415. onHighlight={highlights => {
  416. const firstHighlight = highlights[0];
  417. if (!firstHighlight) {
  418. setHighlightedSpanId(undefined);
  419. return;
  420. }
  421. const sample = findSampleFromDataPoint<
  422. (typeof durationSamplesData)[0]
  423. >(
  424. firstHighlight.dataPoint,
  425. durationSamplesData,
  426. SpanIndexedField.SPAN_SELF_TIME
  427. );
  428. setHighlightedSpanId(sample?.span_id);
  429. }}
  430. isLoading={isDurationDataFetching}
  431. error={durationError}
  432. />
  433. </ModuleLayout.Full>
  434. </Fragment>
  435. )}
  436. {query.panel === 'status' && (
  437. <Fragment>
  438. <ModuleLayout.Full>
  439. <ResponseCodeCountChart
  440. series={Object.values(responseCodeData).filter(Boolean)}
  441. isLoading={isResponseCodeDataLoading}
  442. error={responseCodeError}
  443. />
  444. </ModuleLayout.Full>
  445. </Fragment>
  446. )}
  447. <Feature features="performance-sample-panel-search">
  448. <ModuleLayout.Full>
  449. <SearchBar
  450. searchSource={`${ModuleName.HTTP}-sample-panel`}
  451. query={query.spanSearchQuery}
  452. onSearch={handleSearch}
  453. placeholder={t('Search for span attributes')}
  454. organization={organization}
  455. supportedTags={supportedTags}
  456. dataset={DiscoverDatasets.SPANS_INDEXED}
  457. projectIds={selection.projects}
  458. />
  459. </ModuleLayout.Full>
  460. </Feature>
  461. {query.panel === 'duration' && (
  462. <Fragment>
  463. <ModuleLayout.Full>
  464. <SpanSamplesTable
  465. data={durationSamplesData}
  466. isLoading={isDurationDataFetching || isDurationSamplesDataFetching}
  467. highlightedSpanId={highlightedSpanId}
  468. onSampleMouseOver={sample => setHighlightedSpanId(sample.span_id)}
  469. onSampleMouseOut={() => setHighlightedSpanId(undefined)}
  470. error={durationSamplesDataError}
  471. // TODO: The samples endpoint doesn't provide its own meta, so we need to create it manually
  472. meta={{
  473. fields: {
  474. 'span.response_code': 'number',
  475. },
  476. units: {},
  477. }}
  478. referrer={TraceViewSources.REQUESTS_MODULE}
  479. />
  480. </ModuleLayout.Full>
  481. <ModuleLayout.Full>
  482. <Button
  483. onClick={() => {
  484. trackAnalytics(
  485. 'performance_views.sample_spans.try_different_samples_clicked',
  486. {organization, source: ModuleName.HTTP}
  487. );
  488. refetchDurationSpanSamples();
  489. }}
  490. >
  491. {t('Try Different Samples')}
  492. </Button>
  493. </ModuleLayout.Full>
  494. </Fragment>
  495. )}
  496. {query.panel === 'status' && (
  497. <Fragment>
  498. <ModuleLayout.Full>
  499. <SpanSamplesTable
  500. data={responseCodeSamplesData ?? []}
  501. isLoading={isResponseCodeSamplesDataFetching}
  502. error={responseCodeSamplesDataError}
  503. // TODO: The samples endpoint doesn't provide its own meta, so we need to create it manually
  504. meta={{
  505. fields: {
  506. 'span.response_code': 'number',
  507. },
  508. units: {},
  509. }}
  510. />
  511. </ModuleLayout.Full>
  512. <ModuleLayout.Full>
  513. <Button
  514. onClick={() => {
  515. trackAnalytics(
  516. 'performance_views.sample_spans.try_different_samples_clicked',
  517. {organization, source: ModuleName.HTTP}
  518. );
  519. refetchResponseCodeSpanSamples();
  520. }}
  521. >
  522. {t('Try Different Samples')}
  523. </Button>
  524. </ModuleLayout.Full>
  525. </Fragment>
  526. )}
  527. </ModuleLayout.Layout>
  528. </DetailPanel>
  529. </PageAlertProvider>
  530. );
  531. }
  532. const SAMPLE_HOVER_DEBOUNCE = 10;
  533. const SPAN_SAMPLE_LIMIT = 10;
  534. // This is functionally a random sort, which is what we want
  535. const SPAN_SAMPLES_SORT = {
  536. field: 'span_id',
  537. kind: 'desc' as const,
  538. };
  539. const SpanSummaryProjectAvatar = styled(ProjectAvatar)`
  540. padding-right: ${space(1)};
  541. `;
  542. const HTTP_RESPONSE_CODE_CLASS_OPTIONS = [
  543. {
  544. value: '',
  545. label: t('All'),
  546. },
  547. {
  548. value: '2',
  549. label: t('2XXs'),
  550. },
  551. {
  552. value: '3',
  553. label: t('3XXs'),
  554. },
  555. {
  556. value: '4',
  557. label: t('4XXs'),
  558. },
  559. {
  560. value: '5',
  561. label: t('5XXs'),
  562. },
  563. ];
  564. // TODO - copy of static/app/views/starfish/views/spanSummaryPage/sampleList/index.tsx
  565. const HeaderContainer = styled('div')`
  566. display: grid;
  567. grid-template-rows: auto auto auto;
  568. align-items: center;
  569. @media (min-width: ${p => p.theme.breakpoints.small}) {
  570. grid-template-rows: auto;
  571. grid-template-columns: auto 1fr;
  572. }
  573. `;
  574. const Title = styled('h4')`
  575. overflow: hidden;
  576. text-overflow: ellipsis;
  577. white-space: nowrap;
  578. margin: 0;
  579. `;
  580. const PanelControls = styled('div')`
  581. display: flex;
  582. justify-content: space-between;
  583. gap: ${space(2)};
  584. `;