Device commands translated

public/locales/en/translation.json

@@ -31,7 +31,19 @@
         "submit": "Submit",
         "success": "Success",
         "error": "Error",
-        "yes": "Yes"
+        "yes": "Yes",
+        "result": "Result",
+        "details": "Details",
+        "id": "Id",
+        "command": "Command",
+        "completed": "Completed",
+        "executed": "Executed",
+        "submitted": "Submitted",
+        "delete": "Delete",
+        "download": "Download"
+    },
+    "commands":{
+        "title": "Device Commands"
     },
     "configure": {
         "title": "Configure Device",

src/components/DeviceCommandsLog/DeviceCommandsCollapse.js

@@ -1,22 +1,27 @@
 import React from 'react';
 import { CCollapse, CCardBody } from '@coreui/react';
 import PropTypes from 'prop-types';
+import { Translation } from "react-i18next";
 
 const DeviceCommandsCollapse = ({ details, responses, index, item, getDetails, getResponse }) => (
+  <Translation>
+    {(t) => (
       <div>
         <CCollapse show={details.includes(index)}>
           <CCardBody>
-        <h5>Result</h5>
+            <h5>{t("common.result")}</h5>
             <div>{getDetails(item, index)}</div>
           </CCardBody>
         </CCollapse>
         <CCollapse show={responses.includes(index)}>
           <CCardBody>
-        <h5>Details</h5>
+            <h5>{t("common.details")}</h5>
             <div>{getResponse(item, index)}</div>
           </CCardBody>
         </CCollapse>
       </div>
+    )}
+  </Translation>
 );
 
 DeviceCommandsCollapse.propTypes = {

src/components/DeviceCommandsLog/index.js

@@ -1,5 +1,6 @@
 /* eslint-disable-rule prefer-destructuring */
 import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   CWidgetDropdown,
   CRow,
@@ -26,6 +27,7 @@ import WifiScanResultModalWidget from 'components/WifiScanResultModal';
 import DeviceCommandsCollapse from './DeviceCommandsCollapse';
 
 const DeviceCommands = ({ selectedDeviceId }) => {
+  const { t } = useTranslation();
   // Wifiscan result related
   const [chosenWifiScan, setChosenWifiScan] = useState(null);
   const [showScanModal, setShowScanModal] = useState(false);
@@ -215,11 +217,11 @@ const DeviceCommands = ({ selectedDeviceId }) => {
   };
 
   const columns = [
-    { key: 'UUID', label: 'Id', _style: { width: '28%' } },
-    { key: 'command', _style: { width: '10%' } },
-    { key: 'completed', filter: false, _style: { width: '16%' } },
-    { key: 'submitted', filter: false, _style: { width: '16%' } },
-    { key: 'executed', filter: false, _style: { width: '16%' } },
+    { key: 'UUID', label: t("common.id"), _style: { width: '28%' } },
+    { key: 'command', label: t("common.command"), _style: { width: '10%' } },
+    { key: 'completed', label: t("common.completed"), filter: false, _style: { width: '16%' } },
+    { key: 'submitted', label: t("common.submitted"), filter: false, _style: { width: '16%' } },
+    { key: 'executed', label: t("common.executed"), filter: false, _style: { width: '16%' } },
     {
       key: 'show_buttons',
       label: '',
@@ -274,7 +276,7 @@ const DeviceCommands = ({ selectedDeviceId }) => {
     <CWidgetDropdown
       inverse="true"
       color="gradient-primary"
-      header="Device Commands"
+      header={t("commands.title")}
       footerSlot={
         <div style={{ padding: '20px' }}>
           <CCollapse show={collapse}>
@@ -340,7 +342,7 @@ const DeviceCommands = ({ selectedDeviceId }) => {
                       <td>
                         <CRow>
                           <CCol>
-                            <CPopover content={item.command === 'trace' ? 'Download' : 'Results'}>
+                            <CPopover content={item.command === 'trace' ? t("common.download") : t("common.result")}>
                               <CButton
                                 color="primary"
                                 variant={details.includes(index) ? '' : 'outline'}
@@ -367,7 +369,7 @@ const DeviceCommands = ({ selectedDeviceId }) => {
                             </CPopover>
                           </CCol>
                           <CCol>
-                            <CPopover content="Full Details">
+                            <CPopover content={t("common.details")}>
                               <CButton
                                 color="primary"
                                 variant={responses.includes(index) ? '' : 'outline'}
@@ -382,7 +384,7 @@ const DeviceCommands = ({ selectedDeviceId }) => {
                             </CPopover>
                           </CCol>
                           <CCol>
-                            <CPopover content="Delete">
+                            <CPopover content={t("common.delete")}>
                               <CButton
                                 color="primary"
                                 variant="outline"