123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471 |
- import {Component, Fragment} from 'react';
- import styled from '@emotion/styled';
- import round from 'lodash/round';
- import {loadStatsForProject} from 'sentry/actionCreators/projects';
- import type {Client} from 'sentry/api';
- import {LinkButton} from 'sentry/components/button';
- import IdBadge from 'sentry/components/idBadge';
- import Link from 'sentry/components/links/link';
- import Panel from 'sentry/components/panels/panel';
- import Placeholder from 'sentry/components/placeholder';
- import BookmarkStar from 'sentry/components/projects/bookmarkStar';
- import QuestionTooltip from 'sentry/components/questionTooltip';
- import ScoreCard, {
- Score,
- ScorePanel,
- ScoreWrapper,
- Title,
- Trend,
- } from 'sentry/components/scoreCard';
- import {IconArrow, IconSettings} from 'sentry/icons';
- import {t} from 'sentry/locale';
- import ProjectsStatsStore from 'sentry/stores/projectsStatsStore';
- import {space} from 'sentry/styles/space';
- import type {Organization} from 'sentry/types/organization';
- import type {Project} from 'sentry/types/project';
- import {defined} from 'sentry/utils';
- import {DiscoverDatasets} from 'sentry/utils/discover/types';
- import {formatAbbreviatedNumber} from 'sentry/utils/formatters';
- import withApi from 'sentry/utils/withApi';
- import withOrganization from 'sentry/utils/withOrganization';
- import {getPerformanceBaseUrl} from 'sentry/views/performance/utils';
- import MissingReleasesButtons from 'sentry/views/projectDetail/missingFeatureButtons/missingReleasesButtons';
- import {
- CRASH_FREE_DECIMAL_THRESHOLD,
- displayCrashFreePercent,
- } from 'sentry/views/releases/utils';
- import Chart from './chart';
- import Deploys, {DeployRows, GetStarted, TextOverflow} from './deploys';
- type Props = {
- api: Client;
- hasProjectAccess: boolean;
- organization: Organization;
- project: Project;
- };
- class ProjectCard extends Component<Props> {
- componentDidMount() {
- const {organization, project, api} = this.props;
-
- loadStatsForProject(api, project.id, {
- orgId: organization.slug,
- projectId: project.id,
- query: {
- transactionStats: this.hasPerformance ? '1' : undefined,
- dataset: DiscoverDatasets.METRICS_ENHANCED,
- sessionStats: '1',
- },
- });
- }
- get hasPerformance() {
- return this.props.organization.features.includes('performance-view');
- }
- get crashFreeTrend() {
- const {currentCrashFreeRate, previousCrashFreeRate} =
- this.props.project.sessionStats || {};
- if (!defined(currentCrashFreeRate) || !defined(previousCrashFreeRate)) {
- return undefined;
- }
- return round(
- currentCrashFreeRate - previousCrashFreeRate,
- currentCrashFreeRate > CRASH_FREE_DECIMAL_THRESHOLD ? 3 : 0
- );
- }
- renderMissingFeatureCard() {
- const {organization, project} = this.props;
- return (
- <ScoreCard
- title={t('Crash Free Sessions')}
- score={
- <MissingReleasesButtons
- organization={organization}
- health
- platform={project.platform}
- />
- }
- />
- );
- }
- renderTrend() {
- const {currentCrashFreeRate} = this.props.project.sessionStats || {};
- if (!defined(currentCrashFreeRate) || !defined(this.crashFreeTrend)) {
- return null;
- }
- return (
- <div>
- {this.crashFreeTrend >= 0 ? (
- <IconArrow direction="up" size="xs" />
- ) : (
- <IconArrow direction="down" size="xs" />
- )}
- {`${formatAbbreviatedNumber(Math.abs(this.crashFreeTrend))}\u0025`}
- </div>
- );
- }
- render() {
- const {organization, project, hasProjectAccess} = this.props;
- const {stats, slug, transactionStats, sessionStats} = project;
- const {hasHealthData, currentCrashFreeRate} = sessionStats || {};
- const totalErrors = stats?.reduce((sum, [_, value]) => sum + value, 0) ?? 0;
- const totalTransactions =
- transactionStats?.reduce((sum, [_, value]) => sum + value, 0) ?? 0;
- const zeroTransactions = totalTransactions === 0;
- const hasFirstEvent = Boolean(project.firstEvent || project.firstTransactionEvent);
- return (
- <div data-test-id={slug}>
- <StyledProjectCard>
- <CardHeader>
- <HeaderRow>
- <StyledIdBadge
- project={project}
- avatarSize={32}
- hideOverflow
- disableLink={!hasProjectAccess}
- />
- <SettingsButton
- borderless
- size="zero"
- icon={<IconSettings color="subText" />}
- title={t('Settings')}
- aria-label={t('Settings')}
- to={`/settings/${organization.slug}/projects/${slug}/`}
- />
- <StyledBookmarkStar organization={organization} project={project} />
- </HeaderRow>
- <SummaryLinks data-test-id="summary-links">
- {stats ? (
- <Fragment>
- <Link
- data-test-id="project-errors"
- to={`/organizations/${organization.slug}/issues/?project=${project.id}`}
- >
- {t('Errors: %s', formatAbbreviatedNumber(totalErrors))}
- </Link>
- {this.hasPerformance && (
- <Fragment>
- <em>|</em>
- <TransactionsLink
- data-test-id="project-transactions"
- to={`${getPerformanceBaseUrl(organization.slug)}/?project=${project.id}`}
- >
- {t(
- 'Transactions: %s',
- formatAbbreviatedNumber(totalTransactions)
- )}
- {zeroTransactions && (
- <QuestionTooltip
- title={t(
- 'Click here to learn more about performance monitoring'
- )}
- position="top"
- size="xs"
- />
- )}
- </TransactionsLink>
- </Fragment>
- )}
- </Fragment>
- ) : (
- <SummaryLinkPlaceholder />
- )}
- </SummaryLinks>
- </CardHeader>
- <ChartContainer data-test-id="chart-container">
- {stats ? (
- <Chart
- firstEvent={hasFirstEvent}
- stats={stats}
- transactionStats={transactionStats}
- />
- ) : (
- <Placeholder height="150px" />
- )}
- </ChartContainer>
- <FooterWrapper>
- <ScoreCardWrapper>
- {!stats ? (
- <Fragment>
- <ReleaseTitle>{t('Crash Free Sessions')}</ReleaseTitle>
- <FooterPlaceholder />
- </Fragment>
- ) : hasHealthData ? (
- <ScoreCard
- title={t('Crash Free Sessions')}
- score={
- defined(currentCrashFreeRate)
- ? displayCrashFreePercent(currentCrashFreeRate)
- : '\u2014'
- }
- trend={this.renderTrend()}
- trendStatus={
- this.crashFreeTrend
- ? this.crashFreeTrend > 0
- ? 'good'
- : 'bad'
- : undefined
- }
- />
- ) : (
- this.renderMissingFeatureCard()
- )}
- </ScoreCardWrapper>
- <DeploysWrapper>
- <ReleaseTitle>{t('Latest Deploys')}</ReleaseTitle>
- {stats ? <Deploys project={project} shorten /> : <FooterPlaceholder />}
- </DeploysWrapper>
- </FooterWrapper>
- </StyledProjectCard>
- </div>
- );
- }
- }
- type ContainerProps = {
- api: Client;
- hasProjectAccess: boolean;
- organization: Organization;
- project: Project;
- };
- type ContainerState = {
- projectDetails: Project | null;
- };
- class ProjectCardContainer extends Component<ContainerProps, ContainerState> {
- state = this.getInitialState();
- getInitialState(): ContainerState {
- const {project} = this.props;
- const initialState = ProjectsStatsStore.getInitialState() || {};
- return {
- projectDetails: initialState[project.slug] || null,
- };
- }
- componentWillUnmount() {
- this.listeners.forEach(listener => {
- if (typeof listener === 'function') {
- listener();
- }
- });
- }
- listeners = [
- ProjectsStatsStore.listen(itemsBySlug => {
- this.onProjectStatsStoreUpdate(itemsBySlug);
- }, undefined),
- ];
- onProjectStatsStoreUpdate(itemsBySlug: (typeof ProjectsStatsStore)['itemsBySlug']) {
- const {project} = this.props;
-
- if (!itemsBySlug[project.slug]) {
- return;
- }
- if (itemsBySlug[project.slug] === this.state.projectDetails) {
- return;
- }
- this.setState({
- projectDetails: itemsBySlug[project.slug],
- });
- }
- render() {
- const {project, ...props} = this.props;
- const {projectDetails} = this.state;
- return (
- <ProjectCard
- {...props}
- project={{
- ...project,
- ...(projectDetails || {}),
- }}
- />
- );
- }
- }
- const ChartContainer = styled('div')`
- position: relative;
- background: ${p => p.theme.backgroundSecondary};
- `;
- const CardHeader = styled('div')`
- margin: ${space(2)} 13px;
- height: 32px;
- `;
- const SettingsButton = styled(LinkButton)`
- margin-left: auto;
- margin-top: -${space(0.5)};
- padding: 3px;
- border-radius: 50%;
- width: 24px;
- height: 24px;
- `;
- const StyledBookmarkStar = styled(BookmarkStar)`
- padding: 0;
- `;
- const HeaderRow = styled('div')`
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
- gap: 0 ${space(0.5)};
- ${p => p.theme.text.cardTitle};
- color: ${p => p.theme.headingColor};
- `;
- const StyledProjectCard = styled(Panel)`
- min-height: 330px;
- margin: 0;
- `;
- const FooterWrapper = styled('div')`
- display: grid;
- grid-template-columns: 1fr 1fr;
- div {
- border: none;
- box-shadow: none;
- font-size: ${p => p.theme.fontSizeMedium};
- padding: 0;
- }
- `;
- const ScoreCardWrapper = styled('div')`
- margin: ${space(2)} 0 0 ${space(2)};
- ${ScorePanel} {
- min-height: auto;
- }
- ${Title} {
- color: ${p => p.theme.gray300};
- }
- ${ScoreWrapper} {
- flex-direction: column;
- align-items: flex-start;
- }
- ${Score} {
- font-size: 28px;
- }
- ${Trend} {
- margin-left: 0;
- margin-top: ${space(0.5)};
- }
- `;
- const DeploysWrapper = styled('div')`
- margin-top: ${space(2)};
- ${GetStarted} {
- display: block;
- height: 100%;
- }
- ${TextOverflow} {
- display: grid;
- grid-template-columns: 1fr 1fr;
- grid-column-gap: ${space(1)};
- div {
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- }
- a {
- display: grid;
- }
- }
- ${DeployRows} {
- grid-template-columns: 2fr auto;
- margin-right: ${space(2)};
- height: auto;
- svg {
- display: none;
- }
- }
- `;
- const ReleaseTitle = styled('span')`
- color: ${p => p.theme.gray300};
- font-weight: ${p => p.theme.fontWeightBold};
- `;
- const StyledIdBadge = styled(IdBadge)`
- overflow: hidden;
- white-space: nowrap;
- flex-shrink: 1;
- & div {
- align-items: flex-start;
- }
- & span {
- padding: 0;
- position: relative;
- top: -1px;
- }
- `;
- const SummaryLinks = styled('div')`
- display: flex;
- position: relative;
- top: -${space(2)};
- align-items: center;
- font-weight: ${p => p.theme.fontWeightNormal};
- color: ${p => p.theme.subText};
- font-size: ${p => p.theme.fontSizeSmall};
- /* Need to offset for the project icon and margin */
- margin-left: 40px;
- a {
- color: ${p => p.theme.subText};
- :hover {
- color: ${p => p.theme.linkHoverColor};
- }
- }
- em {
- font-style: normal;
- margin: 0 ${space(0.5)};
- }
- `;
- const TransactionsLink = styled(Link)`
- display: flex;
- align-items: center;
- justify-content: space-between;
- > span {
- margin-left: ${space(0.5)};
- }
- `;
- const SummaryLinkPlaceholder = styled(Placeholder)`
- height: 15px;
- width: 180px;
- margin-top: ${space(0.75)};
- margin-bottom: ${space(0.5)};
- `;
- const FooterPlaceholder = styled(Placeholder)`
- height: 40px;
- width: auto;
- margin-right: ${space(2)};
- `;
- export {ProjectCard};
- export default withOrganization(withApi(ProjectCardContainer));
|