[Monitoring] Added safeguard for some EUI components (#53318) (#53774)

* merged master * addressed feedback * Addressed feedback Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
elastic · Dec 23, 2019 · 54aaa68 · 54aaa68
1 parent a6f2b31
commit 54aaa68
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 15 deletions.
diff --git a/x-pack/legacy/plugins/monitoring/public/components/alerts/alerts.js b/x-pack/legacy/plugins/monitoring/public/components/alerts/alerts.js
@@ -29,7 +29,16 @@ const getColumns = (kbnUrl, scope) => [
     field: 'status',
     sortable: true,
     render: severity => {
-      const severityIcon = mapSeverity(severity);
+      const severityIconDefaults = {
+        title: i18n.translate('xpack.monitoring.alerts.severityTitle.unknown', {
+          defaultMessage: 'Unknown',
+        }),
+        color: 'subdued',
+        value: i18n.translate('xpack.monitoring.alerts.severityValue.unknown', {
+          defaultMessage: 'N/A',
+        }),
+      };
+      const severityIcon = { ...severityIconDefaults, ...mapSeverity(severity) };
 
       return (
         <EuiToolTip content={severityIcon.title} position="bottom">

diff --git a/x-pack/legacy/plugins/monitoring/public/components/cluster/listing/listing.js b/x-pack/legacy/plugins/monitoring/public/components/cluster/listing/listing.js
@@ -45,7 +45,13 @@ const IsAlertsSupported = props => {
     return <span>{props.children}</span>;
   }
 
-  const message = alertsMeta.message || clusterMeta.message;
+  const message =
+    alertsMeta.message ||
+    clusterMeta.message ||
+    i18n.translate('xpack.monitoring.cluster.listing.unknownHealthMessage', {
+      defaultMessage: 'Unknown',
+    });
+
   return (
     <EuiToolTip content={message} position="bottom">
       <EuiHealth color="subdued" data-test-subj="alertIcon">

diff --git a/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/elasticsearch_panel.js b/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/elasticsearch_panel.js
@@ -117,14 +117,17 @@ const logLevelText = {
   fatal: i18n.translate('xpack.monitoring.cluster.overview.esPanel.fatalLogsTooltipText', {
     defaultMessage: 'The number of fatal logs',
   }),
+  unknown: i18n.translate('xpack.monitoring.cluster.overview.esPanel.unknownLogsTooltipText', {
+    defaultMessage: 'Unknown',
+  }),
 };
 
 function renderLog(log) {
   return (
     <EuiFlexGroup wrap responsive={false} gutterSize="xs">
       {log.levels.map((level, index) => (
         <EuiFlexItem grow={false} key={index}>
-          <EuiToolTip position="top" content={logLevelText[level.level]}>
+          <EuiToolTip position="top" content={logLevelText[level.level] || logLevelText.unknown}>
             <EuiBadge color={getBadgeColorFromLogLevel(level.level)}>
               {formatNumber(level.count, 'int_commas')}
             </EuiBadge>

diff --git a/x-pack/legacy/plugins/monitoring/public/components/elasticsearch/nodes/nodes.js b/x-pack/legacy/plugins/monitoring/public/components/elasticsearch/nodes/nodes.js
@@ -29,6 +29,29 @@ import _ from 'lodash';
 import { ELASTICSEARCH_SYSTEM_ID } from '../../../../common/constants';
 import { ListingCallOut } from '../../setup_mode/listing_callout';
 
+const getNodeTooltip = node => {
+  const { nodeTypeLabel, nodeTypeClass } = node;
+
+  const nodeTypeLabelContent =
+    nodeTypeLabel ||
+    i18n.translate('xpack.monitoring.elasticsearch.nodes.unknownNodeTypeLabel', {
+      defaultMessage: 'Unknown',
+    });
+  const nodeTypeClassIcon = nodeTypeClass || 'empty';
+
+  if (nodeTypeLabel) {
+    return (
+      <>
+        <EuiToolTip position="bottom" content={nodeTypeLabelContent}>
+          <EuiIcon type={nodeTypeClassIcon} />
+        </EuiToolTip>{' '}
+        &nbsp;
+      </>
+    );
+  }
+  return null;
+};
+
 const getSortHandler = type => item => _.get(item, [type, 'summary', 'lastVal']);
 const getColumns = (showCgroupMetricsElasticsearch, setupMode, clusterUuid) => {
   const cols = [];
@@ -86,10 +109,7 @@ const getColumns = (showCgroupMetricsElasticsearch, setupMode, clusterUuid) => {
         <div>
           <div className="monTableCell__name">
             <EuiText size="m">
-              <EuiToolTip position="bottom" content={node.nodeTypeLabel}>
-                {node.nodeTypeClass && <EuiIcon type={node.nodeTypeClass} />}
-              </EuiToolTip>
-              &nbsp;
+              {getNodeTooltip(node)}
               <span data-test-subj="name">{nameLink}</span>
             </EuiText>
           </div>

diff --git a/...y/plugins/monitoring/public/components/elasticsearch/shard_activity/source_destination.js b/...y/plugins/monitoring/public/components/elasticsearch/shard_activity/source_destination.js
@@ -7,9 +7,15 @@
 import React from 'react';
 import { EuiIcon, EuiLink, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
 import { SourceTooltip } from './source_tooltip';
+import { i18n } from '@kbn/i18n';
 
 export const SourceDestination = props => {
   const { sourceName, targetName, targetTransportAddress } = props;
+  const targetTransportAddressContent =
+    targetTransportAddress ||
+    i18n.translate('xpack.monitoring.elasticsearch.shardActivity.unknownTargetAddressContent', {
+      defaultMessage: 'Unknown',
+    });
   return (
     <EuiFlexGroup gutterSize="s" alignItems="center" wrap>
       <EuiFlexItem grow={false}>
@@ -19,7 +25,7 @@ export const SourceDestination = props => {
         <EuiIcon type="arrowRight" size="s" />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiToolTip content={targetTransportAddress} position="bottom">
+        <EuiToolTip content={targetTransportAddressContent} position="bottom">
           <EuiLink>{targetName}</EuiLink>
         </EuiToolTip>
       </EuiFlexItem>

diff --git a/...y/plugins/monitoring/public/components/elasticsearch/shard_allocation/components/shard.js b/...y/plugins/monitoring/public/components/elasticsearch/shard_allocation/components/shard.js
@@ -95,14 +95,14 @@ export class Shard extends React.Component {
     const classification = classes + ' ' + shard.shard;
 
     let shardUi = <EuiBadge color={color}>{shard.shard}</EuiBadge>;
-
+    const tooltipContent =
+      shard.tooltip_message ||
+      i18n.translate('xpack.monitoring.elasticsearch.shardAllocation.shardDisplayName', {
+        defaultMessage: 'Shard',
+      });
     if (this.state.tooltipVisible) {
       shardUi = (
-        <EuiToolTip
-          content={this.props.shard.tooltip_message}
-          position="bottom"
-          data-test-subj="shardTooltip"
-        >
+        <EuiToolTip content={tooltipContent} position="bottom" data-test-subj="shardTooltip">
           <p>{shardUi}</p>
         </EuiToolTip>
       );
@@ -114,7 +114,7 @@ export class Shard extends React.Component {
         onMouseEnter={this.toggle}
         onMouseLeave={this.toggle}
         className={classes}
-        data-shard-tooltip={this.props.shard.tooltip_message}
+        data-shard-tooltip={tooltipContent}
         data-shard-classification={classification}
         data-test-subj="shardIcon"
       >

diff --git a/x-pack/legacy/plugins/monitoring/public/components/table/eui_table_ssp.js b/x-pack/legacy/plugins/monitoring/public/components/table/eui_table_ssp.js
@@ -26,6 +26,11 @@ export function EuiMonitoringSSPTable({
     index: pagination.pageIndex,
     size: pagination.pageSize,
   });
+
+  if (!pagination.totalItemCount) {
+    pagination.totalItemCount = (items && items.length) || 0;
+  }
+
   const [sort, setSort] = React.useState(props.sorting);
 
   if (search.box && !search.box['data-test-subj']) {