diff --git a/x-pack/plugins/monitoring/public/directives/main/index.html b/x-pack/plugins/monitoring/public/directives/main/index.html
index 28870832c0b1..5ea7ad1d05df 100644
--- a/x-pack/plugins/monitoring/public/directives/main/index.html
+++ b/x-pack/plugins/monitoring/public/directives/main/index.html
@@ -204,25 +204,11 @@
i18n-default-message="Advanced"
>
-
-
{{ monitoringMain.pipelineId }}
-
+
diff --git a/x-pack/plugins/monitoring/public/directives/main/index.js b/x-pack/plugins/monitoring/public/directives/main/index.js
index a0e3504cf5cb..b9af69d55c72 100644
--- a/x-pack/plugins/monitoring/public/directives/main/index.js
+++ b/x-pack/plugins/monitoring/public/directives/main/index.js
@@ -3,13 +3,57 @@
* 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 { render, unmountComponentAtNode } from 'react-dom';
+import {
+ EuiSelect,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiTitle
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
import { get } from 'lodash';
import { uiModules } from 'ui/modules';
import template from './index.html';
import { shortenPipelineHash } from '../../../common/formatting';
import 'ui/directives/kbn_href';
+const setOptions = (controller) => {
+ if (!controller.pipelineVersions || !controller.pipelineVersions.length || !controller.pipelineDropdownElement) {
+ return;
+ }
+
+ render(
+
+
+
+ {controller.pipelineId}
+
+
+
+ {
+ return {
+ text: i18n.translate('xpack.monitoring.logstashNavigation.pipelineVersionDescription',
+ {
+ defaultMessage: 'Version active {relativeLastSeen} and first seen {relativeFirstSeen}',
+ values: {
+ relativeLastSeen: option.relativeLastSeen,
+ relativeFirstSeen: option.relativeFirstSeen
+ }
+ }
+ ),
+ value: option.hash
+ };
+ })}
+ onChange={controller.onChangePipelineHash}
+ />
+
+
+ , controller.pipelineDropdownElement);
+};
+
/*
* Manage data and provide helper methods for the "main" directive's template
*/
@@ -26,6 +70,11 @@ export class MonitoringMainController {
this.inApm = false;
}
+ dropdownLoadedHandler() {
+ this.pipelineDropdownElement = document.querySelector('#dropdown-elm');
+ setOptions(this);
+ }
+
// kick things off from the directive link function
setup(options) {
this._licenseService = options.licenseService;
@@ -114,8 +163,10 @@ uiModule.directive('monitoringMain', (breadcrumbs, license, kbnUrl, $injector) =
Object.keys(setupObj.attributes).forEach(key => {
attributes.$observe(key, () => controller.setup(getSetupObj()));
});
+ scope.$on('$destroy', () => controller.pipelineDropdownElement && unmountComponentAtNode(controller.pipelineDropdownElement));
scope.$watch('pageData.versions', versions => {
controller.pipelineVersions = versions;
+ setOptions(controller);
});
}
};