feat(xo-web/recipes): static network config for k8s recipe

CHANGELOG.unreleased.md

@@ -27,4 +27,6 @@
 
 <!--packages-start-->
 
+- xo-web minor
+
 <!--packages-end-->

packages/xo-web/src/common/intl/messages.js

@@ -2389,9 +2389,14 @@ const messages = {
   templatesLabel: 'Templates',
   recipesLabel: 'Recipes',
   network: 'Network',
-  recipeMasterNameLabel: 'Master name',
-  recipeNumberOfNodesLabel: 'Number of nodes',
+  recipeMasterNameLabel: 'Master node name',
+  recipeNumberOfNodesLabel: 'Number of worker nodes',
   recipeSshKeyLabel: 'SSH key',
+  recipeStaticIpAddresses: 'Static IP addresses',
+  recipeMasterIpAddress: 'Master node IP address',
+  recipeWorkerIpAddress: 'Worker node { i } IP address',
+  recipeNetworkMask: 'Network Mask',
+  recipeGatewayIpAddress: 'Gateway IP address',
 
   // Audit
   auditActionEvent: 'Action/Event',

packages/xo-web/src/xo-app/hub/recipes/recipe-form.js

@@ -42,6 +42,25 @@ export default decorate([
           [name]: value,
         })
       },
+      onChangeWorkerIp(__, ev) {
+        const { name, value } = ev.target
+        const { onChange, value: prevValue } = this.props
+        const workerNodeIpAddresses = prevValue.workerNodeIpAddresses ?? []
+
+        workerNodeIpAddresses[name.split('.')[1]] = value
+        onChange({
+          ...prevValue,
+          workerNodeIpAddresses,
+        })
+      },
+      toggleStaticIpAddress(__, ev) {
+        const { name } = ev.target
+        const { onChange, value: prevValue } = this.props
+        onChange({
+          ...prevValue,
+          [name]: ev.target.checked,
+        })
+      },
     },
     computed: {
       networkPredicate:
@@ -100,6 +119,71 @@ export default decorate([
           value={value.nbNodes}
         />
       </FormGrid.Row>
+      <FormGrid.Row>
+        <label>
+          <input
+            className='mt-1'
+            name='staticIpAddress'
+            onChange={effects.toggleStaticIpAddress}
+            type='checkbox'
+            value={value.staticIpAddress}
+          />
+          &nbsp;
+          {_('recipeStaticIpAddresses')}
+        </label>
+      </FormGrid.Row>
+      {value.staticIpAddress && [
+        <FormGrid.Row key='masterIpAddrRow'>
+          <label>{_('recipeMasterIpAddress')}</label>
+          <input
+            className='form-control'
+            name='masterIpAddress'
+            onChange={effects.onChangeValue}
+            placeholder={formatMessage(messages.recipeMasterIpAddress)}
+            required
+            type='text'
+            value={value.masterIpAddress}
+          />
+        </FormGrid.Row>,
+        <FormGrid.Row key='netmaskRow'>
+          <label>{_('recipeNetworkMask')}</label>
+          <input
+            className='form-control'
+            name='networkMask'
+            onChange={effects.onChangeValue}
+            placeholder={formatMessage(messages.recipeNetworkMask)}
+            required
+            type='text'
+            value={value.networkMask}
+          />
+        </FormGrid.Row>,
+        <FormGrid.Row key='gatewayRow'>
+          <label>{_('recipeGatewayIpAddress')}</label>
+          <input
+            className='form-control'
+            name='gatewayIpAddress'
+            onChange={effects.onChangeValue}
+            placeholder={formatMessage(messages.recipeGatewayIpAddress)}
+            required
+            type='text'
+            value={value.gatewayIpAddress}
+          />
+        </FormGrid.Row>,
+        [...Array(+value.nbNodes)].map((v, i) => (
+          <FormGrid.Row key={v}>
+            <label>{_('recipeWorkerIpAddress', { i: i + 1 })}</label>
+            <input
+              className='form-control'
+              name={`workerNodeIpAddress.${i}`}
+              onChange={effects.onChangeWorkerIp}
+              placeholder={formatMessage(messages.recipeWorkerIpAddress, { i: i + 1 })}
+              required
+              type='text'
+              value={value[`workerNodeIpAddress.${i}`]}
+            />
+          </FormGrid.Row>
+        )),
+      ]}
       <FormGrid.Row>
         <label>{_('recipeSshKeyLabel')}</label>
         <input

packages/xo-web/src/xo-app/hub/recipes/recipe.js

@@ -42,7 +42,7 @@ export default decorate([
           defaultValue: {
             pool: {},
           },
-          render: props => <RecipeForm {...props} />,
+          render: props => <RecipeForm {...props} value={{ nbNodes: 1, ...props.value }} />,
           header: (
             <span>
               <Icon icon='hub-recipe' /> {RECIPE_INFO.name}
@@ -51,15 +51,29 @@ export default decorate([
           size: 'medium',
         })
 
-        const { masterName, nbNodes, network, sr, sshKey } = recipeParams
+        const {
+          gatewayIpAddress,
+          masterIpAddress,
+          masterName,
+          nbNodes,
+          network,
+          networkMask,
+          sr,
+          sshKey,
+          workerNodeIpAddresses,
+        } = recipeParams
 
         markRecipeAsCreating(RECIPE_INFO.id)
         const tag = await createKubernetesCluster({
+          gatewayIpAddress,
+          masterIpAddress,
           masterName,
           nbNodes: +nbNodes,
           network: network.id,
+          networkMask,
           sr: sr.id,
           sshKey,
+          workerNodeIpAddresses,
         })
         markRecipeAsDone(RECIPE_INFO.id)