Use numeric prefix for IPv6 mask (#25130)

src/data/hassio/network.ts

@@ -120,7 +120,7 @@ export const parseAddress = (address: string) => {
   const [ip, cidr] = address.split("/");
   const isIPv6 = ip.includes(":");
   const mask = cidr ? cidrToNetmask(cidr, isIPv6) : null;
-  return { ip, mask };
+  return { ip, mask, prefix: cidr };
 };
 
 export const formatAddress = (ip: string, mask: string) =>

src/panels/config/network/supervisor-network.ts

@@ -380,7 +380,7 @@ export class HassioNetwork extends LitElement {
           ? html`
               ${this._interface![version].address.map(
                 (address: string, index: number) => {
-                  const { ip, mask } = parseAddress(address);
+                  const { ip, mask, prefix } = parseAddress(address);
                   return html`
                     <div class="address-row">
                       <ha-textfield
@@ -395,18 +395,35 @@ export class HassioNetwork extends LitElement {
                         .disabled=${disableInputs}
                       >
                       </ha-textfield>
-                      <ha-textfield
+                      ${version === "ipv6"
-                        id="netmask"
+                        ? html`
-                        .label=${this.hass.localize(
+                            <ha-textfield
-                          "ui.panel.config.network.supervisor.netmask"
+                              id="prefix"
-                        )}
+                              .label=${this.hass.localize(
-                        .version=${version}
+                                "ui.panel.config.network.supervisor.prefix"
-                        .value=${mask}
+                              )}
-                        .index=${index}
+                              .version=${version}
-                        @change=${this._handleInputValueChanged}
+                              .value=${prefix || ""}
-                        .disabled=${disableInputs}
+                              .index=${index}
-                      >
+                              @change=${this._handleInputValueChanged}
-                      </ha-textfield>
+                              .disabled=${disableInputs}
+                            >
+                            </ha-textfield>
+                          `
+                        : html`
+                            <ha-textfield
+                              id="netmask"
+                              .label=${this.hass.localize(
+                                "ui.panel.config.network.supervisor.netmask"
+                              )}
+                              .version=${version}
+                              .value=${mask || ""}
+                              .index=${index}
+                              @change=${this._handleInputValueChanged}
+                              .disabled=${disableInputs}
+                            >
+                            </ha-textfield>
+                          `}
                       ${this._interface![version].address.length > 1 &&
                       !disableInputs
                         ? html`
@@ -654,25 +671,30 @@ export class HassioNetwork extends LitElement {
     if (id === "address") {
       const index = (ev.target as any).index as number;
       const { mask: oldMask } = parseAddress(
-        this._interface![version]!.address![index]
+        this._interface[version].address![index]
       );
       const { mask } = parseAddress(value);
-      this._interface[version]!.address![index] = formatAddress(
+      this._interface[version].address![index] = formatAddress(
         value,
         mask || oldMask || ""
       );
       this.requestUpdate("_interface");
     } else if (id === "netmask") {
       const index = (ev.target as any).index as number;
-      const { ip } = parseAddress(this._interface![version]!.address![index]);
+      const { ip } = parseAddress(this._interface[version].address![index]);
-      this._interface[version]!.address![index] = formatAddress(ip, value);
+      this._interface[version].address![index] = formatAddress(ip, value);
+      this.requestUpdate("_interface");
+    } else if (id === "prefix") {
+      const index = (ev.target as any).index as number;
+      const { ip } = parseAddress(this._interface[version].address![index]);
+      this._interface[version].address![index] = `${ip}/${value}`;
       this.requestUpdate("_interface");
     } else if (id === "nameserver") {
       const index = (ev.target as any).index as number;
-      this._interface[version]!.nameservers![index] = value;
+      this._interface[version].nameservers![index] = value;
       this.requestUpdate("_interface");
     } else {
-      this._interface[version]![id] = value;
+      this._interface[version][id] = value;
     }
   }
 
@@ -790,6 +812,10 @@ export class HassioNetwork extends LitElement {
         .address-row ha-textfield {
           flex: 1;
         }
+        .address-row #prefix {
+          flex: none;
+          width: 95px;
+        }
         .address-row ha-icon-button {
           --mdc-icon-button-size: 36px;
           margin-top: 16px;

src/translations/en.json

@@ -6331,6 +6331,7 @@
             "disabled": "Disabled",
             "ip": "IP address",
             "netmask": "Netmask",
+            "prefix": "Subnet prefix",
             "add_address": "Add address",
             "gateway": "Gateway address",
             "dns_server": "DNS Server",