123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326 |
- import {Fragment} from 'react';
- import type {RouteComponentProps} from 'react-router';
- import styled from '@emotion/styled';
- import {Breadcrumbs} from 'sentry/components/breadcrumbs';
- import ButtonBar from 'sentry/components/buttonBar';
- import FeedbackWidgetButton from 'sentry/components/feedback/widget/feedbackWidgetButton';
- import * as Layout from 'sentry/components/layouts/thirds';
- import {DatePageFilter} from 'sentry/components/organizations/datePageFilter';
- import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter';
- import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
- import {t} from 'sentry/locale';
- import {space} from 'sentry/styles/space';
- import {DurationUnit, RateUnit} from 'sentry/utils/discover/fields';
- import {decodeScalar, decodeSorts} from 'sentry/utils/queryString';
- import {MutableSearch} from 'sentry/utils/tokenizeSearch';
- import {useLocation} from 'sentry/utils/useLocation';
- import useOrganization from 'sentry/utils/useOrganization';
- import {normalizeUrl} from 'sentry/utils/withDomainRequired';
- import {DurationChart} from 'sentry/views/performance/database/durationChart';
- import {isAValidSort} from 'sentry/views/performance/database/queriesTable';
- import {QueryTransactionsTable} from 'sentry/views/performance/database/queryTransactionsTable';
- import {BASE_URL} from 'sentry/views/performance/database/settings';
- import {ThroughputChart} from 'sentry/views/performance/database/throughputChart';
- import {useSelectedDurationAggregate} from 'sentry/views/performance/database/useSelectedDurationAggregate';
- import {MetricReadout} from 'sentry/views/performance/metricReadout';
- import * as ModuleLayout from 'sentry/views/performance/moduleLayout';
- import {ModulePageProviders} from 'sentry/views/performance/modulePageProviders';
- import {useDatabaseModuleURL} from 'sentry/views/performance/utils/useModuleURL';
- import {useSynchronizeCharts} from 'sentry/views/starfish/components/chart';
- import {DatabaseSpanDescription} from 'sentry/views/starfish/components/spanDescription';
- import {getTimeSpentExplanation} from 'sentry/views/starfish/components/tableCells/timeSpentCell';
- import {useSpanMetrics} from 'sentry/views/starfish/queries/useDiscover';
- import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useDiscoverSeries';
- import type {SpanMetricsQueryFilters} from 'sentry/views/starfish/types';
- import {ModuleName, SpanFunction, SpanMetricsField} from 'sentry/views/starfish/types';
- import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
- import {DataTitles, getThroughputTitle} from 'sentry/views/starfish/views/spans/types';
- import {SampleList} from 'sentry/views/starfish/views/spanSummaryPage/sampleList';
- type Query = {
- transaction: string;
- transactionMethod: string;
- [QueryParameterNames.TRANSACTIONS_SORT]: string;
- aggregate?: string;
- };
- type Props = RouteComponentProps<Query, {groupId: string}>;
- export function DatabaseSpanSummaryPage({params}: Props) {
- const moduleURL = useDatabaseModuleURL();
- const organization = useOrganization();
- const location = useLocation<Query>();
- const [selectedAggregate] = useSelectedDurationAggregate();
- const {groupId} = params;
- const {transaction, transactionMethod} = location.query;
- const filters: SpanMetricsQueryFilters = {
- 'span.group': groupId,
- };
- const cursor = decodeScalar(location.query?.[QueryParameterNames.TRANSACTIONS_CURSOR]);
- // TODO: Fetch sort information using `useLocationQuery`
- const sortField = decodeScalar(location.query?.[QueryParameterNames.TRANSACTIONS_SORT]);
- const sort = decodeSorts(sortField).filter(isAValidSort).at(0) ?? DEFAULT_SORT;
- const {data, isLoading: areSpanMetricsLoading} = useSpanMetrics(
- {
- search: MutableSearch.fromQueryObject(filters),
- fields: [
- SpanMetricsField.SPAN_OP,
- SpanMetricsField.SPAN_DESCRIPTION,
- SpanMetricsField.SPAN_ACTION,
- SpanMetricsField.SPAN_DOMAIN,
- 'count()',
- `${SpanFunction.SPM}()`,
- `sum(${SpanMetricsField.SPAN_SELF_TIME})`,
- `avg(${SpanMetricsField.SPAN_SELF_TIME})`,
- `${SpanFunction.TIME_SPENT_PERCENTAGE}()`,
- `${SpanFunction.HTTP_ERROR_COUNT}()`,
- ],
- enabled: Boolean(groupId),
- },
- 'api.starfish.span-summary-page-metrics'
- );
- const spanMetrics = data[0] ?? {};
- const {
- isLoading: isTransactionsListLoading,
- data: transactionsList,
- meta: transactionsListMeta,
- error: transactionsListError,
- pageLinks: transactionsListPageLinks,
- } = useSpanMetrics(
- {
- search: MutableSearch.fromQueryObject(filters),
- fields: [
- 'transaction',
- 'transaction.method',
- 'spm()',
- `sum(${SpanMetricsField.SPAN_SELF_TIME})`,
- `avg(${SpanMetricsField.SPAN_SELF_TIME})`,
- 'time_spent_percentage()',
- `${SpanFunction.HTTP_ERROR_COUNT}()`,
- ],
- sorts: [sort],
- limit: TRANSACTIONS_TABLE_ROW_COUNT,
- cursor,
- },
- 'api.starfish.span-transaction-metrics'
- );
- const span = {
- ...spanMetrics,
- [SpanMetricsField.SPAN_GROUP]: groupId,
- } as {
- [SpanMetricsField.SPAN_OP]: string;
- [SpanMetricsField.SPAN_DESCRIPTION]: string;
- [SpanMetricsField.SPAN_ACTION]: string;
- [SpanMetricsField.SPAN_DOMAIN]: string[];
- [SpanMetricsField.SPAN_GROUP]: string;
- };
- const {
- isLoading: isThroughputDataLoading,
- data: throughputData,
- error: throughputError,
- } = useSpanMetricsSeries(
- {
- search: MutableSearch.fromQueryObject(filters),
- yAxis: ['spm()'],
- enabled: Boolean(groupId),
- },
- 'api.starfish.span-summary-page-metrics-chart'
- );
- const {
- isLoading: isDurationDataLoading,
- data: durationData,
- error: durationError,
- } = useSpanMetricsSeries(
- {
- search: MutableSearch.fromQueryObject(filters),
- yAxis: [`${selectedAggregate}(${SpanMetricsField.SPAN_SELF_TIME})`],
- enabled: Boolean(groupId),
- },
- 'api.starfish.span-summary-page-metrics-chart'
- );
- useSynchronizeCharts([!isThroughputDataLoading && !isDurationDataLoading]);
- return (
- <Fragment>
- <Layout.Header>
- <Layout.HeaderContent>
- <Breadcrumbs
- crumbs={[
- {
- label: 'Performance',
- to: normalizeUrl(`/organizations/${organization.slug}/performance/`),
- preservePageFilters: true,
- },
- {
- label: 'Queries',
- to: moduleURL,
- preservePageFilters: true,
- },
- {
- label: 'Query Summary',
- },
- ]}
- />
- <Layout.Title>{t('Query Summary')}</Layout.Title>
- </Layout.HeaderContent>
- <Layout.HeaderActions>
- <ButtonBar gap={1}>
- <FeedbackWidgetButton />
- </ButtonBar>
- </Layout.HeaderActions>
- </Layout.Header>
- <Layout.Body>
- <Layout.Main fullWidth>
- <HeaderContainer>
- <PageFilterBar condensed>
- <EnvironmentPageFilter />
- <DatePageFilter />
- </PageFilterBar>
- <MetricsRibbon>
- <MetricReadout
- title={getThroughputTitle('db')}
- value={spanMetrics?.[`${SpanFunction.SPM}()`]}
- unit={RateUnit.PER_MINUTE}
- isLoading={areSpanMetricsLoading}
- />
- <MetricReadout
- title={DataTitles.avg}
- value={spanMetrics?.[`avg(${SpanMetricsField.SPAN_SELF_TIME})`]}
- unit={DurationUnit.MILLISECOND}
- isLoading={areSpanMetricsLoading}
- />
- <MetricReadout
- title={DataTitles.timeSpent}
- value={spanMetrics?.['sum(span.self_time)']}
- unit={DurationUnit.MILLISECOND}
- tooltip={getTimeSpentExplanation(
- spanMetrics?.['time_spent_percentage()'],
- 'db'
- )}
- isLoading={areSpanMetricsLoading}
- />
- </MetricsRibbon>
- </HeaderContainer>
- <ModuleLayout.Layout>
- {groupId && (
- <DescriptionContainer>
- <DatabaseSpanDescription
- groupId={groupId}
- preliminaryDescription={spanMetrics?.['span.description']}
- />
- </DescriptionContainer>
- )}
- <ModuleLayout.Full>
- <ChartContainer>
- <ThroughputChart
- series={throughputData['spm()']}
- isLoading={isThroughputDataLoading}
- error={throughputError}
- />
- <DurationChart
- series={[
- durationData[
- `${selectedAggregate}(${SpanMetricsField.SPAN_SELF_TIME})`
- ],
- ]}
- isLoading={isDurationDataLoading}
- error={durationError}
- />
- </ChartContainer>
- </ModuleLayout.Full>
- {span && (
- <ModuleLayout.Full>
- <QueryTransactionsTable
- span={span}
- data={transactionsList}
- error={transactionsListError}
- isLoading={isTransactionsListLoading}
- meta={transactionsListMeta}
- pageLinks={transactionsListPageLinks}
- sort={sort}
- />
- </ModuleLayout.Full>
- )}
- </ModuleLayout.Layout>
- <SampleList
- groupId={span[SpanMetricsField.SPAN_GROUP]}
- moduleName={ModuleName.DB}
- transactionName={transaction}
- transactionMethod={transactionMethod}
- />
- </Layout.Main>
- </Layout.Body>
- </Fragment>
- );
- }
- const DEFAULT_SORT = {
- kind: 'desc' as const,
- field: 'time_spent_percentage()' as const,
- };
- const TRANSACTIONS_TABLE_ROW_COUNT = 25;
- const ChartContainer = styled('div')`
- display: grid;
- gap: 0;
- grid-template-columns: 1fr;
- @media (min-width: ${p => p.theme.breakpoints.small}) {
- grid-template-columns: 1fr 1fr;
- gap: ${space(2)};
- }
- `;
- const HeaderContainer = styled('div')`
- display: flex;
- justify-content: space-between;
- flex-wrap: wrap;
- `;
- const DescriptionContainer = styled(ModuleLayout.Full)`
- line-height: 1.2;
- `;
- const MetricsRibbon = styled('div')`
- display: flex;
- flex-wrap: wrap;
- gap: ${space(4)};
- `;
- function PageWithProviders(props) {
- return (
- <ModulePageProviders
- title={[t('Performance'), t('Database'), t('Query Summary')].join(' — ')}
- baseURL={`/performance/${BASE_URL}`}
- features="spans-first-ui"
- >
- <DatabaseSpanSummaryPage {...props} />
- </ModulePageProviders>
- );
- }
- export default PageWithProviders;
|