diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/index/index.js b/x-pack/plugins/monitoring/public/components/elasticsearch/index/index.js
index 8caf0d0b48b4..395fd3084e5e 100644
--- a/x-pack/plugins/monitoring/public/components/elasticsearch/index/index.js
+++ b/x-pack/plugins/monitoring/public/components/elasticsearch/index/index.js
@@ -18,9 +18,9 @@ import { MonitoringTimeseriesContainer } from '../../chart';
import { ShardAllocation } from '../shard_allocation/shard_allocation';
export const Index = ({
+ scope,
indexSummary,
metrics,
- scope,
kbnUrl,
...props
}) => {
@@ -51,7 +51,7 @@ export const Index = ({
))}
-
+
diff --git a/x-pack/plugins/monitoring/public/components/kibana/detail_status/index.js b/x-pack/plugins/monitoring/public/components/kibana/detail_status/index.js
index 0322f6259128..2bc90e9ff9b8 100644
--- a/x-pack/plugins/monitoring/public/components/kibana/detail_status/index.js
+++ b/x-pack/plugins/monitoring/public/components/kibana/detail_status/index.js
@@ -21,6 +21,10 @@ function DetailStatusUI({ stats, intl }) {
const metrics = [
{
+ label: intl.formatMessage({
+ id: 'xpack.monitoring.kibana.detailStatus.transportAddressLabel',
+ defaultMessage: 'Transport Address'
+ }),
value: transportAddress,
'data-test-subj': 'transportAddress'
},
diff --git a/x-pack/plugins/monitoring/public/components/logstash/detail_status/index.js b/x-pack/plugins/monitoring/public/components/logstash/detail_status/index.js
index ce95eac5a39b..4d96a42e2259 100644
--- a/x-pack/plugins/monitoring/public/components/logstash/detail_status/index.js
+++ b/x-pack/plugins/monitoring/public/components/logstash/detail_status/index.js
@@ -22,6 +22,9 @@ function DetailStatusUi({ stats, intl }) {
const firstMetrics = [
{
+ label: intl.formatMessage({
+ id: 'xpack.monitoring.logstash.detailStatus.transportAddressLabel', defaultMessage: 'Transport Address'
+ }),
value: httpAddress,
'data-test-subj': 'httpAddress'
},
diff --git a/x-pack/plugins/monitoring/public/directives/all.js b/x-pack/plugins/monitoring/public/directives/all.js
index 4aca3c22fd8a..60d8f88c759c 100644
--- a/x-pack/plugins/monitoring/public/directives/all.js
+++ b/x-pack/plugins/monitoring/public/directives/all.js
@@ -7,7 +7,6 @@
import './main';
import './chart';
import './sparkline';
-import './cluster/overview';
import './cluster/listing';
import './elasticsearch/cluster_status';
import './elasticsearch/index_summary';
diff --git a/x-pack/plugins/monitoring/public/directives/cluster/overview/index.js b/x-pack/plugins/monitoring/public/directives/cluster/overview/index.js
deleted file mode 100644
index 17439f890886..000000000000
--- a/x-pack/plugins/monitoring/public/directives/cluster/overview/index.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * 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 React from 'react';
-import ReactDOM from 'react-dom';
-import { Overview } from 'plugins/monitoring/components/cluster/overview';
-import { uiModules } from 'ui/modules';
-import { I18nProvider } from '@kbn/i18n/react';
-
-const uiModule = uiModules.get('monitoring/directives', []);
-uiModule.directive('monitoringClusterOverview', (kbnUrl, showLicenseExpiration) => {
- return {
- restrict: 'E',
- scope: { cluster: '=' },
- link(scope, $el) {
-
- const changeUrl = target => {
- scope.$evalAsync(() => {
- kbnUrl.changePath(target);
- });
- };
-
- scope.$watch('cluster', cluster => {
- ReactDOM.render((
-
-
-
- ), $el[0]);
- });
-
- }
- };
-});
diff --git a/x-pack/plugins/monitoring/public/directives/main/index.html b/x-pack/plugins/monitoring/public/directives/main/index.html
index d21c9cfba59a..83b45939ce49 100644
--- a/x-pack/plugins/monitoring/public/directives/main/index.html
+++ b/x-pack/plugins/monitoring/public/directives/main/index.html
@@ -253,7 +253,7 @@
diff --git a/x-pack/plugins/monitoring/public/directives/main/index.js b/x-pack/plugins/monitoring/public/directives/main/index.js
index 6e255a8bef97..1d7bf72ac242 100644
--- a/x-pack/plugins/monitoring/public/directives/main/index.js
+++ b/x-pack/plugins/monitoring/public/directives/main/index.js
@@ -101,6 +101,8 @@ uiModule.directive('monitoringMain', (breadcrumbs, license, kbnUrl, config) => {
clusterName: get(scope, 'cluster.cluster_name')
});
+ attributes.$observe('instance', instance => controller.instance = instance);
+ attributes.$observe('resolver', resolver => controller.resolver = resolver);
}
};
});
diff --git a/x-pack/plugins/monitoring/public/views/__tests__/base_controller.js b/x-pack/plugins/monitoring/public/views/__tests__/base_controller.js
index 6c6567da8f9b..b10e27872879 100644
--- a/x-pack/plugins/monitoring/public/views/__tests__/base_controller.js
+++ b/x-pack/plugins/monitoring/public/views/__tests__/base_controller.js
@@ -69,6 +69,25 @@ describe('MonitoringViewBaseController', function () {
expect(executorService.start.calledOnce).to.be(true);
});
+ it('does not allow for a new request if one is inflight', done => {
+ let counter = 0;
+ const opts = {
+ title: 'testo',
+ getPageData: () => Promise.resolve(++counter),
+ $injector,
+ $scope
+ };
+
+ const ctrl = new MonitoringViewBaseController(opts);
+ Promise.all([
+ ctrl.updateData(),
+ ctrl.updateData(),
+ ]).then(() => {
+ expect(counter).to.be(1);
+ done();
+ });
+ });
+
describe('time filter', () => {
it('enables timepicker and auto refresh #1', () => {
expect(timefilter.isTimeRangeSelectorEnabled).to.be(true);
diff --git a/x-pack/plugins/monitoring/public/views/base_controller.js b/x-pack/plugins/monitoring/public/views/base_controller.js
index 635fb328b2b2..ee69d53b8bd1 100644
--- a/x-pack/plugins/monitoring/public/views/base_controller.js
+++ b/x-pack/plugins/monitoring/public/views/base_controller.js
@@ -75,7 +75,7 @@ export class MonitoringViewBaseController {
titleService($scope.cluster, title);
- this.data = { ...defaultData };
+ $scope.pageData = this.data = { ...defaultData };
this._isDataInitialized = false;
this.reactNodeId = reactNodeId;
@@ -96,12 +96,22 @@ export class MonitoringViewBaseController {
timefilter.enableAutoRefreshSelector();
}
+ this.updateDataPromise = null;
this.updateData = () => {
+ if (this.updateDataPromise) {
+ // Do not sent another request if one is inflight
+ // See https://github.com/elastic/kibana/issues/24082
+ return this.updateDataPromise;
+ }
const _api = apiUrlFn ? apiUrlFn() : api;
- return _getPageData($injector, _api)
+ return this.updateDataPromise = _getPageData($injector, _api)
.then(pageData => {
this._isDataInitialized = true; // render will replace loading screen with the react component
- this.data = pageData; // update the view's data with the fetch result
+ $scope.pageData = this.data = pageData; // update the view's data with the fetch result
+ this.updateDataPromise = null;
+ })
+ .catch(() => {
+ this.updateDataPromise = null;
});
};
this.updateData();
@@ -126,6 +136,8 @@ export class MonitoringViewBaseController {
mode: 'absolute'
});
};
+
+ this.setTitle = title => titleService($scope.cluster, title);
}
renderReact(component) {
diff --git a/x-pack/plugins/monitoring/public/views/cluster/overview/index.html b/x-pack/plugins/monitoring/public/views/cluster/overview/index.html
index f0a1c57089c3..7ea786510bf1 100644
--- a/x-pack/plugins/monitoring/public/views/cluster/overview/index.html
+++ b/x-pack/plugins/monitoring/public/views/cluster/overview/index.html
@@ -1,3 +1,3 @@
-
+
diff --git a/x-pack/plugins/monitoring/public/views/cluster/overview/index.js b/x-pack/plugins/monitoring/public/views/cluster/overview/index.js
index 51f7c5e7034a..bdfe0d4ec3b4 100644
--- a/x-pack/plugins/monitoring/public/views/cluster/overview/index.js
+++ b/x-pack/plugins/monitoring/public/views/cluster/overview/index.js
@@ -3,11 +3,13 @@
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
-
+import React from 'react';
import uiRoutes from 'ui/routes';
import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
import template from './index.html';
-import { timefilter } from 'ui/timefilter';
+import { MonitoringViewBaseController } from '../../';
+import { Overview } from 'plugins/monitoring/components/cluster/overview';
+import { I18nProvider } from '@kbn/i18n/react';
uiRoutes.when('/overview', {
template,
@@ -21,28 +23,40 @@ uiRoutes.when('/overview', {
return monitoringClusters(globalState.cluster_uuid, globalState.ccs);
}
},
- controller($injector, $scope, i18n) {
- timefilter.enableTimeRangeSelector();
- timefilter.enableAutoRefreshSelector();
+ controller: class extends MonitoringViewBaseController {
+ constructor($injector, $scope, i18n) {
+ const kbnUrl = $injector.get('kbnUrl');
+ const monitoringClusters = $injector.get('monitoringClusters');
+ const globalState = $injector.get('globalState');
- const $route = $injector.get('$route');
- $scope.cluster = $route.current.locals.cluster;
+ super({
+ title: i18n('xpack.monitoring.cluster.overviewTitle', {
+ defaultMessage: 'Overview'
+ }),
+ defaultData: {},
+ getPageData: () => monitoringClusters(globalState.cluster_uuid, globalState.ccs),
+ reactNodeId: 'monitoringClusterOverviewApp',
+ $scope,
+ $injector
+ });
- const title = $injector.get('title');
- title($scope.cluster, i18n('xpack.monitoring.cluster.overviewTitle', { defaultMessage: 'Overview' }));
+ const changeUrl = target => {
+ $scope.$evalAsync(() => {
+ kbnUrl.changePath(target);
+ });
+ };
- const $executor = $injector.get('$executor');
- const monitoringClusters = $injector.get('monitoringClusters');
- const globalState = $injector.get('globalState');
- $executor.register({
- execute: () => monitoringClusters(globalState.cluster_uuid, globalState.ccs),
- handleResponse(cluster) {
- $scope.cluster = cluster;
- }
- });
-
- $executor.start($scope);
-
- $scope.$on('$destroy', $executor.destroy);
+ $scope.$watch(() => this.data, data => {
+ this.renderReact(
+
+
+
+ );
+ });
+ }
}
});
diff --git a/x-pack/plugins/monitoring/public/views/elasticsearch/index/advanced/index.html b/x-pack/plugins/monitoring/public/views/elasticsearch/index/advanced/index.html
index 2abb73d52adb..159376148d17 100644
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/index/advanced/index.html
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/index/advanced/index.html
@@ -1,7 +1,7 @@
diff --git a/x-pack/plugins/monitoring/public/views/elasticsearch/index/advanced/index.js b/x-pack/plugins/monitoring/public/views/elasticsearch/index/advanced/index.js
index 8f575b7809e7..1a51154beb62 100644
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/index/advanced/index.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/index/advanced/index.js
@@ -8,8 +8,6 @@
* Controller for Advanced Index Detail
*/
import React from 'react';
-import { render } from 'react-dom';
-import { find } from 'lodash';
import uiRoutes from 'ui/routes';
import { ajaxErrorHandlersProvider } from 'plugins/monitoring/lib/ajax_error_handler';
import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
@@ -17,7 +15,7 @@ import template from './index.html';
import { timefilter } from 'ui/timefilter';
import { AdvancedIndex } from '../../../../components/elasticsearch/index/advanced';
import { I18nProvider } from '@kbn/i18n/react';
-import moment from 'moment';
+import { MonitoringViewBaseController } from '../../../base_controller';
function getPageData($injector) {
const globalState = $injector.get('globalState');
@@ -51,57 +49,39 @@ uiRoutes.when('/elasticsearch/indices/:index/advanced', {
},
pageData: getPageData
},
- controller($injector, $scope, i18n) {
- timefilter.enableTimeRangeSelector();
- timefilter.enableAutoRefreshSelector();
+ controllerAs: 'monitoringElasticsearchAdvancedIndexApp',
+ controller: class extends MonitoringViewBaseController {
+ constructor($injector, $scope, i18n) {
+ const $route = $injector.get('$route');
+ const indexName = $route.current.params.index;
- const $route = $injector.get('$route');
- const globalState = $injector.get('globalState');
- $scope.cluster = find($route.current.locals.clusters, { cluster_uuid: globalState.cluster_uuid });
- $scope.indexName = $route.current.params.index;
- $scope.pageData = $route.current.locals.pageData;
+ super({
+ title: i18n('xpack.monitoring.elasticsearch.indices.advanced.routeTitle', {
+ defaultMessage: 'Elasticsearch - Indices - {indexName} - Advanced',
+ values: {
+ indexName,
+ }
+ }),
+ defaultData: {},
+ getPageData,
+ reactNodeId: 'monitoringElasticsearchAdvancedIndexApp',
+ $scope,
+ $injector
+ });
- const title = $injector.get('title');
- const routeTitle = i18n('xpack.monitoring.elasticsearch.indices.advanced.routeTitle', {
- defaultMessage: 'Elasticsearch - Indices - {indexName} - Advanced',
- values: {
- indexName: $scope.indexName
- }
- });
+ this.indexName = indexName;
- title($scope.cluster, routeTitle);
-
- const $executor = $injector.get('$executor');
- $executor.register({
- execute: () => getPageData($injector),
- handleResponse: (response) => $scope.pageData = response
- });
-
- $executor.start($scope);
-
- $scope.$on('$destroy', $executor.destroy);
-
- function onBrush({ xaxis }) {
- timefilter.setTime({
- from: moment(xaxis.from),
- to: moment(xaxis.to),
- mode: 'absolute',
+ $scope.$watch(() => this.data, data => {
+ this.renderReact(
+
+
+
+ );
});
}
-
- this.renderReact = () => {
- render(
-
-
- ,
- document.getElementById('monitoringElasticsearchAdvancedIndexApp')
- );
- };
-
- $scope.$watch('pageData', this.renderReact);
}
});
diff --git a/x-pack/plugins/monitoring/public/views/elasticsearch/index/index.html b/x-pack/plugins/monitoring/public/views/elasticsearch/index/index.html
index 87bdcd5c1603..84d90f184358 100644
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/index/index.html
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/index/index.html
@@ -1,8 +1,8 @@
diff --git a/x-pack/plugins/monitoring/public/views/elasticsearch/index/index.js b/x-pack/plugins/monitoring/public/views/elasticsearch/index/index.js
index 7727239906af..ff93c25ce89e 100644
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/index/index.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/index/index.js
@@ -8,9 +8,6 @@
* Controller for single index detail
*/
import React from 'react';
-import { render } from 'react-dom';
-import { find } from 'lodash';
-import moment from 'moment';
import uiRoutes from 'ui/routes';
import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
import { ajaxErrorHandlersProvider } from 'plugins/monitoring/lib/ajax_error_handler';
@@ -20,6 +17,7 @@ import { I18nProvider } from '@kbn/i18n/react';
import { labels } from '../../../components/elasticsearch/shard_allocation/lib/labels';
import { indicesByNodes } from '../../../components/elasticsearch/shard_allocation/transformers/indices_by_nodes';
import { Index } from '../../../components/elasticsearch/index/index';
+import { MonitoringViewBaseController } from '../../base_controller';
function getPageData($injector) {
const $http = $injector.get('$http');
@@ -53,69 +51,55 @@ uiRoutes.when('/elasticsearch/indices/:index', {
},
pageData: getPageData
},
- controller($injector, $scope, i18n) {
- timefilter.enableTimeRangeSelector();
- timefilter.enableAutoRefreshSelector();
+ controllerAs: 'monitoringElasticsearchIndexApp',
+ controller: class extends MonitoringViewBaseController {
+ constructor($injector, $scope, i18n) {
+ const $route = $injector.get('$route');
+ const kbnUrl = $injector.get('kbnUrl');
+ const indexName = $route.current.params.index;
- const $route = $injector.get('$route');
- const kbnUrl = $injector.get('kbnUrl');
- const globalState = $injector.get('globalState');
- $scope.cluster = find($route.current.locals.clusters, { cluster_uuid: globalState.cluster_uuid });
- $scope.pageData = $route.current.locals.pageData;
- $scope.indexName = $route.current.params.index;
+ super({
+ title: i18n('xpack.monitoring.elasticsearch.indices.overview.routeTitle', {
+ defaultMessage: 'Elasticsearch - Indices - {indexName} - Overview',
+ values: {
+ indexName,
+ }
+ }),
+ defaultData: {},
+ getPageData,
+ reactNodeId: 'monitoringElasticsearchIndexApp',
+ $scope,
+ $injector
+ });
- const title = $injector.get('title');
- const routeTitle = i18n('xpack.monitoring.elasticsearch.indices.overview.routeTitle', {
- defaultMessage: 'Elasticsearch - Indices - {indexName} - Overview',
- values: {
- indexName: $scope.indexName
- }
- });
+ this.indexName = indexName;
+ const transformer = indicesByNodes();
- title($scope.cluster, routeTitle);
+ $scope.$watch(() => this.data, data => {
+ if (!data || !data.shards) {
+ return;
+ }
- const $executor = $injector.get('$executor');
- $executor.register({
- execute: () => getPageData($injector),
- handleResponse: (response) => $scope.pageData = response
- });
+ const shards = data.shards;
+ data.totalCount = shards.length;
+ data.showing = transformer(shards, data.nodes);
+ if (shards.some((shard) => shard.state === 'UNASSIGNED')) {
+ data.labels = labels.indexWithUnassigned;
+ } else {
+ data.labels = labels.index;
+ }
- $executor.start($scope);
-
- $scope.$on('$destroy', $executor.destroy);
-
- function onBrush({ xaxis }) {
- timefilter.setTime({
- from: moment(xaxis.from),
- to: moment(xaxis.to),
- mode: 'absolute',
+ this.renderReact(
+
+
+
+ );
});
}
-
- const transformer = indicesByNodes();
- this.renderReact = () => {
- const shards = $scope.pageData.shards;
- $scope.totalCount = shards.length;
- $scope.showing = transformer(shards, $scope.pageData.nodes);
- if (shards.some((shard) => shard.state === 'UNASSIGNED')) {
- $scope.labels = labels.indexWithUnassigned;
- } else {
- $scope.labels = labels.index;
- }
-
- render(
-
-
- ,
- document.getElementById('monitoringElasticsearchIndexApp')
- );
- };
-
- $scope.$watch('pageData', this.renderReact);
}
});
diff --git a/x-pack/plugins/monitoring/public/views/elasticsearch/node/advanced/index.js b/x-pack/plugins/monitoring/public/views/elasticsearch/node/advanced/index.js
index e48c12e06aef..676ea670c67c 100644
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/node/advanced/index.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/node/advanced/index.js
@@ -8,8 +8,6 @@
* Controller for Advanced Node Detail
*/
import React from 'react';
-import { render } from 'react-dom';
-import { find } from 'lodash';
import uiRoutes from 'ui/routes';
import { ajaxErrorHandlersProvider } from 'plugins/monitoring/lib/ajax_error_handler';
import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
@@ -17,7 +15,7 @@ import template from './index.html';
import { timefilter } from 'ui/timefilter';
import { I18nProvider } from '@kbn/i18n/react';
import { AdvancedNode } from '../../../../components/elasticsearch/node/advanced';
-import moment from 'moment';
+import { MonitoringViewBaseController } from '../../../base_controller';
function getPageData($injector) {
const $http = $injector.get('$http');
@@ -51,58 +49,38 @@ uiRoutes.when('/elasticsearch/nodes/:node/advanced', {
},
pageData: getPageData
},
- controller($injector, $scope, i18n) {
- timefilter.enableTimeRangeSelector();
- timefilter.enableAutoRefreshSelector();
+ controller: class extends MonitoringViewBaseController {
+ constructor($injector, $scope, i18n) {
+ super({
+ defaultData: {},
+ getPageData,
+ reactNodeId: 'monitoringElasticsearchAdvancedNodeApp',
+ $scope,
+ $injector
+ });
- const $route = $injector.get('$route');
- const globalState = $injector.get('globalState');
- $scope.cluster = find($route.current.locals.clusters, { cluster_uuid: globalState.cluster_uuid });
- $scope.pageData = $route.current.locals.pageData;
+ $scope.$watch(() => this.data, data => {
+ if (!data || !data.nodeSummary) {
+ return;
+ }
- const title = $injector.get('title');
- const routeTitle = i18n('xpack.monitoring.elasticsearch.node.advanced.routeTitle', {
- defaultMessage: 'Elasticsearch - Nodes - {nodeSummaryName} - Advanced',
- values: {
- nodeSummaryName: $scope.pageData.nodeSummary.name
- }
- });
+ this.setTitle(i18n('xpack.monitoring.elasticsearch.node.advanced.routeTitle', {
+ defaultMessage: 'Elasticsearch - Nodes - {nodeSummaryName} - Advanced',
+ values: {
+ nodeSummaryName: data.nodeSummary.name
+ }
+ }));
- title($scope.cluster, routeTitle);
-
- const $executor = $injector.get('$executor');
- $executor.register({
- execute: () => getPageData($injector),
- handleResponse: (response) => {
- $scope.pageData = response;
- }
- });
-
- $executor.start($scope);
-
- $scope.$on('$destroy', $executor.destroy);
-
- function onBrush({ xaxis }) {
- timefilter.setTime({
- from: moment(xaxis.from),
- to: moment(xaxis.to),
- mode: 'absolute',
+ this.renderReact(
+
+
+
+ );
});
}
-
- this.renderReact = () => {
- render(
-
-
- ,
- document.getElementById('monitoringElasticsearchAdvancedNodeApp')
- );
- };
-
- $scope.$watch('pageData', this.renderReact);
}
});
diff --git a/x-pack/plugins/monitoring/public/views/elasticsearch/node/index.html b/x-pack/plugins/monitoring/public/views/elasticsearch/node/index.html
index ce43bed53101..9c35d613f6e4 100644
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/node/index.html
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/node/index.html
@@ -1,11 +1,11 @@
diff --git a/x-pack/plugins/monitoring/public/views/elasticsearch/node/index.js b/x-pack/plugins/monitoring/public/views/elasticsearch/node/index.js
index 52c3e310a656..9c92a525e2a2 100644
--- a/x-pack/plugins/monitoring/public/views/elasticsearch/node/index.js
+++ b/x-pack/plugins/monitoring/public/views/elasticsearch/node/index.js
@@ -8,18 +8,16 @@
* Controller for Node Detail
*/
import React from 'react';
-import { render } from 'react-dom';
-import { find, partial } from 'lodash';
+import { partial } from 'lodash';
import uiRoutes from 'ui/routes';
import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
import { getPageData } from './get_page_data';
import template from './index.html';
-import { timefilter } from 'ui/timefilter';
import { Node } from '../../../components/elasticsearch/node/node';
import { I18nProvider } from '@kbn/i18n/react';
import { labels } from '../../../components/elasticsearch/shard_allocation/lib/labels';
import { nodesByIndices } from '../../../components/elasticsearch/shard_allocation/transformers/nodes_by_indices';
-import moment from 'moment';
+import { MonitoringViewBaseController } from '../../base_controller';
uiRoutes.when('/elasticsearch/nodes/:node', {
template,
@@ -30,78 +28,63 @@ uiRoutes.when('/elasticsearch/nodes/:node', {
},
pageData: getPageData
},
- controller($injector, $scope, i18n) {
- timefilter.enableTimeRangeSelector();
- timefilter.enableAutoRefreshSelector();
+ controllerAs: 'monitoringElasticsearchNodeApp',
+ controller: class extends MonitoringViewBaseController {
+ constructor($injector, $scope, i18n) {
+ const $route = $injector.get('$route');
+ const kbnUrl = $injector.get('kbnUrl');
+ const nodeName = $route.current.params.node;
- const $route = $injector.get('$route');
- const kbnUrl = $injector.get('kbnUrl');
- const globalState = $injector.get('globalState');
- $scope.cluster = find($route.current.locals.clusters, { cluster_uuid: globalState.cluster_uuid });
- $scope.pageData = $route.current.locals.pageData;
+ super({
+ title: i18n('xpack.monitoring.elasticsearch.node.overview.routeTitle', {
+ defaultMessage: 'Elasticsearch - Nodes - {nodeName} - Overview',
+ values: {
+ nodeName,
+ }
+ }),
+ defaultData: {},
+ getPageData,
+ reactNodeId: 'monitoringElasticsearchNodeApp',
+ $scope,
+ $injector
+ });
- const title = $injector.get('title');
- const routeTitle = i18n('xpack.monitoring.elasticsearch.node.overview.routeTitle', {
- defaultMessage: 'Elasticsearch - Nodes - {nodeSummaryName} - Overview',
- values: {
- nodeSummaryName: $scope.pageData.nodeSummary.name
- }
- });
+ this.nodeName = nodeName;
- title($scope.cluster, routeTitle);
+ const features = $injector.get('features');
+ const callPageData = partial(getPageData, $injector);
+ // show/hide system indices in shard allocation view
+ $scope.showSystemIndices = features.isEnabled('showSystemIndices', false);
+ $scope.toggleShowSystemIndices = (isChecked) => {
+ $scope.showSystemIndices = isChecked;
+ // preserve setting in localStorage
+ features.update('showSystemIndices', isChecked);
+ // update the page
+ callPageData().then(data => this.data = data);
+ };
- const features = $injector.get('features');
- const callPageData = partial(getPageData, $injector);
- // show/hide system indices in shard allocation view
- $scope.showSystemIndices = features.isEnabled('showSystemIndices', false);
- $scope.toggleShowSystemIndices = (isChecked) => {
- $scope.showSystemIndices = isChecked;
- // preserve setting in localStorage
- features.update('showSystemIndices', isChecked);
- // update the page
- callPageData().then((pageData) => $scope.pageData = pageData);
- };
+ const transformer = nodesByIndices();
+ $scope.$watch(() => this.data, data => {
+ if (!data || !data.shards) {
+ return;
+ }
- const $executor = $injector.get('$executor');
- $executor.register({
- execute: () => callPageData(),
- handleResponse: (response) => {
- $scope.pageData = response;
- }
- });
+ const shards = data.shards;
+ $scope.totalCount = shards.length;
+ $scope.showing = transformer(shards, data.nodes);
+ $scope.labels = labels.node;
- $executor.start($scope);
-
- $scope.$on('$destroy', $executor.destroy);
-
- function onBrush({ xaxis }) {
- timefilter.setTime({
- from: moment(xaxis.from),
- to: moment(xaxis.to),
- mode: 'absolute',
+ this.renderReact(
+
+
+
+ );
});
}
-
- const transformer = nodesByIndices();
- this.renderReact = () => {
- const shards = $scope.pageData.shards;
- $scope.totalCount = shards.length;
- $scope.showing = transformer(shards, $scope.pageData.nodes);
- $scope.labels = labels.node;
-
- render(
-
-
- ,
- document.getElementById('monitoringElasticsearchNodeApp')
- );
- };
-
- $scope.$watch('pageData', this.renderReact);
}
});
diff --git a/x-pack/plugins/monitoring/public/views/kibana/instance/index.js b/x-pack/plugins/monitoring/public/views/kibana/instance/index.js
index 12989568f146..5de24f69ee04 100644
--- a/x-pack/plugins/monitoring/public/views/kibana/instance/index.js
+++ b/x-pack/plugins/monitoring/public/views/kibana/instance/index.js
@@ -8,8 +8,7 @@
* Kibana Instance
*/
import React from 'react';
-import { render } from 'react-dom';
-import { get, find } from 'lodash';
+import { get } from 'lodash';
import uiRoutes from'ui/routes';
import { ajaxErrorHandlersProvider } from 'plugins/monitoring/lib/ajax_error_handler';
import { routeInitProvider } from 'plugins/monitoring/lib/route_init';
@@ -19,6 +18,7 @@ import { EuiPage, EuiPageBody, EuiPageContent, EuiSpacer, EuiFlexGroup, EuiFlexI
import { MonitoringTimeseriesContainer } from '../../../components/chart';
import { DetailStatus } from 'plugins/monitoring/components/kibana/detail_status';
import { I18nProvider } from '@kbn/i18n/react';
+import { MonitoringViewBaseController } from '../../base_controller';
function getPageData($injector) {
const $http = $injector.get('$http');
@@ -51,87 +51,74 @@ uiRoutes.when('/kibana/instances/:uuid', {
},
pageData: getPageData
},
- controller($injector, $scope) {
- timefilter.enableTimeRangeSelector();
- timefilter.enableAutoRefreshSelector();
+ controllerAs: 'monitoringKibanaInstanceApp',
+ controller: class extends MonitoringViewBaseController {
+ constructor($injector, $scope) {
+ super({
+ title: `Kibana - ${get($scope.pageData, 'kibanaSummary.name')}`,
+ defaultData: {},
+ getPageData,
+ reactNodeId: 'monitoringKibanaInstanceApp',
+ $scope,
+ $injector
+ });
- const $route = $injector.get('$route');
- const globalState = $injector.get('globalState');
- $scope.cluster = find($route.current.locals.clusters, { cluster_uuid: globalState.cluster_uuid });
- $scope.pageData = $route.current.locals.pageData;
+ $scope.$watch(() => this.data, data => {
+ if (!data || !data.metrics) {
+ return;
+ }
- const title = $injector.get('title');
- title($scope.cluster, `Kibana - ${get($scope.pageData, 'kibanaSummary.name')}`);
+ this.setTitle(`Kibana - ${get(data, 'kibanaSummary.name')}`);
- const $executor = $injector.get('$executor');
- $executor.register({
- execute: () => getPageData($injector),
- handleResponse: (response) => $scope.pageData = response
- });
-
- $executor.start($scope);
-
- $scope.$on('$destroy', $executor.destroy);
-
- $scope.$watch('pageData', renderReact);
- renderReact();
-
- function renderReact() {
- const app = document.getElementById('monitoringKibanaInstanceApp');
- if (!app) {
- return;
- }
-
- const overviewPage = (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-
- render(overviewPage, app);
+ this.renderReact(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ });
}
}
});
diff --git a/x-pack/plugins/monitoring/public/views/kibana/overview/index.js b/x-pack/plugins/monitoring/public/views/kibana/overview/index.js
index 442822ad0483..94d7da85046c 100644
--- a/x-pack/plugins/monitoring/public/views/kibana/overview/index.js
+++ b/x-pack/plugins/monitoring/public/views/kibana/overview/index.js
@@ -8,8 +8,6 @@
* Kibana Overview
*/
import React from 'react';
-import { render } from 'react-dom';
-import { find } from 'lodash';
import uiRoutes from'ui/routes';
import { MonitoringTimeseriesContainer } from '../../../components/chart';
import { ajaxErrorHandlersProvider } from 'plugins/monitoring/lib/ajax_error_handler';
@@ -19,6 +17,7 @@ import { timefilter } from 'ui/timefilter';
import { EuiPage, EuiPageBody, EuiPageContent, EuiSpacer, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { ClusterStatus } from '../../../components/kibana/cluster_status';
import { I18nProvider } from '@kbn/i18n/react';
+import { MonitoringViewBaseController } from '../../base_controller';
function getPageData($injector) {
const $http = $injector.get('$http');
@@ -50,64 +49,49 @@ uiRoutes.when('/kibana', {
},
pageData: getPageData
},
- controller($injector, $scope) {
- timefilter.enableTimeRangeSelector();
- timefilter.enableAutoRefreshSelector();
+ controllerAs: 'monitoringKibanaOverviewApp',
+ controller: class extends MonitoringViewBaseController {
+ constructor($injector, $scope) {
+ super({
+ title: `Kibana`,
+ defaultData: {},
+ getPageData,
+ reactNodeId: 'monitoringKibanaOverviewApp',
+ $scope,
+ $injector
+ });
- const $route = $injector.get('$route');
- const globalState = $injector.get('globalState');
- $scope.cluster = find($route.current.locals.clusters, { cluster_uuid: globalState.cluster_uuid });
- $scope.pageData = $route.current.locals.pageData;
+ $scope.$watch(() => this.data, data => {
+ if (!data || !data.clusterStatus) {
+ return;
+ }
- const title = $injector.get('title');
- title($scope.cluster, 'Kibana');
+ this.renderReact(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- const $executor = $injector.get('$executor');
- $executor.register({
- execute: () => getPageData($injector),
- handleResponse: (response) => $scope.pageData = response
- });
-
- $executor.start($scope);
-
- $scope.$on('$destroy', $executor.destroy);
-
- $scope.$watch('pageData', renderReact);
- renderReact();
-
- function renderReact() {
- const app = document.getElementById('monitoringKibanaOverviewApp');
- if (!app) {
- return;
- }
-
- const overviewPage = (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-
- render(overviewPage, app);
+
+
+
+
+ );
+ });
}
}
});
diff --git a/x-pack/test/functional/apps/monitoring/kibana/instance.js b/x-pack/test/functional/apps/monitoring/kibana/instance.js
index a98af703ba89..df69604e50a5 100644
--- a/x-pack/test/functional/apps/monitoring/kibana/instance.js
+++ b/x-pack/test/functional/apps/monitoring/kibana/instance.js
@@ -36,7 +36,7 @@ export default function ({ getService, getPageObjects }) {
it('should have Instance Summary Status showing correct info', async () => {
expect(await instance.getSummary()).to.eql({
- transportAddress: 'tsullivan.local:5601',
+ transportAddress: 'Transport Address:\ntsullivan.local:5601',
osFreeMemory: 'OS Free Memory:\n1.5 GB',
version: 'Version:\n7.0.0-alpha1',
uptime: 'Uptime:\n3 minutes',