From 34da772db7bab9bafa5e7c017e8c4d22181e4fa8 Mon Sep 17 00:00:00 2001
From: Matthew Penner <me@matthewp.io>
Date: Thu, 16 Sep 2021 16:54:02 -0600
Subject: [PATCH] ui(admin): show alias in allocation dropdown; fixes #3434

---
 resources/scripts/api/admin/nodes/getAllocations.ts  | 12 +++++++++++-
 .../admin/servers/ServerSettingsContainer.tsx        |  6 +++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/resources/scripts/api/admin/nodes/getAllocations.ts b/resources/scripts/api/admin/nodes/getAllocations.ts
index 389fd49bd..e6f773dfe 100644
--- a/resources/scripts/api/admin/nodes/getAllocations.ts
+++ b/resources/scripts/api/admin/nodes/getAllocations.ts
@@ -12,19 +12,29 @@ export interface Allocation {
     relations: {
         server?: Server;
     }
+
+    getDisplayText (): string;
 }
 
 export const rawDataToAllocation = ({ attributes }: FractalResponseData): Allocation => ({
     id: attributes.id,
     ip: attributes.ip,
     port: attributes.port,
-    alias: attributes.ip_alias || null,
+    alias: attributes.alias || null,
     serverId: attributes.server_id,
     assigned: attributes.assigned,
 
     relations: {
         server: attributes.relationships?.server?.object === 'server' ? rawDataToServer(attributes.relationships.server as FractalResponseData) : undefined,
     },
+
+    // TODO: If IP is an IPv6, wrap IP in [].
+    getDisplayText (): string {
+        if (attributes.alias !== null) {
+            return `${attributes.ip}:${attributes.port} (${attributes.alias})`;
+        }
+        return `${attributes.ip}:${attributes.port}`;
+    },
 });
 
 export interface Filters {
diff --git a/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx b/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx
index bd138369e..6f2f70627 100644
--- a/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx
+++ b/resources/scripts/components/admin/servers/ServerSettingsContainer.tsx
@@ -99,7 +99,7 @@ export function ServerAllocationsContainer ({ server }: { server: Server }) {
     const loadOptions = async (inputValue: string, callback: (options: Option[]) => void) => {
         const allocations = await getAllocations(server.nodeId, { ip: inputValue, server_id: '0' });
         callback(allocations.map(a => {
-            return { value: a.id.toString(), label: a.ip + ':' + a.port };
+            return { value: a.id.toString(), label: a.getDisplayText() };
         }));
     };
 
@@ -114,7 +114,7 @@ export function ServerAllocationsContainer ({ server }: { server: Server }) {
                     name={'allocationId'}
                 >
                     {server.relations?.allocations?.map(a => (
-                        <option key={a.id} value={a.id}>{a.ip}:{a.port}</option>
+                        <option key={a.id} value={a.id}>{a.getDisplayText()}</option>
                     ))}
                 </Select>
             </div>
@@ -133,7 +133,7 @@ export function ServerAllocationsContainer ({ server }: { server: Server }) {
                 name={'removeAllocations'}
                 label={'Remove Allocations'}
                 options={server.relations?.allocations?.map(a => {
-                    return { value: a.id.toString(), label: a.ip + ':' + a.port };
+                    return { value: a.id.toString(), label: a.getDisplayText() };
                 }) || []}
                 isMulti
                 isSearchable