httpDomainSummaryPage.tsx 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. import React from 'react';
  2. import styled from '@emotion/styled';
  3. import {Breadcrumbs} from 'sentry/components/breadcrumbs';
  4. import FloatingFeedbackWidget from 'sentry/components/feedback/widget/floatingFeedbackWidget';
  5. import * as Layout from 'sentry/components/layouts/thirds';
  6. import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
  7. import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
  8. import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
  9. import {t} from 'sentry/locale';
  10. import {space} from 'sentry/styles/space';
  11. import {DurationUnit, RateUnit} from 'sentry/utils/discover/fields';
  12. import {useLocation} from 'sentry/utils/useLocation';
  13. import useOrganization from 'sentry/utils/useOrganization';
  14. import {normalizeUrl} from 'sentry/utils/withDomainRequired';
  15. import {DurationChart} from 'sentry/views/performance/database/durationChart';
  16. import {ThroughputChart} from 'sentry/views/performance/database/throughputChart';
  17. import {useSelectedDurationAggregate} from 'sentry/views/performance/database/useSelectedDurationAggregate';
  18. import {MetricReadout} from 'sentry/views/performance/metricReadout';
  19. import * as ModuleLayout from 'sentry/views/performance/moduleLayout';
  20. import {ModulePageProviders} from 'sentry/views/performance/modulePageProviders';
  21. import {useSynchronizeCharts} from 'sentry/views/starfish/components/chart';
  22. import {useSpanMetrics} from 'sentry/views/starfish/queries/useSpanMetrics';
  23. import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useSpanMetricsSeries';
  24. import type {SpanMetricsQueryFilters} from 'sentry/views/starfish/types';
  25. import {ModuleName, SpanFunction, SpanMetricsField} from 'sentry/views/starfish/types';
  26. import {DataTitles, getThroughputTitle} from 'sentry/views/starfish/views/spans/types';
  27. type Query = {
  28. aggregate?: string;
  29. domain?: string;
  30. };
  31. export function HTTPDomainSummaryPage() {
  32. const location = useLocation<Query>();
  33. const organization = useOrganization();
  34. const [selectedAggregate] = useSelectedDurationAggregate();
  35. const {domain} = location.query;
  36. const filters: SpanMetricsQueryFilters = {
  37. 'span.module': ModuleName.HTTP,
  38. 'span.domain': domain,
  39. };
  40. const {data: domainMetrics, isLoading: areDomainMetricsLoading} = useSpanMetrics({
  41. filters,
  42. fields: [
  43. SpanMetricsField.SPAN_DOMAIN,
  44. `${SpanFunction.SPM}()`,
  45. `avg(${SpanMetricsField.SPAN_SELF_TIME})`,
  46. `sum(${SpanMetricsField.SPAN_SELF_TIME})`,
  47. `${SpanFunction.TIME_SPENT_PERCENTAGE}()`,
  48. ],
  49. enabled: Boolean(domain),
  50. referrer: 'api.starfish.http-module-domain-summary-metrics-ribbon',
  51. });
  52. const {
  53. isLoading: isThroughputDataLoading,
  54. data: throughputData,
  55. error: throughputError,
  56. } = useSpanMetricsSeries({
  57. filters,
  58. yAxis: ['spm()'],
  59. enabled: Boolean(domain),
  60. referrer: 'api.starfish.http-module-domain-summary-throughput-chart',
  61. });
  62. const {
  63. isLoading: isDurationDataLoading,
  64. data: durationData,
  65. error: durationError,
  66. } = useSpanMetricsSeries({
  67. filters,
  68. yAxis: [`${selectedAggregate}(${SpanMetricsField.SPAN_SELF_TIME})`],
  69. enabled: Boolean(domain),
  70. referrer: 'api.starfish.http-module-domain-summary-duration-chart',
  71. });
  72. useSynchronizeCharts([!isThroughputDataLoading && !isDurationDataLoading]);
  73. return (
  74. <React.Fragment>
  75. <Layout.Header>
  76. <Layout.HeaderContent>
  77. <Breadcrumbs
  78. crumbs={[
  79. {
  80. label: 'Performance',
  81. to: normalizeUrl(`/organizations/${organization.slug}/performance/`),
  82. preservePageFilters: true,
  83. },
  84. {
  85. label: 'HTTP',
  86. to: normalizeUrl(`/organizations/${organization.slug}/performance/http`),
  87. preservePageFilters: true,
  88. },
  89. {
  90. label: 'Domain Summary',
  91. },
  92. ]}
  93. />
  94. <Layout.Title>{domain}</Layout.Title>
  95. </Layout.HeaderContent>
  96. </Layout.Header>
  97. <Layout.Body>
  98. <Layout.Main fullWidth>
  99. <FloatingFeedbackWidget />
  100. <ModuleLayout.Layout>
  101. <ModuleLayout.Full>
  102. <HeaderContainer>
  103. <PageFilterBar condensed>
  104. <EnvironmentPageFilter />
  105. <DatePageFilter />
  106. </PageFilterBar>
  107. <MetricsRibbon>
  108. <MetricReadout
  109. title={getThroughputTitle('http')}
  110. value={domainMetrics?.[0]?.[`${SpanFunction.SPM}()`]}
  111. unit={RateUnit.PER_MINUTE}
  112. isLoading={areDomainMetricsLoading}
  113. />
  114. <MetricReadout
  115. title={DataTitles.avg}
  116. value={
  117. domainMetrics?.[0]?.[
  118. `${selectedAggregate}(${SpanMetricsField.SPAN_SELF_TIME})`
  119. ]
  120. }
  121. unit={DurationUnit.MILLISECOND}
  122. isLoading={areDomainMetricsLoading}
  123. />
  124. </MetricsRibbon>
  125. </HeaderContainer>
  126. </ModuleLayout.Full>
  127. <ModuleLayout.Half>
  128. <ThroughputChart
  129. series={throughputData['spm()']}
  130. isLoading={isThroughputDataLoading}
  131. error={throughputError}
  132. />
  133. </ModuleLayout.Half>
  134. <ModuleLayout.Half>
  135. <DurationChart
  136. series={
  137. durationData[`${selectedAggregate}(${SpanMetricsField.SPAN_SELF_TIME})`]
  138. }
  139. isLoading={isDurationDataLoading}
  140. error={durationError}
  141. />
  142. </ModuleLayout.Half>
  143. </ModuleLayout.Layout>
  144. </Layout.Main>
  145. </Layout.Body>
  146. </React.Fragment>
  147. );
  148. }
  149. const HeaderContainer = styled('div')`
  150. display: flex;
  151. justify-content: space-between;
  152. flex-wrap: wrap;
  153. `;
  154. const MetricsRibbon = styled('div')`
  155. display: flex;
  156. flex-wrap: wrap;
  157. gap: ${space(4)};
  158. `;
  159. function LandingPageWithProviders() {
  160. return (
  161. <ModulePageProviders
  162. baseURL="/performance/http"
  163. title={[t('Performance'), t('HTTP'), t('Domain Summary')].join(' — ')}
  164. features="performance-http-view"
  165. >
  166. <HTTPDomainSummaryPage />
  167. </ModulePageProviders>
  168. );
  169. }
  170. export default LandingPageWithProviders;