diff --git a/src/components/common/ActiveIcon.js b/src/components/common/ActiveIcon.js
index 361d34a..3274290 100644
--- a/src/components/common/ActiveIcon.js
+++ b/src/components/common/ActiveIcon.js
@@ -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 ;
+ }
-const ActiveIcon = ({ active }) => {
return active && active === true ? (
) : (
@@ -11,7 +16,8 @@ const ActiveIcon = ({ active }) => {
};
ActiveIcon.propTypes = {
- active: PropTypes.bool
+ active: PropTypes.bool,
+ loading: PropTypes.bool
};
export default ActiveIcon;
diff --git a/src/features/server/components/ActiveSessionContainer.js b/src/features/server/components/ActiveSessionContainer.js
index 59277b9..1ace773 100644
--- a/src/features/server/components/ActiveSessionContainer.js
+++ b/src/features/server/components/ActiveSessionContainer.js
@@ -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 }) => {
>
);
diff --git a/src/features/session/actionCreators.js b/src/features/session/actionCreators.js
index d6a5aab..783a71d 100644
--- a/src/features/session/actionCreators.js
+++ b/src/features/session/actionCreators.js
@@ -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;
+ }
+ };
+}
diff --git a/src/features/session/actionTypes.js b/src/features/session/actionTypes.js
index ad67e26..023a04f 100644
--- a/src/features/session/actionTypes.js
+++ b/src/features/session/actionTypes.js
@@ -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";
diff --git a/src/features/session/api.js b/src/features/session/api.js
index 4f4dad9..de95b3f 100644
--- a/src/features/session/api.js
+++ b/src/features/session/api.js
@@ -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
};
diff --git a/src/features/session/components/ForwardOptionsComponent.js b/src/features/session/components/ForwardOptionsComponent.js
index 5f3818e..fd4f3ec 100644
--- a/src/features/session/components/ForwardOptionsComponent.js
+++ b/src/features/session/components/ForwardOptionsComponent.js
@@ -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 (
<>
@@ -53,7 +55,7 @@ const ForwardOptionsComponent = ({ options }) => {
-
+
@@ -65,20 +67,21 @@ const ForwardOptionsComponent = ({ options }) => {
-
+
- {options.title}
+ {title}
>
);
};
ForwardOptionsComponent.propTypes = {
+ title: PropTypes.string.isRequired,
options: PropTypes.object.isRequired
};
diff --git a/src/features/session/components/ForwardOptionsContainer.js b/src/features/session/components/ForwardOptionsContainer.js
new file mode 100644
index 0000000..385bdbc
--- /dev/null
+++ b/src/features/session/components/ForwardOptionsContainer.js
@@ -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 && (
+ >> ${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);
diff --git a/src/features/session/components/ForwardOptionsDialog.js b/src/features/session/components/ForwardOptionsDialog.js
index 2816c73..04e663a 100644
--- a/src/features/session/components/ForwardOptionsDialog.js
+++ b/src/features/session/components/ForwardOptionsDialog.js
@@ -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")}
- {options ? : ""}
+ {forward ? : "N/A"}