|
@@ -17,6 +17,7 @@ import {normalizeUrl} from 'sentry/utils/withDomainRequired';
|
|
|
import {DurationChart} from 'sentry/views/performance/database/durationChart';
|
|
|
import {ThroughputChart} from 'sentry/views/performance/database/throughputChart';
|
|
|
import {useSelectedDurationAggregate} from 'sentry/views/performance/database/useSelectedDurationAggregate';
|
|
|
+import * as ModuleLayout from 'sentry/views/performance/moduleLayout';
|
|
|
import {ModulePageProviders} from 'sentry/views/performance/modulePageProviders';
|
|
|
import {useSynchronizeCharts} from 'sentry/views/starfish/components/chart';
|
|
|
import {DatabaseSpanDescription} from 'sentry/views/starfish/components/spanDescription';
|
|
@@ -151,55 +152,61 @@ function SpanSummaryPage({params}: Props) {
|
|
|
<FloatingFeedbackWidget />
|
|
|
|
|
|
<HeaderContainer>
|
|
|
- <PaddedContainer>
|
|
|
- <PageFilterBar condensed>
|
|
|
- <EnvironmentPageFilter />
|
|
|
- <DatePageFilter />
|
|
|
- </PageFilterBar>
|
|
|
- </PaddedContainer>
|
|
|
+ <PageFilterBar condensed>
|
|
|
+ <EnvironmentPageFilter />
|
|
|
+ <DatePageFilter />
|
|
|
+ </PageFilterBar>
|
|
|
|
|
|
<SpanMetricsRibbon spanMetrics={span} />
|
|
|
</HeaderContainer>
|
|
|
|
|
|
- {groupId && (
|
|
|
- <DescriptionContainer>
|
|
|
- <DatabaseSpanDescription
|
|
|
- groupId={groupId}
|
|
|
- preliminaryDescription={spanMetrics?.['span.description']}
|
|
|
- />
|
|
|
- </DescriptionContainer>
|
|
|
- )}
|
|
|
-
|
|
|
- <ChartContainer>
|
|
|
- <ThroughputChart
|
|
|
- series={throughputData['spm()']}
|
|
|
- isLoading={isThroughputDataLoading}
|
|
|
- error={throughputError}
|
|
|
+ <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>
|
|
|
+ <SpanTransactionsTable
|
|
|
+ span={span}
|
|
|
+ sort={sort}
|
|
|
+ endpoint={endpoint}
|
|
|
+ endpointMethod={endpointMethod}
|
|
|
+ />
|
|
|
+ </ModuleLayout.Full>
|
|
|
+ )}
|
|
|
+
|
|
|
+ <SampleList
|
|
|
+ groupId={span[SpanMetricsField.SPAN_GROUP]}
|
|
|
+ transactionName={transaction}
|
|
|
+ transactionMethod={transactionMethod}
|
|
|
/>
|
|
|
-
|
|
|
- <DurationChart
|
|
|
- series={
|
|
|
- durationData[`${selectedAggregate}(${SpanMetricsField.SPAN_SELF_TIME})`]
|
|
|
- }
|
|
|
- isLoading={isDurationDataLoading}
|
|
|
- error={durationError}
|
|
|
- />
|
|
|
- </ChartContainer>
|
|
|
-
|
|
|
- {span && (
|
|
|
- <SpanTransactionsTable
|
|
|
- span={span}
|
|
|
- sort={sort}
|
|
|
- endpoint={endpoint}
|
|
|
- endpointMethod={endpointMethod}
|
|
|
- />
|
|
|
- )}
|
|
|
-
|
|
|
- <SampleList
|
|
|
- groupId={span[SpanMetricsField.SPAN_GROUP]}
|
|
|
- transactionName={transaction}
|
|
|
- transactionMethod={transactionMethod}
|
|
|
- />
|
|
|
+ </ModuleLayout.Layout>
|
|
|
</Layout.Main>
|
|
|
</Layout.Body>
|
|
|
</ModulePageProviders>
|
|
@@ -211,10 +218,6 @@ const DEFAULT_SORT: Sort = {
|
|
|
field: 'time_spent_percentage()',
|
|
|
};
|
|
|
|
|
|
-const PaddedContainer = styled('div')`
|
|
|
- margin-bottom: ${space(2)};
|
|
|
-`;
|
|
|
-
|
|
|
const ChartContainer = styled('div')`
|
|
|
display: grid;
|
|
|
gap: 0;
|
|
@@ -232,10 +235,7 @@ const HeaderContainer = styled('div')`
|
|
|
flex-wrap: wrap;
|
|
|
`;
|
|
|
|
|
|
-const DescriptionContainer = styled('div')`
|
|
|
- width: 100%;
|
|
|
- margin-bottom: ${space(2)};
|
|
|
- font-size: 1rem;
|
|
|
+const DescriptionContainer = styled(ModuleLayout.Full)`
|
|
|
line-height: 1.2;
|
|
|
`;
|
|
|
|