Netfliter Refactor
This commit is contained in:
nik012003
@@ -1,15 +1,13 @@
|
||||
import { ActionIcon, Badge, Divider, Grid, MediaQuery, Menu, Space, Title, Tooltip } from '@mantine/core';
|
||||
import React, { useState } from 'react';
|
||||
import { FaPause, FaPlay, FaStop } from 'react-icons/fa';
|
||||
import { FaPlay, FaStop } from 'react-icons/fa';
|
||||
import { Service } from '../../js/models';
|
||||
import { MdOutlineArrowForwardIos } from "react-icons/md"
|
||||
import style from "./ServiceRow.module.scss";
|
||||
import YesNoModal from '../YesNoModal';
|
||||
import { deleteservice, errorNotify, fireUpdateRequest, okNotify, pauseservice, regenport, startservice, stopservice } from '../../js/utils';
|
||||
import { BsArrowRepeat, BsTrashFill } from 'react-icons/bs';
|
||||
import { TbNumbers } from 'react-icons/tb';
|
||||
import { deleteservice, errorNotify, fireUpdateRequest, okNotify, startservice, stopservice } from '../../js/utils';
|
||||
import { BsTrashFill } from 'react-icons/bs';
|
||||
import { BiRename } from 'react-icons/bi'
|
||||
import ChangePortModal from './ChangePortModal';
|
||||
|
||||
//"status":"stop"/"wait"/"active"/"pause",
|
||||
function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void }) {
|
||||
@@ -17,68 +15,48 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
|
||||
let status_color = "gray";
|
||||
switch(service.status){
|
||||
case "stop": status_color = "red"; break;
|
||||
case "wait": status_color = "yellow"; break;
|
||||
case "active": status_color = "teal"; break;
|
||||
case "pause": status_color = "cyan"; break;
|
||||
}
|
||||
|
||||
const [stopModal, setStopModal] = useState(false);
|
||||
const [buttonLoading, setButtonLoading] = useState(false)
|
||||
const [tooltipStopOpened, setTooltipStopOpened] = useState(false);
|
||||
const [deleteModal, setDeleteModal] = useState(false)
|
||||
const [changePortModal, setChangePortModal] = useState(false)
|
||||
const [choosePortModal, setChoosePortModal] = useState(false)
|
||||
|
||||
const stopService = async () => {
|
||||
setButtonLoading(true)
|
||||
await stopservice(service.id).then(res => {
|
||||
await stopservice(service.port).then(res => {
|
||||
if(!res){
|
||||
okNotify(`Service ${service.id} stopped successfully!`,`The service ${service.name} has been stopped!`)
|
||||
okNotify(`Service ${service.port} stopped successfully!`,`The service ${service.name} has been stopped!`)
|
||||
fireUpdateRequest();
|
||||
}else{
|
||||
errorNotify(`An error as occurred during the stopping of the service ${service.id}`,`Error: ${res}`)
|
||||
errorNotify(`An error as occurred during the stopping of the service ${service.port}`,`Error: ${res}`)
|
||||
}
|
||||
}).catch(err => {
|
||||
errorNotify(`An error as occurred during the stopping of the service ${service.id}`,`Error: ${err}`)
|
||||
errorNotify(`An error as occurred during the stopping of the service ${service.port}`,`Error: ${err}`)
|
||||
})
|
||||
setButtonLoading(false);
|
||||
}
|
||||
|
||||
const startService = async () => {
|
||||
setButtonLoading(true)
|
||||
await startservice(service.id).then(res => {
|
||||
await startservice(service.port).then(res => {
|
||||
if(!res){
|
||||
okNotify(`Service ${service.id} started successfully!`,`The service ${service.name} has been started!`)
|
||||
okNotify(`Service ${service.port} started successfully!`,`The service ${service.name} has been started!`)
|
||||
fireUpdateRequest();
|
||||
}else{
|
||||
errorNotify(`An error as occurred during the starting of the service ${service.id}`,`Error: ${res}`)
|
||||
errorNotify(`An error as occurred during the starting of the service ${service.port}`,`Error: ${res}`)
|
||||
}
|
||||
}).catch(err => {
|
||||
errorNotify(`An error as occurred during the starting of the service ${service.id}`,`Error: ${err}`)
|
||||
errorNotify(`An error as occurred during the starting of the service ${service.port}`,`Error: ${err}`)
|
||||
})
|
||||
setButtonLoading(false)
|
||||
}
|
||||
|
||||
const pauseService = async () => {
|
||||
setButtonLoading(true)
|
||||
await pauseservice(service.id).then(res => {
|
||||
if(!res){
|
||||
okNotify(`Service ${service.id} paused successfully!`,`The service ${service.name} has been paused (Transparent mode)!`)
|
||||
fireUpdateRequest();
|
||||
}else{
|
||||
errorNotify(`An error as occurred during the pausing of the service ${service.id}`,`Error: ${res}`)
|
||||
}
|
||||
}).catch(err => {
|
||||
errorNotify(`An error as occurred during the pausing of the service ${service.id}`,`Error: ${err}`)
|
||||
})
|
||||
setButtonLoading(false)
|
||||
|
||||
}
|
||||
|
||||
const deleteService = () => {
|
||||
deleteservice(service.id).then(res => {
|
||||
deleteservice(service.port).then(res => {
|
||||
if (!res){
|
||||
okNotify("Service delete complete!",`The service ${service.id} has been deleted!`)
|
||||
okNotify("Service delete complete!",`The service ${service.port} has been deleted!`)
|
||||
fireUpdateRequest();
|
||||
}else
|
||||
errorNotify("An error occurred while deleting a service",`Error: ${res}`)
|
||||
@@ -88,32 +66,18 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
|
||||
|
||||
}
|
||||
|
||||
const changePort = () => {
|
||||
regenport(service.id).then(res => {
|
||||
if (!res){
|
||||
okNotify("Service port regeneration completed!",`The service ${service.id} has changed the internal port!`)
|
||||
fireUpdateRequest();
|
||||
}else
|
||||
errorNotify("An error occurred while changing the internal service port",`Error: ${res}`)
|
||||
}).catch(err => {
|
||||
errorNotify("An error occurred while changing the internal service port",`Error: ${err}`)
|
||||
})
|
||||
}
|
||||
|
||||
return <>
|
||||
<Grid className={style.row} justify="flex-end" style={{width:"100%"}}>
|
||||
<Grid.Col md={4} xs={12}>
|
||||
<MediaQuery smallerThan="md" styles={{ display: 'none' }}><div>
|
||||
<div className="center-flex-row">
|
||||
<div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient">:{service.public_port}</Badge></div>
|
||||
<Badge color={status_color} size="xl" radius="md">{service.internal_port} {"->"} {service.public_port}</Badge>
|
||||
<div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient">:{service.port}</Badge></div>
|
||||
</div>
|
||||
</div></MediaQuery>
|
||||
<MediaQuery largerThan="md" styles={{ display: 'none' }}><div>
|
||||
<div className="center-flex">
|
||||
<div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient">:{service.public_port}</Badge></div>
|
||||
<div className="center-flex"><Title className={style.name}>{service.name}</Title> <Badge size="xl" gradient={{ from: 'indigo', to: 'cyan' }} variant="gradient">:{service.port}</Badge></div>
|
||||
<Space w="xl" />
|
||||
<Badge color={status_color} size="xl" radius="md">{service.internal_port} {"->"} {service.public_port}</Badge>
|
||||
</div>
|
||||
</div></MediaQuery>
|
||||
|
||||
@@ -146,35 +110,20 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
|
||||
<Menu.Label><b>Rename service</b></Menu.Label>
|
||||
<Menu.Item icon={<BiRename size={18} />} onClick={()=>{}}>Change service name</Menu.Item>
|
||||
<Divider />
|
||||
<Menu.Label><b>Change ports</b></Menu.Label>
|
||||
<Menu.Item icon={<TbNumbers size={18} />} onClick={()=>setChoosePortModal(true)}>Change port</Menu.Item>
|
||||
<Menu.Item icon={<BsArrowRepeat size={18} />} onClick={()=>setChangePortModal(true)}>Regen proxy port</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>
|
||||
</Menu>
|
||||
<Space w="md"/>
|
||||
{["pause","wait"].includes(service.status)?
|
||||
|
||||
<Tooltip label="Stop service" zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="orange" opened={tooltipStopOpened} tooltipId="tooltip-stop-id">
|
||||
<ActionIcon color="yellow" loading={buttonLoading}
|
||||
onClick={()=>setStopModal(true)} size="xl" radius="md" variant="filled"
|
||||
disabled={service.status === "stop"}
|
||||
aria-describedby="tooltip-stop-id"
|
||||
onFocus={() => setTooltipStopOpened(false)} onBlur={() => setTooltipStopOpened(false)}
|
||||
onMouseEnter={() => setTooltipStopOpened(true)} onMouseLeave={() => setTooltipStopOpened(false)}>
|
||||
<FaStop size="20px" />
|
||||
</ActionIcon>
|
||||
</Tooltip>:
|
||||
<Tooltip label={service.status === "stop"?"Start in pause mode":"Pause service"} zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color={service.status === "stop"?"cyan":"red"}>
|
||||
<ActionIcon color={service.status === "stop"?"cyan":"red"} loading={buttonLoading}
|
||||
onClick={pauseService} size="xl" radius="md" variant="filled"
|
||||
/*disabled={service.status === "stop"}*/>
|
||||
<FaPause size="20px" />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
}
|
||||
|
||||
<Space w="md"/>
|
||||
<Tooltip label="Stop service" zIndex={0} transition="pop" transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="red" opened={tooltipStopOpened} tooltipId="tooltip-stop-id">
|
||||
<ActionIcon color="red" loading={buttonLoading}
|
||||
onClick={()=>setStopModal(true)} size="xl" radius="md" variant="filled"
|
||||
disabled={service.status === "stop"}
|
||||
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" transition="pop" zIndex={0} transitionDuration={200} /*openDelay={500}*/ transitionTimingFunction="ease" color="teal">
|
||||
<ActionIcon color="teal" size="xl" radius="md" onClick={startService} loading={buttonLoading}
|
||||
@@ -196,7 +145,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
|
||||
</Grid>
|
||||
<YesNoModal
|
||||
title='Are you sure to stop this service?'
|
||||
description={`You are going to delete the service '${service.id}', causing the firewall to stop. This will cause the shutdown of your service! ⚠️`}
|
||||
description={`You are going to delete the service '${service.port}', causing the firewall to stop. This will cause the shutdown of your service! ⚠️`}
|
||||
onClose={()=>{setStopModal(false);}}
|
||||
action={stopService}
|
||||
opened={stopModal}
|
||||
@@ -204,19 +153,11 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
|
||||
<hr style={{width:"100%"}}/>
|
||||
<YesNoModal
|
||||
title='Are you sure to delete this service?'
|
||||
description={`You are going to delete the service '${service.id}', causing the stopping of the firewall and deleting all the regex associated. This will cause the shutdown of your service! ⚠️`}
|
||||
description={`You are going to delete the service '${service.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}
|
||||
/>
|
||||
<YesNoModal
|
||||
title='Are you sure to change the proxy internal port?'
|
||||
description={`You are going to change the proxy port '${service.internal_port}'. This will cause the shutdown of your service temporarily! ⚠️`}
|
||||
onClose={()=>setChangePortModal(false)}
|
||||
action={changePort}
|
||||
opened={changePortModal}
|
||||
/>
|
||||
<ChangePortModal service={service} onClose={()=> setChoosePortModal(false)} opened={choosePortModal} />
|
||||
</>
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user