From 226f7c4b70d06df864a791ac8ec17c32378c976c Mon Sep 17 00:00:00 2001
From: Simon Kobyda <skobyda@redhat.com>
Date: Mon, 15 May 2023 14:47:52 +0200
Subject: [PATCH] Show virtual interface's TAP device

Network interfaces that are attached to VMs have a TUN/TAP device. If
you want to check manually, e.g. why the device is not working
correctly, you need to know the interface name.
Name of the tap device is  be specified with attribute of the <target>
element. If no target dev is specified upon vnic attachement, libvirt
will create a new standard tap device with a name of the pattern "vnetN"
Shot this device in the list of VM's interfaces. In the future, we could
also allow user to choose/name a tap device during vNIC attachement.

Fixes #1047
---
 src/components/vm/nics/vmNicsCard.jsx | 76 +++++++++++++++++++++------
 src/machines.scss                     | 11 ----
 test/check-machines-nics              |  4 +-
 3 files changed, 62 insertions(+), 29 deletions(-)

diff --git a/src/components/vm/nics/vmNicsCard.jsx b/src/components/vm/nics/vmNicsCard.jsx
index db04e9dc9..73777ca29 100644
--- a/src/components/vm/nics/vmNicsCard.jsx
+++ b/src/components/vm/nics/vmNicsCard.jsx
@@ -18,6 +18,8 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Button } from "@patternfly/react-core/dist/esm/components/Button";
+import { DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm } from "@patternfly/react-core/dist/esm/components/DescriptionList";
 import { Dropdown, KebabToggle } from "@patternfly/react-core/dist/esm/deprecated/components/Dropdown";
 import { Flex, FlexItem } from "@patternfly/react-core/dist/esm/layouts/Flex";
 import { Tooltip } from "@patternfly/react-core/dist/esm/components/Tooltip";
@@ -124,13 +126,46 @@ const NetworkSource = ({ network, networkId, vm, hostDevices }) => {
         };
     };
 
-    const singleSourceElem = source => checkDeviceAviability(source) ? <Button variant="link" isInline onClick={sourceJump(source)}>{source}</Button> : source;
-    const addressPortSourceElem = (source, networkId) => (<table id={`${id}-network-${networkId}-source`}>
-        <tbody>
-            <tr><td className='machines-network-source-descr'>{_("Address")}</td><td className='machines-network-source-value'>{source.address}</td></tr>
-            <tr><td className='machines-network-source-descr'>{_("Port")}</td><td className='machines-network-source-value'>{source.port}</td></tr>
-        </tbody>
-    </table>);
+    const singleSourceElem = source => {
+        let label = rephraseUI("networkType", network.type);
+        label = label.charAt(0).toUpperCase() + label.slice(1);
+
+        return (
+            <DescriptionListGroup>
+                <DescriptionListTerm>
+                    {label}
+                </DescriptionListTerm>
+                <DescriptionListDescription>
+                    <Flex spaceItems={{ default: 'spaceItemsSm' }} alignItems={{ default: 'alignItemsCenter' }} id={`${id}-network-${networkId}-source`}>
+                        <FlexItem>
+                            {checkDeviceAviability(source)
+                                ? <Button variant="link" isInline onClick={sourceJump(source)}>{source}</Button>
+                                : source}
+                        </FlexItem>
+                        {needsShutdownIfaceSource(vm, network) && <NeedsShutdownTooltip iconId={`${id}-network-${networkId}-source-tooltip`} tooltipId="tip-network" />}
+                    </Flex>
+                </DescriptionListDescription>
+            </DescriptionListGroup>
+        );
+    };
+    const addressPortSourceElem = source => (<>
+        <DescriptionListGroup>
+            <DescriptionListTerm>
+                {_("Address")}
+            </DescriptionListTerm>
+            <DescriptionListDescription id={`${id}-network-${networkId}-address`}>
+                {source.address}
+            </DescriptionListDescription>
+        </DescriptionListGroup>
+        <DescriptionListGroup>
+            <DescriptionListTerm>
+                {_("Port")}
+            </DescriptionListTerm>
+            <DescriptionListDescription id={`${id}-network-${networkId}-port`}>
+                {source.port}
+            </DescriptionListDescription>
+        </DescriptionListGroup>
+    </>);
 
     const getSourceElem = {
         direct: singleSourceElem,
@@ -142,16 +177,23 @@ const NetworkSource = ({ network, networkId, vm, hostDevices }) => {
         udp: addressPortSourceElem,
     };
 
-    if (getSourceElem[network.type] !== undefined) {
-        return (
-            <Flex spaceItems={{ default: 'spaceItemsSm' }} alignItems={{ default: 'alignItemsCenter' }} id={`${id}-network-${networkId}-source`}>
-                <FlexItem>{getSourceElem[network.type](getIfaceSourceName(network), networkId)}</FlexItem>
-                {needsShutdownIfaceSource(vm, network) && <NeedsShutdownTooltip iconId={`${id}-network-${networkId}-source-tooltip`} tooltipId="tip-network" />}
-            </Flex>
-        );
-    } else {
-        return null;
-    }
+    let source;
+    if (getSourceElem[network.type] !== undefined)
+        source = getSourceElem[network.type](getIfaceSourceName(network), networkId);
+
+    return (
+        <DescriptionList isHorizontal isFluid>
+            {source}
+            {network.target && <DescriptionListGroup>
+                <DescriptionListTerm>
+                    {_("TAP device")}
+                </DescriptionListTerm>
+                <DescriptionListDescription id={`${id}-network-${networkId}-tapdevice`}>
+                    {network.target}
+                </DescriptionListDescription>
+            </DescriptionListGroup>}
+        </DescriptionList>
+    );
 };
 
 export class VmNetworkTab extends React.Component {
diff --git a/src/machines.scss b/src/machines.scss
index 71b041db1..71bb2ccce 100644
--- a/src/machines.scss
+++ b/src/machines.scss
@@ -35,17 +35,6 @@
     font-size: inherit;
 }
 
-.machines-network-source-descr {
-    color: var(--ct-color-subtle-copy);
-    text-align: right;
-    padding: 5px 10px !important;
-}
-
-.machines-network-source-value {
-    padding: 5px 10px !important;
-    text-align: left !important;
-}
-
 .machines-listing-actions {
     display: flex;
     justify-content: flex-end;
diff --git a/test/check-machines-nics b/test/check-machines-nics
index a2ca61358..8d03f3710 100755
--- a/test/check-machines-nics
+++ b/test/check-machines-nics
@@ -59,6 +59,7 @@ class TestMachinesNICs(VirtualMachinesCase):
 
         b.wait_in_text("#vm-subVmTest1-network-1-type", "network")
         b.wait_in_text("#vm-subVmTest1-network-1-source", "default")
+        b.wait_in_text("#vm-subVmTest1-network-1-tapdevice", "vnet0")
         b.wait_in_text("#vm-subVmTest1-network-1-ipv4-address", "192.168.122.")
         b.wait_in_text("#vm-subVmTest1-network-1-state", "up")
         b.assert_pixels("#vm-subVmTest1-networks",
@@ -72,10 +73,11 @@ class TestMachinesNICs(VirtualMachinesCase):
         self.deleteIface(1)
 
         # Test add network
-        m.execute("virsh attach-interface --domain subVmTest1 --type network --source default --model virtio --mac 52:54:00:4b:73:5f --config --live")
+        m.execute("virsh attach-interface --domain subVmTest1 --type network --source default --target vnet1 --model virtio --mac 52:54:00:4b:73:5f --config --live")
 
         b.wait_in_text("#vm-subVmTest1-network-1-type", "network")
         b.wait_in_text("#vm-subVmTest1-network-1-source", "default")
+        b.wait_in_text("#vm-subVmTest1-network-1-tapdevice", "vnet1")
         b.wait_in_text("#vm-subVmTest1-network-1-model", "virtio")
         b.wait_in_text("#vm-subVmTest1-network-1-mac", "52:54:00:4b:73:5f")
         b.wait_in_text("#vm-subVmTest1-network-1-ipv4-address", "192.168.122.")