feat(host,pool): edit PIFs VLAN (#1685)

See #1092

src/common/xo/index.js

@@ -1010,6 +1010,9 @@ export const reconfigurePifIp = (pif, { mode, ip, netmask, gateway, dns }) =>
 export const getIpv4ConfigModes = () =>
   _call('pif.getIpv4ConfigurationModes')
 
+export const editPif = (pif, { vlan }) =>
+  _call('pif.editPif', { pif: resolveId(pif), vlan })
+
 // SR ----------------------------------------------------------------
 
 export const deleteSr = sr => (

src/xo-app/host/tab-network.js

@@ -16,7 +16,7 @@ import { connectStore, noop } from 'utils'
 import { Container, Row, Col } from 'grid'
 import { createGetObjectsOfType } from 'selectors'
 import { error } from 'notification'
-import { Select } from 'editable'
+import { Select, Number } from 'editable'
 import { Toggle } from 'form'
 import {
   connectPif,
@@ -24,6 +24,7 @@ import {
   deletePif,
   disconnectPif,
   editNetwork,
+  editPif,
   getIpv4ConfigModes,
   reconfigurePifIp
 } from 'xo'
@@ -116,6 +117,9 @@ class PifItem extends Component {
   }
   _onEditIp = () => this._configIp('Static')
 
+  _editPif = vlan =>
+    editPif(this.props.pif, { vlan })
+
   render () {
     const { networks, pif, vifsByNetwork } = this.props
     const { configModes } = this.state
@@ -125,9 +129,13 @@ class PifItem extends Component {
     return <tr key={pif.id}>
       <td>{pif.device}</td>
       <td>{networks[pif.$network].name_label}</td>
-      <td>{pif.vlan === -1
-        ? 'None'
-        : pif.vlan}
+      <td>
+        {pif.vlan === -1
+          ? 'None'
+          : <Number value={pif.vlan} onChange={this._editPif}>
+            {pif.vlan}
+          </Number>
+        }
       </td>
       <td>
         {pif.ip}

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

@@ -10,7 +10,7 @@ import SortedTable from 'sorted-table'
 import TabButton from 'tab-button'
 import Tooltip from 'tooltip'
 import { Button, ButtonGroup } from 'react-bootstrap-4/lib'
-import { Text } from 'editable'
+import { Text, Number } from 'editable'
 import { Container, Row, Col } from 'grid'
 import { connectStore } from 'utils'
 import { createGetObject, createGetObjectsOfType, createSelector } from 'selectors'
@@ -21,7 +21,8 @@ import {
   createNetwork,
   deleteNetwork,
   disconnectPif,
-  editNetwork
+  editNetwork,
+  editPif
 } from 'xo'
 
 const _conditionalTooltip = (component, tooltip) => tooltip
@@ -47,13 +48,23 @@ const _conditionalTooltip = (component, tooltip) => tooltip
   return { host, pif, disableUnplug }
 })
 class PifItem extends Component {
+  _editPif = vlan =>
+    editPif(this.props.pif, { vlan })
+
   render () {
     const { pif, host, disableUnplug } = this.props
 
     return <tr>
       <td>{pif.device}</td>
       <td>{host.name_label}</td>
-      <td>{pif.vlan}</td>
+      <td>
+        {pif.vlan === -1
+          ? 'None'
+          : <Number value={pif.vlan} onChange={this._editPif}>
+            {pif.vlan}
+          </Number>
+        }
+      </td>
       <td>{pif.ip}</td>
       <td>{pif.mac}</td>
       <td>