system description

public/locales/en/translations.json

@@ -70,6 +70,24 @@
       "Version": "Version",
       "Date": "Date"
     },
+    "System": {
+      "Description": {
+        "Title": "Network resurrector system",
+        "FirstPhrase": "Everything must be able to be managed remotely. Even the powered off servers. That's how Network resurrector appeared, the tool I wrote specifically to be able to wake up my machines that I don't need to be powered on all the time.",
+        "SecondPhrase": "Network Resurrector is a system that comprises of five essential services which allow for the execution of its core functionality. To enable various additional features, such as the notification mechanism, supplementary components may be added to the system as an option.",
+        "Frontend": "Frontend: The frontend component is a web application written in React JS that has the role of providing the user with a friendly visual interface through which to interact with the system.",
+        "Api": "API: The API component is a .NET 6 REST API that has the role of mediating the exchange of data and commands between the frontend component and the database or server component.",
+        "Server": "Server: The server component is a .NET 6 service specialized in executing 'WakeOnLAN', 'Ping' and 'Shutdown' actions for the machines in its network.",
+        "Agent": "Agent: The agent is a .NET 6 service specialized in executing 'Shutdown', 'Restart', 'Sleep', 'Logout' and 'Lock' actions on the host machine on which it is installed. Each action can be executed at the time of launch or with a certain delay. If an action is requested with a delay and later the user changes his mind, he can cancel the action by executing the separate 'Cancel' type action.",
+        "Tuitio": "Tuitio: Tuitio is my personal identity server. It manages user authentication within the application and authorizes requests made by it. Further information about Tuitio can be found on its dedicated page."
+      },
+      "Services": {
+        "Frontend": "Frontend",
+        "Api": "API",
+        "Server": "Server",
+        "Tuitio": "Tuitio"
+      }
+    },
     "SystemVersion": {
       "Server": "Server: {{version}}",
       "Api": "API: {{version}}",

public/locales/ro/translations.json

@@ -61,6 +61,24 @@
       "Version": "Versiune",
       "Date": "Dată"
     },
+    "System": {
+      "Description": {
+        "Title": "Network resurrector system",
+        "FirstPhrase": "Totul trebuie să poată fi gestionat de la distanță. Chiar și serverele oprite. Așa a apărut Network resurrector, instrumentul pe care l-am scris special pentru a-mi putea porni mașinile de care nu am nevoie să fie pornite tot timpul.",
+        "SecondPhrase": "Network Resurrector este un sistem care cuprinde cinci servicii esențiale care permit executarea funcționalității sale de bază. Pentru a activa diverse funcții suplimentare, cum ar fi mecanismul de notificare, componente suplimentare pot fi adăugate la sistem ca opțiune.",
+        "Frontend": "Frontend: Componenta frontend este o aplicație web scrisă în React JS care are rolul de a oferi utilizatorului o interfață vizuală prietenoasă prin care să interacționeze cu sistemul.",
+        "Api": "API: Componenta API este un .NET 6 REST API care are rolul de a media schimbul de date și comenzi între componenta frontend și baza de date sau componenta server.",
+        "Server": "Server: Componenta server este un serviciu .NET 6 specializat în executarea acțiunilor 'WakeOnLAN', 'Ping' și 'Shutdown' pentru mașinile din rețeaua sa.",
+        "Agent": "Agent: Agentul este un serviciu .NET 6 specializat în executarea acțiunilor 'Shutdown', 'Restart', 'Sleep', 'Logout' și 'Lock' pe mașina gazdă pe care este instalat. Fiecare acțiune poate fi executată în momentul lansării sau cu o anumită întârziere. Dacă o acțiune este solicitată cu întârziere și ulterior utilizatorul se răzgândește, el poate anula acțiunea executând comanda separată de tip 'Cancel'.",
+        "Tuitio": "Tuitio: Tuitio este serverul meu de identitate personală. Gestionează autentificarea utilizatorilor în cadrul aplicației și autorizează solicitările făcute de aceasta. Mai multe informații despre Tuitio pot fi găsite pe pagina sa dedicată."
+      },
+      "Services": {
+        "Frontend": "Frontend",
+        "Api": "API",
+        "Server": "Server",
+        "Tuitio": "Tuitio"
+      }
+    },
     "SystemVersion": {
       "Server": "Server: {{version}}",
       "Api": "API: {{version}}",

src/features/about/system/AboutSystemComponent.js

@@ -0,0 +1,103 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { makeStyles } from "@material-ui/core/styles";
+import Card from "@material-ui/core/Card";
+import CardActions from "@material-ui/core/CardActions";
+import CardContent from "@material-ui/core/CardContent";
+import Button from "@material-ui/core/Button";
+import Typography from "@material-ui/core/Typography";
+import { useTranslation } from "react-i18next";
+import OpenInNewIcon from "@material-ui/icons/OpenInNew";
+
+const useStyles = makeStyles(theme => ({
+  bullet: {
+    display: "inline-block",
+    margin: "0 4px",
+    transform: "scale(1.5)"
+  },
+  service: {
+    marginTop: theme.spacing(1)
+  }
+}));
+
+const buttons = [
+  {
+    code: "About.System.Services.Frontend",
+    url: "https://lab.code-rove.com/gitea/tudor.stanciu/network-resurrector-frontend"
+  },
+  {
+    code: "About.System.Services.Api",
+    url: "https://lab.code-rove.com/gitea/tudor.stanciu/network-resurrector"
+  },
+  {
+    code: "About.System.Services.Server",
+    url: "https://lab.code-rove.com/gitea/tudor.stanciu/network-resurrector"
+  },
+  {
+    code: "About.System.Services.Tuitio",
+    url: "https://lab.code-rove.com/gitea/tudor.stanciu/tuitio"
+  }
+];
+
+const AboutSystemComponent = ({ handleOpenInNewTab }) => {
+  const classes = useStyles();
+  const { t } = useTranslation();
+
+  const bullet = <span className={classes.bullet}>•</span>;
+
+  return (
+    <Card variant="outlined">
+      <CardContent>
+        <Typography variant="h5" gutterBottom>
+          {t("About.System.Description.Title")}
+        </Typography>
+        <Typography color="textSecondary">
+          {t("About.System.Description.FirstPhrase")}
+        </Typography>
+        <Typography color="textSecondary">
+          {t("About.System.Description.SecondPhrase")}
+        </Typography>
+
+        <Typography className={classes.service} color="textSecondary">
+          {bullet}
+          {t("About.System.Description.Frontend")}
+        </Typography>
+        <Typography className={classes.service} color="textSecondary">
+          {bullet}
+          {t("About.System.Description.Api")}
+        </Typography>
+        <Typography className={classes.service} color="textSecondary">
+          {bullet}
+          {t("About.System.Description.Server")}
+        </Typography>
+        <Typography className={classes.service} color="textSecondary">
+          {bullet}
+          {t("About.System.Description.Agent")}
+        </Typography>
+        <Typography className={classes.service} color="textSecondary">
+          {bullet}
+          {t("About.System.Description.Tuitio")}
+        </Typography>
+      </CardContent>
+      <CardActions>
+        {buttons.map(button => (
+          <Button
+            key={button.code}
+            size="small"
+            color="primary"
+            startIcon={<OpenInNewIcon />}
+            onClick={handleOpenInNewTab(button.url)}
+          >
+            {t(button.code)}
+          </Button>
+        ))}
+      </CardActions>
+    </Card>
+  );
+};
+
+AboutSystemComponent.propTypes = {
+  handleOpenInNewTab: PropTypes.func.isRequired
+};
+
+export default AboutSystemComponent;

src/features/about/system/AboutSystemContainer.js

@@ -1,7 +1,35 @@
 import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import AboutSystemComponent from "./AboutSystemComponent";
 import SystemVersionContainer from "./SystemVersionContainer";
 
+const useStyles = makeStyles(theme => {
+  return {
+    page: {
+      display: "flex",
+      flexDirection: "column"
+    },
+    element: {
+      marginTop: theme.spacing(1)
+    }
+  };
+});
+
 const AboutSystemContainer = () => {
-  return <SystemVersionContainer />;
+  const classes = useStyles();
+
+  const handleOpenInNewTab = url => event => {
+    window.open(url, "_blank");
+    event.preventDefault();
+  };
+
+  return (
+    <div className={classes.page}>
+      <AboutSystemComponent handleOpenInNewTab={handleOpenInNewTab} />
+      <div className={classes.element}>
+        <SystemVersionContainer />
+      </div>
+    </div>
+  );
 };
 export default AboutSystemContainer;

src/features/about/system/SystemVersionComponent.js

@@ -81,9 +81,6 @@ const SystemVersionComponent = ({ data }) => {
 
   return (
     <Paper variant="outlined">
-      {/* <Typography variant="subtitle1" color="textSecondary">
-        {t("About.SystemVersion.Title")}
-      </Typography> */}
       <List className={listClass}>
         <ListItem>
           <ListItemAvatar>