feat(xo-web/SelectPif): show network name (#7081)

See Zammad#17381

CHANGELOG.unreleased.md

@@ -9,6 +9,7 @@
 
 - [Host/Advanced] Allow to force _Smart reboot_ if some resident VMs have the suspend operation blocked [Forum#7136](https://xcp-ng.org/forum/topic/7136/suspending-vms-during-host-reboot/23) (PR [#7025](https://github.com/vatesfr/xen-orchestra/pull/7025))
 - [Plugin/backup-report] Errors are now listed in XO tasks
+- [PIF] Show network name in PIF selectors (PR [#7081](https://github.com/vatesfr/xen-orchestra/pull/7081))
 
 ### Bug fixes
 

packages/xo-web/src/common/render-xo-item.js

@@ -299,6 +299,63 @@ Vdi.defaultProps = {
 
 // ===================================================================
 
+export const Pif = decorate([
+  connectStore(() => {
+    const getObject = createGetObject()
+    const getNetwork = createGetObject(createSelector(getObject, pif => get(() => pif.$network)))
+
+    // FIXME: props.self ugly workaround to get object as a self user
+    return (state, props) => ({
+      pif: getObject(state, props, props.self),
+      network: getNetwork(state, props),
+    })
+  }),
+  ({ id, showNetwork, pif, network }) => {
+    if (pif === undefined) {
+      return unknowItem(id, 'PIF')
+    }
+
+    const { carrier, device, deviceName, vlan } = pif
+    const showExtraInfo = deviceName || vlan !== -1 || (showNetwork && network !== undefined)
+
+    return (
+      <span>
+        <Icon icon='network' color={carrier ? 'text-success' : 'text-danger'} /> {device}
+        {showExtraInfo && (
+          <span>
+            {' '}
+            ({deviceName}
+            {vlan !== -1 && (
+              <span>
+                {' '}
+                -{' '}
+                {_('keyValue', {
+                  key: _('pifVlanLabel'),
+                  value: vlan,
+                })}
+              </span>
+            )}
+            {showNetwork && network !== undefined && <span> - {network.name_label}</span>})
+          </span>
+        )}
+      </span>
+    )
+  },
+])
+
+Pif.propTypes = {
+  id: PropTypes.string.isRequired,
+  self: PropTypes.bool,
+  showNetwork: PropTypes.bool,
+}
+
+Pif.defaultProps = {
+  self: false,
+  showNetwork: false,
+}
+
+// ===================================================================
+
 export const Network = decorate([
   connectStore(() => {
     const getObject = createGetObject()
@@ -561,24 +618,8 @@ const xoItemToRender = {
   ),
 
   // PIF.
-  PIF: ({ carrier, device, deviceName, vlan }) => (
-    <span>
-      <Icon icon='network' color={carrier ? 'text-success' : 'text-danger'} /> {device}
-      {(deviceName !== '' || vlan !== -1) && (
-        <span>
-          {' '}
-          ({deviceName}
-          {deviceName !== '' && vlan !== -1 && ' - '}
-          {vlan !== -1 &&
-            _('keyValue', {
-              key: _('pifVlanLabel'),
-              value: vlan,
-            })}
-          )
-        </span>
-      )}
-    </span>
-  ),
+  PIF: props => <Pif {...props} />,
+
   // Tags.
   tag: tag => (
     <span>

packages/xo-web/src/common/select-objects.js

@@ -251,6 +251,7 @@ class GenericSelect extends React.Component {
             ? `${option.xoItem.type}-resourceSet`
             : undefined,
         memoryFree: option.xoItem.type === 'host' || undefined,
+        showNetwork: true,
       })}
     </span>
   )