Merge #130873

130873: cluster-ui: create databases v2 api  r=xinhaoz a=xinhaoz

Only the latest commit should be reviewed in this PR.
Previous: #130704.

--------------------------------------------------------------
This commit introduces the new db metadata api,
`/api/v2/database_metadata/` to the console.
The v2 databases page is hooked up to the new
api. Working in this commit:
- Sorting by name, size and range count
- Pagination

Not working in this commit (future PR):
- Region node filteringn and client side
store id -> node id mapping to get the labels
into the column.
- Populating schema insight count column

The new API and its types are under:
- `/src/api/databases/getDatabaseMetadataApi`

Epic: CRDB-37558

Fixes: #130843

Release note: None

Co-authored-by: Xin Hao Zhang <[email protected]>

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

@@ -0,0 +1,106 @@
+// 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 { fetchDataJSON } from "src/api/fetchData";
+
+import {
+  APIV2ResponseWithPaginationState,
+  SimplePaginationState,
+} from "../types";
+
+const DATABASES_API_V2 = "api/v2/database_metadata/";
+
+export enum DatabaseSortOptions {
+  NAME = "name",
+  REPLICATION_SIZE = "replicationSize",
+  RANGES = "ranges",
+  LIVE_DATA = "liveData",
+  COLUMNS = "columns",
+  INDEXES = "indexes",
+  LAST_UPDATED = "lastUpdated",
+}
+
+export type DatabaseMetadata = {
+  db_id: number;
+  db_name: string;
+  size_bytes: number;
+  table_count: number;
+  store_ids: number[] | null;
+  last_updated: string;
+};
+
+export type DatabaseMetadataRequest = {
+  name?: string;
+  sortBy?: string;
+  sortOrder?: string;
+  pagination: SimplePaginationState;
+  storeId?: number;
+};
+
+export type DatabaseMetadataResponse =
+  APIV2ResponseWithPaginationState<DatabaseMetadata>;
+
+export const getDatabaseMetadata = async (req: DatabaseMetadataRequest) => {
+  const urlParams = new URLSearchParams();
+  if (req.name) {
+    urlParams.append("name", req.name);
+  }
+  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.storeId) {
+    urlParams.append("storeId", req.storeId.toString());
+  }
+
+  return fetchDataJSON<DatabaseMetadataResponse, DatabaseMetadataRequest>(
+    DATABASES_API_V2 + "?" + urlParams.toString(),
+  );
+};
+
+const createKey = (req: DatabaseMetadataRequest) => {
+  const { name, sortBy, sortOrder, pagination, storeId } = req;
+  return [
+    "databaseMetadata",
+    name,
+    sortBy,
+    sortOrder,
+    pagination.pageSize,
+    pagination.pageNum,
+    storeId,
+  ].join("|");
+};
+
+export const useDatabaseMetadata = (req: DatabaseMetadataRequest) => {
+  const { data, error, isLoading } = useSWR<DatabaseMetadataResponse>(
+    createKey(req),
+    () => getDatabaseMetadata(req),
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    },
+  );
+
+  return {
+    data,
+    error,
+    isLoading,
+  };
+};

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

@@ -30,3 +30,19 @@ export function createInitialState<T>(
     ...overrides,
   };
 }
+
+export type SimplePaginationState = {
+  pageSize: number;
+  pageNum: number;
+};
+
+export type APIV2PaginationResponse = {
+  total_results: number;
+  page_size: number;
+  page_num: number;
+};
+
+export type APIV2ResponseWithPaginationState<T> = {
+  results: T[];
+  pagination_info: APIV2PaginationResponse;
+};

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

@@ -0,0 +1,17 @@
+// 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.
+
+export enum DatabaseColName {
+  NAME = "Name",
+  SIZE = "Size",
+  RANGE_COUNT = "Range Count",
+  TABLE_COUNT = "Table Count",
+  NODE_REGIONS = "Regions / Nodes",
+}

pkg/ui/workspaces/cluster-ui/src/databasesV2/databaseTypes.ts

@@ -11,7 +11,7 @@
 export type DatabaseRow = {
   name: string;
   id: number;
-  approximateDiskSizeMiB: number;
+  approximateDiskSizeBytes: number;
   tableCount: number;
   rangeCount: number;
   nodesByRegion: Record<string, number[]>;