Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show virtual interface's TAP device #1077

Merged
merged 6 commits into from
Jun 26, 2023
Merged

Conversation

skobyda
Copy link
Contributor

@skobyda skobyda commented May 15, 2023

Network interfaces that are attached to VMs have a TAP device. Tap devices exist to facilitate virtual private networks, network tunnels...
Every virtual network interface is assigned to a TAP device, since tap device is a representation of a virtual network device on lower layers:
Tun-tap-osilayers-diagram

If you want to troubleshoot the virtual network device manually, capture its packets, etc. on those lower layers, you need to know the interface name, so we should show it in the UI:

BEFORE
Screenshot from 2023-06-22 14-53-24

AFTER
Screenshot from 2023-06-26 12-43-15

Fixes #1047

Show virtual interface's TAP device

Network interfaces attached to VMs have a TAP device assigned, which represents the device at lower layers. Troubleshooting the virtual network device may require knowledge of the associated TAP device.

Screenshot from 2023-06-26 12-43-15

@skobyda
Copy link
Contributor Author

skobyda commented May 25, 2023

Updated pixels

@skobyda
Copy link
Contributor Author

skobyda commented Jun 21, 2023

Line coverage is related to the code I just moved around, not anything I added in this PR. Tests have only known flakes

@skobyda
Copy link
Contributor Author

skobyda commented Jun 21, 2023

Ready for code review

martinpitt
martinpitt previously approved these changes Jun 22, 2023
Copy link
Member

@martinpitt martinpitt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you, LGTM! (Re-running flaked test)

Can you please update the screenshot to be less wide, and update the description for a release note?

@@ -105,6 +105,55 @@ VmNetworkActions.propTypes = {
networks: PropTypes.array.isRequired,
};

const NetworkSource = ({ network, networkId, vm, hostDevices }) => {
const id = vmId(vm.name);
const checkDeviceAviability = (network) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Aviability" means checking if the device can fly, right? ✈️

The typo already exists in the moved code, it's just a funny typo.

@skobyda
Copy link
Contributor Author

skobyda commented Jun 23, 2023

Made the IP address column consistent with the source column.
@garrett you wanted to see what it would look like with horizontal and vertical descriptionlist for this. Here some screenshots:

Horizontal

Screenshot from 2023-06-23 12-17-06

Horizontal Fuild

Screenshot from 2023-06-23 12-22-50

Vertical

Screenshot from 2023-06-23 12-23-31

Copy link
Member

@garrett garrett left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's go with "horizontal fluid" for now. We don't use top-labelling much elsewhere in Cockpit.

What happens when you're in mobile? Does it "do the right thing"? If it doesn't, and vertical works, then we'll just go with that instead.

@skobyda
Copy link
Contributor Author

skobyda commented Jun 26, 2023

@garrett Updated the PR to fluid:
Screenshot from 2023-06-26 11-03-08

@skobyda skobyda requested a review from garrett June 26, 2023 09:03
@skobyda
Copy link
Contributor Author

skobyda commented Jun 26, 2023

What happens when you're in mobile? Does it "do the right thing"? If it doesn't, and vertical works, then we'll just go with that instead.

And this is how it looks with mobile:

Screenshot from 2023-06-26 11-04-23

@skobyda
Copy link
Contributor Author

skobyda commented Jun 26, 2023

Dropdown doesn't work correctly, that needs fix

garrett
garrett previously approved these changes Jun 26, 2023
Copy link
Member

@garrett garrett left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! Looks good.

@martinpitt
Copy link
Member

@skobyda : It's now conflicty as #1069 also changed pixels, sorry.

Copy link
Member

@martinpitt martinpitt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Otherwise LGTM, just needs deconflicting pixels. Thanks!

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 cockpit-project#1047
Copy link
Member

@martinpitt martinpitt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dakujem!

Comment on lines +122 to +124
return () => {
if (source !== null && checkDeviceAvailability(source)) {
cockpit.jump(`/network#/${source}`, cockpit.transport.host);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These 3 added lines are not executed by any test. Details

Comment on lines +151 to +167
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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These 17 added lines are not executed by any test. Details

Comment on lines +368 to +375
{ips.inet6 && <DescriptionListGroup>
<DescriptionListTerm>
{_("inet6")}
</DescriptionListTerm>
<DescriptionListDescription id={`${id}-network-${networkId}-ipv6-address`}>
{ips.inet6}
</DescriptionListDescription>
</DescriptionListGroup>}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These 8 added lines are not executed by any test. Details

@skobyda
Copy link
Contributor Author

skobyda commented Jun 26, 2023

All green, apart from one unrelated flake

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Show the interface name (target dev) of a network interface
5 participants