Device configuration translation done

public/locales/en/translation.json

@@ -40,7 +40,12 @@
         "executed": "Executed",
         "submitted": "Submitted",
         "delete": "Delete",
-        "download": "Download"
+        "download": "Download",
+        "close": "Close",
+        "uuid": "UUID",
+        "serial_number": "Serial Number",
+        "mac": "MAC Address",
+        "manufacturer": "Manufacturer"
     },
     "commands":{
         "title": "Device Commands"
@@ -52,6 +57,18 @@
         "valid_json": "You need to enter valid JSON",
         "choose_file": "You need to choose a valid .json file: "
     },
+    "configuration": {
+        "title": "Device Configuration",
+        "details": "Device Details",
+        "type": "Device Type",
+        "last_configuration_change": "Last Configuration Change",
+        "last_configuration_download": "Last Configuration Download",
+        "created": "Created",
+        "notes": "Notes",
+        "owner": "Owner",
+        "location": "Location",
+        "view_json": "View raw JSON"
+    },
     "delete_command": {
         "title": "Delete Command",
         "explanation": "Are you sure you want to delete this command? This action is not reversible."

src/components/DeviceConfiguration/DeviceConfigurationModal.js

@@ -9,21 +9,27 @@ import {
   CModalFooter,
 } from '@coreui/react';
 import PropTypes from 'prop-types';
+import { Translation } from "react-i18next";
 
 const DeviceConfigurationModal = ({ show, toggle, configuration }) => (
+  <Translation>
+    {(t) => (
       <CModal size="lg" show={show} onClose={toggle}>
         <CModalHeader closeButton>
-      <CModalTitle style={{ color: 'black' }}>Device Configuration</CModalTitle>
+          <CModalTitle style={{ color: 'black' }}>{t("configuration.title")}</CModalTitle>
         </CModalHeader>
         <CModalBody>
           <pre className="ignore">{JSON.stringify(configuration, null, 4)}</pre>
         </CModalBody>
         <CModalFooter>
           <CButton color="secondary" onClick={toggle}>
-        Close
+            {t("common.close")}
           </CButton>
         </CModalFooter>
       </CModal>
+    )}
+    
+  </Translation>
 );
 
 DeviceConfigurationModal.propTypes = {

src/components/DeviceConfiguration/index.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   CCard,
   CCardHeader,
@@ -23,6 +24,7 @@ import { getToken } from 'utils/authHelper';
 import DeviceConfigurationModal from './DeviceConfigurationModal';
 
 const DeviceConfiguration = ({ selectedDeviceId }) => {
+  const { t } = useTranslation();
   const [collapse, setCollapse] = useState(false);
   const [showModal, setShowModal] = useState(false);
   const [device, setDevice] = useState(null);
@@ -62,10 +64,10 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
         <CCard>
           <CCardHeader>
             <CRow>
-              <CCol>Device Details</CCol>
+              <CCol>{t("configuration.details")}</CCol>
               <CCol>
                 <div style={{ float: 'right' }}>
-                  <CPopover content="View raw JSON">
+                  <CPopover content={t("configuration.view_json")}>
                     <CButton color="secondary" onClick={toggleModal} size="sm">
                       <CIcon content={cilWindowMaximize} />
                     </CButton>
@@ -83,7 +85,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
             >
               <CFormGroup row>
                 <CCol md="3">
-                  <CLabel>UUID : </CLabel>
+                  <CLabel>{t("common.uuid")} : </CLabel>
                 </CCol>
                 <CCol xs="12" md="9">
                   {device.UUID}
@@ -91,7 +93,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
               </CFormGroup>
               <CFormGroup row>
                 <CCol md="3">
-                  <CLabel>Serial Number : </CLabel>
+                  <CLabel>{t("common.serial_number")} : </CLabel>
                 </CCol>
                 <CCol xs="12" md="9">
                   {device.serialNumber}
@@ -99,7 +101,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
               </CFormGroup>
               <CFormGroup row>
                 <CCol md="3">
-                  <CLabel>Device Type : </CLabel>
+                  <CLabel>{t("configuration.type")} : </CLabel>
                 </CCol>
                 <CCol xs="12" md="9">
                   {device.deviceType}
@@ -107,7 +109,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
               </CFormGroup>
               <CFormGroup row>
                 <CCol md="3">
-                  <CLabel>Last Configuration Change : </CLabel>
+                  <CLabel>{t("configuration.last_configuration_change")} : </CLabel>
                 </CCol>
                 <CCol xs="12" md="9">
                   {prettyDate(device.lastConfigurationChange)}
@@ -115,7 +117,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
               </CFormGroup>
               <CFormGroup row>
                 <CCol md="3">
-                  <CLabel>MAC address :</CLabel>
+                  <CLabel>{t("common.mac")} :</CLabel>
                 </CCol>
                 <CCol xs="12" md="9">
                   {device.macAddress}
@@ -123,7 +125,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
               </CFormGroup>
               <CFormGroup row>
                 <CCol md="3">
-                  <CLabel>Created : </CLabel>
+                  <CLabel>{t("configuration.created")} : </CLabel>
                 </CCol>
                 <CCol xs="12" md="9">
                   {prettyDate(device.createdTimestamp)}
@@ -131,7 +133,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
               </CFormGroup>
               <CFormGroup row>
                 <CCol md="3">
-                  <CLabel>Last Configuration Download : </CLabel>
+                  <CLabel>{t("configuration.last_configuration_download")} : </CLabel>
                 </CCol>
                 <CCol xs="12" md="9">
                   {prettyDate(device.lastConfigurationDownload)}
@@ -140,7 +142,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
               <CCollapse show={collapse}>
                 <CFormGroup row>
                   <CCol md="3">
-                    <CLabel>Manufacturer :</CLabel>
+                    <CLabel>{t("common.manufacturer")} :</CLabel>
                   </CCol>
                   <CCol xs="12" md="9">
                     {device.manufacturer}
@@ -148,7 +150,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
                 </CFormGroup>
                 <CFormGroup row>
                   <CCol md="3">
-                    <CLabel htmlFor="text-input">Notes :</CLabel>
+                    <CLabel htmlFor="text-input">{t("configuration.notes")} :</CLabel>
                   </CCol>
                   <CCol xs="12" md="9">
                     <CInput id="text-input" name="text-input" placeholder={device.notes} />
@@ -156,7 +158,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
                 </CFormGroup>
                 <CFormGroup row>
                   <CCol md="3">
-                    <CLabel>Owner :</CLabel>
+                    <CLabel>{t("configuration.owner")} :</CLabel>
                   </CCol>
                   <CCol xs="12" md="9">
                     {device.owner}
@@ -164,7 +166,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
                 </CFormGroup>
                 <CFormGroup row>
                   <CCol md="3">
-                    <CLabel>Location :</CLabel>
+                    <CLabel>{t("configuration.location")} :</CLabel>
                   </CCol>
                   <CCol xs="12" md="9">
                     {device.location}
@@ -190,7 +192,7 @@ const DeviceConfiguration = ({ selectedDeviceId }) => {
 
   return (
     <CCard>
-      <CCardHeader>Device Configuration</CCardHeader>
+      <CCardHeader>{t("configuration.details")}</CCardHeader>
       <CCardBody />
     </CCard>
   );