141 lines
4.3 KiB
JavaScript
141 lines
4.3 KiB
JavaScript
import { CheckOutlined, ClockCircleOutlined, DashboardOutlined, DeleteOutlined, DownOutlined, LockOutlined, SafetyOutlined, UpOutlined } from "@ant-design/icons";
|
|
import { Card, Chip, Stack, Tooltip } from "@mui/material";
|
|
import { useState } from "react";
|
|
import { useTheme } from '@mui/material/styles';
|
|
|
|
let routeImages = {
|
|
"SERVAPP": {
|
|
label: "ServApp",
|
|
icon: "🐳",
|
|
backgroundColor: "#0db7ed",
|
|
color: "white",
|
|
colorDark: "black",
|
|
},
|
|
"STATIC": {
|
|
label: "Static",
|
|
icon: "📁",
|
|
backgroundColor: "#f9d71c",
|
|
color: "black",
|
|
colorDark: "black",
|
|
},
|
|
"REDIRECT": {
|
|
label: "Redir",
|
|
icon: "🔀",
|
|
backgroundColor: "#2c3e50",
|
|
color: "white",
|
|
colorDark: "white",
|
|
},
|
|
"PROXY": {
|
|
label: "Proxy",
|
|
icon: "🔗",
|
|
backgroundColor: "#2ecc71",
|
|
color: "white",
|
|
colorDark: "black",
|
|
},
|
|
"SPA": {
|
|
label: "SPA",
|
|
icon: "🌐",
|
|
backgroundColor: "#e74c3c",
|
|
color: "white",
|
|
colorDark: "black",
|
|
},
|
|
}
|
|
|
|
export const RouteMode = ({route}) => {
|
|
const theme = useTheme();
|
|
const isDark = theme.palette.mode === 'dark';
|
|
let c = routeImages[route.Mode.toUpperCase()];
|
|
return c ? <>
|
|
<Chip
|
|
icon={<span>{c.icon}</span>}
|
|
label={c.label}
|
|
sx={{
|
|
backgroundColor: c.backgroundColor,
|
|
color: isDark ? c.colorDark : c.color,
|
|
paddingLeft: "5px",
|
|
alignItems: "right",
|
|
}}
|
|
></Chip>
|
|
</> : <></>;
|
|
}
|
|
|
|
export const RouteSecurity = ({route}) => {
|
|
return <div style={{fontWeight: 'bold', fontSize: '110%'}}>
|
|
<Tooltip title={route.SmartShield && route.SmartShield.Enabled ? "Smart Shield is enabled" : "Smart Shield is disabled"}>
|
|
<div style={{display: 'inline-block'}}>
|
|
{route.SmartShield && route.SmartShield.Enabled ?
|
|
<SafetyOutlined style={{color: 'green'}} /> :
|
|
<SafetyOutlined style={{color: 'red'}} />
|
|
}
|
|
</div>
|
|
</Tooltip>
|
|
|
|
<Tooltip title={route.AuthEnabled ? "Authentication is enabled" : "Authentication is disabled"}>
|
|
<div style={{display: 'inline-block'}}>
|
|
{route.AuthEnabled ?
|
|
<LockOutlined style={{color: 'green'}} /> :
|
|
<LockOutlined style={{color: 'red'}} />
|
|
}
|
|
</div>
|
|
</Tooltip>
|
|
|
|
<Tooltip title={route.ThrottlePerMinute ? "Throttling is enabled" : "Throttling is disabled"}>
|
|
<div style={{display: 'inline-block'}}>
|
|
{route.ThrottlePerMinute ?
|
|
<DashboardOutlined style={{color: 'green'}} /> :
|
|
<DashboardOutlined style={{color: 'red'}} />
|
|
}
|
|
</div>
|
|
</Tooltip>
|
|
|
|
<Tooltip title={route.Timeout ? "Timeout is enabled" : "Timeout is disabled"}>
|
|
<div style={{display: 'inline-block'}}>
|
|
{route.Timeout ?
|
|
<ClockCircleOutlined style={{color: 'green'}} /> :
|
|
<ClockCircleOutlined style={{color: 'red'}} />
|
|
}
|
|
</div>
|
|
</Tooltip>
|
|
</div>
|
|
}
|
|
|
|
|
|
export const RouteActions = ({route, routeKey, up, down, deleteRoute}) => {
|
|
const [confirmDelete, setConfirmDelete] = useState(false);
|
|
const theme = useTheme();
|
|
const isDark = theme.palette.mode === 'dark';
|
|
|
|
const miniChip = {
|
|
width: '30px',
|
|
height: '20px',
|
|
display: 'inline-block',
|
|
textAlign: 'center',
|
|
cursor: 'pointer',
|
|
color: theme.palette.text.secondary,
|
|
fontSize: '12px',
|
|
lineHeight: '20px',
|
|
padding: '0px',
|
|
borderRadius: '0px',
|
|
background: isDark ? 'rgba(255, 255, 255, 0.03)' : '',
|
|
fontWeight: 'bold',
|
|
|
|
'&:hover': {
|
|
backgroundColor: 'rgba(0, 0, 0, 0.04)',
|
|
}
|
|
}
|
|
|
|
return <>
|
|
<Stack direction={'row'} spacing={2} alignItems={'center'} justifyContent={'right'}>
|
|
{!confirmDelete && (<Chip label={<DeleteOutlined />} onClick={() => setConfirmDelete(true)}/>)}
|
|
{confirmDelete && (<Chip label={<CheckOutlined />} color="error" onClick={(event) => deleteRoute(event)}/>)}
|
|
|
|
<Tooltip title='Routes with the lowest priority are matched first'>
|
|
<Stack direction={'column'} spacing={0}>
|
|
<Card sx={{...miniChip, borderBottom: 'none'}} onClick={(event) => up(event)}><UpOutlined /></Card>
|
|
<Card sx={{...miniChip, cursor: 'auto'}}>{routeKey}</Card>
|
|
<Card sx={{...miniChip, borderTop: 'none'}} onClick={(event) => down(event)}><DownOutlined /></Card>
|
|
</Stack>
|
|
</Tooltip>
|
|
</Stack>
|
|
</>;
|
|
} |