monitorStats.tsx 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. import React, {useRef} from 'react';
  2. import styled from '@emotion/styled';
  3. import {AreaChart, AreaChartSeries} from 'sentry/components/charts/areaChart';
  4. import {BarChart, BarChartSeries} from 'sentry/components/charts/barChart';
  5. import {getYAxisMaxFn} from 'sentry/components/charts/miniBarChart';
  6. import {HeaderTitle} from 'sentry/components/charts/styles';
  7. import EmptyMessage from 'sentry/components/emptyMessage';
  8. import LoadingIndicator from 'sentry/components/loadingIndicator';
  9. import {Panel, PanelBody} from 'sentry/components/panels';
  10. import {t} from 'sentry/locale';
  11. import {space} from 'sentry/styles/space';
  12. import {intervalToMilliseconds} from 'sentry/utils/dates';
  13. import {axisLabelFormatter, tooltipFormatter} from 'sentry/utils/discover/charts';
  14. import {AggregationOutputType} from 'sentry/utils/discover/fields';
  15. import {useApiQuery} from 'sentry/utils/queryClient';
  16. import theme from 'sentry/utils/theme';
  17. import usePageFilters from 'sentry/utils/usePageFilters';
  18. import {Monitor, MonitorEnvironment, MonitorStat} from '../types';
  19. type Props = {
  20. monitor: Monitor;
  21. monitorEnvs: MonitorEnvironment[];
  22. orgId: string;
  23. };
  24. function MonitorStats({monitor, monitorEnvs, orgId}: Props) {
  25. const {selection} = usePageFilters();
  26. const {start, end, period} = selection.datetime;
  27. const nowRef = useRef<Date>(new Date());
  28. let since: number, until: number;
  29. if (start && end) {
  30. until = new Date(end).getTime() / 1000;
  31. since = new Date(start).getTime() / 1000;
  32. } else {
  33. until = Math.floor(nowRef.current.getTime() / 1000);
  34. const intervalSeconds = intervalToMilliseconds(period ?? '30d') / 1000;
  35. since = until - intervalSeconds;
  36. }
  37. const queryKey = [
  38. `/organizations/${orgId}/monitors/${monitor.slug}/stats/`,
  39. {
  40. query: {
  41. since: since.toString(),
  42. until: until.toString(),
  43. resolution: '1d',
  44. environment: monitorEnvs.map(e => e.name),
  45. },
  46. },
  47. ] as const;
  48. const {data: stats, isLoading} = useApiQuery<MonitorStat[]>(queryKey, {staleTime: 0});
  49. if (isLoading) {
  50. return <LoadingIndicator />;
  51. }
  52. let emptyStats = true;
  53. const success: BarChartSeries = {
  54. seriesName: t('Successful'),
  55. data: [],
  56. };
  57. const failed: BarChartSeries = {
  58. seriesName: t('Failed'),
  59. data: [],
  60. };
  61. const missed: BarChartSeries = {
  62. seriesName: t('Missed'),
  63. data: [],
  64. };
  65. const timeout: BarChartSeries = {
  66. seriesName: t('Timeout'),
  67. data: [],
  68. };
  69. const duration: AreaChartSeries = {
  70. seriesName: t('Average Duration'),
  71. data: [],
  72. };
  73. stats?.forEach(p => {
  74. if (p.ok || p.error || p.missed || p.timeout) {
  75. emptyStats = false;
  76. }
  77. const timestamp = p.ts * 1000;
  78. success.data.push({name: timestamp, value: p.ok});
  79. failed.data.push({name: timestamp, value: p.error});
  80. timeout.data.push({name: timestamp, value: p.timeout});
  81. missed.data.push({name: timestamp, value: p.missed});
  82. duration.data.push({name: timestamp, value: Math.trunc(p.duration)});
  83. });
  84. const colors = [theme.green200, theme.red200, theme.red200, theme.yellow200];
  85. const height = 150;
  86. const getYAxisOptions = (aggregateType: AggregationOutputType) => ({
  87. max: getYAxisMaxFn(height),
  88. splitLine: {
  89. show: false,
  90. },
  91. axisLabel: {
  92. formatter: (value: number) => axisLabelFormatter(value, aggregateType, true),
  93. showMaxLabel: false,
  94. },
  95. });
  96. if (emptyStats) {
  97. return (
  98. <Panel>
  99. <PanelBody withPadding>
  100. <EmptyMessage
  101. title={t('No check-ins have been recorded for this time period.')}
  102. />
  103. </PanelBody>
  104. </Panel>
  105. );
  106. }
  107. return (
  108. <React.Fragment>
  109. <Panel>
  110. <PanelBody withPadding>
  111. <StyledHeaderTitle>{t('Check-Ins')}</StyledHeaderTitle>
  112. <BarChart
  113. isGroupedByDate
  114. showTimeInTooltip
  115. useShortDate
  116. series={[success, failed, timeout, missed]}
  117. stacked
  118. height={height}
  119. colors={colors}
  120. tooltip={{
  121. trigger: 'axis',
  122. }}
  123. yAxis={getYAxisOptions('number')}
  124. grid={{
  125. top: 6,
  126. bottom: 0,
  127. left: 0,
  128. right: 0,
  129. }}
  130. animation={false}
  131. />
  132. </PanelBody>
  133. </Panel>
  134. <Panel>
  135. <PanelBody withPadding>
  136. <StyledHeaderTitle>{t('Average Duration')}</StyledHeaderTitle>
  137. <AreaChart
  138. isGroupedByDate
  139. showTimeInTooltip
  140. useShortDate
  141. series={[duration]}
  142. height={height}
  143. colors={[theme.charts.colors[0]]}
  144. yAxis={getYAxisOptions('duration')}
  145. grid={{
  146. top: 6,
  147. bottom: 0,
  148. left: 0,
  149. right: 0,
  150. }}
  151. tooltip={{
  152. valueFormatter: value => tooltipFormatter(value, 'duration'),
  153. }}
  154. />
  155. </PanelBody>
  156. </Panel>
  157. </React.Fragment>
  158. );
  159. }
  160. const StyledHeaderTitle = styled(HeaderTitle)`
  161. margin-bottom: ${space(1)};
  162. `;
  163. export default MonitorStats;