DDNSProvider and active session forwards number

public/locales/en/translations.json

@@ -58,6 +58,7 @@
     "ApiHostName": "API host",
     "Domain": "Domain",
     "ActiveSession": "Active session",
-    "ActiveSessionSubtitle": "Expand to see forwards"
+    "ActiveSessionSubtitle": "Expand to see forwards",
+    "DDNSProvider": "Dynamic DNS Provider"
   }
 }

public/locales/ro/translations.json

@@ -49,6 +49,7 @@
     "ApiHostName": "Gazdă API",
     "Domain": "Domeniu",
     "ActiveSession": "Sesiune activă",
-    "ActiveSessionSubtitle": "Extindeţi pentru a vedea redirectările"
+    "ActiveSessionSubtitle": "Extindeţi pentru a vedea redirectările",
+    "DDNSProvider": "Furnizor DNS dinamic"
   }
 }

src/features/server/components/ActiveSessionSummary.js

@@ -13,12 +13,12 @@ const ActiveSessionSummary = ({ session }) => {
 
   return (
     <Grid container>
-      <Grid item xs={12} sm={4} md={4}>
+      <Grid item xs={6} sm={3} md={3}>
         {`${t("Session.RunningTime")}: `}
         <span className={classes.value}>{session.runningTime}</span>
       </Grid>
 
-      <Grid item xs={12} sm={4} md={4}>
+      <Grid item xs={6} sm={3} md={3}>
         {`${t("Session.StartDate")}: `}
         <span className={classes.value}>
           {t("DATE_FORMAT", {
@@ -27,10 +27,15 @@ const ActiveSessionSummary = ({ session }) => {
         </span>
       </Grid>
 
-      <Grid item xs={12} sm={4} md={4}>
+      <Grid item xs={6} sm={3} md={3}>
         {`${t("Session.Host")}: `}
         <span className={classes.value}>{session.hostName}</span>
       </Grid>
+
+      <Grid item xs={6} sm={3} md={3}>
+        {`${t("Session.Forwards.Title")}: `}
+        <span className={classes.value}>{session.forwardsNumber}</span>
+      </Grid>
     </Grid>
   );
 };

src/features/server/components/ServerComponent.js

@@ -23,7 +23,12 @@ import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles(styles);
 
-const ServerComponent = ({ data, serverHost, openAbout }) => {
+const ServerComponent = ({
+  data,
+  serverHost,
+  openAbout,
+  handleOpenInNewTab
+}) => {
   const classes = useStyles();
   const { t } = useTranslation();
 
@@ -55,6 +60,7 @@ const ServerComponent = ({ data, serverHost, openAbout }) => {
             data={data}
             serverHost={serverHost}
             openAbout={openAbout}
+            handleOpenInNewTab={handleOpenInNewTab}
           />
         )}
       </CardContent>
@@ -114,7 +120,8 @@ const ServerComponent = ({ data, serverHost, openAbout }) => {
 ServerComponent.propTypes = {
   data: PropTypes.object.isRequired,
   serverHost: PropTypes.string,
-  openAbout: PropTypes.func.isRequired
+  openAbout: PropTypes.func.isRequired,
+  handleOpenInNewTab: PropTypes.func.isRequired
 };
 
 export default ServerComponent;

src/features/server/components/ServerContainer.js

@@ -17,11 +17,17 @@ const ServerContainer = ({ actions, data, serverHost, history }) => {
     event.preventDefault();
   };
 
+  const handleOpenInNewTab = (url) => (event) => {
+    window.open(url, "_blank");
+    event.preventDefault();
+  };
+
   return (
     <ServerComponent
       data={data}
       serverHost={serverHost}
       openAbout={openAbout}
+      handleOpenInNewTab={handleOpenInNewTab}
     />
   );
 };

src/features/server/components/ServerSummary.js

@@ -7,28 +7,37 @@ import styles from "../../../components/common/styles/gridStyles";
 
 const useStyles = makeStyles(styles);
 
-const ServerSummary = ({ data, serverHost, openAbout }) => {
+const ServerSummary = ({ data, serverHost, openAbout, handleOpenInNewTab }) => {
   const classes = useStyles();
   const { t } = useTranslation();
 
   return (
     <Grid container>
-      <Grid item xs={6} sm={4} md={4}>
+      <Grid item xs={6} sm={3} md={3}>
         {`${t("Server.Domain")}: `}
         <span className={classes.value}>{data.domain.name}</span>
       </Grid>
 
-      <Grid item xs={6} sm={4} md={4}>
+      <Grid item xs={6} sm={3} md={3}>
         {`${t("Server.ServerHostName")}: `}
         <span className={classes.value}>{serverHost || ""}</span>
       </Grid>
 
-      <Grid item xs={6} sm={4} md={4}>
+      <Grid item xs={6} sm={3} md={3}>
         {`${t("Server.ApiHostName")}: `}
         <span className={classes.value}>{data.hosts.api}</span>
       </Grid>
 
-      <Grid item xs={6} sm={4} md={4}></Grid>
+      <Grid item xs={6} sm={3} md={3}>
+        {`${t("Server.DDNSProvider")}: `}
+        <Link
+          href="#"
+          onClick={handleOpenInNewTab(data.domain.provider.url)}
+          variant="subtitle1"
+        >
+          {data.domain.provider.name}
+        </Link>
+      </Grid>
 
       <Grid item xs={12} sm={12} md={12}>
         <Typography variant="body2" gutterBottom color="textSecondary">
@@ -47,7 +56,8 @@ const ServerSummary = ({ data, serverHost, openAbout }) => {
 ServerSummary.propTypes = {
   data: PropTypes.object.isRequired,
   serverHost: PropTypes.string,
-  openAbout: PropTypes.func.isRequired
+  openAbout: PropTypes.func.isRequired,
+  handleOpenInNewTab: PropTypes.func.isRequired
 };
 
 export default ServerSummary;