Swapped kui base class with eui equivalent (#34644)
* Swapped kui base class with eui equivalent * Added the react component instead
This commit is contained in:
parent
cd532cd8f7
commit
50fab1aea3
|
@ -204,25 +204,11 @@
|
||||||
i18n-default-message="Advanced"
|
i18n-default-message="Advanced"
|
||||||
>
|
>
|
||||||
</a>
|
</a>
|
||||||
<div
|
<div
|
||||||
ng-if="monitoringMain.pipelineVersions"
|
class="kuiLocalTab"
|
||||||
class="euiFlexGroup euiFlexGroup--gutterMedium"
|
ng-if="monitoringMain.pipelineVersions.length"
|
||||||
>
|
id="dropdown-elm"
|
||||||
<h1 class="kuiTitle euiFlexItem">{{ monitoringMain.pipelineId }}</h1>
|
ng-init="monitoringMain.dropdownLoadedHandler()">
|
||||||
<select
|
|
||||||
ng-model="monitoringMain.pipelineHash"
|
|
||||||
class="kuiSelect euiFlexItem"
|
|
||||||
ng-change="monitoringMain.onChangePipelineHash()"
|
|
||||||
>
|
|
||||||
<option
|
|
||||||
ng-repeat="version in monitoringMain.pipelineVersions"
|
|
||||||
ng-value="version.hash"
|
|
||||||
i18n-id="xpack.monitoring.logstashNavigation.pipelineVersionDescription"
|
|
||||||
i18n-default-message="Version active {relativeLastSeen} and first seen {relativeFirstSeen}"
|
|
||||||
i18n-values="{relativeLastSeen: version.relativeLastSeen, relativeFirstSeen: version.relativeFirstSeen}"
|
|
||||||
>
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -3,13 +3,57 @@
|
||||||
* or more contributor license agreements. Licensed under the Elastic License;
|
* or more contributor license agreements. Licensed under the Elastic License;
|
||||||
* you may not use this file except in compliance with 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 { get } from 'lodash';
|
||||||
import { uiModules } from 'ui/modules';
|
import { uiModules } from 'ui/modules';
|
||||||
import template from './index.html';
|
import template from './index.html';
|
||||||
import { shortenPipelineHash } from '../../../common/formatting';
|
import { shortenPipelineHash } from '../../../common/formatting';
|
||||||
import 'ui/directives/kbn_href';
|
import 'ui/directives/kbn_href';
|
||||||
|
|
||||||
|
const setOptions = (controller) => {
|
||||||
|
if (!controller.pipelineVersions || !controller.pipelineVersions.length || !controller.pipelineDropdownElement) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
render(
|
||||||
|
<EuiFlexGroup>
|
||||||
|
<EuiFlexItem grow={false}>
|
||||||
|
<EuiTitle style={{ maxWidth: 400, lineHeight: '40px', overflow: 'hidden', whiteSpace: 'nowrap' }}>
|
||||||
|
<h2>{controller.pipelineId}</h2>
|
||||||
|
</EuiTitle>
|
||||||
|
</EuiFlexItem>
|
||||||
|
<EuiFlexItem grow={false}>
|
||||||
|
<EuiSelect
|
||||||
|
value={controller.pipelineHash}
|
||||||
|
options={controller.pipelineVersions.map((option) => {
|
||||||
|
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}
|
||||||
|
/>
|
||||||
|
</EuiFlexItem>
|
||||||
|
</EuiFlexGroup>
|
||||||
|
, controller.pipelineDropdownElement);
|
||||||
|
};
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Manage data and provide helper methods for the "main" directive's template
|
* Manage data and provide helper methods for the "main" directive's template
|
||||||
*/
|
*/
|
||||||
|
@ -26,6 +70,11 @@ export class MonitoringMainController {
|
||||||
this.inApm = false;
|
this.inApm = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
dropdownLoadedHandler() {
|
||||||
|
this.pipelineDropdownElement = document.querySelector('#dropdown-elm');
|
||||||
|
setOptions(this);
|
||||||
|
}
|
||||||
|
|
||||||
// kick things off from the directive link function
|
// kick things off from the directive link function
|
||||||
setup(options) {
|
setup(options) {
|
||||||
this._licenseService = options.licenseService;
|
this._licenseService = options.licenseService;
|
||||||
|
@ -114,8 +163,10 @@ uiModule.directive('monitoringMain', (breadcrumbs, license, kbnUrl, $injector) =
|
||||||
Object.keys(setupObj.attributes).forEach(key => {
|
Object.keys(setupObj.attributes).forEach(key => {
|
||||||
attributes.$observe(key, () => controller.setup(getSetupObj()));
|
attributes.$observe(key, () => controller.setup(getSetupObj()));
|
||||||
});
|
});
|
||||||
|
scope.$on('$destroy', () => controller.pipelineDropdownElement && unmountComponentAtNode(controller.pipelineDropdownElement));
|
||||||
scope.$watch('pageData.versions', versions => {
|
scope.$watch('pageData.versions', versions => {
|
||||||
controller.pipelineVersions = versions;
|
controller.pipelineVersions = versions;
|
||||||
|
setOptions(controller);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue