fix(ui): check format of top counter's endpoints return data (#8187)

Refs: MON-4590

package.json

@@ -89,7 +89,8 @@
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
     "systemjs": "^6.1.3",
-    "systemjs-plugin-css": "^0.1.37"
+    "systemjs-plugin-css": "^0.1.37",
+    "yup": "^0.27.0"
   },
   "jest": {
     "testResultsProcessor": "jest-junit",

www/front_src/src/App.js

@@ -77,8 +77,8 @@ class App extends Component {
       axios('internal.php?object=centreon_keepalive&action=keepAlive')
         .get()
         .then(() => this.keepAlive())
-        .catch((error) => {
-          if (error.response.status === 401) {
+        .catch(error => {
+          if (error.response && error.response.status === 401) {
             // redirect to login page
             window.location.href = 'index.php?disconnect=1';
           } else {

www/front_src/src/components/hostMenu/index.js

@@ -10,7 +10,8 @@
 
 import React, { Component } from 'react';
 import classnames from 'classnames';
-import numeral from 'numeral';
+import * as yup from 'yup';
+import numeral from "numeral";
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { Translate } from 'react-redux-i18n';
@@ -19,6 +20,26 @@ import axios from '../../axios';
 
 import styles from '../header/header.scss';
 
+const numberFormat = yup
+  .number()
+  .required()
+  .integer();
+
+const statusSchema = yup.object().shape({
+  down: yup.object().shape({
+    total: numberFormat,
+    unhandled: numberFormat,
+  }),
+  unreachable: yup.object().shape({
+    total: numberFormat,
+    unhandled: numberFormat,
+  }),
+  ok: numberFormat,
+  pending: numberFormat,
+  total: numberFormat,
+  refreshTime: numberFormat,
+});
+
 class HostMenu extends Component {
   hostsService = axios(
     'internal.php?object=centreon_topcounter&action=hosts_status',
@@ -46,12 +67,12 @@ class HostMenu extends Component {
     this.hostsService
       .get()
       .then(({ data }) => {
-        this.setState({
-          data,
+        statusSchema.validate(data).then(() => {
+          this.setState({ data });
         });
       })
       .catch((error) => {
-        if (error.response.status === 401) {
+        if (error.response && error.response.status === 401) {
           this.setState({
             data: null,
           });

www/front_src/src/components/pollerMenu/index.js

@@ -115,7 +115,7 @@ class PollerMenu extends Component {
         });
       })
       .catch((error) => {
-        if (error.response.status === 401) {
+        if (error.response && error.response.status === 401) {
           this.setState({
             data: null,
           });

www/front_src/src/components/serviceStatusMenu/index.js

@@ -10,6 +10,7 @@
 
 import React, { Component } from 'react';
 import classnames from 'classnames';
+import * as yup from 'yup';
 import PropTypes from 'prop-types';
 import numeral from 'numeral';
 import { Link } from 'react-router-dom';
@@ -19,6 +20,30 @@ import axios from '../../axios';
 
 import styles from '../header/header.scss';
 
+const numberFormat = yup
+  .number()
+  .required()
+  .integer();
+
+const statusSchema = yup.object().shape({
+  critical: yup.object().shape({
+    total: numberFormat,
+    unhandled: numberFormat,
+  }),
+  warning: yup.object().shape({
+    total: numberFormat,
+    unhandled: numberFormat,
+  }),
+  unknown: yup.object().shape({
+    total: numberFormat,
+    unhandled: numberFormat,
+  }),
+  ok: numberFormat,
+  pending: numberFormat,
+  total: numberFormat,
+  refreshTime: numberFormat,
+});
+
 class ServiceStatusMenu extends Component {
   servicesStatusService = axios(
     'internal.php?object=centreon_topcounter&action=servicesStatus',
@@ -46,12 +71,12 @@ class ServiceStatusMenu extends Component {
     this.servicesStatusService
       .get()
       .then(({ data }) => {
-        this.setState({
-          data,
+        statusSchema.validate(data).then(() => {
+          this.setState({ data });
         });
       })
       .catch((error) => {
-        if (error.response.status === 401) {
+        if (error.response && error.response.status === 401) {
           this.setState({
             data: null,
           });

www/front_src/src/components/userMenu/index.js

@@ -52,7 +52,7 @@ class UserMenu extends Component {
         );
       })
       .catch((error) => {
-        if (error.response.status === 401) {
+        if (error.response && error.response.status === 401) {
           this.setState({
             data: null,
           });

www/front_src/src/translations/index.js

@@ -27,7 +27,7 @@ export default function setTranslations(store, callback) {
       callback();
     })
     .catch((error) => {
-      if (error.response.status === 401) {
+      if (error.response && error.response.status === 401) {
         // redirect to login page
         window.location.href = 'index.php?disconnect=1';
       }