usageTable.tsx 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. import {Component} from 'react';
  2. import styled from '@emotion/styled';
  3. import {updateProjects} from 'sentry/actionCreators/pageFilters';
  4. import {Button, LinkButton} from 'sentry/components/button';
  5. import ButtonBar from 'sentry/components/buttonBar';
  6. import ErrorPanel from 'sentry/components/charts/errorPanel';
  7. import EmptyMessage from 'sentry/components/emptyMessage';
  8. import IdBadge from 'sentry/components/idBadge';
  9. import ExternalLink from 'sentry/components/links/externalLink';
  10. import Link from 'sentry/components/links/link';
  11. import Panel from 'sentry/components/panels/panel';
  12. import {PanelTable} from 'sentry/components/panels/panelTable';
  13. import {IconGraph, IconSettings, IconWarning} from 'sentry/icons';
  14. import {t, tct} from 'sentry/locale';
  15. import {space} from 'sentry/styles/space';
  16. import type {DataCategoryInfo} from 'sentry/types/core';
  17. import type {WithRouterProps} from 'sentry/types/legacyReactRouter';
  18. import type {Project} from 'sentry/types/project';
  19. import withSentryRouter from 'sentry/utils/withSentryRouter';
  20. import {formatUsageWithUnits, getFormatUsageOptions} from './utils';
  21. const DOCS_URL = 'https://docs.sentry.io/product/accounts/membership/#restricting-access';
  22. type Props = {
  23. dataCategory: DataCategoryInfo;
  24. headers: React.ReactNode[];
  25. usageStats: TableStat[];
  26. errors?: Record<string, Error>;
  27. isEmpty?: boolean;
  28. isError?: boolean;
  29. isLoading?: boolean;
  30. showStoredOutcome?: boolean;
  31. } & WithRouterProps<{}, {}>;
  32. export type TableStat = {
  33. accepted: number;
  34. accepted_stored: number;
  35. filtered: number;
  36. invalid: number;
  37. project: Project;
  38. projectLink: string;
  39. projectSettingsLink: string;
  40. rate_limited: number;
  41. total: number;
  42. };
  43. class UsageTable extends Component<Props> {
  44. getErrorMessage = errorMessage => {
  45. if (errorMessage.projectStats.responseJSON.detail === 'No projects available') {
  46. return (
  47. <EmptyMessage
  48. icon={<IconWarning color="gray300" legacySize="48px" />}
  49. title={t(
  50. "You don't have access to any projects, or your organization has no projects."
  51. )}
  52. description={tct('Learn more about [link:Project Access]', {
  53. link: <ExternalLink href={DOCS_URL} />,
  54. })}
  55. />
  56. );
  57. }
  58. return <IconWarning color="gray300" legacySize="48px" />;
  59. };
  60. loadProject(projectId: number) {
  61. updateProjects([projectId], this.props.router, {
  62. save: true,
  63. environments: [], // Clear environments when switching projects
  64. });
  65. window.scrollTo({top: 0, left: 0, behavior: 'smooth'});
  66. }
  67. renderTableRow(stat: TableStat & {project: Project}) {
  68. const {dataCategory, showStoredOutcome} = this.props;
  69. const {project, total, accepted, accepted_stored, filtered, invalid, rate_limited} =
  70. stat;
  71. return [
  72. <CellProject key={0}>
  73. <Link to={stat.projectLink}>
  74. <StyledIdBadge
  75. avatarSize={16}
  76. disableLink
  77. hideOverflow
  78. project={project}
  79. displayName={project.slug}
  80. />
  81. </Link>
  82. </CellProject>,
  83. <CellStat key={1}>
  84. {formatUsageWithUnits(
  85. total,
  86. dataCategory.plural,
  87. getFormatUsageOptions(dataCategory.plural)
  88. )}
  89. </CellStat>,
  90. <CellStat key={2}>
  91. {formatUsageWithUnits(
  92. accepted,
  93. dataCategory.plural,
  94. getFormatUsageOptions(dataCategory.plural)
  95. )}
  96. {showStoredOutcome && (
  97. <SubText>
  98. {`(${formatUsageWithUnits(
  99. accepted_stored,
  100. dataCategory.plural,
  101. getFormatUsageOptions(dataCategory.plural)
  102. )})`}
  103. </SubText>
  104. )}
  105. </CellStat>,
  106. <CellStat key={3}>
  107. {formatUsageWithUnits(
  108. filtered,
  109. dataCategory.plural,
  110. getFormatUsageOptions(dataCategory.plural)
  111. )}
  112. </CellStat>,
  113. <CellStat key={4}>
  114. {formatUsageWithUnits(
  115. rate_limited,
  116. dataCategory.plural,
  117. getFormatUsageOptions(dataCategory.plural)
  118. )}
  119. </CellStat>,
  120. <CellStat key={5}>
  121. {formatUsageWithUnits(
  122. invalid,
  123. dataCategory.plural,
  124. getFormatUsageOptions(dataCategory.plural)
  125. )}
  126. </CellStat>,
  127. <CellStat key={6}>
  128. <ButtonBar gap={1}>
  129. <Button
  130. icon={<IconGraph type="bar" />}
  131. title="Go to project level stats"
  132. data-test-id={project.slug}
  133. size="xs"
  134. onClick={() => {
  135. this.loadProject(parseInt(stat.project.id, 10));
  136. }}
  137. >
  138. {t('View Stats')}
  139. </Button>
  140. <LinkButton
  141. icon={<IconSettings />}
  142. size="xs"
  143. aria-label={t('Project Settings')}
  144. title={t('Go to project settings')}
  145. to={stat.projectSettingsLink}
  146. />
  147. </ButtonBar>
  148. </CellStat>,
  149. ];
  150. }
  151. render() {
  152. const {isEmpty, isLoading, isError, errors, headers, usageStats} = this.props;
  153. if (isError) {
  154. return (
  155. <Panel>
  156. <ErrorPanel height="256px">{this.getErrorMessage(errors)}</ErrorPanel>
  157. </Panel>
  158. );
  159. }
  160. return (
  161. <StyledPanelTable isLoading={isLoading} isEmpty={isEmpty} headers={headers}>
  162. {usageStats.map(s => this.renderTableRow(s))}
  163. </StyledPanelTable>
  164. );
  165. }
  166. }
  167. export default withSentryRouter(UsageTable);
  168. const StyledPanelTable = styled(PanelTable)`
  169. grid-template-columns: repeat(7, auto);
  170. @media (min-width: ${p => p.theme.breakpoints.small}) {
  171. grid-template-columns: 1fr repeat(6, minmax(0, auto));
  172. }
  173. `;
  174. export const CellStat = styled('div')`
  175. display: flex;
  176. align-items: center;
  177. font-variant-numeric: tabular-nums;
  178. justify-content: right;
  179. `;
  180. export const CellProject = styled(CellStat)`
  181. justify-content: left;
  182. `;
  183. const StyledIdBadge = styled(IdBadge)`
  184. overflow: hidden;
  185. white-space: nowrap;
  186. flex-shrink: 1;
  187. `;
  188. const SubText = styled('span')`
  189. color: ${p => p.theme.subText};
  190. margin-left: ${space(0.5)};
  191. `;