Show allocated ports on settings page

Author: DaneEveritt

resources/scripts/api/server/getServer.ts

@@ -4,7 +4,7 @@ export interface Allocation {
     ip: string;
     alias: string | null;
     port: number;
-    default: boolean;
+    isDefault: boolean;
 }
 
 export interface Server {
@@ -49,7 +49,7 @@ export const rawDataToServerObject = (data: any): Server => ({
         ip: datum.ip,
         alias: datum.ip_alias,
         port: datum.port,
-        default: datum.is_default,
+        isDefault: datum.is_default,
     })),
     limits: { ...data.limits },
     featureLimits: { ...data.feature_limits },

resources/scripts/components/dashboard/ServerRow.tsx

@@ -65,7 +65,7 @@ export default ({ server }: { server: Server }) => {
                     <FontAwesomeIcon icon={faEthernet} css={tw`text-neutral-500`}/>
                     <p css={tw`text-sm text-neutral-400 ml-2`}>
                         {
-                            server.allocations.filter(alloc => alloc.default).map(allocation => (
+                            server.allocations.filter(alloc => alloc.isDefault).map(allocation => (
                                 <span key={allocation.ip + allocation.port.toString()}>{allocation.alias || allocation.ip}:{allocation.port}</span>
                             ))
                         }

resources/scripts/components/dashboard/search/SearchModal.tsx

@@ -112,7 +112,7 @@ export default ({ ...props }: Props) => {
                                     <p css={tw`text-sm`}>{server.name}</p>
                                     <p css={tw`mt-1 text-xs text-neutral-400`}>
                                         {
-                                            server.allocations.filter(alloc => alloc.default).map(allocation => (
+                                            server.allocations.filter(alloc => alloc.isDefault).map(allocation => (
                                                 <span key={allocation.ip + allocation.port.toString()}>{allocation.alias || allocation.ip}:{allocation.port}</span>
                                             ))
                                         }

resources/scripts/components/server/settings/ServerAllocationsContainer.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import TitledGreyBox from '@/components/elements/TitledGreyBox';
+import { ServerContext } from '@/state/server';
+import tw from 'twin.macro';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
+import styled from 'styled-components/macro';
+
+const Code = styled.code`${tw`font-mono py-1 px-2 bg-neutral-900 rounded text-sm block`}`;
+const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`;
+
+const Row = styled.div`
+    ${tw`flex items-center py-2 pl-4 pr-5 border-l-4 border-transparent transition-colors duration-150`};
+    
+    & svg {
+        ${tw`transition-colors duration-150`};
+    }
+    
+    &:hover {
+        ${tw`border-cyan-400`};
+        
+        svg {
+            ${tw`text-neutral-100`};
+        }
+        
+        ${Label} {
+            ${tw`text-neutral-200`};
+        }
+    }
+`;
+
+export default () => {
+    const allocations = ServerContext.useStoreState(state => state.server.data!.allocations);
+
+    return (
+        <TitledGreyBox title={'Allocated Ports'}>
+            {allocations.map(({ ip, port, alias, isDefault }, index) => (
+                <Row key={`${ip}:${port}`} css={index > 0 ? tw`mt-2` : undefined}>
+                    <div css={tw`mr-4 text-neutral-400`}>
+                        <FontAwesomeIcon icon={faNetworkWired}/>
+                    </div>
+                    <div css={tw`mr-4`}>
+                        <Code>{alias || ip}</Code>
+                        <Label>IP Address</Label>
+                    </div>
+                    <div>
+                        <Code>:{port}</Code>
+                        <Label>Port</Label>
+                    </div>
+                    <div css={tw`flex-1 text-right`}>
+                        {isDefault ?
+                            <span css={tw`bg-green-500 py-1 px-2 rounded text-green-50 text-xs`}>
+                                Default
+                            </span>
+                            :
+                            null
+                        }
+                    </div>
+                </Row>
+            ))}
+        </TitledGreyBox>
+    );
+};

resources/scripts/components/server/settings/SettingsContainer.tsx

@@ -13,6 +13,7 @@ import tw from 'twin.macro';
 import Input from '@/components/elements/Input';
 import Label from '@/components/elements/Label';
 import { LinkButton } from '@/components/elements/Button';
+import ServerAllocationsContainer from '@/components/server/settings/ServerAllocationsContainer';
 
 export default () => {
     const user = useStoreState<ApplicationStore, UserData>(state => state.user.data!);
@@ -22,9 +23,9 @@ export default () => {
         <PageContentBlock>
             <FlashMessageRender byKey={'settings'} css={tw`mb-4`}/>
             <div css={tw`md:flex`}>
-                <Can action={'file.sftp'}>
-                    <div css={tw`w-full md:flex-1 md:mr-10`}>
-                        <TitledGreyBox title={'SFTP Details'}>
+                <div css={tw`w-full md:flex-1 md:mr-10`}>
+                    <Can action={'file.sftp'}>
+                        <TitledGreyBox title={'SFTP Details'} css={tw`mb-6 md:mb-10`}>
                             <div>
                                 <Label>Server Address</Label>
                                 <Input
@@ -59,9 +60,7 @@ export default () => {
                                 </div>
                             </div>
                         </TitledGreyBox>
-                    </div>
-                </Can>
-                <div css={tw`w-full mt-6 md:flex-1 md:mt-0`}>
+                    </Can>
                     <Can action={'settings.rename'}>
                         <div css={tw`mb-6 md:mb-10`}>
                             <RenameServerBox/>
@@ -71,6 +70,9 @@ export default () => {
                         <ReinstallServerBox/>
                     </Can>
                 </div>
+                <div css={tw`w-full mt-6 md:flex-1 md:mt-0`}>
+                    <ServerAllocationsContainer/>
+                </div>
             </div>
         </PageContentBlock>
     );