translate system menu

interface/src/framework/system/SystemLog.tsx

@@ -15,6 +15,9 @@ import DownloadIcon from '@mui/icons-material/GetApp';
 import { useSnackbar } from 'notistack';
 
 import { EVENT_SOURCE_ROOT } from '../../api/endpoints';
+
+import { useI18nContext } from '../../i18n/i18n-react';
+
 export const LOG_EVENTSOURCE_URL = EVENT_SOURCE_ROOT + 'log';
 
 const useWindowSize = () => {
@@ -63,6 +66,8 @@ const levelLabel = (level: LogLevel) => {
 const SystemLog: FC = () => {
   useWindowSize();
 
+  const { LL } = useI18nContext();
+
   const { loadData, data, setData } = useRest<LogSettings>({
     read: SystemApi.readLogSettings
   });
@@ -104,10 +109,10 @@ const SystemLog: FC = () => {
           compact: data.compact
         });
         if (response.status !== 200) {
-          enqueueSnackbar('Problem applying log settings', { variant: 'error' });
+          enqueueSnackbar(LL.PROBLEM_UPDATING(), { variant: 'error' });
         }
       } catch (error: unknown) {
-        enqueueSnackbar(extractErrorMessage(error, 'Problem applying log settings'), { variant: 'error' });
+        enqueueSnackbar(extractErrorMessage(error, LL.PROBLEM_UPDATING()), { variant: 'error' });
       }
     }
   };
@@ -159,9 +164,9 @@ const SystemLog: FC = () => {
     try {
       setLogEntries((await SystemApi.readLogEntries()).data);
     } catch (error: unknown) {
-      setErrorMessage(extractErrorMessage(error, 'Failed to fetch log'));
+      setErrorMessage(extractErrorMessage(error, LL.PROBLEM_LOADING()));
     }
-  }, []);
+  }, [LL]);
 
   useEffect(() => {
     fetchLog();
@@ -214,7 +219,7 @@ const SystemLog: FC = () => {
             </ValidatedTextField>
           </Grid>
           <Grid item xs={3}>
-            <FormLabel>Buffer size</FormLabel>
+            <FormLabel>{LL.BUFFER_SIZE()}</FormLabel>
             <Slider
               value={data.max_messages}
               valueLabelDisplay="auto"
@@ -235,12 +240,12 @@ const SystemLog: FC = () => {
           <Grid item>
             <BlockFormControlLabel
               control={<Checkbox checked={data.compact} onChange={updateFormValue} name="compact" />}
-              label="Compact"
+              label={LL.COMPACT()}
             />
           </Grid>
           <Grid item>
             <Button startIcon={<DownloadIcon />} variant="outlined" color="secondary" onClick={onDownload}>
-              Export
+              {LL.EXPORT()}
             </Button>
           </Grid>
         </Grid>
@@ -273,7 +278,7 @@ const SystemLog: FC = () => {
   };
 
   return (
-    <SectionContent title="System Log" titleGutter id="log-window">
+    <SectionContent title={LL.SYSTEM() + ' ' + LL.LOG()} titleGutter id="log-window">
       {content()}
     </SectionContent>
   );