headers.tsx 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. import {Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import ToolbarHeader from 'sentry/components/toolbarHeader';
  4. import {t} from 'sentry/locale';
  5. import space from 'sentry/styles/space';
  6. import {PageFilters} from 'sentry/types';
  7. type Props = {
  8. isReprocessingQuery: boolean;
  9. onSelectStatsPeriod: (statsPeriod: string) => void;
  10. selection: PageFilters;
  11. statsPeriod: string;
  12. anySelected?: boolean;
  13. };
  14. function Headers({
  15. selection,
  16. statsPeriod,
  17. onSelectStatsPeriod,
  18. isReprocessingQuery,
  19. }: Props) {
  20. return (
  21. <Fragment>
  22. {isReprocessingQuery ? (
  23. <Fragment>
  24. <StartedColumn>{t('Started')}</StartedColumn>
  25. <EventsReprocessedColumn>{t('Events Reprocessed')}</EventsReprocessedColumn>
  26. <ProgressColumn>{t('Progress')}</ProgressColumn>
  27. </Fragment>
  28. ) : (
  29. <Fragment>
  30. <GraphHeaderWrapper className="hidden-xs hidden-sm hidden-md">
  31. <GraphHeader>
  32. <StyledToolbarHeader>{t('Graph:')}</StyledToolbarHeader>
  33. {selection.datetime.period !== '24h' && (
  34. <GraphToggle
  35. active={statsPeriod === '24h'}
  36. onClick={() => onSelectStatsPeriod('24h')}
  37. >
  38. {t('24h')}
  39. </GraphToggle>
  40. )}
  41. <GraphToggle
  42. active={statsPeriod === 'auto'}
  43. onClick={() => onSelectStatsPeriod('auto')}
  44. >
  45. {selection.datetime.period || t('Custom')}
  46. </GraphToggle>
  47. </GraphHeader>
  48. </GraphHeaderWrapper>
  49. <EventsOrUsersLabel>{t('Events')}</EventsOrUsersLabel>
  50. <EventsOrUsersLabel>{t('Users')}</EventsOrUsersLabel>
  51. <AssigneesLabel className="hidden-xs hidden-sm">
  52. <ToolbarHeader>{t('Assignee')}</ToolbarHeader>
  53. </AssigneesLabel>
  54. </Fragment>
  55. )}
  56. </Fragment>
  57. );
  58. }
  59. export default Headers;
  60. const GraphHeaderWrapper = styled('div')`
  61. width: 160px;
  62. margin-left: ${space(2)};
  63. margin-right: ${space(2)};
  64. animation: 0.25s FadeIn linear forwards;
  65. @keyframes FadeIn {
  66. 0% {
  67. opacity: 0;
  68. }
  69. 100% {
  70. opacity: 1;
  71. }
  72. }
  73. `;
  74. const GraphHeader = styled('div')`
  75. display: flex;
  76. `;
  77. const StyledToolbarHeader = styled(ToolbarHeader)`
  78. flex: 1;
  79. `;
  80. const GraphToggle = styled('a')<{active: boolean}>`
  81. font-size: 13px;
  82. padding-left: ${space(1)};
  83. &,
  84. &:hover,
  85. &:focus,
  86. &:active {
  87. color: ${p => (p.active ? p.theme.textColor : p.theme.disabled)};
  88. }
  89. `;
  90. const EventsOrUsersLabel = styled(ToolbarHeader)`
  91. display: inline-grid;
  92. align-items: center;
  93. justify-content: flex-end;
  94. text-align: right;
  95. width: 60px;
  96. margin: 0 ${space(2)};
  97. @media (min-width: ${p => p.theme.breakpoints.xlarge}) {
  98. width: 80px;
  99. }
  100. `;
  101. const AssigneesLabel = styled('div')`
  102. justify-content: flex-end;
  103. text-align: right;
  104. width: 80px;
  105. margin-left: ${space(2)};
  106. margin-right: ${space(2)};
  107. `;
  108. // Reprocessing
  109. const StartedColumn = styled(ToolbarHeader)`
  110. margin: 0 ${space(2)};
  111. ${p => p.theme.overflowEllipsis};
  112. width: 85px;
  113. @media (min-width: ${p => p.theme.breakpoints.small}) {
  114. width: 140px;
  115. }
  116. `;
  117. const EventsReprocessedColumn = styled(ToolbarHeader)`
  118. margin: 0 ${space(2)};
  119. ${p => p.theme.overflowEllipsis};
  120. width: 75px;
  121. @media (min-width: ${p => p.theme.breakpoints.small}) {
  122. width: 140px;
  123. }
  124. `;
  125. const ProgressColumn = styled(ToolbarHeader)`
  126. margin: 0 ${space(2)};
  127. display: none;
  128. @media (min-width: ${p => p.theme.breakpoints.small}) {
  129. display: block;
  130. width: 160px;
  131. }
  132. `;