session details

public/locales/en/translations.json

@@ -24,6 +24,13 @@
     "StartDate": "Start date",
     "StopDate": "Stop date",
     "RunningTime": "Running time",
-    "Host": "Host"
+    "Host": "Host",
+    "LogRows": "Log rows",
+    "LogSize": "Log size",
+    "Details": {
+      "From": "From",
+      "To": "To",
+      "Options": "Option"
+    }
   }
 }

public/locales/ro/translations.json

@@ -15,6 +15,13 @@
     "StartDate": "Dată pornire",
     "StopDate": "Dată oprire",
     "RunningTime": "Timp de rulare",
-    "Host": "Gazdă"
+    "Host": "Gazdă",
+    "LogRows": "Linii log",
+    "LogSize": "Dimensiune log",
+    "Details": {
+      "From": "De la",
+      "To": "Către",
+      "Options": "Opțiuni"
+    }
   }
 }

src/features/session/components/SessionDetailsComponent.js

@@ -9,6 +9,12 @@ import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import Paper from "@material-ui/core/Paper";
 import Spinner from "../../../components/common/Spinner";
+import DonutLargeRoundedIcon from "@material-ui/icons/DonutLargeRounded";
+import IconButton from "@material-ui/core/IconButton";
+import Tooltip from "@material-ui/core/Tooltip";
+import SessionDetailsHeaderComponent from "./SessionDetailsHeaderComponent";
+import { Grid } from "@material-ui/core";
+import { useTranslation } from "react-i18next";
 
 const StyledTableCell = withStyles((theme) => ({
   head: {
@@ -34,42 +40,74 @@ const useStyles = makeStyles({
   }
 });
 
-const SessionDetailsComponent = ({ forwards }) => {
+const SessionDetailsComponent = ({ session, forwards }) => {
   const classes = useStyles();
+  const { t } = useTranslation();
 
-  return !forwards || forwards.loading ? (
-    <Spinner />
-  ) : (
-    forwards.loaded && (
-      <TableContainer component={Paper}>
-        <Table
-          className={classes.table}
-          size="small"
-          aria-label="customized table"
-        >
-          <TableHead>
-            <TableRow>
-              <StyledTableCell />
-              <StyledTableCell>From</StyledTableCell>
-              <StyledTableCell>To</StyledTableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {forwards.map((row) => (
-              <StyledTableRow key={row.forwardId}>
-                <StyledTableCell>{forwards.indexOf(row) + 1}</StyledTableCell>
-                <StyledTableCell>{row.from}</StyledTableCell>
-                <StyledTableCell>{row.to}</StyledTableCell>
-              </StyledTableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    )
+  return (
+    <Grid container>
+      <Grid item xs={12} sm={12} md={12}>
+        {!forwards || forwards.loading ? (
+          <Spinner />
+        ) : (
+          forwards.loaded && (
+            <TableContainer component={Paper}>
+              <Table
+                className={classes.table}
+                size="small"
+                aria-label="customized table"
+              >
+                <TableHead>
+                  <TableRow>
+                    <StyledTableCell />
+                    <StyledTableCell>
+                      {t("Session.Details.From")}
+                    </StyledTableCell>
+                    <StyledTableCell>{t("Session.Details.To")}</StyledTableCell>
+                    <StyledTableCell align="right">
+                      {t("Session.Details.Options")}
+                    </StyledTableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {forwards.map((row) => (
+                    <StyledTableRow key={row.forwardId}>
+                      <StyledTableCell component="th" scope="row">
+                        {forwards.indexOf(row) + 1}
+                      </StyledTableCell>
+                      <StyledTableCell>{row.from}</StyledTableCell>
+                      <StyledTableCell>{row.to}</StyledTableCell>
+                      <StyledTableCell align="right">
+                        {row.options ? (
+                          <Tooltip title={t("Session.Details.Options")}>
+                            <IconButton aria-label="options" size="small">
+                              <DonutLargeRoundedIcon color="primary" />
+                            </IconButton>
+                          </Tooltip>
+                        ) : (
+                          ""
+                        )}
+                      </StyledTableCell>
+                    </StyledTableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          )
+        )}
+      </Grid>
+      <Grid item xs={12} sm={12} md={12}>
+        <br />
+      </Grid>
+      <Grid item xs={12} sm={12} md={12}>
+        <SessionDetailsHeaderComponent session={session} />
+      </Grid>
+    </Grid>
   );
 };
 
 SessionDetailsComponent.propTypes = {
+  session: PropTypes.object.isRequired,
   forwards: PropTypes.array
 };
 

src/features/session/components/SessionDetailsHeaderComponent.js

@@ -0,0 +1,35 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Grid } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+import { useTranslation } from "react-i18next";
+import styles from "../styles/gridStyles";
+
+const useStyles = makeStyles(styles);
+
+const SessionDetailsHeaderComponent = ({ session }) => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+
+  return (
+    <Grid container className={classes.miniContainer}>
+      <Grid item xs={12} sm={5} md={5}>
+        {`${t("Session.LogRows")}: `}
+        <span className={classes.value}>{session.logRows || "-"}</span>
+      </Grid>
+
+      <Grid item xs={12} sm={5} md={5}>
+        {`${t("Session.LogSize")}: `}
+        <span className={classes.value}>{`${
+          session.logSizeKB || "-"
+        } KB`}</span>
+      </Grid>
+    </Grid>
+  );
+};
+
+SessionDetailsHeaderComponent.propTypes = {
+  session: PropTypes.object.isRequired
+};
+
+export default SessionDetailsHeaderComponent;

src/features/session/components/SessionListComponent.js

@@ -46,6 +46,7 @@ const SessionListComponent = ({ sessions, handleToggle, forwards }) => {
               </ExpansionPanelSummary>
               <ExpansionPanelDetails>
                 <SessionDetailsComponent
+                  session={session}
                   forwards={forwards[session.sessionId]}
                 />
               </ExpansionPanelDetails>

src/features/session/components/SessionSummary.js

@@ -4,15 +4,9 @@ import { Grid } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import { CheckCircleOutlineRounded, RemoveRounded } from "@material-ui/icons";
 import { useTranslation } from "react-i18next";
+import styles from "../styles/gridStyles";
 
-const useStyles = makeStyles((theme) => ({
-  value: {
-    fontWeight: theme.typography.fontWeightMedium
-  },
-  miniContainer: {
-    paddingTop: "10px"
-  }
-}));
+const useStyles = makeStyles(styles);
 
 const SessionSummary = ({ session }) => {
   const classes = useStyles();

src/features/session/styles/gridStyles.js

@@ -0,0 +1,10 @@
+const styles = (theme) => ({
+  value: {
+    fontWeight: theme.typography.fontWeightMedium
+  },
+  miniContainer: {
+    paddingTop: "10px"
+  }
+});
+
+export default styles;