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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
							import {Fragment} from 'react';
import type {RouteComponentProps} from 'react-router';
import styled from '@emotion/styled';

import {Button} from 'sentry/components/button';
import {ExportQueryType} from 'sentry/components/dataExport';
import {DateTime} from 'sentry/components/dateTime';
import LoadingIndicator from 'sentry/components/loadingIndicator';
import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
import {IconDownload} from 'sentry/icons';
import {t, tct} from 'sentry/locale';
import {space} from 'sentry/styles/space';
import {useApiQuery} from 'sentry/utils/queryClient';
import normalizeUrl from 'sentry/utils/url/normalizeUrl';
import {useRouteContext} from 'sentry/utils/useRouteContext';
import Layout from 'sentry/views/auth/layout';

export enum DownloadStatus {
  EARLY = 'EARLY',
  VALID = 'VALID',
  EXPIRED = 'EXPIRED',
}

type RouteParams = {
  dataExportId: string;
  orgId: string;
};

type Download = {
  checksum: string;
  dateCreated: string;
  id: number;
  query: {
    info: object;
    type: ExportQueryType;
  };
  status: DownloadStatus;
  user: {
    email: string;
    id: number;
    username: string;
  };
  dateExpired?: string;
  dateFinished?: string;
};

type Props = {} & RouteComponentProps<RouteParams, {}>;

function DataDownload({params: {orgId, dataExportId}}: Props) {
  const {
    data: download,
    isLoading,
    isError,
    error,
  } = useApiQuery<Download>([`/organizations/${orgId}/data-export/${dataExportId}/`], {
    staleTime: 0,
  });

  const route = useRouteContext();

  if (isError) {
    const errDetail = error?.responseJSON?.detail;
    return (
      <Layout>
        <main>
          <Header>
            <h3>
              {error.status} - {error.statusText}
            </h3>
          </Header>
          {errDetail && (
            <Body>
              <p>{errDetail as string}</p>
            </Body>
          )}
        </main>
      </Layout>
    );
  }

  if (isLoading) {
    return <LoadingIndicator />;
  }

  const getActionLink = (queryType): string => {
    switch (queryType) {
      case ExportQueryType.ISSUES_BY_TAG:
        return `/organizations/${orgId}/issues/`;
      case ExportQueryType.DISCOVER:
        return `/organizations/${orgId}/discover/queries/`;
      default:
        return '/';
    }
  };

  const renderDate = (date: string | undefined): React.ReactNode => {
    if (!date) {
      return null;
    }
    const d = new Date(date);
    return (
      <strong>
        <DateTime date={d} />
      </strong>
    );
  };

  const renderEarly = (): React.ReactNode => {
    return (
      <Fragment>
        <Header>
          <h3>
            {t('What are')}
            <i>{t(' you ')}</i>
            {t('doing here?')}
          </h3>
        </Header>
        <Body>
          <p>
            {t(
              "Not that its any of our business, but were you invited to this page? It's just that we don't exactly remember emailing you about it."
            )}
          </p>
          <p>{t("Close this window and we'll email you when your download is ready.")}</p>
        </Body>
      </Fragment>
    );
  };

  const renderExpired = (): React.ReactNode => {
    const {query} = download;
    const actionLink = getActionLink(query.type);
    return (
      <Fragment>
        <Header>
          <h3>{t('This is awkward.')}</h3>
        </Header>
        <Body>
          <p>
            {t(
              "That link expired, so your download doesn't live here anymore. Just picked up one day and left town."
            )}
          </p>
          <p>
            {t(
              'Make a new one with your latest data. Your old download will never see it coming.'
            )}
          </p>
          <DownloadButton href={actionLink} priority="primary">
            {t('Start a New Download')}
          </DownloadButton>
        </Body>
      </Fragment>
    );
  };

  const openInDiscover = () => {
    const navigator = route.router;
    const {
      query: {info},
    } = download;

    const to = {
      pathname: `/organizations/${orgId}/discover/results/`,
      query: info,
    };

    navigator.push(normalizeUrl(to));
  };

  const renderOpenInDiscover = () => {
    const {
      query = {
        type: ExportQueryType.ISSUES_BY_TAG,
        info: {},
      },
    } = download;

    // default to IssuesByTag because we don't want to
    // display this unless we're sure its a discover query
    const {type = ExportQueryType.ISSUES_BY_TAG} = query;

    return type === 'Discover' ? (
      <Fragment>
        <p>{t('Need to make changes?')}</p>
        <Button priority="primary" onClick={() => openInDiscover()}>
          {t('Open in Discover')}
        </Button>
        <br />
      </Fragment>
    ) : null;
  };

  const renderValid = (): React.ReactNode => {
    const {dateExpired, checksum} = download;

    return (
      <Fragment>
        <Header>
          <h3>{t('All done.')}</h3>
        </Header>
        <Body>
          <p>{t("See, that wasn't so bad. Your data is all ready for download.")}</p>
          <Button
            priority="primary"
            icon={<IconDownload />}
            href={`/api/0/organizations/${orgId}/data-export/${dataExportId}/?download=true`}
          >
            {t('Download CSV')}
          </Button>
          <p>
            {t("That link won't last forever — it expires:")}
            <br />
            {renderDate(dateExpired)}
          </p>
          {renderOpenInDiscover()}
          <p>
            <small>
              <strong>SHA1:{checksum}</strong>
            </small>
            <br />
            {tct('Need help verifying? [link].', {
              link: (
                <a
                  href="https://docs.sentry.io/product/discover-queries/query-builder/#filter-by-table-columns"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {t('Check out our docs')}
                </a>
              ),
            })}
          </p>
        </Body>
      </Fragment>
    );
  };

  const renderContent = () => {
    switch (download.status) {
      case DownloadStatus.EARLY:
        return renderEarly();
      case DownloadStatus.EXPIRED:
        return renderExpired();
      default:
        return renderValid();
    }
  };

  return (
    <SentryDocumentTitle title={t('Download Center')}>
      <Layout>
        <main>{renderContent()}</main>
      </Layout>
    </SentryDocumentTitle>
  );
}

const Header = styled('header')`
  border-bottom: 1px solid ${p => p.theme.border};
  padding: ${space(3)} 40px 0;
  h3 {
    font-size: 24px;
    margin: 0 0 ${space(3)} 0;
  }
`;

const Body = styled('div')`
  padding: ${space(2)} 40px;
  max-width: 500px;
  p {
    margin: ${space(1.5)} 0;
  }
`;

const DownloadButton = styled(Button)`
  margin-bottom: ${space(1.5)};
`;

export default DataDownload;