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
 }
@@ -44,13 +50,13 @@ export interface Browser {
 
 export interface OpenApiMethodSchema {
   summary: string
-    requestBody: {content: Record<string, {schema: JSONSchema7}>}
+  requestBody: { content: Record<string, { schema: JSONSchema7 }> }
   api_response: 'Ignore' | 'Browse' | 'Terminal'
   permissions: number
 }
 
 
 export interface OpenAPISchema {
-    paths: Record<string, {get?: OpenApiMethodSchema, post?: OpenApiMethodSchema, delete?: OpenApiMethodSchema}>
+  paths: Record<string, { get?: OpenApiMethodSchema, post?: OpenApiMethodSchema, delete?: OpenApiMethodSchema }>
-    components: {schema: Record<string, JSONSchema7>}
+  components: { schema: Record<string, JSONSchema7> }
 }

src/servers.tsx

@@ -1,10 +1,10 @@
 import { AxiosInstance } from "axios"
-import { ActionGroup, ActionInfo, DataTable, UserInfoContext, actionIdentifierContext, api, apiAuthenticatedContext} from "./common"
+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 { PortMapping, ServerInfo } from "./interfaces"
-import { JSONSchema7 } from "json-schema"
 import { CREATE_SERVER_ACTION, Permission, SERVER_ACTIONS } from "./actions"
+import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 
 
 
@@ -18,22 +18,28 @@ 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)
-    const [serverPermissions, setServerPermissions] = useState(null as null|number)
+  const [serverPermissions, setServerPermissions] = useState(null as null | number)
   const user = useContext(UserInfoContext)
   let permissions = 0
   console.log(user)
-    if (props.server_info.OwnerId === user?.Username){
+  if (props.server_info.OwnerId === user?.Username) {
     permissions |= Permission.Admin
-    }else{
+  } else {
-        if (serverPermissions === null){
+    if (serverPermissions === null) {
-            api.get(`/servers/${props.server_info.Id}/permissions`).then((event)=>{setServerPermissions(event.data)})
+      api.get(`/servers/${props.server_info.Id}/permissions`).then((event) => { setServerPermissions(event.data) })
-        }else{
+    } else {
       permissions |= serverPermissions
     }
-        if (user){
+    if (user) {
       permissions |= user.Permissions
     }
   }
@@ -46,7 +52,7 @@ function ServerItem(props: { server_info: ServerInfo }) {
   }
 
   return (
-        <UserInfoContext.Provider value={user? {Username: user.Username, Email: user.Email, Permissions: permissions}: null}>
+    <UserInfoContext.Provider value={user ? { Username: user.Username, Email: user.Email, Permissions: permissions } : null}>
       <actionIdentifierContext.Provider value={props.server_info.Id}>
         <TableRow>
           <TableCell>{props.server_info.Nickname}</TableCell>
@@ -54,17 +60,18 @@ 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)=>{
+            <ActionGroup actions={actions.filter((value) => {
-                            switch (value.ServerState){
+              switch (value.ServerState) {
                 case undefined:
                   return true
                 case "off":
                   return !props.server_info.On
                 case "on":
                   return props.server_info.On
-                        }})} identifierSubstring="server_id" />
+              }
+            })} identifierSubstring="server_id" />
           </TableCell>
         </TableRow>
       </actionIdentifierContext.Provider>