customIgnoreCountModal.tsx 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. import {Component, Fragment} from 'react';
  2. import {ModalRenderProps} from 'sentry/actionCreators/modal';
  3. import Button from 'sentry/components/button';
  4. import ButtonBar from 'sentry/components/buttonBar';
  5. import InputField from 'sentry/components/forms/inputField';
  6. import SelectField from 'sentry/components/forms/selectField';
  7. import {t} from 'sentry/locale';
  8. import {ResolutionStatusDetails, SelectValue} from 'sentry/types';
  9. type CountNames = 'ignoreCount' | 'ignoreUserCount';
  10. type WindowNames = 'ignoreWindow' | 'ignoreUserWindow';
  11. type Props = ModalRenderProps & {
  12. countLabel: string;
  13. countName: CountNames;
  14. isPerformanceIssue: boolean;
  15. label: string;
  16. onSelected: (statusDetails: ResolutionStatusDetails) => void;
  17. windowName: WindowNames;
  18. windowOptions: SelectValue<number>[];
  19. };
  20. type State = {
  21. count: number;
  22. window: number | null;
  23. };
  24. class CustomIgnoreCountModal extends Component<Props, State> {
  25. state: State = {
  26. count: 100,
  27. window: null,
  28. };
  29. handleSubmit = () => {
  30. const {count, window} = this.state;
  31. const {countName, windowName} = this.props;
  32. const statusDetails: ResolutionStatusDetails = {[countName]: count};
  33. if (window) {
  34. statusDetails[windowName] = window;
  35. }
  36. this.props.onSelected(statusDetails);
  37. this.props.closeModal();
  38. };
  39. handleChange = (name: keyof State, value: number) => {
  40. this.setState({[name]: value} as State);
  41. };
  42. render() {
  43. const {
  44. Header,
  45. Footer,
  46. Body,
  47. countLabel,
  48. label,
  49. closeModal,
  50. windowOptions,
  51. isPerformanceIssue,
  52. } = this.props;
  53. const {count, window} = this.state;
  54. // TODO: Revert this when this option becomes available for Performance Issues
  55. const helpSubtext = isPerformanceIssue
  56. ? t('This option is currently not available for Performance issues.')
  57. : t('(Optional) If supplied, this rule will apply as a rate of change.');
  58. return (
  59. <Fragment>
  60. <Header>
  61. <h4>{label}</h4>
  62. </Header>
  63. <Body>
  64. <InputField
  65. inline={false}
  66. flexibleControlStateSize
  67. stacked
  68. label={countLabel}
  69. name="count"
  70. type="number"
  71. value={count}
  72. onChange={val => this.handleChange('count' as 'count', Number(val))}
  73. required
  74. placeholder={t('e.g. 100')}
  75. />
  76. <SelectField
  77. inline={false}
  78. flexibleControlStateSize
  79. stacked
  80. label={t('Time window')}
  81. value={window}
  82. name="window"
  83. onChange={val => this.handleChange('window' as const, val)}
  84. options={windowOptions}
  85. placeholder={t('e.g. per hour')}
  86. allowClear
  87. help={helpSubtext}
  88. disabled={isPerformanceIssue}
  89. />
  90. </Body>
  91. <Footer>
  92. <ButtonBar gap={1}>
  93. <Button type="button" onClick={closeModal}>
  94. {t('Cancel')}
  95. </Button>
  96. <Button type="button" priority="primary" onClick={this.handleSubmit}>
  97. {t('Ignore')}
  98. </Button>
  99. </ButtonBar>
  100. </Footer>
  101. </Fragment>
  102. );
  103. }
  104. }
  105. export default CustomIgnoreCountModal;