Merge #131116

131116: cluster-ui: simplify column sorting logic in v2 dbs r=xinhaoz a=xinhaoz Simplify the column sorting logic. Previously we were mapping column title to sort key. We can just provide the sort key directly in the column definition. Epic: CRDB-37558 Release note: None Co-authored-by: Xin Hao Zhang <[email protected]>
cockroachdb · Sep 20, 2024 · fa87b77 · fa87b77
2 parents 2e318cb + 82b7f56
commit fa87b77
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 48 deletions.
diff --git a/pkg/ui/workspaces/cluster-ui/src/databasesV2/index.tsx b/pkg/ui/workspaces/cluster-ui/src/databasesV2/index.tsx
@@ -36,41 +36,43 @@ import { Bytes } from "src/util";
 
 import { DatabaseColName } from "./constants";
 import { DatabaseRow } from "./databaseTypes";
-import {
-  getColTitleFromSortKey,
-  getSortKeyFromColTitle,
-  rawDatabaseMetadataToDatabaseRows,
-} from "./utils";
+import { rawDatabaseMetadataToDatabaseRows } from "./utils";
 
 const mockRegionOptions = [
   { label: "US East (N. Virginia)", value: "us-east-1" },
   { label: "US East (Ohio)", value: "us-east-2" },
 ];
 
-const COLUMNS: TableColumnProps<DatabaseRow>[] = [
+const COLUMNS: (TableColumnProps<DatabaseRow> & {
+  sortKey?: DatabaseSortOptions;
+})[] = [
   {
     title: DatabaseColName.NAME,
     sorter: true,
+    sortKey: DatabaseSortOptions.NAME,
     render: (db: DatabaseRow) => {
       return <Link to={`/v2/databases/${db.id}`}>{db.name}</Link>;
     },
   },
   {
     title: DatabaseColName.SIZE,
+    sortKey: DatabaseSortOptions.REPLICATION_SIZE,
     sorter: true,
     render: (db: DatabaseRow) => {
       return Bytes(db.approximateDiskSizeBytes);
     },
   },
   {
     title: DatabaseColName.TABLE_COUNT,
+    sortKey: DatabaseSortOptions.TABLE_COUNT,
     sorter: true,
     render: (db: DatabaseRow) => {
       return db.tableCount;
     },
   },
   {
     title: DatabaseColName.RANGE_COUNT,
+    sortKey: DatabaseSortOptions.RANGES,
     sorter: true,
     render: (db: DatabaseRow) => {
       return db.rangeCount;
@@ -157,7 +159,7 @@ export const DatabasesPageV2 = () => {
         return;
       }
       setSort({
-        field: getSortKeyFromColTitle(COLUMNS[colKey].title as DatabaseColName),
+        field: COLUMNS[colKey].sortKey,
         order: sorter.order === "descend" ? "desc" : "asc",
       });
     }
@@ -167,8 +169,7 @@ export const DatabasesPageV2 = () => {
   const colsWithSort = useMemo(
     () =>
       COLUMNS.map((col, i) => {
-        const title = getColTitleFromSortKey(sort.field as DatabaseSortOptions);
-        const colInd = COLUMNS.findIndex(c => c.title === title);
+        const colInd = COLUMNS.findIndex(c => c.title === sort.field);
         const sortOrder: SortDirection =
           sort?.order === "desc" ? "descend" : "ascend";
         return {

diff --git a/pkg/ui/workspaces/cluster-ui/src/databasesV2/utils.ts b/pkg/ui/workspaces/cluster-ui/src/databasesV2/utils.ts
@@ -8,48 +8,10 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
-import {
-  DatabaseMetadata,
-  DatabaseSortOptions,
-} from "src/api/databases/getDatabaseMetadataApi";
+import { DatabaseMetadata } from "src/api/databases/getDatabaseMetadataApi";
 
-import { DatabaseColName } from "./constants";
 import { DatabaseRow } from "./databaseTypes";
 
-export const getSortKeyFromColTitle = (
-  col: DatabaseColName,
-): DatabaseSortOptions => {
-  switch (col) {
-    case DatabaseColName.NAME:
-      return DatabaseSortOptions.NAME;
-    case DatabaseColName.SIZE:
-      return DatabaseSortOptions.REPLICATION_SIZE;
-    case DatabaseColName.RANGE_COUNT:
-      return DatabaseSortOptions.RANGES;
-    case DatabaseColName.TABLE_COUNT:
-      return DatabaseSortOptions.TABLE_COUNT;
-    default:
-      throw new Error(`Unsupported sort column ${col}`);
-  }
-};
-
-export const getColTitleFromSortKey = (
-  sortKey: DatabaseSortOptions,
-): DatabaseColName => {
-  switch (sortKey) {
-    case DatabaseSortOptions.NAME:
-      return DatabaseColName.NAME;
-    case DatabaseSortOptions.REPLICATION_SIZE:
-      return DatabaseColName.SIZE;
-    case DatabaseSortOptions.RANGES:
-      return DatabaseColName.RANGE_COUNT;
-    case DatabaseSortOptions.TABLE_COUNT:
-      return DatabaseColName.TABLE_COUNT;
-    default:
-      return DatabaseColName.NAME;
-  }
-};
-
 export const rawDatabaseMetadataToDatabaseRows = (
   raw: DatabaseMetadata[],
 ): DatabaseRow[] => {