diff --git a/x-pack/plugins/monitoring/public/components/table/footer.js b/x-pack/plugins/monitoring/public/components/table/footer.js index 19584c1bc6b1..3ff17f08cd9d 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 ? ( + + + { pageIndexFirstRow } – { pageIndexLastRow } of { rowsFiltered } + + { paginationControls } + + ) : null; + return ( - - - { pageIndexFirstRow } – { pageIndexLastRow } of { rowsFiltered } - +

+ Showing {rows.length} {rows.length === 1 ? 'item' : 'items'} +

- { paginationControls } -
+ { paginationSection }
); } diff --git a/x-pack/plugins/monitoring/public/components/table/table.js b/x-pack/plugins/monitoring/public/components/table/table.js index f49615da60c9..56afda4ae4c1 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 ( ); } diff --git a/x-pack/plugins/monitoring/public/directives/alerts/index.js b/x-pack/plugins/monitoring/public/directives/alerts/index.js index b6b7d17a5770..89b95d0b57c8 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 = ( - -

Showing {alerts.length} alert(s)

- -
- -
-
+ ); render(alertsTable, $el[0]); });