github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

Swapped kui base class with eui equivalent (#34644) (#34764)

Browse source 
* Swapped kui base class with eui equivalent

* Added the react component instead
This commit is contained in:
igoristic 2019-04-09 13:47:23 -04:00 • committed by GitHub
parent 197703c5f8
commit c5d6cdd243
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 57 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

24
x-pack/plugins/monitoring/public/directives/main/index.html
View file

@ -204,25 +204,11 @@
i18n-default-message="Advanced"
>
</a>
<div
ng-if="monitoringMain.pipelineVersions"
class="euiFlexGroup euiFlexGroup--gutterMedium"
>
<h1 class="kuiTitle euiFlexItem">{{ monitoringMain.pipelineId }}</h1>
<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
class="kuiLocalTab"
ng-if="monitoringMain.pipelineVersions.length"
id="dropdown-elm"
ng-init="monitoringMain.dropdownLoadedHandler()">
</div>
</div>

53
x-pack/plugins/monitoring/public/directives/main/index.js
View file

@ -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(
<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
*/
@ -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);
});
}
};