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

Refs: MON-4590

package.json

@@ -44,7 +44,8 @@
     "redux": "^4.0.0",
     "redux-form": "^7.4.2",
     "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "yup": "^0.27.0"
   },
   "jest": {
     "testResultsProcessor": "jest-junit",

www/front_src/src/App.js

@@ -76,7 +76,7 @@ class App extends Component {
         .get()
         .then(() => this.keepAlive())
         .catch(error => {
-          if (error.response.status == 401) {
+          if (error.response && error.response.status === 401) {
             // redirect to login page
             window.location.href = config.urlBase + 'index.php?disconnect=1'
           } else {

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

@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import * as yup from 'yup';
 import numeral from "numeral";
 import {Link} from 'react-router-dom';
 import PropTypes from 'prop-types';
@@ -8,6 +9,26 @@ import axios from "../../axios";
 
 import { connect } from "react-redux";
 
+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(
@@ -33,12 +54,12 @@ class HostMenu extends Component {
 
   // fetch api to get host data
   getData = () => {
-    this.hostsService.get().then(({data}) => {
-      this.setState({
-        data
+    this.hostsService.get().then(({ 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

@@ -82,7 +82,7 @@ class PollerMenu extends Component {
         data
       });
     }).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

@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import * as yup from 'yup';
 import PropTypes from 'prop-types';
 import numeral from "numeral";
 import { Link } from "react-router-dom";
@@ -8,6 +9,30 @@ import axios from "../../axios";
 
 import { connect } from "react-redux";
 
+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(
@@ -33,12 +58,12 @@ class ServiceStatusMenu extends Component {
 
   // fetch api to get service data
   getData = () => {
-    this.servicesStatusService.get().then(({data}) => {
-      this.setState({
-        data
+    this.servicesStatusService.get().then(({ 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

@@ -37,7 +37,7 @@ class UserMenu extends Component {
         data
       }, this.refreshData);
     }).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

@@ -20,7 +20,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';
       }