Implementation:Risingwavelabs Risingwave Dashboard API Client

Property	Value
Module	Dashboard API Client
File	dashboard/lib/api/api.ts
Language	TypeScript
Lines	69
Type	Singleton HTTP Client
Dependencies	Browser Fetch API, localStorage

Overview

api.ts provides the core HTTP API client singleton used by all dashboard API calls to communicate with the RisingWave meta node. The Api class reads the API endpoint from localStorage (falling back to defaults based on the NODE_ENV environment variable), constructs URLs via urlFor, and provides a get method that fetches JSON, checks response status, and wraps errors with context. It supports three predefined endpoints: production (/api), mock server (localhost:32333), and external meta node (localhost:5691/api). This is the foundational HTTP client layer for the entire dashboard; all data fetching flows through this single API instance.

Code Reference

Source Location

dashboard/lib/api/api.ts

Signature

export const PREDEFINED_API_ENDPOINTS: string[]
export const DEFAULT_API_ENDPOINT: string
export const API_ENDPOINT_KEY: string

class Api {
  urlFor(path: string): string
  async get(path: string): Promise<any>
}

const api: Api
export default api

Import

import api from "./api"
// or from a different relative path:
import api from "../lib/api/api"

I/O Contract

Api.urlFor

Parameter	Type	Description
path	string	API path (e.g., /clusters/1)
Returns	string	Full URL constructed by combining the configured endpoint with the path

Api.get

Parameter	Type	Description
path	string	API path to fetch
Returns	Promise<any>	Parsed JSON response data
Throws	Error	On network failure or non-OK HTTP status, with the URL in the error message and the original error as cause

Predefined Endpoints

Constant	Value	Description
PROD_API_ENDPOINT	/api	Production endpoint (relative path, served by the same host)
MOCK_API_ENDPOINT	http://localhost:32333	Mock server for testing
EXTERNAL_META_NODE_API_ENDPOINT	http://localhost:5691/api	External meta node for development debugging

Configuration

The endpoint is determined by:

1. Checking localStorage for key risingwave.dashboard.api.endpoint
2. Falling back to DEFAULT_API_ENDPOINT, which is:
   • /api in production (NODE_ENV === "production")
   • http://localhost:5691/api in development

Usage Examples

Making API Calls

import api from "./api"

// Simple GET request
const data = await api.get("/clusters/1")

// Get a specific resource
const version = await api.get("/version")

// The URL is constructed automatically from the configured endpoint
const url = api.urlFor("/metrics/cluster")
// e.g., "http://localhost:5691/api/metrics/cluster" in development

Error Handling

try {
  const data = await api.get("/some/endpoint")
} catch (e) {
  // Error message: "Failed to fetch http://localhost:5691/api/some/endpoint"
  // e.cause contains the original error (e.g., network error or HTTP status)
  console.error(e.message, e.cause)
}

Related Pages

• Risingwavelabs_Risingwave_Cluster_API - Uses this API client to fetch cluster topology data
• Risingwavelabs_Risingwave_Streaming_API_Functions - Uses this API client for all streaming catalog data fetches
• Risingwavelabs_Risingwave_StreamingStats_Callbacks - Uses this API client to fetch streaming performance metrics
• Risingwavelabs_Risingwave_UseFetch_Hook - The React hook that wraps API calls for component-level data fetching