Implementation:ArroyoSystems Arroyo Webui Utils

Knowledge Sources	ArroyoSystems_Arroyo
Domains	WebUI, Utilities
Last Updated	2026-02-08 08:00 GMT

Overview

A utility module providing formatting functions for durations, data sizes, data rates, dates, relative time, backpressure colors, metric transformations, error formatting, UDF ID generation, and string capitalization.

Description

This module exports a collection of pure utility functions used across the Arroyo WebUI:

• durationFormat(micros) -- Converts microseconds to a human-readable string with adaptive units (us, ms, s, m, h, d).
• datarateFormat(bps) -- Converts bytes/second to human-readable data rate (B/s through TB/s).
• dataFormat(bytes) -- Converts byte counts to human-readable sizes (B through TB).
• stringifyBigint(data, indent) -- JSON.stringify wrapper that handles BigInt values by appending 'n' suffix.
• getBackpressureColor(backpressure) -- Maps a 0-1 backpressure value to white/yellow/red colors using thresholds at 0.33 and 0.66.
• getCurrentMaxMetric(metricGroup) -- Finds the maximum current metric value across all subtasks in a metric group.
• transformMetricGroup(metric_group) -- Transforms a MetricGroup into time-series data arrays suitable for TimeSeriesGraph rendering.
• formatDate(timestamp) -- Converts a BigInt microsecond timestamp to a locale-formatted date string.
• relativeTime(timestamp) -- Converts a microsecond timestamp to a relative time string ("just now", "5 minutes ago", etc.).
• formatError(error) -- Extracts error message string from an error object.
• generate_udf_id() -- Generates a random 5-character alphanumeric ID for UDFs.
• capitalize(string) -- Capitalizes the first letter (with special case for "json" -> "JSON").

Usage

Imported throughout the WebUI components for display formatting, metric processing, and utility operations.

Code Reference

Source Location

• Repository: ArroyoSystems_Arroyo
• File: webui/src/lib/util.ts

Signature

export function durationFormat(micros: number): string;
export function datarateFormat(bps: number): string;
export function dataFormat(bytes: number): string;
export function stringifyBigint(data: any, indent: number): string;
export function getBackpressureColor(backpressure: number): string;
export function getCurrentMaxMetric(metricGroup: MetricGroup): number;
export function transformMetricGroup(metric_group: MetricGroup): Array<Array<{label; x; y}>>;
export function formatDate(timestamp: bigint): string;
export function relativeTime(timestamp: number): string;
export const formatError: (error: any) => string;
export const generate_udf_id: () => string;
export function capitalize(string: string): string;

Import

import { durationFormat, dataFormat, formatError, getBackpressureColor } from '../lib/util';

I/O Contract

Inputs

Name	Type	Required	Description
(varies)	number, string, bigint, MetricGroup	Yes	Format-specific input values

Outputs

Name	Type	Description
(varies)	string, number, Array	Formatted strings, computed values, or transformed data structures

Usage Examples

durationFormat(1500000)     // "1s"
dataFormat(1048576)         // "1MB"
getBackpressureColor(0.5)  // "#ffdb5d"
relativeTime(Date.now() * 1000 - 300_000_000)  // "5 minutes ago"

Related Pages

• Environment:ArroyoSystems_Arroyo_Webui_Runtime
• ArroyoSystems_Arroyo_Data_Fetching