From d3f359c6dd193a830bc4a352e18712e14c5811f1 Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Sun, 26 Mar 2023 04:52:36 +0300 Subject: [PATCH] system description --- public/locales/en/translations.json | 18 +++ public/locales/ro/translations.json | 18 +++ .../about/system/AboutSystemComponent.js | 103 ++++++++++++++++++ .../about/system/AboutSystemContainer.js | 30 ++++- .../about/system/SystemVersionComponent.js | 3 - 5 files changed, 168 insertions(+), 4 deletions(-) create mode 100644 src/features/about/system/AboutSystemComponent.js diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json index c039532..ed71a5a 100644 --- a/public/locales/en/translations.json +++ b/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}}", diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json index 960c9cb..3db9584 100644 --- a/public/locales/ro/translations.json +++ b/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}}", diff --git a/src/features/about/system/AboutSystemComponent.js b/src/features/about/system/AboutSystemComponent.js new file mode 100644 index 0000000..ad826d7 --- /dev/null +++ b/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 = •; + + return ( + + + + {t("About.System.Description.Title")} + + + {t("About.System.Description.FirstPhrase")} + + + {t("About.System.Description.SecondPhrase")} + + + + {bullet} + {t("About.System.Description.Frontend")} + + + {bullet} + {t("About.System.Description.Api")} + + + {bullet} + {t("About.System.Description.Server")} + + + {bullet} + {t("About.System.Description.Agent")} + + + {bullet} + {t("About.System.Description.Tuitio")} + + + + {buttons.map(button => ( + + ))} + + + ); +}; + +AboutSystemComponent.propTypes = { + handleOpenInNewTab: PropTypes.func.isRequired +}; + +export default AboutSystemComponent; diff --git a/src/features/about/system/AboutSystemContainer.js b/src/features/about/system/AboutSystemContainer.js index 8b64878..8850a72 100644 --- a/src/features/about/system/AboutSystemContainer.js +++ b/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 ; + const classes = useStyles(); + + const handleOpenInNewTab = url => event => { + window.open(url, "_blank"); + event.preventDefault(); + }; + + return ( +
+ +
+ +
+
+ ); }; export default AboutSystemContainer; diff --git a/src/features/about/system/SystemVersionComponent.js b/src/features/about/system/SystemVersionComponent.js index 5d44e37..22760c4 100644 --- a/src/features/about/system/SystemVersionComponent.js +++ b/src/features/about/system/SystemVersionComponent.js @@ -81,9 +81,6 @@ const SystemVersionComponent = ({ data }) => { return ( - {/* - {t("About.SystemVersion.Title")} - */}