feat(xo-web/network): NBD option

CHANGELOG.unreleased.md

@@ -7,6 +7,8 @@
 
 > Users must be able to say: “Nice enhancement, I'm eager to test it”
 
+- [Network/NBD] Add the possibility to add and change the NBD connection associated to a Network (PR [#6646](https://github.com/vatesfr/xen-orchestra/pull/6646))
+
 ### Bug fixes
 
 > Users must be able to say: “I had this issue, happy to know it's fixed”
@@ -31,5 +33,6 @@
 
 - xo-vmdk-to-vhd patch
 - xo-server-upload-ova patch
+- xo-web minor
 
 <!--packages-end-->

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

@@ -876,6 +876,9 @@ const messages = {
   showPifs: 'Show PIFs',
   hidePifs: 'Hide PIFs',
   networkAutomaticTooltip: 'Network(s) selected by default for new VMs',
+  noNbdConnection: 'No NBD Connection',
+  nbdConnection: 'NBD Connection',
+  insecureNbdConnection: 'Insecure NBD Connection (not allowed through XO)',
   // ----- Pool stats tab -----
   poolNoStats: 'No stats',
   poolAllHosts: 'All hosts',

packages/xo-web/src/xo-app/new/network/index.js

@@ -30,6 +30,7 @@ const EMPTY = {
   isPrivate: false,
   mtu: '',
   name: '',
+  nbd: undefined,
   networks: [],
   pif: undefined,
   pifs: [],
@@ -99,6 +100,7 @@ const NewNetwork = decorate([
         }
         this.state.networks = networks
       },
+      onChangeNbd: (_, nbd) => ({ nbd: nbd?.value }),
       initialize: async () => ({ bondModes: await getBondModes() }),
       linkState,
       onChangeMode: (_, bondMode) => ({ bondMode }),
@@ -192,6 +194,7 @@ const NewNetwork = decorate([
         encrypted,
         mtu,
         name,
+        nbd,
         networks,
         pif,
         pifs,
@@ -229,6 +232,7 @@ const NewNetwork = decorate([
             description,
             mtu,
             name,
+            nbd,
             pif: pif == null ? undefined : pif.id,
             pool: pool.id,
             vlan,
@@ -278,6 +282,7 @@ const NewNetwork = decorate([
         modeOptions,
         mtu,
         name,
+        nbd,
         pif,
         pifPredicate,
         pifPredicateSdnController,
@@ -425,6 +430,16 @@ const NewNetwork = decorate([
                               type='text'
                               value={vlan}
                             />
+                            <label>{_('nbd')}</label>
+                            <Select
+                              name='nbd'
+                              onChange={effects.onChangeNbd}
+                              options={[
+                                { label: _('noNbdConnection'), value: false },
+                                { label: _('nbdConnection'), value: true },
+                              ]}
+                              value={nbd}
+                            />
                           </div>
                         )}
                       </div>

packages/xo-web/src/xo-app/pool/tab-network.js

@@ -15,7 +15,7 @@ import { connectStore } from 'utils'
 import { Container, Row, Col } from 'grid'
 import { TabButtonLink } from 'tab-button'
 import { Text, Number } from 'editable'
-import { Toggle } from 'form'
+import { Select, Toggle } from 'form'
 import { createFinder, createGetObject, createGetObjectsOfType, createSelector } from 'selectors'
 import { connectPif, deleteNetwork, disconnectPif, editNetwork, editPif } from 'xo'
 
@@ -101,6 +101,47 @@ class DefaultPif extends BaseComponent {
   }
 }
 
+class Nbd extends Component {
+  NBD_FILTER_OPTIONS = [
+    {
+      labelId: 'noNbdConnection',
+      value: false,
+    },
+    {
+      labelId: 'nbdConnection',
+      value: true,
+    },
+  ]
+  INSECURE_OPTION = [
+    {
+      labelId: 'insecureNbdConnection',
+      value: 'insecure_nbd',
+      disabled: true,
+    },
+  ]
+
+  _getOptionRenderer = ({ labelId }) => _(labelId)
+
+  _editNbdConnection = value => {
+    editNetwork(this.props.network, { nbd: value.value })
+  }
+
+  render() {
+    const { network } = this.props
+
+    return (
+      <Select
+        onChange={this._editNbdConnection}
+        optionRenderer={this._getOptionRenderer}
+        // We chose not to show the unsecure_nbd option unless the user has already activated it through another client.
+        // The reason is that we don't want them to know about it since the option is not allowed in XO.
+        options={network.insecureNbd ? [...this.NBD_FILTER_OPTIONS, ...this.INSECURE_OPTION] : this.NBD_FILTER_OPTIONS}
+        value={network.nbd ? true : network.insecureNbd ? 'insecure_nbd' : false}
+      />
+    )
+  }
+}
+
 @connectStore(() => ({
   defaultPif: _createGetDefaultPif(),
 }))
@@ -293,22 +334,7 @@ const NETWORKS_COLUMNS = [
   },
 
   {
-    itemRenderer: ({ nbd, networks, insecure_nbd }) => {
-      if (nbd) {
-        return (
-          <Tooltip content={_('nbdSecureTooltip')}>
-            <Icon icon='lock' />
-          </Tooltip>
-        )
-      }
-      if (insecure_nbd) {
-        ;<Tooltip content={_('nbdInsecureTooltip')}>
-          <Icon icon='unlock' />
-          <Icon icon='error' />
-        </Tooltip>
-      }
-      return null
-    },
+    itemRenderer: network => <Nbd network={network} />,
     name: <Tooltip content={_('nbdTootltip')}>{_('nbd')}</Tooltip>,
   },
   {