chart.tsx 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. import {browserHistory} from 'react-router';
  2. import Feature from 'sentry/components/acl/feature';
  3. import OptionSelector from 'sentry/components/charts/optionSelector';
  4. import {
  5. ChartContainer,
  6. ChartControls,
  7. InlineContainer,
  8. SectionHeading,
  9. SectionValue,
  10. } from 'sentry/components/charts/styles';
  11. import Count from 'sentry/components/count';
  12. import Panel from 'sentry/components/panels/panel';
  13. import {t} from 'sentry/locale';
  14. import type {Organization} from 'sentry/types';
  15. import {defined} from 'sentry/utils';
  16. import {trackAnalytics} from 'sentry/utils/analytics';
  17. import type EventView from 'sentry/utils/discover/eventView';
  18. import type {SpanSlug} from 'sentry/utils/performance/suspectSpans/types';
  19. import {decodeScalar} from 'sentry/utils/queryString';
  20. import {useLocation} from 'sentry/utils/useLocation';
  21. import ExclusiveTimeHistogram from './exclusiveTimeHistogram';
  22. import ExclusiveTimeTimeSeries from './exclusiveTimeTimeSeries';
  23. type Props = {
  24. eventView: EventView;
  25. organization: Organization;
  26. spanSlug: SpanSlug;
  27. totalCount?: number;
  28. };
  29. enum DisplayModes {
  30. TIMESERIES = 'timeseries',
  31. HISTOGRAM = 'histogram',
  32. }
  33. function Chart(props: Props) {
  34. const location = useLocation();
  35. const display = decodeScalar(location.query.display, DisplayModes.TIMESERIES);
  36. function generateDisplayOptions() {
  37. return [
  38. {value: DisplayModes.TIMESERIES, label: t('Self Time Breakdown')},
  39. {value: DisplayModes.HISTOGRAM, label: t('Self Time Distribution')},
  40. ];
  41. }
  42. function handleDisplayChange(value: string) {
  43. trackAnalytics('performance_views.span_summary.change_chart', {
  44. organization: props.organization,
  45. change_to_display: value,
  46. });
  47. browserHistory.push({
  48. pathname: location.pathname,
  49. query: {
  50. ...location.query,
  51. display: value,
  52. },
  53. });
  54. }
  55. return (
  56. <Panel>
  57. <ChartContainer>
  58. <Feature features="performance-span-histogram-view">
  59. {({hasFeature}) => {
  60. if (hasFeature) {
  61. if (display === DisplayModes.TIMESERIES) {
  62. return <ExclusiveTimeTimeSeries {...props} withoutZerofill={false} />;
  63. }
  64. return <ExclusiveTimeHistogram {...props} />;
  65. }
  66. return <ExclusiveTimeTimeSeries {...props} withoutZerofill={false} />;
  67. }}
  68. </Feature>
  69. </ChartContainer>
  70. <Feature features="performance-span-histogram-view">
  71. <ChartControls>
  72. <InlineContainer>
  73. <SectionHeading>{t('Total Events')}</SectionHeading>
  74. <SectionValue data-test-id="total-value">
  75. {defined(props.totalCount) ? <Count value={props.totalCount} /> : '\u2014'}
  76. </SectionValue>
  77. </InlineContainer>
  78. <InlineContainer data-test-id="display-toggle">
  79. <OptionSelector
  80. title={t('Display')}
  81. selected={display}
  82. options={generateDisplayOptions()}
  83. onChange={handleDisplayChange}
  84. />
  85. </InlineContainer>
  86. </ChartControls>
  87. </Feature>
  88. </Panel>
  89. );
  90. }
  91. export default Chart;