fix: replace broken API config with centralized axios instance by gautamsidhwani29 · Pull Request #268 · volcano-sh/dashboard

gautamsidhwani29 · 2026-05-18T14:28:54Z

Problem

src/config/api.js was created to centralize API configuration but was effectively dead code. It used process.env.APP_SERVER_PORT (not supported in Vite), hardcoded http://localhost:3001 as the base URL (breaking staging and production), and was never imported by any component.

Solution

Rewrote api.js as a single shared axios instance with baseURL: '/api' and migrated all direct fetch/axios calls across the frontend to use it.

Fixes #263

Changes

Replaced broken process.env + hardcoded localhost URL in api.js with a shared axios instance (baseURL: '/api')
Updated API_ENDPOINTS to use relative paths
Replaced all direct fetch/axios calls with apiClient in:
- Dashboard.jsx
- Jobs.jsx
- JobTable.jsx
- Pods.jsx
- QueueTable.jsx
- EditQueueDialog.jsx
- utils.js

Signed-off-by: gautamsidhwani29 <gautamsidhwani405@gmail.com>

volcano-sh-bot · 2026-05-18T14:29:02Z

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign monokaix for approval. For more information see the Kubernetes Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

gemini-code-assist

Code Review

This pull request centralizes frontend API requests by introducing an Axios-based apiClient and an API_ENDPOINTS configuration object. It refactors components like Dashboard, Jobs, Pods, and Queues to use these new utilities instead of direct fetch or axios calls, improving consistency and error handling. The reviewer feedback suggests further improving this architecture by migrating all remaining hardcoded paths to the centralized configuration and moving URL encoding logic into the endpoint helper functions to reduce boilerplate and prevent bugs.

gemini-code-assist · 2026-05-18T14:31:23Z

-                throw new Error(errText);
-            }
+            const response = await apiClient.put(
+                `${API_ENDPOINTS.queues.list}/${updated.metadata.name}`,


Use the detail helper from API_ENDPOINTS. This also ensures the queue name is properly URL-encoded, which was missing in the current implementation.

Suggested change

`${API_ENDPOINTS.queues.list}/${updated.metadata.name}`,

API_ENDPOINTS.queues.detail(updated.metadata.name),

gemini-code-assist · 2026-05-18T14:31:24Z

 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Box, Typography, useTheme } from "@mui/material";
-import axios from "axios";
+import apiClient from "../../config/api";


Import API_ENDPOINTS to use the centralized path constants.

Suggested change

import apiClient from "../../config/api";

import apiClient, { API_ENDPOINTS } from "../../config/api";

gemini-code-assist · 2026-05-18T14:31:24Z

+                apiClient.get("/jobs?limit=1000"),
+                apiClient.get("/queues?limit=1000"),
+                apiClient.get("/pods?limit=1000"),


Use the centralized API_ENDPOINTS constants instead of hardcoded strings.

Suggested change

apiClient.get("/jobs?limit=1000"),

apiClient.get("/queues?limit=1000"),

apiClient.get("/pods?limit=1000"),

apiClient.get(`${API_ENDPOINTS.jobs.list}?limit=1000`),

apiClient.get(`${API_ENDPOINTS.queues.list}?limit=1000`),

apiClient.get(`${API_ENDPOINTS.pods.list}?limit=1000`),

gemini-code-assist · 2026-05-18T14:31:24Z

 export const API_ENDPOINTS = {
    jobs: {
-        list: `${API_CONFIG.baseURL}/api/jobs`,
-        detail: (namespace, name) =>
-            `${API_CONFIG.baseURL}/jobs/${namespace}/${name}`,
+        list: '/jobs',
+        detail: (namespace, name) => `/jobs/${namespace}/${name}`,
    },
    queues: {
-        list: `${API_CONFIG.baseURL}/api/queues`,
+        list: '/queues',
    },
    pods: {
-        list: `${API_CONFIG.baseURL}/api/pods`,
+        list: '/pods',
    },
    podgroups: {
-        list: `${API_CONFIG.baseURL}/api/podgroups`,
+        list: '/podgroups',
    },
-};
+}


To fully leverage the centralized configuration, we should include all used API paths in API_ENDPOINTS. Additionally, moving encodeURIComponent into these helper functions ensures consistency and prevents bugs where developers might forget to encode URL parameters (as seen in some parts of this PR).

export const API_ENDPOINTS = { jobs: { list: '/jobs', detail: (namespace, name) => `/jobs/${encodeURIComponent(namespace)}/${encodeURIComponent(name)}`, yaml: (namespace, name) => `/job/${encodeURIComponent(namespace)}/${encodeURIComponent(name)}/yaml`, }, queues: { list: '/queues', all: '/all-queues', detail: (name) => `/queues/${encodeURIComponent(name)}`, }, pods: { list: '/pods', yaml: (namespace, name) => `/pod/${encodeURIComponent(namespace)}/${encodeURIComponent(name)}/yaml`, }, namespaces: { list: '/namespaces', }, podgroups: { list: '/podgroups', }, };

gemini-code-assist · 2026-05-18T14:31:24Z


        try {
-            const response = await axios.get(`/api/jobs`, {
+            const response = await apiClient.get("/jobs", {


Use the centralized API_ENDPOINTS constant.

Suggested change

const response = await apiClient.get("/jobs", {

const response = await apiClient.get(API_ENDPOINTS.jobs.list, {

gemini-code-assist · 2026-05-18T14:31:24Z

 import DashboardHeader from "./DashboardHeader";
 import StatCardsContainer from "./StatCardsContainer";
 import ChartsContainer from "./ChartsContainer";
+import apiClient from "../../config/api";


Import API_ENDPOINTS to use the centralized path constants.

Suggested change

import apiClient from "../../config/api";

import apiClient, { API_ENDPOINTS } from "../../config/api";

gemini-code-assist · 2026-05-18T14:31:25Z

-                    },
-                },
+            await apiClient.delete(
+                `${API_ENDPOINTS.queues.list}/${encodeURIComponent(queueToDelete)}`


Use the detail helper from API_ENDPOINTS for consistency.

Suggested change

`${API_ENDPOINTS.queues.list}/${encodeURIComponent(queueToDelete)}`

API_ENDPOINTS.queues.detail(queueToDelete)

gemini-code-assist · 2026-05-18T14:31:25Z

@@ -1,15 +1,11 @@
+import apiClient from "../config/api";


Import API_ENDPOINTS to use the centralized path constants.

Suggested change

import apiClient from "../config/api";

import apiClient, { API_ENDPOINTS } from "../config/api";

gemini-code-assist · 2026-05-18T14:31:25Z

-
-        const data = await response.json();
-
+        const response = await apiClient.get("/namespaces");


Use the centralized API_ENDPOINTS constant.

Suggested change

const response = await apiClient.get("/namespaces");

const response = await apiClient.get(API_ENDPOINTS.namespaces.list);

gemini-code-assist · 2026-05-18T14:31:25Z

-
-        const data = await response.json();
-
+        const response = await apiClient.get("/all-queues");


Use the centralized API_ENDPOINTS constant.

Suggested change

const response = await apiClient.get("/all-queues");

const response = await apiClient.get(API_ENDPOINTS.queues.all);

…omponents Signed-off-by: gautamsidhwani29 <gautamsidhwani405@gmail.com>

Signed-off-by: gautamsidhwani29 <gautamsidhwani405@gmail.com>

fix: replace broken API config with centralized axios instance

3e42b61

Signed-off-by: gautamsidhwani29 <gautamsidhwani405@gmail.com>

volcano-sh-bot requested review from JesseStutler and wangyang0616 May 18, 2026 14:29

volcano-sh-bot added the size/L label May 18, 2026

gemini-code-assist Bot reviewed May 18, 2026

View reviewed changes

gautamsidhwani29 added 2 commits May 19, 2026 18:33

fix: address Gemini review - use API_ENDPOINTS constants across all c…

a53aa77

…omponents Signed-off-by: gautamsidhwani29 <gautamsidhwani405@gmail.com>

fix: import path in EditQueueDialog and QueueTable components

0d0df56

Signed-off-by: gautamsidhwani29 <gautamsidhwani405@gmail.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: replace broken API config with centralized axios instance#268

fix: replace broken API config with centralized axios instance#268
gautamsidhwani29 wants to merge 3 commits into
volcano-sh:mainfrom
gautamsidhwani29:fix/centralize-api-config

gautamsidhwani29 commented May 18, 2026

Uh oh!

volcano-sh-bot commented May 18, 2026

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

gemini-code-assist Bot May 18, 2026

Uh oh!

gemini-code-assist Bot May 18, 2026

Uh oh!

gemini-code-assist Bot May 18, 2026

Uh oh!

gemini-code-assist Bot May 18, 2026

Uh oh!

gemini-code-assist Bot May 18, 2026

Uh oh!

gemini-code-assist Bot May 18, 2026

Uh oh!

gemini-code-assist Bot May 18, 2026

Uh oh!

gemini-code-assist Bot May 18, 2026

Uh oh!

gemini-code-assist Bot May 18, 2026

Uh oh!

gemini-code-assist Bot May 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	`${API_ENDPOINTS.queues.list}/${updated.metadata.name}`,
	API_ENDPOINTS.queues.detail(updated.metadata.name),

	import apiClient from "../../config/api";
	import apiClient, { API_ENDPOINTS } from "../../config/api";

	const response = await apiClient.get("/jobs", {
	const response = await apiClient.get(API_ENDPOINTS.jobs.list, {

	`${API_ENDPOINTS.queues.list}/${encodeURIComponent(queueToDelete)}`
	API_ENDPOINTS.queues.detail(queueToDelete)

	import apiClient from "../config/api";
	import apiClient, { API_ENDPOINTS } from "../config/api";


		const data = await response.json();

		const response = await apiClient.get("/namespaces");


		const data = await response.json();

		const response = await apiClient.get("/all-queues");

Conversation

gautamsidhwani29 commented May 18, 2026

Problem

Solution

Changes

Uh oh!

volcano-sh-bot commented May 18, 2026

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot May 18, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot May 18, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot May 18, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot May 18, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot May 18, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot May 18, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot May 18, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot May 18, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot May 18, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot May 18, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants