+
+
diff --git a/x-pack/plugins/monitoring/public/views/alerts/index.js b/x-pack/plugins/monitoring/public/views/alerts/index.js
index 7b85d19bc8be0..ab8b57bff0723 100644
--- a/x-pack/plugins/monitoring/public/views/alerts/index.js
+++ b/x-pack/plugins/monitoring/public/views/alerts/index.js
@@ -4,13 +4,18 @@
* you may not use this file except in compliance with the Elastic License.
*/
+import React from 'react';
+import { render } from 'react-dom';
import { find, get } from 'lodash';
import uiRoutes from 'ui/routes';
import template from './index.html';
-import { MonitoringViewBaseController } from 'plugins/monitoring/views';
import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
import { ajaxErrorHandlersProvider } from 'plugins/monitoring/lib/ajax_error_handler';
import { timefilter } from 'ui/timefilter';
+import { Alerts } from '../../components/alerts';
+import { MonitoringViewBaseEuiTableController } from '../base_eui_table_controller';
+import { I18nProvider, FormattedMessage } from '@kbn/i18n/react';
+import { EuiPage, EuiPageBody, EuiPageContent, EuiSpacer, EuiLink } from '@elastic/eui';
function getPageData($injector) {
const globalState = $injector.get('globalState');
@@ -44,10 +49,11 @@ uiRoutes.when('/alerts', {
alerts: getPageData
},
controllerAs: 'alerts',
- controller: class AlertsView extends MonitoringViewBaseController {
+ controller: class AlertsView extends MonitoringViewBaseEuiTableController {
constructor($injector, $scope, i18n) {
const $route = $injector.get('$route');
const globalState = $injector.get('globalState');
+ const kbnUrl = $injector.get('kbnUrl');
// breadcrumbs + page title
$scope.cluster = find($route.current.locals.clusters, { cluster_uuid: globalState.cluster_uuid });
@@ -60,6 +66,41 @@ uiRoutes.when('/alerts', {
});
this.data = $route.current.locals.alerts;
+
+ const renderReact = data => {
+ const app = data.message
+ ? (
{data.message}
)
+ : (
);
+
+ render(
+
+
+
+
+ {app}
+
+
+
+
+
+
+
+ ,
+ document.getElementById('monitoringAlertsApp')
+ );
+ };
+ $scope.$watch(() => this.data, data => renderReact(data));
}
}
});
diff --git a/x-pack/plugins/monitoring/public/views/base_eui_table_controller.js b/x-pack/plugins/monitoring/public/views/base_eui_table_controller.js
new file mode 100644
index 0000000000000..c4f2ada58dff9
--- /dev/null
+++ b/x-pack/plugins/monitoring/public/views/base_eui_table_controller.js
@@ -0,0 +1,66 @@
+/*
+ * 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 { MonitoringViewBaseController } from './';
+import { euiTableStorageGetter, euiTableStorageSetter } from 'plugins/monitoring/components/table';
+import { SORT_ASCENDING } from '../../common/constants';
+
+/**
+ * Class to manage common instantiation behaviors in a view controller
+ * And add persistent state to a table:
+ * - page index: in table pagination, which page are we looking at
+ * - filter text: what filter was entered in the table's filter bar
+ * - sortKey: which column field of table data is used for sorting
+ * - sortOrder: is sorting ordered ascending or descending
+ *
+ * This is expected to be extended, and behavior enabled using super();
+ */
+export class MonitoringViewBaseEuiTableController extends MonitoringViewBaseController {
+
+ /**
+ * Create a table view controller
+ * - used by parent class:
+ * @param {String} title - Title of the page
+ * @param {Function} getPageData - Function to fetch page data
+ * @param {Service} $injector - Angular dependency injection service
+ * @param {Service} $scope - Angular view data binding service
+ * @param {Boolean} options.enableTimeFilter - Whether to show the time filter
+ * @param {Boolean} options.enableAutoRefresh - Whether to show the auto refresh control
+ * - specific to this class:
+ * @param {String} storageKey - the namespace that will be used to keep the state data in the Monitoring localStorage object
+ *
+ */
+ constructor(args) {
+ super(args);
+ const { storageKey, $injector } = args;
+ const storage = $injector.get('localStorage');
+
+ const getLocalStorageData = euiTableStorageGetter(storageKey);
+ const setLocalStorageData = euiTableStorageSetter(storageKey);
+ const { page, sort } = getLocalStorageData(storage);
+
+ this.pagination = page || {
+ initialPageSize: 20,
+ pageSizeOptions: [5, 10, 20, 50]
+ };
+
+ this.sorting = sort || {
+ sort: {
+ field: 'name',
+ direction: SORT_ASCENDING
+ }
+ };
+
+ this.onTableChange = ({ page, sort }) => {
+ setLocalStorageData(storage, {
+ page,
+ sort: {
+ sort
+ }
+ });
+ };
+ }
+}
diff --git a/x-pack/plugins/monitoring/public/views/base_table_controller.js b/x-pack/plugins/monitoring/public/views/base_table_controller.js
index 175a06aa92722..ad0a9678a36a6 100644
--- a/x-pack/plugins/monitoring/public/views/base_table_controller.js
+++ b/x-pack/plugins/monitoring/public/views/base_table_controller.js
@@ -50,5 +50,4 @@ export class MonitoringViewBaseTableController extends MonitoringViewBaseControl
setLocalStorageData(storage, newState);
};
}
-
}
diff --git a/x-pack/plugins/monitoring/public/views/elasticsearch/ccr/shard/index.js b/x-pack/plugins/monitoring/public/views/elasticsearch/ccr/shard/index.js
index 554aaaea31969..54164b06ce09b 100644
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/ccr/shard/index.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/ccr/shard/index.js
@@ -50,7 +50,9 @@ uiRoutes.when('/elasticsearch/ccr/:index/shard/:shardId', {
this.renderReact = (props) => {
super.renderReact(
-
+
+
+
);
};
}
diff --git a/x-pack/plugins/monitoring/server/lib/logstash/get_logstash_for_clusters.js b/x-pack/plugins/monitoring/server/lib/logstash/get_logstash_for_clusters.js
index fae1a9431135d..0bd527523ad7d 100644
--- a/x-pack/plugins/monitoring/server/lib/logstash/get_logstash_for_clusters.js
+++ b/x-pack/plugins/monitoring/server/lib/logstash/get_logstash_for_clusters.js
@@ -182,6 +182,7 @@ export function getLogstashForClusters(req, lsIndexPattern, clusters) {
const { callWithRequest } = req.server.plugins.elasticsearch.getCluster('monitoring');
return callWithRequest(req, 'search', params)
.then(result => {
+
const aggregations = get(result, 'aggregations', {});
const logstashUuids = get(aggregations, 'logstash_uuids.buckets', []);
const logstashVersions = get(aggregations, 'logstash_versions.buckets', []);
diff --git a/x-pack/test/functional/page_objects/monitoring_page.js b/x-pack/test/functional/page_objects/monitoring_page.js
index 12f148d255ebe..1c8f98119d54f 100644
--- a/x-pack/test/functional/page_objects/monitoring_page.js
+++ b/x-pack/test/functional/page_objects/monitoring_page.js
@@ -35,6 +35,12 @@ export function MonitoringPageProvider({ getPageObjects, getService }) {
return table.findAllByTagName('tr');
}
+ async tableGetRowsFromContainer(subj) {
+ const table = await testSubjects.find(subj);
+ const tbody = await table.findByTagName('tbody');
+ return tbody.findAllByTagName('tr');
+ }
+
async tableSetFilter(subj, text) {
return await testSubjects.setValue(subj, text);
}
diff --git a/x-pack/test/functional/services/monitoring/cluster_alerts.js b/x-pack/test/functional/services/monitoring/cluster_alerts.js
index a47af62bfbdcd..6b51380600f04 100644
--- a/x-pack/test/functional/services/monitoring/cluster_alerts.js
+++ b/x-pack/test/functional/services/monitoring/cluster_alerts.js
@@ -23,8 +23,7 @@ export function MonitoringClusterAlertsProvider({ getService, getPageObjects })
const SUBJ_OVERVIEW_ACTIONS = `${SUBJ_OVERVIEW_CLUSTER_ALERTS} alertAction`;
const SUBJ_OVERVIEW_VIEW_ALL = `${SUBJ_OVERVIEW_CLUSTER_ALERTS} viewAllAlerts`;
- const SUBJ_LISTING_PAGE = 'clusterAlertsListingPage';
- const SUBJ_TABLE_BODY = 'alertsTableBody';
+ const SUBJ_TABLE_BODY = 'alertsTableContainer';
const SUBJ_TABLE_ICONS = `${SUBJ_TABLE_BODY} alertIcon`;
const SUBJ_TABLE_TEXTS = `${SUBJ_TABLE_BODY} alertText`;
const SUBJ_TABLE_ACTIONS = `${SUBJ_TABLE_BODY} alertAction`;
@@ -91,12 +90,12 @@ export function MonitoringClusterAlertsProvider({ getService, getPageObjects })
*/
async isOnListingPage() {
- const pageId = await retry.try(() => testSubjects.find(SUBJ_LISTING_PAGE));
+ const pageId = await retry.try(() => testSubjects.find(SUBJ_TABLE_BODY));
return pageId !== null;
}
getTableAlerts() {
- return PageObjects.monitoring.tableGetRows(SUBJ_TABLE_BODY);
+ return PageObjects.monitoring.tableGetRowsFromContainer(SUBJ_TABLE_BODY);
}
async getTableAlertsAll() {