Adding a chart variant

Chart variants are plain JS config files. No JSX to touch.

1. Create the config file

Copy an existing chart and modify it. Example — a variant without PDB:

// ui/frontend/src/charts/base-chart-no-pdb.js
import baseChart from './base-chart.js'

export default {
  ...baseChart,
  name: 'base-chart (no PDB)',
  workloadSections: baseChart.workloadSections.filter(s => s.key !== 'pdb'),
}

To point to a different OCI chart:

export default {
  ...baseChart,
  name: 'My variant',
  ociChartRef: 'oci://ghcr.io/my-org/helm/my-chart',
  ociChartVersion: '2.0.0',
}

2. Register it

Add the import and entry to ui/frontend/src/charts/index.js:

import baseChart from './base-chart.js'
import myVariant from './my-variant.js'

export const CHARTS = {
  'base-chart': baseChart,
  'my-variant': myVariant,
}

The chart selector in the sidebar appears automatically when there is more than one entry.

Adding a new section to a variant

Add a type: 'section' entry to workloadSections:

{
  key: 'mySection', type: 'section',
  label: '🔧 My section',
  tip: 'What this section does',
  showFor: ['Deployment', 'StatefulSet'],   // omit to show for all types
  enabledField: 'mySection.enabled',        // checkbox that gates the fields
  fields: [
    { key: 'mySection.foo', label: 'Foo', type: 'text', placeholder: 'bar' },
    { key: 'mySection.count', label: 'Count', type: 'number', min: 1 },
    { key: 'mySection.mode', label: 'Mode', type: 'select', options: ['a', 'b', 'c'] },
    { key: 'mySection.raw', label: 'Raw YAML', type: 'yaml', rows: 4, advanced: true },
  ],
},

Field types: text, number, select, checkbox, yaml. Add advanced: true to hide a field behind the "Show advanced" toggle.

Per-version behavioral flags (valuesOptions)

Some chart versions have behavioral differences that affect how toValues.js emits values. These are declared in the chart config's valuesOptions object and read via opts in buildWorkload.

Flag	Type	Effect
serviceEnabledDefault	false	Chart requires service.enabled: true to be explicit (v1.0.0). When absent, enabled: true is the chart default.
statefulsetHeadlessDefault	false	StatefulSet service is not headless by default in this chart version (v1.0.0, v1.1.0). toValues.js emits headless: true when the checkbox is checked. When absent (v1.2.0+), headless is the chart default — only false is emitted to opt out.

Example — marking an older chart version:

// base-chart-1.1.0.js
export default {
  ...baseline,
  name: 'base-chart v1.1.0',
  ociChartRef: 'oci://ghcr.io/my-github-repo/helm/base-chart',
  ociChartVersion: '1.1.0',
  valuesOptions: {
    statefulsetHeadlessDefault: false,
  },
}

When adding a new chart version with a new behavioral difference, add the flag here and handle it in toValues.js alongside the existing flags.