index.tsx 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657
  1. import {Fragment} from 'react';
  2. import {forceCheck} from 'react-lazyload';
  3. import {RouteComponentProps} from 'react-router';
  4. import styled from '@emotion/styled';
  5. import pick from 'lodash/pick';
  6. import {fetchTagValues} from 'sentry/actionCreators/tags';
  7. import Feature from 'sentry/components/acl/feature';
  8. import Alert from 'sentry/components/alert';
  9. import GuideAnchor from 'sentry/components/assistant/guideAnchor';
  10. import EmptyStateWarning from 'sentry/components/emptyStateWarning';
  11. import ExternalLink from 'sentry/components/links/externalLink';
  12. import LoadingIndicator from 'sentry/components/loadingIndicator';
  13. import NoProjectMessage from 'sentry/components/noProjectMessage';
  14. import GlobalSelectionHeader from 'sentry/components/organizations/globalSelectionHeader';
  15. import {getRelativeSummary} from 'sentry/components/organizations/timeRangeSelector/utils';
  16. import PageHeading from 'sentry/components/pageHeading';
  17. import Pagination from 'sentry/components/pagination';
  18. import SearchBar from 'sentry/components/searchBar';
  19. import SmartSearchBar from 'sentry/components/smartSearchBar';
  20. import {ItemType} from 'sentry/components/smartSearchBar/types';
  21. import {DEFAULT_STATS_PERIOD} from 'sentry/constants';
  22. import {ALL_ACCESS_PROJECTS} from 'sentry/constants/globalSelectionHeader';
  23. import {releaseHealth} from 'sentry/data/platformCategories';
  24. import {IconInfo} from 'sentry/icons';
  25. import {t} from 'sentry/locale';
  26. import ProjectsStore from 'sentry/stores/projectsStore';
  27. import {PageContent, PageHeader} from 'sentry/styles/organization';
  28. import space from 'sentry/styles/space';
  29. import {
  30. GlobalSelection,
  31. Organization,
  32. Project,
  33. Release,
  34. ReleaseStatus,
  35. Tag,
  36. } from 'sentry/types';
  37. import {trackAnalyticsEvent} from 'sentry/utils/analytics';
  38. import {SEMVER_TAGS} from 'sentry/utils/discover/fields';
  39. import Projects from 'sentry/utils/projects';
  40. import routeTitleGen from 'sentry/utils/routeTitle';
  41. import withGlobalSelection from 'sentry/utils/withGlobalSelection';
  42. import withOrganization from 'sentry/utils/withOrganization';
  43. import withProjects from 'sentry/utils/withProjects';
  44. import AsyncView from 'sentry/views/asyncView';
  45. import ReleaseArchivedNotice from '../detail/overview/releaseArchivedNotice';
  46. import {isMobileRelease} from '../utils';
  47. import ReleaseCard from './releaseCard';
  48. import ReleasesAdoptionChart from './releasesAdoptionChart';
  49. import ReleasesDisplayOptions, {ReleasesDisplayOption} from './releasesDisplayOptions';
  50. import ReleasesPromo from './releasesPromo';
  51. import ReleasesRequest from './releasesRequest';
  52. import ReleasesSortOptions, {ReleasesSortOption} from './releasesSortOptions';
  53. import ReleasesStatusOptions, {ReleasesStatusOption} from './releasesStatusOptions';
  54. type RouteParams = {
  55. orgId: string;
  56. };
  57. type Props = RouteComponentProps<RouteParams, {}> & {
  58. organization: Organization;
  59. projects: Project[];
  60. selection: GlobalSelection;
  61. };
  62. type State = {
  63. releases: Release[];
  64. } & AsyncView['state'];
  65. class ReleasesList extends AsyncView<Props, State> {
  66. shouldReload = true;
  67. shouldRenderBadRequests = true;
  68. getTitle() {
  69. return routeTitleGen(t('Releases'), this.props.organization.slug, false);
  70. }
  71. getEndpoints(): ReturnType<AsyncView['getEndpoints']> {
  72. const {organization, location} = this.props;
  73. const {statsPeriod} = location.query;
  74. const activeSort = this.getSort();
  75. const activeStatus = this.getStatus();
  76. const query = {
  77. ...pick(location.query, ['project', 'environment', 'cursor', 'query', 'sort']),
  78. summaryStatsPeriod: statsPeriod,
  79. per_page: 20,
  80. flatten: activeSort === ReleasesSortOption.DATE ? 0 : 1,
  81. adoptionStages: 1,
  82. status:
  83. activeStatus === ReleasesStatusOption.ARCHIVED
  84. ? ReleaseStatus.Archived
  85. : ReleaseStatus.Active,
  86. };
  87. const endpoints: ReturnType<AsyncView['getEndpoints']> = [
  88. [
  89. 'releases',
  90. `/organizations/${organization.slug}/releases/`,
  91. {query},
  92. {disableEntireQuery: true},
  93. ],
  94. ];
  95. return endpoints;
  96. }
  97. componentDidUpdate(prevProps: Props, prevState: State) {
  98. super.componentDidUpdate(prevProps, prevState);
  99. if (prevState.releases !== this.state.releases) {
  100. /**
  101. * Manually trigger checking for elements in viewport.
  102. * Helpful when LazyLoad components enter the viewport without resize or scroll events,
  103. * https://github.com/twobin/react-lazyload#forcecheck
  104. *
  105. * HealthStatsCharts are being rendered only when they are scrolled into viewport.
  106. * This is how we re-check them without scrolling once releases change as this view
  107. * uses shouldReload=true and there is no reloading happening.
  108. */
  109. forceCheck();
  110. }
  111. }
  112. getQuery() {
  113. const {query} = this.props.location.query;
  114. return typeof query === 'string' ? query : undefined;
  115. }
  116. getSort(): ReleasesSortOption {
  117. const {environments} = this.props.selection;
  118. const {sort} = this.props.location.query;
  119. // Require 1 environment for date adopted
  120. if (sort === ReleasesSortOption.ADOPTION && environments.length !== 1) {
  121. return ReleasesSortOption.DATE;
  122. }
  123. const sortExists = Object.values(ReleasesSortOption).includes(sort);
  124. if (sortExists) {
  125. return sort;
  126. }
  127. return ReleasesSortOption.DATE;
  128. }
  129. getDisplay(): ReleasesDisplayOption {
  130. const {display} = this.props.location.query;
  131. switch (display) {
  132. case ReleasesDisplayOption.USERS:
  133. return ReleasesDisplayOption.USERS;
  134. default:
  135. return ReleasesDisplayOption.SESSIONS;
  136. }
  137. }
  138. getStatus(): ReleasesStatusOption {
  139. const {status} = this.props.location.query;
  140. switch (status) {
  141. case ReleasesStatusOption.ARCHIVED:
  142. return ReleasesStatusOption.ARCHIVED;
  143. default:
  144. return ReleasesStatusOption.ACTIVE;
  145. }
  146. }
  147. getSelectedProject(): Project | undefined {
  148. const {selection, projects} = this.props;
  149. const selectedProjectId =
  150. selection.projects && selection.projects.length === 1 && selection.projects[0];
  151. return projects?.find(p => p.id === `${selectedProjectId}`);
  152. }
  153. get projectHasSessions() {
  154. return this.getSelectedProject()?.hasSessions ?? null;
  155. }
  156. handleSearch = (query: string) => {
  157. const {location, router} = this.props;
  158. router.push({
  159. ...location,
  160. query: {...location.query, cursor: undefined, query},
  161. });
  162. };
  163. handleSortBy = (sort: string) => {
  164. const {location, router} = this.props;
  165. router.push({
  166. ...location,
  167. query: {...location.query, cursor: undefined, sort},
  168. });
  169. };
  170. handleDisplay = (display: string) => {
  171. const {location, router} = this.props;
  172. let sort = location.query.sort;
  173. if (
  174. sort === ReleasesSortOption.USERS_24_HOURS &&
  175. display === ReleasesDisplayOption.SESSIONS
  176. ) {
  177. sort = ReleasesSortOption.SESSIONS_24_HOURS;
  178. } else if (
  179. sort === ReleasesSortOption.SESSIONS_24_HOURS &&
  180. display === ReleasesDisplayOption.USERS
  181. ) {
  182. sort = ReleasesSortOption.USERS_24_HOURS;
  183. } else if (
  184. sort === ReleasesSortOption.CRASH_FREE_USERS &&
  185. display === ReleasesDisplayOption.SESSIONS
  186. ) {
  187. sort = ReleasesSortOption.CRASH_FREE_SESSIONS;
  188. } else if (
  189. sort === ReleasesSortOption.CRASH_FREE_SESSIONS &&
  190. display === ReleasesDisplayOption.USERS
  191. ) {
  192. sort = ReleasesSortOption.CRASH_FREE_USERS;
  193. }
  194. router.push({
  195. ...location,
  196. query: {...location.query, cursor: undefined, display, sort},
  197. });
  198. };
  199. handleStatus = (status: string) => {
  200. const {location, router} = this.props;
  201. router.push({
  202. ...location,
  203. query: {...location.query, cursor: undefined, status},
  204. });
  205. };
  206. trackAddReleaseHealth = () => {
  207. const {organization, selection} = this.props;
  208. if (organization.id && selection.projects[0]) {
  209. trackAnalyticsEvent({
  210. eventKey: `releases_list.click_add_release_health`,
  211. eventName: `Releases List: Click Add Release Health`,
  212. organization_id: parseInt(organization.id, 10),
  213. project_id: selection.projects[0],
  214. });
  215. }
  216. };
  217. tagValueLoader = (key: string, search: string) => {
  218. const {location, organization} = this.props;
  219. const {project: projectId} = location.query;
  220. return fetchTagValues(
  221. this.api,
  222. organization.slug,
  223. key,
  224. search,
  225. projectId ? [projectId] : null,
  226. location.query
  227. );
  228. };
  229. getTagValues = async (tag: Tag, currentQuery: string): Promise<string[]> => {
  230. const values = await this.tagValueLoader(tag.key, currentQuery);
  231. return values.map(({value}) => value);
  232. };
  233. shouldShowLoadingIndicator() {
  234. const {loading, releases, reloading} = this.state;
  235. return (loading && !reloading) || (loading && !releases?.length);
  236. }
  237. renderLoading() {
  238. return this.renderBody();
  239. }
  240. renderError() {
  241. return this.renderBody();
  242. }
  243. renderEmptyMessage() {
  244. const {location, organization, selection} = this.props;
  245. const {statsPeriod} = location.query;
  246. const searchQuery = this.getQuery();
  247. const activeSort = this.getSort();
  248. const activeStatus = this.getStatus();
  249. if (searchQuery && searchQuery.length) {
  250. return (
  251. <EmptyStateWarning small>{`${t(
  252. 'There are no releases that match'
  253. )}: '${searchQuery}'.`}</EmptyStateWarning>
  254. );
  255. }
  256. if (activeSort === ReleasesSortOption.USERS_24_HOURS) {
  257. return (
  258. <EmptyStateWarning small>
  259. {t('There are no releases with active user data (users in the last 24 hours).')}
  260. </EmptyStateWarning>
  261. );
  262. }
  263. if (activeSort === ReleasesSortOption.SESSIONS_24_HOURS) {
  264. return (
  265. <EmptyStateWarning small>
  266. {t(
  267. 'There are no releases with active session data (sessions in the last 24 hours).'
  268. )}
  269. </EmptyStateWarning>
  270. );
  271. }
  272. if (
  273. activeSort === ReleasesSortOption.BUILD ||
  274. activeSort === ReleasesSortOption.SEMVER
  275. ) {
  276. return (
  277. <EmptyStateWarning small>
  278. {t('There are no releases with semantic versioning.')}
  279. </EmptyStateWarning>
  280. );
  281. }
  282. if (activeSort !== ReleasesSortOption.DATE) {
  283. const relativePeriod = getRelativeSummary(
  284. statsPeriod || DEFAULT_STATS_PERIOD
  285. ).toLowerCase();
  286. return (
  287. <EmptyStateWarning small>
  288. {`${t('There are no releases with data in the')} ${relativePeriod}.`}
  289. </EmptyStateWarning>
  290. );
  291. }
  292. if (activeStatus === ReleasesStatusOption.ARCHIVED) {
  293. return (
  294. <EmptyStateWarning small>
  295. {t('There are no archived releases.')}
  296. </EmptyStateWarning>
  297. );
  298. }
  299. return (
  300. <ReleasesPromo
  301. organization={organization}
  302. projectId={selection.projects.filter(p => p !== ALL_ACCESS_PROJECTS)[0]}
  303. />
  304. );
  305. }
  306. renderHealthCta() {
  307. const {organization} = this.props;
  308. const {releases} = this.state;
  309. const selectedProject = this.getSelectedProject();
  310. if (!selectedProject || this.projectHasSessions !== false || !releases?.length) {
  311. return null;
  312. }
  313. return (
  314. <Projects orgId={organization.slug} slugs={[selectedProject.slug]}>
  315. {({projects, initiallyLoaded, fetchError}) => {
  316. const project = projects && projects.length === 1 && projects[0];
  317. const projectCanHaveReleases =
  318. project && project.platform && releaseHealth.includes(project.platform);
  319. if (!initiallyLoaded || fetchError || !projectCanHaveReleases) {
  320. return null;
  321. }
  322. return (
  323. <Alert type="info" icon={<IconInfo size="md" />}>
  324. <AlertText>
  325. <div>
  326. {t(
  327. 'To track user adoption, crash rates, session data and more, add Release Health to your current setup.'
  328. )}
  329. </div>
  330. <ExternalLink
  331. href="https://docs.sentry.io/product/releases/health/setup/"
  332. onClick={this.trackAddReleaseHealth}
  333. >
  334. {t('Add Release Health')}
  335. </ExternalLink>
  336. </AlertText>
  337. </Alert>
  338. );
  339. }}
  340. </Projects>
  341. );
  342. }
  343. renderInnerBody(
  344. activeDisplay: ReleasesDisplayOption,
  345. showReleaseAdoptionStages: boolean
  346. ) {
  347. const {location, selection, organization, router} = this.props;
  348. const {releases, reloading, releasesPageLinks} = this.state;
  349. if (this.shouldShowLoadingIndicator()) {
  350. return <LoadingIndicator />;
  351. }
  352. if (!releases?.length) {
  353. return this.renderEmptyMessage();
  354. }
  355. return (
  356. <ReleasesRequest
  357. releases={releases.map(({version}) => version)}
  358. organization={organization}
  359. selection={selection}
  360. location={location}
  361. display={[this.getDisplay()]}
  362. releasesReloading={reloading}
  363. healthStatsPeriod={location.query.healthStatsPeriod}
  364. >
  365. {({isHealthLoading, getHealthData}) => {
  366. const singleProjectSelected =
  367. selection.projects?.length === 1 &&
  368. selection.projects[0] !== ALL_ACCESS_PROJECTS;
  369. const selectedProject = this.getSelectedProject();
  370. const isMobileProject =
  371. selectedProject?.platform && isMobileRelease(selectedProject.platform);
  372. return (
  373. <Fragment>
  374. {singleProjectSelected && this.projectHasSessions && isMobileProject && (
  375. <Feature features={['organizations:release-adoption-chart']}>
  376. <ReleasesAdoptionChart
  377. organization={organization}
  378. selection={selection}
  379. location={location}
  380. router={router}
  381. activeDisplay={activeDisplay}
  382. />
  383. </Feature>
  384. )}
  385. {releases.map((release, index) => (
  386. <ReleaseCard
  387. key={`${release.version}-${release.projects[0].slug}`}
  388. activeDisplay={activeDisplay}
  389. release={release}
  390. organization={organization}
  391. location={location}
  392. selection={selection}
  393. reloading={reloading}
  394. showHealthPlaceholders={isHealthLoading}
  395. isTopRelease={index === 0}
  396. getHealthData={getHealthData}
  397. showReleaseAdoptionStages={showReleaseAdoptionStages}
  398. />
  399. ))}
  400. <Pagination pageLinks={releasesPageLinks} />
  401. </Fragment>
  402. );
  403. }}
  404. </ReleasesRequest>
  405. );
  406. }
  407. renderBody() {
  408. const {organization, selection} = this.props;
  409. const {releases, reloading, error} = this.state;
  410. const activeSort = this.getSort();
  411. const activeStatus = this.getStatus();
  412. const activeDisplay = this.getDisplay();
  413. const hasSemver = organization.features.includes('semver');
  414. const hasReleaseStages = organization.features.includes('release-adoption-stage');
  415. const hasAnyMobileProject = selection.projects
  416. .map(id => `${id}`)
  417. .map(ProjectsStore.getById)
  418. .some(project => project?.platform && isMobileRelease(project.platform));
  419. const showReleaseAdoptionStages =
  420. hasReleaseStages && hasAnyMobileProject && selection.environments.length === 1;
  421. const hasReleasesSetup = releases && releases.length > 0;
  422. return (
  423. <GlobalSelectionHeader
  424. showAbsolute={false}
  425. timeRangeHint={t(
  426. 'Changing this date range will recalculate the release metrics.'
  427. )}
  428. >
  429. <PageContent>
  430. <NoProjectMessage organization={organization}>
  431. <PageHeader>
  432. <PageHeading>{t('Releases')}</PageHeading>
  433. </PageHeader>
  434. {this.renderHealthCta()}
  435. <SortAndFilterWrapper>
  436. {hasSemver ? (
  437. <GuideAnchor
  438. target="releases_search"
  439. position="bottom"
  440. disabled={!hasReleasesSetup}
  441. >
  442. <GuideAnchor
  443. target="release_stages"
  444. position="bottom"
  445. disabled={!showReleaseAdoptionStages}
  446. >
  447. <SmartSearchBar
  448. searchSource="releases"
  449. query={this.getQuery()}
  450. placeholder={t('Search by version, build, package, or stage')}
  451. maxSearchItems={5}
  452. hasRecentSearches={false}
  453. supportedTags={{
  454. ...SEMVER_TAGS,
  455. release: {
  456. key: 'release',
  457. name: 'release',
  458. },
  459. }}
  460. supportedTagType={ItemType.PROPERTY}
  461. onSearch={this.handleSearch}
  462. onGetTagValues={this.getTagValues}
  463. />
  464. </GuideAnchor>
  465. </GuideAnchor>
  466. ) : (
  467. <SearchBar
  468. placeholder={t('Search')}
  469. onSearch={this.handleSearch}
  470. query={this.getQuery()}
  471. />
  472. )}
  473. <DropdownsWrapper>
  474. <ReleasesStatusOptions
  475. selected={activeStatus}
  476. onSelect={this.handleStatus}
  477. />
  478. <ReleasesSortOptions
  479. selected={activeSort}
  480. selectedDisplay={activeDisplay}
  481. onSelect={this.handleSortBy}
  482. environments={selection.environments}
  483. organization={organization}
  484. />
  485. <ReleasesDisplayOptions
  486. selected={activeDisplay}
  487. onSelect={this.handleDisplay}
  488. />
  489. </DropdownsWrapper>
  490. </SortAndFilterWrapper>
  491. {!reloading &&
  492. activeStatus === ReleasesStatusOption.ARCHIVED &&
  493. !!releases?.length && <ReleaseArchivedNotice multi />}
  494. {error
  495. ? super.renderError(new Error('Unable to load all required endpoints'))
  496. : this.renderInnerBody(activeDisplay, showReleaseAdoptionStages)}
  497. </NoProjectMessage>
  498. </PageContent>
  499. </GlobalSelectionHeader>
  500. );
  501. }
  502. }
  503. const AlertText = styled('div')`
  504. display: flex;
  505. align-items: flex-start;
  506. justify-content: flex-start;
  507. gap: ${space(2)};
  508. > *:nth-child(1) {
  509. flex: 1;
  510. }
  511. flex-direction: column;
  512. @media (min-width: ${p => p.theme.breakpoints[1]}) {
  513. flex-direction: row;
  514. }
  515. `;
  516. const SortAndFilterWrapper = styled('div')`
  517. display: flex;
  518. flex-direction: column;
  519. justify-content: stretch;
  520. margin-bottom: ${space(2)};
  521. > *:nth-child(1) {
  522. flex: 1;
  523. }
  524. /* Below this width search bar needs its own row no to wrap placeholder text
  525. * Above this width search bar and controls can be on the same row */
  526. @media (min-width: ${p => p.theme.breakpoints[2]}) {
  527. flex-direction: row;
  528. }
  529. `;
  530. const DropdownsWrapper = styled('div')`
  531. display: flex;
  532. flex-direction: column;
  533. & > * {
  534. margin-top: ${space(2)};
  535. }
  536. /* At the narrower widths wrapper is on its own in a row
  537. * Expand the dropdown controls to fill the empty space */
  538. & button {
  539. width: 100%;
  540. }
  541. /* At narrower widths space bar needs a separate row
  542. * Divide space evenly when 3 dropdowns are in their own row */
  543. @media (min-width: ${p => p.theme.breakpoints[0]}) {
  544. margin-top: ${space(2)};
  545. & > * {
  546. margin-top: ${space(0)};
  547. margin-left: ${space(1)};
  548. }
  549. & > *:nth-child(1) {
  550. margin-left: ${space(0)};
  551. }
  552. display: grid;
  553. grid-template-columns: 1fr 1fr 1fr;
  554. }
  555. /* At wider widths everything is in 1 row
  556. * Auto space dropdowns when they are in the same row with search bar */
  557. @media (min-width: ${p => p.theme.breakpoints[2]}) {
  558. margin-top: ${space(0)};
  559. & > * {
  560. margin-left: ${space(1)} !important;
  561. }
  562. display: grid;
  563. grid-template-columns: auto auto auto;
  564. }
  565. `;
  566. export default withProjects(withOrganization(withGlobalSelection(ReleasesList)));
  567. export {ReleasesList};