From de9db9666d3f48f5c8fb39d31128de999bbf66d0 Mon Sep 17 00:00:00 2001 From: Charlie Park Date: Wed, 3 Jul 2024 14:04:31 -0400 Subject: [PATCH 1/5] Add IpLink component, use on Instance page --- app/components/ExternalIps.tsx | 17 +++---------- app/components/IpLink.tsx | 25 +++++++++++++++++++ .../instances/instance/tabs/NetworkingTab.tsx | 5 +++- 3 files changed, 32 insertions(+), 15 deletions(-) create mode 100644 app/components/IpLink.tsx diff --git a/app/components/ExternalIps.tsx b/app/components/ExternalIps.tsx index dbf3cd7bb8..8473b0c308 100644 --- a/app/components/ExternalIps.tsx +++ b/app/components/ExternalIps.tsx @@ -9,9 +9,10 @@ import { useApiQuery } from '@oxide/api' import { EmptyCell, SkeletonCell } from '~/table/cells/EmptyCell' -import { CopyToClipboard } from '~/ui/lib/CopyToClipboard' import { intersperse } from '~/util/array' +import { IpLink } from './IpLink' + type InstanceSelector = { project: string; instance: string } export function ExternalIps({ project, instance }: InstanceSelector) { @@ -26,19 +27,7 @@ export function ExternalIps({ project, instance }: InstanceSelector) { return (
{intersperse( - ips.map((eip) => ( - - - {eip.ip} - - - - )), + ips.map((eip) => ), / )}
diff --git a/app/components/IpLink.tsx b/app/components/IpLink.tsx new file mode 100644 index 0000000000..0d04112385 --- /dev/null +++ b/app/components/IpLink.tsx @@ -0,0 +1,25 @@ +/* + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, you can obtain one at https://mozilla.org/MPL/2.0/. + * + * Copyright Oxide Computer Company + */ + +import { CopyToClipboard } from '~/ui/lib/CopyToClipboard' + +export const IpLink = ({ ip }: { ip: string }) => { + return ( + + + {ip} + + + + ) +} diff --git a/app/pages/project/instances/instance/tabs/NetworkingTab.tsx b/app/pages/project/instances/instance/tabs/NetworkingTab.tsx index 069acaa008..846b50493c 100644 --- a/app/pages/project/instances/instance/tabs/NetworkingTab.tsx +++ b/app/pages/project/instances/instance/tabs/NetworkingTab.tsx @@ -24,6 +24,7 @@ import { IpGlobal24Icon, Networking24Icon } from '@oxide/design-system/icons/rea import { AttachEphemeralIpModal } from '~/components/AttachEphemeralIpModal' import { AttachFloatingIpModal } from '~/components/AttachFloatingIpModal' import { HL } from '~/components/HL' +import { IpLink } from '~/components/IpLink' import { CreateNetworkInterfaceForm } from '~/forms/network-interface-create' import { EditNetworkInterfaceForm } from '~/forms/network-interface-edit' import { getInstanceSelector, useInstanceSelector, useProjectSelector } from '~/hooks' @@ -240,7 +241,9 @@ export function NetworkingTab() { const ipColHelper = createColumnHelper() const staticIpCols = [ - ipColHelper.accessor('ip', {}), + ipColHelper.accessor('ip', { + cell: (info) => , + }), ipColHelper.accessor('kind', { header: () => ( <> From 814aa05e71ccd0ff32164ce3ebdab8a9e4862547 Mon Sep 17 00:00:00 2001 From: Charlie Park Date: Wed, 3 Jul 2024 14:07:35 -0400 Subject: [PATCH 2/5] better import syntax --- app/components/ExternalIps.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/components/ExternalIps.tsx b/app/components/ExternalIps.tsx index 8473b0c308..15fc573a21 100644 --- a/app/components/ExternalIps.tsx +++ b/app/components/ExternalIps.tsx @@ -8,11 +8,10 @@ import { useApiQuery } from '@oxide/api' +import { IpLink } from '~/components/IpLink' import { EmptyCell, SkeletonCell } from '~/table/cells/EmptyCell' import { intersperse } from '~/util/array' -import { IpLink } from './IpLink' - type InstanceSelector = { project: string; instance: string } export function ExternalIps({ project, instance }: InstanceSelector) { From b22a97c8cc6e78aa57e901e133ab3bb15ae37684 Mon Sep 17 00:00:00 2001 From: Charlie Park Date: Wed, 3 Jul 2024 14:09:59 -0400 Subject: [PATCH 3/5] Move location of file --- app/components/ExternalIps.tsx | 2 +- app/pages/project/instances/instance/tabs/NetworkingTab.tsx | 2 +- app/{components => ui/lib}/IpLink.tsx | 0 3 files changed, 2 insertions(+), 2 deletions(-) rename app/{components => ui/lib}/IpLink.tsx (100%) diff --git a/app/components/ExternalIps.tsx b/app/components/ExternalIps.tsx index 15fc573a21..dee7976889 100644 --- a/app/components/ExternalIps.tsx +++ b/app/components/ExternalIps.tsx @@ -8,8 +8,8 @@ import { useApiQuery } from '@oxide/api' -import { IpLink } from '~/components/IpLink' import { EmptyCell, SkeletonCell } from '~/table/cells/EmptyCell' +import { IpLink } from '~/ui/lib/IpLink' import { intersperse } from '~/util/array' type InstanceSelector = { project: string; instance: string } diff --git a/app/pages/project/instances/instance/tabs/NetworkingTab.tsx b/app/pages/project/instances/instance/tabs/NetworkingTab.tsx index 846b50493c..1cbde97d2e 100644 --- a/app/pages/project/instances/instance/tabs/NetworkingTab.tsx +++ b/app/pages/project/instances/instance/tabs/NetworkingTab.tsx @@ -24,7 +24,6 @@ import { IpGlobal24Icon, Networking24Icon } from '@oxide/design-system/icons/rea import { AttachEphemeralIpModal } from '~/components/AttachEphemeralIpModal' import { AttachFloatingIpModal } from '~/components/AttachFloatingIpModal' import { HL } from '~/components/HL' -import { IpLink } from '~/components/IpLink' import { CreateNetworkInterfaceForm } from '~/forms/network-interface-create' import { EditNetworkInterfaceForm } from '~/forms/network-interface-edit' import { getInstanceSelector, useInstanceSelector, useProjectSelector } from '~/hooks' @@ -39,6 +38,7 @@ import { Table } from '~/table/Table' import { Badge } from '~/ui/lib/Badge' import { CreateButton } from '~/ui/lib/CreateButton' import { EmptyMessage } from '~/ui/lib/EmptyMessage' +import { IpLink } from '~/ui/lib/IpLink' import { TableControls, TableEmptyBox, TableTitle } from '~/ui/lib/Table' import { TipIcon } from '~/ui/lib/TipIcon' import { pb } from '~/util/path-builder' diff --git a/app/components/IpLink.tsx b/app/ui/lib/IpLink.tsx similarity index 100% rename from app/components/IpLink.tsx rename to app/ui/lib/IpLink.tsx From dbf04e18459b0df8762de251c4486c376e72d658 Mon Sep 17 00:00:00 2001 From: Charlie Park Date: Wed, 3 Jul 2024 14:12:44 -0400 Subject: [PATCH 4/5] refactor, remove unneeded lines --- app/ui/lib/IpLink.tsx | 29 +++++++++++++---------------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/app/ui/lib/IpLink.tsx b/app/ui/lib/IpLink.tsx index 0d04112385..d3ea88a15f 100644 --- a/app/ui/lib/IpLink.tsx +++ b/app/ui/lib/IpLink.tsx @@ -5,21 +5,18 @@ * * Copyright Oxide Computer Company */ - import { CopyToClipboard } from '~/ui/lib/CopyToClipboard' -export const IpLink = ({ ip }: { ip: string }) => { - return ( - - - {ip} - - - - ) -} +export const IpLink = ({ ip }: { ip: string }) => ( + + + {ip} + + + +) From ef443fb94f4985ee82a2ba8442a29614d42e0eb0 Mon Sep 17 00:00:00 2001 From: Charlie Park Date: Wed, 3 Jul 2024 14:34:23 -0400 Subject: [PATCH 5/5] Make configurable so link is optional --- app/components/ExternalIps.tsx | 4 ++-- .../instances/instance/tabs/NetworkingTab.tsx | 9 +++++--- app/ui/lib/{IpLink.tsx => CopyableIp.tsx} | 22 +++++++++++-------- 3 files changed, 21 insertions(+), 14 deletions(-) rename app/ui/lib/{IpLink.tsx => CopyableIp.tsx} (55%) diff --git a/app/components/ExternalIps.tsx b/app/components/ExternalIps.tsx index dee7976889..2234656780 100644 --- a/app/components/ExternalIps.tsx +++ b/app/components/ExternalIps.tsx @@ -9,7 +9,7 @@ import { useApiQuery } from '@oxide/api' import { EmptyCell, SkeletonCell } from '~/table/cells/EmptyCell' -import { IpLink } from '~/ui/lib/IpLink' +import { CopyableIp } from '~/ui/lib/CopyableIp' import { intersperse } from '~/util/array' type InstanceSelector = { project: string; instance: string } @@ -26,7 +26,7 @@ export function ExternalIps({ project, instance }: InstanceSelector) { return (
{intersperse( - ips.map((eip) => ), + ips.map((eip) => ), / )}
diff --git a/app/pages/project/instances/instance/tabs/NetworkingTab.tsx b/app/pages/project/instances/instance/tabs/NetworkingTab.tsx index 1cbde97d2e..27fecb8c71 100644 --- a/app/pages/project/instances/instance/tabs/NetworkingTab.tsx +++ b/app/pages/project/instances/instance/tabs/NetworkingTab.tsx @@ -36,9 +36,9 @@ import { useColsWithActions, type MenuAction } from '~/table/columns/action-col' import { Columns, DescriptionCell } from '~/table/columns/common' import { Table } from '~/table/Table' import { Badge } from '~/ui/lib/Badge' +import { CopyableIp } from '~/ui/lib/CopyableIp' import { CreateButton } from '~/ui/lib/CreateButton' import { EmptyMessage } from '~/ui/lib/EmptyMessage' -import { IpLink } from '~/ui/lib/IpLink' import { TableControls, TableEmptyBox, TableTitle } from '~/ui/lib/Table' import { TipIcon } from '~/ui/lib/TipIcon' import { pb } from '~/util/path-builder' @@ -116,7 +116,10 @@ const staticCols = [ ), }), colHelper.accessor('description', Columns.description), - colHelper.accessor('ip', { header: 'Private IP' }), + colHelper.accessor('ip', { + header: 'Private IP', + cell: (info) => , + }), colHelper.accessor('vpcId', { header: 'vpc', cell: (info) => , @@ -242,7 +245,7 @@ export function NetworkingTab() { const ipColHelper = createColumnHelper() const staticIpCols = [ ipColHelper.accessor('ip', { - cell: (info) => , + cell: (info) => , }), ipColHelper.accessor('kind', { header: () => ( diff --git a/app/ui/lib/IpLink.tsx b/app/ui/lib/CopyableIp.tsx similarity index 55% rename from app/ui/lib/IpLink.tsx rename to app/ui/lib/CopyableIp.tsx index d3ea88a15f..39841c77c3 100644 --- a/app/ui/lib/IpLink.tsx +++ b/app/ui/lib/CopyableIp.tsx @@ -7,16 +7,20 @@ */ import { CopyToClipboard } from '~/ui/lib/CopyToClipboard' -export const IpLink = ({ ip }: { ip: string }) => ( +export const CopyableIp = ({ ip, isLinked = true }: { ip: string; isLinked?: boolean }) => ( - - {ip} - + {isLinked ? ( + + {ip} + + ) : ( + ip + )} )