utils.tsx 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. import type {DateTimeObject} from 'sentry/components/charts/utils';
  2. import {getSeriesApiInterval} from 'sentry/components/charts/utils';
  3. import {DATA_CATEGORY_INFO} from 'sentry/constants';
  4. import type {DataCategoryInfo} from 'sentry/types/core';
  5. import {formatBytesBase10} from 'sentry/utils/bytes/formatBytesBase10';
  6. import {parsePeriodToHours} from 'sentry/utils/duration/parsePeriodToHours';
  7. const MILLION = 10 ** 6;
  8. const BILLION = 10 ** 9;
  9. const GIGABYTE = 10 ** 9;
  10. type FormatOptions = {
  11. /**
  12. * Truncate 1234 => 1.2k or 1,234,000 to 1.23M
  13. */
  14. isAbbreviated?: boolean;
  15. /**
  16. * Convert attachments to use the most appropriate unit KB/MB/GB/TB/etc.
  17. * Otherwise, it will default to GB
  18. */
  19. useUnitScaling?: boolean;
  20. };
  21. /**
  22. * This expects usage values/quantities for the data categories that we sell.
  23. *
  24. * Note: usageQuantity for Attachments should be in BYTES
  25. */
  26. export function formatUsageWithUnits(
  27. usageQuantity: number = 0,
  28. dataCategory: DataCategoryInfo['plural'],
  29. options: FormatOptions = {isAbbreviated: false, useUnitScaling: false}
  30. ): string {
  31. if (dataCategory === DATA_CATEGORY_INFO.attachment.plural) {
  32. if (options.useUnitScaling) {
  33. return formatBytesBase10(usageQuantity);
  34. }
  35. const usageGb = usageQuantity / GIGABYTE;
  36. return options.isAbbreviated
  37. ? `${abbreviateUsageNumber(usageGb)} GB`
  38. : `${usageGb.toLocaleString(undefined, {maximumFractionDigits: 2})} GB`;
  39. }
  40. if (
  41. dataCategory === DATA_CATEGORY_INFO.profileDuration.plural &&
  42. Number.isFinite(usageQuantity)
  43. ) {
  44. // Profile duration is in milliseconds, convert to hours
  45. return (usageQuantity / 1000 / 60 / 60).toLocaleString(undefined, {
  46. maximumFractionDigits: 2,
  47. });
  48. }
  49. return options.isAbbreviated
  50. ? abbreviateUsageNumber(usageQuantity)
  51. : usageQuantity.toLocaleString();
  52. }
  53. /**
  54. * Good default for "formatUsageWithUnits"
  55. */
  56. export function getFormatUsageOptions(
  57. dataCategory: DataCategoryInfo['plural']
  58. ): FormatOptions {
  59. return {
  60. isAbbreviated: dataCategory !== DATA_CATEGORY_INFO.attachment.plural,
  61. useUnitScaling: dataCategory === DATA_CATEGORY_INFO.attachment.plural,
  62. };
  63. }
  64. /**
  65. * Instead of using this function directly, use formatReservedWithUnits or
  66. * formatUsageWithUnits with options.isAbbreviated to true instead.
  67. *
  68. * This function display different precision for billion/million/thousand to
  69. * provide clarity on usage of errors/transactions/attachments to the user.
  70. *
  71. * If you are not displaying usage numbers, it might be better to use
  72. * `formatAbbreviatedNumber` in 'sentry/utils/formatters'
  73. */
  74. export function abbreviateUsageNumber(n: number) {
  75. if (n >= BILLION) {
  76. return (n / BILLION).toLocaleString(undefined, {maximumFractionDigits: 2}) + 'B';
  77. }
  78. if (n >= MILLION) {
  79. return (n / MILLION).toLocaleString(undefined, {maximumFractionDigits: 1}) + 'M';
  80. }
  81. if (n >= 1000) {
  82. return (n / 1000).toFixed().toLocaleString() + 'K';
  83. }
  84. // Do not show decimals
  85. return n.toFixed().toLocaleString();
  86. }
  87. /**
  88. * We want to display datetime in UTC in the following situations:
  89. *
  90. * 1) The user selected an absolute date range with UTC
  91. * 2) The user selected a wide date range with 1d interval
  92. *
  93. * When the interval is 1d, we need to use UTC because the 24 hour range might
  94. * shift forward/backward depending on the user's timezone, or it might be
  95. * displayed as a day earlier/later
  96. */
  97. export function isDisplayUtc(datetime: DateTimeObject): boolean {
  98. if (datetime.utc) {
  99. return true;
  100. }
  101. const interval = getSeriesApiInterval(datetime);
  102. const hours = parsePeriodToHours(interval);
  103. return hours >= 24;
  104. }
  105. /**
  106. * HACK(dlee): client-side pagination
  107. */
  108. export function getOffsetFromCursor(cursor?: string) {
  109. const offset = Number(cursor?.split(':')[1]);
  110. return isNaN(offset) ? 0 : offset;
  111. }
  112. /**
  113. * HACK(dlee): client-side pagination
  114. */
  115. export function getPaginationPageLink({
  116. numRows,
  117. pageSize,
  118. offset,
  119. }: {
  120. numRows: number;
  121. offset: number;
  122. pageSize: number;
  123. }) {
  124. const prevOffset = offset - pageSize;
  125. const nextOffset = offset + pageSize;
  126. return `<link>; rel="previous"; results="${prevOffset >= 0}"; cursor="0:${Math.max(
  127. 0,
  128. prevOffset
  129. )}:1", <link>; rel="next"; results="${
  130. nextOffset < numRows
  131. }"; cursor="0:${nextOffset}:0"`;
  132. }