server-manager/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed port mappings
Some checks failed
Build and Push Docker Image / Build image (push) Has been cancelled
Details

Browse Source
This commit is contained in:
ACoolName 2025-04-09 20:26:58 +03:00
parent f8647c50ae
commit 1d6bc8736e
2 changed files with 145 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/interfaces.tsx
View File

@ -1,56 +1,62 @@
import { JSONSchema6, JSONSchema7 } from "json-schema" import { JSONSchema6, JSONSchema7 } from "json-schema"
export interface Port { export interface Port {
Number: number Number: number
Protocol: 'tcp' | 'udp' Protocol: 'tcp' | 'udp'
} }
export interface PortMapping {
ContainerPort: number
HostPort: number
Protocol: 'tcp' | 'udp'
}
export interface ImageInfo { export interface ImageInfo {
Id: string Id: string
Name: string Name: string
Version: string Version: string
Ports: Port[] Ports: Port[]
} }
export interface ServerInfo { export interface ServerInfo {
Id: string Id: string
Name: string Name: string
On: boolean On: boolean
OwnerId: string OwnerId: string
Image: ImageInfo Image: ImageInfo
Ports: Port[] | null Ports: PortMapping[] | null
Domain: string Domain: string
Nickname?: string Nickname?: string
} }
export interface User { export interface User {
Username: string Username: string
Email: string Email: string
Permissions: number Permissions: number
} }
export interface Browser { export interface Browser {
Id: string Id: string
Domain: string Domain: string
Url: string Url: string
OwnerId: string OwnerId: string
ConnectedTo: ServerInfo ConnectedTo: ServerInfo
} }
export interface OpenApiMethodSchema { export interface OpenApiMethodSchema {
summary: string summary: string
requestBody: {content: Record<string, {schema: JSONSchema7}>} requestBody: { content: Record<string, { schema: JSONSchema7 }> }
api_response: 'Ignore' | 'Browse' | 'Terminal' api_response: 'Ignore' | 'Browse' | 'Terminal'
permissions: number permissions: number
} }
export interface OpenAPISchema { 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> }
} }

213
src/servers.tsx
View File

@ -1,131 +1,138 @@
import { AxiosInstance } from "axios" 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 { 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 { CREATE_SERVER_ACTION, Permission, SERVER_ACTIONS } from "./actions"
import ContentCopyIcon from '@mui/icons-material/ContentCopy'
export async function loadServers(api: AxiosInstance): Promise<{ status: number, data: ServerInfo[] }> { export async function loadServers(api: AxiosInstance): Promise<{ status: number, data: ServerInfo[] }> {
let response = await api.get('/servers') let response = await api.get('/servers')
return { return {
status: response.status, status: response.status,
data: response.data data: response.data
} }
} }
const serverActionsContext: Context<ActionInfo[]> = createContext([] as ActionInfo[]) 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 }) { function ServerItem(props: { server_info: ServerInfo }) {
const actions = useContext(serverActionsContext) const actions = useContext(serverActionsContext)
const [serverPermissions, setServerPermissions] = useState(null as null|number) const [serverPermissions, setServerPermissions] = useState(null as null | number)
const user = useContext(UserInfoContext) const user = useContext(UserInfoContext)
let permissions = 0 let permissions = 0
console.log(user) console.log(user)
if (props.server_info.OwnerId === user?.Username){ if (props.server_info.OwnerId === user?.Username) {
permissions |= Permission.Admin 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 permissions |= serverPermissions
}
if (user){
permissions |= user.Permissions
}
} }
if (user) {
permissions |= user.Permissions
const name = `${props.server_info.OwnerId}'s ${props.server_info.Image.Name} ${props.server_info.Image.Version} Server`
if (props.server_info.Ports === null) {
props.server_info.Ports = []
} }
}
return (
<UserInfoContext.Provider value={user? {Username: user.Username, Email: user.Email, Permissions: permissions}: null}> const name = `${props.server_info.OwnerId}'s ${props.server_info.Image.Name} ${props.server_info.Image.Version} Server`
<actionIdentifierContext.Provider value={props.server_info.Id}>
<TableRow> if (props.server_info.Ports === null) {
<TableCell>{props.server_info.Nickname}</TableCell> props.server_info.Ports = []
<TableCell>{props.server_info.OwnerId}</TableCell> }
<TableCell>{props.server_info.Image.Name}</TableCell>
<TableCell>{props.server_info.Image.Version}</TableCell> return (
<TableCell>{props.server_info.Domain}</TableCell> <UserInfoContext.Provider value={user ? { Username: user.Username, Email: user.Email, Permissions: permissions } : null}>
<TableCell>{props.server_info.Ports.map((port, index, array) => { return <Chip label={`${port.Number}/${port.Protocol}`} /> })}</TableCell> <actionIdentifierContext.Provider value={props.server_info.Id}>
<TableCell> <TableRow>
<ActionGroup actions={actions.filter((value)=>{ <TableCell>{props.server_info.Nickname}</TableCell>
switch (value.ServerState){ <TableCell>{props.server_info.OwnerId}</TableCell>
case undefined: <TableCell>{props.server_info.Image.Name}</TableCell>
return true <TableCell>{props.server_info.Image.Version}</TableCell>
case "off": <TableCell>{props.server_info.Domain}</TableCell>
return !props.server_info.On <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>
case "on": <TableCell>
return props.server_info.On <ActionGroup actions={actions.filter((value) => {
}})} identifierSubstring="server_id" /> switch (value.ServerState) {
</TableCell> case undefined:
</TableRow> return true
</actionIdentifierContext.Provider> case "off":
</UserInfoContext.Provider> return !props.server_info.On
) case "on":
return props.server_info.On
}
})} identifierSubstring="server_id" />
</TableCell>
</TableRow>
</actionIdentifierContext.Provider>
</UserInfoContext.Provider>
)
} }
export default function ServersBoard() { export default function ServersBoard() {
const [servers, setServers]: [ServerInfo[], Dispatch<ServerInfo[]>] = useState([] as ServerInfo[]); const [servers, setServers]: [ServerInfo[], Dispatch<ServerInfo[]>] = useState([] as ServerInfo[]);
servers.sort() servers.sort()
const [apiAuthenticated, setApiAuthenticated] = useContext(apiAuthenticatedContext) const [apiAuthenticated, setApiAuthenticated] = useContext(apiAuthenticatedContext)
function handleServers() { function handleServers() {
if (!apiAuthenticated) { if (!apiAuthenticated) {
return return
}
let servers_promised = loadServers(api)
servers_promised.then((response) => {
setServers(response.data)
})
.catch(
(error) => {
console.log('Failed to get servers: ' + error);
if (error.response) {
if (error.response.status === 401) {
setApiAuthenticated(false)
}
else if (error.response.status === 403) {
setApiAuthenticated(false)
}
}
}
)
} }
let servers_promised = loadServers(api)
useEffect(() => { servers_promised.then((response) => {
handleServers() setServers(response.data)
const interval = setInterval(() => { })
handleServers() .catch(
}, 5000 (error) => {
); console.log('Failed to get servers: ' + error);
return () => { clearInterval(interval) } if (error.response) {
}, [apiAuthenticated]) if (error.response.status === 401) {
setApiAuthenticated(false)
}
else if (error.response.status === 403) {
setApiAuthenticated(false)
}
}
}
)
}
useEffect(() => {
return ( handleServers()
<DataTable headers={['Nickname', 'Owner', 'Server', 'Version', 'Domain', 'Ports', 'Actions']} actionInfo={CREATE_SERVER_ACTION}> const interval = setInterval(() => {
<serverActionsContext.Provider value={SERVER_ACTIONS}> handleServers()
{ }, 5000
servers.sort((s1: ServerInfo, s2: ServerInfo) => { return s1.Id < s2.Id ? 0 : 1 }).map(
(value: ServerInfo, index: number, array) => {
return <ServerItem server_info={value} />
}
)
}
</serverActionsContext.Provider>
</DataTable>
); );
return () => { clearInterval(interval) }
}, [apiAuthenticated])
return (
<DataTable headers={['Nickname', 'Owner', 'Server', 'Version', 'Domain', 'Ports', 'Actions']} actionInfo={CREATE_SERVER_ACTION}>
<serverActionsContext.Provider value={SERVER_ACTIONS}>
{
servers.sort((s1: ServerInfo, s2: ServerInfo) => { return s1.Id < s2.Id ? 0 : 1 }).map(
(value: ServerInfo, index: number, array) => {
return <ServerItem server_info={value} />
}
)
}
</serverActionsContext.Provider>
</DataTable>
);
} }