-
Notifications
You must be signed in to change notification settings - Fork 90
nics: Support PASST user mode backend #2331
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
base: main
Are you sure you want to change the base?
Conversation
95b488b to
d6c59ff
Compare
d6c59ff to
ca3a842
Compare
e361183 to
730cbf8
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Checking out the demos. I think the simple port forwarding is fine for now but the complex editing requires a lot more work IMO. It isn't intuitive and the alignment is all over the place.
I think we should experiment with what works for the complex one in a separate PR and keep simple port forwarding here.
src/components/vm/nics/nicBody.tsx
Outdated
| name: 'passt', | ||
| desc: 'Userspace PASST stack', | ||
| detailParagraph: _("Recommended method to provide a virtual LAN with NAT to the outside world. Supports port forwarding.") | ||
| }, | ||
| { | ||
| name: 'user', | ||
| desc: 'Userspace SLIRP stack', | ||
| detailParagraph: _("Provides a virtual LAN with NAT to the outside world.") | ||
| desc: 'Userspace SLIRP stack (legacy)', | ||
| detailParagraph: _("Legacy method to provide a virtual LAN with NAT to the outside world.") |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why do we display "Userspace SLIRP stack" and such to begin with? Feels a bit weird to me to have it displayed in the select vs just writing "slirp" and "passt". We can in the select dropdown have a description for each entry to make it easier, which would look like this: https://www.patternfly.org/components/menus/menu#with-descriptions
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In the latest version, there is no user choice anymore between slirp and passt. Cockpit switches from slirp to passt as required, but will never switch back.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I meant, why do we have "Userspace SLIRP stack" instead of just "slirp"?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I meant, why do we have "Userspace SLIRP stack" instead of just "slirp"?
I don't know. Personally, I would like to avoid saying "slirp" or "passt" in the UI at all. The user should not need to make a decision between the two.
src/components/vm/nics/nicBody.tsx
Outdated
| for (let i = 0; i < pf.ranges.length; i++) { | ||
| const r = pf.ranges[i]; | ||
| if (text != "") | ||
| text += ", "; | ||
| if (r.exclude == "yes") | ||
| text += _("excluding "); | ||
| text += r.start; | ||
| if (r.end) | ||
| text += "-" + r.end; | ||
| if (r.to) | ||
| text += " → " + r.to + (r.end ? "-" + (Number(r.to) + Number(r.end) - Number(r.start)).toString() : ""); | ||
| if (pf.proto && pf.proto != "tcp") | ||
| text += "/" + pf.proto; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I really dislike having one-letter variables and would much rather want to keep it expanded a bit
| } : { | ||
| id: string, | ||
| item: DialogSimplePortForward, | ||
| onChange: <K extends keyof DialogSimplePortForward>(idx: number, key: K, value: DialogSimplePortForward[K]) => void, | ||
| idx: number, | ||
| removeitem: (idx: number) => void, | ||
| }) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Lets split this out to an interface too
interface SimplePortForwardProps {
// ...
}
const SimplePortForward = ({...}): SimplePortForwardProps {...}e5f91a8 to
baa4847
Compare
baa4847 to
27627c5
Compare
Yes, I didn't try at all to make it nice.
I think we can postpone that indefinitely until there is clear demand. |
9f7345f to
548bcc3
Compare
5ca5232 to
4af3b62
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There are more than 10 code coverage comments, see the full report here.
bd2aa21 to
57e3277
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There are more than 10 code coverage comments, see the full report here.
Very good suggestions! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There are more than 10 code coverage comments, see the full report here.
Aha, should we make this a follow up then if the whole dialog misses it? |
|
Ouch, when there is an error adding the new port forwards, we already have cleared out the old ones... |
I agree with this. Looks a lot better and it's following the expected |
Nah, I have started on it. I find this whole topic annoying: We have no clear guidelines and no shareable code and every dialog turns into a spaghetti monster, and does validation slightly differently from any other. [dramatic exaggeration] But I am ready now to do something about this! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There are more than 10 code coverage comments, see the full report here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There are more than 10 code coverage comments, see the full report here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There are more than 10 code coverage comments, see the full report here.
d9d932d to
86211d6
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There are more than 10 code coverage comments, see the full report here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There are more than 10 code coverage comments, see the full report here.
src/components/vm/nics/nic.css
Outdated
| /* Move 'Remove' button to the bottom of the line so as to align with the other form fields */ | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-items: flex-end; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the button alignment here is not quite right, it's more towrds bottom rather than being on center with the other groups.
You'll need to add the following css to the button element. Same as in podman.
| align-items: flex-end; | |
| align-items: flex-end; | |
| + | |
| + button { | |
| + margin-block-end: var(--pf-t--global--spacer--xs); | |
| + } |
Before:
After:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I had to align from the top, with a ugly computation:
align-items: flex-start;
button {
margin-block-start: calc(var(--pf-v6-c-form__label--LineHeight) * var(--pf-v6-c-form__label--FontSize) +
var(--pf-v6-c-form__group--Gap) +
var(--pf-t--global--spacer--xs));
}
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
argh, yes. I forgot about the additional padding when helper text shows up. Good catch! And the same problem also needs to be fixed in c-podman's port forwarding.
| } | ||
|
|
||
| function validateAddress(addr: string): string | undefined { | ||
| if (addr && !ipaddr.isValid(addr)) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd be careful about ipaddr.isValid as it uses ipaddr.IPv4.isValid which also considers "short" variants of IPv4 to be valid. Is libvirt OK with it when it receives IPv4 address that isn't in the typical 4 octets format? AFAIK there is no RFC for such format and you might want to use ipaddr.IPv4.isValidFourPartDecimal instead.
ipaddr.IPv6.isValid which is used in the background should be fine from what I remember from cockpit networking page.
I'd change this to (ipaddr.IPv4.isValidFourPartDecimal(addr) || ipaddr.IPv6.isValid(addr)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
after testing it it looks like it's fine or some part of JS code expands the format. Inputting 10.10 into the address field and clicking save changes it to 10.0.0.10.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok, thanks for checking!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There are more than 10 code coverage comments, see the full report here.
| this.state = { | ||
| dialogError: undefined, | ||
| networkType: "network", | ||
| networkType: this.props.vm.connectionName == "session" ? "user" : "network", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This added line is not executed by any test. Details
| } | ||
|
|
||
| if (this.state.doOnlineValidation) | ||
| this.setState(state => ({ validation: validateDialogBodyValues(state) })); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This added line is not executed by any test. Details
| if (validation) { | ||
| this.setState({ validation, doOnlineValidation: true }); | ||
| return; |
There was a problem hiding this comment.
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
| type: this.state.networkType, | ||
| backend: { type: backend }, | ||
| source, | ||
| portForward: this.state.networkType == "user" ? dialogPortForwardsToInterface(this.state.portForwards) : null, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This added line is not executed by any test. Details
| onValueChanged={this.onValueChanged} />} | ||
| </Form> | ||
| <> | ||
| <Form onSubmit={e => e.preventDefault()} isHorizontal> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This added line is not executed by any test. Details
| if (pf.address) | ||
| text += pf.address + ":"; | ||
| if (pf.dev) | ||
| text += pf.dev + ":"; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This added line is not executed by any test. Details
| if (pf.dev) | ||
| text += pf.dev + ":"; | ||
| if (!pf.range.some(r => r.exclude != "yes")) | ||
| text += _("all"); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This added line is not executed by any test. Details
| if (r.end) | ||
| text += "-" + r.end; | ||
| if (!r.exclude) | ||
| text += " → " + (r.to || r.start) + (r.end ? "-" + (Number(r.to || r.start) + Number(r.end) - Number(r.start)).toString() : ""); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This added line is not executed by any test. Details
| return { | ||
| kind: "simple", | ||
| address: pf.address || "", | ||
| proto: pf.proto || "", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This added line is not executed by any test. Details
| address: pf.address || "", | ||
| proto: pf.proto || "", | ||
| host: r.start + (r.end ? "-" + r.end : ""), | ||
| guest: r.to || "", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This added line is not executed by any test. Details

Fixes #2186
Demo: https://youtu.be/L-EWj0dmgoo
Obsolete demo with choice, shows more about port forwarding: https://youtu.be/mhwTZ3CW8iI
Machines: Support for network port forwarding
Cockpit can now configure port forwarding for virtual machines on the user session.