Server.Thoughts

public/locales/en/translations.json

@@ -55,6 +55,7 @@
   "Server": {
     "Title": "Server",
     "Subtitle": "Expand to see details",
+    "Thoughts": "This reverse proxy is the only open gate to a secret creation land. There any impulse or thought can fly free and can be materialized without limits.",
     "ServerHostName": "Server host",
     "ApiHostName": "API host",
     "Domain": "Domain",
@@ -64,7 +65,8 @@
     "Actions": {
       "SendMessageToAuthor": "Send message to author"
     },
-    "MessageForAuthor": "Message for author"
+    "MessageForAuthor": "Message for author",
+    "Details": "Details"
   },
   "Charts": {
     "Server": {

public/locales/ro/translations.json

@@ -46,6 +46,7 @@
   "Server": {
     "Title": "Server",
     "Subtitle": "Extindeţi pentru a vedea detalii",
+    "Thoughts": "Acest reverse proxy este singura poartă deschisă către un teren secret al creației. Acolo orice impuls sau gând poate zbura liber și poate fi materializat fără limite.",
     "ServerHostName": "Gazdă server",
     "ApiHostName": "Gazdă API",
     "Domain": "Domeniu",
@@ -55,7 +56,8 @@
     "Actions": {
       "SendMessageToAuthor": "Trimite mesaj către autor"
     },
-    "MessageForAuthor": "Mesaj pentru autor"
+    "MessageForAuthor": "Mesaj pentru autor",
+    "Details": "Detalii"
   },
   "Charts": {
     "Server": {

src/features/server/components/ServerComponent.js

@@ -10,7 +10,9 @@ import {
   Collapse,
   Avatar,
   IconButton,
-  Tooltip
+  Tooltip,
+  Menu,
+  MenuItem
 } from "@material-ui/core";
 import ShareIcon from "@material-ui/icons/Share";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
@@ -35,63 +37,94 @@ const ServerComponent = ({
   const { t } = useTranslation();
 
   const [expanded, setExpanded] = React.useState(false);
+  const [anchorEl, setAnchorEl] = React.useState(null);
 
   const handleExpandClick = () => {
     setExpanded(!expanded);
   };
 
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleDetailsClick = () => {
+    openAbout();
+    handleClose();
+  };
+
   return (
-    <Card>
+    <>
-      <CardHeader
+      <Menu
-        avatar={
+        id="server-details-menu"
-          <Avatar aria-label="recipe" className={classes.avatar}>
+        anchorEl={anchorEl}
-            <DnsRoundedIcon />
+        keepMounted
-          </Avatar>
+        open={Boolean(anchorEl)}
-        }
+        onClose={handleClose}
-        action={
+      >
-          <IconButton aria-label="settings">
+        <MenuItem onClick={handleDetailsClick}>{t("Server.Details")}</MenuItem>
-            <MoreVertIcon />
+      </Menu>
-          </IconButton>
+      <Card>
-        }
+        <CardHeader
-        title={<strong>{t("Server.Title")}</strong>}
+          avatar={
-        subheader={t("Server.Subtitle")}
+            <Avatar aria-label="recipe" className={classes.avatar}>
-      />
+              <DnsRoundedIcon />
-      <CardContent>
+            </Avatar>
-        {data.loaded && (
+          }
-          <ServerSummary
+          action={
-            data={data}
+            <IconButton
-            serverHost={serverHost}
+              aria-label="settings"
-            openAbout={openAbout}
+              onClick={handleClick}
-            handleOpenInNewTab={handleOpenInNewTab}
+              color="primary"
-          />
+            >
-        )}
+              <MoreVertIcon />
-      </CardContent>
+            </IconButton>
-      <CardActions disableSpacing>
+          }
-        <Tooltip title={t("Server.Actions.SendMessageToAuthor")}>
+          title={<strong>{t("Server.Title")}</strong>}
-          <IconButton aria-label="sent message" onClick={showMessageForAuthor}>
+          subheader={t("Server.Subtitle")}
-            <MessageRoundedIcon />
+        />
-          </IconButton>
-        </Tooltip>
-        <IconButton aria-label="share">
-          <ShareIcon />
-        </IconButton>
-        <IconButton
-          className={clsx(classes.expand, {
-            [classes.expandOpen]: expanded
-          })}
-          onClick={handleExpandClick}
-          aria-expanded={expanded}
-          aria-label="show more"
-        >
-          <ExpandMoreIcon />
-        </IconButton>
-      </CardActions>
-      <Collapse in={expanded} timeout="auto" unmountOnExit>
         <CardContent>
-          <ServerChartsContainer />
+          {data.loaded && (
+            <ServerSummary
+              data={data}
+              serverHost={serverHost}
+              handleOpenInNewTab={handleOpenInNewTab}
+            />
+          )}
         </CardContent>
-      </Collapse>
+        <CardActions disableSpacing>
-    </Card>
+          <Tooltip title={t("Server.Actions.SendMessageToAuthor")}>
+            <IconButton
+              aria-label="sent message"
+              onClick={showMessageForAuthor}
+            >
+              <MessageRoundedIcon />
+            </IconButton>
+          </Tooltip>
+          <IconButton aria-label="share">
+            <ShareIcon />
+          </IconButton>
+          <IconButton
+            className={clsx(classes.expand, {
+              [classes.expandOpen]: expanded
+            })}
+            onClick={handleExpandClick}
+            aria-expanded={expanded}
+            aria-label="show more"
+          >
+            <ExpandMoreIcon />
+          </IconButton>
+        </CardActions>
+        <Collapse in={expanded} timeout="auto" unmountOnExit>
+          <CardContent>
+            <ServerChartsContainer />
+          </CardContent>
+        </Collapse>
+      </Card>
+    </>
   );
 };
 

src/features/server/components/ServerSummary.js

@@ -7,7 +7,7 @@ import styles from "../../../components/common/styles/gridStyles";
 
 const useStyles = makeStyles(styles);
 
-const ServerSummary = ({ data, serverHost, openAbout, handleOpenInNewTab }) => {
+const ServerSummary = ({ data, serverHost, handleOpenInNewTab }) => {
   const classes = useStyles();
   const { t } = useTranslation();
 
@@ -41,12 +41,7 @@ const ServerSummary = ({ data, serverHost, openAbout, handleOpenInNewTab }) => {
 
       <Grid item xs={12} sm={12} md={12}>
         <Typography variant="body2" gutterBottom color="textSecondary">
-          {
+          {t("Server.Thoughts")}
-            "Bla bla bla, bla bla bla, bla bla bla, Bla bla bla, bla bla bla, bla bla bla, Bla bla bla, bla bla bla. Pentru mai multe detalii click "
-          }
-          <Link href="#" onClick={openAbout} variant="body2">
-            {"aici"}
-          </Link>
         </Typography>
       </Grid>
     </Grid>
@@ -56,7 +51,6 @@ const ServerSummary = ({ data, serverHost, openAbout, handleOpenInNewTab }) => {
 ServerSummary.propTypes = {
   data: PropTypes.object.isRequired,
   serverHost: PropTypes.string,
-  openAbout: PropTypes.func.isRequired,
   handleOpenInNewTab: PropTypes.func.isRequired
 };