diff --git a/resources/scripts/components/dashboard/ServerRow.tsx b/resources/scripts/components/dashboard/ServerRow.tsx
index 3c3878586..47534cf77 100644
--- a/resources/scripts/components/dashboard/ServerRow.tsx
+++ b/resources/scripts/components/dashboard/ServerRow.tsx
@@ -4,7 +4,7 @@ import { faEthernet, faHdd, faMemory, faMicrochip, faServer } from '@fortawesome
import { Link } from 'react-router-dom';
import { Server } from '@/api/server/getServer';
import getServerResourceUsage, { ServerPowerState, ServerStats } from '@/api/server/getServerResourceUsage';
-import { bytesToHuman, megabytesToHuman } from '@/helpers';
+import { bytesToHuman, megabytesToHuman, formatIp } from '@/helpers';
import tw from 'twin.macro';
import GreyRowBox from '@/components/elements/GreyRowBox';
import Spinner from '@/components/elements/Spinner';
@@ -97,7 +97,7 @@ export default ({ server, className }: { server: Server; className?: string }) =
{
server.allocations.filter(alloc => alloc.isDefault).map(allocation => (
{ server.allocations.filter(alloc => alloc.isDefault).map(allocation => ( - {allocation.alias || allocation.ip}:{allocation.port} + {allocation.alias || formatIp(allocation.ip)}:{allocation.port} )) }
diff --git a/resources/scripts/components/server/ServerDetailsBlock.tsx b/resources/scripts/components/server/ServerDetailsBlock.tsx index e0706832f..34d975b81 100644 --- a/resources/scripts/components/server/ServerDetailsBlock.tsx +++ b/resources/scripts/components/server/ServerDetailsBlock.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'; import tw, { TwStyle } from 'twin.macro'; import { faCircle, faEthernet, faHdd, faMemory, faMicrochip, faServer } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { bytesToHuman, megabytesToHuman } from '@/helpers'; +import { bytesToHuman, megabytesToHuman, formatIp } from '@/helpers'; import TitledGreyBox from '@/components/elements/TitledGreyBox'; import { ServerContext } from '@/state/server'; import CopyOnClick from '@/components/elements/CopyOnClick'; @@ -72,7 +72,7 @@ const ServerDetailsBlock = () => { const isTransferring = ServerContext.useStoreState(state => state.server.data!.isTransferring); const limits = ServerContext.useStoreState(state => state.server.data!.limits); const primaryAllocation = ServerContext.useStoreState(state => state.server.data!.allocations.filter(alloc => alloc.isDefault).map( - allocation => (allocation.alias || allocation.ip) + ':' + allocation.port, + allocation => (allocation.alias || formatIp(allocation.ip)) + ':' + allocation.port, )).toString(); const diskLimit = limits.disk ? megabytesToHuman(limits.disk) : 'Unlimited'; diff --git a/resources/scripts/components/server/network/AllocationRow.tsx b/resources/scripts/components/server/network/AllocationRow.tsx index 9359edc4d..73e7e7ef2 100644 --- a/resources/scripts/components/server/network/AllocationRow.tsx +++ b/resources/scripts/components/server/network/AllocationRow.tsx @@ -18,6 +18,7 @@ import CopyOnClick from '@/components/elements/CopyOnClick'; import DeleteAllocationButton from '@/components/server/network/DeleteAllocationButton'; import setPrimaryServerAllocation from '@/api/server/network/setPrimaryServerAllocation'; import getServerAllocations from '@/api/swr/getServerAllocations'; +import { formatIp } from '@/helpers'; const Code = styled.code`${tw`font-mono py-1 px-2 bg-neutral-900 rounded text-sm inline-block`}`; const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`; @@ -66,7 +67,7 @@ const AllocationRow = ({ allocation }: Props) => {{allocation.alias}
{allocation.ip}
{formatIp(allocation.ip)}