@centreon/ui 23.10.18-MON-17793-create-graph-component-centreon-ui.8 → 23.10.18-MON-17793-create-graph-component-centreon-ui.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.18-MON-17793-create-graph-component-centreon-ui.8",
+  "version": "23.10.18-MON-17793-create-graph-component-centreon-ui.9",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/TimePeriods/CustomTimePeriod/CompactCustomTimePeriod.tsx

@@ -1,4 +1,5 @@
 import { useAtomValue } from 'jotai';
+import { useTranslation } from 'react-i18next';
 
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import { Button, Typography } from '@mui/material';
@@ -6,6 +7,11 @@ import { Button, Typography } from '@mui/material';
 import { dateTimeFormat, useLocaleDateTimeFormat } from '@centreon/ui';
 
 import { customTimePeriodAtom } from '../timePeriodsAtoms';
+import {
+  labelCompactTimePeriod,
+  labelFrom,
+  labelTo
+} from '../translatedLabels';
 
 import useStyles from './CompactCustomTimePeriod.styles';
 
@@ -19,6 +25,7 @@ const CompactCustomTimePeriod = ({
   disabled = false
 }: Props): JSX.Element => {
   const { classes } = useStyles();
+  const { t } = useTranslation();
 
   const { format } = useLocaleDateTimeFormat();
 
@@ -27,10 +34,10 @@ const CompactCustomTimePeriod = ({
   return (
     <div>
       <Button
-        aria-label="CompactTimePeriod"
+        aria-label={t(labelCompactTimePeriod) as string}
         className={classes.button}
         color="primary"
-        data-testid="Compact time period"
+        data-testid={labelCompactTimePeriod}
         disabled={disabled}
         variant="outlined"
         onClick={onClick}
@@ -44,7 +51,7 @@ const CompactCustomTimePeriod = ({
                 component="div"
                 variant="caption"
               >
-                From:
+                {t(labelFrom)}:
               </Typography>
 
               <Typography
@@ -64,7 +71,7 @@ const CompactCustomTimePeriod = ({
                 component="div"
                 variant="caption"
               >
-                To:
+                {t(labelTo)}:
               </Typography>
 
               <Typography

package/src/TimePeriods/SelectedTimePeriod.tsx

@@ -1,6 +1,7 @@
 import { useAtomValue, useSetAtom } from 'jotai';
 import { T, always, cond, equals, lte, map, pick } from 'ramda';
 import { makeStyles } from 'tss-react/mui';
+import { useTranslation } from 'react-i18next';
 
 import { Button, ButtonGroup, Tooltip, useTheme } from '@mui/material';
 
@@ -35,7 +36,7 @@ const SelectedTimePeriod = ({
 }: Props): JSX.Element => {
   const { classes } = useStyles();
   const theme = useTheme();
-
+  const { t } = useTranslation();
   const selectedTimePeriodData = useAtomValue(selectedTimePeriodAtom);
 
   const changeSelectedTimePeriod = useSetAtom(
@@ -52,6 +53,12 @@ const SelectedTimePeriod = ({
     currentTimePeriods
   );
 
+  const translatedTimePeriodOptions = timePeriodOptions.map((timePeriod) => ({
+    ...timePeriod,
+    largeName: t(timePeriod.largeName),
+    name: t(timePeriod.name)
+  }));
+
   return (
     <ButtonGroup
       className={classes.buttonGroup}
@@ -86,7 +93,7 @@ const SelectedTimePeriod = ({
             </Button>
           </Tooltip>
         ),
-        timePeriodOptions
+        translatedTimePeriodOptions
       )}
     </ButtonGroup>
   );

package/src/TimePeriods/models.ts

@@ -1,5 +1,14 @@
 import dayjs from 'dayjs';
 
+import {
+  labelLastDay,
+  label1Day,
+  label7Days,
+  label31Days,
+  labelLast7Days,
+  labelLast31Days
+} from './translatedLabels';
+
 export const dateFormat = 'L';
 export const timeFormat = 'LT';
 export const dateTimeFormat = `${dateFormat} ${timeFormat}`;
@@ -18,13 +27,6 @@ export interface TimePeriod {
   timelineEventsLimit: number;
 }
 
-export const label1Day = '1 day';
-export const label7Days = '7 days';
-export const label31Days = '31 days';
-export const labelLastDay = 'Last day';
-export const labelLast7Days = 'Last 7 days';
-export const labelLast31Days = 'Last 31 days';
-
 export const lastDayPeriod: TimePeriod = {
   dateTimeFormat: timeFormat,
   getStart: (): Date => dayjs(Date.now()).subtract(24, 'hour').toDate(),

package/src/TimePeriods/translatedLabels.ts

@@ -0,0 +1,9 @@
+export const label1Day = '1 day';
+export const label7Days = '7 days';
+export const label31Days = '31 days';
+export const labelLastDay = 'Last day';
+export const labelLast7Days = 'Last 7 days';
+export const labelLast31Days = 'Last 31 days';
+export const labelFrom = 'From';
+export const labelTo = 'To';
+export const labelCompactTimePeriod = 'Compact time period';