189 lines
9.1 KiB
TypeScript
189 lines
9.1 KiB
TypeScript
import { ActionIcon, Badge, Divider, Menu, Space, Title, Tooltip } from '@mantine/core';
|
|
import React, { useState } from 'react';
|
|
import { FaPlay, FaStop } from 'react-icons/fa';
|
|
import { porthijack, Service } from '../utils';
|
|
import style from "./index.module.scss";
|
|
import YesNoModal from '../../YesNoModal';
|
|
import { errorNotify, okNotify } from '../../../js/utils';
|
|
import { BsArrowRepeat, BsTrashFill } from 'react-icons/bs';
|
|
import { BiRename } from 'react-icons/bi'
|
|
import RenameForm from './RenameForm';
|
|
import ChangeDestination from './ChangeDestination';
|
|
import PortInput from '../../PortInput';
|
|
import { useForm } from '@mantine/form';
|
|
import { MenuDropDownWithButton } from '../../MainLayout';
|
|
|
|
function ServiceRow({ service }:{ service:Service }) {
|
|
|
|
let status_color = service.active ? "teal": "red"
|
|
|
|
const [buttonLoading, setButtonLoading] = useState(false)
|
|
const [tooltipStopOpened, setTooltipStopOpened] = useState(false);
|
|
const [deleteModal, setDeleteModal] = useState(false)
|
|
const [renameModal, setRenameModal] = useState(false)
|
|
const [changeDestModal, setChangeDestModal] = useState(false)
|
|
const portInputRef = React.createRef<HTMLInputElement>()
|
|
|
|
const form = useForm({
|
|
initialValues: { proxy_port:service.proxy_port },
|
|
validate:{ proxy_port: (value) => (value > 0 && value < 65536)? null : "Invalid proxy port" }
|
|
})
|
|
|
|
const onChangeProxyPort = ({proxy_port}:{proxy_port:number}) => {
|
|
if (proxy_port === service.proxy_port) return
|
|
if (proxy_port > 0 && proxy_port < 65536 && proxy_port !== service.public_port){
|
|
porthijack.changedestination(service.service_id, service.ip_dst, proxy_port).then( res => {
|
|
if (res.status === "ok"){
|
|
okNotify(`Service ${service.name} destination port has changed in ${ proxy_port }`, `Successfully changed destination port`)
|
|
}else{
|
|
errorNotify(`Error while changing the destination port of ${service.name}`,`Error: ${res.status}`)
|
|
}
|
|
}).catch( err => {
|
|
errorNotify("Request for changing port failed!",`Error: [ ${err} ]`)
|
|
})
|
|
}else{
|
|
form.setFieldValue("proxy_port", service.proxy_port)
|
|
errorNotify(`Error while changing the destination port of ${service.name}`,`Insert a valid port number`)
|
|
}
|
|
}
|
|
|
|
const stopService = async () => {
|
|
setButtonLoading(true)
|
|
|
|
await porthijack.servicestop(service.service_id).then(res => {
|
|
if(!res){
|
|
okNotify(`Service ${service.name} stopped successfully!`,`The service on ${service.public_port} has been stopped!`)
|
|
}else{
|
|
errorNotify(`An error as occurred during the stopping of the service ${service.public_port}`,`Error: ${res}`)
|
|
}
|
|
}).catch(err => {
|
|
errorNotify(`An error as occurred during the stopping of the service ${service.public_port}`,`Error: ${err}`)
|
|
})
|
|
setButtonLoading(false);
|
|
}
|
|
|
|
const startService = async () => {
|
|
setButtonLoading(true)
|
|
await porthijack.servicestart(service.service_id).then(res => {
|
|
if(!res){
|
|
okNotify(`Service ${service.name} started successfully!`,`The service on ${service.public_port} has been started!`)
|
|
}else{
|
|
errorNotify(`An error as occurred during the starting of the service ${service.public_port}`,`Error: ${res}`)
|
|
}
|
|
}).catch(err => {
|
|
errorNotify(`An error as occurred during the starting of the service ${service.public_port}`,`Error: ${err}`)
|
|
})
|
|
setButtonLoading(false)
|
|
}
|
|
|
|
const deleteService = () => {
|
|
porthijack.servicedelete(service.service_id).then(res => {
|
|
if (!res){
|
|
okNotify("Service delete complete!",`The service ${service.name} has been deleted!`)
|
|
}else
|
|
errorNotify("An error occurred while deleting a service",`Error: ${res}`)
|
|
}).catch(err => {
|
|
errorNotify("An error occurred while deleting a service",`Error: ${err}`)
|
|
})
|
|
|
|
}
|
|
|
|
return <>
|
|
<div className={style.row} style={{width:"100%"}}>
|
|
<Space w="xl" /><Space w="xl" />
|
|
<div>
|
|
<div className="center-flex-row">
|
|
<Title order={4} className={style.name}>{service.name}</Title>
|
|
<div className="center-flex">
|
|
<Badge color={status_color} radius="sm" size="md" variant="filled">Status: <u>{service.active?"ENABLED":"DISABLED"}</u></Badge>
|
|
<Space w="sm" />
|
|
<Badge color={service.proto === "tcp"?"cyan":"orange"} radius="sm" size="md" variant="filled">
|
|
{service.proto}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='flex-spacer' />
|
|
<div className="center-flex-row">
|
|
<Badge color="lime" radius="sm" size="md" variant="filled">
|
|
FROM {service.ip_src} : {service.public_port}
|
|
</Badge>
|
|
<Space h="sm" />
|
|
<Badge color="blue" radius="sm" size="md" variant="filled">
|
|
<div className="center-flex">
|
|
TO {service.ip_dst} :
|
|
<form onSubmit={form.onSubmit((v)=>portInputRef.current?.blur())}>
|
|
<PortInput
|
|
defaultValue={service.proxy_port}
|
|
size="xs"
|
|
variant="unstyled"
|
|
style={{
|
|
width: (6+form.values.proxy_port.toString().length*6.2) +"px"
|
|
}}
|
|
className={style.portInput}
|
|
onBlur={(e)=>{onChangeProxyPort({proxy_port:parseInt(e.target.value)})}}
|
|
ref={portInputRef}
|
|
{...form.getInputProps("proxy_port")}
|
|
/>
|
|
</form>
|
|
</div>
|
|
</Badge>
|
|
</div>
|
|
|
|
<Space w="xl" /><Space w="xl" />
|
|
<div className="center-flex">
|
|
<MenuDropDownWithButton>
|
|
<Menu.Label><b>Rename service</b></Menu.Label>
|
|
<Menu.Item icon={<BiRename size={18} />} onClick={()=>setRenameModal(true)}>Change service name</Menu.Item>
|
|
<Menu.Label><b>Change destination</b></Menu.Label>
|
|
<Menu.Item icon={<BsArrowRepeat size={18} />} onClick={()=>setChangeDestModal(true)}>Change hijacking destination</Menu.Item>
|
|
<Divider />
|
|
<Menu.Label><b>Danger zone</b></Menu.Label>
|
|
<Menu.Item color="red" icon={<BsTrashFill size={18} />} onClick={()=>setDeleteModal(true)}>Delete Service</Menu.Item>
|
|
</MenuDropDownWithButton>
|
|
<Space w="md"/>
|
|
<Tooltip label="Stop service" zIndex={0} color="red" opened={tooltipStopOpened}>
|
|
<ActionIcon color="red" loading={buttonLoading}
|
|
onClick={stopService} size="xl" radius="md" variant="filled"
|
|
disabled={!service.active}
|
|
aria-describedby="tooltip-stop-id"
|
|
onFocus={() => setTooltipStopOpened(false)} onBlur={() => setTooltipStopOpened(false)}
|
|
onMouseEnter={() => setTooltipStopOpened(true)} onMouseLeave={() => setTooltipStopOpened(false)}>
|
|
<FaStop size="20px" />
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
<Space w="md"/>
|
|
<Tooltip label="Start service" zIndex={0} color="teal">
|
|
<ActionIcon color="teal" size="xl" radius="md" onClick={startService} loading={buttonLoading}
|
|
variant="filled" disabled={service.active}>
|
|
<FaPlay size="20px" />
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
</div>
|
|
<Space w="xl" /><Space w="xl" />
|
|
|
|
</div>
|
|
<hr style={{width:"100%"}}/>
|
|
<YesNoModal
|
|
title='Are you sure to delete this service?'
|
|
description={`You are going to delete the service '${service.public_port}', causing the stopping of the firewall and deleting all the regex associated. This will cause the shutdown of your service! ⚠️`}
|
|
onClose={()=>setDeleteModal(false) }
|
|
action={deleteService}
|
|
opened={deleteModal}
|
|
/>
|
|
<RenameForm
|
|
onClose={()=>setRenameModal(false)}
|
|
opened={renameModal}
|
|
service={service}
|
|
/>
|
|
<ChangeDestination
|
|
onClose={()=>setChangeDestModal(false)}
|
|
opened={changeDestModal}
|
|
service={service}
|
|
/>
|
|
</>
|
|
}
|
|
|
|
export default ServiceRow;
|