sentry/static/app/views/alerts/details/index.tsx

import {useEffect, useState} from 'react';
import {browserHistory, RouteComponentProps} from 'react-router';

import {Client} from 'app/api';
import LoadingError from 'app/components/loadingError';
import LoadingIndicator from 'app/components/loadingIndicator';
import {Organization} from 'app/types';
import {trackAnalyticsEvent} from 'app/utils/analytics';
import useApi from 'app/utils/useApi';

import {AlertRuleStatus, Incident} from '../types';
import {fetchIncident} from '../utils';

type Props = {
  api: Client;
  organization: Organization;
} & RouteComponentProps<{alertId: string; orgId: string}, {}>;

export const alertDetailsLink = (organization: Organization, incident: Incident) =>
  `/organizations/${organization.slug}/alerts/rules/details/${
    incident.alertRule.status === AlertRuleStatus.SNAPSHOT &&
    incident.alertRule.originalAlertRuleId
      ? incident.alertRule.originalAlertRuleId
      : incident.alertRule.id
  }/`;

function IncidentDetails({organization, params}: Props) {
  const api = useApi();
  const [hasError, setHasError] = useState(false);

  const track = () => {
    trackAnalyticsEvent({
      eventKey: 'alert_details.viewed',
      eventName: 'Alert Details: Viewed',
      organization_id: parseInt(organization.id, 10),
      alert_id: parseInt(params.alertId, 10),
    });
  };

  const fetchData = async () => {
    setHasError(false);

    try {
      const incident = await fetchIncident(api, params.orgId, params.alertId);
      browserHistory.replace({
        pathname: alertDetailsLink(organization, incident),
        query: {alert: incident.identifier},
      });
    } catch (err) {
      setHasError(true);
    }
  };

  useEffect(() => {
    fetchData();
    track();
  }, []);

  if (hasError) {
    return <LoadingError onRetry={fetchData} />;
  }

  return <LoadingIndicator />;
}

export default IncidentDetails;