EdgeFunctionOverview.utils.ts 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
  1. import dayjs from 'dayjs'
  2. import maxBy from 'lodash/maxBy'
  3. import meanBy from 'lodash/meanBy'
  4. import sumBy from 'lodash/sumBy'
  5. import type { ChartConfig } from 'ui'
  6. import type { ChartIntervals } from '@/types'
  7. export type EdgeFunctionChartRawDatum = {
  8. timestamp: string | number
  9. success_count?: string | number
  10. redirect_count?: string | number
  11. client_err_count?: string | number
  12. server_err_count?: string | number
  13. avg_execution_time?: string | number
  14. max_execution_time?: string | number
  15. avg_cpu_time_used?: string | number
  16. max_cpu_time_used?: string | number
  17. avg_memory_used?: string | number
  18. avg_heap_memory_used?: string | number
  19. avg_external_memory_used?: string | number
  20. }
  21. export type EdgeFunctionChartDatum = {
  22. timestamp: string
  23. success_count: number
  24. redirect_count: number
  25. client_err_count: number
  26. server_err_count: number
  27. avg_execution_time: number
  28. max_execution_time: number
  29. avg_cpu_time_used: number
  30. max_cpu_time_used: number
  31. avg_memory_used: number
  32. avg_heap_memory_used: number
  33. avg_external_memory_used: number
  34. }
  35. export type InvocationChartDatum = {
  36. timestamp: string
  37. ok_count: number
  38. warning_count: number
  39. error_count: number
  40. }
  41. export type InvocationUpdateAnnotation = {
  42. timestamp: string
  43. position: number
  44. updatedAt: Date
  45. }
  46. export const EDGE_FUNCTION_CHART_INTERVALS: ChartIntervals[] = [
  47. {
  48. key: '15min',
  49. label: '15 min',
  50. startValue: 15,
  51. startUnit: 'minute',
  52. format: 'MMM D, h:mm:ssa',
  53. },
  54. {
  55. key: '1hr',
  56. label: '1 hour',
  57. startValue: 1,
  58. startUnit: 'hour',
  59. format: 'MMM D, h:mma',
  60. },
  61. {
  62. key: '3hr',
  63. label: '3 hours',
  64. startValue: 3,
  65. startUnit: 'hour',
  66. format: 'MMM D, h:mma',
  67. },
  68. {
  69. key: '1day',
  70. label: '1 day',
  71. startValue: 1,
  72. startUnit: 'day',
  73. format: 'MMM D, h:mma',
  74. },
  75. ]
  76. export const INVOCATION_CHART_CONFIG = {
  77. ok_count: {
  78. label: 'Ok',
  79. color: 'hsl(var(--brand-default))',
  80. },
  81. warning_count: {
  82. label: 'Warnings',
  83. color: 'hsl(var(--warning-default))',
  84. },
  85. error_count: {
  86. label: 'Errors',
  87. color: 'hsl(var(--destructive-default))',
  88. },
  89. } satisfies ChartConfig
  90. export const CPU_TIME_CHART_CONFIG = {
  91. max_cpu_time_used: {
  92. label: 'Max CPU Time',
  93. color: 'hsl(var(--brand-default))',
  94. },
  95. } satisfies ChartConfig
  96. export const EXECUTION_TIME_CHART_CONFIG = {
  97. avg_execution_time: {
  98. label: 'Average Execution Time',
  99. color: 'hsl(var(--foreground-default))',
  100. },
  101. max_execution_time: {
  102. label: 'Max Execution Time',
  103. color: 'hsl(var(--brand-default))',
  104. },
  105. } satisfies ChartConfig
  106. export const MEMORY_CHART_CONFIG = {
  107. avg_memory_used: {
  108. label: 'Memory Usage',
  109. color: 'hsl(var(--brand-default))',
  110. },
  111. } satisfies ChartConfig
  112. const toManipulateUnit = (unit: ChartIntervals['startUnit']) => unit as dayjs.ManipulateType
  113. const toNumber = (value: string | number | undefined) => Number(value ?? 0)
  114. export const getBucketedTimeRange = (
  115. interval: ChartIntervals,
  116. now: Date = new Date()
  117. ): [Date, Date] => {
  118. const currentTime = dayjs(now)
  119. const unit = toManipulateUnit(interval.startUnit)
  120. const start = currentTime.subtract(interval.startValue, unit).startOf(unit)
  121. const end = currentTime.startOf(unit)
  122. return [start.toDate(), end.toDate()]
  123. }
  124. export const getRollingTimeRange = (
  125. interval: ChartIntervals,
  126. now: Date = new Date()
  127. ): [Date, Date] => {
  128. const currentTime = dayjs(now)
  129. const start = currentTime.subtract(interval.startValue, toManipulateUnit(interval.startUnit))
  130. return [start.toDate(), currentTime.toDate()]
  131. }
  132. export const formatChartTimestamp = (value: Date | string | number | undefined, format: string) => {
  133. return dayjs(value === undefined ? '' : value).format(format)
  134. }
  135. export const getChartTimeRangeLabels = (
  136. data: Array<{ timestamp: string }>,
  137. format: string
  138. ): { start: string; end: string } | undefined => {
  139. if (data.length === 0) return undefined
  140. return {
  141. start: formatChartTimestamp(data[0]?.timestamp, format),
  142. end: formatChartTimestamp(data[data.length - 1]?.timestamp, format),
  143. }
  144. }
  145. export const toEdgeFunctionChartData = (
  146. rows: EdgeFunctionChartRawDatum[] = []
  147. ): EdgeFunctionChartDatum[] =>
  148. rows.map((row) => ({
  149. timestamp: String(row.timestamp ?? ''),
  150. success_count: toNumber(row.success_count),
  151. redirect_count: toNumber(row.redirect_count),
  152. client_err_count: toNumber(row.client_err_count),
  153. server_err_count: toNumber(row.server_err_count),
  154. avg_execution_time: toNumber(row.avg_execution_time),
  155. max_execution_time: toNumber(row.max_execution_time),
  156. avg_cpu_time_used: toNumber(row.avg_cpu_time_used),
  157. max_cpu_time_used: toNumber(row.max_cpu_time_used),
  158. avg_memory_used: toNumber(row.avg_memory_used),
  159. avg_heap_memory_used: toNumber(row.avg_heap_memory_used),
  160. avg_external_memory_used: toNumber(row.avg_external_memory_used),
  161. }))
  162. export const getInvocationChartData = (data: EdgeFunctionChartDatum[]): InvocationChartDatum[] =>
  163. data.map((datum) => ({
  164. timestamp: datum.timestamp,
  165. ok_count: datum.success_count,
  166. warning_count: datum.redirect_count + datum.client_err_count,
  167. error_count: datum.server_err_count,
  168. }))
  169. export const getInvocationTotals = (data: InvocationChartDatum[]) => {
  170. const totalInvocationCount = sumBy(data, (datum) => {
  171. return datum.ok_count + datum.warning_count + datum.error_count
  172. })
  173. return {
  174. totalInvocationCount,
  175. totalWarningCount: sumBy(data, 'warning_count'),
  176. totalErrorCount: sumBy(data, 'error_count'),
  177. }
  178. }
  179. export const getExecutionMetrics = (data: EdgeFunctionChartDatum[]) => ({
  180. averageExecutionTime: meanBy(data, 'avg_execution_time') ?? 0,
  181. maxExecutionTime: maxBy(data, 'max_execution_time')?.max_execution_time ?? 0,
  182. })
  183. export const getUsageMetrics = (data: EdgeFunctionChartDatum[]) => {
  184. const totalHeapMemory = sumBy(data, 'avg_heap_memory_used')
  185. const totalExternalMemory = sumBy(data, 'avg_external_memory_used')
  186. return {
  187. averageCpuTime: meanBy(data, 'avg_cpu_time_used') ?? 0,
  188. maxCpuTime: maxBy(data, 'max_cpu_time_used')?.max_cpu_time_used ?? 0,
  189. averageMemoryUsage: meanBy(data, 'avg_memory_used') ?? 0,
  190. totalHeapMemory,
  191. totalExternalMemory,
  192. totalMemoryByType: totalHeapMemory + totalExternalMemory,
  193. }
  194. }
  195. export const getInvocationUpdateAnnotation = ({
  196. updatedAt,
  197. invocationChartData,
  198. windowStart,
  199. windowEnd,
  200. }: {
  201. updatedAt?: string
  202. invocationChartData: InvocationChartDatum[]
  203. windowStart: Date
  204. windowEnd: Date
  205. }): InvocationUpdateAnnotation | undefined => {
  206. if (!updatedAt || invocationChartData.length === 0) return undefined
  207. const updatedAtDate = new Date(updatedAt)
  208. const updatedAtValue = updatedAtDate.valueOf()
  209. if (Number.isNaN(updatedAtValue)) return undefined
  210. if (updatedAtValue < windowStart.valueOf() || updatedAtValue > windowEnd.valueOf()) {
  211. return undefined
  212. }
  213. const closestTimestamp = invocationChartData.reduce((closest, datum) => {
  214. const datumDistance = Math.abs(new Date(datum.timestamp).valueOf() - updatedAtValue)
  215. const closestDistance = Math.abs(new Date(closest.timestamp).valueOf() - updatedAtValue)
  216. return datumDistance < closestDistance ? datum : closest
  217. }).timestamp
  218. const markerIndex = invocationChartData.findIndex((datum) => datum.timestamp === closestTimestamp)
  219. if (markerIndex < 0) return undefined
  220. return {
  221. timestamp: closestTimestamp,
  222. position: ((markerIndex + 0.5) / invocationChartData.length) * 100,
  223. updatedAt: updatedAtDate,
  224. }
  225. }
  226. export const getSegmentedButtonClassName = (index: number, total: number) => {
  227. if (index === 0) return 'rounded-tr-none rounded-br-none'
  228. if (index === total - 1) return 'rounded-tl-none rounded-bl-none'
  229. return 'rounded-none'
  230. }
  231. export const getChartEmptyStateCopy = (
  232. subject: string,
  233. isError: boolean,
  234. errorMessage?: string
  235. ) => ({
  236. title: isError ? `Unable to load ${subject}` : 'No data to show',
  237. description: isError ? errorMessage : undefined,
  238. })
  239. export const formatMetric = (value?: number, unit?: string) => {
  240. if (value === undefined || Number.isNaN(value)) return unit ? `0${unit}` : '0'
  241. const formatted = unit === 'MB' ? value.toFixed(1) : Math.round(value).toLocaleString('en-US')
  242. return unit ? `${formatted}${unit}` : formatted
  243. }
  244. export const formatRate = (count: number, total: number) =>
  245. new Intl.NumberFormat('en-US', {
  246. style: 'percent',
  247. maximumFractionDigits: 1,
  248. }).format(total === 0 ? 0 : count / total)
  249. export const formatReferenceDelta = (value: number, reference: number, label = 'average') => {
  250. const difference = value - reference
  251. if (Math.abs(difference) < Number.EPSILON) return `At ${label}`
  252. if (reference === 0) return `${difference > 0 ? 'Above' : 'Below'} ${label}`
  253. const percentDifference = Math.round(Math.abs((difference / reference) * 100))
  254. return `${percentDifference}% ${difference > 0 ? 'above' : 'below'} ${label}`
  255. }
  256. export const getMemoryTooltipDetail = (heapMemory: number, externalMemory: number) => {
  257. return `Heap ${formatMetric(heapMemory, 'MB')} • External ${formatMetric(externalMemory, 'MB')}`
  258. }