Improve IP configuration UI

[MindFreeze]

Proposed change

Split netmask from IP address only on the frontend for presentation.
The netmask on the IP address is confusing for users.
The goal is to make a separate netmask field (255.255.255.0 format).

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[piitaya]

If we have multiple addresses, should be use multiple fields (one per address)? Otherwise we will have something like :

Address
192.168.1.2, 10.0.0.1

Netmask
255.255.255.255, 255.0.0.0

[MindFreeze]

If we have multiple addresses, should be use multiple fields (one per address)? Otherwise we will have something like :

Address 192.168.1.2, 10.0.0.1

Netmask 255.255.255.255, 255.0.0.0

The thing is that addresses are still combined in the API so they can in theory have different masks. I also don't think multiple addresses are a common enough case to bother but I could be wrong.

[piitaya]

The problem is that it adds a lot of complexity in the code for an uncommon use-case.

Should we create two method to transform the address format so at least the code is simpler so at least we don't need to splitting and join logic in the component?

For example :

const formatAddress = (host: string, netmask: string) => string;
const parseAddress = (fullAddress: string) => { host: string, netmask: string };

[MindFreeze]

That's exactly how I started but it turned out these just replace address.split('/)[0] with parseAddress(address).host. This seemed pointless to me.

[MindFreeze]

And I always need/have the address OR the mask and didn't want to convert both every time.

[MindFreeze]

• put IP & Netmask on 1 line with add button
• split DNS values and add button with dropdown
• show values when in Automatic mode and remove IP info dialog
  

[agners]

The thing is that addresses are still combined in the API so they can in theory have different masks. I also don't think multiple addresses are a common enough case to bother but I could be wrong.

Yeah I agree for IPv4 supporting a single IP address if fine, at least for the UI. We could support this through CLI if needs to be. For IPv6 this is more common, but since we use the netmask format for IPv6 that is not a problem there. In IPv6, setting a static IP is rather uncommon in general, so most people should be able to leave the setting in automatic for IPv6.

I like that new view! 🤩

As for netmask, what you can do is suggest a netmask. Even though we are in a classless world these days, the classes still remain a common default. So essentially, if an IPv4 of Class A is typed, suggest 255.0.0.0, etc. (see https://en.wikipedia.org/wiki/Classful_network#Classful_addressing_definition). Most people probably type a Class C address.

[piitaya]

Nice ! I like it 🙂 I only submitted small review comments about code style.

[agners]

Hm, does this commit means that we have a separate mask field for IPv6 with lots of ff?

a31470a

I don't think that is a good idea. Noone is doing IPv6 masks that way, it is just waay to much to write. If we don't want the implicit /, simply use a separate field for the prefix in numeric, that is what all OSes do (e.g. see Windows XP).

When it comes to network config dialog, doing what others do is really the right way to go, since that is what folks recognize and understand.