|
1 | 1 | # Helm Values Viewer |
2 | 2 |
|
3 | | -A self-contained web UI that renders the dependency tree of a Helm umbrella chart and lets you live-search all `values.yaml` files across every chart and subchart. Values are baked into the Docker image at build time — no cluster connection or Helm binary needed at runtime. |
| 3 | +A browser-based editor for Helm chart values files. Load a chart folder or standalone values.yaml, search across all keys and nested fields, select values to change, and write the new values back to disk — without touching the terminal. |
4 | 4 |
|
5 | | -## Project structure |
| 5 | +## Features |
6 | 6 |
|
7 | | -``` |
8 | | -helm-values-viewer/ |
9 | | -├── Dockerfile |
10 | | -├── nginx.conf |
11 | | -├── docker-entrypoint.sh # Replaces __APP_NAME__ / __APP_VERSION__ at container start |
12 | | -├── app/ |
13 | | -│ ├── index.html # Single-page app (IIFE, no build step) |
14 | | -│ └── lib.js # Pure/testable helpers: flatten, esc, highlight, |
15 | | -│ # displayName, dirOf, buildChartTree (UMD module) |
16 | | -├── scripts/ |
17 | | -│ └── extract-chart-data.py # Build-time: walks chart tree, extracts values |
18 | | -├── tests/ |
19 | | -│ └── unit.js # Node.js unit tests (node:test, no extra deps) |
20 | | -└── chart/ # <- COPY YOUR UMBRELLA CHART HERE |
21 | | - ├── Chart.yaml |
22 | | - ├── values.yaml |
23 | | - └── charts/ |
24 | | - ├── argo-cd/ |
25 | | - │ ├── Chart.yaml |
26 | | - │ ├── values.yaml |
27 | | - │ └── charts/ |
28 | | - │ └── redis/ |
29 | | - │ ├── Chart.yaml |
30 | | - │ └── values.yaml |
31 | | - └── cert-manager/ |
32 | | - ├── Chart.yaml |
33 | | - └── values.yaml |
34 | | -``` |
| 7 | +- Load a Helm chart folder (with subchart tree) or a single values.yaml |
| 8 | +- Full-text search across all keys and values at any nesting depth |
| 9 | +- Select multiple fields and batch-edit them to a new value |
| 10 | +- YAML mode for editing list and map fields |
| 11 | +- Changes write back to the actual files on disk (File System Access API) |
| 12 | +- Session persistence — reopen the browser and restore your loaded charts |
| 13 | +- Fully airgapped — no external network calls at runtime |
35 | 14 |
|
36 | | -## How it works |
| 15 | +## Requirements |
37 | 16 |
|
38 | | -**At docker build time:** |
| 17 | +- Chrome or Edge (File System Access API required for folder/file access) |
| 18 | +- Docker (to run the container) or any static file server |
39 | 19 |
|
40 | | -1. The `chart/` directory (your umbrella chart) is copied into the builder stage. |
41 | | -2. `extract-chart-data.py` walks the chart recursively: |
42 | | - - Parses each `Chart.yaml` to discover the dependency tree. |
43 | | - - Extracts `values.yaml` from each chart and subchart. |
44 | | - - Handles `.tgz` archives in `charts/` (produced by `helm dependency build`). |
45 | | - - Produces `manifest.json` describing the full tree structure. |
46 | | -3. The final nginx image contains only the static app (`index.html`, `lib.js`) plus the extracted values — no Python, no Helm binary. |
| 20 | +## Quick start |
47 | 21 |
|
48 | | -**At runtime:** |
| 22 | +```bash |
| 23 | +docker run -p 8080:8080 sokushinbutsu/helm-values-editor:latest |
| 24 | +``` |
49 | 25 |
|
50 | | -- `docker-entrypoint.sh` substitutes `__APP_NAME__` and `__APP_VERSION__` placeholders in `index.html` before nginx starts. |
51 | | -- The UI fetches `manifest.json` and renders the dependency tree in the left panel. |
52 | | -- Clicking any chart loads its flattened values on the right. |
53 | | -- Live search filters by key path or value as you type. |
54 | | -- Users can add extra values files or whole chart archives directly in the browser — nothing is persisted server-side. |
| 26 | +Open http://localhost:8080 in Chrome or Edge. |
55 | 27 |
|
56 | 28 | ## Usage |
57 | 29 |
|
58 | | -### 1. Replace the example chart with yours |
| 30 | +1. Click **+ Add chart folder** and select a Helm chart directory. The app scans Chart.yaml and values.yaml recursively across all subcharts. |
| 31 | +2. Or click **+ Add YAML file** to load a single values.yaml. |
| 32 | +3. Use the search box to find any key or value across all loaded charts. |
| 33 | +4. Check the boxes next to the fields you want to change. |
| 34 | +5. Type a new value and click **Apply to selected fields**. |
| 35 | + - For string, number, or boolean fields: type the value directly. |
| 36 | + - For list or map fields: click **YAML** to switch to YAML input mode (e.g. `[80, 443]` or `key: value`). |
| 37 | +6. Changes are written back to the files on disk immediately. |
59 | 38 |
|
60 | | -```bash |
61 | | -# Remove the example chart |
62 | | -rm -rf chart/ |
63 | | - |
64 | | -# Option A: copy a chart that already has its dependencies resolved |
65 | | -cp -r /path/to/my-umbrella-chart chart/ |
| 39 | +> Note: mixing field types (strings, lists, maps) in the same batch is not allowed. Select one type at a time. |
66 | 40 |
|
67 | | -# Option B: resolve dependencies first |
68 | | -cp -r /path/to/my-umbrella-chart chart/ |
69 | | -cd chart/ && helm dependency build && cd .. |
70 | | -``` |
| 41 | +## Environment variables |
71 | 42 |
|
72 | | -### 2. Build |
| 43 | +| Variable | Default | Description | |
| 44 | +|---|---|---| |
| 45 | +| `APP_NAME` | `my app` | Display name shown in the About dialog | |
| 46 | +| `APP_VERSION` | tag at build time | Version shown in the About dialog | |
73 | 47 |
|
| 48 | +Example with custom values: |
74 | 49 | ```bash |
75 | | -docker build -t helm-values-viewer . |
| 50 | +docker run -p 8080:8080 -e APP_NAME="Platform Tools" -e APP_VERSION="2.1.0" sokushinbutsu/helm-values-editor:latest |
76 | 51 | ``` |
77 | 52 |
|
78 | | -### 3. Run |
| 53 | +## Build from source |
79 | 54 |
|
80 | 55 | ```bash |
81 | | -docker run -p 8080:8080 helm-values-viewer |
| 56 | +git clone https://github.com/seab4ng/helm-values-veiwer.git |
| 57 | +cd helm-values-veiwer |
| 58 | +docker build -t helm-values-editor . |
| 59 | +docker run -p 8080:8080 helm-values-editor |
82 | 60 | ``` |
83 | 61 |
|
84 | | -Open http://localhost:8080 |
| 62 | +## Run tests |
85 | 63 |
|
86 | | -### 4. Custom name and version via environment variables |
| 64 | +No dependencies required. Tests use Node.js built-in test runner. |
87 | 65 |
|
88 | 66 | ```bash |
89 | | -docker run -e APP_NAME="My Platform" -e APP_VERSION="2.0.0" -p 8080:8080 helm-values-viewer |
| 67 | +node --test tests/unit.js |
90 | 68 | ``` |
91 | 69 |
|
92 | | -The values appear in the header of the UI. |
93 | | - |
94 | | -## Runtime features |
| 70 | +Test results are also published to GitHub Actions on every release. |
95 | 71 |
|
96 | | -- **Tree navigation** — left panel shows the full dependency tree; click any node to view its values. |
97 | | -- **Subchart values** — selecting a parent chart also shows all descendant values, grouped by chart. |
98 | | -- **Search** — type `image`, `port`, `replica`, etc. to filter keys and values across all visible charts in real time. |
99 | | -- **Add values file** — upload or paste a single `values.yaml`; it appears as a standalone entry with no subchart tree. |
100 | | -- **Add chart** — upload a chart folder (via the directory picker) or a `.tgz` archive; the app discovers all subcharts and builds the full dependency tree in the browser without any server round-trip. |
| 72 | +## CI / CD |
101 | 73 |
|
102 | | -## Running tests |
| 74 | +A GitHub Actions workflow runs on every version tag (`v*`): |
103 | 75 |
|
104 | | -Requires Node.js 18 or later. No extra dependencies. |
| 76 | +1. Runs the full unit test suite and publishes results to the Actions check run. |
| 77 | +2. If tests pass, builds the Docker image and pushes to Docker Hub as `sokushinbutsu/helm-values-editor:<tag>` and `latest`. |
105 | 78 |
|
| 79 | +To release a new version, create a tag: |
106 | 80 | ```bash |
107 | | -node --test tests/unit.js |
| 81 | +git tag v1.2.3 |
| 82 | +git push origin v1.2.3 |
108 | 83 | ``` |
109 | 84 |
|
110 | | -The test file covers `flatten`, `esc`, `highlight`, `displayName`, `dirOf`, and `buildChartTree` (including error cases, subchart discovery, namespace post-processing, and the `rootFallback` path). |
111 | | - |
112 | | -## CI/CD |
| 85 | +Required repository secrets: `DOCKERHUB_USERNAME`, `DOCKERHUB_TOKEN`. |
113 | 86 |
|
114 | | -```bash |
115 | | -# Resolve chart dependencies and build |
116 | | -cp -r ../my-umbrella-chart helm-values-viewer/chart/ |
117 | | -cd helm-values-viewer/chart && helm dependency build && cd .. |
118 | | - |
119 | | -# Build and push |
120 | | -docker build -t registry.internal/helm-values-viewer:${TAG} . |
121 | | -docker push registry.internal/helm-values-viewer:${TAG} |
122 | | -``` |
| 87 | +## Contributing |
123 | 88 |
|
124 | | -## Notes |
| 89 | +- `app/index.html` — all frontend logic (single IIFE, no build step) |
| 90 | +- `app/lib.js` — pure utility functions (flatten, highlight, buildChartTree, etc.) |
| 91 | +- `tests/unit.js` — unit tests for lib.js |
| 92 | +- `Dockerfile` — two-stage build: node for vendoring js-yaml, nginx for serving |
| 93 | +- `nginx.conf` — static file serving config |
125 | 94 |
|
126 | | -- Only `Chart.yaml` and `values.yaml` are extracted at build time — templates and other files are ignored. |
127 | | -- `.tgz` subchart archives in `charts/` are extracted automatically during the build. |
128 | | -- The final image is based on `nginx:1.27-alpine` (~25 MB). No Python interpreter is present at runtime. |
129 | | -- Subcharts can be nested to any depth. |
130 | | -- nginx listens on port 8080 (not 80). |
| 95 | +Fork the repo, make changes, run `node --test tests/unit.js`, open a PR. |
0 commit comments