better network page

src/index.scss

@@ -193,3 +193,7 @@ $fa-font-path: "./";
 .copy-to-clipboard:hover .btn-copy-to-clipboard {
   visibility: visible;
 }
+
+.label-ip {
+  margin-left: 1em;
+}

src/node_modules/messages/index.js

@@ -123,6 +123,9 @@ const messages = {
   noIpv4Record: {
     defaultMessage: 'No IPv4 record'
   },
+  noIpRecord: {
+    defaultMessage: 'No IP record'
+  },
   started: {
     defaultMessage: 'Started'
   },
@@ -283,6 +286,7 @@ localizedMessages.fr = {
   started: 'Démarrée',
   noToolsDetected: 'Pas d\'outils Xen détectés',
   noIpv4Record: 'Aucune IPv4',
+  noIpRecord: 'Aucune IP',
   virtualizationMode: 'Mode de virtualisation',
   // ----- VM console tab -----
   copyToClipboardLabel: 'Copier',

src/xo-app/vm/index.js

@@ -2,6 +2,7 @@ import _ from 'messages'
 import CopyToClipboard from 'react-copy-to-clipboard'
 import map from 'lodash/map'
 import sortBy from 'lodash/sortBy'
+import isEmpty from 'lodash/isEmpty'
 import React, { Component } from 'react'
 import xo from 'xo'
 import { createSelector } from 'reselect'
@@ -278,7 +279,7 @@ export default class Vm extends Component {
               {map(vifs, (vif) =>
                 <tr key={vif.id}>
                   <td>VIF #{vif.device}</td>
-                  <td>{vif.MAC}</td>
+                  <td><pre>{vif.MAC}</pre></td>
                   <td>{vif.MTU}</td>
                   <td>{vif.$network}</td>
                   <td>
@@ -295,13 +296,15 @@ export default class Vm extends Component {
               )}
             </tbody>
           </table>
-          {vm.addresses
-            ? [
-              <h4>{_('vifIpAddresses')}</h4>,
-              map(vm.addresses, (address) => <span className='label label-default'>{address}</span>)
-            ]
-            : _('noIpv4Record')
-          }
+          <p>
+            {vm.addresses && !isEmpty(vm.addresses)
+              ? [
+                <h4>{_('vifIpAddresses')}</h4>,
+                map(vm.addresses, (address) => <span key={address} className='label label-info label-ip'>{address}</span>)
+              ]
+              : _('noIpRecord')
+            }
+          </p>
         </TabPanel>
         <TabPanel>
           <div className='col-md-6'>