Add IsChainMember feature with tooltip to ServerSummary and update translations

public/locales/en/translations.json

@@ -138,6 +138,8 @@
     "Wizard": "wizard",
     "HostName": "Server host",
     "SessionsCount": "Sessions count",
+    "IsChainMember": "Is chain member",
+    "IsChainMemberTooltip": "If the proxy is a chain member, it runs behind another proxy; if it isn't, it’s the first or only proxy receiving the request.",
     "Domain": "Domain",
     "ActiveSession": "Active session",
     "ActiveSessionSubtitle": "Expand to see forwards",

public/locales/ro/translations.json

@@ -129,6 +129,8 @@
     "Wizard": "vrăjitor",
     "HostName": "Gazdă server",
     "SessionsCount": "Număr sesiuni",
+    "IsChainMember": "Este membru al unui lanț",
+    "IsChainMemberTooltip": "Dacă proxy-ul este membru al lanțului, acesta rulează în spatele unui alt proxy; dacă nu este, este primul sau singurul proxy care primește cererea.",
     "Domain": "Domeniu",
     "ActiveSession": "Sesiune activă",
     "ActiveSessionSubtitle": "Extindeţi pentru a vedea redirectările",

src/components/common/ActiveIcon.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { CheckCircleOutlineRounded, RemoveRounded } from "@material-ui/icons";
 import { LinearProgress, Grid } from "@material-ui/core";
 
-const ActiveIcon = ({ active, loading }) => {
+const ActiveIcon = ({ active, loading, color }) => {
   if (loading && loading === true) {
     return (
       <Grid container>
@@ -16,8 +16,9 @@ const ActiveIcon = ({ active, loading }) => {
     );
   }
 
+  const circleColor = color || "primary";
   return active && active === true ? (
-    <CheckCircleOutlineRounded color="primary" fontSize="small" />
+    <CheckCircleOutlineRounded color={circleColor} fontSize="small" />
   ) : (
     <RemoveRounded fontSize="small" />
   );
@@ -25,7 +26,8 @@ const ActiveIcon = ({ active, loading }) => {
 
 ActiveIcon.propTypes = {
   active: PropTypes.bool,
-  loading: PropTypes.bool
+  loading: PropTypes.bool,
+  color: PropTypes.string
 };
 
 export default ActiveIcon;

src/features/server/components/ServerSummary.js

@@ -1,9 +1,10 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Grid, Typography, Link } from "@material-ui/core";
+import { Grid, Typography, Link, Tooltip } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import { useTranslation } from "react-i18next";
 import styles from "../../../components/common/styles/gridStyles";
+import ActiveIcon from "../../../components/common/ActiveIcon";
 
 const useStyles = makeStyles(styles);
 
@@ -18,22 +19,27 @@ const ServerSummary = ({
 
   return (
     <Grid container>
-      <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={3} md={3}>
+      <Grid item xs={6} sm={3} md={2}>
         {`${t("Server.HostName")}: `}
         <span className={classes.value}>{serverHost || ""}</span>
       </Grid>
-
-      <Grid item xs={6} sm={3} md={3}>
+      <Grid item xs={6} sm={3} md={2}>
         {`${t("Server.SessionsCount")}: `}
         <span className={classes.value}>{data.sessionsCount}</span>
       </Grid>
-
-      <Grid item xs={6} sm={3} md={3}>
+      <Grid item xs={6} sm={3} md={2}>
+        <Tooltip title={t("Server.IsChainMemberTooltip")}>
+          <span>
+            {`${t("Server.IsChainMember")}: `}
+            <ActiveIcon active={data.isChainMember} color="action" />
+          </span>
+        </Tooltip>
+      </Grid>
+      <Grid item xs={6} sm={3} md={2}>
+        {`${t("Server.Domain")}: `}
+        <span className={classes.value}>{data.domain.name}</span>
+      </Grid>
+      <Grid item xs={6} sm={3} md={2}>
         {`${t("Server.DDNSProvider")}: `}
         <Link
           href="#"