cluster-ui: simplify column sorting logic in v2 dbs

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
cockroachdb · Sep 20, 2024 · 82b7f56 · 82b7f56
1 parent 04783da
commit 82b7f56
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[] => {