0xb00b5/firegex-traffic-viewer
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change port front and backend finished

Browse Source
This commit is contained in:
DomySh
2022-06-30 19:21:14 +02:00
parent 1904f3ef2f
commit 8d41b94c36
3 changed files with 51 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/src/components/ServiceRow/ChangeInternalPort.tsx → frontend/src/components/ServiceRow/ChangePortModal.tsx
View File

@@ -1,21 +1,33 @@
import { Button, Group, NumberInput, Space, Notification, Modal } from '@mantine/core';
import { Button, Group, NumberInput, Space, Notification, Modal, Center, Title } from '@mantine/core';
import { useForm } from '@mantine/hooks';
import React, { useState } from 'react';
import React, { useEffect, useState } from 'react';
import { changeports, fireUpdateRequest, okNotify } from '../../js/utils';
import { ImCross } from "react-icons/im"
import { Service } from '../../js/models';
import { BsArrowDownSquareFill } from 'react-icons/bs';
type InputForm = {
internalPort:number,
port:number
}
function ChangeInternalPort({ service, opened, onClose }:{ service:Service, opened:boolean, onClose:()=>void }) {
function ChangePortModal({ service, opened, onClose }:{ service:Service, opened:boolean, onClose:()=>void }) {
const form = useForm({
initialValues: { internalPort:service.internal_port },
validationRules:{ internalPort: (value) => value>0 && value<65536 && value != service.internal_port }
initialValues: {
internalPort: service.internal_port,
port: service.public_port
},
validationRules:{
internalPort: (value) => value>0 && value<65536,
port: (value) => value>0 && value<65536
}
})
useEffect(()=>{
form.setValues({internalPort: service.internal_port, port:service.public_port})
},[opened])
const close = () =>{
onClose()
form.reset()
@@ -44,19 +56,40 @@ function ChangeInternalPort({ service, opened, onClose }:{ service:Service, open
}
return <Modal size="xl" title="Change Internal Proxy Port" opened={opened} onClose={close} closeOnClickOutside={false} centered>
return <Modal size="xl" title="Change Ports" opened={opened} onClose={close} closeOnClickOutside={false} centered>
<form onSubmit={form.onSubmit(submitRequest)}>
<NumberInput
placeholder="8080"
placeholder="30001"
min={1}
max={65535}
label="Internal Proxy Port"
{...form.getInputProps('internalPort')}
/>
<Space h="xl" />
<Center><BsArrowDownSquareFill size={50}/></Center>
<NumberInput
placeholder="8080"
min={1}
max={65535}
label="Public Service Port"
{...form.getInputProps('port')}
/>
<Space h="xl" />
<Center><Title order={5}>The change of the ports will cause a temporarily shutdown of the service! ⚠️</Title></Center>
<Space h="md" />
<Group position="right" mt="md">
<Button loading={submitLoading} disabled={service.internal_port === form.values.internalPort} type="submit">Change Port</Button>
<Button loading={submitLoading} disabled={
service.internal_port === form.values.internalPort && service.public_port === form.values.port
} type="submit">Change Port</Button>
</Group>
<Space h="md" />
@@ -71,4 +104,4 @@ function ChangeInternalPort({ service, opened, onClose }:{ service:Service, open
}
export default ChangeInternalPort;
export default ChangePortModal;

17
frontend/src/components/ServiceRow/index.tsx
View File

@@ -9,7 +9,7 @@ import { deleteservice, errorNotify, fireUpdateRequest, okNotify, pauseservice,
import { BsArrowRepeat, BsTrashFill } from 'react-icons/bs';
import { TbNumbers } from 'react-icons/tb';
import { BiRename } from 'react-icons/bi'
import ChangeInternalPort from './ChangeInternalPort';
import ChangePortModal from './ChangePortModal';
//"status":"stop"/"wait"/"active"/"pause",
function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void }) {
@@ -27,7 +27,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
const [tooltipStopOpened, setTooltipStopOpened] = useState(false);
const [deleteModal, setDeleteModal] = useState(false)
const [changePortModal, setChangePortModal] = useState(false)
const [chooseInternalPortModal, setChooseInternalPortModal] = useState(false)
const [choosePortModal, setChoosePortModal] = useState(false)
const stopService = async () => {
setButtonLoading(true)
@@ -146,14 +146,11 @@ 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>Public proxy port</b></Menu.Label>
<Menu.Item icon={<TbNumbers size={18} />} onClick={()=>{}}>Change port</Menu.Item>
<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>Internal proxy port</b></Menu.Label>
<Menu.Item icon={<BsArrowRepeat size={18} />} onClick={()=>setChangePortModal(true)}>Regen port</Menu.Item>
<Menu.Item icon={<TbNumbers size={18} />} onClick={()=>setChooseInternalPortModal(true)}>Choose port</Menu.Item>
<Divider />
<Menu.Label><b>Delete service</b></Menu.Label>
<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"/>
@@ -219,7 +216,7 @@ function ServiceRow({ service, onClick }:{ service:Service, onClick?:()=>void })
action={changePort}
opened={changePortModal}
/>
<ChangeInternalPort service={service} onClose={()=> setChooseInternalPortModal(false)} opened={chooseInternalPortModal} />
<ChangePortModal service={service} onClose={()=> setChoosePortModal(false)} opened={choosePortModal} />
</>
}