databaseSpanSummaryPage.tsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326
  1. import {Fragment} from 'react';
  2. import type {RouteComponentProps} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import {Breadcrumbs} from 'sentry/components/breadcrumbs';
  5. import ButtonBar from 'sentry/components/buttonBar';
  6. import FeedbackWidgetButton from 'sentry/components/feedback/widget/feedbackWidgetButton';
  7. import * as Layout from 'sentry/components/layouts/thirds';
  8. import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
  9. import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
  10. import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
  11. import {t} from 'sentry/locale';
  12. import {space} from 'sentry/styles/space';
  13. import {DurationUnit, RateUnit} from 'sentry/utils/discover/fields';
  14. import {decodeScalar, decodeSorts} from 'sentry/utils/queryString';
  15. import {MutableSearch} from 'sentry/utils/tokenizeSearch';
  16. import {useLocation} from 'sentry/utils/useLocation';
  17. import useOrganization from 'sentry/utils/useOrganization';
  18. import {normalizeUrl} from 'sentry/utils/withDomainRequired';
  19. import {DurationChart} from 'sentry/views/performance/database/durationChart';
  20. import {isAValidSort} from 'sentry/views/performance/database/queriesTable';
  21. import {QueryTransactionsTable} from 'sentry/views/performance/database/queryTransactionsTable';
  22. import {BASE_URL} from 'sentry/views/performance/database/settings';
  23. import {ThroughputChart} from 'sentry/views/performance/database/throughputChart';
  24. import {useSelectedDurationAggregate} from 'sentry/views/performance/database/useSelectedDurationAggregate';
  25. import {MetricReadout} from 'sentry/views/performance/metricReadout';
  26. import * as ModuleLayout from 'sentry/views/performance/moduleLayout';
  27. import {ModulePageProviders} from 'sentry/views/performance/modulePageProviders';
  28. import {useDatabaseModuleURL} from 'sentry/views/performance/utils/useModuleURL';
  29. import {useSynchronizeCharts} from 'sentry/views/starfish/components/chart';
  30. import {DatabaseSpanDescription} from 'sentry/views/starfish/components/spanDescription';
  31. import {getTimeSpentExplanation} from 'sentry/views/starfish/components/tableCells/timeSpentCell';
  32. import {useSpanMetrics} from 'sentry/views/starfish/queries/useDiscover';
  33. import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useDiscoverSeries';
  34. import type {SpanMetricsQueryFilters} from 'sentry/views/starfish/types';
  35. import {ModuleName, SpanFunction, SpanMetricsField} from 'sentry/views/starfish/types';
  36. import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
  37. import {DataTitles, getThroughputTitle} from 'sentry/views/starfish/views/spans/types';
  38. import {SampleList} from 'sentry/views/starfish/views/spanSummaryPage/sampleList';
  39. type Query = {
  40. transaction: string;
  41. transactionMethod: string;
  42. [QueryParameterNames.TRANSACTIONS_SORT]: string;
  43. aggregate?: string;
  44. };
  45. type Props = RouteComponentProps<Query, {groupId: string}>;
  46. export function DatabaseSpanSummaryPage({params}: Props) {
  47. const moduleURL = useDatabaseModuleURL();
  48. const organization = useOrganization();
  49. const location = useLocation<Query>();
  50. const [selectedAggregate] = useSelectedDurationAggregate();
  51. const {groupId} = params;
  52. const {transaction, transactionMethod} = location.query;
  53. const filters: SpanMetricsQueryFilters = {
  54. 'span.group': groupId,
  55. };
  56. const cursor = decodeScalar(location.query?.[QueryParameterNames.TRANSACTIONS_CURSOR]);
  57. // TODO: Fetch sort information using `useLocationQuery`
  58. const sortField = decodeScalar(location.query?.[QueryParameterNames.TRANSACTIONS_SORT]);
  59. const sort = decodeSorts(sortField).filter(isAValidSort).at(0) ?? DEFAULT_SORT;
  60. const {data, isLoading: areSpanMetricsLoading} = useSpanMetrics(
  61. {
  62. search: MutableSearch.fromQueryObject(filters),
  63. fields: [
  64. SpanMetricsField.SPAN_OP,
  65. SpanMetricsField.SPAN_DESCRIPTION,
  66. SpanMetricsField.SPAN_ACTION,
  67. SpanMetricsField.SPAN_DOMAIN,
  68. 'count()',
  69. `${SpanFunction.SPM}()`,
  70. `sum(${SpanMetricsField.SPAN_SELF_TIME})`,
  71. `avg(${SpanMetricsField.SPAN_SELF_TIME})`,
  72. `${SpanFunction.TIME_SPENT_PERCENTAGE}()`,
  73. `${SpanFunction.HTTP_ERROR_COUNT}()`,
  74. ],
  75. enabled: Boolean(groupId),
  76. },
  77. 'api.starfish.span-summary-page-metrics'
  78. );
  79. const spanMetrics = data[0] ?? {};
  80. const {
  81. isLoading: isTransactionsListLoading,
  82. data: transactionsList,
  83. meta: transactionsListMeta,
  84. error: transactionsListError,
  85. pageLinks: transactionsListPageLinks,
  86. } = useSpanMetrics(
  87. {
  88. search: MutableSearch.fromQueryObject(filters),
  89. fields: [
  90. 'transaction',
  91. 'transaction.method',
  92. 'spm()',
  93. `sum(${SpanMetricsField.SPAN_SELF_TIME})`,
  94. `avg(${SpanMetricsField.SPAN_SELF_TIME})`,
  95. 'time_spent_percentage()',
  96. `${SpanFunction.HTTP_ERROR_COUNT}()`,
  97. ],
  98. sorts: [sort],
  99. limit: TRANSACTIONS_TABLE_ROW_COUNT,
  100. cursor,
  101. },
  102. 'api.starfish.span-transaction-metrics'
  103. );
  104. const span = {
  105. ...spanMetrics,
  106. [SpanMetricsField.SPAN_GROUP]: groupId,
  107. } as {
  108. [SpanMetricsField.SPAN_OP]: string;
  109. [SpanMetricsField.SPAN_DESCRIPTION]: string;
  110. [SpanMetricsField.SPAN_ACTION]: string;
  111. [SpanMetricsField.SPAN_DOMAIN]: string[];
  112. [SpanMetricsField.SPAN_GROUP]: string;
  113. };
  114. const {
  115. isLoading: isThroughputDataLoading,
  116. data: throughputData,
  117. error: throughputError,
  118. } = useSpanMetricsSeries(
  119. {
  120. search: MutableSearch.fromQueryObject(filters),
  121. yAxis: ['spm()'],
  122. enabled: Boolean(groupId),
  123. },
  124. 'api.starfish.span-summary-page-metrics-chart'
  125. );
  126. const {
  127. isLoading: isDurationDataLoading,
  128. data: durationData,
  129. error: durationError,
  130. } = useSpanMetricsSeries(
  131. {
  132. search: MutableSearch.fromQueryObject(filters),
  133. yAxis: [`${selectedAggregate}(${SpanMetricsField.SPAN_SELF_TIME})`],
  134. enabled: Boolean(groupId),
  135. },
  136. 'api.starfish.span-summary-page-metrics-chart'
  137. );
  138. useSynchronizeCharts([!isThroughputDataLoading && !isDurationDataLoading]);
  139. return (
  140. <Fragment>
  141. <Layout.Header>
  142. <Layout.HeaderContent>
  143. <Breadcrumbs
  144. crumbs={[
  145. {
  146. label: 'Performance',
  147. to: normalizeUrl(`/organizations/${organization.slug}/performance/`),
  148. preservePageFilters: true,
  149. },
  150. {
  151. label: 'Queries',
  152. to: moduleURL,
  153. preservePageFilters: true,
  154. },
  155. {
  156. label: 'Query Summary',
  157. },
  158. ]}
  159. />
  160. <Layout.Title>{t('Query Summary')}</Layout.Title>
  161. </Layout.HeaderContent>
  162. <Layout.HeaderActions>
  163. <ButtonBar gap={1}>
  164. <FeedbackWidgetButton />
  165. </ButtonBar>
  166. </Layout.HeaderActions>
  167. </Layout.Header>
  168. <Layout.Body>
  169. <Layout.Main fullWidth>
  170. <HeaderContainer>
  171. <PageFilterBar condensed>
  172. <EnvironmentPageFilter />
  173. <DatePageFilter />
  174. </PageFilterBar>
  175. <MetricsRibbon>
  176. <MetricReadout
  177. title={getThroughputTitle('db')}
  178. value={spanMetrics?.[`${SpanFunction.SPM}()`]}
  179. unit={RateUnit.PER_MINUTE}
  180. isLoading={areSpanMetricsLoading}
  181. />
  182. <MetricReadout
  183. title={DataTitles.avg}
  184. value={spanMetrics?.[`avg(${SpanMetricsField.SPAN_SELF_TIME})`]}
  185. unit={DurationUnit.MILLISECOND}
  186. isLoading={areSpanMetricsLoading}
  187. />
  188. <MetricReadout
  189. title={DataTitles.timeSpent}
  190. value={spanMetrics?.['sum(span.self_time)']}
  191. unit={DurationUnit.MILLISECOND}
  192. tooltip={getTimeSpentExplanation(
  193. spanMetrics?.['time_spent_percentage()'],
  194. 'db'
  195. )}
  196. isLoading={areSpanMetricsLoading}
  197. />
  198. </MetricsRibbon>
  199. </HeaderContainer>
  200. <ModuleLayout.Layout>
  201. {groupId && (
  202. <DescriptionContainer>
  203. <DatabaseSpanDescription
  204. groupId={groupId}
  205. preliminaryDescription={spanMetrics?.['span.description']}
  206. />
  207. </DescriptionContainer>
  208. )}
  209. <ModuleLayout.Full>
  210. <ChartContainer>
  211. <ThroughputChart
  212. series={throughputData['spm()']}
  213. isLoading={isThroughputDataLoading}
  214. error={throughputError}
  215. />
  216. <DurationChart
  217. series={[
  218. durationData[
  219. `${selectedAggregate}(${SpanMetricsField.SPAN_SELF_TIME})`
  220. ],
  221. ]}
  222. isLoading={isDurationDataLoading}
  223. error={durationError}
  224. />
  225. </ChartContainer>
  226. </ModuleLayout.Full>
  227. {span && (
  228. <ModuleLayout.Full>
  229. <QueryTransactionsTable
  230. span={span}
  231. data={transactionsList}
  232. error={transactionsListError}
  233. isLoading={isTransactionsListLoading}
  234. meta={transactionsListMeta}
  235. pageLinks={transactionsListPageLinks}
  236. sort={sort}
  237. />
  238. </ModuleLayout.Full>
  239. )}
  240. </ModuleLayout.Layout>
  241. <SampleList
  242. groupId={span[SpanMetricsField.SPAN_GROUP]}
  243. moduleName={ModuleName.DB}
  244. transactionName={transaction}
  245. transactionMethod={transactionMethod}
  246. />
  247. </Layout.Main>
  248. </Layout.Body>
  249. </Fragment>
  250. );
  251. }
  252. const DEFAULT_SORT = {
  253. kind: 'desc' as const,
  254. field: 'time_spent_percentage()' as const,
  255. };
  256. const TRANSACTIONS_TABLE_ROW_COUNT = 25;
  257. const ChartContainer = styled('div')`
  258. display: grid;
  259. gap: 0;
  260. grid-template-columns: 1fr;
  261. @media (min-width: ${p => p.theme.breakpoints.small}) {
  262. grid-template-columns: 1fr 1fr;
  263. gap: ${space(2)};
  264. }
  265. `;
  266. const HeaderContainer = styled('div')`
  267. display: flex;
  268. justify-content: space-between;
  269. flex-wrap: wrap;
  270. `;
  271. const DescriptionContainer = styled(ModuleLayout.Full)`
  272. line-height: 1.2;
  273. `;
  274. const MetricsRibbon = styled('div')`
  275. display: flex;
  276. flex-wrap: wrap;
  277. gap: ${space(4)};
  278. `;
  279. function PageWithProviders(props) {
  280. return (
  281. <ModulePageProviders
  282. title={[t('Performance'), t('Database'), t('Query Summary')].join(' — ')}
  283. baseURL={`/performance/${BASE_URL}`}
  284. features="spans-first-ui"
  285. >
  286. <DatabaseSpanSummaryPage {...props} />
  287. </ModulePageProviders>
  288. );
  289. }
  290. export default PageWithProviders;