server card update

public/locales/en/translations.json

@@ -52,6 +52,9 @@
     "Version": "Version"
   },
   "Server": {
+    "Title": "Server",
+    "Host": "Host",
+    "ServerHostName": "Server host",
     "ApiHostName": "API host",
     "Domain": "Domain",
     "ActiveSession": "Active session",

public/locales/ro/translations.json

@@ -43,6 +43,9 @@
     "Version": "Versiune"
   },
   "Server": {
+    "Title": "Server",
+    "Host": "Gazdă",
+    "ServerHostName": "Gazdă server",
     "ApiHostName": "Gazdă API",
     "Domain": "Domeniu",
     "ActiveSession": "Sesiune activă",

src/features/server/components/ServerComponent.js

@@ -17,11 +17,14 @@ import MoreVertIcon from "@material-ui/icons/MoreVert";
 import DnsRoundedIcon from "@material-ui/icons/DnsRounded";
 import styles from "../../../components/common/styles/expandableCardStyles";
 import ServerSummary from "./ServerSummary";
+import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles(styles);
 
 const ServerComponent = ({ data }) => {
   const classes = useStyles();
+  const { t } = useTranslation();
+
   const [expanded, setExpanded] = React.useState(false);
 
   const handleExpandClick = () => {
@@ -41,8 +44,10 @@ const ServerComponent = ({ data }) => {
             <MoreVertIcon />
           </IconButton>
         }
-        title={<strong>Server</strong>}
-        subheader="Host: StaWebSrv"
+        title={<strong>{t("Server.Title")}</strong>}
+        subheader={`${t("Server.Host")}: ${
+          data.hosts ? data.hosts.server : ""
+        }`}
       />
       <CardContent>{data.loaded && <ServerSummary data={data} />}</CardContent>
       <CardActions disableSpacing>

src/features/server/components/ServerSummary.js

@@ -14,13 +14,18 @@ const ServerSummary = ({ data }) => {
   return (
     <Grid container>
       <Grid item xs={12} sm={4} md={4}>
-        {`${t("Server.ApiHostName")}: `}
-        <span className={classes.value}>{data.hosts.api}</span>
+        {`${t("Server.Domain")}: `}
+        <span className={classes.value}>{data.domain}</span>
       </Grid>
 
       <Grid item xs={12} sm={4} md={4}>
-        {`${t("Server.Domain")}: `}
-        <span className={classes.value}>{data.domain}</span>
+        {`${t("Server.ServerHostName")}: `}
+        <span className={classes.value}>{data.hosts.server}</span>
+      </Grid>
+
+      <Grid item xs={12} sm={4} md={4}>
+        {`${t("Server.ApiHostName")}: `}
+        <span className={classes.value}>{data.hosts.api}</span>
       </Grid>
     </Grid>
   );