Implementation:Risingwavelabs Risingwave Cluster Page

Property	Value
Component	Cluster
File	dashboard/pages/cluster.tsx
Language	TypeScript/TSX
Lines	277
Type	Next.js Page Component
Framework	React, Chakra UI, Recharts

Overview

cluster.tsx is the dashboard page that provides a cluster overview showing frontend and compute node status, version information, and real-time CPU/memory usage charts. It fetches cluster node info and version on mount, then polls cluster metrics every 5 seconds. Worker nodes are rendered as status cards in a grid, and per-instance CPU and memory area charts are displayed using Recharts with gap-filling for missing data points. This is the primary operational monitoring page that gives operators a live view of cluster health and resource utilization.

Code Reference

Source Location

dashboard/pages/cluster.tsx

Signature

// Internal helper components
function WorkerNodeComponent({
  workerNodeType,
  workerNode,
}: {
  workerNodeType: string
  workerNode: WorkerNode
}): JSX.Element

function WorkerNodeMetricsComponent({
  job,
  instance,
  metrics,
  isCpuMetrics,
}: {
  job: string
  instance: string
  metrics: MetricsSample[]
  isCpuMetrics: boolean
}): JSX.Element

// Main page component
export default function Cluster(): JSX.Element

Import

// This is a Next.js page component, routed automatically
// Internal imports:
import {
  getClusterInfoComputeNode,
  getClusterInfoFrontend,
  getClusterMetrics,
  getClusterVersion,
} from "../lib/api/cluster"
import { WorkerNode } from "../proto/gen/common"

I/O Contract

Internal State

State Variable	Type	Description
frontendList	WorkerNode[]	List of frontend worker nodes
computeNodeList	WorkerNode[]	List of compute worker nodes
metrics	ClusterNodeMetrics	CPU and memory metrics data
version	string	Cluster version string

ClusterNodeMetrics Interface

interface ClusterNodeMetrics {
  cpuData: Metrics[]    // CPU metrics per instance
  memoryData: Metrics[] // Memory metrics per instance
}

WorkerNodeComponent Props

Prop	Type	Description
workerNodeType	string	Display label (e.g., "Frontend", "Compute")
workerNode	WorkerNode	Worker node protobuf object with id, host, and port

WorkerNodeMetricsComponent Props

Prop	Type	Description
job	string	Prometheus job label
instance	string	Prometheus instance label (host:port)
metrics	MetricsSample[]	Array of timestamp/value pairs
isCpuMetrics	boolean	If true, Y-axis domain is clamped to [0, 1]

Data Fetching Strategy

Data	Frequency	Error Handling
Frontend nodes, Compute nodes, Version	Once on mount	Toast notification, no retry
CPU and Memory metrics	Every 5 seconds (polling loop)	Toast with "warning" status, stops polling on error

Metrics Gap-Filling

The WorkerNodeMetricsComponent fills gaps in metrics data to ensure continuous chart rendering:

// Fills missing 60-second intervals with zero values
// Pads to a minimum of 60 data points
const metricsCallback = useCallback(() => {
  const filledMetrics: MetricsSample[] = []
  let lastTs: number = metrics.at(-1)!.timestamp
  for (let pt of reverse(clone(metrics))) {
    while (lastTs - pt.timestamp > 0) {
      lastTs -= 60
      filledMetrics.push({ timestamp: lastTs, value: 0 })
    }
    filledMetrics.push(pt)
    lastTs -= 60
  }
  while (filledMetrics.length < 60) {
    filledMetrics.push({ timestamp: lastTs, value: 0 })
    lastTs -= 60
  }
  return reverse(filledMetrics)
}, [metrics])

Usage Examples

Page Structure

The page renders three main sections:

// 1. Cluster Overview - Grid of worker node status cards
<Title>Cluster Overview</Title>
<Text>Version: {version}</Text>
<Grid templateColumns="repeat(3, 1fr)">
  {frontendList.map((f) => <WorkerNodeComponent ... />)}
  {computeNodeList.map((c) => <WorkerNodeComponent ... />)}
</Grid>

// 2. CPU Usage - Area charts per instance
<Title>CPU Usage</Title>
<SimpleGrid columns={3}>
  {metrics.cpuData.map((d) => <WorkerNodeMetricsComponent isCpuMetrics={true} ... />)}
</SimpleGrid>

// 3. Memory Usage - Area charts per instance
<Title>Memory Usage</Title>
<SimpleGrid columns={3}>
  {metrics.memoryData.map((d) => <WorkerNodeMetricsComponent isCpuMetrics={false} ... />)}
</SimpleGrid>

Related Pages

• Risingwavelabs_Risingwave_Cluster_API - Provides all the data fetching functions used by this page
• Risingwavelabs_Risingwave_Dashboard_API_Client - The underlying HTTP client
• Risingwavelabs_Risingwave_Await_Tree_Page - Related debugging page for compute node inspection
• Risingwavelabs_Risingwave_Relation_Graph_Page - Another major dashboard page for streaming topology visualization