utils.tsx 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  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';
  5. import {formatBytesBase10} from 'sentry/utils';
  6. import {parsePeriodToHours} from 'sentry/utils/dates';
  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. ) {
  31. if (dataCategory !== DATA_CATEGORY_INFO.attachment.plural) {
  32. return options.isAbbreviated
  33. ? abbreviateUsageNumber(usageQuantity)
  34. : usageQuantity.toLocaleString();
  35. }
  36. if (options.useUnitScaling) {
  37. return formatBytesBase10(usageQuantity);
  38. }
  39. const usageGb = usageQuantity / GIGABYTE;
  40. return options.isAbbreviated
  41. ? `${abbreviateUsageNumber(usageGb)} GB`
  42. : `${usageGb.toLocaleString(undefined, {maximumFractionDigits: 2})} GB`;
  43. }
  44. /**
  45. * Good default for "formatUsageWithUnits"
  46. */
  47. export function getFormatUsageOptions(
  48. dataCategory: DataCategoryInfo['plural']
  49. ): FormatOptions {
  50. return {
  51. isAbbreviated: dataCategory !== DATA_CATEGORY_INFO.attachment.plural,
  52. useUnitScaling: dataCategory === DATA_CATEGORY_INFO.attachment.plural,
  53. };
  54. }
  55. /**
  56. * Instead of using this function directly, use formatReservedWithUnits or
  57. * formatUsageWithUnits with options.isAbbreviated to true instead.
  58. *
  59. * This function display different precision for billion/million/thousand to
  60. * provide clarity on usage of errors/transactions/attachments to the user.
  61. *
  62. * If you are not displaying usage numbers, it might be better to use
  63. * `formatAbbreviatedNumber` in 'sentry/utils/formatters'
  64. */
  65. export function abbreviateUsageNumber(n: number) {
  66. if (n >= BILLION) {
  67. return (n / BILLION).toLocaleString(undefined, {maximumFractionDigits: 2}) + 'B';
  68. }
  69. if (n >= MILLION) {
  70. return (n / MILLION).toLocaleString(undefined, {maximumFractionDigits: 1}) + 'M';
  71. }
  72. if (n >= 1000) {
  73. return (n / 1000).toFixed().toLocaleString() + 'K';
  74. }
  75. // Do not show decimals
  76. return n.toFixed().toLocaleString();
  77. }
  78. /**
  79. * We want to display datetime in UTC in the following situations:
  80. *
  81. * 1) The user selected an absolute date range with UTC
  82. * 2) The user selected a wide date range with 1d interval
  83. *
  84. * When the interval is 1d, we need to use UTC because the 24 hour range might
  85. * shift forward/backward depending on the user's timezone, or it might be
  86. * displayed as a day earlier/later
  87. */
  88. export function isDisplayUtc(datetime: DateTimeObject): boolean {
  89. if (datetime.utc) {
  90. return true;
  91. }
  92. const interval = getSeriesApiInterval(datetime);
  93. const hours = parsePeriodToHours(interval);
  94. return hours >= 24;
  95. }
  96. /**
  97. * HACK(dlee): client-side pagination
  98. */
  99. export function getOffsetFromCursor(cursor?: string) {
  100. const offset = Number(cursor?.split(':')[1]);
  101. return isNaN(offset) ? 0 : offset;
  102. }
  103. /**
  104. * HACK(dlee): client-side pagination
  105. */
  106. export function getPaginationPageLink({
  107. numRows,
  108. pageSize,
  109. offset,
  110. }: {
  111. numRows: number;
  112. offset: number;
  113. pageSize: number;
  114. }) {
  115. const prevOffset = offset - pageSize;
  116. const nextOffset = offset + pageSize;
  117. return `<link>; rel="previous"; results="${prevOffset >= 0}"; cursor="0:${Math.max(
  118. 0,
  119. prevOffset
  120. )}:1", <link>; rel="next"; results="${
  121. nextOffset < numRows
  122. }"; cursor="0:${nextOffset}:0"`;
  123. }