samplingBreakdown.tsx 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. import type React from 'react';
  2. import {Fragment} from 'react';
  3. import {css} from '@emotion/react';
  4. import styled from '@emotion/styled';
  5. import {PlatformIcon} from 'platformicons';
  6. import ProjectBadge from 'sentry/components/idBadge/projectBadge';
  7. import LoadingIndicator from 'sentry/components/loadingIndicator';
  8. import Panel from 'sentry/components/panels/panel';
  9. import {Tooltip} from 'sentry/components/tooltip';
  10. import {CHART_PALETTE} from 'sentry/constants/chartPalette';
  11. import {t} from 'sentry/locale';
  12. import {space} from 'sentry/styles/space';
  13. import {formatAbbreviatedNumber} from 'sentry/utils/formatters';
  14. import {clampPercentRate} from 'sentry/views/settings/dynamicSampling/utils/clampNumer';
  15. import {formatPercent} from 'sentry/views/settings/dynamicSampling/utils/formatPercent';
  16. import type {ProjectSampleCount} from 'sentry/views/settings/dynamicSampling/utils/useProjectSampleCounts';
  17. const ITEMS_TO_SHOW = 5;
  18. const palette = CHART_PALETTE[ITEMS_TO_SHOW - 1]!;
  19. interface Props extends React.ComponentProps<typeof StyledPanel> {
  20. sampleCounts: ProjectSampleCount[];
  21. sampleRates: Record<string, number>;
  22. isLoading?: boolean;
  23. }
  24. function OthersBadge() {
  25. return (
  26. <div
  27. css={css`
  28. display: flex;
  29. align-items: center;
  30. gap: ${space(0.75)};
  31. `}
  32. >
  33. <PlatformIcon
  34. css={css`
  35. width: 16px;
  36. height: 16px;
  37. `}
  38. platform="other"
  39. />
  40. {t('other projects')}
  41. </div>
  42. );
  43. }
  44. export function SamplingBreakdown({
  45. sampleCounts,
  46. sampleRates,
  47. isLoading,
  48. ...props
  49. }: Props) {
  50. const spansWithSampleRates = sampleCounts
  51. ?.map(item => {
  52. const sampleRate = clampPercentRate(sampleRates[item.project.id] ?? 1);
  53. const sampledSpans = Math.floor(item.count * sampleRate);
  54. return {
  55. project: item.project,
  56. sampledSpans,
  57. };
  58. })
  59. .toSorted((a: any, b: any) => b.sampledSpans - a.sampledSpans);
  60. const hasOthers = spansWithSampleRates.length > ITEMS_TO_SHOW;
  61. const topItems = hasOthers
  62. ? spansWithSampleRates.slice(0, ITEMS_TO_SHOW - 1)
  63. : spansWithSampleRates.slice(0, ITEMS_TO_SHOW);
  64. const otherSpanCount = spansWithSampleRates
  65. .slice(ITEMS_TO_SHOW - 1)
  66. .reduce((acc: any, item: any) => acc + item.sampledSpans, 0);
  67. const total = spansWithSampleRates.reduce(
  68. (acc: any, item: any) => acc + item.sampledSpans,
  69. 0
  70. );
  71. const getSpanRate = (spanCount: any) => (total === 0 ? 0 : spanCount / total);
  72. const otherRate = getSpanRate(otherSpanCount);
  73. return (
  74. <StyledPanel {...props}>
  75. <Heading>{t('Distribution of stored spans')}</Heading>
  76. {isLoading ? (
  77. <LoadingIndicator
  78. size={32}
  79. css={css`
  80. margin: 0;
  81. `}
  82. />
  83. ) : (
  84. <Fragment>
  85. <Breakdown>
  86. {topItems.map((item: any, index: any) => {
  87. const itemPercent = getSpanRate(item.sampledSpans);
  88. return (
  89. <Tooltip
  90. key={item.project.id}
  91. overlayStyle={{maxWidth: 'none'}}
  92. title={
  93. <LegendItem key={item.project.id}>
  94. <ProjectBadge disableLink avatarSize={16} project={item.project} />
  95. {formatPercent(itemPercent, {addSymbol: true})}
  96. <SubText>{formatAbbreviatedNumber(item.sampledSpans)}</SubText>
  97. </LegendItem>
  98. }
  99. skipWrapper
  100. >
  101. <div
  102. style={{
  103. width: `${itemPercent * 100}%`,
  104. backgroundColor: palette[index],
  105. }}
  106. />
  107. </Tooltip>
  108. );
  109. })}
  110. {hasOthers && (
  111. <Tooltip
  112. overlayStyle={{maxWidth: 'none'}}
  113. title={
  114. <LegendItem>
  115. <OthersBadge />
  116. {formatPercent(otherRate, {addSymbol: true})}
  117. <SubText>{formatAbbreviatedNumber(total)}</SubText>
  118. </LegendItem>
  119. }
  120. skipWrapper
  121. >
  122. <div
  123. style={{
  124. width: `${otherRate * 100}%`,
  125. backgroundColor: palette[palette.length - 1],
  126. }}
  127. />
  128. </Tooltip>
  129. )}
  130. </Breakdown>
  131. <Footer>
  132. <Legend>
  133. {topItems.map((item: any) => {
  134. const itemPercent = getSpanRate(item.sampledSpans);
  135. return (
  136. <LegendItem key={item.project.id}>
  137. <ProjectBadge avatarSize={16} project={item.project} />
  138. {formatPercent(itemPercent, {addSymbol: true})}
  139. </LegendItem>
  140. );
  141. })}
  142. {hasOthers && (
  143. <LegendItem>
  144. <OthersBadge />
  145. {formatPercent(otherRate, {addSymbol: true})}
  146. </LegendItem>
  147. )}
  148. </Legend>
  149. <Total>
  150. <SubText>{t('Total Spans:')}</SubText>
  151. &nbsp;
  152. {formatAbbreviatedNumber(total)}
  153. </Total>
  154. </Footer>
  155. </Fragment>
  156. )}
  157. </StyledPanel>
  158. );
  159. }
  160. const StyledPanel = styled(Panel)`
  161. padding: ${space(1.5)} ${space(2)};
  162. margin-bottom: ${space(1.5)};
  163. `;
  164. const Heading = styled('h6')`
  165. margin-bottom: ${space(1.5)};
  166. font-size: ${p => p.theme.fontSizeMedium};
  167. `;
  168. const Footer = styled('div')`
  169. display: flex;
  170. gap: ${space(2)};
  171. align-items: flex-start;
  172. `;
  173. const Breakdown = styled('div')`
  174. display: flex;
  175. height: ${space(2)};
  176. width: 100%;
  177. border-radius: ${p => p.theme.borderRadius};
  178. overflow: hidden;
  179. background: ${p => p.theme.backgroundTertiary};
  180. `;
  181. const Legend = styled('div')`
  182. display: flex;
  183. flex-wrap: wrap;
  184. margin-top: ${space(1.5)};
  185. gap: ${space(1.5)};
  186. font-size: ${p => p.theme.fontSizeMedium};
  187. flex: 1;
  188. `;
  189. const Total = styled('div')`
  190. display: flex;
  191. align-items: center;
  192. margin-top: ${space(1.5)};
  193. font-size: ${p => p.theme.fontSizeMedium};
  194. flex-shrink: 0;
  195. `;
  196. const LegendItem = styled('div')`
  197. display: flex;
  198. align-items: center;
  199. gap: ${space(0.75)};
  200. `;
  201. const SubText = styled('span')`
  202. color: ${p => p.theme.gray300};
  203. white-space: nowrap;
  204. `;