reprocessingProgress.tsx 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. import styled from '@emotion/styled';
  2. import ProgressBar from 'sentry/components/progressBar';
  3. import {t, tct, tn} from 'sentry/locale';
  4. import {space} from 'sentry/styles/space';
  5. import {percent} from 'sentry/utils';
  6. type Props = {
  7. pendingEvents: number;
  8. totalEvents: number;
  9. };
  10. function ReprocessingProgress({totalEvents, pendingEvents}: Props) {
  11. const remainingEventsToReprocess = totalEvents - pendingEvents;
  12. const remainingEventsToReprocessPercent = percent(
  13. remainingEventsToReprocess,
  14. totalEvents
  15. );
  16. return (
  17. <Wrapper>
  18. <Inner>
  19. <Header>
  20. <Title>{t('Reprocessing\u2026')}</Title>
  21. {t(
  22. 'Once the events in this issue have been reprocessed, you’ll be able to make changes and view any new issues that may have been created.'
  23. )}
  24. </Header>
  25. <Content>
  26. <ProgressBar value={remainingEventsToReprocessPercent} variant="large" />
  27. {tct('[remainingEventsToReprocess]/[totalEvents] [event] reprocessed', {
  28. remainingEventsToReprocess,
  29. totalEvents,
  30. event: tn('event', 'events', totalEvents),
  31. })}
  32. </Content>
  33. </Inner>
  34. </Wrapper>
  35. );
  36. }
  37. export default ReprocessingProgress;
  38. const Wrapper = styled('div')`
  39. margin: ${space(4)} 40px;
  40. flex: 1;
  41. text-align: center;
  42. @media (min-width: ${p => p.theme.breakpoints.small}) {
  43. margin: 40px;
  44. }
  45. `;
  46. const Content = styled('div')`
  47. color: ${p => p.theme.gray300};
  48. font-size: ${p => p.theme.fontSizeMedium};
  49. display: grid;
  50. gap: ${space(1.5)};
  51. justify-items: center;
  52. max-width: 402px;
  53. width: 100%;
  54. `;
  55. const Inner = styled('div')`
  56. display: grid;
  57. gap: ${space(3)};
  58. justify-items: center;
  59. `;
  60. const Header = styled('div')`
  61. display: grid;
  62. gap: ${space(1)};
  63. color: ${p => p.theme.textColor};
  64. max-width: 557px;
  65. `;
  66. const Title = styled('h3')`
  67. font-size: ${p => p.theme.headerFontSize};
  68. font-weight: 600;
  69. margin-bottom: 0;
  70. `;