index.tsx 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
  1. import {Fragment} from 'react';
  2. import type {RouteComponentProps} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import {addErrorMessage} from 'sentry/actionCreators/indicator';
  5. import Checkbox from 'sentry/components/checkbox';
  6. import Pagination from 'sentry/components/pagination';
  7. import {PanelTable} from 'sentry/components/panels/panelTable';
  8. import SearchBar from 'sentry/components/searchBar';
  9. import {t} from 'sentry/locale';
  10. import ProjectsStore from 'sentry/stores/projectsStore';
  11. import {space} from 'sentry/styles/space';
  12. import type {BuiltinSymbolSource, CustomRepo, DebugFile} from 'sentry/types/debugFiles';
  13. import type {Organization} from 'sentry/types/organization';
  14. import type {Project} from 'sentry/types/project';
  15. import routeTitleGen from 'sentry/utils/routeTitle';
  16. import DeprecatedAsyncView from 'sentry/views/deprecatedAsyncView';
  17. import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
  18. import TextBlock from 'sentry/views/settings/components/text/textBlock';
  19. import PermissionAlert from 'sentry/views/settings/project/permissionAlert';
  20. import DebugFileRow from './debugFileRow';
  21. import Sources from './sources';
  22. type Props = RouteComponentProps<{projectId: string}, {}> & {
  23. organization: Organization;
  24. project: Project;
  25. };
  26. type State = DeprecatedAsyncView['state'] & {
  27. debugFiles: DebugFile[] | null;
  28. project: Project;
  29. showDetails: boolean;
  30. builtinSymbolSources?: BuiltinSymbolSource[] | null;
  31. };
  32. class ProjectDebugSymbols extends DeprecatedAsyncView<Props, State> {
  33. getTitle() {
  34. const {projectId} = this.props.params;
  35. return routeTitleGen(t('Debug Files'), projectId, false);
  36. }
  37. getDefaultState() {
  38. return {
  39. ...super.getDefaultState(),
  40. project: this.props.project,
  41. showDetails: false,
  42. };
  43. }
  44. getEndpoints(): ReturnType<DeprecatedAsyncView['getEndpoints']> {
  45. const {organization, params, location} = this.props;
  46. const {builtinSymbolSources} = this.state || {};
  47. const {query} = location.query;
  48. const endpoints: ReturnType<DeprecatedAsyncView['getEndpoints']> = [
  49. [
  50. 'debugFiles',
  51. `/projects/${organization.slug}/${params.projectId}/files/dsyms/`,
  52. {
  53. query: {query},
  54. },
  55. ],
  56. ];
  57. if (!builtinSymbolSources && organization.features.includes('symbol-sources')) {
  58. endpoints.push([
  59. 'builtinSymbolSources',
  60. `/organizations/${organization.slug}/builtin-symbol-sources/`,
  61. {},
  62. ]);
  63. }
  64. return endpoints;
  65. }
  66. handleDelete = (id: string) => {
  67. const {organization, params} = this.props;
  68. this.setState({
  69. loading: true,
  70. });
  71. this.api.request(
  72. `/projects/${organization.slug}/${params.projectId}/files/dsyms/?id=${id}`,
  73. {
  74. method: 'DELETE',
  75. complete: () => this.fetchData(),
  76. }
  77. );
  78. };
  79. handleSearch = (query: string) => {
  80. const {location, router} = this.props;
  81. router.push({
  82. ...location,
  83. query: {...location.query, cursor: undefined, query},
  84. });
  85. };
  86. async fetchProject() {
  87. const {organization, params} = this.props;
  88. try {
  89. const updatedProject = await this.api.requestPromise(
  90. `/projects/${organization.slug}/${params.projectId}/`
  91. );
  92. ProjectsStore.onUpdateSuccess(updatedProject);
  93. } catch {
  94. addErrorMessage(t('An error occurred while fetching project data'));
  95. }
  96. }
  97. getQuery() {
  98. const {query} = this.props.location.query;
  99. return typeof query === 'string' ? query : undefined;
  100. }
  101. getEmptyMessage() {
  102. if (this.getQuery()) {
  103. return t('There are no debug symbols that match your search.');
  104. }
  105. return t('There are no debug symbols for this project.');
  106. }
  107. renderLoading() {
  108. return this.renderBody();
  109. }
  110. renderDebugFiles() {
  111. const {debugFiles, showDetails} = this.state;
  112. const {organization, params, project} = this.props;
  113. if (!debugFiles?.length) {
  114. return null;
  115. }
  116. return debugFiles.map(debugFile => {
  117. const downloadUrl = `${this.api.baseUrl}/projects/${organization.slug}/${params.projectId}/files/dsyms/?id=${debugFile.id}`;
  118. return (
  119. <DebugFileRow
  120. debugFile={debugFile}
  121. showDetails={showDetails}
  122. downloadUrl={downloadUrl}
  123. downloadRole={organization.debugFilesRole}
  124. onDelete={this.handleDelete}
  125. key={debugFile.id}
  126. orgSlug={organization.slug}
  127. project={project}
  128. />
  129. );
  130. });
  131. }
  132. renderBody() {
  133. const {organization, project, router, location} = this.props;
  134. const {loading, showDetails, builtinSymbolSources, debugFiles, debugFilesPageLinks} =
  135. this.state;
  136. return (
  137. <Fragment>
  138. <SettingsPageHeader title={t('Debug Information Files')} />
  139. <TextBlock>
  140. {t(`
  141. Debug information files are used to convert addresses and minified
  142. function names from native crash reports into function names and
  143. locations.
  144. `)}
  145. </TextBlock>
  146. {organization.features.includes('symbol-sources') && (
  147. <Fragment>
  148. <PermissionAlert project={project} />
  149. <Sources
  150. api={this.api}
  151. location={location}
  152. router={router}
  153. project={project}
  154. organization={organization}
  155. customRepositories={
  156. (project.symbolSources
  157. ? JSON.parse(project.symbolSources)
  158. : []) as CustomRepo[]
  159. }
  160. builtinSymbolSources={project.builtinSymbolSources ?? []}
  161. builtinSymbolSourceOptions={builtinSymbolSources ?? []}
  162. isLoading={loading}
  163. />
  164. </Fragment>
  165. )}
  166. <Wrapper>
  167. <TextBlock noMargin>{t('Uploaded debug information files')}</TextBlock>
  168. <Filters>
  169. <Label>
  170. <Checkbox
  171. checked={showDetails}
  172. onChange={e => {
  173. this.setState({showDetails: (e.target as HTMLInputElement).checked});
  174. }}
  175. />
  176. {t('show details')}
  177. </Label>
  178. <SearchBar
  179. placeholder={t('Search DIFs')}
  180. onSearch={this.handleSearch}
  181. query={this.getQuery()}
  182. />
  183. </Filters>
  184. </Wrapper>
  185. <StyledPanelTable
  186. headers={[
  187. t('Debug ID'),
  188. t('Information'),
  189. <Actions key="actions">{t('Actions')}</Actions>,
  190. ]}
  191. emptyMessage={this.getEmptyMessage()}
  192. isEmpty={debugFiles?.length === 0}
  193. isLoading={loading}
  194. >
  195. {this.renderDebugFiles()}
  196. </StyledPanelTable>
  197. <Pagination pageLinks={debugFilesPageLinks} />
  198. </Fragment>
  199. );
  200. }
  201. }
  202. const StyledPanelTable = styled(PanelTable)`
  203. grid-template-columns: 37% 1fr auto;
  204. `;
  205. const Actions = styled('div')`
  206. text-align: right;
  207. `;
  208. const Wrapper = styled('div')`
  209. display: grid;
  210. grid-template-columns: auto 1fr;
  211. gap: ${space(4)};
  212. align-items: center;
  213. margin-top: ${space(4)};
  214. margin-bottom: ${space(1)};
  215. @media (max-width: ${p => p.theme.breakpoints.small}) {
  216. display: block;
  217. }
  218. `;
  219. const Filters = styled('div')`
  220. display: grid;
  221. grid-template-columns: min-content minmax(200px, 400px);
  222. align-items: center;
  223. justify-content: flex-end;
  224. gap: ${space(2)};
  225. @media (max-width: ${p => p.theme.breakpoints.small}) {
  226. grid-template-columns: min-content 1fr;
  227. }
  228. `;
  229. const Label = styled('label')`
  230. font-weight: normal;
  231. display: flex;
  232. align-items: center;
  233. margin-bottom: 0;
  234. white-space: nowrap;
  235. gap: ${space(1)};
  236. `;
  237. export default ProjectDebugSymbols;