keyStats.tsx 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. import {Component} from 'react';
  2. import {RouteComponentProps} from 'react-router';
  3. import {Client} from 'sentry/api';
  4. import MiniBarChart from 'sentry/components/charts/miniBarChart';
  5. import EmptyMessage from 'sentry/components/emptyMessage';
  6. import LoadingError from 'sentry/components/loadingError';
  7. import {Panel, PanelBody, PanelHeader} from 'sentry/components/panels';
  8. import Placeholder from 'sentry/components/placeholder';
  9. import {t} from 'sentry/locale';
  10. import {Organization} from 'sentry/types';
  11. import {Series} from 'sentry/types/echarts';
  12. import theme from 'sentry/utils/theme';
  13. type Props = {
  14. api: Client;
  15. organization: Organization;
  16. } & Pick<
  17. RouteComponentProps<
  18. {
  19. keyId: string;
  20. projectId: string;
  21. },
  22. {}
  23. >,
  24. 'params'
  25. >;
  26. type State = {
  27. emptyStats: boolean;
  28. error: boolean;
  29. loading: boolean;
  30. series: Series[];
  31. since: number;
  32. until: number;
  33. };
  34. const getInitialState = (): State => {
  35. const until = Math.floor(new Date().getTime() / 1000);
  36. return {
  37. since: until - 3600 * 24 * 30,
  38. until,
  39. loading: true,
  40. error: false,
  41. series: [],
  42. emptyStats: false,
  43. };
  44. };
  45. class KeyStats extends Component<Props, State> {
  46. state = getInitialState();
  47. componentDidMount() {
  48. this.fetchData();
  49. }
  50. fetchData = () => {
  51. const {organization} = this.props;
  52. const {keyId, projectId} = this.props.params;
  53. this.props.api.request(
  54. `/projects/${organization.slug}/${projectId}/keys/${keyId}/stats/`,
  55. {
  56. query: {
  57. since: this.state.since,
  58. until: this.state.until,
  59. resolution: '1d',
  60. },
  61. success: data => {
  62. let emptyStats = true;
  63. const dropped: Series['data'] = [];
  64. const accepted: Series['data'] = [];
  65. data.forEach(p => {
  66. if (p.total) {
  67. emptyStats = false;
  68. }
  69. dropped.push({name: p.ts * 1000, value: p.dropped});
  70. accepted.push({name: p.ts * 1000, value: p.accepted});
  71. });
  72. const series = [
  73. {
  74. seriesName: t('Accepted'),
  75. data: accepted,
  76. },
  77. {
  78. seriesName: t('Rate Limited'),
  79. data: dropped,
  80. },
  81. ];
  82. this.setState({
  83. series,
  84. emptyStats,
  85. error: false,
  86. loading: false,
  87. });
  88. },
  89. error: () => {
  90. this.setState({error: true, loading: false});
  91. },
  92. }
  93. );
  94. };
  95. render() {
  96. if (this.state.error) {
  97. return <LoadingError onRetry={this.fetchData} />;
  98. }
  99. return (
  100. <Panel>
  101. <PanelHeader>{t('Key usage in the last 30 days (by day)')}</PanelHeader>
  102. <PanelBody withPadding>
  103. {this.state.loading ? (
  104. <Placeholder height="150px" />
  105. ) : !this.state.emptyStats ? (
  106. <MiniBarChart
  107. isGroupedByDate
  108. series={this.state.series}
  109. height={150}
  110. colors={[theme.gray200, theme.red300]}
  111. stacked
  112. labelYAxisExtents
  113. />
  114. ) : (
  115. <EmptyMessage
  116. title={t('Nothing recorded in the last 30 days.')}
  117. description={t('Total events captured using these credentials.')}
  118. />
  119. )}
  120. </PanelBody>
  121. </Panel>
  122. );
  123. }
  124. }
  125. export default KeyStats;