Documentation
About Kubeapps
Tutorials
- Get Started with Kubeapps
- Using an OIDC provider
- Managing Carvel packages
- Managing Flux packages
- Kubeapps on TKG
- Kubeapps on TCE
How-to guides
- Using the dashboard
- Access Control
- Basic Form Support
- Custon App View Support
- Custom Form Component Support
- Multi-cluster Support
- Offline installation
- Private Package Repository
- Syncing Package Repositories
- Using an OIDC provider with Pinniped
Background
Reference
About the project
Custom Form Component Support ¶
This is an extension to the basic form support
Possible use cases ¶
- Custom UI component that are not yet supported by the basic components (e.g: radio selectors)
- Consuming third party APIs for component values and validation
Step-by-step integration process ¶
First you will need a react component to render instead of the default Kubeapps form components. You’re React components must be compiled into a JS file so that they can be interpreted by the browser since they cannot natively parse
.jsx
or.tsx
files. You can compilejsx
ortsx
into js with tools like webpack, create-react-app, babel, etc. If you just want to try this feature out and you don’t have a component yet we provide some test files you can try (Do not try to load thejsx
file since browsers cannot parse it! We simply include it so that you can see the pre-compiled version of the.js
files).The easiest way to add inject the file in is via the command line. You can do it via the following command:
helm install bitnami/kubeapps --set-file dashboard.customComponents=*path to file* <other_flags>
Note: The file can be located anywhere on your file system or even a remote source! Alternatively we provide remote loading by setting the
remoteComponentsUrl
value to the URL that is serving your bundle. If this is not set, the configmap will be the default loader.Once the deployment is complete you will need a values json that will signal to Kubeapps that we want to render a custom component and not one fo the provided ones. To do that you will need a
values.json.schema
that has acustomComponent
key, more info here .
Render a custom component ¶
Signaling to the Kubeapps dashboard that you want to render a custom component is pretty straight forward. Simply add a customComponent
field to any form parameter defined in the values.json.schema
and that will tell the react application to fetch the component from the custom js bundle. An example parameter could look like:
"databaseType": {
"type": "string",
"form": true,
"enum": ["mariadb", "postgresql"],
"title": "Database Type",
"description": "Allowed values: \"mariadb\" and \"postgresql\"",
"customComponent": {
"type": "radio",
"className": "primary-radio"
}
}
Note: The customComponent
field MUST BE AN OBJECT. This design decision was made so that developers can pass extra values/properties into their custom components should they require them.
Updating Helm values with custom components ¶
Custom form components would be useless without the ability to interact with the YAML state. To do this your custom components should be set up to receive 2 props: handleBasicFormParamChange
and param
. param
is the current json object this is being rendered (denoted by the customComponent
field) and handleBasicFormParamChange
which is a function that updates the YAML file. An example of how you use this function can be found in any of the BasicDeploymentForm components such as the
SliderParam
.
const handleParamChange = (newValue: number) => {
handleBasicFormParamChange(param)({
currentTarget: {
value: newValue,
},
} as React.FormEvent<HTMLInputElement>);
};
Tips ¶
To help you get started we provide some examples that you can try
here
. The three files should give you a good idea about how to start developing and building your own custom components. CustomComponent.jsx
is a super simple react component that takes the handleBasicFormParamChange
and param
props and renders a button that changes the value to ’test’. CustomComponent.js
is the JavaScript variant of CustomComponent.jsx
and CustomComponent.min.js
is a minified js bundle created using
remote-component-starter
, which is specifically made to help build components that you want to load remotely with the
remote-component
tool used by Kubeapps.