Improve IP configuration UI (#22320)

* Split netmask from IP address

* handle ipv6 as well

* render fix

* improved UI for IP, mask & DNS

* remove ip detail dialog

* use `nothing`

Co-authored-by: Paul Bottein <[email protected]>

* use ha-list-item instead of mwc

---------

Co-authored-by: Paul Bottein <[email protected]>

src/data/hassio/network.ts

@@ -4,7 +4,7 @@ import { hassioApiResultExtractor, HassioResponse } from "./common";
 
 interface IpConfiguration {
   address: string[];
-  gateway: string;
+  gateway: string | null;
   method: "disabled" | "static" | "auto";
   nameservers: string[];
 }
@@ -114,3 +114,65 @@ export const accesspointScan = async (
     )
   );
 };
+
+export const parseAddress = (address: string) => {
+  const [ip, cidr] = address.split("/");
+  return { ip, mask: cidrToNetmask(cidr, address.includes(":")) };
+};
+
+export const formatAddress = (ip: string, mask: string) =>
+  `${ip}/${netmaskToCidr(mask)}`;
+
+// Helper functions
+export const cidrToNetmask = (
+  cidr: string,
+  isIPv6: boolean = false
+): string => {
+  const bits = parseInt(cidr, 10);
+  if (isIPv6) {
+    const fullMask = "ffff:ffff:ffff:ffff:ffff:ffff:ffff:ffff";
+    const numGroups = Math.floor(bits / 16);
+    const remainingBits = bits % 16;
+    const lastGroup = remainingBits
+      ? parseInt(
+          "1".repeat(remainingBits) + "0".repeat(16 - remainingBits),
+          2
+        ).toString(16)
+      : "";
+    return fullMask
+      .split(":")
+      .slice(0, numGroups)
+      .concat(lastGroup)
+      .concat(Array(8 - numGroups - (lastGroup ? 1 : 0)).fill("0"))
+      .join(":");
+  }
+  /* eslint-disable no-bitwise */
+  const mask = ~(2 ** (32 - bits) - 1);
+  return [
+    (mask >>> 24) & 255,
+    (mask >>> 16) & 255,
+    (mask >>> 8) & 255,
+    mask & 255,
+  ].join(".");
+  /* eslint-enable no-bitwise */
+};
+
+export const netmaskToCidr = (netmask: string): number => {
+  if (netmask.includes(":")) {
+    // IPv6
+    return netmask
+      .split(":")
+      .map((group) =>
+        group ? (parseInt(group, 16).toString(2).match(/1/g) || []).length : 0
+      )
+      .reduce((sum, val) => sum + val, 0);
+  }
+  // IPv4
+  return netmask
+    .split(".")
+    .reduce(
+      (count, octet) =>
+        count + (parseInt(octet, 10).toString(2).match(/1/g) || []).length,
+      0
+    );
+};