fix(Resource-status): Fix status tiles labels / Fix tile height / Fix tile height blowing up

lang/es_ES.UTF-8/LC_MESSAGES/messages.po

@@ -14331,7 +14331,7 @@ msgstr "Permitir certificado autofirmado"
 #  msgid "Current notification number"
 #  msgstr ""
 
-#  msgid "Current state duration"
+#  msgid "Current status duration"
 #  msgstr ""
 
 #  msgid "Downtime duration"
@@ -14397,7 +14397,7 @@ msgstr "Permitir certificado autofirmado"
 #  msgid "Last notification"
 #  msgstr ""
 
-#  msgid "Last state change"
+#  msgid "Last status change"
 #  msgstr ""
 
 #  msgid "Next check"
@@ -14409,7 +14409,7 @@ msgstr "Permitir certificado autofirmado"
 #  msgid "Open"
 #  msgstr ""
 
-#  msgid "Percent state change"
+#  msgid "Status change percentage"
 #  msgstr ""
 
 #  msgid "Resource name"

lang/fr_FR.UTF-8/LC_MESSAGES/messages.po

@@ -2428,11 +2428,11 @@ msgstr "Commentaires"
 #: centreon-web/www/include/monitoring/objectDetails/serviceDetails.php:497
 #: centreon-web/www/include/monitoring/objectDetails/hostDetails.php:511
 msgid "Acknowledged"
-msgstr "Acquittés"
+msgstr "Acquitté"
 
 #: centreon-web/www/install/smarty_translate.php:840
 msgid "In Downtime"
-msgstr "Plage de maintenance démarrée"
+msgstr "En maintenance"
 
 #: centreon-web/www/install/smarty_translate.php:843
 #: centreon-web/www/install/menu_translation.php:88
@@ -12415,7 +12415,7 @@ msgstr "Statut détaillé"
 #: centreon-web/www/include/monitoring/status/Hosts/host.php:133
 #: centreon-web/www/include/monitoring/status/Services/service.php:338
 msgid "Unhandled Problems"
-msgstr "Problèmes non acquittés"
+msgstr "Problèmes non traités"
 
 #: centreon-web/www/include/monitoring/status/Hosts/host.php:134
 msgid "Host Problems"
@@ -15299,8 +15299,8 @@ msgstr "Commande copiée dans le presse-papier"
 msgid "Current notification number"
 msgstr "Numéro de notification actuel"
 
-msgid "Current state duration"
-msgstr "Durée de l'état actuel"
+msgid "Current status duration"
+msgstr "Durée du statut actuel"
 
 msgid "Downtime duration"
 msgstr "Durée de la plage de maintenance"
@@ -15333,7 +15333,7 @@ msgid "Downtime"
 msgstr "Plage de maintenance"
 
 msgid "In downtime"
-msgstr "En plage de maintenance"
+msgstr "En maintenance"
 
 msgid "1 day"
 msgstr "1 jour"
@@ -15365,8 +15365,8 @@ msgstr "Programmer une plage de maintenance sur les services attachés à l'hôt
 msgid "Last notification"
 msgstr "Dernière notification"
 
-msgid "Last state change"
-msgstr "Dernier changement d'état"
+msgid "Last status change"
+msgstr "Dernier changement de statut"
 
 msgid "Next check"
 msgstr "Prochain contrôle"
@@ -15377,8 +15377,8 @@ msgstr "Si cette option est cochée, une notification sera envoyée aux contacts
 msgid "Open"
 msgstr "Ouvrir"
 
-msgid "Percent state change"
-msgstr "Pourcentage de changement d'état"
+msgid "Status change percentage"
+msgstr "Pourcentage de changement de statut"
 
 msgid "Resource name"
 msgstr "Nom de la ressource"
@@ -15456,7 +15456,7 @@ msgid "Type of resource"
 msgstr "Type de ressource"
 
 msgid "Unhandled problems"
-msgstr "Problèmes non acquittés"
+msgstr "Problèmes non traités"
 
 msgid "Unhandled"
 msgstr "Non traité"

lang/pt_BR.UTF-8/LC_MESSAGES/messages.po

@@ -14797,7 +14797,7 @@ msgstr "Erro ao remover tokens de um contato"
 #  msgid "Current notification number"
 #  msgstr ""
 
-#  msgid "Current state duration"
+#  msgid "Current status duration"
 #  msgstr ""
 
 #  msgid "Downtime duration"
@@ -14860,7 +14860,7 @@ msgstr "Erro ao remover tokens de um contato"
 #  msgid "Last notification"
 #  msgstr ""
 
-#  msgid "Last state change"
+#  msgid "Last status change"
 #  msgstr ""
 
 #  msgid "Next check"
@@ -14872,7 +14872,7 @@ msgstr "Erro ao remover tokens de um contato"
 #  msgid "Open"
 #  msgstr ""
 
-#  msgid "Percent state change"
+#  msgid "Status change percentage"
 #  msgstr ""
 
 #  msgid "Resource name"

lang/pt_PT.UTF-8/LC_MESSAGES/messages.po

@@ -14796,7 +14796,7 @@ msgstr "Erro ao remover tokens de um contato"
 #  msgid "Current notification number"
 #  msgstr ""
 
-#  msgid "Current state duration"
+#  msgid "Current status duration"
 #  msgstr ""
 
 #  msgid "Downtime duration"
@@ -14859,7 +14859,7 @@ msgstr "Erro ao remover tokens de um contato"
 #  msgid "Last notification"
 #  msgstr ""
 
-#  msgid "Last state change"
+#  msgid "Last status change"
 #  msgstr ""
 
 #  msgid "Next check"
@@ -14871,7 +14871,7 @@ msgstr "Erro ao remover tokens de um contato"
 #  msgid "Open"
 #  msgstr ""
 
-#  msgid "Percent state change"
+#  msgid "Status change duration"
 #  msgstr ""
 
 #  msgid "Resource name"

www/front_src/src/Resources/Details/index.test.tsx

@@ -28,12 +28,12 @@ import {
   labelDowntimeDuration,
   labelAcknowledgedBy,
   labelTimezone,
-  labelCurrentStateDuration,
-  labelLastStateChange,
+  labelCurrentStatusDuration,
+  labelLastStatusChange,
   labelNextCheck,
   labelCheckDuration,
   labelLatency,
-  labelPercentStateChange,
+  labelStatusChangePercentage,
   labelLastNotification,
   labelLastCheck,
   labelCurrentNotificationNumber,
@@ -108,6 +108,15 @@ jest.mock(
   () => jest.fn(),
 );
 
+jest.mock('@visx/visx', () => {
+  return {
+    ...(jest.requireActual('@visx/visx') as jest.Mocked<unknown>),
+    Responsive: {
+      ParentSize: ({ children }): JSX.Element => children({ width: 500 }),
+    },
+  };
+});
+
 const resourceServiceUuid = 'h1-s1';
 const resourceServiceId = 1;
 const resourceServiceType = 'service';
@@ -508,7 +517,8 @@ describe(Details, () => {
   it('displays resource details information', async () => {
     mockedAxios.get.mockResolvedValueOnce({ data: retrievedDetails });
 
-    const { getByText, queryByText, getAllByText } = renderDetails();
+    const { getByText, queryByText, getAllByText, findByText } =
+      renderDetails();
 
     act(() => {
       setSelectedServiceResource();
@@ -524,7 +534,10 @@ describe(Details, () => {
     expect(getByText('10')).toBeInTheDocument();
     expect(getByText('CRITICAL')).toBeInTheDocument();
     expect(getByText('Centreon')).toBeInTheDocument();
-    expect(getByText(labelFqdn)).toBeInTheDocument();
+
+    const fqdnText = await findByText(labelFqdn);
+
+    expect(fqdnText).toBeInTheDocument();
     expect(getByText('central.centreon.com')).toBeInTheDocument();
     expect(getByText(labelAlias)).toBeInTheDocument();
     expect(getByText('Central-Centreon')).toBeInTheDocument();
@@ -558,10 +571,10 @@ describe(Details, () => {
     expect(getByText(labelTimezone)).toBeInTheDocument();
     expect(getByText('Europe/Paris')).toBeInTheDocument();
 
-    expect(getByText(labelCurrentStateDuration)).toBeInTheDocument();
+    expect(getByText(labelCurrentStatusDuration)).toBeInTheDocument();
     expect(getByText('22m - 3/3 (Hard)')).toBeInTheDocument();
 
-    expect(getByText(labelLastStateChange)).toBeInTheDocument();
+    expect(getByText(labelLastStatusChange)).toBeInTheDocument();
     expect(getByText('04/18/2020 5:00 PM')).toBeInTheDocument();
 
     expect(getByText(labelLastCheck)).toBeInTheDocument();
@@ -581,7 +594,7 @@ describe(Details, () => {
 
     expect(getByText(labelCheck)).toBeInTheDocument();
 
-    expect(getByText(labelPercentStateChange)).toBeInTheDocument();
+    expect(getByText(labelStatusChangePercentage)).toBeInTheDocument();
     expect(getByText('3.5%')).toBeInTheDocument();
 
     expect(getByText(labelLastNotification)).toBeInTheDocument();
@@ -746,6 +759,7 @@ describe(Details, () => {
       ),
     );
   });
+
   it('displays retrieved timeline events and filtered by selected event types, when the Timeline tab is selected', async () => {
     mockedAxios.get.mockResolvedValueOnce({ data: retrievedDetails });
     mockedAxios.get.mockResolvedValueOnce({ data: retrievedTimeline });

www/front_src/src/Resources/Details/tabs/Details/DetailsCard/cards.tsx

@@ -6,10 +6,10 @@ import { SeverityCode } from '@centreon/ui';
 
 import ChecksIcon from '../../../../ChecksIcon';
 import {
-  labelCurrentStateDuration,
+  labelCurrentStatusDuration,
   labelMonitoringServer,
   labelTimezone,
-  labelLastStateChange,
+  labelLastStatusChange,
   labelLastCheck,
   labelNextCheck,
   labelCheckDuration,
@@ -21,7 +21,7 @@ import {
   labelGroups,
   labelCalculationType,
   labelCheck,
-  labelPercentStateChange,
+  labelStatusChangePercentage,
   labelStatusInformation,
   labelDowntimeDuration,
   labelAcknowledgement,
@@ -124,12 +124,12 @@ const getDetailCardLines = ({
     {
       line: <DetailsLine line={`${details.duration} - ${details.tries}`} />,
       shouldBeDisplayed: !isNil(details.duration),
-      title: labelCurrentStateDuration,
+      title: labelCurrentStatusDuration,
     },
     {
       line: <DetailsLine line={toDateTime(details.last_status_change)} />,
       shouldBeDisplayed: !isNil(details.last_status_change),
-      title: labelLastStateChange,
+      title: labelLastStatusChange,
     },
     {
       line: <DetailsLine line={toDateTime(details.last_check)} />,
@@ -168,7 +168,7 @@ const getDetailCardLines = ({
     {
       line: <PercentStateChangeCard details={details} />,
       shouldBeDisplayed: !isNil(details.percent_state_change),
-      title: labelPercentStateChange,
+      title: labelStatusChangePercentage,
     },
     {
       line: <DetailsLine line={toDateTime(details.last_notification)} />,

www/front_src/src/Resources/Details/tabs/Details/DetailsCard/index.tsx

@@ -1,19 +1,15 @@
 import * as React from 'react';
 
-import { useTranslation } from 'react-i18next';
+import { Typography, makeStyles } from '@material-ui/core';
 
-import { Typography, makeStyles, Tooltip } from '@material-ui/core';
-import IconCheck from '@material-ui/icons/Check';
-
-import { labelActive } from '../../../../translatedLabels';
 import Card from '../Card';
 
 const useStyles = makeStyles((theme) => ({
   active: {
     color: theme.palette.success.main,
   },
   container: {
-    height: '100%',
+    height: 65,
     overflow: 'hidden',
   },
   title: {
@@ -23,7 +19,6 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 interface Props {
-  active?: boolean;
   isCustomCard?: boolean;
   line: JSX.Element;
   title: string;
@@ -32,11 +27,9 @@ interface Props {
 const DetailsCard = ({
   title,
   line,
-  active,
   isCustomCard = false,
 }: Props): JSX.Element => {
   const classes = useStyles();
-  const { t } = useTranslation();
 
   if (isCustomCard) {
     return line;
@@ -48,11 +41,6 @@ const DetailsCard = ({
         <Typography gutterBottom color="textSecondary" variant="body1">
           {title}
         </Typography>
-        {active && (
-          <Tooltip title={t(labelActive) as string}>
-            <IconCheck className={classes.active} fontSize="small" />
-          </Tooltip>
-        )}
       </div>
       {line}
     </Card>

www/front_src/src/Resources/Details/tabs/Details/SortableCards/Content.tsx

@@ -44,7 +44,6 @@ const Content = ({
   itemRef,
   title,
   line,
-  active,
   xs,
   isCustomCard,
   width,
@@ -73,7 +72,6 @@ const Content = ({
             <MoreVertIcon fontSize="small" />
           </div>
           <DetailsCard
-            active={active}
             isCustomCard={isCustomCard}
             line={line}
             title={t(title)}

www/front_src/src/Resources/Details/tabs/Details/SortableCards/index.tsx

@@ -131,7 +131,6 @@ const SortableCards = ({ panelWidth, details }: Props): JSX.Element => {
             'shouldBeDisplayed',
             'line',
             'xs',
-            'active',
             'isCustomCard',
             'width',
             'title',