Skip to content

[6.x] Feature/translate monitoring elasticsearch and kibana (part_ 1) (#24717) #25999

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
maryia-lapata merged 1 commit into from
Nov 21, 2018
Merged

[6.x] Feature/translate monitoring elasticsearch and kibana (part_ 1) (#24717) #25999

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 68 additions & 15 deletions x-pack/plugins/monitoring/public/components/elasticsearch/ccr/ccr.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,13 @@ import {
} from '@elastic/eui';

import './ccr.css';
import { FormattedMessage, injectI18n } from '@kbn/i18n/react';

function toSeconds(ms) {
return Math.floor(ms / 1000) + 's';
}

export class Ccr extends Component {
class CcrUI extends Component {
constructor(props) {
super(props);
this.state = {
Expand All @@ -32,6 +33,7 @@ export class Ccr extends Component {
}

toggleShards(index, shards) {
const { intl } = this.props;
const itemIdToExpandedRowMap = {
...this.state.itemIdToExpandedRowMap
};
Expand All @@ -54,7 +56,10 @@ export class Ccr extends Component {
columns={[
{
field: 'shardId',
name: 'Shard',
name: intl.formatMessage({
id: 'xpack.monitoring.elasticsearch.ccr.shardsTable.shardColumnTitle',
defaultMessage: 'Shard'
}),
render: shardId => {
return (
<EuiLink href={`#/elasticsearch/ccr/${index}/shard/${shardId}`}>
Expand All @@ -68,7 +73,10 @@ export class Ccr extends Component {
},
{
field: 'syncLagOps',
name: 'Sync Lag (ops)',
name: intl.formatMessage({
id: 'xpack.monitoring.elasticsearch.ccr.shardsTable.syncLagOpsColumnTitle',
defaultMessage: 'Sync Lag (ops)'
}),
render: (syncLagOps, data) => (
<span>
{syncLagOps}
Expand All @@ -78,9 +86,25 @@ export class Ccr extends Component {
type="iInCircle"
content={(
<Fragment>
<span>Leader lag: {data.syncLagOpsLeader}</span>
<span>
<FormattedMessage
id="xpack.monitoring.elasticsearch.ccr.shardsTable.syncLagOpsColumn.leaderLagTooltip"
defaultMessage="Leader lag: {syncLagOpsLeader}"
values={{
syncLagOpsLeader: data.syncLagOpsLeader
}}
/>
</span>
<br/>
<span>Follower lag: {data.syncLagOpsFollower}</span>
<span>
<FormattedMessage
id="xpack.monitoring.elasticsearch.ccr.shardsTable.syncLagOpsColumn.followerLagTooltip"
defaultMessage="Follower lag: {syncLagOpsFollower}"
values={{
syncLagOpsFollower: data.syncLagOpsFollower
}}
/>
</span>
</Fragment>
)}
position="right"
Expand All @@ -90,16 +114,25 @@ export class Ccr extends Component {
},
{
field: 'syncLagTime',
name: 'Last fetch time',
name: intl.formatMessage({
id: 'xpack.monitoring.elasticsearch.ccr.shardsTable.lastFetchTimeColumnTitle',
defaultMessage: 'Last fetch time'
}),
render: syncLagTime => <span>{toSeconds(syncLagTime)}</span>
},
{
field: 'opsSynced',
name: 'Ops synced'
name: intl.formatMessage({
id: 'xpack.monitoring.elasticsearch.ccr.shardsTable.opsSyncedColumnTitle',
defaultMessage: 'Ops synced'
}),
},
{
field: 'error',
name: 'Error',
name: intl.formatMessage({
id: 'xpack.monitoring.elasticsearch.ccr.shardsTable.errorColumnTitle',
defaultMessage: 'Error'
}),
render: error => (
<EuiTextColor color="danger">
{error}
Expand All @@ -116,7 +149,7 @@ export class Ccr extends Component {
}

renderTable() {
const { data } = this.props;
const { data, intl } = this.props;
const items = data;

let pagination = {
Expand All @@ -141,7 +174,10 @@ export class Ccr extends Component {
columns={[
{
field: 'index',
name: 'Index',
name: intl.formatMessage({
id: 'xpack.monitoring.elasticsearch.ccr.ccrListingTable.indexColumnTitle',
defaultMessage: 'Index'
}),
sortable: true,
render: (index, { shards }) => {
const expanded = !!this.state.itemIdToExpandedRowMap[index];
Expand All @@ -157,28 +193,43 @@ export class Ccr extends Component {
{
field: 'follows',
sortable: true,
name: 'Follows'
name: intl.formatMessage({
id: 'xpack.monitoring.elasticsearch.ccr.ccrListingTable.followsColumnTitle',
defaultMessage: 'Follows'
}),
},
{
field: 'syncLagOps',
sortable: true,
name: 'Sync Lag (ops)',
name: intl.formatMessage({
id: 'xpack.monitoring.elasticsearch.ccr.ccrListingTable.syncLagOpsColumnTitle',
defaultMessage: 'Sync Lag (ops)'
}),
},
{
field: 'syncLagTime',
sortable: true,
name: 'Last fetch time',
name: intl.formatMessage({
id: 'xpack.monitoring.elasticsearch.ccr.ccrListingTable.lastFetchTimeColumnTitle',
defaultMessage: 'Last fetch time'
}),
render: syncLagTime => <span>{toSeconds(syncLagTime)}</span>
},
{
field: 'opsSynced',
sortable: true,
name: 'Ops synced'
name: intl.formatMessage({
id: 'xpack.monitoring.elasticsearch.ccr.ccrListingTable.opsSyncedColumnTitle',
defaultMessage: 'Ops synced'
}),
},
{
field: 'error',
sortable: true,
name: 'Error',
name: intl.formatMessage({
id: 'xpack.monitoring.elasticsearch.ccr.ccrListingTable.errorColumnTitle',
defaultMessage: 'Error'
}),
render: error => (
<EuiTextColor color="danger">
{error}
Expand Down Expand Up @@ -209,3 +260,5 @@ export class Ccr extends Component {
);
}
}

export const Ccr = injectI18n(CcrUI);
4 changes: 2 additions & 2 deletions x-pack/plugins/monitoring/public/components/elasticsearch/ccr/ccr.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/

import React from 'react';
import { shallow } from 'enzyme';
import { shallowWithIntl } from '../../../../../../test_utils/enzyme_helpers';
import { Ccr } from './ccr';

describe('Ccr', () => {
Expand Down Expand Up @@ -67,7 +67,7 @@ describe('Ccr', () => {
}
];

const component = shallow(<Ccr data={data} />);
const component = shallowWithIntl(<Ccr.WrappedComponent data={data} />);
expect(component).toMatchSnapshot();
});
});
14 changes: 11 additions & 3 deletions ...monitoring/public/components/elasticsearch/ccr_shard/__snapshots__/ccr_shard.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,11 @@ exports[`CcrShard that is renders an exception properly 1`] = `
color="danger"
component="span"
>
Errors
<FormattedMessage
defaultMessage="Errors"
id="xpack.monitoring.elasticsearch.ccrShard.errorsTableTitle"
values={Object {}}
/>
</EuiTextColor>
</h3>
</EuiTitle>
Expand Down Expand Up @@ -63,7 +67,7 @@ exports[`CcrShard that it renders normally 1`] = `
<EuiPageBody
restrictWidth={false}
>
<Status
<InjectIntl(StatusUI)
formattedLeader="leader on remote"
oldestStat={
Object {
Expand Down Expand Up @@ -161,7 +165,11 @@ exports[`CcrShard that it renders normally 1`] = `
textTransform="none"
>
<h2>
Advanced
<FormattedMessage
defaultMessage="Advanced"
id="xpack.monitoring.elasticsearch.ccrShard.latestStateAdvancedButtonLabel"
values={Object {}}
/>
</h2>
</EuiTitle>
}
Expand Down
35 changes: 29 additions & 6 deletions x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/ccr_shard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,9 @@ import {
import { MonitoringTimeseriesContainer } from '../../chart';
import { Status } from './status';
import { formatDateTimeLocal } from '../../../../common/formatting';
import { FormattedMessage, injectI18n } from '@kbn/i18n/react';

export class CcrShard extends PureComponent {
class CcrShardUI extends PureComponent {
renderCharts() {
const { metrics } = this.props;
const seriesToShow = [
Expand All @@ -49,26 +50,37 @@ export class CcrShard extends PureComponent {
}

renderErrors() {
const { stat } = this.props;
const { stat, intl } = this.props;
if (stat.read_exceptions && stat.read_exceptions.length > 0) {
return (
<Fragment>
<EuiPanel>
<EuiTitle size="s" color="danger">
<h3>
<EuiTextColor color="danger">Errors</EuiTextColor>
<EuiTextColor color="danger">
<FormattedMessage
id="xpack.monitoring.elasticsearch.ccrShard.errorsTableTitle"
defaultMessage="Errors"
/>
</EuiTextColor>
</h3>
</EuiTitle>
<EuiSpacer size="s"/>
<EuiBasicTable
items={stat.read_exceptions}
columns={[
{
name: 'Type',
name: intl.formatMessage({
id: 'xpack.monitoring.elasticsearch.ccrShard.errorsTable.typeColumnTitle',
defaultMessage: 'Type'
}),
field: 'exception.type'
},
{
name: 'Reason',
name: intl.formatMessage({
id: 'xpack.monitoring.elasticsearch.ccrShard.errorsTable.reasonColumnTitle',
defaultMessage: 'Reason'
}),
field: 'exception.reason',
width: '75%'
}
Expand All @@ -88,7 +100,16 @@ export class CcrShard extends PureComponent {
return (
<EuiAccordion
id="ccrLatestStat"
buttonContent={<EuiTitle><h2>Advanced</h2></EuiTitle>}
buttonContent={(
<EuiTitle>
<h2>
<FormattedMessage
id="xpack.monitoring.elasticsearch.ccrShard.latestStateAdvancedButtonLabel"
defaultMessage="Advanced"
/>
</h2>
</EuiTitle>
)}
paddingSize="l"
>
<Fragment>
Expand Down Expand Up @@ -123,3 +144,5 @@ export class CcrShard extends PureComponent {
);
}
}

export const CcrShard = injectI18n(CcrShardUI);
6 changes: 3 additions & 3 deletions x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/ccr_shard.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/

import React from 'react';
import { shallow } from 'enzyme';
import { shallowWithIntl } from '../../../../../../test_utils/enzyme_helpers';
import { CcrShard } from './ccr_shard';

describe('CcrShard', () => {
Expand Down Expand Up @@ -45,7 +45,7 @@ describe('CcrShard', () => {
};

test('that it renders normally', () => {
const component = shallow(<CcrShard {...props} />);
const component = shallowWithIntl(<CcrShard.WrappedComponent {...props} />);
expect(component).toMatchSnapshot();
});

Expand All @@ -63,7 +63,7 @@ describe('CcrShard', () => {
}
};

const component = shallow(<CcrShard {...localProps} />);
const component = shallowWithIntl(<CcrShard.WrappedComponent {...localProps} />);
expect(component.find('EuiPanel').get(0)).toMatchSnapshot();
});
});
Loading