projectDetail.tsx 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
  1. import {Fragment} from 'react';
  2. import {RouteComponentProps} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import pick from 'lodash/pick';
  5. import {fetchOrganizationDetails} from 'sentry/actionCreators/organization';
  6. import {updateProjects} from 'sentry/actionCreators/pageFilters';
  7. import {fetchTagValues} from 'sentry/actionCreators/tags';
  8. import Feature from 'sentry/components/acl/feature';
  9. import Breadcrumbs from 'sentry/components/breadcrumbs';
  10. import {Button} from 'sentry/components/button';
  11. import ButtonBar from 'sentry/components/buttonBar';
  12. import CreateAlertButton from 'sentry/components/createAlertButton';
  13. import GlobalAppStoreConnectUpdateAlert from 'sentry/components/globalAppStoreConnectUpdateAlert';
  14. import GlobalEventProcessingAlert from 'sentry/components/globalEventProcessingAlert';
  15. import {GlobalSdkUpdateAlert} from 'sentry/components/globalSdkUpdateAlert';
  16. import IdBadge from 'sentry/components/idBadge';
  17. import * as Layout from 'sentry/components/layouts/thirds';
  18. import LoadingError from 'sentry/components/loadingError';
  19. import NoProjectMessage from 'sentry/components/noProjectMessage';
  20. import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
  21. import MissingProjectMembership from 'sentry/components/projects/missingProjectMembership';
  22. import {DEFAULT_RELATIVE_PERIODS} from 'sentry/constants';
  23. import {IconSettings} from 'sentry/icons';
  24. import {t} from 'sentry/locale';
  25. import {space} from 'sentry/styles/space';
  26. import {Organization, PageFilters, Project} from 'sentry/types';
  27. import {defined} from 'sentry/utils';
  28. import routeTitleGen from 'sentry/utils/routeTitle';
  29. import {normalizeUrl} from 'sentry/utils/withDomainRequired';
  30. import withPageFilters from 'sentry/utils/withPageFilters';
  31. import withProjects from 'sentry/utils/withProjects';
  32. import AsyncView from 'sentry/views/asyncView';
  33. import {ERRORS_BASIC_CHART_PERIODS} from './charts/projectErrorsBasicChart';
  34. import ProjectScoreCards from './projectScoreCards/projectScoreCards';
  35. import ProjectCharts from './projectCharts';
  36. import ProjectFilters from './projectFilters';
  37. import ProjectIssues from './projectIssues';
  38. import ProjectLatestAlerts from './projectLatestAlerts';
  39. import ProjectLatestReleases from './projectLatestReleases';
  40. import ProjectQuickLinks from './projectQuickLinks';
  41. import ProjectTeamAccess from './projectTeamAccess';
  42. type RouteParams = {
  43. orgId: string;
  44. projectId: string;
  45. };
  46. type Props = RouteComponentProps<RouteParams, {}> & {
  47. loadingProjects: boolean;
  48. organization: Organization;
  49. projects: Project[];
  50. selection: PageFilters;
  51. };
  52. type State = AsyncView['state'];
  53. class ProjectDetail extends AsyncView<Props, State> {
  54. getTitle() {
  55. const {params} = this.props;
  56. return routeTitleGen(t('Project %s', params.projectId), params.orgId, false);
  57. }
  58. componentDidMount() {
  59. this.syncProjectWithSlug();
  60. }
  61. componentDidUpdate() {
  62. this.syncProjectWithSlug();
  63. }
  64. get project() {
  65. const {projects, params} = this.props;
  66. return projects.find(p => p.slug === params.projectId);
  67. }
  68. handleProjectChange = (selectedProjects: number[]) => {
  69. const {projects, router, location, organization} = this.props;
  70. const newlySelectedProject = projects.find(p => p.id === String(selectedProjects[0]));
  71. // if we change project in global header, we need to sync the project slug in the URL
  72. if (newlySelectedProject?.id) {
  73. router.replace(
  74. normalizeUrl({
  75. pathname: `/organizations/${organization.slug}/projects/${newlySelectedProject.slug}/`,
  76. query: {
  77. ...location.query,
  78. project: newlySelectedProject.id,
  79. environment: undefined,
  80. },
  81. })
  82. );
  83. }
  84. };
  85. handleSearch = (query: string) => {
  86. const {router, location} = this.props;
  87. router.replace({
  88. pathname: location.pathname,
  89. query: {
  90. ...location.query,
  91. query,
  92. },
  93. });
  94. };
  95. tagValueLoader = (key: string, search: string) => {
  96. const {location, organization} = this.props;
  97. const {project: projectId} = location.query;
  98. return fetchTagValues({
  99. api: this.api,
  100. orgSlug: organization.slug,
  101. tagKey: key,
  102. search,
  103. projectIds: projectId ? [projectId] : undefined,
  104. endpointParams: location.query,
  105. });
  106. };
  107. syncProjectWithSlug() {
  108. const {router, location} = this.props;
  109. const projectId = this.project?.id;
  110. if (projectId && projectId !== location.query.project) {
  111. // if someone visits /organizations/sentry/projects/javascript/ (without ?project=XXX) we need to update URL and globalSelection with the right project ID
  112. updateProjects([Number(projectId)], router);
  113. }
  114. }
  115. onRetryProjects = () => {
  116. const {params} = this.props;
  117. fetchOrganizationDetails(this.api, params.orgId, true, false);
  118. };
  119. isProjectStabilized() {
  120. const {selection, location} = this.props;
  121. const projectId = this.project?.id;
  122. return (
  123. defined(projectId) &&
  124. projectId === location.query.project &&
  125. projectId === String(selection.projects[0])
  126. );
  127. }
  128. renderLoading() {
  129. return this.renderBody();
  130. }
  131. renderNoAccess(project: Project) {
  132. const {organization} = this.props;
  133. return (
  134. <Layout.Page>
  135. <MissingProjectMembership organization={organization} project={project} />
  136. </Layout.Page>
  137. );
  138. }
  139. renderProjectNotFound() {
  140. return (
  141. <Layout.Page withPadding>
  142. <LoadingError
  143. message={t('This project could not be found.')}
  144. onRetry={this.onRetryProjects}
  145. />
  146. </Layout.Page>
  147. );
  148. }
  149. renderBody() {
  150. const {organization, params, location, router, loadingProjects, selection} =
  151. this.props;
  152. const project = this.project;
  153. const {query} = location.query;
  154. const hasPerformance = organization.features.includes('performance-view');
  155. const hasDiscover = organization.features.includes('discover-basic');
  156. const hasTransactions = hasPerformance && project?.firstTransactionEvent;
  157. const isProjectStabilized = this.isProjectStabilized();
  158. const visibleCharts = ['chart1'];
  159. const hasSessions = project?.hasSessions ?? null;
  160. const hasOnlyBasicChart = !hasPerformance && !hasDiscover && !hasSessions;
  161. if (hasTransactions || hasSessions) {
  162. visibleCharts.push('chart2');
  163. }
  164. if (!loadingProjects && !project) {
  165. return this.renderProjectNotFound();
  166. }
  167. if (!loadingProjects && project && !project.hasAccess) {
  168. return this.renderNoAccess(project);
  169. }
  170. return (
  171. <PageFiltersContainer skipLoadLastUsed showAbsolute={!hasOnlyBasicChart}>
  172. <Layout.Page>
  173. <NoProjectMessage organization={organization}>
  174. <Layout.Header>
  175. <Layout.HeaderContent>
  176. <Breadcrumbs
  177. crumbs={[
  178. {
  179. to: `/organizations/${params.orgId}/projects/`,
  180. label: t('Projects'),
  181. },
  182. {label: t('Project Details')},
  183. ]}
  184. />
  185. <Layout.Title>
  186. {project ? (
  187. <IdBadge
  188. project={project}
  189. avatarSize={28}
  190. hideOverflow="100%"
  191. disableLink
  192. hideName
  193. />
  194. ) : null}
  195. {project?.slug}
  196. </Layout.Title>
  197. </Layout.HeaderContent>
  198. <Layout.HeaderActions>
  199. <ButtonBar gap={1}>
  200. <Button
  201. size="sm"
  202. to={
  203. // if we are still fetching project, we can use project slug to build issue stream url and let the redirect handle it
  204. project?.id
  205. ? `/organizations/${params.orgId}/issues/?project=${project.id}`
  206. : `/${params.orgId}/${params.projectId}`
  207. }
  208. >
  209. {t('View All Issues')}
  210. </Button>
  211. <CreateAlertButton
  212. size="sm"
  213. organization={organization}
  214. projectSlug={params.projectId}
  215. aria-label={t('Create Alert')}
  216. />
  217. <Button
  218. size="sm"
  219. icon={<IconSettings />}
  220. aria-label={t('Settings')}
  221. to={`/settings/${params.orgId}/projects/${params.projectId}/`}
  222. />
  223. </ButtonBar>
  224. </Layout.HeaderActions>
  225. </Layout.Header>
  226. <Layout.Body noRowGap>
  227. {project && <StyledGlobalEventProcessingAlert projects={[project]} />}
  228. <Layout.Main fullWidth>
  229. <StyledSdkUpdatesAlert />
  230. </Layout.Main>
  231. <StyledGlobalAppStoreConnectUpdateAlert
  232. project={project}
  233. organization={organization}
  234. />
  235. <Layout.Main>
  236. <ProjectFiltersWrapper>
  237. <ProjectFilters
  238. query={query}
  239. onSearch={this.handleSearch}
  240. relativeDateOptions={
  241. hasOnlyBasicChart
  242. ? pick(DEFAULT_RELATIVE_PERIODS, ERRORS_BASIC_CHART_PERIODS)
  243. : undefined
  244. }
  245. tagValueLoader={this.tagValueLoader}
  246. />
  247. </ProjectFiltersWrapper>
  248. <ProjectScoreCards
  249. organization={organization}
  250. isProjectStabilized={isProjectStabilized}
  251. selection={selection}
  252. hasSessions={hasSessions}
  253. hasTransactions={hasTransactions}
  254. query={query}
  255. project={project}
  256. location={location}
  257. />
  258. {isProjectStabilized && (
  259. <Fragment>
  260. {visibleCharts.map((id, index) => (
  261. <ProjectCharts
  262. location={location}
  263. organization={organization}
  264. router={router}
  265. key={`project-charts-${id}`}
  266. chartId={id}
  267. chartIndex={index}
  268. projectId={project?.id}
  269. hasSessions={hasSessions}
  270. hasTransactions={!!hasTransactions}
  271. visibleCharts={visibleCharts}
  272. query={query}
  273. project={project}
  274. />
  275. ))}
  276. <ProjectIssues
  277. organization={organization}
  278. location={location}
  279. projectId={selection.projects[0]}
  280. query={query}
  281. api={this.api}
  282. />
  283. </Fragment>
  284. )}
  285. </Layout.Main>
  286. <Layout.Side>
  287. <ProjectTeamAccess organization={organization} project={project} />
  288. <Feature features={['incidents']} organization={organization}>
  289. <ProjectLatestAlerts
  290. organization={organization}
  291. projectSlug={params.projectId}
  292. location={location}
  293. isProjectStabilized={isProjectStabilized}
  294. />
  295. </Feature>
  296. <ProjectLatestReleases
  297. organization={organization}
  298. projectSlug={params.projectId}
  299. projectId={project?.id}
  300. location={location}
  301. isProjectStabilized={isProjectStabilized}
  302. />
  303. <ProjectQuickLinks
  304. organization={organization}
  305. project={project}
  306. location={location}
  307. />
  308. </Layout.Side>
  309. </Layout.Body>
  310. </NoProjectMessage>
  311. </Layout.Page>
  312. </PageFiltersContainer>
  313. );
  314. }
  315. }
  316. const ProjectFiltersWrapper = styled('div')`
  317. margin-bottom: ${space(2)};
  318. `;
  319. const StyledSdkUpdatesAlert = styled(GlobalSdkUpdateAlert)`
  320. @media (min-width: ${p => p.theme.breakpoints.medium}) {
  321. margin-bottom: ${space(2)};
  322. }
  323. `;
  324. const StyledGlobalEventProcessingAlert = styled(GlobalEventProcessingAlert)`
  325. @media (min-width: ${p => p.theme.breakpoints.medium}) {
  326. margin-bottom: 0;
  327. }
  328. `;
  329. const StyledGlobalAppStoreConnectUpdateAlert = styled(GlobalAppStoreConnectUpdateAlert)`
  330. @media (min-width: ${p => p.theme.breakpoints.medium}) {
  331. margin-bottom: 0;
  332. }
  333. `;
  334. StyledGlobalAppStoreConnectUpdateAlert.defaultProps = {
  335. Wrapper: p => <Layout.Main fullWidth {...p} />,
  336. };
  337. export default withProjects(withPageFilters(ProjectDetail));