incidentRedirect.tsx 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. import {useEffect, useState} from 'react';
  2. import {browserHistory, RouteComponentProps} from 'react-router';
  3. import {Client} from 'sentry/api';
  4. import LoadingError from 'sentry/components/loadingError';
  5. import LoadingIndicator from 'sentry/components/loadingIndicator';
  6. import {Organization} from 'sentry/types';
  7. import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
  8. import useApi from 'sentry/utils/useApi';
  9. import {alertDetailsLink, fetchIncident} from './utils';
  10. type Props = {
  11. api: Client;
  12. organization: Organization;
  13. } & RouteComponentProps<{alertId: string; orgId: string}, {}>;
  14. function IncidentDetails({organization, params}: Props) {
  15. const api = useApi();
  16. const [hasError, setHasError] = useState(false);
  17. const track = () => {
  18. trackAdvancedAnalyticsEvent('alert_details.viewed', {
  19. organization,
  20. alert_id: parseInt(params.alertId, 10),
  21. });
  22. };
  23. const fetchData = async () => {
  24. setHasError(false);
  25. try {
  26. const incident = await fetchIncident(api, params.orgId, params.alertId);
  27. browserHistory.replace({
  28. pathname: alertDetailsLink(organization, incident),
  29. query: {alert: incident.identifier},
  30. });
  31. } catch (err) {
  32. setHasError(true);
  33. }
  34. };
  35. useEffect(() => {
  36. fetchData();
  37. track();
  38. }, []);
  39. if (hasError) {
  40. return <LoadingError onRetry={fetchData} />;
  41. }
  42. return <LoadingIndicator />;
  43. }
  44. export default IncidentDetails;