SMusatov
/
sentry
mirror of https://github.com/getsentry/sentry


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
							import {Component, Fragment} from 'react';
import styled from '@emotion/styled';

import {addErrorMessage} from 'sentry/actionCreators/indicator';
import {ModalRenderProps} from 'sentry/actionCreators/modal';
import Form from 'sentry/components/forms/form';
import NumberField from 'sentry/components/forms/numberField';
import RadioField from 'sentry/components/forms/radioField';
import ExternalLink from 'sentry/components/links/externalLink';
import List from 'sentry/components/list';
import ListItem from 'sentry/components/list/listItem';
import {t, tct} from 'sentry/locale';
import space from 'sentry/styles/space';
import {Group, Organization} from 'sentry/types';

const impacts = [
  tct(
    "[strong:Quota applies.] Every event you choose to reprocess counts against your plan's quota. Rate limits and spike protection do not apply.",
    {strong: <strong />}
  ),
  tct(
    '[strong:Attachment storage required.] If your events come from minidumps or unreal crash reports, you must have [link:attachment storage] enabled.',
    {
      strong: <strong />,
      link: (
        <ExternalLink href="https://docs.sentry.io/platforms/native/enriching-events/attachments/#crash-reports-and-privacy" />
      ),
    }
  ),
  t(
    'Please wait one hour after upload before attempting to reprocess missing debug files.'
  ),
];

const remainingEventsChoices: [string, string][] = [
  ['keep', t('Keep')],
  ['delete', t('Delete')],
];

export type ReprocessEventModalOptions = {
  groupId: Group['id'];
  organization: Organization;
};

type Props = ModalRenderProps & ReprocessEventModalOptions;

type State = {
  maxEvents?: number;
};

class ReprocessingEventModal extends Component<Props, State> {
  state: State = {maxEvents: undefined};

  handleSuccess = () => {
    const {closeModal} = this.props;

    closeModal();
    window.location.reload();
  };

  handleError() {
    addErrorMessage(t('Failed to reprocess. Please check your input.'));
  }

  handleMaxEventsChange = (maxEvents: string) => {
    this.setState({maxEvents: Number(maxEvents) || undefined});
  };

  render() {
    const {organization, Header, Body, closeModal, groupId} = this.props;
    const {maxEvents} = this.state;
    const orgSlug = organization.slug;
    const endpoint = `/organizations/${orgSlug}/issues/${groupId}/reprocessing/`;
    const title = t('Reprocess Events');

    return (
      <Fragment>
        <Header closeButton>{title}</Header>
        <Body>
          <Introduction>
            {t(
              'Reprocessing applies new debug files and grouping enhancements to this Issue. Please consider these impacts:'
            )}
          </Introduction>
          <StyledList symbol="bullet">
            {impacts.map((impact, index) => (
              <ListItem key={index}>{impact}</ListItem>
            ))}
          </StyledList>
          <Introduction>
            {tct('For more information, please refer to [link:the documentation.]', {
              link: (
                <ExternalLink href="https://docs.sentry.io/product/error-monitoring/reprocessing/" />
              ),
            })}
          </Introduction>
          <Form
            submitLabel={title}
            apiEndpoint={endpoint}
            apiMethod="POST"
            initialData={{maxEvents: undefined, remainingEvents: 'keep'}}
            onSubmitSuccess={this.handleSuccess}
            onSubmitError={this.handleError}
            onCancel={closeModal}
            footerClass="modal-footer"
          >
            <NumberField
              name="maxEvents"
              label={t('Number of events to be reprocessed')}
              help={t('If you set a limit, we will reprocess your most recent events.')}
              placeholder={t('Reprocess all events')}
              onChange={this.handleMaxEventsChange}
              min={1}
            />

            <RadioField
              orientInline
              label={t('Remaining events')}
              help={t('What to do with the events that are not reprocessed.')}
              name="remainingEvents"
              choices={remainingEventsChoices}
              disabled={maxEvents === undefined}
            />
          </Form>
        </Body>
      </Fragment>
    );
  }
}

export default ReprocessingEventModal;

const Introduction = styled('p')`
  font-size: ${p => p.theme.fontSizeLarge};
`;

const StyledList = styled(List)`
  gap: ${space(1)};
  margin-bottom: ${space(4)};
  font-size: ${p => p.theme.fontSizeMedium};
`;