fixed port mappings

src/interfaces.tsx

@@ -6,6 +6,12 @@ export interface Port {
 }
 
 
+export interface PortMapping {
+  ContainerPort: number
+  HostPort: number
+  Protocol: 'tcp' | 'udp'
+}
+
 export interface ImageInfo {
   Id: string
   Name: string
@@ -20,7 +26,7 @@ export interface ServerInfo {
   On: boolean
   OwnerId: string
   Image: ImageInfo
-    Ports: Port[] | null
+  Ports: PortMapping[] | null
   Domain: string
   Nickname?: string
 }

src/servers.tsx

@@ -1,10 +1,10 @@
 import { AxiosInstance } from "axios"
 import { ActionGroup, ActionInfo, DataTable, UserInfoContext, actionIdentifierContext, api, apiAuthenticatedContext } from "./common"
-import React, { Context, Dispatch, createContext, useContext, useEffect, useState } from "react"
+import { Context, Dispatch, createContext, useContext, useEffect, useState } from "react"
 import { TableRow, TableCell, Chip } from "@mui/material"
-import { ImageInfo, ServerInfo } from "./interfaces"
-import { JSONSchema7 } from "json-schema"
+import { PortMapping, ServerInfo } from "./interfaces"
 import { CREATE_SERVER_ACTION, Permission, SERVER_ACTIONS } from "./actions"
+import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 
 
 
@@ -18,6 +18,12 @@ export async function loadServers(api: AxiosInstance): Promise<{ status: number,
 
 const serverActionsContext: Context<ActionInfo[]> = createContext([] as ActionInfo[])
 
+function generateChipHandler(domain: string, port: PortMapping) {
+  return () => {
+    navigator.clipboard.writeText(`${domain}:${port.HostPort}`)
+  }
+
+}
 
 function ServerItem(props: { server_info: ServerInfo }) {
   const actions = useContext(serverActionsContext)
@@ -54,7 +60,7 @@ function ServerItem(props: { server_info: ServerInfo }) {
           <TableCell>{props.server_info.Image.Name}</TableCell>
           <TableCell>{props.server_info.Image.Version}</TableCell>
           <TableCell>{props.server_info.Domain}</TableCell>
-                    <TableCell>{props.server_info.Ports.map((port, index, array) => { return <Chip label={`${port.Number}/${port.Protocol}`} /> })}</TableCell>
+          <TableCell>{props.server_info.Ports.map((port, index, array) => { return <Chip onClick={generateChipHandler(props.server_info.Domain, port)} label={`${port.HostPort}:${port.ContainerPort}/${port.Protocol}`} icon={<ContentCopyIcon />} /> })}</TableCell>
           <TableCell>
             <ActionGroup actions={actions.filter((value) => {
               switch (value.ServerState) {
@@ -64,7 +70,8 @@ function ServerItem(props: { server_info: ServerInfo }) {
                   return !props.server_info.On
                 case "on":
                   return props.server_info.On
-                        }})} identifierSubstring="server_id" />
+              }
+            })} identifierSubstring="server_id" />
           </TableCell>
         </TableRow>
       </actionIdentifierContext.Provider>