diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.test.tsx index 7e47be3f5d1..a5eb149e1f0 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.test.tsx @@ -1,8 +1,10 @@ import * as useAuthorizedModule from "@/app/(dashboard)/hooks/useAuthorized"; -import { fireEvent, render, screen, waitFor, within } from "@testing-library/react"; +import { fireEvent, screen, waitFor, within } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; -import { beforeEach, describe, expect, it, vi } from "vitest"; +import type { OnUrlUpdateFunction } from "nuqs/adapters/testing"; +import { beforeEach, describe, expect, it, Mock, vi } from "vitest"; +import { renderWithProviders } from "../../../../../tests/test-utils"; import AllModelsTab from "./AllModelsTab"; import { STATUS_COLUMN_ID, toServerSortField } from "./ModelsTableColumns"; @@ -111,6 +113,9 @@ const setModelsInfo = (rows: Record[], totalCount = rows.length const lastModelsInfoCall = (): ModelsInfoArgs => modelsInfoCalls[modelsInfoCalls.length - 1]; +const lastUrlParams = (onUrlUpdate: Mock): URLSearchParams | undefined => + onUrlUpdate.mock.calls.at(-1)?.[0].searchParams; + const SEARCH_SETTLE_MS = 400; const MOCK_AUTHORIZED = { @@ -121,6 +126,8 @@ const MOCK_AUTHORIZED = { userId: "user-123", userEmail: "test@example.com", userRole: "Admin", + userRoleLabel: "Admin", + isViewOnly: false, premiumUser: true, disabledPersonalKeyCreation: false, showSSOBanner: false, @@ -149,14 +156,14 @@ describe("AllModelsTab", () => { it("renders the fetched models and the server row count", async () => { setModelsInfo([makeRow()], 137); - render(); + renderWithProviders(); expect(await screen.findByText("gpt-4")).toBeInTheDocument(); expect(screen.getByTestId("pagination-range")).toHaveTextContent("Showing 1-50 of 137"); }); it("does not re-query after the mount-time debounced search settles unchanged", async () => { - render(); + renderWithProviders(); const callsAfterMount = modelsInfoCalls.length; await new Promise((resolve) => setTimeout(resolve, SEARCH_SETTLE_MS)); @@ -166,14 +173,14 @@ describe("AllModelsTab", () => { it("shows the empty state when the proxy returns no models", () => { setModelsInfo([], 0); - render(); + renderWithProviders(); expect(screen.getByText("No models found")).toBeInTheDocument(); }); it("shows the loading skeleton while the first page is in flight", () => { setModelsInfo([], 0, true); - render(); + renderWithProviders(); expect(screen.getAllByTestId("skeleton-row").length).toBeGreaterThan(0); expect(screen.queryByText("No models found")).not.toBeInTheDocument(); @@ -197,7 +204,7 @@ describe("AllModelsTab", () => { it.each(cases)("sorts %s using the server field %s", async (_label, columnId, serverField, firstDirection) => { const user = userEvent.setup(); - render(); + renderWithProviders(); await user.click(sortHeader(columnId)); await expectIndicator(columnId, firstDirection); @@ -212,7 +219,7 @@ describe("AllModelsTab", () => { it("cycles a sorted column back to unsorted", async () => { const user = userEvent.setup(); - render(); + renderWithProviders(); await user.click(sortHeader("model_info_updated_at")); await expectIndicator("model_info_updated_at", "asc"); @@ -230,7 +237,7 @@ describe("AllModelsTab", () => { it("queries the selected team and resets to the first page", async () => { const user = userEvent.setup(); - render(); + renderWithProviders(); expect(lastModelsInfoCall().teamId).toBeUndefined(); @@ -244,8 +251,7 @@ describe("AllModelsTab", () => { }); it("debounces the model name search into the server query", async () => { - const user = userEvent.setup(); - render(); + renderWithProviders(); fireEvent.change(screen.getByTestId("datatable-search"), { target: { value: "claude" } }); @@ -254,9 +260,138 @@ describe("AllModelsTab", () => { }); }); + describe("URL persistence", () => { + it("writes the typed search to the URL and drops the page so a reload keeps the search", async () => { + setModelsInfo([makeRow()], 200); + const onUrlUpdate = vi.fn(); + renderWithProviders(, { searchParams: { page: "3" }, onUrlUpdate }); + expect(lastModelsInfoCall().page).toBe(3); + + fireEvent.change(screen.getByTestId("datatable-search"), { target: { value: "claude" } }); + + await waitFor(() => { + expect(lastUrlParams(onUrlUpdate)?.get("model_search")).toBe("claude"); + }); + expect(lastUrlParams(onUrlUpdate)?.get("page")).toBeNull(); + await waitFor(() => { + expect(lastModelsInfoCall().page).toBe(1); + }); + }); + + it("restores the search box and server query from ?model_search= on mount", () => { + renderWithProviders(, { searchParams: { model_search: "haiku" } }); + + expect(screen.getByTestId("datatable-search")).toHaveValue("haiku"); + expect(lastModelsInfoCall().search).toBe("haiku"); + }); + + it("restores team, sort, page and page size from the URL into the server query", () => { + setModelsInfo([makeRow()], 200); + renderWithProviders(, { + searchParams: { + filter_team: "team-1", + sort_by: "model_info_updated_at", + sort_order: "desc", + page: "2", + page_size: "25", + }, + }); + + const expectedQuery: ModelsInfoArgs = { + teamId: "team-1", + sortBy: "updated_at", + sortOrder: "desc", + page: 2, + size: 25, + }; + expect(lastModelsInfoCall()).toMatchObject(expectedQuery); + expect(screen.getByTestId("models-team-select")).toHaveTextContent("Engineering"); + }); + + it("restores the access group and view mode from the URL", () => { + renderWithProviders(, { + searchParams: { access_group: "sales-team", view_mode: "all" }, + }); + + expect(lastModelsInfoCall().accessGroup).toBe("sales-team"); + expect(screen.queryByText(/To access these models/)).not.toBeInTheDocument(); + }); + + it("clamps a hand-edited page and page size into the range the table supports", () => { + renderWithProviders(, { searchParams: { page: "0", page_size: "5000" } }); + + expect(lastModelsInfoCall().page).toBe(1); + expect(lastModelsInfoCall().size).toBe(100); + }); + + it("keeps the default page size when the URL value is not a number", () => { + renderWithProviders(, { searchParams: { page_size: "lots" } }); + + expect(lastModelsInfoCall().size).toBe(50); + }); + + it("ignores a sort_by the table cannot sort by instead of forwarding it to the server", () => { + renderWithProviders(, { + searchParams: { sort_by: "litellm_credential_name", sort_order: "desc" }, + }); + + expect(lastModelsInfoCall().sortBy).toBeUndefined(); + expect(lastModelsInfoCall().sortOrder).toBeUndefined(); + }); + + it("writes sort changes to the URL with the page cleared", async () => { + setModelsInfo([makeRow()], 200); + const user = userEvent.setup(); + const onUrlUpdate = vi.fn(); + renderWithProviders(, { searchParams: { page: "2" }, onUrlUpdate }); + + await user.click(screen.getByTestId("sort-header-model_info_updated_at")); + + await waitFor(() => { + expect(lastUrlParams(onUrlUpdate)?.get("sort_by")).toBe("model_info_updated_at"); + }); + expect(lastUrlParams(onUrlUpdate)?.get("sort_order")).toBeNull(); + expect(lastUrlParams(onUrlUpdate)?.get("page")).toBeNull(); + + await user.click(screen.getByTestId("sort-header-model_info_updated_at")); + + await waitFor(() => { + expect(lastUrlParams(onUrlUpdate)?.get("sort_order")).toBe("desc"); + }); + }); + + it("clears every table param from the URL on drawer reset", async () => { + setModelsInfo([makeRow()], 200); + const user = userEvent.setup(); + const onUrlUpdate = vi.fn(); + renderWithProviders(, { + searchParams: { + model_search: "haiku", + filter_team: "team-1", + sort_by: "model_name", + page: "2", + view_mode: "all", + }, + onUrlUpdate, + }); + + await user.click(screen.getByTestId("datatable-filters-trigger")); + await user.click(await screen.findByTestId("filter-drawer-reset")); + + await waitFor(() => { + expect(lastUrlParams(onUrlUpdate)?.toString()).toBe(""); + }); + expect(screen.getByTestId("datatable-search")).toHaveValue(""); + const defaultQuery: ModelsInfoArgs = { search: undefined, teamId: undefined, sortBy: undefined, page: 1 }; + await waitFor(() => { + expect(lastModelsInfoCall()).toMatchObject(defaultQuery); + }); + }); + }); + it("applies a public model name filter through the drawer", async () => { const user = userEvent.setup(); - render(); + renderWithProviders(); await user.click(screen.getByTestId("datatable-filters-trigger")); await user.click(await screen.findByPlaceholderText("Filter by Public Model Name")); @@ -270,7 +405,7 @@ describe("AllModelsTab", () => { it("renders every row the server returned for the selected model group so rows match the footer total", () => { setModelsInfo([makeRow(), { ...makeRow({ model_info: { id: "model-2" } }), model_name: "claude-opus" }], 2); - render(); + renderWithProviders(); const table = screen.getByRole("table"); expect(within(table).getByText("claude-opus")).toBeInTheDocument(); @@ -280,7 +415,7 @@ describe("AllModelsTab", () => { it("asks the server for wildcard deployments instead of hiding rows client-side", () => { setModelsInfo([makeRow(), { ...makeRow({ model_info: { id: "model-2" } }), model_name: "openai/*" }], 2); - render(); + renderWithProviders(); expect(lastModelsInfoCall().wildcardOnly).toBe(true); expect(within(screen.getByRole("table")).getByText("gpt-4")).toBeInTheDocument(); @@ -289,7 +424,7 @@ describe("AllModelsTab", () => { it("asks the server for the selected access group instead of hiding rows client-side", async () => { const user = userEvent.setup(); - render(); + renderWithProviders(); expect(lastModelsInfoCall().wildcardOnly).toBe(false); await user.click(screen.getByTestId("datatable-filters-trigger")); @@ -303,20 +438,20 @@ describe("AllModelsTab", () => { }); it("asks the server for the exact selected model group so deployments beyond the first page are found", () => { - render(); + renderWithProviders(); expect(lastModelsInfoCall().modelName).toBe("claude-opus"); expect(lastModelsInfoCall().search).toBeUndefined(); }); it.each(["all", "wildcard"])("sends no exact model name for the %s pseudo group", (group) => { - render(); + renderWithProviders(); expect(lastModelsInfoCall().modelName).toBeUndefined(); }); it("keeps the exact model group alongside a typed search", async () => { - render(); + renderWithProviders(); fireEvent.change(screen.getByPlaceholderText("Search model names…"), { target: { value: "opus" } }); @@ -326,7 +461,7 @@ describe("AllModelsTab", () => { it("resets search, filters, team and sorting from the drawer reset button", async () => { const user = userEvent.setup(); - render(); + renderWithProviders(); await user.click(screen.getByTestId("models-team-select")); await user.click(await screen.findByRole("option", { name: "Engineering" })); @@ -343,7 +478,7 @@ describe("AllModelsTab", () => { it("opens the delete modal from the row and deletes the model", async () => { const user = userEvent.setup(); - render(); + renderWithProviders(); await user.click(await screen.findByTestId("model-delete-model-1")); expect(await screen.findByText("Delete Model")).toBeInTheDocument(); @@ -357,7 +492,7 @@ describe("AllModelsTab", () => { it("pauses a model through the row toggle", async () => { const user = userEvent.setup(); - render(); + renderWithProviders(); await user.click(await screen.findByTestId("model-pause-toggle-model-1")); @@ -368,7 +503,7 @@ describe("AllModelsTab", () => { it("opens the model settings modal from the toolbar", async () => { const user = userEvent.setup(); - render(); + renderWithProviders(); expect(screen.queryByTestId("model-settings-modal")).not.toBeInTheDocument(); await user.click(screen.getByTestId("models-settings-trigger")); @@ -377,7 +512,7 @@ describe("AllModelsTab", () => { it("opens the model detail view from the model ID cell", async () => { const user = userEvent.setup(); - render(); + renderWithProviders(); await user.click(await screen.findByTestId("model-id-model-1")); @@ -386,7 +521,7 @@ describe("AllModelsTab", () => { it("opens the team detail view from the team ID cell", async () => { const user = userEvent.setup(); - render(); + renderWithProviders(); await user.click(await screen.findByTestId("model-team-id-model-1")); @@ -395,20 +530,20 @@ describe("AllModelsTab", () => { describe("virtual key hint", () => { it("explains personal key creation while viewing current team models", () => { - render(); + renderWithProviders(); expect(screen.getByText(/create a Virtual Key without selecting a team/i)).toBeInTheDocument(); }); it("links the Virtual Keys page through the migrated /ui route", () => { - render(); + renderWithProviders(); expect(screen.getByRole("link", { name: "Virtual Keys page" })).toHaveAttribute("href", "/ui/api-keys"); }); it("links the team hint's Virtual Keys page through the migrated /ui route", async () => { const user = userEvent.setup(); - render(); + renderWithProviders(); await user.click(screen.getByTestId("models-team-select")); await user.click(await screen.findByRole("option", { name: "Engineering" })); @@ -419,7 +554,7 @@ describe("AllModelsTab", () => { it("names the selected team in the hint", async () => { const user = userEvent.setup(); - render(); + renderWithProviders(); await user.click(screen.getByTestId("models-team-select")); await user.click(await screen.findByRole("option", { name: "Engineering" })); @@ -429,7 +564,7 @@ describe("AllModelsTab", () => { it("hides the hint when viewing all available models", async () => { const user = userEvent.setup(); - render(); + renderWithProviders(); await user.click(screen.getByTestId("models-view-select")); await user.click(await screen.findByRole("option", { name: "All Available Models" })); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.tsx b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.tsx index ccb9f90f9a3..2217bca0fa0 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/AllModelsTab.tsx @@ -10,10 +10,11 @@ import { toast } from "@/lib/toast"; import { uiHref } from "@/utils/uiHref"; import { modelDeleteCall, modelPatchUpdateCall } from "@/components/networking"; import { useQueryClient } from "@tanstack/react-query"; -import { useDebouncedCallback } from "@tanstack/react-pacer/debouncer"; -import { ColumnFiltersState, OnChangeFn, PaginationState, SortingState } from "@tanstack/react-table"; +import { useDebouncedValue } from "@tanstack/react-pacer/debouncer"; +import { ColumnFiltersState, functionalUpdate, OnChangeFn, PaginationState, SortingState } from "@tanstack/react-table"; import { Info } from "lucide-react"; -import { useCallback, useEffect, useMemo, useState } from "react"; +import { createParser, parseAsInteger, parseAsString, parseAsStringLiteral, useQueryStates } from "nuqs"; +import { useCallback, useMemo, useState } from "react"; import { useModelsInfo } from "../../hooks/models/useModels"; import { transformModelData } from "../utils/modelDataTransformer"; @@ -24,11 +25,40 @@ import { PERSONAL_TEAM_VALUE, WILDCARD_MODEL_GROUP_VALUE, } from "./AllModelsTable"; -import { ACCESS_GROUPS_COLUMN_ID, MODEL_NAME_COLUMN_ID, toServerSortField } from "./ModelsTableColumns"; +import { + ACCESS_GROUPS_COLUMN_ID, + isModelTableSortColumnId, + MODEL_NAME_COLUMN_ID, + MODEL_TABLE_SORT_COLUMN_IDS, + toServerSortField, +} from "./ModelsTableColumns"; const SEARCH_DEBOUNCE_WAIT_MS = 200; const DEFAULT_PAGE_SIZE = 50; -const DEFAULT_PAGINATION: PaginationState = { pageIndex: 0, pageSize: DEFAULT_PAGE_SIZE }; +const MAX_PAGE_SIZE = 100; +const MAX_PAGE = 100_000; + +const MODEL_VIEW_MODES = ["current_team", "all"] as const satisfies readonly ModelViewMode[]; + +const boundedInteger = (min: number, max: number, fallback: number) => + createParser({ + parse: (value: string) => { + const parsed = parseAsInteger.parse(value); + return parsed === null ? null : Math.min(Math.max(parsed, min), max); + }, + serialize: String, + }).withDefault(fallback); + +const TABLE_STATE = { + model_search: parseAsString.withDefault(""), + view_mode: parseAsStringLiteral(MODEL_VIEW_MODES).withDefault("current_team"), + filter_team: parseAsString.withDefault(PERSONAL_TEAM_VALUE), + access_group: parseAsString.withDefault(""), + sort_by: parseAsStringLiteral(MODEL_TABLE_SORT_COLUMN_IDS), + sort_order: parseAsStringLiteral(["asc", "desc"] as const).withDefault("asc"), + page: boundedInteger(1, MAX_PAGE, 1), + page_size: boundedInteger(1, MAX_PAGE_SIZE, DEFAULT_PAGE_SIZE), +}; interface AllModelsTabProps { selectedModelGroup: string | null; @@ -52,34 +82,25 @@ const AllModelsTab = ({ const { data: teams, isLoading: isLoadingTeams } = useTeams(); const queryClient = useQueryClient(); - const [modelNameSearch, setModelNameSearch] = useState(""); - const [debouncedSearch, setDebouncedSearch] = useState(""); - const [modelViewMode, setModelViewMode] = useState("current_team"); - const [selectedTeamValue, setSelectedTeamValue] = useState(PERSONAL_TEAM_VALUE); - const [selectedModelAccessGroupFilter, setSelectedModelAccessGroupFilter] = useState(null); - const [pagination, setPagination] = useState(DEFAULT_PAGINATION); - const [sorting, setSorting] = useState([]); + const [tableState, setTableState] = useQueryStates(TABLE_STATE); + const modelNameSearch = tableState.model_search; + const [debouncedSearch] = useDebouncedValue(modelNameSearch, { wait: SEARCH_DEBOUNCE_WAIT_MS }); + const modelViewMode = tableState.view_mode; + const selectedTeamValue = tableState.filter_team; + const selectedModelAccessGroupFilter = tableState.access_group || null; + const pagination = useMemo( + () => ({ pageIndex: tableState.page - 1, pageSize: tableState.page_size }), + [tableState.page, tableState.page_size], + ); + const sorting = useMemo( + () => (tableState.sort_by ? [{ id: tableState.sort_by, desc: tableState.sort_order === "desc" }] : []), + [tableState.sort_by, tableState.sort_order], + ); const [isModelSettingsModalVisible, setIsModelSettingsModalVisible] = useState(false); const [deleteModalModelId, setDeleteModalModelId] = useState(null); const [deleteLoading, setDeleteLoading] = useState(false); const [pausingModelId, setPausingModelId] = useState(null); - const resetToFirstPage = useCallback(() => { - setPagination((previous) => (previous.pageIndex === 0 ? previous : { ...previous, pageIndex: 0 })); - }, []); - - const debouncedUpdateSearch = useDebouncedCallback( - (value: string) => { - setDebouncedSearch(value); - resetToFirstPage(); - }, - { wait: SEARCH_DEBOUNCE_WAIT_MS }, - ); - - useEffect(() => { - debouncedUpdateSearch(modelNameSearch); - }, [modelNameSearch, debouncedUpdateSearch]); - const teamIdForQuery = selectedTeamValue === PERSONAL_TEAM_VALUE ? undefined : selectedTeamValue; const isConcreteModelGroup = Boolean(selectedModelGroup) && @@ -152,33 +173,49 @@ const AllModelsTab = ({ [selectedModelGroup, selectedModelAccessGroupFilter], ); + const handleSearchChange = useCallback( + (value: string) => { + void setTableState({ model_search: value || null, page: null }); + }, + [setTableState], + ); + const handleColumnFiltersChange: OnChangeFn = (updater) => { - const next = typeof updater === "function" ? updater(columnFilters) : updater; + const next = functionalUpdate(updater, columnFilters); const modelGroup = next.find((entry) => entry.id === MODEL_NAME_COLUMN_ID)?.value; const accessGroup = next.find((entry) => entry.id === ACCESS_GROUPS_COLUMN_ID)?.value; setSelectedModelGroup(typeof modelGroup === "string" ? modelGroup : ALL_MODEL_GROUPS_VALUE); - setSelectedModelAccessGroupFilter(typeof accessGroup === "string" ? accessGroup : null); - resetToFirstPage(); + void setTableState({ access_group: typeof accessGroup === "string" ? accessGroup : null, page: null }); }; const handleSortingChange: OnChangeFn = (updater) => { - setSorting(typeof updater === "function" ? updater(sorting) : updater); - resetToFirstPage(); + const active = functionalUpdate(updater, sorting)[0]; + void setTableState({ + sort_by: active && isModelTableSortColumnId(active.id) ? active.id : null, + sort_order: active?.desc ? "desc" : null, + page: null, + }); }; + const handlePaginationChange = useCallback>( + (updater) => { + const next = functionalUpdate(updater, pagination); + void setTableState({ page: next.pageIndex + 1, page_size: next.pageSize }); + }, + [pagination, setTableState], + ); + const handleTeamChange = (value: string) => { - setSelectedTeamValue(value); - resetToFirstPage(); + void setTableState({ filter_team: value, page: null }); + }; + + const handleViewModeChange = (value: ModelViewMode) => { + void setTableState({ view_mode: value }); }; const resetFilters = () => { - setModelNameSearch(""); setSelectedModelGroup(ALL_MODEL_GROUPS_VALUE); - setSelectedModelAccessGroupFilter(null); - setSelectedTeamValue(PERSONAL_TEAM_VALUE); - setModelViewMode("current_team"); - setPagination(DEFAULT_PAGINATION); - setSorting([]); + void setTableState(null); }; const teamOptions = useMemo( @@ -264,18 +301,18 @@ const AllModelsTab = ({ sorting={sorting} onSortingChange={handleSortingChange} pagination={pagination} - onPaginationChange={setPagination} + onPaginationChange={handlePaginationChange} columnFilters={columnFilters} onColumnFiltersChange={handleColumnFiltersChange} onResetFilters={resetFilters} searchValue={modelNameSearch} - onSearchChange={setModelNameSearch} + onSearchChange={handleSearchChange} teamOptions={teamOptions} selectedTeamValue={selectedTeamValue} onTeamChange={handleTeamChange} isLoadingTeams={isLoadingTeams} viewMode={modelViewMode} - onViewModeChange={setModelViewMode} + onViewModeChange={handleViewModeChange} onOpenModelSettings={handleOpenModelSettings} availableModelGroups={availableModelGroups} availableModelAccessGroups={availableModelAccessGroups} diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/ModelsTableColumns.tsx b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/ModelsTableColumns.tsx index 0cc1207e547..c5bab598a8b 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/ModelsTableColumns.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/components/ModelsTableColumns.tsx @@ -24,6 +24,19 @@ export const TEAM_ID_COLUMN_ID = "model_info_team_id"; export const ACCESS_GROUPS_COLUMN_ID = "model_info_access_groups"; export const STATUS_COLUMN_ID = "model_info_db_model"; +export const MODEL_TABLE_SORT_COLUMN_IDS = [ + MODEL_NAME_COLUMN_ID, + CREATED_BY_COLUMN_ID, + UPDATED_AT_COLUMN_ID, + COSTS_COLUMN_ID, + STATUS_COLUMN_ID, +] as const; + +export type ModelTableSortColumnId = (typeof MODEL_TABLE_SORT_COLUMN_IDS)[number]; + +export const isModelTableSortColumnId = (columnId: string): columnId is ModelTableSortColumnId => + (MODEL_TABLE_SORT_COLUMN_IDS as readonly string[]).includes(columnId); + const COLUMN_ID_TO_SERVER_SORT_FIELD: Record = { [COSTS_COLUMN_ID]: "costs", [STATUS_COLUMN_ID]: "status",