index.tsx 21 KB

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