tudor.stanciu
/
reverse-proxy-frontend
mirror of https://dev.azure.com/tstanciu94/ReverseProxy/_git/ReverseProxy_Frontend
1
0
Fork 0
Code Issues 3 Packages Projects Releases Wiki Activity

popup for forward options

master
Tudor Stanciu 2020-05-14 13:45:35 +03:00
parent 45821ea6ee
commit b3e108e7a3
11 changed files with 264 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/locales/en/translations.json
View File

@ -17,6 +17,9 @@
"Sessions": "Sessions",
"About": "About"
},
"General": {
"Close": "Close"
},
"Session": {
"Title": "Sessions",
"Session": "Session",
@ -27,10 +30,18 @@
"Host": "Host",
"LogRows": "Log rows",
"LogSize": "Log size",
"Details": {
"Forwards": {
"From": "From",
"To": "To",
"Options": "Options"
"Options": {
"Title": "Options",
"Name": "Name",
"Active": "Active",
"TrailingSlash": "Trailing slash",
"TrailingSlashTooltip": "A trailing slash is the forward slash placed at the end of a URL. The trailing slash is generally used to mark a directory, and if a URL is not terminated using a trailing slash, this generally points to a file.",
"PathOverwrite": "Path overwrite",
"PathOverwriteTooltip": "Option by which the base path of the application is automatically overwritten in all http text responses received from it."
}
}
}
}

15
public/locales/ro/translations.json
View File

@ -8,6 +8,9 @@
"Sessions": "Sesiuni",
"About": "Despre"
},
"General": {
"Close": "Închide"
},
"Session": {
"Title": "Sesiuni",
"Session": "Sesiune",
@ -18,10 +21,18 @@
"Host": "Gazdă",
"LogRows": "Linii log",
"LogSize": "Dimensiune log",
"Details": {
"Forwards": {
"From": "De la",
"To": "Către",
"Options": "Opțiuni"
"Options": {
"Title": "Opțiuni",
"Name": "Denumire",
"Active": "Activă",
"TrailingSlash": "Trailing slash",
"TrailingSlashTooltip": "Bara oblică plasată la sfarșitul unei adrese URL. Slash-ul final este de obicei utilizat pentru a marca un director și dacă o adresă URL nu este încheiată folosind o bară oblică, aceasta indică în general un fișier.",
"PathOverwrite": "Path overwrite",
"PathOverwriteTooltip": "Opțiune prin care calea de bază a aplicației este suprascrisă automat în toate răspunsurile de text http primite de la aceasta."
}
}
}
}

17
src/components/common/ActiveIcon.js Normal file
View File

@ -0,0 +1,17 @@
import React from "react";
import PropTypes from "prop-types";
import { CheckCircleOutlineRounded, RemoveRounded } from "@material-ui/icons";
const ActiveIcon = ({ active }) => {
return active && active === true ? (
<CheckCircleOutlineRounded color="primary" />
) : (
<RemoveRounded />
);
};
ActiveIcon.propTypes = {
active: PropTypes.bool
};
export default ActiveIcon;

21
src/components/common/MaterialTable.js Normal file
View File

@ -0,0 +1,21 @@
import TableCell from "@material-ui/core/TableCell";
import TableRow from "@material-ui/core/TableRow";
import { withStyles } from "@material-ui/core/styles";
export const StyledTableCell = withStyles((theme) => ({
head: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.common.white
},
body: {
fontSize: 14
}
}))(TableCell);
export const StyledTableRow = withStyles((theme) => ({
root: {
"&:nth-of-type(odd)": {
backgroundColor: theme.palette.action.hover
}
}
}))(TableRow);

83
src/features/session/components/ForwardOptionsComponent.js Normal file
View File

@ -0,0 +1,83 @@
import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import Tooltip from "@material-ui/core/Tooltip";
import { useTranslation } from "react-i18next";
import styles from "../styles/tableStyles";
import {
StyledTableCell,
StyledTableRow
} from "../../../components/common/MaterialTable";
import ActiveIcon from "../../../components/common/ActiveIcon";
import Typography from "@material-ui/core/Typography";
const useStyles = makeStyles(styles);
const ForwardOptionsComponent = ({ options }) => {
const classes = useStyles();
const { t } = useTranslation();
return (
<>
<TableContainer component={Paper}>
<Table
className={classes.narrowTable}
size="small"
aria-label="customized table"
>
<TableHead>
<TableRow>
<StyledTableCell>
{t("Session.Forwards.Options.Name")}
</StyledTableCell>
<StyledTableCell align="center">
{t("Session.Forwards.Options.Active")}
</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
<StyledTableRow>
<Tooltip
title={t("Session.Forwards.Options.TrailingSlashTooltip")}
>
<StyledTableCell>
{t("Session.Forwards.Options.TrailingSlash")}
</StyledTableCell>
</Tooltip>
<StyledTableCell align="center">
<ActiveIcon active={options.trailingSlash} />
</StyledTableCell>
</StyledTableRow>
<StyledTableRow>
<Tooltip
title={t("Session.Forwards.Options.PathOverwriteTooltip")}
>
<StyledTableCell>
{t("Session.Forwards.Options.PathOverwrite")}
</StyledTableCell>
</Tooltip>
<StyledTableCell align="center">
<ActiveIcon active={options.pathOverwrite} />
</StyledTableCell>
</StyledTableRow>
</TableBody>
</Table>
</TableContainer>
<Typography variant="caption" display="block" gutterBottom>
{options.title}
</Typography>
</>
);
};
ForwardOptionsComponent.propTypes = {
options: PropTypes.object.isRequired
};
export default ForwardOptionsComponent;

44
src/features/session/components/ForwardOptionsDialog.js Normal file
View File

@ -0,0 +1,44 @@
import React from "react";
import PropTypes from "prop-types";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import { useTranslation } from "react-i18next";
import ForwardOptionsComponent from "./ForwardOptionsComponent";
const ForwardOptionsDialog = ({ open, handleClose, options }) => {
const { t } = useTranslation();
return (
<div>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="options-dialog-title"
aria-describedby="optopns-dialog-content"
>
<DialogTitle id="options-dialog-title">
{t("Session.Forwards.Options.Title")}
</DialogTitle>
<DialogContent id="optopns-dialog-content">
{options ? <ForwardOptionsComponent options={options} /> : ""}
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
{t("General.Close")}
</Button>
</DialogActions>
</Dialog>
</div>
);
};
ForwardOptionsDialog.propTypes = {
open: PropTypes.bool.isRequired,
handleClose: PropTypes.func.isRequired,
options: PropTypes.object
};
export default ForwardOptionsDialog;

34
src/features/session/components/SessionContainer.js
View File

@ -1,11 +1,15 @@
import React, { useEffect } from "react";
import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import PropTypes from "prop-types";
import SessionListComponent from "./SessionListComponent";
import ForwardOptionsDialog from "./ForwardOptionsDialog";
import { loadServerSessions, loadSessionForwards } from "../actionCreators";
const SessionContainer = ({ actions, sessions, forwards }) => {
const [optionsDialogOpen, setOptionsDialogOpen] = useState(false);
const [forwardOptions, setForwardOptions] = useState(null);
useEffect(() => {
actions.loadServerSessions();
}, []);
@ -14,12 +18,30 @@ const SessionContainer = ({ actions, sessions, forwards }) => {
if (expanded) actions.loadSessionForwards(sessionId);
};
const handleOptionsDialogOpen = (options) => () => {
setForwardOptions(options);
setOptionsDialogOpen(true);
};
const handleOptionsDialogClose = () => {
setOptionsDialogOpen(false);
setForwardOptions(null);
};
return (
<SessionListComponent
sessions={sessions}
handleToggle={handleToggle}
forwards={forwards}
/>
<>
<SessionListComponent
sessions={sessions}
handleToggle={handleToggle}
forwards={forwards}
openOptionsDialog={handleOptionsDialogOpen}
/>
<ForwardOptionsDialog
open={optionsDialogOpen}
handleClose={handleOptionsDialogClose}
options={forwardOptions}
/>
</>
);
};

56
src/features/session/components/SessionForwardsComponent.js
View File

@ -1,9 +1,8 @@
import React from "react";
import PropTypes from "prop-types";
import { withStyles, makeStyles } from "@material-ui/core/styles";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
@ -15,32 +14,15 @@ import Tooltip from "@material-ui/core/Tooltip";
import SessionForwardsHeaderComponent from "./SessionForwardsHeaderComponent";
import { Grid } from "@material-ui/core";
import { useTranslation } from "react-i18next";
import styles from "../styles/tableStyles";
import {
StyledTableCell,
StyledTableRow
} from "../../../components/common/MaterialTable";
const StyledTableCell = withStyles((theme) => ({
head: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.common.white
},
body: {
fontSize: 14
}
}))(TableCell);
const useStyles = makeStyles(styles);
const StyledTableRow = withStyles((theme) => ({
root: {
"&:nth-of-type(odd)": {
backgroundColor: theme.palette.action.hover
}
}
}))(TableRow);
const useStyles = makeStyles({
table: {
minWidth: 700
}
});
const SessionForwardsComponent = ({ session, forwards }) => {
const SessionForwardsComponent = ({ session, forwards, openOptionsDialog }) => {
const classes = useStyles();
const { t } = useTranslation();
@ -61,11 +43,13 @@ const SessionForwardsComponent = ({ session, forwards }) => {
<TableRow>
<StyledTableCell />
<StyledTableCell>
{t("Session.Details.From")}
{t("Session.Forwards.From")}
</StyledTableCell>
<StyledTableCell>
{t("Session.Forwards.To")}
</StyledTableCell>
<StyledTableCell>{t("Session.Details.To")}</StyledTableCell>
<StyledTableCell align="right">
{t("Session.Details.Options")}
{t("Session.Forwards.Options.Title")}
</StyledTableCell>
</TableRow>
</TableHead>
@ -79,8 +63,15 @@ const SessionForwardsComponent = ({ session, forwards }) => {
<StyledTableCell>{row.to}</StyledTableCell>
<StyledTableCell align="right">
{row.options ? (
<Tooltip title={t("Session.Details.Options")}>
<IconButton aria-label="options" size="small">
<Tooltip title={t("Session.Forwards.Options.Title")}>
<IconButton
aria-label="options"
size="small"
onClick={openOptionsDialog({
...row.options,
title: `${row.from} >>> ${row.to}`
})}
>
<DonutLargeRoundedIcon color="primary" />
</IconButton>
</Tooltip>
@ -108,7 +99,8 @@ const SessionForwardsComponent = ({ session, forwards }) => {
SessionForwardsComponent.propTypes = {
session: PropTypes.object.isRequired,
forwards: PropTypes.array
forwards: PropTypes.array,
openOptionsDialog: PropTypes.func.isRequired
};
export default SessionForwardsComponent;

11
src/features/session/components/SessionListComponent.js
View File

@ -20,7 +20,12 @@ const useStyles = makeStyles((theme) => ({
}
}));
const SessionListComponent = ({ sessions, handleToggle, forwards }) => {
const SessionListComponent = ({
sessions,
handleToggle,
forwards,
openOptionsDialog
}) => {
const classes = useStyles();
const { t } = useTranslation();
@ -48,6 +53,7 @@ const SessionListComponent = ({ sessions, handleToggle, forwards }) => {
<SessionForwardsComponent
session={session}
forwards={forwards[session.sessionId]}
openOptionsDialog={openOptionsDialog}
/>
</ExpansionPanelDetails>
</ExpansionPanel>
@ -61,7 +67,8 @@ const SessionListComponent = ({ sessions, handleToggle, forwards }) => {
SessionListComponent.propTypes = {
sessions: PropTypes.array.isRequired,
handleToggle: PropTypes.func.isRequired,
forwards: PropTypes.object.isRequired
forwards: PropTypes.object.isRequired,
openOptionsDialog: PropTypes.func.isRequired
};
export default SessionListComponent;

8
src/features/session/components/SessionSummary.js
View File

@ -2,7 +2,7 @@ import React from "react";
import PropTypes from "prop-types";
import { Grid } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import { CheckCircleOutlineRounded, RemoveRounded } from "@material-ui/icons";
import ActiveIcon from "../../../components/common/ActiveIcon";
import { useTranslation } from "react-i18next";
import styles from "../styles/gridStyles";
@ -21,11 +21,7 @@ const SessionSummary = ({ session }) => {
</Grid>
<Grid item xs={12} sm={3} md={3}>
{`${t("Session.Active")}: `}
{session.active ? (
<CheckCircleOutlineRounded color="primary" />
) : (
<RemoveRounded />
)}
<ActiveIcon active={session.active} />
</Grid>
<Grid item xs={12} sm={4} md={4}>
{`${t("Session.StartDate")}: `}

10
src/features/session/styles/tableStyles.js Normal file
View File

@ -0,0 +1,10 @@
const styles = () => ({
table: {
minWidth: 700
},
narrowTable: {
minWidth: 400
}
});
export default styles;