translations

public/locales/en/translations.json

@@ -27,5 +27,14 @@
     "IncorrectCredentials": "Incorrect credentials.",
     "Hello": "Hi, {{username}}",
     "AuthenticationDate": "Authentication date"
+  },
+  "Machine": {
+    "FullName": "Full machine name",
+    "Name": "Machine name",
+    "IP": "IP",
+    "Actions": {
+      "Wake": "Wake",
+      "Ping": "Ping"
+    }
   }
 }

public/locales/ro/translations.json

@@ -18,5 +18,14 @@
     "IncorrectCredentials": "Credențiale incorecte.",
     "Hello": "Salut, {{username}}",
     "AuthenticationDate": "Momentul autentificării"
+  },
+  "Machine": {
+    "FullName": "Nume intreg masina",
+    "Name": "Nume masina",
+    "IP": "IP",
+    "Actions": {
+      "Wake": "Pornește",
+      "Ping": "Ping"
+    }
   }
 }

src/features/machines/components/Machine.js

@@ -10,7 +10,6 @@ import {
 import { KeyboardArrowDown, KeyboardArrowUp } from "@material-ui/icons";
 import { makeStyles } from "@material-ui/core/styles";
 import MachineLog from "./MachineLog";
-import { useTranslation } from "react-i18next";
 
 const useRowStyles = makeStyles({
   root: {
@@ -23,7 +22,6 @@ const useRowStyles = makeStyles({
 const Machine = ({ machine, actions, logs }) => {
   const [open, setOpen] = React.useState(false);
   const classes = useRowStyles();
-  const { t } = useTranslation();
 
   return (
     <React.Fragment>
@@ -46,7 +44,7 @@ const Machine = ({ machine, actions, logs }) => {
           <>
             {actions.map(action => (
               <Tooltip
-                title={t(action.tooltip)}
+                title={action.tooltip}
                 key={`machine-item-${machine.machineId}-${action.code}-tooltip`}
               >
                 <span>

src/features/machines/components/MachineContainer.js

@@ -4,10 +4,12 @@ import Machine from "./Machine";
 import * as api from "../api";
 import { useToast } from "../../../hooks";
 import { PowerSettingsNew, LastPage } from "@material-ui/icons";
+import { useTranslation } from "react-i18next";
 
 const MachineContainer = ({ machine }) => {
   const [logs, setLogs] = useState([]);
   const { success, error } = useToast();
+  const { t } = useTranslation();
 
   const addLog = text => {
     setLogs(prev => [...prev, text]);
@@ -40,13 +42,13 @@ const MachineContainer = ({ machine }) => {
       code: "wake",
       effect: wakeMachine,
       icon: PowerSettingsNew,
-      tooltip: "Wake"
+      tooltip: t("Machine.Actions.Wake")
     },
     {
       code: "ping",
       effect: pingMachine,
       icon: LastPage,
-      tooltip: "Ping"
+      tooltip: t("Machine.Actions.Ping")
     }
   ];
 

src/features/machines/components/MachinesList.js

@@ -10,17 +10,19 @@ import {
 } from "@material-ui/core";
 import Paper from "@material-ui/core/Paper";
 import MachineContainer from "./MachineContainer";
+import { useTranslation } from "react-i18next";
 
-const MachinesList = ({ dense, machines, actions }) => {
+const MachinesList = ({ dense, machines }) => {
+  const { t } = useTranslation();
   return (
     <TableContainer component={Paper}>
       <Table aria-label="collapsible table" size={dense ? "small" : "medium"}>
         <TableHead>
           <TableRow>
             <TableCell />
-            <TableCell>Full machine name</TableCell>
-            <TableCell>Machine name</TableCell>
-            <TableCell>IP</TableCell>
+            <TableCell>{t("Machine.FullName")}</TableCell>
+            <TableCell>{t("Machine.Name")}</TableCell>
+            <TableCell>{t("Machine.IP")}</TableCell>
             <TableCell align="right" />
           </TableRow>
         </TableHead>