123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102 |
- import {browserHistory} from 'react-router';
- import Feature from 'sentry/components/acl/feature';
- import OptionSelector from 'sentry/components/charts/optionSelector';
- import {
- ChartContainer,
- ChartControls,
- InlineContainer,
- SectionHeading,
- SectionValue,
- } from 'sentry/components/charts/styles';
- import Count from 'sentry/components/count';
- import Panel from 'sentry/components/panels/panel';
- import {t} from 'sentry/locale';
- import type {Organization} from 'sentry/types';
- import {defined} from 'sentry/utils';
- import {trackAnalytics} from 'sentry/utils/analytics';
- import type EventView from 'sentry/utils/discover/eventView';
- import type {SpanSlug} from 'sentry/utils/performance/suspectSpans/types';
- import {decodeScalar} from 'sentry/utils/queryString';
- import {useLocation} from 'sentry/utils/useLocation';
- import ExclusiveTimeHistogram from './exclusiveTimeHistogram';
- import ExclusiveTimeTimeSeries from './exclusiveTimeTimeSeries';
- type Props = {
- eventView: EventView;
- organization: Organization;
- spanSlug: SpanSlug;
- totalCount?: number;
- };
- enum DisplayModes {
- TIMESERIES = 'timeseries',
- HISTOGRAM = 'histogram',
- }
- function Chart(props: Props) {
- const location = useLocation();
- const display = decodeScalar(location.query.display, DisplayModes.TIMESERIES);
- function generateDisplayOptions() {
- return [
- {value: DisplayModes.TIMESERIES, label: t('Self Time Breakdown')},
- {value: DisplayModes.HISTOGRAM, label: t('Self Time Distribution')},
- ];
- }
- function handleDisplayChange(value: string) {
- trackAnalytics('performance_views.span_summary.change_chart', {
- organization: props.organization,
- change_to_display: value,
- });
- browserHistory.push({
- pathname: location.pathname,
- query: {
- ...location.query,
- display: value,
- },
- });
- }
- return (
- <Panel>
- <ChartContainer>
- <Feature features="performance-span-histogram-view">
- {({hasFeature}) => {
- if (hasFeature) {
- if (display === DisplayModes.TIMESERIES) {
- return <ExclusiveTimeTimeSeries {...props} withoutZerofill={false} />;
- }
- return <ExclusiveTimeHistogram {...props} />;
- }
- return <ExclusiveTimeTimeSeries {...props} withoutZerofill={false} />;
- }}
- </Feature>
- </ChartContainer>
- <Feature features="performance-span-histogram-view">
- <ChartControls>
- <InlineContainer>
- <SectionHeading>{t('Total Events')}</SectionHeading>
- <SectionValue data-test-id="total-value">
- {defined(props.totalCount) ? <Count value={props.totalCount} /> : '\u2014'}
- </SectionValue>
- </InlineContainer>
- <InlineContainer data-test-id="display-toggle">
- <OptionSelector
- title={t('Display')}
- selected={display}
- options={generateDisplayOptions()}
- onChange={handleDisplayChange}
- />
- </InlineContainer>
- </ChartControls>
- </Feature>
- </Panel>
- );
- }
- export default Chart;
|