monitorStats.tsx 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. import {Fragment, useRef} from 'react';
  2. import styled from '@emotion/styled';
  3. import type {AreaChartSeries} from 'sentry/components/charts/areaChart';
  4. import {AreaChart} from 'sentry/components/charts/areaChart';
  5. import type {BarChartSeries} from 'sentry/components/charts/barChart';
  6. import {BarChart} from 'sentry/components/charts/barChart';
  7. import {getYAxisMaxFn} from 'sentry/components/charts/miniBarChart';
  8. import {HeaderTitle} from 'sentry/components/charts/styles';
  9. import EmptyMessage from 'sentry/components/emptyMessage';
  10. import Panel from 'sentry/components/panels/panel';
  11. import PanelBody from 'sentry/components/panels/panelBody';
  12. import Placeholder from 'sentry/components/placeholder';
  13. import {t} from 'sentry/locale';
  14. import {space} from 'sentry/styles/space';
  15. import {axisLabelFormatter, tooltipFormatter} from 'sentry/utils/discover/charts';
  16. import type {AggregationOutputType} from 'sentry/utils/discover/fields';
  17. import {intervalToMilliseconds} from 'sentry/utils/duration/intervalToMilliseconds';
  18. import {useApiQuery} from 'sentry/utils/queryClient';
  19. import theme from 'sentry/utils/theme';
  20. import usePageFilters from 'sentry/utils/usePageFilters';
  21. import type {Monitor, MonitorEnvironment, MonitorStat} from '../types';
  22. type Props = {
  23. monitor: Monitor;
  24. monitorEnvs: MonitorEnvironment[];
  25. orgSlug: string;
  26. };
  27. function MonitorStats({monitor, monitorEnvs, orgSlug}: Props) {
  28. const {selection} = usePageFilters();
  29. const {start, end, period} = selection.datetime;
  30. const nowRef = useRef(new Date());
  31. let since: number, until: number;
  32. if (start && end) {
  33. until = new Date(end).getTime() / 1000;
  34. since = new Date(start).getTime() / 1000;
  35. } else {
  36. until = Math.floor(nowRef.current.getTime() / 1000);
  37. const intervalSeconds = intervalToMilliseconds(period ?? '30d') / 1000;
  38. since = until - intervalSeconds;
  39. }
  40. const queryKey = [
  41. `/projects/${orgSlug}/${monitor.project.slug}/monitors/${monitor.slug}/stats/`,
  42. {
  43. query: {
  44. since: since.toString(),
  45. until: until.toString(),
  46. resolution: '1d',
  47. environment: monitorEnvs.map(e => e.name),
  48. },
  49. },
  50. ] as const;
  51. const {data: stats, isLoading} = useApiQuery<MonitorStat[]>(queryKey, {staleTime: 0});
  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 (!isLoading && 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. <Fragment>
  109. <Panel>
  110. <PanelBody withPadding>
  111. <StyledHeaderTitle>{t('Status')}</StyledHeaderTitle>
  112. {isLoading ? (
  113. <Placeholder height={`${height}px`} />
  114. ) : (
  115. <BarChart
  116. isGroupedByDate
  117. showTimeInTooltip
  118. useShortDate
  119. series={[success, failed, timeout, missed]}
  120. stacked
  121. height={height}
  122. colors={colors}
  123. tooltip={{
  124. trigger: 'axis',
  125. }}
  126. yAxis={getYAxisOptions('number')}
  127. grid={{
  128. top: 6,
  129. bottom: 0,
  130. left: 0,
  131. right: 0,
  132. }}
  133. animation={false}
  134. />
  135. )}
  136. </PanelBody>
  137. </Panel>
  138. <Panel>
  139. <PanelBody withPadding>
  140. <StyledHeaderTitle>{t('Average Duration')}</StyledHeaderTitle>
  141. {isLoading ? (
  142. <Placeholder height={`${height}px`} />
  143. ) : (
  144. <AreaChart
  145. isGroupedByDate
  146. showTimeInTooltip
  147. useShortDate
  148. series={[duration]}
  149. height={height}
  150. colors={[theme.charts.colors[0]]}
  151. yAxis={getYAxisOptions('duration')}
  152. grid={{
  153. top: 6,
  154. bottom: 0,
  155. left: 0,
  156. right: 0,
  157. }}
  158. tooltip={{
  159. valueFormatter: value => tooltipFormatter(value, 'duration'),
  160. }}
  161. />
  162. )}
  163. </PanelBody>
  164. </Panel>
  165. </Fragment>
  166. );
  167. }
  168. const StyledHeaderTitle = styled(HeaderTitle)`
  169. margin-bottom: ${space(1)};
  170. `;
  171. export default MonitorStats;