Skip to content

Commit fd915c3

Browse files
tylerauerbecktylerauerbeck
committed
feat: initialize cnpg headlamp plugin
Signed-off-by: Tyler Auerbeck <tylerauerbeck@users.noreply.github.com>
1 parent 2273bc1 commit fd915c3

23 files changed

Lines changed: 19077 additions & 2 deletions

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎.vscode/extensions.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
// See http://go.microsoft.com/fwlink/?LinkId=827846
3+
// for the documentation about the extensions.json format
4+
"recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
5+
}

‎.vscode/settings.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// Place your settings in this file to overwrite default and user settings.
2+
{
3+
"editor.formatOnSave": true,
4+
"editor.defaultFormatter": "esbenp.prettier-vscode",
5+
"[javascript]": {
6+
"editor.defaultFormatter": "esbenp.prettier-vscode"
7+
},
8+
"[javascriptreact]": {
9+
"editor.defaultFormatter": "esbenp.prettier-vscode"
10+
},
11+
"[typescript]": {
12+
"editor.defaultFormatter": "esbenp.prettier-vscode"
13+
},
14+
"[typescriptreact]": {
15+
"editor.defaultFormatter": "esbenp.prettier-vscode"
16+
}
17+
}

‎.vscode/tasks.json‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
// See https://go.microsoft.com/fwlink/?LinkId=733558
2+
// for the documentation about the tasks.json format
3+
{
4+
"version": "2.0.0",
5+
"tasks": [
6+
{
7+
"type": "npm",
8+
"script": "start",
9+
"problemMatcher": ["$tsc-watch", "$eslint-compact"],
10+
"isBackground": true,
11+
"presentation": {
12+
"reveal": "never"
13+
},
14+
"group": {
15+
"kind": "build",
16+
"isDefault": true
17+
}
18+
},
19+
{
20+
"type": "npm",
21+
"script": "test",
22+
"problemMatcher": ["$tsc-watch", "$eslint-compact"],
23+
"isBackground": true,
24+
"presentation": {
25+
"reveal": "always"
26+
},
27+
"group": {
28+
"kind": "test",
29+
"isDefault": true
30+
}
31+
}
32+
]
33+
}

‎AGENTS.md‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
# AGENTS.md
2+
3+
This file provides guidance for AI coding agents working on this Headlamp plugin.
4+
5+
## Available Scripts
6+
7+
The following npm scripts are available for development and testing:
8+
9+
- **`npm run format`** - Format code with prettier
10+
- **`npm run lint`** - Lint code with eslint for coding issues
11+
- **`npm run lint-fix`** - Automatically fix linting issues
12+
- **`npm run build`** - Build the plugin for production
13+
- **`npm run tsc`** - Type check code with TypeScript compiler
14+
- **`npm run test`** - Run tests with vitest
15+
- **`npm start`** - Start development server watching for changes
16+
- **`npm run storybook`** - Start Storybook for component development
17+
- **`npm run storybook-build`** - Build static Storybook
18+
- **`npm run i18n`** - Extract translatable strings for internationalization
19+
- **`npm run package`** - Create a tarball of the plugin package
20+
21+
## Plugin Development Resources
22+
23+
### Example Plugins
24+
25+
Explore these example plugins in `node_modules/@kinvolk/headlamp-plugin/examples/` to learn common patterns:
26+
27+
- **activity** - Shows how to add activity tracking and monitoring
28+
- **app-menus** - Demonstrates adding custom menus to the app bar
29+
- **change-logo** - Shows how to customize the Headlamp logo
30+
- **cluster-chooser** - Demonstrates cluster selection UI
31+
- **custom-theme** - Shows how to create custom themes
32+
- **customizing-map** - Demonstrates customizing resource visualization maps
33+
- **details-view** - Shows how to customize resource detail views
34+
- **dynamic-clusters** - Demonstrates dynamic cluster configuration
35+
- **headlamp-events** - Shows how to work with Kubernetes events
36+
- **pod-counter** - Simple example counting pods and displaying in app bar
37+
- **projects** - Demonstrates project/namespace organization
38+
- **resource-charts** - Shows how to add custom charts for resources
39+
- **sidebar** - Demonstrates customizing the sidebar navigation
40+
- **tables** - Shows how to create custom resource tables
41+
- **ui-panels** - Demonstrates adding custom UI panels
42+
43+
### Official Plugins
44+
45+
Check out production-ready plugins in `node_modules/@kinvolk/headlamp-plugin/official-plugins/` for advanced patterns:
46+
47+
#### Using Custom Resource Definitions (CRDs)
48+
49+
- **cert-manager** - Complete CRD integration for cert-manager resources
50+
- Files: `official-plugins/cert-manager/src/resources/` (certificate.ts, issuer.ts, clusterIssuer.ts, etc.)
51+
- Shows how to register and display custom resources for certificates, issuers, challenges, and orders
52+
- **flux** - GitOps CRDs for Flux resources
53+
- Files: `official-plugins/flux/src/` (kustomization, helmrelease, gitrepository resources)
54+
- Demonstrates working with Flux CRDs for GitOps workflows
55+
- **keda** - Kubernetes Event Driven Autoscaling CRDs
56+
- Files: `official-plugins/keda/src/resources/` (scaledobject.ts, scaledjob.ts, triggerauthentication.ts)
57+
- Shows CRD integration for event-driven autoscaling
58+
- **karpenter** - Node provisioning CRDs
59+
- Files: `official-plugins/karpenter/src/` (NodeClass, EC2NodeClass resources)
60+
- Demonstrates multiple CRD deployment types (EKS Auto Mode, self-installed)
61+
62+
#### Visualizing Relationships with Maps
63+
64+
- **keda** - Map view showing KEDA resource relationships
65+
- File: `official-plugins/keda/src/mapView.tsx`
66+
- Uses edge creation (`makeKubeToKubeEdge`) to visualize connections between ScaledObjects, ScaledJobs, and TriggerAuthentications
67+
- Shows how to build graph visualizations of resource dependencies
68+
69+
#### Adding Metrics and Charts
70+
71+
- **prometheus** - Advanced charts for workload resources
72+
- Files: `official-plugins/prometheus/src/components/Chart/`
73+
- Provides CPU, memory, network, and disk charts using Prometheus metrics
74+
- Includes specialized charts for Karpenter (KarpenterChart, KarpenterNodeClaimCreationChart)
75+
- Shows KEDA metrics (KedaActiveJobsChart, KedaScalerMetricsChart, KedaHPAReplicasChart)
76+
- File: `official-plugins/prometheus/src/request.tsx` for fetching Prometheus data
77+
- **opencost** - Cost metrics and visualization
78+
- File: `official-plugins/opencost/src/detail.tsx`
79+
- Uses `recharts` library (AreaChart, CartesianGrid, Tooltip) to display cost data
80+
- Shows how to fetch and display custom metrics from external services
81+
- Demonstrates time-series data visualization with stacked area charts
82+
83+
#### Other Advanced Patterns
84+
85+
- **ai-assistant** - AI integration for cluster management
86+
- **app-catalog** - Helm chart catalog powered by ArtifactHub
87+
- **backstage** - Integration with Backstage developer portal
88+
89+
### Key Topics and Examples
90+
91+
#### Adding Items to the App Bar
92+
93+
- **Example:** `pod-counter` - Shows `registerAppBarAction` to add items to top bar
94+
- **File:** `examples/pod-counter/src/index.tsx`
95+
96+
#### Customizing the Sidebar
97+
98+
- **Example:** `sidebar` - Demonstrates `registerSidebarEntry` and `registerSidebarEntryFilter`
99+
- **File:** `examples/sidebar/src/index.tsx`
100+
101+
#### Working with Resource Details
102+
103+
- **Example:** `details-view` - Shows how to customize resource detail pages
104+
- **File:** `examples/details-view/src/index.tsx`
105+
106+
#### Creating Custom Tables
107+
108+
- **Example:** `tables` - Demonstrates custom table implementations
109+
- **File:** `examples/tables/src/index.tsx`
110+
111+
#### Adding Charts and Visualizations
112+
113+
- **Example:** `resource-charts` - Shows how to add custom charts
114+
- **File:** `examples/resource-charts/src/index.tsx`
115+
116+
#### Theme Customization
117+
118+
- **Example:** `custom-theme` - Demonstrates theme customization
119+
- **File:** `examples/custom-theme/src/index.tsx`
120+
121+
#### Internationalization (i18n)
122+
123+
- Use `npm run i18n <locale>` to add new locales (e.g., `npm run i18n es` for Spanish)
124+
- Translation files are in `locales/<locale>/translation.json`
125+
- Use `useTranslation()` hook from `@kinvolk/headlamp-plugin/i18n`
126+
127+
## Development Workflow
128+
129+
1. **Start Development:** Run `npm start` to watch for changes
130+
2. **Make Changes:** Edit files in `src/`
131+
3. **Type Check:** Run `npm run tsc` to check for TypeScript errors
132+
4. **Lint:** Run `npm run lint` to check for code quality issues
133+
5. **Format:** Run `npm run format` to format code
134+
6. **Test:** Run `npm run test` to run tests
135+
7. **Build:** Run `npm run build` to create production build
136+
137+
## Best Practices
138+
139+
- Follow the patterns shown in the example plugins
140+
- Use TypeScript for type safety
141+
- Keep plugins focused on a single feature or enhancement
142+
- Document your plugin's functionality in the README.md
143+
144+
## API Documentation
145+
146+
For detailed API documentation, visit:
147+
148+
- [Headlamp Plugin API Reference](https://headlamp.dev/docs/latest/development/api/)
149+
- [Plugin Development Guide](https://headlamp.dev/docs/latest/development/plugins/)
150+
- [UI Component Storybook](https://headlamp.dev/docs/latest/development/frontend/#storybook)

‎README.md‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,15 @@
1-
# cloudnativepg-headlamp-plugin
2-
headlamp plugin for interacting with cloudnativepg components
1+
# headlamp-cloudnativepg
2+
3+
This is the default template README for [Headlamp Plugins](https://github.com/kubernetes-sigs/headlamp).
4+
5+
- The description of your plugin should go here.
6+
- You should also edit the package.json file meta data (like name and description).
7+
8+
## Developing Headlamp plugins
9+
10+
For more information on developing Headlamp plugins, please refer to:
11+
12+
- [Getting Started](https://headlamp.dev/docs/latest/development/plugins/), How to create a new Headlamp plugin.
13+
- [API Reference](https://headlamp.dev/docs/latest/development/api/), API documentation for what you can do
14+
- [UI Component Storybook](https://headlamp.dev/docs/latest/development/frontend/#storybook), pre-existing components you can use when creating your plugin.
15+
- [Plugin Examples](https://github.com/kubernetes-sigs/headlamp/tree/main/plugins/examples), Example plugins you can look at to see how it's done.

0 commit comments

Comments
 (0)