[Monitoring] Use EUITooltips instead of pivotal ui (#29295)

* Use EUITooltips

* Remove the tooltip component and replace usage with EuiTooltip directly

x-pack/plugins/monitoring/public/components/alerts/alerts.js

@@ -10,10 +10,9 @@ import { formatDateTimeLocal } from '../../../common/formatting';
 import { formatTimestampToDuration } from '../../../common';
 import { CALCULATE_DURATION_SINCE, EUI_SORT_DESCENDING } from '../../../common/constants';
 import { mapSeverity } from './map_severity';
-import { Tooltip } from 'plugins/monitoring/components/tooltip';
 import { FormattedAlert } from 'plugins/monitoring/components/alerts/formatted_alert';
 import { EuiMonitoringTable } from 'plugins/monitoring/components/table';
-import { EuiHealth, EuiIcon } from '@elastic/eui';
+import { EuiHealth, EuiIcon, EuiToolTip } from '@elastic/eui';
 import { injectI18n } from '@kbn/i18n/react';
 
 const linkToCategories = {
@@ -31,11 +30,11 @@ const getColumns = (kbnUrl, scope) => ([
       const severityIcon = mapSeverity(severity);
 
       return (
-        <Tooltip text={severityIcon.title} placement="bottom" trigger="hover">
+        <EuiToolTip content={severityIcon.title} position="bottom">
           <EuiHealth color={severityIcon.color} data-test-subj="alertIcon" aria-label={severityIcon.title}>
             { capitalize(severityIcon.value) }
           </EuiHealth>
-        </Tooltip>
+        </EuiToolTip>
       );
     }
   },

x-pack/plugins/monitoring/public/components/cluster/listing/alerts_indicator.js

@@ -5,9 +5,8 @@
  */
 
 import React from 'react';
-import { Tooltip } from 'plugins/monitoring/components/tooltip';
 import { mapSeverity } from 'plugins/monitoring/components/alerts/map_severity';
-import { EuiHealth } from '@elastic/eui';
+import { EuiHealth, EuiToolTip } from '@elastic/eui';
 import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 
 const HIGH_SEVERITY = 2000;
@@ -41,24 +40,23 @@ function AlertsIndicatorUi({ alerts, intl }) {
     })();
 
     return (
-      <Tooltip text={tooltipText} placement="bottom" trigger="hover">
+      <EuiToolTip content={tooltipText} position="bottom" trigger="hover">
         <EuiHealth color={severityIcon.color} data-test-subj="alertIcon">
           <FormattedMessage
             id="xpack.monitoring.cluster.listing.alertsInticator.alertsTooltip"
             defaultMessage="Alerts"
           />
         </EuiHealth>
-      </Tooltip>
+      </EuiToolTip>
     );
   }
 
   return (
-    <Tooltip
-      text={intl.formatMessage({
+    <EuiToolTip
+      content={intl.formatMessage({
         id: 'xpack.monitoring.cluster.listing.alertsInticator.clearStatusTooltip',
         defaultMessage: 'Cluster status is clear!' })}
-      placement="bottom"
-      trigger="hover"
+      position="bottom"
     >
       <EuiHealth color="success" data-test-subj="alertIcon">
         <FormattedMessage
@@ -66,7 +64,7 @@ function AlertsIndicatorUi({ alerts, intl }) {
           defaultMessage="Clear"
         />
       </EuiHealth>
-    </Tooltip>
+    </EuiToolTip>
   );
 }
 

x-pack/plugins/monitoring/public/components/cluster/listing/listing.js

@@ -14,13 +14,13 @@ import {
   EuiPage,
   EuiPageBody,
   EuiPageContent,
+  EuiToolTip,
   EuiCallOut,
   EuiSpacer,
   EuiIcon
 } from '@elastic/eui';
 import { toastNotifications } from 'ui/notify';
 import { EuiMonitoringTable } from 'plugins/monitoring/components/table';
-import { Tooltip } from 'plugins/monitoring/components/tooltip';
 import { AlertsIndicator } from 'plugins/monitoring/components/cluster/listing/alerts_indicator';
 import { I18nProvider, FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
@@ -49,15 +49,14 @@ const IsAlertsSupported = (props) => {
 
   const message = alertsMeta.message || clusterMeta.message;
   return (
-    <Tooltip
-      text={message}
-      placement="bottom"
-      trigger="hover"
+    <EuiToolTip
+      content={message}
+      position="bottom"
     >
       <EuiHealth color="subdued" data-test-subj="alertIcon">
         N/A
       </EuiHealth>
-    </Tooltip>
+    </EuiToolTip>
   );
 };
 

x-pack/plugins/monitoring/public/components/cluster/overview/logstash_panel.js

@@ -7,7 +7,6 @@
 import React from 'react';
 import { formatNumber } from 'plugins/monitoring/lib/format_number';
 import { ClusterItemContainer, BytesPercentageUsage } from './helpers';
-import { Tooltip } from 'plugins/monitoring/components/tooltip';
 import { LOGSTASH } from '../../../../common/constants';
 
 import {
@@ -20,6 +19,7 @@ import {
   EuiDescriptionListTitle,
   EuiDescriptionListDescription,
   EuiHorizontalRule,
+  EuiToolTip
 } from '@elastic/eui';
 import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
 
@@ -139,15 +139,14 @@ function LogstashPanelUi(props) {
                   { pipelineCount: props.pipeline_count }
                   )}
                 >
-                  <Tooltip
-                    text={props.intl.formatMessage({
+                  <EuiToolTip
+                    content={props.intl.formatMessage({
                       id: 'xpack.monitoring.cluster.overview.logstashPanel.betaFeatureTooltip',
                       defaultMessage: 'Beta Feature' })}
-                    placement="bottom"
-                    trigger="hover"
+                    position="bottom"
                   >
                     <span className="kuiIcon fa-flask betaIcon" />
-                  </Tooltip>
+                  </EuiToolTip>
                   <FormattedMessage
                     id="xpack.monitoring.cluster.overview.logstashPanel.pipelinesCountLinkLabel"
                     defaultMessage="Pipelines: {pipelineCount}"

x-pack/plugins/monitoring/public/components/elasticsearch/shard_activity/source_destination.js

@@ -5,8 +5,7 @@
  */
 
 import React from 'react';
-import { EuiIcon, EuiLink, EuiFlexGroup, EuiFlexItem, } from '@elastic/eui';
-import { Tooltip } from 'plugins/monitoring/components/tooltip';
+import { EuiIcon, EuiLink, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
 import { SourceTooltip } from './source_tooltip';
 
 export const SourceDestination = (props) => {
@@ -22,13 +21,12 @@ export const SourceDestination = (props) => {
         <EuiIcon type="arrowRight" />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <Tooltip
-          text={targetTransportAddress}
-          placement="bottom"
-          trigger="hover"
+        <EuiToolTip
+          content={targetTransportAddress}
+          position="bottom"
         >
           <EuiLink>{targetName}</EuiLink>
-        </Tooltip>
+        </EuiToolTip>
       </EuiFlexItem>
     </EuiFlexGroup>
   );

x-pack/plugins/monitoring/public/components/elasticsearch/shard_activity/source_tooltip.js

@@ -5,8 +5,7 @@
  */
 
 import React, { Fragment } from 'react';
-import { EuiLink } from '@elastic/eui';
-import { Tooltip } from 'plugins/monitoring/components/tooltip';
+import { EuiLink, EuiToolTip } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 export const SourceTooltip = ({ isCopiedFromPrimary, sourceTransportAddress, children }) => {
@@ -40,8 +39,8 @@ export const SourceTooltip = ({ isCopiedFromPrimary, sourceTransportAddress, chi
   );
 
   return (
-    <Tooltip text={tipText} placement="bottom" trigger="hover">
+    <EuiToolTip content={tipText} position="bottom">
       <EuiLink>{children}</EuiLink>
-    </Tooltip>
+    </EuiToolTip>
   );
 };

x-pack/plugins/monitoring/public/components/elasticsearch/shard_activity/total_time.js

@@ -5,14 +5,13 @@
  */
 
 import React from 'react';
-import { EuiLink } from '@elastic/eui';
-import { Tooltip } from 'plugins/monitoring/components/tooltip';
+import { EuiLink, EuiToolTip } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 export const TotalTime = ({ startTime, totalTime }) => {
   return (
-    <Tooltip
-      text={
+    <EuiToolTip
+      content={
         <FormattedMessage
           id="xpack.monitoring.elasticsearch.shardActivity.totalTimeTooltip"
           defaultMessage="Started: {startTime}"
@@ -21,10 +20,9 @@ export const TotalTime = ({ startTime, totalTime }) => {
           }}
         />
       }
-      placement="bottom"
-      trigger="hover"
+      position="bottom"
     >
       <EuiLink>{totalTime}</EuiLink>
-    </Tooltip>
+    </EuiToolTip>
   );
 };

x-pack/plugins/monitoring/public/components/tooltip/index.js

@@ -1,34 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React from 'react';
-import { Tooltip as PuiTooltip } from 'pivotal-ui/react/tooltip';
-import { OverlayTrigger as PuiOverlayTrigger } from 'pivotal-ui/react/overlay-trigger';
-
-export const Tooltip = props => {
-  const tooltip = (
-    <PuiTooltip>{ props.text }</PuiTooltip>
-  );
-
-  return (
-    <PuiOverlayTrigger
-      placement={props.placement}
-      trigger={props.trigger}
-      overlay={tooltip}
-    >
-      <span className="overlay-trigger">
-        <span className="monitoring-tooltip__trigger">
-          { props.children}
-        </span>
-      </span>
-    </PuiOverlayTrigger>
-  );
-};
-
-Tooltip.defaultProps = {
-  placement: 'top',
-  trigger: 'click'
-};