issues.tsx 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. import {Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import * as Layout from 'sentry/components/layouts/thirds';
  4. import LoadingError from 'sentry/components/loadingError';
  5. import LoadingIndicator from 'sentry/components/loadingIndicator';
  6. import NoProjectMessage from 'sentry/components/noProjectMessage';
  7. import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
  8. import {t} from 'sentry/locale';
  9. import type {RouteComponentProps} from 'sentry/types/legacyReactRouter';
  10. import type {TeamWithProjects} from 'sentry/types/project';
  11. import localStorage from 'sentry/utils/localStorage';
  12. import useRouteAnalyticsEventNames from 'sentry/utils/routeAnalytics/useRouteAnalyticsEventNames';
  13. import useOrganization from 'sentry/utils/useOrganization';
  14. import {useUserTeams} from 'sentry/utils/useUserTeams';
  15. import Header from '../header';
  16. import TeamStatsControls from './controls';
  17. import DescriptionCard from './descriptionCard';
  18. import TeamIssuesAge from './teamIssuesAge';
  19. import TeamIssuesBreakdown from './teamIssuesBreakdown';
  20. import TeamResolutionTime from './teamResolutionTime';
  21. import {TeamUnresolvedIssues} from './teamUnresolvedIssues';
  22. import {dataDatetime} from './utils';
  23. type Props = RouteComponentProps<{}, {}>;
  24. function TeamStatsIssues({location, router}: Props) {
  25. const organization = useOrganization();
  26. const {teams, isLoading, isError} = useUserTeams();
  27. useRouteAnalyticsEventNames('team_insights.viewed', 'Team Insights: Viewed');
  28. const query = location?.query ?? {};
  29. const localStorageKey = `teamInsightsSelectedTeamId:${organization.slug}`;
  30. let localTeamId: string | null | undefined =
  31. query.team ?? localStorage.getItem(localStorageKey);
  32. if (localTeamId && !teams.find(team => team.id === localTeamId)) {
  33. localTeamId = null;
  34. }
  35. const currentTeamId = localTeamId ?? teams[0]?.id;
  36. const currentTeam = teams.find(team => team.id === currentTeamId) as
  37. | TeamWithProjects
  38. | undefined;
  39. const projects = currentTeam?.projects ?? [];
  40. const environment = query.environment;
  41. const {period, start, end, utc} = dataDatetime(query);
  42. if (teams.length === 0) {
  43. return (
  44. <NoProjectMessage organization={organization} superuserNeedsToBeProjectMember />
  45. );
  46. }
  47. if (isError) {
  48. return <LoadingError />;
  49. }
  50. return (
  51. <Fragment>
  52. <SentryDocumentTitle title={t('Team Issues')} orgSlug={organization.slug} />
  53. <Header organization={organization} activeTab="issues" />
  54. <Body>
  55. <TeamStatsControls
  56. showEnvironment
  57. location={location}
  58. router={router}
  59. currentTeam={currentTeam}
  60. currentEnvironment={environment}
  61. />
  62. {isLoading && <LoadingIndicator />}
  63. {!isLoading && (
  64. <Layout.Main fullWidth>
  65. <DescriptionCard
  66. title={t('All Unresolved Issues')}
  67. description={t(
  68. 'This includes New and Returning issues in the last 7 days as well as those that haven’t been resolved or archived in the past.'
  69. )}
  70. >
  71. <TeamUnresolvedIssues
  72. projects={projects}
  73. organization={organization}
  74. teamSlug={currentTeam!.slug}
  75. environment={environment}
  76. period={period}
  77. start={start}
  78. end={end}
  79. utc={utc}
  80. />
  81. </DescriptionCard>
  82. <DescriptionCard
  83. title={t('New and Returning Issues')}
  84. description={t(
  85. 'The new, regressed, and escalating issues that were assigned to your team.'
  86. )}
  87. >
  88. <TeamIssuesBreakdown
  89. organization={organization}
  90. projects={projects}
  91. teamSlug={currentTeam!.slug}
  92. environment={environment}
  93. period={period}
  94. start={start?.toString()}
  95. end={end?.toString()}
  96. statuses={['new', 'regressed', 'escalating']}
  97. />
  98. </DescriptionCard>
  99. <DescriptionCard
  100. title={t('Issues Triaged')}
  101. description={t(
  102. 'How many new and returning issues were reviewed by your team each week. Reviewing an issue includes marking as reviewed, resolving, assigning to another team, or deleting.'
  103. )}
  104. >
  105. <TeamIssuesBreakdown
  106. organization={organization}
  107. projects={projects}
  108. teamSlug={currentTeam!.slug}
  109. environment={environment}
  110. period={period}
  111. start={start?.toString()}
  112. end={end?.toString()}
  113. statuses={[
  114. 'resolved',
  115. 'deleted',
  116. 'archived_until_escalating',
  117. 'archived_forever',
  118. 'archived_until_condition_met',
  119. ]}
  120. />
  121. </DescriptionCard>
  122. <DescriptionCard
  123. title={t('Age of Unresolved Issues')}
  124. description={t('How long ago since unresolved issues were first created.')}
  125. >
  126. <TeamIssuesAge organization={organization} teamSlug={currentTeam!.slug} />
  127. </DescriptionCard>
  128. <DescriptionCard
  129. title={t('Time to Resolution')}
  130. description={t(
  131. `The mean time it took for issues to be resolved by your team.`
  132. )}
  133. >
  134. <TeamResolutionTime
  135. organization={organization}
  136. environment={environment}
  137. teamSlug={currentTeam!.slug}
  138. period={period}
  139. start={start?.toString()}
  140. end={end?.toString()}
  141. />
  142. </DescriptionCard>
  143. </Layout.Main>
  144. )}
  145. </Body>
  146. </Fragment>
  147. );
  148. }
  149. export default TeamStatsIssues;
  150. const Body = styled(Layout.Body)`
  151. @media (min-width: ${p => p.theme.breakpoints.medium}) {
  152. display: block;
  153. }
  154. `;