Helm is the de-facto standard for packaging applications for Kubernetes. Its usage is ubiquitous and sentiment against its serverside component - Tiller - is fading since the 3.0 release.
Helm is facing another issue nowadays.
The amount of Helm charts is increasing and as it is a community effort, the quality of charts vary, so as their structure. It is a considerable effort to understand what a given chart bundles and what knobs it exposes to its users.
The practice to document these knobs is an extensive list of values that the user can set. Helm React UI is here to improve this practice.
Helm React UI generates a UI based on the Helm schema file - if there is one available. It is for users to better discover the possible configuration options, and it also allows an alternative path to Helm.
The project is hosted at https://github.com/gimlet-io/helm-react-ui
A practical example project is available too. The project, that produced the following screen:
import HelmUI from 'helm-react-ui';
It also has an event handler to keep track of UI changes.
See the example code here.
Generating UIs from json schema is a practically doable task, but the schema alone doesn't allow the kind of fine-tuning that is needed for useful UIs.
When I set out to implement Helm React UI I was warned on Twitter.
json schema lacks layout information, information on how to pre-fill some fields.— Tamal Saha (@tsaha) October 15, 2020
Rightly so. Helm schemas are large, and rendering all fields at once results in UIs that are difficult to comprehend.
Thankfully, this problem was solved already in the React component I use. With react-jsonschema-form I could attach the required metadata to further customize the chart appearance.
Furthermore, I introduced a new metadata format for Helm charts
to drive their appearance in Helm React UI.
helm-ui.json, that you should place next to the
values.schema.json file and follow the following structure:
"icon": "M17 8l4 4m0 0l-4 4m4-4H3"
It is an array of objects with three fields
See a full example here.
helm-ui.json file will be part of the common Helm Charts, to allow Helm React UI to render them.
Besides the Helm React UI component, I also launch today a tool that packages it in a practical form: a CLI.
It's the Gimlet CLI that has a
chart configure command to generate a Helm values.yaml file for a given chart.
It launches a browser tab where you can discover and set the deployment options.
$ gimlet chart configure onechart/onechart 👩💻 Configure on http://127.0.0.1:28955 👩💻 Close the browser when you are done Browser opened
Browser closed 📁 Generating values.. --- image: repository: myapp tag: 1.0.0 ingress: host: myapp.local tlsEnabled: true replicas: 2
It works with any chart that has a JSON schema defined and an accompanying
onechart/onechart is one such chart, and you can use it to see Helm React UI in action.
It is also a handy
chart if you need to deploy something quickly, or looking for an alternative for the lengthy Kubernetes yaml format.