Show results in the table footer

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>
   );
 }

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}
       />
     );
   }

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]);
       });