cluster-ui: add getTableMetadataApi and connect tables page

This commit connects the v2 db details - tables page to the
new `api/v2/table_metadata` api route.

The following components are now connected to the api:
- listing tables for a db
- sorting by column
- searching by table name
- filtering by node id

Epic: CRDB-37558
Fixes: #131122

Release note: None

pkg/ui/workspaces/cluster-ui/src/api/databases/getDatabaseMetadataApi.ts

@@ -32,7 +32,7 @@ export type DatabaseMetadata = {
   db_name: string;
   size_bytes: number;
   table_count: number;
-  store_ids: number[] | null;
+  store_ids: number[];
   last_updated: string;
 };
 
@@ -44,8 +44,9 @@ export type DatabaseMetadataRequest = {
   storeIds?: number[];
 };
 
-export type DatabaseMetadataResponse =
-  APIV2ResponseWithPaginationState<DatabaseMetadata>;
+export type DatabaseMetadataResponse = APIV2ResponseWithPaginationState<
+  DatabaseMetadata[]
+>;
 
 export const getDatabaseMetadata = async (req: DatabaseMetadataRequest) => {
   const urlParams = new URLSearchParams();

pkg/ui/workspaces/cluster-ui/src/api/databases/getTableMetadataApi.ts

@@ -0,0 +1,111 @@
+// Copyright 2024 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+import useSWR from "swr";
+
+import { StoreID } from "../../types/clusterTypes";
+import { fetchDataJSON } from "../fetchData";
+import {
+  APIV2ResponseWithPaginationState,
+  SimplePaginationState,
+} from "../types";
+
+const TABLE_METADATA_API_PATH = "api/v2/table_metadata/";
+
+export enum TableSortOption {
+  NAME = "name",
+  REPLICATION_SIZE = "replicationSize",
+  RANGES = "ranges",
+  LIVE_DATA = "liveData",
+  COLUMNS = "columns",
+  INDEXES = "indexes",
+  LAST_UPDATED = "lastUpdated",
+}
+
+export type TableMetadata = {
+  db_id: number;
+  db_name: string;
+  table_id: number;
+  schema_name: string;
+  table_name: string;
+  replication_size_bytes: number;
+  range_count: number;
+  column_count: number;
+  index_count: number;
+  percent_live_data: number;
+  total_live_data_bytes: number;
+  total_data_bytes: number;
+  store_ids: number[];
+  last_updated: string;
+};
+
+type TableMetadataResponse = APIV2ResponseWithPaginationState<TableMetadata[]>;
+
+export type TableMetadataRequest = {
+  dbId?: number;
+  sortBy?: string;
+  sortOrder?: "asc" | "desc";
+  storeIds?: StoreID[];
+  pagination: SimplePaginationState;
+  name?: string;
+};
+
+export async function getTableMetadata(
+  req: TableMetadataRequest,
+): Promise<TableMetadataResponse> {
+  const urlParams = new URLSearchParams();
+  if (req.dbId) {
+    urlParams.append("dbId", req.dbId.toString());
+  }
+  if (req.sortBy) {
+    urlParams.append("sortBy", req.sortBy);
+  }
+  if (req.sortOrder) {
+    urlParams.append("sortOrder", req.sortOrder);
+  }
+  if (req.pagination.pageSize) {
+    urlParams.append("pageSize", req.pagination.pageSize.toString());
+  }
+  if (req.pagination.pageNum) {
+    urlParams.append("pageNum", req.pagination.pageNum.toString());
+  }
+  if (req.storeIds) {
+    req.storeIds.forEach(storeID => {
+      urlParams.append("storeId", storeID.toString());
+    });
+  }
+  if (req.name) {
+    urlParams.append("name", req.name);
+  }
+  return fetchDataJSON(TABLE_METADATA_API_PATH + "?" + urlParams.toString());
+}
+
+const createKey = (req: TableMetadataRequest) => {
+  const { dbId, sortBy, sortOrder, pagination, storeIds, name } = req;
+  return [
+    "tableMetadata",
+    dbId,
+    sortBy,
+    sortOrder,
+    pagination.pageSize,
+    pagination.pageNum,
+    storeIds,
+    name,
+  ].join("|");
+};
+
+export const useTableMetadata = (req: TableMetadataRequest) => {
+  const key = createKey(req);
+  const { data, error, isLoading } = useSWR<TableMetadataResponse>(key, () =>
+    getTableMetadata(req),
+  );
+
+  return { data, error, isLoading };
+};

pkg/ui/workspaces/cluster-ui/src/api/types.ts

@@ -43,6 +43,6 @@ export type APIV2PaginationResponse = {
 };
 
 export type APIV2ResponseWithPaginationState<T> = {
-  results: T[];
+  results: T;
   pagination_info: APIV2PaginationResponse;
 };

pkg/ui/workspaces/cluster-ui/src/databaseDetailsV2/constants.ts

@@ -15,6 +15,5 @@ export enum TableColName {
   COLUMN_COUNT = "Columns",
   NODE_REGIONS = "Regions / Nodes",
   LIVE_DATA_PERCENTAGE = "% of Live data",
-  AUTO_STATS_COLLECTION = "Table auto stats collection",
   STATS_LAST_UPDATED = "Stats last updated",
 }

pkg/ui/workspaces/cluster-ui/src/databaseDetailsV2/index.tsx

@@ -26,6 +26,7 @@ enum TabKeys {
 export const DatabaseDetailsPageV2 = () => {
   const [currentTab, setCurrentTab] = useState(TabKeys.TABLES);
 
+  // TODO (xinhaoz) #131119 - Populate db name here.
   return (
     <PageLayout>
       <PageHeader title="myDB" />