projectDetail.tsx 13 KB

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