feat: reVamping the volcano, dashboard, backend, trpc, turboRepo #174

de6p · 2025-07-07T06:59:19Z

I have completely revamped the Volcano dashboard by migrating it to a modern architecture powered by Next.js, tRPC, shadcn/ui, and Turborepo. With this upgrade, the dashboard now delivers 5 to 10 times better performance compared to the previous version. The new user interface is blazing fast, visually stunning, and highly responsive. Additionally, Turborepo significantly improves the development workflow by enabling efficient monorepo management and faster build times.

volcano-sh-bot · 2025-07-07T06:59:26Z

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
To complete the pull request process, please assign william-wang
You can assign the PR to them by writing /assign @william-wang in a comment when ready.

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

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

jayesh9747 · 2025-07-07T16:15:28Z

@de6p i think you should create small small pr , so that it can be better to review.

karanBRAVO · 2025-07-10T19:58:12Z

@de6p i think you should create small small pr , so that it can be better to review.

+1

karanBRAVO · 2025-07-10T20:25:30Z

Hello @de6p,
I have one quick question, why are we using next.js instead of vite.js+express.js?

…ster Signed-off-by: Deep <[email protected]>

…n UI, next.js Signed-off-by: Deep <[email protected]>

Signed-off-by: Deep <[email protected]>

JesseStutler · 2025-07-22T12:08:43Z

Hello @de6p, I have one quick question, why are we using next.js instead of vite.js+express.js?

cc @de6p

JesseStutler · 2025-07-22T12:08:50Z

/gemini review

gemini-code-assist

Code Review

This is a massive and impressive refactoring of the Volcano dashboard. The migration to a modern stack with Next.js, tRPC, and Turborepo is a huge step forward. The new UI looks clean and the architecture is much more scalable.

I've conducted a thorough review and identified several areas for improvement, from critical correctness issues like manual YAML parsing to maintainability and efficiency enhancements. Addressing these will help solidify the new foundation and ensure the dashboard is robust and easy to maintain.

gemini-code-assist · 2025-07-22T12:11:30Z

apps/web/src/components/(dashboard)/pods/pod-create-dialog.tsx

+  const parseYamlToManifest = (yamlString: string) => {
+    const lines = yamlString.trim().split('\n')
+    const manifest: any = {
+      apiVersion: '',
+      kind: '',
+      metadata: { name: '' },
+      spec: { containers: [] }
+    }
+
+    const requiredFields = ['apiVersion', 'kind', 'metadata', 'spec']
+    const foundFields = new Set<string>()
+    let currentSection = ''
+    let currentSubSection = ''
+    let currentContainer: any = null
+    let inContainers = false
+
+    for (const line of lines) {
+      const trimmed = line.trim()
+      if (!trimmed || trimmed.startsWith('#')) continue
+
+      for (const field of requiredFields) {
+        if (trimmed.startsWith(`${field}:`)) {
+          foundFields.add(field)
+          if (field === 'apiVersion' || field === 'kind') {
+            manifest[field] = trimmed.split(':')[1].trim()
+          }
+          currentSection = field
+          currentSubSection = ''
+        }
+      }
+
+      if (trimmed.startsWith('name:') && currentSection === 'metadata') {
+        manifest.metadata.name = trimmed.split(':')[1].trim()
+      }
+
+      if (currentSection === 'spec') {
+        if (trimmed.startsWith('containers:')) {
+          inContainers = true
+          currentSubSection = 'containers'
+        } else if (trimmed.startsWith('- name:') && inContainers) {
+          if (currentContainer) {
+            manifest.spec.containers.push(currentContainer)
+          }
+          currentContainer = { name: trimmed.split(':')[1].trim() }
+        } else if (trimmed.startsWith('image:') && currentContainer) {
+          currentContainer.image = trimmed.split(':')[1].trim()
+        } else if (trimmed.startsWith('ports:') && currentContainer) {
+          currentContainer.ports = []
+          currentSubSection = 'ports'
+        } else if (trimmed.startsWith('- containerPort:') && currentSubSection === 'ports' && currentContainer) {
+          const port = parseInt(trimmed.split(':')[1].trim())
+          currentContainer.ports.push({ containerPort: port })
+        } else if (trimmed.startsWith('restartPolicy:') && currentSection === 'spec') {
+          manifest.spec.restartPolicy = trimmed.split(':')[1].trim()
+        }
+      }
+    }
+
+    if (currentContainer) {
+      manifest.spec.containers.push(currentContainer)
+    }
+
+    const missingFields = requiredFields.filter(field => !foundFields.has(field))
+    if (missingFields.length > 0) {
+      throw new Error(`Missing required fields: ${missingFields.join(', ')}`)
+    }
+
+    if (manifest.kind !== 'Pod') {
+      throw new Error('Kind must be "Pod"')
+    }
+
+    if (!manifest.metadata.name) {
+      throw new Error('Missing required field: metadata.name')
+    }
+
+    if (!manifest.spec.containers || manifest.spec.containers.length === 0) {
+      throw new Error('Pod spec must include at least one container')
+    }
+
+    return manifest
+  }


Manually parsing YAML using string splitting and line-by-line processing is extremely brittle and a significant security and correctness risk. It can easily fail with valid but differently formatted YAML (e.g., different indentation, comments, ordering).

Please use a robust, well-tested library like js-yaml to parse the YAML string. You will need to add it as a dependency.

gemini-code-assist · 2025-07-22T12:11:31Z

apps/web/src/components/(dashboard)/queues/create-queue-dialog.tsx

+  const parseYamlToManifest = (yamlString: string) => {
+    const lines = yamlString.trim().split('\n')
+    const manifest: any = {
+      apiVersion: '',
+      kind: '',
+      metadata: { name: '' },
+      spec: {}
+    }
+
+    const requiredFields = ['apiVersion', 'kind', 'metadata', 'spec']
+    const foundFields = new Set<string>()
+
+    for (const line of lines) {
+      const trimmed = line.trim()
+      if (!trimmed || trimmed.startsWith('#')) continue
+
+      // Check for required top-level fields
+      for (const field of requiredFields) {
+        if (trimmed.startsWith(`${field}:`)) {
+          foundFields.add(field)
+          if (field === 'apiVersion' || field === 'kind') {
+            manifest[field] = trimmed.split(':')[1].trim()
+          }
+        }
+      }
+
+      // Extract metadata.name
+      if (trimmed.startsWith('name:') && foundFields.has('metadata')) {
+        manifest.metadata.name = trimmed.split(':')[1].trim()
+      }
+    }
+
+    // Validate required fields
+    const missingFields = requiredFields.filter(field => !foundFields.has(field))
+    if (missingFields.length > 0) {
+      throw new Error(`Missing required fields: ${missingFields.join(', ')}`)
+    }
+
+    if (manifest.kind !== 'Queue') {
+      throw new Error('Kind must be "Queue"')
+    }
+
+    if (!manifest.metadata.name) {
+      throw new Error('Missing required field: metadata.name')
+    }
+
+    return manifest
+  }


This component uses a manual YAML parser, which is brittle and unsafe. As with the pod creation dialog, this should be replaced with a dedicated YAML parsing library like js-yaml to ensure correctness and security.

gemini-code-assist · 2025-07-22T12:11:31Z

apps/web/src/app/page.tsx

+    <div className="flex">
+    <Sidebar />
+    <main className="w-full flex-1 overflow-hidden">
+    <ScrollArea className="h-[calc(100dvh)]">
+      <section className="container grid items-center gap-6 pb-6 pt-12">
+        <div className="flex max-w-[980px] flex-col items-start gap-2 mx-auto">
+          <h1 className="text-xl font-semibold text-purple text-center">
+            Dashboard
+          </h1>
+        </div>
+      </section>
+      <hr className="max-w-x" />
+      <DashboardUtils />
+    </ScrollArea>
+    </main>
+  </div>


This page duplicates the layout structure from apps/web/src/app/(dashboard)/layout.tsx by including its own <Sidebar /> and <main> tag. This will result in a nested layout with two sidebars on the home page.

To fix this, this file should be moved to apps/web/src/app/(dashboard)/page.tsx. This will make it part of the dashboard route group, and the correct layout will be applied automatically. After moving the file, you can remove the redundant layout elements.

<ScrollArea className="h-[calc(100dvh)]"> <section className="container grid items-center gap-6 pb-6 pt-12"> <div className="flex max-w-[980px] flex-col items-start gap-2 mx-auto"> <h1 className="text-xl font-semibold text-purple text-center"> Dashboard </h1> </div> </section> <hr className="max-w-x" /> <DashboardUtils /> </ScrollArea>

gemini-code-assist · 2025-07-22T12:11:31Z

apps/web/src/components/(dashboard)/jobs/jobs-management.tsx

+  const queuesQuery = trpc.queueRouter.getAllQueues.useQuery(
+    undefined,
+    {
+      onError: (err) => {
+        console.error("Error fetching queues:", err);
+        setError(`Queues API error: ${err.message}`);
+      },
+    },
+  );


The queuesQuery is executed, but its data is never used within the component. This results in an unnecessary API call on every render of this page. Please remove this query to improve performance.

gemini-code-assist · 2025-07-22T12:11:31Z

packages/trpc/server/router/helpers.ts

+    let response = await k8sApi.listClusterCustomObject({
+            group: "batch.volcano.sh",
+            version: "v1alpha1",
+            plural: "jobs",
+            pretty: "true",
+        });
+
+
+    let filteredJobs = response.items || [];
+
+    const startIndex = (page - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    const paginatedJobs = filteredJobs.slice(startIndex, endIndex);
+


The current implementation of server-side pagination fetches all jobs from the Kubernetes API and then slices the array. This is inefficient and will not scale well with a large number of jobs, potentially causing performance issues and high memory usage on the server.

The Kubernetes API supports pagination via the limit and continue parameters. You should leverage this for true server-side pagination. This comment also applies to fetchQueues and fetchPods in this file.

gemini-code-assist · 2025-07-22T12:11:32Z

apps/web/src/components/(dashboard)/pods/pod-management.tsx

+
+    useEffect(() => {
+        if (podsQuery.data) {
+            console.log(podsQuery)


A console.log statement was left in the code. These should be removed before merging to keep the console output clean in production.

gemini-code-assist · 2025-07-22T12:11:32Z

apps/web/package.json

+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev ",


There's a trailing space in the dev script. While this doesn't cause any issues, it's best to remove it for consistency and cleanliness.

"dev": "next dev",

gemini-code-assist · 2025-07-22T12:11:33Z

apps/web/src/components/(dashboard)/queues/queue-management.tsx

+
+    useEffect(() => {
+        if (queuesQuery.data) {
+            console.log(queuesQuery)


There's a console.log statement here that should be removed before merging.

gemini-code-assist · 2025-07-22T12:11:33Z

apps/web/src/components/icons.ts

+export const Icons = {
+    dashboard: HomeIcon,
+    Cloud: Cloud,
+    Notepad: NotepadText,
+    Waypoint: Waypoints
+}


The keys in the Icons object have inconsistent casing (dashboard vs. Cloud, Notepad, Waypoint). For better maintainability and predictability, it's best to use a consistent casing scheme, such as all lowercase.

Suggested change

export const Icons = {

dashboard: HomeIcon,

Cloud: Cloud,

Notepad: NotepadText,

Waypoint: Waypoints

}

export const Icons = {

dashboard: HomeIcon,

cloud: Cloud,

notepad: NotepadText,

waypoint: Waypoints

}

gemini-code-assist · 2025-07-22T12:11:33Z

apps/web/constants/index.ts

+export interface NavItem {
+    title: string;
+    icon?: keyof typeof Icons;
+    href: string;
+    disable?: boolean;
+    label: string;
+}


The label property in the NavItem interface appears to be redundant, as its value is always the same as the title property in the navItems array. Removing it would simplify the data structure and reduce duplication.

export interface NavItem { title: string; icon?: keyof typeof Icons; href: string; disable?: boolean; }

JesseStutler · 2025-07-22T12:15:42Z

Also please fix the CI @de6p , and can we build the image to test now? I don't hope I meet some building errors when I want to test it

de6p · 2025-07-23T16:32:55Z

fixing it

…ubernetes deployment configuration Signed-off-by: Deep <[email protected]>

…ld tasks, and refactor TRPC context and router logic Signed-off-by: Deep <[email protected]>

… process; remove outdated formatting check workflow Signed-off-by: Deep <[email protected]>

…dency, and refactor navigation icons for consistency Signed-off-by: Deep <[email protected]>

de6p · 2025-08-19T15:59:15Z

I’ve fixed all the requested changes; we can merge it now.

Monokaix · 2025-09-17T09:57:36Z

Please check the gemini review comments and resolve the code conflict first.

de6p · 2025-09-17T14:15:18Z

@Monokaix I fixed all the comments .

Monokaix · 2025-09-18T03:03:35Z

@Monokaix I fixed all the comments .

Please also resolve the code conflicts: )

Signed-off-by: Deep <[email protected]>

de6p · 2025-09-24T03:32:06Z

fixed the merge conflicts.

Monokaix · 2025-09-24T06:45:01Z

Should also update https://github.com/volcano-sh/dashboard/blob/main/CONTRIBUTING.md as the docker build script changed.

Monokaix · 2025-09-24T06:50:21Z

Why deleted test.yaml and build.yaml in workflow?

Monokaix · 2025-09-24T09:39:45Z

Want to know if this is still a front-end and back-end separation architecture?

Monokaix · 2025-09-24T10:22:05Z

There some issus I currently have found:

The filter(Namespce, queue) func of job is lost

2. The "All" option for filter namespace is lost

3. The logo of dashboard keep it as volcano logo

4. Should also add a create job action

5. The dashboard page can not reflect the queue's resource, because we have removed the related reosurces in queue yaml

6. Some other actions are lost like delete/edit of queue/job/pod, it's already implemented in lFX term1

de6p · 2025-09-24T14:34:22Z

Why deleted test.yaml and build.yaml in workflow?

I deleted test.yaml and build.yaml because we now have a single ci.yaml workflow that runs linting, type-checking, and build steps together. This makes our CI setup simpler to maintain and ensures all checks run consistently in one place

de6p · 2025-09-24T14:38:05Z

Want to know if this is still a front-end and back-end separation architecture?

No, this is not a traditional front-end/back-end separation architecture. Instead, we are using Next.js with tRPC, which results in a tightly coupled setup. This means the front-end and back-end are more integrated, allowing us to share types, ensure end-to-end type safety, and speed up development. However, it differs from a separated architecture where front-end and back-end are completely decoupled services.

Monokaix · 2025-09-25T02:15:57Z

OK, please solve other issues.

Monokaix · 2025-09-25T03:44:53Z

It worked when I changed the dockerfile to

# Multi-stage build for TurboRepo Next.js app
FROM node:18-alpine AS base

# Stage 1: Install dependencies
FROM base AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Copy package files
COPY package.json package-lock.json* turbo.json ./
COPY apps/web/package.json ./apps/web/
COPY packages/*/package.json ./packages/

# Install dependencies
RUN npm ci

# Stage 2: Build the application
FROM base AS builder
WORKDIR /app

# Copy package files and install dependencies again to ensure workspace links
COPY package.json package-lock.json* turbo.json ./
COPY apps/web/package.json ./apps/web/
COPY packages/*/package.json ./packages/
RUN npm ci

# Copy source code and node_modules from deps stage
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# Build the web app
RUN cd apps/web && npm run build

# Stage 3: Production runtime
FROM base AS runner
WORKDIR /app

ENV NODE_ENV=production
# ENV NEXT_TELEMETRY_DISABLED=1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

# Create necessary directories
RUN mkdir -p apps/web/.next/cache && \
    chown nextjs:nodejs apps/web/.next/cache

# Copy the entire standalone output to root
COPY --from=builder --chown=nextjs:nodejs /app/apps/web/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/apps/web/.next/static ./.next/static

# The public directory is often handled by the standalone output.
# If it's missing, this COPY command will fail. It's removed.

USER nextjs

EXPOSE 3000
ENV PORT=3000
ENV HOSTNAME="0.0.0.0"

# The standalone output places server.js in the root
CMD ["node", "server.js"]

Signed-off-by: Deep <[email protected]>

de6p · 2025-10-09T07:01:03Z

There some issus I currently have found:

The filter(Namespce, queue) func of job is lost

2. The "All" option for filter namespace is lost 3. The logo of dashboard keep it as volcano logo 4. Should also add a create job action 5. The dashboard page can not reflect the queue's resource, because we have removed the related reosurces in queue yaml 6. Some other actions are lost like delete/edit of queue/job/pod, it's already implemented in lFX term1

Five points are completed; only the fifth point is left. You can review the rest of the changes for now.

Signed-off-by: Deep <[email protected]>

de6p · 2025-10-09T07:37:32Z

All the requested changes have been completed.

volcano-sh-bot requested review from kevin-wangzefeng and william-wang July 7, 2025 06:59

volcano-sh-bot added the size/XXL label Jul 7, 2025

This was referenced Jul 7, 2025

feat/trpc: Add support for trpc and improve the api response time 5x-10x faster #172

Closed

[feature/ui] : ReVamping the Volcano Dashboard , UI #17

Closed

de6p added 5 commits July 13, 2025 11:01

feat/backend: add trpc support and improve the api response 5x-10x fa…

3671fc2

…ster Signed-off-by: Deep <[email protected]>

feat/frontend: revamp the volcano dashboard to newer UI system, shadc…

5f9fb9e

…n UI, next.js Signed-off-by: Deep <[email protected]>

feat/dashboard: add turbo repo for faster build time

1acfbc4

Signed-off-by: Deep <[email protected]>

fix the create queues, and pods

a14ca95

Signed-off-by: Deep <[email protected]>

feat: add Dynamic fetching in the dashboard

bc884d8

Signed-off-by: Deep <[email protected]>

de6p force-pushed the new-ui branch from 1eeedfa to bc884d8 Compare July 13, 2025 15:06

gemini-code-assist bot reviewed Jul 22, 2025

View reviewed changes

de6p added 4 commits July 26, 2025 07:38

feat: implement multi-stage Docker build for Next.js app and update K…

ce71724

…ubernetes deployment configuration Signed-off-by: Deep <[email protected]>

feat: update ESLint configuration and dependencies, enhance Turbo bui…

f424e28

…ld tasks, and refactor TRPC context and router logic Signed-off-by: Deep <[email protected]>

feat: add CI workflow for ESLint, TypeScript type checking, and build…

da8ddc2

… process; remove outdated formatting check workflow Signed-off-by: Deep <[email protected]>

feat: update YAML parsing in queue and pod dialogs, add js-yaml depen…

0186df7

…dency, and refactor navigation icons for consistency Signed-off-by: Deep <[email protected]>

merge main newUI

3c1c330

Signed-off-by: Deep <[email protected]>

de6p added 3 commits October 9, 2025 02:54

chore: update the dockerfile

b690604

Signed-off-by: Deep <[email protected]>

update the favicon to volcano logo

a684f6a

Signed-off-by: Deep <[email protected]>

feat: add create/delete/edit/filter support to jobs, queues, and pods

54a6d07

Signed-off-by: Deep <[email protected]>

fix the bar chart for queue resources

7b86653

Signed-off-by: Deep <[email protected]>

feat: reVamping the volcano, dashboard, backend, trpc, turboRepo #174

Are you sure you want to change the base?

feat: reVamping the volcano, dashboard, backend, trpc, turboRepo #174

Uh oh!

Conversation

de6p commented Jul 7, 2025

Uh oh!

volcano-sh-bot commented Jul 7, 2025

Uh oh!

jayesh9747 commented Jul 7, 2025

Uh oh!

karanBRAVO commented Jul 10, 2025

Uh oh!

karanBRAVO commented Jul 10, 2025

Uh oh!

JesseStutler commented Jul 22, 2025

Uh oh!

JesseStutler commented Jul 22, 2025

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Jul 22, 2025

Choose a reason for hiding this comment

Uh oh!

JesseStutler commented Jul 22, 2025

Uh oh!

de6p commented Jul 23, 2025

Uh oh!

de6p commented Aug 19, 2025

Uh oh!

Monokaix commented Sep 17, 2025

Uh oh!

de6p commented Sep 17, 2025

Uh oh!

Monokaix commented Sep 18, 2025

Uh oh!

de6p commented Sep 24, 2025

Uh oh!

Monokaix commented Sep 24, 2025

Uh oh!

Monokaix commented Sep 24, 2025

Uh oh!

Monokaix commented Sep 24, 2025

Uh oh!

Monokaix commented Sep 24, 2025

Uh oh!

de6p commented Sep 24, 2025

Uh oh!

de6p commented Sep 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

de6p commented Sep 24, 2025 •

edited

Loading