From ea6f802064687389b82d360b5f255b9aba67e5f5 Mon Sep 17 00:00:00 2001
From: Chris Roberson <chrisronline@gmail.com>
Date: Mon, 9 Jul 2018 15:16:40 -0400
Subject: [PATCH 01/16] Add screen reader only text for monitoring charts

---
 .../public/components/chart/monitoring_timeseries_container.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js b/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js
index d7c9d254a4c8fa..4343cc697b4610 100644
--- a/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js
+++ b/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js
@@ -22,7 +22,8 @@ export function MonitoringTimeseriesContainer({ series, onBrush }) {
 
   return (
     <div className="monitoring-chart__container">
-      <h2 className="euiTitle">
+      <h2 className="euiTitle" tabIndex="0">
+        <span className="kuiScreenReaderOnly">This chart is not accessible yet</span>
         { getTitle(series) }{ units ? ` (${units})` : '' }
         <OverlayTrigger
           placement="left"

From 1bf8fdb7cce6783c5769b23c57b2168ffdd20adf Mon Sep 17 00:00:00 2001
From: Chris Roberson <chrisronline@gmail.com>
Date: Mon, 9 Jul 2018 15:22:37 -0400
Subject: [PATCH 02/16] Add aria label for completed recoveries

---
 .../components/elasticsearch/shard_activity/shard_activity.js    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/shard_activity/shard_activity.js b/x-pack/plugins/monitoring/public/components/elasticsearch/shard_activity/shard_activity.js
index e08237af5c85f9..9d3d1ac47ce37d 100644
--- a/x-pack/plugins/monitoring/public/components/elasticsearch/shard_activity/shard_activity.js
+++ b/x-pack/plugins/monitoring/public/components/elasticsearch/shard_activity/shard_activity.js
@@ -56,6 +56,7 @@ const ToggleCompletedSwitch = ({ toggleHistory, showHistory }) => (
   <KuiToolBarSection>
     <KuiToolBarText>
       <EuiSwitch
+        aria-label="Completed recoveries"
         label="Completed recoveries"
         onChange={toggleHistory}
         checked={showHistory}

From 08b2247c3004bef08d0fe9f0c4f94f028fc4b43a Mon Sep 17 00:00:00 2001
From: Chris Roberson <chrisronline@gmail.com>
Date: Mon, 9 Jul 2018 16:45:27 -0400
Subject: [PATCH 03/16] Ensure we have aria label coverage for monitoring chart
 tooltips

---
 .../public/components/chart/info_tooltip.js   |  5 +----
 .../chart/monitoring_timeseries_container.js  | 20 +++++++++++++++----
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/x-pack/plugins/monitoring/public/components/chart/info_tooltip.js b/x-pack/plugins/monitoring/public/components/chart/info_tooltip.js
index 1e964daf12a7f4..6eac1fc79fa6bc 100644
--- a/x-pack/plugins/monitoring/public/components/chart/info_tooltip.js
+++ b/x-pack/plugins/monitoring/public/components/chart/info_tooltip.js
@@ -5,11 +5,8 @@
  */
 
 import React from 'react';
-import { first, get } from 'lodash';
 
-export function InfoTooltip({ series }) {
-
-  const bucketSize = get(first(series), 'bucket_size'); // bucket size will be the same for all metrics in all series
+export function InfoTooltip({ series, bucketSize }) {
   const tableRows = series.map((item, index) => {
     return (
       <tr
diff --git a/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js b/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js
index 4343cc697b4610..f087967fca27e6 100644
--- a/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js
+++ b/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js
@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { Fragment } from 'react';
+import { first, get } from 'lodash';
 import { Tooltip } from 'pivotal-ui/react/tooltip';
 import { OverlayTrigger } from 'pivotal-ui/react/overlay-trigger';
 import { KuiInfoButton } from '@kbn/ui-framework/components';
@@ -18,20 +19,31 @@ export function MonitoringTimeseriesContainer({ series, onBrush }) {
     return null; // still loading
   }
 
+  const title = getTitle(series);
+  const titleForAriaIds = title.replace(/\s+/, '--');
   const units = getUnits(series);
+  const bucketSize = get(first(series), 'bucket_size'); // bucket size will be the same for all metrics in all series
+
+  const seriesScreenReaderTextList = [`Interval: ${bucketSize}`];
+  seriesScreenReaderTextList.push(...series.map(item => `${item.metric.label}: ${item.metric.description}`));
 
   return (
     <div className="monitoring-chart__container">
       <h2 className="euiTitle" tabIndex="0">
         <span className="kuiScreenReaderOnly">This chart is not accessible yet</span>
-        { getTitle(series) }{ units ? ` (${units})` : '' }
+        { title }{ units ? ` (${units})` : '' }
         <OverlayTrigger
           placement="left"
           trigger="click"
-          overlay={<Tooltip><InfoTooltip series={series}/></Tooltip>}
+          overlay={<Tooltip><InfoTooltip series={series} bucketSize={bucketSize}/></Tooltip>}
         >
           <span className="monitoring-chart-tooltip__trigger overlay-trigger">
-            <KuiInfoButton />
+            <Fragment>
+              <KuiInfoButton aria-labelledby={`monitoringChart${titleForAriaIds}`} />
+              <span id={`monitoringChart${titleForAriaIds}`} className="kuiScreenReaderOnly">
+                {seriesScreenReaderTextList.join('.')}
+              </span>
+            </Fragment>
           </span>
         </OverlayTrigger>
       </h2>

From deb0df8823c3d0a472f908bc10f1f2276c0f85c8 Mon Sep 17 00:00:00 2001
From: Chris Roberson <chrisronline@gmail.com>
Date: Tue, 10 Jul 2018 09:48:05 -0400
Subject: [PATCH 04/16] Ensure table rows are tabbable and include the number
 of results at the top

---
 .../public/directives/alerts/index.js         | 35 +++++++++++--------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/x-pack/plugins/monitoring/public/directives/alerts/index.js b/x-pack/plugins/monitoring/public/directives/alerts/index.js
index d9666edc7e1a90..d41a1c258e118b 100644
--- a/x-pack/plugins/monitoring/public/directives/alerts/index.js
+++ b/x-pack/plugins/monitoring/public/directives/alerts/index.js
@@ -5,7 +5,7 @@
  */
 
 import { capitalize } from 'lodash';
-import React from 'react';
+import React, { Fragment } from 'react';
 import { render } from 'react-dom';
 import { EuiIcon, EuiHealth } from '@elastic/eui';
 import { uiModules } from 'ui/modules';
@@ -54,17 +54,17 @@ const alertRowFactory = (scope, kbnUrl) => {
 
     return (
       <KuiTableRow>
-        <KuiTableRowCell>
+        <KuiTableRowCell tabIndex="0">
           <Tooltip text={severityIcon.title} placement="bottom" trigger="hover">
             <EuiHealth color={severityIcon.color} data-test-subj="alertIcon" aria-label={severityIcon.title}>
               { capitalize(severityIcon.value) }
             </EuiHealth>
           </Tooltip>
         </KuiTableRowCell>
-        <KuiTableRowCell>
+        <KuiTableRowCell tabIndex="0">
           { resolution.icon } { resolution.text }
         </KuiTableRowCell>
-        <KuiTableRowCell>
+        <KuiTableRowCell tabIndex="0">
           <FormattedMessage
             prefix={props.prefix}
             suffix={props.suffix}
@@ -73,13 +73,13 @@ const alertRowFactory = (scope, kbnUrl) => {
             changeUrl={changeUrl}
           />
         </KuiTableRowCell>
-        <KuiTableRowCell>
+        <KuiTableRowCell tabIndex="0">
           { linkToCategories[props.metadata.link] ? linkToCategories[props.metadata.link] : 'General' }
         </KuiTableRowCell>
-        <KuiTableRowCell>
+        <KuiTableRowCell tabIndex="0">
           { formatDateTimeLocal(props.update_timestamp) }
         </KuiTableRowCell>
-        <KuiTableRowCell>
+        <KuiTableRowCell tabIndex="0">
           { formatTimestampToDuration(props.timestamp, CALCULATE_DURATION_SINCE) } ago
         </KuiTableRowCell>
       </KuiTableRow>
@@ -96,14 +96,19 @@ uiModule.directive('monitoringClusterAlertsListing', kbnUrl => {
 
       scope.$watch('alerts', (alerts = []) => {
         const alertsTable = (
-          <MonitoringTable
-            className="alertsTable"
-            rows={alerts}
-            placeholder="Filter Alerts..."
-            filterFields={filterFields}
-            columns={columns}
-            rowComponent={alertRowFactory(scope, kbnUrl)}
-          />
+          <Fragment>
+            <p className="kuiText kuiVerticalRhythm" tabIndex="0">Showing {alerts.length} alert(s)</p>
+            <div className="kuiVerticalRhythm">
+              <MonitoringTable
+                className="alertsTable"
+                rows={alerts}
+                placeholder="Filter Alerts..."
+                filterFields={filterFields}
+                columns={columns}
+                rowComponent={alertRowFactory(scope, kbnUrl)}
+              />
+            </div>
+          </Fragment>
         );
         render(alertsTable, $el[0]);
       });

From a4bcd320b638e331be60ce19b00c9363282366c3 Mon Sep 17 00:00:00 2001
From: Chris Roberson <chrisronline@gmail.com>
Date: Tue, 10 Jul 2018 15:37:22 -0400
Subject: [PATCH 05/16] Use EuiScreenReaderOnly

---
 .../components/chart/monitoring_timeseries_container.js     | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js b/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js
index f087967fca27e6..298b54103f2f5b 100644
--- a/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js
+++ b/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js
@@ -14,6 +14,10 @@ import { getUnits } from './get_units';
 import { MonitoringTimeseries } from './monitoring_timeseries';
 import { InfoTooltip } from './info_tooltip';
 
+import {
+  EuiScreenReaderOnly
+} from '@elastic/eui';
+
 export function MonitoringTimeseriesContainer({ series, onBrush }) {
   if (series === undefined) {
     return null; // still loading
@@ -30,7 +34,7 @@ export function MonitoringTimeseriesContainer({ series, onBrush }) {
   return (
     <div className="monitoring-chart__container">
       <h2 className="euiTitle" tabIndex="0">
-        <span className="kuiScreenReaderOnly">This chart is not accessible yet</span>
+        <EuiScreenReaderOnly><span>This chart is not accessible yet</span></EuiScreenReaderOnly>
         { title }{ units ? ` (${units})` : '' }
         <OverlayTrigger
           placement="left"

From 3f86b94112b1949731a5a867e645102a7d759004 Mon Sep 17 00:00:00 2001
From: Chris Roberson <chrisronline@gmail.com>
Date: Wed, 11 Jul 2018 09:55:58 -0400
Subject: [PATCH 06/16] Updated copy

---
 .../public/components/chart/monitoring_timeseries_container.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js b/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js
index 298b54103f2f5b..77be7828d83fb3 100644
--- a/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js
+++ b/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js
@@ -34,7 +34,7 @@ export function MonitoringTimeseriesContainer({ series, onBrush }) {
   return (
     <div className="monitoring-chart__container">
       <h2 className="euiTitle" tabIndex="0">
-        <EuiScreenReaderOnly><span>This chart is not accessible yet</span></EuiScreenReaderOnly>
+        <EuiScreenReaderOnly><span>This chart is not screen reader accessible</span></EuiScreenReaderOnly>
         { title }{ units ? ` (${units})` : '' }
         <OverlayTrigger
           placement="left"

From c67a7b304d74a32db7a9e1a60bd61170c4344df5 Mon Sep 17 00:00:00 2001
From: Chris Roberson <chrisronline@gmail.com>
Date: Wed, 11 Jul 2018 11:08:37 -0400
Subject: [PATCH 07/16] Use EUI

---
 x-pack/plugins/monitoring/public/directives/alerts/index.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/monitoring/public/directives/alerts/index.js b/x-pack/plugins/monitoring/public/directives/alerts/index.js
index d41a1c258e118b..b6b7d17a577041 100644
--- a/x-pack/plugins/monitoring/public/directives/alerts/index.js
+++ b/x-pack/plugins/monitoring/public/directives/alerts/index.js
@@ -7,7 +7,7 @@
 import { capitalize } from 'lodash';
 import React, { Fragment } from 'react';
 import { render } from 'react-dom';
-import { EuiIcon, EuiHealth } from '@elastic/eui';
+import { EuiIcon, EuiHealth, EuiText, EuiSpacer } from '@elastic/eui';
 import { uiModules } from 'ui/modules';
 import { KuiTableRowCell, KuiTableRow } from '@kbn/ui-framework/components';
 import { MonitoringTable } from 'plugins/monitoring/components/table';
@@ -97,7 +97,8 @@ uiModule.directive('monitoringClusterAlertsListing', kbnUrl => {
       scope.$watch('alerts', (alerts = []) => {
         const alertsTable = (
           <Fragment>
-            <p className="kuiText kuiVerticalRhythm" tabIndex="0">Showing {alerts.length} alert(s)</p>
+            <EuiText><p tabIndex="0">Showing {alerts.length} alert(s)</p></EuiText>
+            <EuiSpacer size="s"/>
             <div className="kuiVerticalRhythm">
               <MonitoringTable
                 className="alertsTable"

From 62f8683565e1ef1883f054881f479e91f636dbed Mon Sep 17 00:00:00 2001
From: Chris Roberson <chrisronline@gmail.com>
Date: Wed, 11 Jul 2018 13:09:12 -0400
Subject: [PATCH 08/16] Remove kui usage

---
 .../components/chart/monitoring_timeseries_container.js   | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js b/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js
index 77be7828d83fb3..23394ab84b0d9c 100644
--- a/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js
+++ b/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js
@@ -44,9 +44,11 @@ export function MonitoringTimeseriesContainer({ series, onBrush }) {
           <span className="monitoring-chart-tooltip__trigger overlay-trigger">
             <Fragment>
               <KuiInfoButton aria-labelledby={`monitoringChart${titleForAriaIds}`} />
-              <span id={`monitoringChart${titleForAriaIds}`} className="kuiScreenReaderOnly">
-                {seriesScreenReaderTextList.join('.')}
-              </span>
+              <EuiScreenReaderOnly>
+                <span id={`monitoringChart${titleForAriaIds}`}>
+                  {seriesScreenReaderTextList.join('.')}
+                </span>
+              </EuiScreenReaderOnly>
             </Fragment>
           </span>
         </OverlayTrigger>

From ca1b7af8b8a395d1ded8371c7606a07aadb6d1b5 Mon Sep 17 00:00:00 2001
From: Chris Roberson <chrisronline@gmail.com>
Date: Wed, 11 Jul 2018 13:31:01 -0400
Subject: [PATCH 09/16] Use an id instead of aria-label

---
 .../components/elasticsearch/shard_activity/shard_activity.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/shard_activity/shard_activity.js b/x-pack/plugins/monitoring/public/components/elasticsearch/shard_activity/shard_activity.js
index 9d3d1ac47ce37d..eec1e8ec495427 100644
--- a/x-pack/plugins/monitoring/public/components/elasticsearch/shard_activity/shard_activity.js
+++ b/x-pack/plugins/monitoring/public/components/elasticsearch/shard_activity/shard_activity.js
@@ -56,7 +56,7 @@ const ToggleCompletedSwitch = ({ toggleHistory, showHistory }) => (
   <KuiToolBarSection>
     <KuiToolBarText>
       <EuiSwitch
-        aria-label="Completed recoveries"
+        id="monitoring_completed_recoveries"
         label="Completed recoveries"
         onChange={toggleHistory}
         checked={showHistory}

From d622eb7eb454327036397794ad51fafcdd0ce41a Mon Sep 17 00:00:00 2001
From: Chris Roberson <chrisronline@gmail.com>
Date: Wed, 11 Jul 2018 14:11:38 -0400
Subject: [PATCH 10/16] Show results in the table footer

---
 .../public/components/table/footer.js         | 28 ++++++++++++++-----
 .../public/components/table/table.js          |  8 +++---
 .../public/directives/alerts/index.js         | 26 +++++++----------
 3 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/x-pack/plugins/monitoring/public/components/table/footer.js b/x-pack/plugins/monitoring/public/components/table/footer.js
index 19584c1bc6b12c..3ff17f08cd9daa 100644
--- a/x-pack/plugins/monitoring/public/components/table/footer.js
+++ b/x-pack/plugins/monitoring/public/components/table/footer.js
@@ -11,16 +11,30 @@ import {
   KuiToolBarText
 } from '@kbn/ui-framework/components';
 
-export function MonitoringTableFooter({ pageIndexFirstRow, pageIndexLastRow, rowsFiltered, paginationControls }) {
+export function MonitoringTableFooter({
+  pageIndexFirstRow,
+  pageIndexLastRow,
+  rowsFiltered,
+  paginationControls,
+  rows,
+  showPaginationControls
+}) {
+  const paginationSection = showPaginationControls ? (
+    <KuiToolBarFooterSection>
+      <KuiToolBarText>
+        { pageIndexFirstRow } &ndash; { pageIndexLastRow } of { rowsFiltered }
+      </KuiToolBarText>
+      { paginationControls }
+    </KuiToolBarFooterSection>
+  ) : null;
+
   return (
     <KuiToolBarFooter>
-      <KuiToolBarFooterSection>
-        <KuiToolBarText>
-          { pageIndexFirstRow } &ndash; { pageIndexLastRow } of { rowsFiltered }
-        </KuiToolBarText>
+      <p tabIndex="0">
+        Showing {rows.length} {rows.length === 1 ? 'item' : 'items'}
+      </p>
 
-        { paginationControls }
-      </KuiToolBarFooterSection>
+      { paginationSection }
     </KuiToolBarFooter>
   );
 }
diff --git a/x-pack/plugins/monitoring/public/components/table/table.js b/x-pack/plugins/monitoring/public/components/table/table.js
index f49615da60c9eb..56afda4ae4c1e4 100644
--- a/x-pack/plugins/monitoring/public/components/table/table.js
+++ b/x-pack/plugins/monitoring/public/components/table/table.js
@@ -327,17 +327,17 @@ export class MonitoringTable extends React.Component {
    * @param {Number} numAvailableRows - number of rows total on all the pages
    */
   getFooter(numVisibleRows, numAvailableRows, alwaysShowPageControls) {
-    if (!this.isPaginationRequired(numAvailableRows)) {
-      return null;
-    }
-
+    const showPaginationControls = this.isPaginationRequired(numAvailableRows);
     const firstRow = this.calculateFirstRow();
+
     return (
       <MonitoringTableFooter
         pageIndexFirstRow={numVisibleRows ? firstRow + 1 : 0}
         pageIndexLastRow={numVisibleRows ? numVisibleRows + firstRow : 0}
         rowsFiltered={numAvailableRows}
         paginationControls={this.getPaginationControls(numAvailableRows, alwaysShowPageControls)}
+        rows={this.state.rows}
+        showPaginationControls={showPaginationControls}
       />
     );
   }
diff --git a/x-pack/plugins/monitoring/public/directives/alerts/index.js b/x-pack/plugins/monitoring/public/directives/alerts/index.js
index b6b7d17a577041..89b95d0b57c860 100644
--- a/x-pack/plugins/monitoring/public/directives/alerts/index.js
+++ b/x-pack/plugins/monitoring/public/directives/alerts/index.js
@@ -5,9 +5,9 @@
  */
 
 import { capitalize } from 'lodash';
-import React, { Fragment } from 'react';
+import React from 'react';
 import { render } from 'react-dom';
-import { EuiIcon, EuiHealth, EuiText, EuiSpacer } from '@elastic/eui';
+import { EuiIcon, EuiHealth } from '@elastic/eui';
 import { uiModules } from 'ui/modules';
 import { KuiTableRowCell, KuiTableRow } from '@kbn/ui-framework/components';
 import { MonitoringTable } from 'plugins/monitoring/components/table';
@@ -96,20 +96,14 @@ uiModule.directive('monitoringClusterAlertsListing', kbnUrl => {
 
       scope.$watch('alerts', (alerts = []) => {
         const alertsTable = (
-          <Fragment>
-            <EuiText><p tabIndex="0">Showing {alerts.length} alert(s)</p></EuiText>
-            <EuiSpacer size="s"/>
-            <div className="kuiVerticalRhythm">
-              <MonitoringTable
-                className="alertsTable"
-                rows={alerts}
-                placeholder="Filter Alerts..."
-                filterFields={filterFields}
-                columns={columns}
-                rowComponent={alertRowFactory(scope, kbnUrl)}
-              />
-            </div>
-          </Fragment>
+          <MonitoringTable
+            className="alertsTable"
+            rows={alerts}
+            placeholder="Filter Alerts..."
+            filterFields={filterFields}
+            columns={columns}
+            rowComponent={alertRowFactory(scope, kbnUrl)}
+          />
         );
         render(alertsTable, $el[0]);
       });

From bf93d63c61992fd16c8016132f9447be7da11840 Mon Sep 17 00:00:00 2001
From: Chris Roberson <chrisronline@gmail.com>
Date: Wed, 11 Jul 2018 14:31:42 -0400
Subject: [PATCH 11/16] Revert "Show results in the table footer"

This reverts commit d622eb7eb454327036397794ad51fafcdd0ce41a.
---
 .../public/components/table/footer.js         | 28 +++++--------------
 .../public/components/table/table.js          |  8 +++---
 .../public/directives/alerts/index.js         | 26 ++++++++++-------
 3 files changed, 27 insertions(+), 35 deletions(-)

diff --git a/x-pack/plugins/monitoring/public/components/table/footer.js b/x-pack/plugins/monitoring/public/components/table/footer.js
index 3ff17f08cd9daa..19584c1bc6b12c 100644
--- a/x-pack/plugins/monitoring/public/components/table/footer.js
+++ b/x-pack/plugins/monitoring/public/components/table/footer.js
@@ -11,30 +11,16 @@ import {
   KuiToolBarText
 } from '@kbn/ui-framework/components';
 
-export function MonitoringTableFooter({
-  pageIndexFirstRow,
-  pageIndexLastRow,
-  rowsFiltered,
-  paginationControls,
-  rows,
-  showPaginationControls
-}) {
-  const paginationSection = showPaginationControls ? (
-    <KuiToolBarFooterSection>
-      <KuiToolBarText>
-        { pageIndexFirstRow } &ndash; { pageIndexLastRow } of { rowsFiltered }
-      </KuiToolBarText>
-      { paginationControls }
-    </KuiToolBarFooterSection>
-  ) : null;
-
+export function MonitoringTableFooter({ pageIndexFirstRow, pageIndexLastRow, rowsFiltered, paginationControls }) {
   return (
     <KuiToolBarFooter>
-      <p tabIndex="0">
-        Showing {rows.length} {rows.length === 1 ? 'item' : 'items'}
-      </p>
+      <KuiToolBarFooterSection>
+        <KuiToolBarText>
+          { pageIndexFirstRow } &ndash; { pageIndexLastRow } of { rowsFiltered }
+        </KuiToolBarText>
 
-      { paginationSection }
+        { paginationControls }
+      </KuiToolBarFooterSection>
     </KuiToolBarFooter>
   );
 }
diff --git a/x-pack/plugins/monitoring/public/components/table/table.js b/x-pack/plugins/monitoring/public/components/table/table.js
index 56afda4ae4c1e4..f49615da60c9eb 100644
--- a/x-pack/plugins/monitoring/public/components/table/table.js
+++ b/x-pack/plugins/monitoring/public/components/table/table.js
@@ -327,17 +327,17 @@ export class MonitoringTable extends React.Component {
    * @param {Number} numAvailableRows - number of rows total on all the pages
    */
   getFooter(numVisibleRows, numAvailableRows, alwaysShowPageControls) {
-    const showPaginationControls = this.isPaginationRequired(numAvailableRows);
-    const firstRow = this.calculateFirstRow();
+    if (!this.isPaginationRequired(numAvailableRows)) {
+      return null;
+    }
 
+    const firstRow = this.calculateFirstRow();
     return (
       <MonitoringTableFooter
         pageIndexFirstRow={numVisibleRows ? firstRow + 1 : 0}
         pageIndexLastRow={numVisibleRows ? numVisibleRows + firstRow : 0}
         rowsFiltered={numAvailableRows}
         paginationControls={this.getPaginationControls(numAvailableRows, alwaysShowPageControls)}
-        rows={this.state.rows}
-        showPaginationControls={showPaginationControls}
       />
     );
   }
diff --git a/x-pack/plugins/monitoring/public/directives/alerts/index.js b/x-pack/plugins/monitoring/public/directives/alerts/index.js
index 89b95d0b57c860..b6b7d17a577041 100644
--- a/x-pack/plugins/monitoring/public/directives/alerts/index.js
+++ b/x-pack/plugins/monitoring/public/directives/alerts/index.js
@@ -5,9 +5,9 @@
  */
 
 import { capitalize } from 'lodash';
-import React from 'react';
+import React, { Fragment } from 'react';
 import { render } from 'react-dom';
-import { EuiIcon, EuiHealth } from '@elastic/eui';
+import { EuiIcon, EuiHealth, EuiText, EuiSpacer } from '@elastic/eui';
 import { uiModules } from 'ui/modules';
 import { KuiTableRowCell, KuiTableRow } from '@kbn/ui-framework/components';
 import { MonitoringTable } from 'plugins/monitoring/components/table';
@@ -96,14 +96,20 @@ uiModule.directive('monitoringClusterAlertsListing', kbnUrl => {
 
       scope.$watch('alerts', (alerts = []) => {
         const alertsTable = (
-          <MonitoringTable
-            className="alertsTable"
-            rows={alerts}
-            placeholder="Filter Alerts..."
-            filterFields={filterFields}
-            columns={columns}
-            rowComponent={alertRowFactory(scope, kbnUrl)}
-          />
+          <Fragment>
+            <EuiText><p tabIndex="0">Showing {alerts.length} alert(s)</p></EuiText>
+            <EuiSpacer size="s"/>
+            <div className="kuiVerticalRhythm">
+              <MonitoringTable
+                className="alertsTable"
+                rows={alerts}
+                placeholder="Filter Alerts..."
+                filterFields={filterFields}
+                columns={columns}
+                rowComponent={alertRowFactory(scope, kbnUrl)}
+              />
+            </div>
+          </Fragment>
         );
         render(alertsTable, $el[0]);
       });

From 18cc0170c9c6b63b22689d263c88e6cda0e637fa Mon Sep 17 00:00:00 2001
From: Chris Roberson <chrisronline@gmail.com>
Date: Fri, 13 Jul 2018 09:23:44 -0400
Subject: [PATCH 12/16] Show total row count within the monitoring table

---
 .../public/components/table/table.js          |  1 +
 .../public/components/table/toolbar.css       |  3 +++
 .../public/components/table/toolbar.js        | 14 +++++++++-
 .../public/directives/alerts/index.js         | 26 +++++++------------
 4 files changed, 27 insertions(+), 17 deletions(-)
 create mode 100644 x-pack/plugins/monitoring/public/components/table/toolbar.css

diff --git a/x-pack/plugins/monitoring/public/components/table/table.js b/x-pack/plugins/monitoring/public/components/table/table.js
index f49615da60c9eb..0ac06d5ea4eb41 100644
--- a/x-pack/plugins/monitoring/public/components/table/table.js
+++ b/x-pack/plugins/monitoring/public/components/table/table.js
@@ -256,6 +256,7 @@ export class MonitoringTable extends React.Component {
         pageIndexFirstRow={numVisibleRows ? firstRow + 1 : 0}
         pageIndexLastRow={numVisibleRows ? numVisibleRows + firstRow : 0}
         rowsFiltered={numAvailableRows}
+        totalRows={this.state.rows.length}
         filterText={this.state.filterText}
         paginationControls={this.getPaginationControls(numAvailableRows, this.props.alwaysShowPageControls)}
         onFilterChange={this.onFilterChange}
diff --git a/x-pack/plugins/monitoring/public/components/table/toolbar.css b/x-pack/plugins/monitoring/public/components/table/toolbar.css
new file mode 100644
index 00000000000000..f8209d70492bc4
--- /dev/null
+++ b/x-pack/plugins/monitoring/public/components/table/toolbar.css
@@ -0,0 +1,3 @@
+.monitoringTableToolbarTotalRows {
+  flex: 2; /* This is to ensure this shows directly next to the search bar in the table toolbar */
+}
diff --git a/x-pack/plugins/monitoring/public/components/table/toolbar.js b/x-pack/plugins/monitoring/public/components/table/toolbar.js
index ba4b2f325ee8a3..980cd1fedfb46b 100644
--- a/x-pack/plugins/monitoring/public/components/table/toolbar.js
+++ b/x-pack/plugins/monitoring/public/components/table/toolbar.js
@@ -13,6 +13,8 @@ import {
   KuiToolBarText
 } from '@kbn/ui-framework/components';
 
+import './toolbar.css';
+
 export function MonitoringTableToolBar(props) {
   const searchBox = props.showSearchBox
     ? (
@@ -37,9 +39,18 @@ export function MonitoringTableToolBar(props) {
     )
     : null;
 
+  const totalRows = Boolean(props.showTotalRows)
+    ? (
+      <p tabIndex="0" className="monitoringTableToolbarTotalRows">
+        {props.totalRows} in total
+      </p>
+    )
+    : null;
+
   return (
     <KuiToolBar>
       { searchBox }
+      { totalRows }
       { props.renderToolBarSections(props) }
       { paginationSection }
     </KuiToolBar>
@@ -47,5 +58,6 @@ export function MonitoringTableToolBar(props) {
 }
 MonitoringTableToolBar.defaultProps = {
   renderToolBarSections: noop,
-  showSearchBox: true
+  showSearchBox: true,
+  showTotalRows: true
 };
diff --git a/x-pack/plugins/monitoring/public/directives/alerts/index.js b/x-pack/plugins/monitoring/public/directives/alerts/index.js
index b6b7d17a577041..89b95d0b57c860 100644
--- a/x-pack/plugins/monitoring/public/directives/alerts/index.js
+++ b/x-pack/plugins/monitoring/public/directives/alerts/index.js
@@ -5,9 +5,9 @@
  */
 
 import { capitalize } from 'lodash';
-import React, { Fragment } from 'react';
+import React from 'react';
 import { render } from 'react-dom';
-import { EuiIcon, EuiHealth, EuiText, EuiSpacer } from '@elastic/eui';
+import { EuiIcon, EuiHealth } from '@elastic/eui';
 import { uiModules } from 'ui/modules';
 import { KuiTableRowCell, KuiTableRow } from '@kbn/ui-framework/components';
 import { MonitoringTable } from 'plugins/monitoring/components/table';
@@ -96,20 +96,14 @@ uiModule.directive('monitoringClusterAlertsListing', kbnUrl => {
 
       scope.$watch('alerts', (alerts = []) => {
         const alertsTable = (
-          <Fragment>
-            <EuiText><p tabIndex="0">Showing {alerts.length} alert(s)</p></EuiText>
-            <EuiSpacer size="s"/>
-            <div className="kuiVerticalRhythm">
-              <MonitoringTable
-                className="alertsTable"
-                rows={alerts}
-                placeholder="Filter Alerts..."
-                filterFields={filterFields}
-                columns={columns}
-                rowComponent={alertRowFactory(scope, kbnUrl)}
-              />
-            </div>
-          </Fragment>
+          <MonitoringTable
+            className="alertsTable"
+            rows={alerts}
+            placeholder="Filter Alerts..."
+            filterFields={filterFields}
+            columns={columns}
+            rowComponent={alertRowFactory(scope, kbnUrl)}
+          />
         );
         render(alertsTable, $el[0]);
       });

From 0f2fd25167698805218e81b845af7fefc43370ea Mon Sep 17 00:00:00 2001
From: Chris Roberson <chrisronline@gmail.com>
Date: Thu, 19 Jul 2018 11:04:39 -0400
Subject: [PATCH 13/16] PR feedback

---
 .../components/chart/monitoring_timeseries_container.js     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js b/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js
index 23394ab84b0d9c..a949920826c89f 100644
--- a/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js
+++ b/x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.js
@@ -28,8 +28,8 @@ export function MonitoringTimeseriesContainer({ series, onBrush }) {
   const units = getUnits(series);
   const bucketSize = get(first(series), 'bucket_size'); // bucket size will be the same for all metrics in all series
 
-  const seriesScreenReaderTextList = [`Interval: ${bucketSize}`];
-  seriesScreenReaderTextList.push(...series.map(item => `${item.metric.label}: ${item.metric.description}`));
+  const seriesScreenReaderTextList = [`Interval: ${bucketSize}`]
+    .concat(series.map(item => `${item.metric.label}: ${item.metric.description}`));
 
   return (
     <div className="monitoring-chart__container">
@@ -46,7 +46,7 @@ export function MonitoringTimeseriesContainer({ series, onBrush }) {
               <KuiInfoButton aria-labelledby={`monitoringChart${titleForAriaIds}`} />
               <EuiScreenReaderOnly>
                 <span id={`monitoringChart${titleForAriaIds}`}>
-                  {seriesScreenReaderTextList.join('.')}
+                  {seriesScreenReaderTextList.join('. ')}
                 </span>
               </EuiScreenReaderOnly>
             </Fragment>

From 7f98d5a1e8131ef2562a7c8b84912993633f8497 Mon Sep 17 00:00:00 2001
From: Chris Roberson <chrisronline@gmail.com>
Date: Thu, 19 Jul 2018 16:34:26 -0400
Subject: [PATCH 14/16] PR feedback

---
 x-pack/plugins/monitoring/public/components/table/toolbar.css | 3 ---
 x-pack/plugins/monitoring/public/components/table/toolbar.js  | 2 --
 x-pack/plugins/monitoring/public/less/components/table.less   | 4 ++++
 3 files changed, 4 insertions(+), 5 deletions(-)
 delete mode 100644 x-pack/plugins/monitoring/public/components/table/toolbar.css

diff --git a/x-pack/plugins/monitoring/public/components/table/toolbar.css b/x-pack/plugins/monitoring/public/components/table/toolbar.css
deleted file mode 100644
index f8209d70492bc4..00000000000000
--- a/x-pack/plugins/monitoring/public/components/table/toolbar.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.monitoringTableToolbarTotalRows {
-  flex: 2; /* This is to ensure this shows directly next to the search bar in the table toolbar */
-}
diff --git a/x-pack/plugins/monitoring/public/components/table/toolbar.js b/x-pack/plugins/monitoring/public/components/table/toolbar.js
index 980cd1fedfb46b..82b5403599db9c 100644
--- a/x-pack/plugins/monitoring/public/components/table/toolbar.js
+++ b/x-pack/plugins/monitoring/public/components/table/toolbar.js
@@ -13,8 +13,6 @@ import {
   KuiToolBarText
 } from '@kbn/ui-framework/components';
 
-import './toolbar.css';
-
 export function MonitoringTableToolBar(props) {
   const searchBox = props.showSearchBox
     ? (
diff --git a/x-pack/plugins/monitoring/public/less/components/table.less b/x-pack/plugins/monitoring/public/less/components/table.less
index 349247fc5bb22b..b4a447081f898b 100644
--- a/x-pack/plugins/monitoring/public/less/components/table.less
+++ b/x-pack/plugins/monitoring/public/less/components/table.less
@@ -60,3 +60,7 @@
   color: #666977;
   font-size: 12px;
 }
+
+.monitoringTableToolbarTotalRows {
+  flex: 2; /* This is to ensure this shows directly next to the search bar in the table toolbar */
+}

From ec68f59157e38a92c03533430205f7719cca1ead Mon Sep 17 00:00:00 2001
From: Chris Roberson <chrisronline@gmail.com>
Date: Tue, 7 Aug 2018 10:54:01 -0400
Subject: [PATCH 15/16] Ensure all charts show an interval in the tooltip

---
 .../public/directives/chart/index.js          | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/monitoring/public/directives/chart/index.js b/x-pack/plugins/monitoring/public/directives/chart/index.js
index 748e1ded1866fd..8435f38f13aa5b 100644
--- a/x-pack/plugins/monitoring/public/directives/chart/index.js
+++ b/x-pack/plugins/monitoring/public/directives/chart/index.js
@@ -4,9 +4,10 @@
  * 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 { get, first } from 'lodash';
 import { uiModules } from 'ui/modules';
 import {
   getTitle,
@@ -19,6 +20,10 @@ import { OverlayTrigger } from 'pivotal-ui/react/overlay-trigger';
 import { KuiInfoButton } from '@kbn/ui-framework/components';
 import { timefilter } from 'ui/timefilter';
 
+import {
+  EuiScreenReaderOnly
+} from '@elastic/eui';
+
 const uiModule = uiModules.get('plugins/monitoring/directives', []);
 uiModule.directive('monitoringChart', () => {
   return {
@@ -31,6 +36,7 @@ uiModule.directive('monitoringChart', () => {
       const series = scope.series;
       const units = getUnits(series);
 
+
       function onBrush({ xaxis }) {
         timefilter.setTime({
           from: moment(xaxis.from),
@@ -40,21 +46,35 @@ uiModule.directive('monitoringChart', () => {
       }
 
       scope.$watch('series', series => {
+        const title = getTitle(series);
+        const titleForAriaIds = title.replace(/\s+/, '--');
+        const bucketSize = get(first(series), 'bucket_size'); // bucket size will be the same for all metrics in all series
+        const seriesScreenReaderTextList = [`Interval: ${bucketSize}`]
+          .concat(series.map(item => `${item.metric.label}: ${item.metric.description}`));
+
         render(
           <div className="monitoring-chart__container">
             <h2 className="euiTitle">
+              <EuiScreenReaderOnly><span>This chart is not screen reader accessible</span></EuiScreenReaderOnly>
               { getTitle(series) }{ units ? ` (${units})` : '' }
               <OverlayTrigger
                 placement="left"
                 trigger="click"
                 overlay={
                   <Tooltip>
-                    <InfoTooltip series={series}/>
+                    <InfoTooltip series={series} bucketSize={bucketSize}/>
                   </Tooltip>
                 }
               >
                 <span className="monitoring-chart-tooltip__trigger overlay-trigger">
-                  <KuiInfoButton />
+                  <Fragment>
+                    <KuiInfoButton aria-labelledby={`monitoringChart${titleForAriaIds}`} />
+                    <EuiScreenReaderOnly>
+                      <span id={`monitoringChart${titleForAriaIds}`}>
+                        {seriesScreenReaderTextList.join('. ')}
+                      </span>
+                    </EuiScreenReaderOnly>
+                  </Fragment>
                 </span>
               </OverlayTrigger>
             </h2>

From a8fd4f8f96f3ca4a7ace48503d0703e2907a239e Mon Sep 17 00:00:00 2001
From: Chris Roberson <chrisronline@gmail.com>
Date: Tue, 7 Aug 2018 13:29:01 -0400
Subject: [PATCH 16/16] Fix padding issue with the cluster status

---
 .../elasticsearch/overview/overview.js        | 40 +++++++++----------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/overview/overview.js b/x-pack/plugins/monitoring/public/components/elasticsearch/overview/overview.js
index c477de20d799a2..55020955d00f43 100644
--- a/x-pack/plugins/monitoring/public/components/elasticsearch/overview/overview.js
+++ b/x-pack/plugins/monitoring/public/components/elasticsearch/overview/overview.js
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { Fragment } from 'react';
 import { ClusterStatus } from '../cluster_status';
 import { ShardActivity } from '../shard_activity';
 import { MonitoringTimeseriesContainer } from '../../chart';
@@ -24,24 +24,24 @@ export function ElasticsearchOverview({
   ];
 
   return (
-    <EuiPage style={{ backgroundColor: 'white' }}>
-      <EuiPageBody>
-        <ClusterStatus stats={clusterStatus} />
-
-        <EuiFlexGrid columns={2} gutterSize="none">
-          {metricsToShow.map((metric, index) => (
-            <EuiFlexItem key={index} style={{ width: '50%' }}>
-              <MonitoringTimeseriesContainer
-                series={metric}
-                {...props}
-              />
-              <EuiSpacer size="m"/>
-            </EuiFlexItem>
-          ))}
-        </EuiFlexGrid>
-
-        <ShardActivity data={shardActivity} {...props} />
-      </EuiPageBody>
-    </EuiPage>
+    <Fragment>
+      <ClusterStatus stats={clusterStatus} />
+      <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>
+          <ShardActivity data={shardActivity} {...props} />
+        </EuiPageBody>
+      </EuiPage>
+    </Fragment>
   );
 }