feat(instance) introduce dedicated InstanceIps component

canonical · May 15, 2023 · 5d8af71 · 5d8af71
1 parent a400ff7
commit 5d8af71
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 76 deletions.
diff --git a/src/pages/instances/InstanceDetailPanel.tsx b/src/pages/instances/InstanceDetailPanel.tsx
@@ -14,10 +14,9 @@ import usePanelParams from "util/usePanelParams";
 import { useNotify } from "context/notify";
 import InstanceStateActions from "pages/instances/actions/InstanceStateActions";
 import InstanceLink from "pages/instances/InstanceLink";
-import { getIpAddressElements } from "util/networks";
-import ExpandableList from "../../components/ExpandableList";
 import ItemName from "components/ItemName";
 import DetailPanel from "components/DetailPanel";
+import InstanceIps from "pages/instances/InstanceIps";
 
 const RECENT_SNAPSHOT_LIMIT = 5;
 
@@ -40,9 +39,6 @@ const InstanceDetailPanel: FC = () => {
     notify.failure("Loading instance failed", error);
   }
 
-  const ip4Addresses = instance ? getIpAddressElements(instance, "inet") : [];
-  const ip6Addresses = instance ? getIpAddressElements(instance, "inet6") : [];
-
   const networkDevices = Object.values(instance?.expanded_devices ?? {}).filter(
     isNicDevice
   );
@@ -114,21 +110,13 @@ const InstanceDetailPanel: FC = () => {
             <tr>
               <th className="u-text--muted">IPv4</th>
               <td>
-                {ip4Addresses.length ? (
-                  <ExpandableList items={ip4Addresses} />
-                ) : (
-                  "-"
-                )}
+                <InstanceIps instance={instance} family="inet" />
               </td>
             </tr>
             <tr>
               <th className="u-text--muted">IPv6</th>
               <td>
-                {ip6Addresses.length ? (
-                  <ExpandableList items={ip6Addresses} />
-                ) : (
-                  "-"
-                )}
+                <InstanceIps instance={instance} family="inet6" />
               </td>
             </tr>
             <tr>

diff --git a/src/pages/instances/InstanceIps.tsx b/src/pages/instances/InstanceIps.tsx
@@ -0,0 +1,26 @@
+import React, { FC } from "react";
+import { getIpAddresses } from "util/networks";
+import { LxdInstance } from "types/instance";
+import ExpandableList from "components/ExpandableList";
+
+interface Props {
+  instance: LxdInstance;
+  family: "inet" | "inet6";
+}
+
+const InstanceIps: FC<Props> = ({ instance, family }) => {
+  const addresses = getIpAddresses(instance, family);
+  return addresses.length ? (
+    <ExpandableList
+      items={addresses.map((address) => (
+        <div key={address} className="ip u-truncate" title={address}>
+          {address}
+        </div>
+      ))}
+    />
+  ) : (
+    <>-</>
+  );
+};
+
+export default InstanceIps;
diff --git a/src/pages/instances/InstanceList.tsx b/src/pages/instances/InstanceList.tsx
@@ -193,8 +193,12 @@ const InstanceList: FC = () => {
       const openSummary = () =>
         panelParams.openInstanceSummary(instance.name, project);
 
-      const ip4Addresses = getIpAddresses(instance, "inet", false);
-      const ip6Addresses = getIpAddresses(instance, "inet6", false);
+      const ipv4 = getIpAddresses(instance, "inet").filter(
+        (val) => !val.startsWith("127")
+      );
+      const ipv6 = getIpAddresses(instance, "inet6").filter(
+        (val) => !val.startsWith("fe80")
+      );
 
       return {
         className:
@@ -239,20 +243,14 @@ const InstanceList: FC = () => {
             className: "clickable-cell description",
           },
           {
-            content:
-              ip4Addresses.length > 1
-                ? `${ip4Addresses.length} addresses`
-                : ip4Addresses,
+            content: ipv4.length > 1 ? `${ipv4.length} addresses` : ipv4,
             role: "rowheader",
             className: "u-align--right clickable-cell ipv4",
             "aria-label": IPV4,
             onClick: openSummary,
           },
           {
-            content:
-              ip6Addresses.length > 1
-                ? `${ip6Addresses.length} addresses`
-                : ip6Addresses,
+            content: ipv6.length > 1 ? `${ipv6.length} addresses` : ipv6,
             role: "rowheader",
             "aria-label": IPV6,
             onClick: openSummary,

diff --git a/src/pages/instances/InstanceOverview.tsx b/src/pages/instances/InstanceOverview.tsx
@@ -11,8 +11,7 @@ import { updateMaxHeight } from "util/updateMaxHeight";
 import InstanceOverviewNetworks from "./InstanceOverviewNetworks";
 import InstanceOverviewProfiles from "./InstanceOverviewProfiles";
 import InstanceOverviewMetrics from "./InstanceOverviewMetrics";
-import { getIpAddressElements } from "util/networks";
-import ExpandableList from "../../components/ExpandableList";
+import InstanceIps from "pages/instances/InstanceIps";
 
 interface Props {
   instance: LxdInstance;
@@ -32,9 +31,6 @@ const InstanceOverview: FC<Props> = ({ instance }) => {
   useEffect(updateContentHeight, [inTabNotification]);
   useEventListener("resize", updateContentHeight);
 
-  const ip4Addresses = getIpAddressElements(instance, "inet");
-  const ip6Addresses = getIpAddressElements(instance, "inet6");
-
   const pid =
     !instance.state || instance.state.pid === 0 ? "-" : instance.state.pid;
 
@@ -72,21 +68,13 @@ const InstanceOverview: FC<Props> = ({ instance }) => {
               <tr>
                 <th className="p-muted-heading">IPv4</th>
                 <td>
-                  {ip4Addresses.length ? (
-                    <ExpandableList items={ip4Addresses} />
-                  ) : (
-                    "-"
-                  )}
+                  <InstanceIps instance={instance} family="inet" />
                 </td>
               </tr>
               <tr>
                 <th className="p-muted-heading">IPv6</th>
                 <td>
-                  {ip6Addresses.length ? (
-                    <ExpandableList items={ip6Addresses} />
-                  ) : (
-                    "-"
-                  )}
+                  <InstanceIps instance={instance} family="inet6" />
                 </td>
               </tr>
               <tr>

diff --git a/src/pages/networks/MapTooltip.tsx b/src/pages/networks/MapTooltip.tsx
@@ -23,11 +23,13 @@ const MapTooltip: FC<MapTooltipProps> = ({ item, type }) => {
   if (type === "instance") {
     const instance = item as LxdInstance;
 
-    const ipAddresses = getIpAddresses(instance).map((address) => (
-      <li key={address} className="p-list__item">
-        {address}
-      </li>
-    ));
+    const ipAddresses = getIpAddresses(instance, "inet")
+      .concat(getIpAddresses(instance, "inet6"))
+      .map((address) => (
+        <li key={address} className="p-list__item">
+          {address}
+        </li>
+      ));
 
     return (
       <div className="p-text--small tooltip">

diff --git a/src/util/networks.tsx b/src/util/networks.tsx
@@ -1,38 +1,13 @@
-import React from "react";
 import { LxdInstance } from "types/instance";
 
 export const getIpAddresses = (
   instance: LxdInstance,
-  family?: string,
-  showLocal = true
+  family: "inet" | "inet6"
 ) => {
   if (!instance.state?.network) return [];
-  const interfaces = Object.entries(instance.state.network).filter(
-    ([key, _value]) => key !== "lo"
-  );
-  const addresses = interfaces.flatMap(([_key, value]) => value.addresses);
-  const filteredAddresses =
-    !family && showLocal
-      ? addresses
-      : addresses.filter(
-          (item) =>
-            (family ? item.family === family : true) &&
-            (showLocal
-              ? true
-              : !(
-                  item.address.startsWith("127") ||
-                  item.address.startsWith("fe80")
-                ))
-        );
-  return filteredAddresses.map((item) => item.address);
-};
-
-export const getIpAddressElements = (instance: LxdInstance, family: string) => {
-  return getIpAddresses(instance, family).map((address) => {
-    return (
-      <div key={address} className="ip u-truncate" title={address}>
-        {address}
-      </div>
-    );
-  });
+  return Object.entries(instance.state.network)
+    .filter(([key, _value]) => key !== "lo")
+    .flatMap(([_key, value]) => value.addresses)
+    .filter((item) => item.family === family)
+    .map((item) => item.address);
 };