index.tsx 7.5 KB

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