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

ForwardOptionsContainer

master
Tudor Stanciu 2021-05-13 01:30:34 +03:00
parent b9336e1cc6
commit 7b7578173f
13 changed files with 144 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/common/ActiveIcon.js
View File

@ -1,8 +1,13 @@
import React from "react";
import PropTypes from "prop-types";
import { CheckCircleOutlineRounded, RemoveRounded } from "@material-ui/icons";
import { LinearProgress } from "@material-ui/core";
const ActiveIcon = ({ active, loading }) => {
if (loading && loading === true) {
return <LinearProgress />;
}
const ActiveIcon = ({ active }) => {
return active && active === true ? (
<CheckCircleOutlineRounded color="primary" />
) : (
@ -11,7 +16,8 @@ const ActiveIcon = ({ active }) => {
};
ActiveIcon.propTypes = {
active: PropTypes.bool
active: PropTypes.bool,
loading: PropTypes.bool
};
export default ActiveIcon;

16
src/features/server/components/ActiveSessionContainer.js
View File

@ -11,7 +11,7 @@ import ForwardOptionsDialog from "../../session/components/ForwardOptionsDialog"
const ActiveSessionContainer = ({ actions, session, forwards, domain }) => {
const [expanded, setExpanded] = useState(false);
const [optionsDialogOpen, setOptionsDialogOpen] = useState(false);
const [forwardOptions, setForwardOptions] = useState(null);
const [focusedForward, setFocusedForward] = useState(null);
useEffect(() => {
actions.loadActiveSession();
@ -23,18 +23,20 @@ const ActiveSessionContainer = ({ actions, session, forwards, domain }) => {
if (expand) actions.loadSessionForwards(session.sessionId);
};
const handleOptionsDialogOpen = (options) => () => {
setForwardOptions(options);
const handleOptionsDialogOpen = forward => () => {
setFocusedForward(forward);
setOptionsDialogOpen(true);
};
const handleOptionsDialogClose = () => {
setOptionsDialogOpen(false);
setForwardOptions(null);
setFocusedForward(null);
};
const handleForwardClick = (forward) => (event) => {
const url = `${domain.scheme}://${domain.name}${forward.from}${forward.suffix || ""}`;
const handleForwardClick = forward => event => {
const url = `${domain.scheme}://${domain.name}${
forward.from
}${forward.suffix || ""}`;
window.open(url, "_blank");
event.preventDefault();
};
@ -52,7 +54,7 @@ const ActiveSessionContainer = ({ actions, session, forwards, domain }) => {
<ForwardOptionsDialog
open={optionsDialogOpen}
handleClose={handleOptionsDialogClose}
options={forwardOptions}
forward={focusedForward}
/>
</>
);

25
src/features/session/actionCreators.js
View File

@ -3,7 +3,7 @@ import api from "./api";
import { sendHttpRequest } from "../../redux/actions/httpActions";
export function loadServerSessions() {
return async function (dispatch) {
return async function(dispatch) {
try {
dispatch({ type: types.LOAD_SERVER_SESSIONS_STARTED });
const data = await dispatch(sendHttpRequest(api.getServerSessions()));
@ -15,7 +15,7 @@ export function loadServerSessions() {
}
export function loadSessionForwards(sessionId) {
return async function (dispatch, getState) {
return async function(dispatch, getState) {
try {
const forwards = getState().forwards[sessionId];
if (forwards && (forwards.loading || forwards.loaded)) return;
@ -34,3 +34,24 @@ export function loadSessionForwards(sessionId) {
}
};
}
export function loadForwardOptions(optionId) {
return async function(dispatch, getState) {
try {
const options = getState().options[optionId];
if (options && (options.loading || options.loaded)) return;
dispatch({ type: types.LOAD_FORWARD_OPTIONS_STARTED, id: optionId });
const data = await dispatch(
sendHttpRequest(api.getForwardOptions(optionId))
);
dispatch({
type: types.LOAD_FORWARD_OPTIONS_SUCCESS,
payload: data,
id: optionId
});
} catch (error) {
throw error;
}
};
}

3
src/features/session/actionTypes.js
View File

@ -3,3 +3,6 @@ export const LOAD_SERVER_SESSIONS_SUCCESS = "LOAD_SERVER_SESSIONS_SUCCESS";
export const LOAD_SESSION_FORWARDS_STARTED = "LOAD_SESSION_FORWARDS_STARTED";
export const LOAD_SESSION_FORWARDS_SUCCESS = "LOAD_SESSION_FORWARDS_SUCCESS";
export const LOAD_FORWARD_OPTIONS_STARTED = "LOAD_FORWARD_OPTIONS_STARTED";
export const LOAD_FORWARD_OPTIONS_SUCCESS = "LOAD_FORWARD_OPTIONS_SUCCESS";

8
src/features/session/api.js
View File

@ -2,10 +2,14 @@ import { get } from "../../api/axiosApi";
const baseUrl = `${process.env.REVERSE_PROXY_API_URL}/server`;
const getServerSessions = () => get(`${baseUrl}/sessions`);
const getSessionForwards = (sessionId) =>
const getSessionForwards = sessionId =>
get(`${baseUrl}/session-forwards/${sessionId}`);
const getForwardOptions = optionId =>
get(`${baseUrl}/forward-options/${optionId}`);
export default {
getServerSessions,
getSessionForwards
getSessionForwards,
getForwardOptions
};

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

@ -21,10 +21,12 @@ import Typography from "@material-ui/core/Typography";
const useStyles = makeStyles(styles);
const ForwardOptionsComponent = ({ options }) => {
const ForwardOptionsComponent = ({ title, options }) => {
const classes = useStyles();
const { t } = useTranslation();
const loading = !options || options.loading;
return (
<>
<TableContainer component={Paper}>
@ -53,7 +55,7 @@ const ForwardOptionsComponent = ({ options }) => {
</StyledTableCell>
</Tooltip>
<StyledTableCell align="center">
<ActiveIcon active={options.trailingSlash} />
<ActiveIcon active={options.trailingSlash} loading={loading} />
</StyledTableCell>
</StyledTableRow>
<StyledTableRow>
@ -65,20 +67,21 @@ const ForwardOptionsComponent = ({ options }) => {
</StyledTableCell>
</Tooltip>
<StyledTableCell align="center">
<ActiveIcon active={options.pathOverwrite} />
<ActiveIcon active={options.pathOverwrite} loading={loading} />
</StyledTableCell>
</StyledTableRow>
</TableBody>
</Table>
</TableContainer>
<Typography variant="caption" display="block" gutterBottom>
{options.title}
{title}
</Typography>
</>
);
};
ForwardOptionsComponent.propTypes = {
title: PropTypes.string.isRequired,
options: PropTypes.object.isRequired
};

48
src/features/session/components/ForwardOptionsContainer.js Normal file
View File

@ -0,0 +1,48 @@
import React, { useEffect } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import PropTypes from "prop-types";
import { loadForwardOptions } from "../actionCreators";
import ForwardOptionsComponent from "./ForwardOptionsComponent";
const ForwardOptionsContainer = ({ actions, forward, options }) => {
useEffect(() => {
actions.loadForwardOptions(forward.optionId);
}, []);
const forwardOptions = options[forward.optionId];
return (
<>
{forwardOptions && (
<ForwardOptionsComponent
title={`${forward.from} >>> ${forward.to}`}
options={forwardOptions}
/>
)}
</>
);
};
ForwardOptionsContainer.propTypes = {
actions: PropTypes.object.isRequired,
forward: PropTypes.object.isRequired,
options: PropTypes.object.isRequired
};
function mapStateToProps(state) {
return {
options: state.options
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators({ loadForwardOptions }, dispatch)
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(ForwardOptionsContainer);

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

@ -8,9 +8,9 @@ import {
DialogTitle
} from "@material-ui/core";
import { useTranslation } from "react-i18next";
import ForwardOptionsComponent from "./ForwardOptionsComponent";
import ForwardOptionsContainer from "./ForwardOptionsContainer";
const ForwardOptionsDialog = ({ open, handleClose, options }) => {
const ForwardOptionsDialog = ({ open, handleClose, forward }) => {
const { t } = useTranslation();
return (
@ -25,7 +25,7 @@ const ForwardOptionsDialog = ({ open, handleClose, options }) => {
{t("Session.Forwards.Options.Title")}
</DialogTitle>
<DialogContent id="optopns-dialog-content">
{options ? <ForwardOptionsComponent options={options} /> : ""}
{forward ? <ForwardOptionsContainer forward={forward} /> : "N/A"}
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
@ -40,7 +40,7 @@ const ForwardOptionsDialog = ({ open, handleClose, options }) => {
ForwardOptionsDialog.propTypes = {
open: PropTypes.bool.isRequired,
handleClose: PropTypes.func.isRequired,
options: PropTypes.object
forward: PropTypes.object
};
export default ForwardOptionsDialog;

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

@ -8,24 +8,24 @@ import { loadServerSessions, loadSessionForwards } from "../actionCreators";
const SessionContainer = ({ actions, sessions, forwards }) => {
const [optionsDialogOpen, setOptionsDialogOpen] = useState(false);
const [forwardOptions, setForwardOptions] = useState(null);
const [focusedForward, setFocusedForward] = useState(null);
useEffect(() => {
actions.loadServerSessions();
}, []);
const handleToggle = (sessionId) => (_, expanded) => {
const handleToggle = sessionId => (_, expanded) => {
if (expanded) actions.loadSessionForwards(sessionId);
};
const handleOptionsDialogOpen = (options) => () => {
setForwardOptions(options);
const handleOptionsDialogOpen = forward => () => {
setFocusedForward(forward);
setOptionsDialogOpen(true);
};
const handleOptionsDialogClose = () => {
setOptionsDialogOpen(false);
setForwardOptions(null);
setFocusedForward(null);
};
return (
@ -39,7 +39,7 @@ const SessionContainer = ({ actions, sessions, forwards }) => {
<ForwardOptionsDialog
open={optionsDialogOpen}
handleClose={handleOptionsDialogClose}
options={forwardOptions}
forward={focusedForward}
/>
</>
);

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

@ -67,7 +67,7 @@ const SessionForwardsComponent = ({
</TableRow>
</TableHead>
<TableBody>
{forwards.map((row) => (
{forwards.map(row => (
<StyledTableRow key={row.forwardId}>
<StyledTableCell component="th" scope="row">
{forwards.indexOf(row) + 1}
@ -83,15 +83,12 @@ const SessionForwardsComponent = ({
</StyledTableCell>
<StyledTableCell>{row.to}</StyledTableCell>
<StyledTableCell align="right">
{row.options ? (
{row.optionId ? (
<Tooltip title={t("Session.Forwards.Options.Title")}>
<IconButton
aria-label="options"
size="small"
onClick={openOptionsDialog({
...row.options,
title: `${row.from} >>> ${row.to}`
})}
onClick={openOptionsDialog(row)}
>
<DonutLargeRoundedIcon color="primary" />
</IconButton>

23
src/features/session/reducers.js
View File

@ -35,3 +35,26 @@ export function forwardsReducer(state = initialState.forwards, action) {
return state;
}
}
export function optionsReducer(state = initialState.options, action) {
switch (action.type) {
case types.LOAD_FORWARD_OPTIONS_STARTED:
return {
...state,
[action.id]: { loading: true, loaded: false }
};
case types.LOAD_FORWARD_OPTIONS_SUCCESS:
return {
...state,
[action.id]: {
...action.payload,
loading: false,
loaded: true
}
};
default:
return state;
}
}

4
src/redux/reducers/index.js
View File

@ -3,7 +3,8 @@ import ajaxStatusReducer from "./ajaxStatusReducer";
import serverReducer from "../../features/server/reducer";
import {
sessionsReducer,
forwardsReducer
forwardsReducer,
optionsReducer
} from "../../features/session/reducers";
import releaseNotesReducer from "../../features/releaseNotes/reducer";
import frontendSessionReducer from "../../features/frontendSession/reducer";
@ -16,6 +17,7 @@ const rootReducer = combineReducers({
server: serverReducer,
sessions: sessionsReducer,
forwards: forwardsReducer,
options: optionsReducer,
releaseNotes: releaseNotesReducer,
charts: chartsReducer,
snackbar: snackbarReducer,

1
src/redux/reducers/initialState.js
View File

@ -6,6 +6,7 @@ export default {
},
sessions: Object.assign([], { loading: false, loaded: false }),
forwards: {},
options: {},
releaseNotes: Object.assign([], { loading: false, loaded: false }),
charts: {
server: {