Skip to content

[6.x] [i18n] Translate Visual Builder(part_2) (#25800) #26170

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 26, 2018
Merged

[6.x] [i18n] Translate Visual Builder(part_2) (#25800) #26170

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
1 change: 1 addition & 0 deletions .i18nrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
"statusPage": "src/core_plugins/status_page",
"tileMap": "src/core_plugins/tile_map",
"timelion": "src/core_plugins/timelion",
"tsvb": "src/core_plugins/metrics",
"tagCloud": "src/core_plugins/tagcloud",
"xpack.graph": "x-pack/plugins/graph",
"xpack.grokDebugger": "x-pack/plugins/grokdebugger",
Expand Down
56 changes: 45 additions & 11 deletions src/core_plugins/metrics/public/components/lib/durations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,21 +17,55 @@
* under the License.
*/

import { i18n } from '@kbn/i18n';

export const durationOutputOptions = [
{ label: 'milliseconds', value: 'ms' },
{ label: 'seconds', value: 's' },
{ label: 'minutes', value: 'm' },
{ label: 'hours', value: 'h' },
{ label: 'days', value: 'd' },
{ label: 'weeks', value: 'w' },
{ label: 'months', value: 'M' },
{ label: 'years', value: 'Y' }
{
label: i18n.translate('tsvb.durationOptions.millisecondsLabel', { defaultMessage: 'milliseconds' }),
value: 'ms'
},
{
label: i18n.translate('tsvb.durationOptions.secondsLabel', { defaultMessage: 'seconds' }),
value: 's'
},
{
label: i18n.translate('tsvb.durationOptions.minutesLabel', { defaultMessage: 'minutes' }),
value: 'm'
},
{
label: i18n.translate('tsvb.durationOptions.hoursLabel', { defaultMessage: 'hours' }),
value: 'h'
},
{
label: i18n.translate('tsvb.durationOptions.daysLabel', { defaultMessage: 'days' }),
value: 'd'
},
{
label: i18n.translate('tsvb.durationOptions.weeksLabel', { defaultMessage: 'weeks' }),
value: 'w'
},
{
label: i18n.translate('tsvb.durationOptions.monthsLabel', { defaultMessage: 'months' }),
value: 'M'
},
{
label: i18n.translate('tsvb.durationOptions.yearsLabel', { defaultMessage: 'years' }),
value: 'Y'
}
];

export const durationInputOptions = [
{ label: 'picoseconds', value: 'ps' },
{ label: 'nanoseconds', value: 'ns' },
{ label: 'microseconds', value: 'us' },
{
label: i18n.translate('tsvb.durationOptions.picosecondsLabel', { defaultMessage: 'picoseconds' }),
value: 'ps'
},
{
label: i18n.translate('tsvb.durationOptions.nanosecondsLabel', { defaultMessage: 'nanoseconds' }),
value: 'ns'
},
{
label: i18n.translate('tsvb.durationOptions.microsecondsLabel', { defaultMessage: 'microseconds' }),
value: 'us' },
...durationOutputOptions
];

19 changes: 11 additions & 8 deletions src/core_plugins/metrics/public/components/lib/get_axis_label_string.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,16 @@
import { relativeOptions } from '../../../../../ui/public/timepicker/relative_options';
import _ from 'lodash';
import moment from 'moment';
import { i18n } from '@kbn/i18n';

const unitLookup = {
s: 'seconds',
m: 'minutes',
h: 'hours',
d: 'days',
w: 'weeks',
M: 'months',
y: 'years'
s: i18n.translate('tsvb.axisLabelOptions.secondsLabel', { defaultMessage: 'seconds' }),
m: i18n.translate('tsvb.axisLabelOptions.minutesLabel', { defaultMessage: 'minutes' }),
h: i18n.translate('tsvb.axisLabelOptions.hoursLabel', { defaultMessage: 'hours' }),
d: i18n.translate('tsvb.axisLabelOptions.daysLabel', { defaultMessage: 'days' }),
w: i18n.translate('tsvb.axisLabelOptions.weeksLabel', { defaultMessage: 'weeks' }),
M: i18n.translate('tsvb.axisLabelOptions.monthsLabel', { defaultMessage: 'months' }),
y: i18n.translate('tsvb.axisLabelOptions.yearsLabel', { defaultMessage: 'years' })
};
export function getAxisLabelString(interval) {
const units = _.pluck(_.clone(relativeOptions).reverse(), 'value')
Expand All @@ -38,7 +40,8 @@ export function getAxisLabelString(interval) {
if (Math.abs(as) > 1) {
const unitValue = Math.round(Math.abs(as));
const unitString = unitLookup[units[i]];
return `per ${unitValue} ${unitString}`;
return i18n.translate('tsvb.axisLabelOptions.axisLabel',
{ defaultMessage: 'per {unitValue} {unitString}', values: { unitValue, unitString } });
}
}
}
12 changes: 8 additions & 4 deletions src/core_plugins/metrics/public/components/lib/replace_vars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@

import _ from 'lodash';
import handlebars from 'handlebars/dist/handlebars';
import { i18n } from '@kbn/i18n';

export default function replaceVars(str, args = {}, vars = {}) {
try {
const template = handlebars.compile(str, { strict: true });
Expand All @@ -36,15 +38,17 @@ export default function replaceVars(str, args = {}, vars = {}) {
const badVar = e.message.split(/"/)[1];
e.error = {
caused_by: {
reason: `{{${badVar}}} is an unknown variable`,
title: 'Error processing your markdown'
reason: i18n.translate('tsvb.replaceVars.errors.unknownVarDescription',
{ defaultMessage: '{badVar} is an unknown variable', values: { badVar: '{{' + badVar + '}}' } }),
title: i18n.translate('tsvb.replaceVars.errors.unknownVarTitle', { defaultMessage: 'Error processing your markdown' })
}
};
} else {
e.error = {
caused_by: {
reason: 'Please verify you are only using markdown, known variables, and built-in Handlebars expressions',
title: 'Error processing your markdown'
reason: i18n.translate('tsvb.replaceVars.errors.markdownErrorDescription', {
defaultMessage: 'Please verify you are only using markdown, known variables, and built-in Handlebars expressions' }),
title: i18n.translate('tsvb.replaceVars.errors.markdownErrorTitle', { defaultMessage: 'Error processing your markdown' })
}
};
}
Expand Down
102 changes: 85 additions & 17 deletions src/core_plugins/metrics/public/components/panel_config/gauge.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,9 @@ import {
EuiTitle,
EuiHorizontalRule,
} from '@elastic/eui';
import { injectI18n, FormattedMessage } from '@kbn/i18n/react';

class GaugePanelConfig extends Component {
class GaugePanelConfigUi extends Component {

constructor(props) {
super(props);
Expand All @@ -70,6 +71,7 @@ class GaugePanelConfig extends Component {

render() {
const { selectedTab } = this.state;
const { intl } = this.props;
const defaults = {
gauge_max: '',
filter: '',
Expand All @@ -81,8 +83,16 @@ class GaugePanelConfig extends Component {
const handleSelectChange = createSelectHandler(this.props.onChange);
const handleTextChange = createTextHandler(this.props.onChange);
const styleOptions = [
{ label: 'Circle', value: 'circle' },
{ label: 'Half Circle', value: 'half' }
{
label: intl.formatMessage({
id: 'tsvb.gauge.styleOptions.circleLabel', defaultMessage: 'Circle' }),
value: 'circle'
},
{
label: intl.formatMessage({
id: 'tsvb.gauge.styleOptions.halfCircleLabel', defaultMessage: 'Half Circle' }),
value: 'half'
}
];
const htmlId = htmlIdGenerator();
const selectedGaugeStyleOption = styleOptions.find(option => {
Expand All @@ -104,7 +114,14 @@ class GaugePanelConfig extends Component {
view = (
<div className="tvbPanelConfig__container">
<EuiPanel>
<EuiTitle size="s"><span>Data</span></EuiTitle>
<EuiTitle size="s">
<span>
<FormattedMessage
id="tsvb.gauge.optionsTab.dataLabel"
defaultMessage="Data"
/>
</span>
</EuiTitle>
<EuiSpacer size="m" />

<IndexPattern
Expand All @@ -119,7 +136,10 @@ class GaugePanelConfig extends Component {
<EuiFlexItem>
<EuiFormRow
id={htmlId('panelFilter')}
label="Panel filter"
label={(<FormattedMessage
id="tsvb.gauge.optionsTab.panelFilterLabel"
defaultMessage="Panel filter"
/>)}
fullWidth
>
<EuiFieldText
Expand All @@ -130,7 +150,12 @@ class GaugePanelConfig extends Component {
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFormLabel>Ignore global filter?</EuiFormLabel>
<EuiFormLabel>
<FormattedMessage
id="tsvb.gauge.optionsTab.ignoreGlobalFilterLabel"
defaultMessage="Ignore global filter?"
/>
</EuiFormLabel>
<EuiSpacer size="s" />
<YesNo
value={model.ignore_global_filter}
Expand All @@ -144,14 +169,24 @@ class GaugePanelConfig extends Component {
<EuiSpacer />

<EuiPanel>
<EuiTitle size="s"><span>Style</span></EuiTitle>
<EuiTitle size="s">
<span>
<FormattedMessage
id="tsvb.gauge.optionsTab.styleLabel"
defaultMessage="Style"
/>
</span>
</EuiTitle>
<EuiSpacer size="m" />

<EuiFlexGroup responsive={false} wrap={true}>
<EuiFlexItem>
<EuiFormRow
id={htmlId('gaugeMax')}
label="Gauge max (empty for auto)"
label={(<FormattedMessage
id="tsvb.gauge.optionsTab.gaugeMaxLabel"
defaultMessage="Gauge max (empty for auto)"
/>)}
>
{/*
EUITODO: The following input couldn't be converted to EUI because of type mis-match.
Expand All @@ -169,7 +204,10 @@ class GaugePanelConfig extends Component {
<EuiFlexItem>
<EuiFormRow
id={htmlId('gaugeStyle')}
label="Gauge style"
label={(<FormattedMessage
id="tsvb.gauge.optionsTab.gaugeStyleLabel"
defaultMessage="Gauge style"
/>)}
>
<EuiComboBox
isClearable={false}
Expand All @@ -183,7 +221,10 @@ class GaugePanelConfig extends Component {
<EuiFlexItem>
<EuiFormRow
id={htmlId('innerLine')}
label="Inner line width"
label={(<FormattedMessage
id="tsvb.gauge.optionsTab.innerLineWidthLabel"
defaultMessage="Inner line width"
/>)}
>
<EuiFieldNumber
onChange={handleTextChange('gauge_inner_width')}
Expand All @@ -194,7 +235,10 @@ class GaugePanelConfig extends Component {
<EuiFlexItem>
<EuiFormRow
id={htmlId('gaugeLine')}
label="Gauge line width"
label={(<FormattedMessage
id="tsvb.gauge.optionsTab.gaugeLineWidthLabel"
defaultMessage="Gauge line width"
/>)}
>
<EuiFieldNumber
onChange={handleTextChange('gauge_width')}
Expand All @@ -208,7 +252,12 @@ class GaugePanelConfig extends Component {

<EuiFlexGroup responsive={false} wrap={true} alignItems="center">
<EuiFlexItem grow={false}>
<EuiFormLabel style={{ marginBottom: 0 }}>Background color:</EuiFormLabel>
<EuiFormLabel style={{ marginBottom: 0 }}>
<FormattedMessage
id="tsvb.gauge.optionsTab.backgroundColorLabel"
defaultMessage="Background color:"
/>
</EuiFormLabel>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<ColorPicker
Expand All @@ -218,7 +267,12 @@ class GaugePanelConfig extends Component {
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFormLabel style={{ marginBottom: 0 }}>Inner color:</EuiFormLabel>
<EuiFormLabel style={{ marginBottom: 0 }}>
<FormattedMessage
id="tsvb.gauge.optionsTab.innerColorLabel"
defaultMessage="Inner color:"
/>
</EuiFormLabel>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<ColorPicker
Expand All @@ -231,7 +285,14 @@ class GaugePanelConfig extends Component {

<EuiHorizontalRule />

<EuiTitle size="xxs"><span>Color rules</span></EuiTitle>
<EuiTitle size="xxs">
<span>
<FormattedMessage
id="tsvb.gauge.optionsTab.colorRulesLabel"
defaultMessage="Color rules"
/>
</span>
</EuiTitle>
<EuiSpacer size="s" />
<ColorRules
primaryName="gauge color"
Expand All @@ -253,13 +314,19 @@ class GaugePanelConfig extends Component {
isSelected={selectedTab === 'data'}
onClick={() => this.switchTab('data')}
>
Data
<FormattedMessage
id="tsvb.gauge.dataTab.dataButtonLabel"
defaultMessage="Data"
/>
</EuiTab>
<EuiTab
isSelected={selectedTab === 'options'}
onClick={() => this.switchTab('options')}
>
Panel options
<FormattedMessage
id="tsvb.gauge.optionsTab.panelOptionsButtonLabel"
defaultMessage="Panel options"
/>
</EuiTab>
</EuiTabs>
{view}
Expand All @@ -269,10 +336,11 @@ class GaugePanelConfig extends Component {

}

GaugePanelConfig.propTypes = {
GaugePanelConfigUi.propTypes = {
fields: PropTypes.object,
model: PropTypes.object,
onChange: PropTypes.func,
};

const GaugePanelConfig = injectI18n(GaugePanelConfigUi);
export default GaugePanelConfig;
Loading