feat(ui): Split fetching of releases into two network requests (#18795)

Releases endpoint can be called with health: 1 parameter which will return releases with their health data.

This request can take significantly longer (especially for big orgs) compared to health: 0.

We decided to call health: 0 on the releases page and then fetch health: 1 lazily, showing placeholders in the meantime.

We will skip the two-phased load for sorting other than date created (default) since in those cases we already need to go to the session store anyways (which takes here the long time).

Author: matejminar

src/sentry/static/sentry/app/types/index.tsx

@@ -880,7 +880,17 @@ export type UserReport = {
   email: string;
 };
 
-export type Release = {
+export type Release = BaseRelease &
+  ReleaseData & {
+    projects: ReleaseProject[];
+  };
+
+export type ReleaseWithHealth = BaseRelease &
+  ReleaseData & {
+    projects: Required<ReleaseProject>[];
+  };
+
+type ReleaseData = {
   commitCount: number;
   data: {};
   lastDeploy?: Deploy;
@@ -891,11 +901,10 @@ export type Release = {
   authors: User[];
   owner?: any; // TODO(ts)
   newGroups: number;
-  projects: ReleaseProject[];
   versionInfo: VersionInfo;
-} & BaseRelease;
+};
 
-export type BaseRelease = {
+type BaseRelease = {
   dateReleased: string;
   url: string;
   dateCreated: string;
@@ -911,7 +920,7 @@ export type ReleaseProject = {
   platform: string;
   platforms: string[];
   newGroups: number;
-  healthData: Health;
+  healthData?: Health;
 };
 
 export type ReleaseMeta = {

src/sentry/static/sentry/app/views/releasesV2/detail/index.tsx

@@ -6,11 +6,11 @@ import styled from '@emotion/styled';
 import {t} from 'app/locale';
 import {
   Organization,
-  Release,
   ReleaseProject,
   ReleaseMeta,
   Deploy,
   GlobalSelection,
+  ReleaseWithHealth,
 } from 'app/types';
 import AsyncView from 'app/views/asyncView';
 import GlobalSelectionHeader from 'app/components/organizations/globalSelectionHeader';
@@ -31,8 +31,8 @@ import ReleaseHeader from './releaseHeader';
 import PickProjectToContinue from './pickProjectToContinue';
 
 type ReleaseContext = {
-  release: Release;
-  project: ReleaseProject;
+  release: ReleaseWithHealth;
+  project: Required<ReleaseProject>;
   deploys: Deploy[];
   releaseMeta: ReleaseMeta;
 };
@@ -50,7 +50,7 @@ type Props = RouteComponentProps<RouteParams, {}> & {
 };
 
 type State = {
-  release: Release;
+  release: ReleaseWithHealth;
   deploys: Deploy[];
 } & AsyncView['state'];
 

src/sentry/static/sentry/app/views/releasesV2/detail/overview/projectReleaseDetails.tsx

@@ -3,15 +3,15 @@ import styled from '@emotion/styled';
 
 import {t} from 'app/locale';
 import space from 'app/styles/space';
-import {Release} from 'app/types';
+import {ReleaseWithHealth} from 'app/types';
 import Version from 'app/components/version';
 import TimeSince from 'app/components/timeSince';
 import DateTime from 'app/components/dateTime';
 
 import {SectionHeading, Wrapper} from './styles';
 
 type Props = {
-  release: Release;
+  release: ReleaseWithHealth;
 };
 
 const ProjectReleaseDetails = ({release}: Props) => {

src/sentry/static/sentry/app/views/releasesV2/detail/releaseHeader.tsx

@@ -26,7 +26,7 @@ type Props = {
   location: Location;
   orgId: string;
   release: Release;
-  project: ReleaseProject;
+  project: Required<ReleaseProject>;
   releaseMeta: ReleaseMeta;
 };
 

src/sentry/static/sentry/app/views/releasesV2/list/clippedHealthRows.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+import space from 'app/styles/space';
+import {t, tct} from 'app/locale';
+import Button from 'app/components/button';
+
+type DefaultProps = {
+  maxVisibleItems: number;
+  fadeHeight: string;
+};
+
+type Props = DefaultProps & {
+  children: React.ReactNode[];
+  className?: string;
+};
+
+type State = {
+  collapsed: boolean;
+};
+
+// TODO(matej): refactor to reusable component
+
+class clippedHealthRows extends React.Component<Props, State> {
+  static defaultProps: DefaultProps = {
+    maxVisibleItems: 5,
+    fadeHeight: '40px',
+  };
+
+  state: State = {
+    collapsed: true,
+  };
+
+  reveal = () => {
+    this.setState({collapsed: false});
+  };
+
+  collapse = () => {
+    this.setState({collapsed: true});
+  };
+
+  render() {
+    const {children, maxVisibleItems, fadeHeight, className} = this.props;
+    const {collapsed} = this.state;
+
+    return (
+      <Wrapper className={className}>
+        {children.map((item, index) => {
+          if (!collapsed || index < maxVisibleItems) {
+            return item;
+          }
+
+          if (index === maxVisibleItems) {
+            return (
+              <ShowMoreWrapper fadeHeight={fadeHeight} key="show-more">
+                <Button
+                  onClick={this.reveal}
+                  priority="primary"
+                  size="xsmall"
+                  data-test-id="show-more"
+                >
+                  {tct('Show [numberOfFrames] More', {
+                    numberOfFrames: children.length - maxVisibleItems,
+                  })}
+                </Button>
+              </ShowMoreWrapper>
+            );
+          }
+          return null;
+        })}
+
+        {!collapsed && children.length > maxVisibleItems && (
+          <CollapseWrapper>
+            <Button
+              onClick={this.collapse}
+              priority="primary"
+              size="xsmall"
+              data-test-id="collapse"
+            >
+              {t('Collapse')}
+            </Button>
+          </CollapseWrapper>
+        )}
+      </Wrapper>
+    );
+  }
+}
+
+const Wrapper = styled('div')`
+  position: relative;
+`;
+
+const ShowMoreWrapper = styled('div')<{fadeHeight: string}>`
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.15) 0, #fff);
+  background-repeat: repeat-x;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-bottom: ${space(1)} solid #fff;
+  border-top: ${space(1)} solid transparent;
+  height: ${p => p.fadeHeight};
+`;
+
+const CollapseWrapper = styled('div')`
+  text-align: center;
+  padding: ${space(0.25)} 0 ${space(1)} 0;
+`;
+
+export default clippedHealthRows;

src/sentry/static/sentry/app/views/releasesV2/list/index.tsx

@@ -16,18 +16,18 @@ import withOrganization from 'app/utils/withOrganization';
 import withGlobalSelection from 'app/utils/withGlobalSelection';
 import LoadingIndicator from 'app/components/loadingIndicator';
 import LightWeightNoProjectMessage from 'app/components/lightWeightNoProjectMessage';
-import IntroBanner from 'app/views/releasesV2/list/introBanner';
 import {PageContent, PageHeader} from 'app/styles/organization';
 import EmptyStateWarning from 'app/components/emptyStateWarning';
-import ReleaseCard from 'app/views/releasesV2/list/releaseCard';
 import GlobalSelectionHeader from 'app/components/organizations/globalSelectionHeader';
 import {getRelativeSummary} from 'app/components/organizations/timeRangeSelector/utils';
 import {DEFAULT_STATS_PERIOD} from 'app/constants';
 import {defined} from 'app/utils';
 
 import ReleaseListSortOptions from './releaseListSortOptions';
 import ReleasePromo from './releasePromo';
+import IntroBanner from './introBanner';
 import SwitchReleasesButton from '../utils/switchReleasesButton';
+import ReleaseCard from './releaseCard';
 
 type RouteParams = {
   orgId: string;
@@ -38,7 +38,10 @@ type Props = RouteComponentProps<RouteParams, {}> & {
   selection: GlobalSelection;
 };
 
-type State = {releases: Release[]} & AsyncView['state'];
+type State = {
+  releases: Release[];
+  loadingHealth: boolean;
+} & AsyncView['state'];
 
 class ReleasesList extends AsyncView<Props, State> {
   shouldReload = true;
@@ -47,15 +50,10 @@ class ReleasesList extends AsyncView<Props, State> {
     return routeTitleGen(t('Releases'), this.props.organization.slug, false);
   }
 
-  getDefaultState() {
-    return {
-      ...super.getDefaultState(),
-    };
-  }
-
-  getEndpoints(): [string, string, {}][] {
+  getEndpoints() {
     const {organization, location} = this.props;
-    const {statsPeriod, sort} = location.query;
+    const {statsPeriod} = location.query;
+    const sort = this.getSort();
 
     const query = {
       ...pick(location.query, [
@@ -68,15 +66,43 @@ class ReleasesList extends AsyncView<Props, State> {
         'healthStat',
       ]),
       summaryStatsPeriod: statsPeriod,
-      per_page: 50,
+      per_page: 25,
       health: 1,
-      flatten: !sort || sort === 'date' ? 0 : 1,
+      flatten: sort === 'date' ? 0 : 1,
     };
 
-    return [['releases', `/organizations/${organization.slug}/releases/`, {query}]];
+    const endpoints: ReturnType<AsyncView['getEndpoints']> = [
+      ['releasesWithHealth', `/organizations/${organization.slug}/releases/`, {query}],
+    ];
+
+    // when sorting by date we fetch releases without health and then fetch health lazily
+    if (sort === 'date') {
+      endpoints.push([
+        'releasesWithoutHealth',
+        `/organizations/${organization.slug}/releases/`,
+        {query: {...query, health: 0}},
+      ]);
+    }
+
+    return endpoints;
+  }
+
+  onRequestSuccess({stateKey, data, jqXHR}) {
+    const {remainingRequests} = this.state;
+
+    // make sure there's no withHealth/withoutHealth race condition and set proper loading state
+    if (stateKey === 'releasesWithHealth' || remainingRequests === 1) {
+      this.setState({
+        reloading: false,
+        loading: false,
+        loadingHealth: stateKey === 'releasesWithoutHealth',
+        releases: data,
+        releasesPageLinks: jqXHR?.getResponseHeader('Link'),
+      });
+    }
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(prevProps: Props, prevState: State) {
     super.componentDidUpdate(prevProps, prevState);
 
     if (prevState.releases !== this.state.releases) {
@@ -176,7 +202,7 @@ class ReleasesList extends AsyncView<Props, State> {
 
   renderInnerBody() {
     const {location, selection, organization} = this.props;
-    const {releases, reloading} = this.state;
+    const {releases, reloading, loadingHealth} = this.state;
 
     if (this.shouldShowLoadingIndicator()) {
       return <LoadingIndicator />;
@@ -194,12 +220,14 @@ class ReleasesList extends AsyncView<Props, State> {
         selection={selection}
         reloading={reloading}
         key={`${release.version}-${release.projects[0].slug}`}
+        showHealthPlaceholders={loadingHealth}
       />
     ));
   }
 
   renderBody() {
     const {organization} = this.props;
+    const {releasesPageLinks} = this.state;
 
     return (
       <GlobalSelectionHeader
@@ -229,7 +257,7 @@ class ReleasesList extends AsyncView<Props, State> {
 
             {this.renderInnerBody()}
 
-            <Pagination pageLinks={this.state.releasesPageLinks} />
+            <Pagination pageLinks={releasesPageLinks} />
 
             {!this.shouldShowLoadingIndicator() && (
               <SwitchReleasesButton version="1" orgId={organization.id} />

src/sentry/static/sentry/app/views/releasesV2/list/releaseCard.tsx

@@ -28,9 +28,17 @@ type Props = {
   location: Location;
   selection: GlobalSelection;
   reloading: boolean;
+  showHealthPlaceholders: boolean;
 };
 
-const ReleaseCard = ({release, orgSlug, location, selection, reloading}: Props) => {
+const ReleaseCard = ({
+  release,
+  orgSlug,
+  location,
+  reloading,
+  selection,
+  showHealthPlaceholders,
+}: Props) => {
   const {version, commitCount, lastDeploy, authors, dateCreated} = release;
 
   return (
@@ -112,6 +120,7 @@ const ReleaseCard = ({release, orgSlug, location, selection, reloading}: Props)
         release={release}
         orgSlug={orgSlug}
         location={location}
+        showPlaceholders={showHealthPlaceholders}
         selection={selection}
       />
     </StyledPanel>