feat: Introduce Kueue Headlamp plugin with a dashboard for cluster qu…

kueue/.eslintcache

@@ -0,0 +1 @@
+[{"/Users/latishadwani/Developer/oss/kueue-plugin/src/components/KueueDashboard.tsx":"1","/Users/latishadwani/Developer/oss/kueue-plugin/src/headlamp-plugin.d.ts":"2","/Users/latishadwani/Developer/oss/kueue-plugin/src/index.tsx":"3","/Users/latishadwani/Developer/oss/kueue-plugin/src/lib/kueue-types.ts":"4","/Users/latishadwani/Developer/oss/plugins/kueue/src/components/KueueDashboard.tsx":"5","/Users/latishadwani/Developer/oss/plugins/kueue/src/headlamp-plugin.d.ts":"6","/Users/latishadwani/Developer/oss/plugins/kueue/src/index.tsx":"7","/Users/latishadwani/Developer/oss/plugins/kueue/src/lib/kueue-types.ts":"8"},{"size":2770,"mtime":1770920077533,"results":"9","hashOfConfig":"10"},{"size":654,"mtime":1770890522293,"results":"11","hashOfConfig":"10"},{"size":945,"mtime":1770922517953,"results":"12","hashOfConfig":"10"},{"size":1097,"mtime":1770920156151,"results":"13","hashOfConfig":"10"},{"size":2786,"mtime":1770978042680,"results":"14","hashOfConfig":"15"},{"size":654,"mtime":1770890522293,"results":"16","hashOfConfig":"15"},{"size":547,"mtime":1771059286511,"results":"17","hashOfConfig":"15"},{"size":1615,"mtime":1770978048807,"results":"18","hashOfConfig":"15"},{"filePath":"19","messages":"20","suppressedMessages":"21","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"pg12a2",{"filePath":"22","messages":"23","suppressedMessages":"24","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"25","messages":"26","suppressedMessages":"27","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","suppressedMessages":"30","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"31","messages":"32","suppressedMessages":"33","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1vtwl8i",{"filePath":"34","messages":"35","suppressedMessages":"36","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"37","messages":"38","suppressedMessages":"39","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"40","messages":"41","suppressedMessages":"42","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/latishadwani/Developer/oss/kueue-plugin/src/components/KueueDashboard.tsx",[],[],"/Users/latishadwani/Developer/oss/kueue-plugin/src/headlamp-plugin.d.ts",[],[],"/Users/latishadwani/Developer/oss/kueue-plugin/src/index.tsx",[],[],"/Users/latishadwani/Developer/oss/kueue-plugin/src/lib/kueue-types.ts",[],[],"/Users/latishadwani/Developer/oss/plugins/kueue/src/components/KueueDashboard.tsx",[],[],"/Users/latishadwani/Developer/oss/plugins/kueue/src/headlamp-plugin.d.ts",[],[],"/Users/latishadwani/Developer/oss/plugins/kueue/src/index.tsx",[],[],"/Users/latishadwani/Developer/oss/plugins/kueue/src/lib/kueue-types.ts",[],[]]

kueue/AGENTS.md

@@ -0,0 +1,150 @@
+# AGENTS.md
+
+This file provides guidance for AI coding agents working on this Headlamp plugin.
+
+## Available Scripts
+
+The following npm scripts are available for development and testing:
+
+- **`npm run format`** - Format code with prettier
+- **`npm run lint`** - Lint code with eslint for coding issues
+- **`npm run lint-fix`** - Automatically fix linting issues
+- **`npm run build`** - Build the plugin for production
+- **`npm run tsc`** - Type check code with TypeScript compiler
+- **`npm run test`** - Run tests with vitest
+- **`npm start`** - Start development server watching for changes
+- **`npm run storybook`** - Start Storybook for component development
+- **`npm run storybook-build`** - Build static Storybook
+- **`npm run i18n`** - Extract translatable strings for internationalization
+- **`npm run package`** - Create a tarball of the plugin package
+
+## Plugin Development Resources
+
+### Example Plugins
+
+Explore these example plugins in `node_modules/@kinvolk/headlamp-plugin/examples/` to learn common patterns:
+
+- **activity** - Shows how to add activity tracking and monitoring
+- **app-menus** - Demonstrates adding custom menus to the app bar
+- **change-logo** - Shows how to customize the Headlamp logo
+- **cluster-chooser** - Demonstrates cluster selection UI
+- **custom-theme** - Shows how to create custom themes
+- **customizing-map** - Demonstrates customizing resource visualization maps
+- **details-view** - Shows how to customize resource detail views
+- **dynamic-clusters** - Demonstrates dynamic cluster configuration
+- **headlamp-events** - Shows how to work with Kubernetes events
+- **pod-counter** - Simple example counting pods and displaying in app bar
+- **projects** - Demonstrates project/namespace organization
+- **resource-charts** - Shows how to add custom charts for resources
+- **sidebar** - Demonstrates customizing the sidebar navigation
+- **tables** - Shows how to create custom resource tables
+- **ui-panels** - Demonstrates adding custom UI panels
+
+### Official Plugins
+
+Check out production-ready plugins in `node_modules/@kinvolk/headlamp-plugin/official-plugins/` for advanced patterns:
+
+#### Using Custom Resource Definitions (CRDs)
+
+- **cert-manager** - Complete CRD integration for cert-manager resources
+  - Files: `official-plugins/cert-manager/src/resources/` (certificate.ts, issuer.ts, clusterIssuer.ts, etc.)
+  - Shows how to register and display custom resources for certificates, issuers, challenges, and orders
+- **flux** - GitOps CRDs for Flux resources
+  - Files: `official-plugins/flux/src/` (kustomization, helmrelease, gitrepository resources)
+  - Demonstrates working with Flux CRDs for GitOps workflows
+- **keda** - Kubernetes Event Driven Autoscaling CRDs
+  - Files: `official-plugins/keda/src/resources/` (scaledobject.ts, scaledjob.ts, triggerauthentication.ts)
+  - Shows CRD integration for event-driven autoscaling
+- **karpenter** - Node provisioning CRDs
+  - Files: `official-plugins/karpenter/src/` (NodeClass, EC2NodeClass resources)
+  - Demonstrates multiple CRD deployment types (EKS Auto Mode, self-installed)
+
+#### Visualizing Relationships with Maps
+
+- **keda** - Map view showing KEDA resource relationships
+  - File: `official-plugins/keda/src/mapView.tsx`
+  - Uses edge creation (`makeKubeToKubeEdge`) to visualize connections between ScaledObjects, ScaledJobs, and TriggerAuthentications
+  - Shows how to build graph visualizations of resource dependencies
+
+#### Adding Metrics and Charts
+
+- **prometheus** - Advanced charts for workload resources
+  - Files: `official-plugins/prometheus/src/components/Chart/`
+  - Provides CPU, memory, network, and disk charts using Prometheus metrics
+  - Includes specialized charts for Karpenter (KarpenterChart, KarpenterNodeClaimCreationChart)
+  - Shows KEDA metrics (KedaActiveJobsChart, KedaScalerMetricsChart, KedaHPAReplicasChart)
+  - File: `official-plugins/prometheus/src/request.tsx` for fetching Prometheus data
+- **opencost** - Cost metrics and visualization
+  - File: `official-plugins/opencost/src/detail.tsx`
+  - Uses `recharts` library (AreaChart, CartesianGrid, Tooltip) to display cost data
+  - Shows how to fetch and display custom metrics from external services
+  - Demonstrates time-series data visualization with stacked area charts
+
+#### Other Advanced Patterns
+
+- **ai-assistant** - AI integration for cluster management
+- **app-catalog** - Helm chart catalog powered by ArtifactHub
+- **backstage** - Integration with Backstage developer portal
+
+### Key Topics and Examples
+
+#### Adding Items to the App Bar
+
+- **Example:** `pod-counter` - Shows `registerAppBarAction` to add items to top bar
+- **File:** `examples/pod-counter/src/index.tsx`
+
+#### Customizing the Sidebar
+
+- **Example:** `sidebar` - Demonstrates `registerSidebarEntry` and `registerSidebarEntryFilter`
+- **File:** `examples/sidebar/src/index.tsx`
+
+#### Working with Resource Details
+
+- **Example:** `details-view` - Shows how to customize resource detail pages
+- **File:** `examples/details-view/src/index.tsx`
+
+#### Creating Custom Tables
+
+- **Example:** `tables` - Demonstrates custom table implementations
+- **File:** `examples/tables/src/index.tsx`
+
+#### Adding Charts and Visualizations
+
+- **Example:** `resource-charts` - Shows how to add custom charts
+- **File:** `examples/resource-charts/src/index.tsx`
+
+#### Theme Customization
+
+- **Example:** `custom-theme` - Demonstrates theme customization
+- **File:** `examples/custom-theme/src/index.tsx`
+
+#### Internationalization (i18n)
+
+- Use `npm run i18n <locale>` to add new locales (e.g., `npm run i18n es` for Spanish)
+- Translation files are in `locales/<locale>/translation.json`
+- Use `useTranslation()` hook from `@kinvolk/headlamp-plugin/i18n`
+
+## Development Workflow
+
+1. **Start Development:** Run `npm start` to watch for changes
+2. **Make Changes:** Edit files in `src/`
+3. **Type Check:** Run `npm run tsc` to check for TypeScript errors
+4. **Lint:** Run `npm run lint` to check for code quality issues
+5. **Format:** Run `npm run format` to format code
+6. **Test:** Run `npm run test` to run tests
+7. **Build:** Run `npm run build` to create production build
+
+## Best Practices
+
+- Follow the patterns shown in the example plugins
+- Use TypeScript for type safety
+- Keep plugins focused on a single feature or enhancement
+- Document your plugin's functionality in the README.md
+
+## API Documentation
+
+For detailed API documentation, visit:
+
+- [Headlamp Plugin API Reference](https://headlamp.dev/docs/latest/development/api/)
+- [Plugin Development Guide](https://headlamp.dev/docs/latest/development/plugins/)
+- [UI Component Storybook](https://headlamp.dev/docs/latest/development/frontend/#storybook)

kueue/README.md

@@ -0,0 +1,37 @@
+# Kueue Plugin
+
+A Headlamp plugin for visualizing and managing [Kueue](https://kueue.sigs.k8s.io/) resources in Kubernetes. Kueue is a cloud-native job queueing system that manages batch jobs and resource quotas.
+
+This plugin adds a dedicated "Kueue" section to the Headlamp sidebar, allowing users to:
+- Monitor ClusterQueues and LocalQueues.
+- View details of Workloads and ResourceFlavors.
+- Manage job priorities and admissions.
+
+## Installation
+
+### In-Cluster
+If you are running Headlamp in-cluster, you can install this plugin by enabling it in the Helm chart configuration or by manually adding the plugin files to the plugins directory.
+
+### Desktop / Docker Desktop
+1. Open Headlamp.
+2. Go to the **Plugin Catalog**.
+3. Search for "Kueue".
+4. Click **Install**.
+5. Reload Headlamp to see the new "Kueue Batch" sidebar item.
+
+## Development
+
+1. Clone the repository and navigate to the `kueue` directory.
+2. Install dependencies:
+   ```sh
+   npm install
+   ```
+3. Start the development server:
+   ```sh
+   npm start
+   ```
+
+## Features
+- **Dashboard**: Overview of Kueue resources.
+- **Queue Management**: Inspect queue status and pending workloads.
+- **Resource Visualization**: See how resources are allocated across flavors.

kueue/artifacthub-pkg.yml

@@ -0,0 +1,11 @@
+version: 0.1.0
+name: "headlamp_kueue"
+displayName: Kueue
+createdAt: "2024-10-24T12:00:00Z"
+logoURL: "https://raw.githubusercontent.com/headlamp-k8s/plugins/main/kueue/logo.png"
+description: A Headlamp plugin for visualizing and managing Kueue resources.
+annotations:
+  headlamp/plugin/archive-url: "https://github.com/headlamp-k8s/plugins/releases/download/kueue-0.1.0/headlamp-k8s-kueue-0.1.0.tar.gz"
+  headlamp/plugin/archive-checksum: "" # Checksum will be added after release
+  headlamp/plugin/version-compat: ">=0.22"
+  headlamp/plugin/distro-compat: in-cluster,web,docker-desktop,desktop

kueue/knip.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://unpkg.com/knip@5/schema.json",
+  "entry": ["src/index.tsx!"],
+  "project": ["src/**/*.{ts,tsx}!"],
+  "ignore": ["src/**/*.test.{ts,tsx}", "src/**/stories/*"],
+  "ignoreExportsUsedInFile": true
+}