Volcano: Add List and Details views for Volcano Custom Resources

[mahmoudmagdy1-1]

Upstream Issue

• Volcano Integration Plugin for Headlamp - Linux Foundation paid mentorship project kubernetes-sigs/headlamp#4359

Overview

This PR delivers the Phase 1 baseline for the Volcano Headlamp plugin by implementing list/detail views for core Volcano CRDs and wiring them into Headlamp navigation.
Implemented CRDs:

• batch.volcano.sh/v1alpha1 Job
• scheduling.volcano.sh/v1beta1 Queue
• scheduling.volcano.sh/v1beta1 PodGroup

Phase 1 focus in this PR:

• Core CRD visibility in UI (list + detail)
• Cross-resource navigation
• Consistent status rendering across resources
• Events integration in detail pages

What Was Implemented

1) Sidebar and Route Registration

• Added Volcano sidebar root with child entries:
  • Jobs
  • Queues
  • PodGroups
• Added list/detail routes for all three resources.

2) Resource Models

• Added typed resource models in:
  • src/resources/job.ts
  • src/resources/queue.ts
  • src/resources/podgroup.ts
• Included resource getters used by list/detail pages.

3) List Views

Implemented list pages with ResourceListView:

• Jobs list : Name, Namespace, Status, Queue, Running, Tasks, Age
• Queues list : Name, State, Weight, Parent, Age
• PodGroups list : Name, Namespace, Status, Min Member, Running, Queue, Age

4) Detail Views

Implemented detail pages with DetailsGrid + sections + events:

• Job detail
  • summary fields: status, queue, podgroup, minAvailable, scheduler, maxRetry
  • Pod Status section
  • Tasks section
  • Events section
• Queue detail
  • summary fields: state, weight, priority, reclaimable, parent
  • Capacity Limits section
  • Allocated Resources section
  • Events section
• PodGroup detail
  • summary fields: status, queue, minMember, priorityClass
  • Progress section
  • Conditions section
  • Min Resources section
  • Events section
  • fallback info when conditions are absent

5) Cross-Resource Navigation

• Queue links from Job and PodGroup views.
• Job detail includes related PodGroup link when available.

---

Test Files Added / Used

Under test-files/deploy/:

• namespace.yaml
• queue.yaml
• job-running.yaml
• job-completed.yaml
• job-unschedulable.yaml
• job-failed.yaml
  These provide reproducible YAML-based scenarios for manual validation.

---

How to Test

Prerequisites

• Kubernetes cluster with Volcano installed
• Headlamp running with plugin enabled
• kubectl configured

1) Run plugin

npm install
npm run start 

2) Apply test resources

kubectl apply -f test-files/deploy/namespace.yaml
kubectl apply -f test-files/deploy/queue.yaml
kubectl apply -f test-files/deploy/job-running.yaml
kubectl apply -f test-files/deploy/job-completed.yaml
kubectl apply -f test-files/deploy/job-unschedulable.yaml
kubectl apply -f test-files/deploy/job-failed.yaml

3) Validate via CLI

kubectl get vcjob -n volcano-lab
kubectl get queue volcano-lab-queue
kubectl get podgroups.scheduling.volcano.sh -n volcano-lab

4) Validate in UI

• Volcano sidebar appears.
• Jobs/Queues/PodGroups list pages load with expected columns.
• Detail pages render expected summary/sections/events.
• Cross-resource links navigate correctly:
  • Job -> Queue
  • Job -> PodGroup (when resolvable)
  • PodGroup -> Queue

5) Cleanup

kubectl delete -f test-files/deploy/job-failed.yaml
kubectl delete -f test-files/deploy/job-unschedulable.yaml
kubectl delete -f test-files/deploy/job-completed.yaml
kubectl delete -f test-files/deploy/job-running.yaml
kubectl delete -f test-files/deploy/queue.yaml
kubectl delete -f test-files/deploy/namespace.yaml

Demo

Video_2026-03-13_01-38-29.mp4

[Copilot]

Pull request overview

This PR adds a new Volcano Headlamp plugin that provides list and detail views for three Volcano CRDs: Jobs (batch.volcano.sh/v1alpha1), Queues (scheduling.volcano.sh/v1beta1), and PodGroups (scheduling.volcano.sh/v1beta1). It registers sidebar entries, routes, typed resource models, and cross-resource navigation links within Headlamp.

Changes:

• Sidebar and route registration for Volcano Jobs, Queues, and PodGroups with list/detail views
• Typed resource models (VolcanoJob, VolcanoQueue, VolcanoPodGroup) extending Headlamp's KubeObject
• Test YAML manifests for manual validation of different job states

Reviewed changes

Copilot reviewed 21 out of 23 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
volcano/package.json	Plugin package configuration
volcano/tsconfig.json	TypeScript configuration extending Headlamp plugin defaults
volcano/src/index.tsx	Sidebar and route registration for all three Volcano resources
volcano/src/resources/job.ts	Typed resource model for Volcano Jobs
volcano/src/resources/queue.ts	Typed resource model for Volcano Queues
volcano/src/resources/podgroup.ts	Typed resource model for Volcano PodGroups
volcano/src/utils/status.ts	Status color mapping utilities for all resource types
volcano/src/components/jobs/List.tsx	Job list view with status, queue, running, tasks columns
volcano/src/components/jobs/Detail.tsx	Job detail view with pod status, tasks, events, PodGroup link
volcano/src/components/queues/List.tsx	Queue list view with state, weight, parent columns
volcano/src/components/queues/Detail.tsx	Queue detail view with capacity, allocated resources, events
volcano/src/components/podgroups/List.tsx	PodGroup list view with phase, min member, queue columns
volcano/src/components/podgroups/Detail.tsx	PodGroup detail view with progress, conditions, min resources
volcano/src/headlamp-plugin.d.ts	Type declaration reference for Headlamp plugin
volcano/.gitignore	Git ignore rules for the plugin
volcano/README.md	Plugin documentation with features, testing steps, and references
volcano/test-files/deploy/*.yaml	Test manifests for various Volcano job scenarios

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

[Copilot]

Pull request overview

This PR adds a new Volcano Headlamp plugin that provides list and detail views for core Volcano CRDs (Job, Queue, PodGroup). It registers a sidebar section with navigation, typed resource models, and cross-resource linking between Jobs, Queues, and PodGroups.

Changes:

• Adds typed resource models for Volcano Job, Queue, and PodGroup CRDs with KubeObject classes
• Implements list and detail view components for all three resources with status rendering, cross-resource navigation links, and event integration
• Registers sidebar entries and routes via a reusable registerVolcanoResource helper, plus includes test YAML manifests for manual validation

Reviewed changes

Copilot reviewed 21 out of 23 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
volcano/package.json	Plugin package config with scoped name, scripts, and dependencies
volcano/tsconfig.json	TypeScript config extending headlamp-plugin base
volcano/.gitignore	Standard gitignore for node/build artifacts
volcano/README.md	Comprehensive plugin docs with features, testing, and usage instructions
volcano/src/index.tsx	Sidebar and route registration for all three Volcano resources
volcano/src/headlamp-plugin.d.ts	Type reference for headlamp-plugin
volcano/src/resources/job.ts	VolcanoJob KubeObject model with typed spec/status interfaces
volcano/src/resources/queue.ts	VolcanoQueue KubeObject model with typed spec/status interfaces
volcano/src/resources/podgroup.ts	VolcanoPodGroup KubeObject model with typed spec/status interfaces
volcano/src/utils/status.ts	Status color mapping utilities for all three resource types
volcano/src/components/jobs/List.tsx	Job list view with status, queue link, running count, tasks columns
volcano/src/components/jobs/Detail.tsx	Job detail view with pod status, tasks sections, and PodGroup linking
volcano/src/components/queues/List.tsx	Queue list view with state, weight, parent link columns
volcano/src/components/queues/Detail.tsx	Queue detail view with capacity limits and allocated resources sections
volcano/src/components/podgroups/List.tsx	PodGroup list view with phase, min member, running, queue columns
volcano/src/components/podgroups/Detail.tsx	PodGroup detail view with progress, conditions, min resources sections
volcano/test-files/deploy/*.yaml	Test manifests for manual validation scenarios

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

[illume]

Very cool. Great progress!

The README.md and the test files are nicely done! Looks simple to get going.

Left a couple of notes requesting some documentation.

Note, you could probably expand on your git commit message with some of the info in the PR description. See the CI check failure.

[Copilot]

Copilot reviewed 21 out of 23 changed files in this pull request and generated no comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

[Copilot]

Pull request overview

Adds a new Volcano Headlamp plugin (phase 1 baseline) to surface core Volcano CRDs in the UI with list/detail pages, navigation, and consistent status rendering.

Changes:

• Registered Volcano sidebar entries plus list/detail routes for Jobs, Queues, and PodGroups.
• Introduced typed KubeObject resource models and shared status→color utilities.
• Implemented list/detail React views (DetailsGrid + sections + events) and added YAML manifests for manual testing.

Reviewed changes

Copilot reviewed 21 out of 23 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
volcano/package.json	Defines the Volcano plugin package and Headlamp plugin scripts/deps.
volcano/tsconfig.json	Adds TS config extending Headlamp plugin defaults.
volcano/.gitignore	Adds standard node/build ignores for the plugin package.
volcano/README.md	Documents features, testing steps, and supported CRDs.
volcano/src/headlamp-plugin.d.ts	Adds Headlamp plugin type reference.
volcano/src/index.tsx	Registers Volcano sidebar root + routes for list/detail pages.
volcano/src/utils/status.ts	Centralizes status-to-color mapping for UI labels.
volcano/src/resources/job.ts	Adds Volcano Job model/types and convenience getters.
volcano/src/resources/queue.ts	Adds Volcano Queue model/types and convenience getters.
volcano/src/resources/podgroup.ts	Adds Volcano PodGroup model/types and convenience getters.
volcano/src/components/jobs/List.tsx	Implements Volcano Job list view with key columns and links.
volcano/src/components/jobs/Detail.tsx	Implements Volcano Job detail view, sections, events, and cross-links.
volcano/src/components/queues/List.tsx	Implements Volcano Queue list view with state/weight/parent.
volcano/src/components/queues/Detail.tsx	Implements Volcano Queue detail view with capacity/allocated sections + events.
volcano/src/components/podgroups/List.tsx	Implements Volcano PodGroup list view with status/progress columns + queue link.
volcano/src/components/podgroups/Detail.tsx	Implements Volcano PodGroup detail view with progress/conditions/min-resources + events.
volcano/test-files/deploy/namespace.yaml	Test namespace manifest for manual validation.
volcano/test-files/deploy/queue.yaml	Test queue manifest for manual validation.
volcano/test-files/deploy/job-running.yaml	Test running job scenario manifest.
volcano/test-files/deploy/job-completed.yaml	Test completed job scenario manifest.
volcano/test-files/deploy/job-unschedulable.yaml	Test unschedulable job scenario manifest.
volcano/test-files/deploy/job-failed.yaml	Test failed/retry scenario manifest.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[illume]

Hey hey.

Note the github CI check is failing.

You could create a first test, and then it won't have this problem.

No test files found, exiting with code 1

include: **/*.{test,spec}.?(c|m)[jt]s?(x)
exclude:  **/node_modules/**, **/dist/**, **/cypress/**, **/.{idea,git,cache,output,temp}/**, **/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build,eslint,prettier}.config.*

[mahmoudmagdy1-1]

Hey hey.

Note the github CI check is failing.

You could create a first test, and then it won't have this problem.

Hello, I just added a test file, and addressed copilot comments, PTAL when you can, Thanks!