[Monitoring] Convert info button to EUI (#20828) (#21734)

* Convert info button and the rest of the page to EUI

* Update other overview pages

* Use Page directive

* Give the tooltip some more space

* Add page body to a couple places

* PR feedback

x-pack/plugins/monitoring/public/components/beats/beat/beat.js

@@ -7,6 +7,7 @@
 import React, { Fragment } from 'react';
 import { MonitoringTimeseriesContainer } from '../../chart';
 import { formatMetric } from '../../../lib/format_number';
+import { EuiFlexGrid, EuiFlexItem, EuiSpacer, EuiPage, EuiPageBody } from '@elastic/eui';
 
 function renderTransportAddress(summary) {
   let output = null;
@@ -21,6 +22,16 @@ function renderTransportAddress(summary) {
 }
 
 export function Beat({ summary, metrics, ...props }) {
+  const metricsToShow = [
+    metrics.beat_event_rates,
+    metrics.beat_fail_rates,
+    metrics.beat_throughput_rates,
+    metrics.beat_output_errors,
+    metrics.beat_memory,
+    metrics.beat_cpu_utilization,
+    metrics.beat_os_load,
+  ];
+
   return (
     <div>
       <div role="status">
@@ -91,52 +102,21 @@ export function Beat({ summary, metrics, ...props }) {
         </div>
       </div>
 
-      <div className="page-row">
-        <div className="row">
-          <div className="col-md-6">
-            <MonitoringTimeseriesContainer
-              series={metrics.beat_event_rates}
-              {...props}
-            />
-          </div>
-          <div className="col-md-6">
-            <MonitoringTimeseriesContainer
-              series={metrics.beat_fail_rates}
-              {...props}
-            />
-          </div>
-          <div className="col-md-6">
-            <MonitoringTimeseriesContainer
-              series={metrics.beat_throughput_rates}
-              {...props}
-            />
-          </div>
-          <div className="col-md-6">
-            <MonitoringTimeseriesContainer
-              series={metrics.beat_output_errors}
-              {...props}
-            />
-          </div>
-          <div className="col-md-6">
-            <MonitoringTimeseriesContainer
-              series={metrics.beat_memory}
-              {...props}
-            />
-          </div>
-          <div className="col-md-6">
-            <MonitoringTimeseriesContainer
-              series={metrics.beat_cpu_utilization}
-              {...props}
-            />
-          </div>
-          <div className="col-md-6">
-            <MonitoringTimeseriesContainer
-              series={metrics.beat_os_load}
-              {...props}
-            />
-          </div>
-        </div>
-      </div>
+      <EuiPage style={{ backgroundColor: 'white' }}>
+        <EuiPageBody>
+          <EuiFlexGrid columns={2} gutterSize="none">
+            {metricsToShow.map((metric, index) => (
+              <EuiFlexItem key={index} style={{ width: '50%' }}>
+                <MonitoringTimeseriesContainer
+                  series={metric}
+                  {...props}
+                />
+                <EuiSpacer size="m"/>
+              </EuiFlexItem>
+            ))}
+          </EuiFlexGrid>
+        </EuiPageBody>
+      </EuiPage>
     </div>
   );
 }

x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js

@@ -5,14 +5,15 @@
  */
 
 import React from 'react';
-import { Tooltip } from 'pivotal-ui/react/tooltip';
-import { OverlayTrigger } from 'pivotal-ui/react/overlay-trigger';
-import { KuiInfoButton } from '@kbn/ui-framework/components';
 import { getTitle } from './get_title';
 import { getUnits } from './get_units';
 import { MonitoringTimeseries } from './monitoring_timeseries';
 import { InfoTooltip } from './info_tooltip';
 
+import {
+  EuiIconTip, EuiFlexGroup, EuiFlexItem, EuiTitle
+} from '@elastic/eui';
+
 export function MonitoringTimeseriesContainer({ series, onBrush }) {
   if (series === undefined) {
     return null; // still loading
@@ -21,24 +22,34 @@ export function MonitoringTimeseriesContainer({ series, onBrush }) {
   const units = getUnits(series);
 
   return (
-    <div className="monitoring-chart__container">
-      <h2 className="euiTitle">
-        { getTitle(series) }{ units ? ` (${units})` : '' }
-        <OverlayTrigger
-          placement="left"
-          trigger="click"
-          overlay={<Tooltip><InfoTooltip series={series}/></Tooltip>}
-        >
-          <span className="monitoring-chart-tooltip__trigger overlay-trigger">
-            <KuiInfoButton />
-          </span>
-        </OverlayTrigger>
-      </h2>
-      <MonitoringTimeseries
-        series={series}
-        onBrush={onBrush}
-      />
-    </div>
+    <EuiFlexGroup direction="column" gutterSize="s">
+      <EuiFlexItem>
+        <EuiFlexGroup justifyContent="spaceBetween" alignItems="center" style={{ flexGrow: 0 }}>
+          <EuiFlexItem>
+            <EuiTitle>
+              <h2>
+                { getTitle(series) }{ units ? ` (${units})` : '' }
+              </h2>
+            </EuiTitle>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiIconTip
+              anchorClassName="eui-textRight eui-alignMiddle monitoring-chart-tooltip__trigger"
+              className="monitoring-chart-tooltip__wrapper"
+              type="iInCircle"
+              position="right"
+              content={<InfoTooltip series={series}/>}
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+      <EuiFlexItem style={{ minHeight: '200px' }}>
+        <MonitoringTimeseries
+          series={series}
+          onBrush={onBrush}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 }
 

x-pack/plugins/monitoring/public/components/elasticsearch/overview/overview.js

@@ -4,10 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Fragment } from 'react';
+import React from 'react';
 import { ClusterStatus } from '../cluster_status';
 import { ShardActivity } from '../shard_activity';
 import { MonitoringTimeseriesContainer } from '../../chart';
+import { EuiPage, EuiFlexGrid, EuiFlexItem, EuiSpacer, EuiPageBody } from '@elastic/eui';
 
 export function ElasticsearchOverview({
   clusterStatus,
@@ -15,42 +16,32 @@ export function ElasticsearchOverview({
   shardActivity,
   ...props
 }) {
+  const metricsToShow = [
+    metrics.cluster_search_request_rate,
+    metrics.cluster_query_latency,
+    metrics.cluster_index_request_rate,
+    metrics.cluster_index_latency,
+  ];
+
   return (
-    <Fragment>
-      <ClusterStatus stats={clusterStatus} />
+    <EuiPage style={{ backgroundColor: 'white' }}>
+      <EuiPageBody>
+        <ClusterStatus stats={clusterStatus} />
 
-      <div className="page-row">
-        <div className="row">
-          <div className="col-md-6">
-            <MonitoringTimeseriesContainer
-              series={metrics.cluster_search_request_rate}
-              {...props}
-            />
-          </div>
-          <div className="col-md-6">
-            <MonitoringTimeseriesContainer
-              series={metrics.cluster_query_latency}
-              {...props}
-            />
-          </div>
-          <div className="col-md-6">
-            <MonitoringTimeseriesContainer
-              series={metrics.cluster_index_request_rate}
-              {...props}
-            />
-          </div>
-          <div className="col-md-6">
-            <MonitoringTimeseriesContainer
-              series={metrics.cluster_index_latency}
-              {...props}
-            />
-          </div>
-        </div>
-      </div>
+        <EuiFlexGrid columns={2} gutterSize="none">
+          {metricsToShow.map((metric, index) => (
+            <EuiFlexItem key={index} style={{ width: '50%' }}>
+              <MonitoringTimeseriesContainer
+                series={metric}
+                {...props}
+              />
+              <EuiSpacer size="m"/>
+            </EuiFlexItem>
+          ))}
+        </EuiFlexGrid>
 
-      <div className="page-row">
         <ShardActivity data={shardActivity} {...props} />
-      </div>
-    </Fragment>
+      </EuiPageBody>
+    </EuiPage>
   );
 }

x-pack/plugins/monitoring/public/directives/chart/index.js

@@ -4,20 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { Fragment } from 'react';
 import { render } from 'react-dom';
 import moment from 'moment';
 import { uiModules } from 'ui/modules';
-import {
-  getTitle,
-  getUnits,
-  MonitoringTimeseries,
-  InfoTooltip,
-} from 'plugins/monitoring/components/chart';
-import { Tooltip } from 'pivotal-ui/react/tooltip';
-import { OverlayTrigger } from 'pivotal-ui/react/overlay-trigger';
-import { KuiInfoButton } from '@kbn/ui-framework/components';
 import { timefilter } from 'ui/timefilter';
+import { MonitoringTimeseriesContainer } from '../../components/chart/monitoring_timeseries_container';
+import { EuiSpacer } from '@elastic/eui';
 
 const uiModule = uiModules.get('plugins/monitoring/directives', []);
 uiModule.directive('monitoringChart', () => {
@@ -27,10 +20,6 @@ uiModule.directive('monitoringChart', () => {
       series: '='
     },
     link(scope, $elem) {
-
-      const series = scope.series;
-      const units = getUnits(series);
-
       function onBrush({ xaxis }) {
         timefilter.setTime({
           from: moment(xaxis.from),
@@ -41,28 +30,13 @@ uiModule.directive('monitoringChart', () => {
 
       scope.$watch('series', series => {
         render(
-          <div className="monitoring-chart__container">
-            <h2 className="euiTitle">
-              { getTitle(series) }{ units ? ` (${units})` : '' }
-              <OverlayTrigger
-                placement="left"
-                trigger="click"
-                overlay={
-                  <Tooltip>
-                    <InfoTooltip series={series}/>
-                  </Tooltip>
-                }
-              >
-                <span className="monitoring-chart-tooltip__trigger overlay-trigger">
-                  <KuiInfoButton />
-                </span>
-              </OverlayTrigger>
-            </h2>
-            <MonitoringTimeseries
+          <Fragment>
+            <MonitoringTimeseriesContainer
               series={series}
               onBrush={onBrush}
             />
-          </div>,
+            <EuiSpacer size="m"/>
+          </Fragment>,
           $elem[0]
         );
       });

x-pack/plugins/monitoring/public/less/directives/chart.less

@@ -6,12 +6,11 @@
   margin-bottom: 15px;
 }
 
-.monitoring-chart-tooltip {
-  width: 300px;
+.monitoring-chart-tooltip__wrapper {
+  max-width: 350px;
 }
 
 .monitoring-chart-tooltip__trigger {
-  float: right;
   position: relative;
   top: 3px;
   right: 15px;
@@ -28,4 +27,5 @@
 
 .monitoring-chart-tooltip__label {
   font-weight: bold;
+  min-width: 100px;
 }