Implementation:Risingwavelabs Risingwave TimeControls

Property	Value
Component	TimeControls
File	dashboard/components/TimeControls.tsx
Language	TypeScript/TSX
Lines	174
Type	React Component
Framework	React, Chakra UI

Overview

TimeControls is a React component that provides a UI control panel for specifying timestamp and time offset parameters used to query historical streaming statistics. It renders input fields for a timestamp (with a "Now" button for the current time in system timezone) and a duration offset (e.g., "1h", "30m", "2d"), with Apply and Reset buttons. Inputs are validated using parseTimestampToUnixEpoch and parseDuration from the timeUtils module. This component enables time-travel queries on the relation and fragment graph pages, allowing users to view streaming stats at specific historical points in time.

Code Reference

Source Location

dashboard/components/TimeControls.tsx

Signature

interface TimeControlsProps {
  onApply: (timestamp?: number, offset?: number) => void
  title?: string
}

export default function TimeControls({
  onApply,
  title = "Time Controls",
}: TimeControlsProps): JSX.Element

Import

import TimeControls from "../components/TimeControls"

I/O Contract

Inputs (Props)

Parameter	Type	Default	Description
onApply	(timestamp?: number, offset?: number) => void	(required)	Callback invoked with the parsed Unix timestamp (seconds) and offset (seconds) when the user clicks Apply, or with undefined values on Reset
title	string	"Time Controls"	Title text displayed above the control panel

Internal State

State Variable	Type	Description
timestampInput	string	Raw text input for the timestamp field
offsetInput	string	Raw text input for the offset field
displayTimestamp	string	Formatted ISO string of the successfully parsed timestamp
displayOffset	string	Display string of the successfully parsed offset
timestampError	string	Error message for invalid timestamp input
offsetError	string	Error message for invalid offset input

Output

Renders a Chakra UI form containing:

• A timestamp input field with a "Now" button that fills in the current system time
• An offset input field accepting duration strings (e.g., "1h", "30m", "2d")
• Apply and Reset buttons
• An "Applied Settings" display box showing the currently active timestamp and offset

Usage Examples

Basic Usage in Relation Graph Page

import TimeControls from "../components/TimeControls"

function RelationGraphPage() {
  const handleTimeParamsChange = (timestamp?: number, offset?: number) => {
    setTimeParams({
      at: timestamp,
      timeOffset: offset,
    })
  }

  return (
    <TimeControls onApply={handleTimeParamsChange} />
  )
}

Apply Handler Logic

The handleApply function validates both inputs before invoking the callback:

const handleApply = () => {
  let timestamp: number | undefined
  let offset: number | undefined

  if (timestampInput.trim()) {
    try {
      timestamp = parseTimestampToUnixEpoch(timestampInput)
      setDisplayTimestamp(new Date(timestamp * 1000).toISOString())
      setTimestampError("")
    } catch (error) {
      setTimestampError("Invalid timestamp format")
      return
    }
  }

  if (offsetInput.trim()) {
    try {
      offset = parseDuration(offsetInput)
      setDisplayOffset(offsetInput)
      setOffsetError("")
    } catch (error) {
      setOffsetError("Invalid offset format (use: 30s, 5m, 2h, 1d)")
      return
    }
  }

  onApply(timestamp, offset)
}

Related Pages

• Risingwavelabs_Risingwave_TimeUtils - Provides the parseDuration, parseTimestampToUnixEpoch, and getCurrentTimeInSystemTimezone functions used by this component
• Risingwavelabs_Risingwave_Relation_Graph_Page - Uses TimeControls for time-travel queries on the relation dependency graph
• Risingwavelabs_Risingwave_StreamingStats_Callbacks - Consumes the time parameters produced by this component to query historical stats