Implementation:Risingwavelabs Risingwave Relations Component

Property	Value
Component	Relations
Source File	dashboard/components/Relations.tsx
Language	TypeScript / TSX
Lines	304
Category	Dashboard UI Component
Framework	React, Chakra UI, Next.js

Overview

The Relations component provides a generic, reusable table view for listing database relations (tables, materialized views, sources, sinks, indexes, etc.) in the RisingWave dashboard. It fetches relation data along with users, databases, and schemas, enriches each relation with owner, schema, and database names, and optionally attaches streaming job information.

The component renders a Chakra UI table with standard columns (Id, Database, Schema, Name, Owner, Visible Columns) plus caller-provided extra columns. Clicking a relation ID opens a CatalogModal with the full catalog details. This is the foundational list-view component reused by all catalog pages in the dashboard, ensuring consistent presentation and interaction patterns.

The file also exports a rich set of reusable column definitions such as dependentsColumn, fragmentsColumn, primaryKeyColumn, vnodeCountColumn, dataSizeColumn, connectorColumnSource, connectorColumnSink, and configOverrideColumn.

Code Reference

Source Location

dashboard/components/Relations.tsx

Full URL: dashboard/components/Relations.tsx

Signature

export function Relations<R extends Relation>(
  title: string,
  getRelations: () => Promise<R[]>,
  extraColumns: Column<R>[],
  options?: {
    withStreamingJobs?: boolean
  }
): JSX.Element

Imports

import {
  Box, Button, Popover, PopoverArrow, PopoverBody, PopoverCloseButton,
  PopoverContent, PopoverTrigger, Table, TableContainer, Tbody, Td, Th,
  Thead, Tr,
} from "@chakra-ui/react"
import loadable from "@loadable/component"
import Head from "next/head"
import Link from "next/link"
import { Fragment } from "react"
import Title from "../components/Title"
import useFetch from "../lib/api/fetch"
import {
  Relation, StreamingJob, getDatabases, getSchemas, getStreamingJobs, getUsers,
} from "../lib/api/streaming"
import extractColumnInfo from "../lib/extractInfo"
import { Sink as RwSink, Source as RwSource, Table as RwTable } from "../proto/gen/catalog"
import { CatalogModal, useCatalogModal } from "./CatalogModal"

I/O Contract

Inputs

Parameter	Type	Required	Description
title	string	Yes	Page title displayed in the header and browser tab
getRelations	() => Promise<R[]>	Yes	Async function that fetches the list of relations to display
extraColumns	Column<R>[]	Yes	Additional columns to render beyond the standard set
options.withStreamingJobs	boolean	No	When true, also fetches streaming job data and attaches it to each relation

Outputs

The function returns a JSX element containing:

• A <Head> tag setting the browser page title
• A CatalogModal for displaying catalog details when a relation ID is clicked
• A Chakra UI Table with standard columns (Id, Database, Schema, Name, Owner) plus any extra columns, plus a Visible Columns column showing non-hidden column names

Exported Types

export type Column<R> = {
  name: string
  width: number
  content: (r: R) => React.ReactNode
}

Exported Column Definitions

Export	Description
dependentsColumn	Link button navigating to the Relation Graph page filtered by the relation ID
fragmentsColumn	Link button navigating to the Fragment Graph page filtered by the relation ID
primaryKeyColumn	Displays the primary key columns for a table
vnodeCountColumn	Displays the virtual node count for a table
dataSizeColumn	Displays the total data size in a human-readable byte format
connectorColumnSource	Displays the connector name for a source relation
connectorColumnSink	Displays the connector name for a sink relation
configOverrideColumn	Shows a popover with the streaming job config override text
tableColumns	Array: [primaryKeyColumn, vnodeCountColumn, dataSizeColumn]
streamingJobColumns	Array: [dependentsColumn, fragmentsColumn, configOverrideColumn]

Exported Utility

export const ReactJson = loadable(() => import("react-json-view"))

Lazily loaded react-json-view component, also used by other components.

Internal Helpers

formatBytes

function formatBytes(bytes: number | undefined): string

Converts a byte count to a human-readable string (e.g., "1.5 GB"). Returns "unknown" for undefined input.

Usage Examples

Rendering a materialized views table page

import { Relations, streamingJobColumns } from "../components/Relations"
import { getMaterializedViews } from "../lib/api/streaming"

export default function MaterializedViews() {
  return Relations(
    "Materialized Views",
    getMaterializedViews,
    [...streamingJobColumns],
    { withStreamingJobs: true }
  )
}

Rendering a tables page with table-specific columns

import { Relations, streamingJobColumns, tableColumns } from "../components/Relations"
import { getTables } from "../lib/api/streaming"

export default function Tables() {
  return Relations(
    "Tables",
    getTables,
    [...streamingJobColumns, ...tableColumns],
    { withStreamingJobs: true }
  )
}

Related Pages

• Risingwavelabs_Risingwave_RelationGraph_Component -- Graph-based visualization of relation dependencies
• Risingwavelabs_Risingwave_FragmentGraph_Component -- Fragment-level graph visualization component
• Risingwavelabs_Risingwave_Fragment_Graph_Page -- Page that links from the fragments column
• Risingwavelabs_Risingwave_Dashboard_Streaming_API -- API layer providing relation fetching functions