src/interfaces.tsx

@@ -6,12 +6,6 @@ export interface Port {
 }
 
 
-export interface PortMapping {
-  ContainerPort: number
-  HostPort: number
-  Protocol: 'tcp' | 'udp'
-}
-
 export interface ImageInfo {
     Id: string
     Name: string
@@ -26,7 +20,7 @@ export interface ServerInfo {
     On: boolean
     OwnerId: string
     Image: ImageInfo
-  Ports: PortMapping[] | null
+    Ports: Port[] | 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 { Context, Dispatch, createContext, useContext, useEffect, useState } from "react"
+import React, { Context, Dispatch, createContext, useContext, useEffect, useState } from "react"
 import { TableRow, TableCell, Chip } from "@mui/material"
-import { PortMapping, ServerInfo } from "./interfaces"
+import { ImageInfo, 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,12 +18,6 @@ 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)
@@ -60,7 +54,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 onClick={generateChipHandler(props.server_info.Domain, port)} label={`${port.HostPort}:${port.ContainerPort}/${port.Protocol}`} icon={<ContentCopyIcon />} /> })}</TableCell>
+                    <TableCell>{props.server_info.Ports.map((port, index, array) => { return <Chip label={`${port.Number}/${port.Protocol}`} /> })}</TableCell>
                     <TableCell>
                         <ActionGroup actions={actions.filter((value)=>{
                             switch (value.ServerState){
@@ -70,8 +64,7 @@ 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>