From c6f683b532065333bf195325b60efefd9454ff33 Mon Sep 17 00:00:00 2001
From: Pierre Donias <pierre.donias@gmail.com>
Date: Mon, 24 Oct 2016 09:52:47 +0200
Subject: [PATCH] feat(host,pool): edit PIFs VLAN (#1685)

See #1092
---
 src/common/xo/index.js         |  3 +++
 src/xo-app/host/tab-network.js | 16 ++++++++++++----
 src/xo-app/pool/tab-network.js | 17 ++++++++++++++---
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/common/xo/index.js b/src/common/xo/index.js
index 3aa8440a3..16c130eef 100644
--- a/src/common/xo/index.js
+++ b/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 => (
diff --git a/src/xo-app/host/tab-network.js b/src/xo-app/host/tab-network.js
index ba9020456..aa55152e8 100644
--- a/src/xo-app/host/tab-network.js
+++ b/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}
diff --git a/src/xo-app/pool/tab-network.js b/src/xo-app/pool/tab-network.js
index 0871555a2..66ace5a80 100644
--- a/src/xo-app/pool/tab-network.js
+++ b/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>