Remove console logs and errors from model tab (#16455)

This commit is contained in:
yuneng-jiang
2025-11-21 16:45:11 -08:00
committed by GitHub
parent 5cfacb96e6
commit 49e331329b
2 changed files with 85 additions and 56 deletions
@@ -0,0 +1,83 @@
/* @vitest-environment jsdom */
import { render } from "@testing-library/react";
import { describe, it, expect, vi } from "vitest";
import ModelsAndEndpointsView from "./ModelsAndEndpointsView";
// Minimal stubs to avoid Next.js router and network usage during render
vi.mock("@/components/networking", () => ({
credentialListCall: vi.fn().mockResolvedValue({ credentials: [] }),
modelInfoCall: vi.fn().mockResolvedValue({ data: [] }),
modelCostMap: vi.fn().mockResolvedValue({}),
modelMetricsCall: vi.fn().mockResolvedValue({ data: [], all_api_bases: [] }),
streamingModelMetricsCall: vi.fn().mockResolvedValue({ data: [], all_api_bases: [] }),
modelExceptionsCall: vi.fn().mockResolvedValue({ data: [], exception_types: [] }),
modelMetricsSlowResponsesCall: vi.fn().mockResolvedValue([]),
getCallbacksCall: vi.fn().mockResolvedValue({ router_settings: {} }),
setCallbacksCall: vi.fn().mockResolvedValue(undefined),
modelSettingsCall: vi.fn().mockResolvedValue([]),
adminGlobalActivityExceptions: vi.fn().mockResolvedValue({ sum_num_rate_limit_exceptions: 0, daily_data: [] }),
adminGlobalActivityExceptionsPerDeployment: vi.fn().mockResolvedValue([]),
allEndUsersCall: vi.fn().mockResolvedValue([]),
latestHealthChecksCall: vi.fn().mockResolvedValue({ latest_health_checks: {} }),
getPassThroughEndpointsCall: vi.fn().mockResolvedValue({ endpoints: {} }),
getGuardrailsList: vi.fn().mockResolvedValue([]),
tagListCall: vi.fn().mockResolvedValue([]),
modelAvailableCall: vi.fn().mockResolvedValue({ data: [] }),
modelHubCall: vi.fn().mockResolvedValue({ data: [] }),
getModelCostMapReloadStatus: vi.fn().mockResolvedValue({
scheduled: false,
interval_hours: null,
last_run: null,
next_run: null,
}),
}));
vi.mock("@/app/(dashboard)/models-and-endpoints/components/ModelAnalyticsTab/ModelAnalyticsTab", () => ({
default: () => null,
}));
vi.mock("@/app/(dashboard)/hooks/useAuthorized", () => ({
default: () => ({
token: "123",
accessToken: "123",
userId: "user-1",
userEmail: "user@example.com",
userRole: "Admin",
premiumUser: false,
disabledPersonalKeyCreation: null,
showSSOBanner: false,
}),
}));
vi.mock("@/app/(dashboard)/hooks/useTeams", () => ({
default: () => ({
teams: [],
setTeams: vi.fn(),
}),
}));
describe("ModelsAndEndpointsView", () => {
it("should render the models and endpoints view", () => {
// JSDOM polyfill for libraries expecting ResizeObserver (e.g., recharts)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(global as any).ResizeObserver = class {
observe() {}
unobserve() {}
disconnect() {}
};
const { getByText } = render(
<ModelsAndEndpointsView
accessToken="123"
token="123"
userRole="123"
userID="123"
modelData={{ data: [] }}
keys={[]}
setModelData={() => {}}
premiumUser={false}
teams={[]}
/>,
);
expect(getByText("Model Management")).toBeInTheDocument();
});
});
@@ -155,16 +155,14 @@ const ModelsAndEndpointsView: React.FC<ModelDashboardProps> = ({
const setProviderModelsFn = (provider: Providers) => {
const _providerModels = getProviderModels(provider, modelMap);
setProviderModels(_providerModels);
console.log(`providerModels: ${_providerModels}`);
};
const fetchCredentials = async (accessToken: string) => {
try {
const response: CredentialsResponse = await credentialListCall(accessToken);
console.log(`credentials: ${JSON.stringify(response)}`);
setCredentialsList(response.credentials);
} catch (error) {
console.error("Error fetching credentials:", error);
NotificationsManager.fromBackend("Error fetching credentials");
}
};
@@ -188,9 +186,7 @@ const ModelsAndEndpointsView: React.FC<ModelDashboardProps> = ({
reader.onload = (e) => {
if (e.target) {
const jsonStr = e.target.result as string;
console.log(`Resetting vertex_credentials to JSON; jsonStr: ${jsonStr}`);
addModelForm.setFieldsValue({ vertex_credentials: jsonStr });
console.log("Form values right after setting:", addModelForm.getFieldsValue());
}
};
reader.readAsText(file);
@@ -199,12 +195,6 @@ const ModelsAndEndpointsView: React.FC<ModelDashboardProps> = ({
return false;
},
onChange(info) {
console.log("Upload onChange triggered with values:", info);
console.log("Current form values:", addModelForm.getFieldsValue());
if (info.file.status !== "uploading") {
console.log(info.file, info.fileList);
}
if (info.file.status === "done") {
NotificationsManager.success(`${info.file.name} file uploaded successfully`);
} else if (info.file.status === "error") {
@@ -221,7 +211,6 @@ const ModelsAndEndpointsView: React.FC<ModelDashboardProps> = ({
const handleSaveRetrySettings = async () => {
if (!accessToken) {
console.error("Access token is missing");
return;
}
@@ -232,14 +221,11 @@ const ModelsAndEndpointsView: React.FC<ModelDashboardProps> = ({
if (selectedModelGroup === "global") {
// Only update global retry policy
console.log("Saving global retry policy:", globalRetryPolicy);
if (globalRetryPolicy) {
payload.router_settings.retry_policy = globalRetryPolicy;
}
NotificationsManager.success("Global retry settings saved successfully");
} else {
// Only update model group retry policy
console.log("Saving model group retry policy for", selectedModelGroup, ":", modelGroupRetryPolicy);
if (modelGroupRetryPolicy) {
payload.router_settings.model_group_retry_policy = modelGroupRetryPolicy;
}
@@ -248,7 +234,6 @@ const ModelsAndEndpointsView: React.FC<ModelDashboardProps> = ({
await setCallbacksCall(accessToken, payload);
} catch (error) {
console.error("Failed to save retry settings:", error);
NotificationsManager.fromBackend("Failed to save retry settings");
}
};
@@ -261,7 +246,6 @@ const ModelsAndEndpointsView: React.FC<ModelDashboardProps> = ({
try {
// Replace with your actual API call for model data
const modelDataResponse = await modelInfoCall(accessToken, userID, userRole);
console.log("Model data response:", modelDataResponse.data);
setModelData(modelDataResponse);
const _providerSettings = await modelSettingsCall(accessToken);
if (_providerSettings) {
@@ -274,7 +258,6 @@ const ModelsAndEndpointsView: React.FC<ModelDashboardProps> = ({
const model = modelDataResponse.data[i];
all_model_groups.add(model.model_name);
}
console.log("all_model_groups:", all_model_groups);
let _array_model_groups = Array.from(all_model_groups);
// sort _array_model_groups alphabetically
_array_model_groups = _array_model_groups.sort();
@@ -297,17 +280,11 @@ const ModelsAndEndpointsView: React.FC<ModelDashboardProps> = ({
setAvailableModelAccessGroups(Array.from(all_model_access_groups));
console.log("array_model_groups:", _array_model_groups);
let _initial_model_group = "all";
if (_array_model_groups.length > 0) {
// set selectedModelGroup to the last model group
_initial_model_group = _array_model_groups[_array_model_groups.length - 1];
console.log("_initial_model_group:", _initial_model_group);
//setSelectedModelGroup(_initial_model_group);
}
console.log("selectedModelGroup:", selectedModelGroup);
const modelMetricsResponse = await modelMetricsCall(
accessToken,
userID,
@@ -319,9 +296,6 @@ const ModelsAndEndpointsView: React.FC<ModelDashboardProps> = ({
selectedCustomer,
);
console.log("Model metrics response:", modelMetricsResponse);
// Sort by latency (avg_latency_per_token)
setModelMetrics(modelMetricsResponse.data);
setModelMetricsCategories(modelMetricsResponse.all_api_bases);
@@ -346,7 +320,6 @@ const ModelsAndEndpointsView: React.FC<ModelDashboardProps> = ({
selectedAPIKey?.token,
selectedCustomer,
);
console.log("Model exceptions response:", modelExceptionsResponse);
setModelExceptions(modelExceptionsResponse.data);
setAllExceptions(modelExceptionsResponse.exception_types);
@@ -378,30 +351,15 @@ const ModelsAndEndpointsView: React.FC<ModelDashboardProps> = ({
);
setGlobalExceptionPerDeployment(dailyExceptionsPerDeplyment);
console.log("dailyExceptions:", dailyExceptions);
console.log("dailyExceptionsPerDeplyment:", dailyExceptionsPerDeplyment);
console.log("slowResponses:", slowResponses);
setSlowResponsesData(slowResponses);
let all_end_users_data = await allEndUsersCall(accessToken);
setAllEndUsers(all_end_users_data?.map((u: any) => u.user_id));
const routerSettingsInfo = await getCallbacksCall(accessToken, userID, userRole);
let router_settings = routerSettingsInfo.router_settings;
console.log("routerSettingsInfo:", router_settings);
``;
let model_group_retry_policy = router_settings.model_group_retry_policy;
let default_retries = router_settings.num_retries;
console.log("model_group_retry_policy:", model_group_retry_policy);
console.log("default_retries:", default_retries);
setModelGroupRetryPolicy(model_group_retry_policy);
setGlobalRetryPolicy(router_settings.retry_policy);
setDefaultRetry(default_retries);
@@ -410,7 +368,7 @@ const ModelsAndEndpointsView: React.FC<ModelDashboardProps> = ({
const model_group_alias = router_settings.model_group_alias || {};
setModelGroupAlias(model_group_alias);
} catch (error) {
console.error("There was an error fetching the model data", error);
NotificationsManager.fromBackend("Error fetching model data: " + error);
}
};
@@ -420,7 +378,6 @@ const ModelsAndEndpointsView: React.FC<ModelDashboardProps> = ({
const fetchModelMap = async () => {
const data = await modelCostMap(accessToken);
console.log(`received model cost map data: ${Object.keys(data)}`);
setModelMap(data);
};
if (modelMap == null) {
@@ -461,7 +418,6 @@ const ModelsAndEndpointsView: React.FC<ModelDashboardProps> = ({
* - check if model in model map
* - return it's litellm_provider, if so
*/
console.log(`GET PROVIDER CALLED! - ${modelMap}`);
if (modelMap !== null && modelMap !== undefined) {
if (typeof modelMap == "object" && model in modelMap) {
return modelMap[model]["litellm_provider"];
@@ -522,8 +478,6 @@ const ModelsAndEndpointsView: React.FC<ModelDashboardProps> = ({
modelData.data[i].cleanedLitellmParams = cleanedLitellmParams;
all_models_on_proxy.push(curr_model.model_name);
console.log(modelData.data[i]);
}
// when users click request access show pop up to allow them to request access
@@ -578,18 +532,12 @@ const ModelsAndEndpointsView: React.FC<ModelDashboardProps> = ({
};
const handleOk = () => {
console.log("🚀 handleOk called from model dashboard!");
console.log("Current form values:", addModelForm.getFieldsValue());
addModelForm
.validateFields()
.then((values: any) => {
console.log("✅ Validation passed, submitting:", values);
handleAddModelSubmit(values, accessToken, addModelForm, handleRefreshClick);
})
.catch((error: any) => {
console.error("❌ Validation failed:", error);
console.error("Form errors:", error.errorFields);
const errorMessages =
error.errorFields
?.map((field: any) => {
@@ -600,8 +548,6 @@ const ModelsAndEndpointsView: React.FC<ModelDashboardProps> = ({
});
};
console.log(`selectedProvider: ${selectedProvider}`);
console.log(`providerModels.length: ${providerModels.length}`);
Object.keys(Providers).find((key) => (Providers as { [index: string]: any })[key] === selectedProvider);
// If a team is selected, render TeamInfoView in full page layout
if (selectedTeamId) {