maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Canvas] Translate More Expression Arguments (#47028)

Browse source 
* Translate other canvas arguments

* Update Snapshot

* Fix incorrect i18n key
This commit is contained in:
Corey Robertson 2019-10-09 13:58:13 -04:00 committed by GitHub
parent 6e6fc37276
commit 9187941d05
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 335 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
x-pack/legacy/plugins/canvas/canvas_plugin_src/strings/ui.ts
View file

@ -389,6 +389,20 @@ export const DataSourceStrings = {
};
export const ModelStrings = {
Math: {
getDisplayName: () =>
i18n.translate('xpack.canvas.uis.models.mathTitle', {
defaultMessage: 'Measure',
}),
getValueDisplayName: () =>
i18n.translate('xpack.canvas.uis.models.math.args.valueTitle', {
defaultMessage: 'Value',
}),
getValueHelp: () =>
i18n.translate('xpack.canvas.uis.models.math.args.valueLabel', {
defaultMessage: 'Function and column to use in extracting a value from the datasource',
}),
},
PointSeries: {
getColorDisplayName: () =>
i18n.translate('xpack.canvas.uis.models.pointSeries.args.colorTitle', {
@ -594,6 +608,10 @@ export const ViewStrings = {
i18n.translate('xpack.canvas.uis.views.metricTitle', {
defaultMessage: 'Metric',
}),
getNumberDisplayName: () =>
i18n.translate('xpack.canvas.uis.views.numberArgTitle', {
defaultMessage: 'Number',
}),
getLabelDisplayName: () =>
i18n.translate('xpack.canvas.uis.views.metric.args.labelArgTitle', {
defaultMessage: 'Label',

9
x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/models/math.js
View file

@ -6,15 +6,18 @@
import { get } from 'lodash';
import { getState, getValue } from '../../../public/lib/resolved_arg';
import { ModelStrings } from '../../strings';
const { Math: strings } = ModelStrings;
export const math = () => ({
name: 'math',
displayName: 'Measure',
displayName: strings.getDisplayName(),
args: [
{
name: '_',
displayName: 'Value',
help: 'Function and column to use in extracting a value from the datasource',
displayName: strings.getValueDisplayName(),
help: strings.getValueHelp(),
argType: 'datacolumn',
options: {
onlyMath: false,

2
x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/views/metric.js
View file

@ -13,7 +13,7 @@ const { Metric: strings } = ViewStrings;
export const metric = () => ({
name: 'metric',
displayName: strings.getDisplayName(),
modelArgs: [['_', { label: 'Number' }]],
modelArgs: [['_', { label: strings.getNumberDisplayName() }]],
requiresContext: false,
args: [
{

221
x-pack/legacy/plugins/canvas/i18n/expression_types.ts Normal file
View file

@ -0,0 +1,221 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import { i18n } from '@kbn/i18n';
import { LUCENE } from './constants';
export const ArgTypesStrings = {
Color: {
getDisplayName: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.colorDisplayName', {
defaultMessage: 'Color',
}),
getHelp: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.colorHelp', {
defaultMessage: 'Color picker',
}),
},
ContainerStyle: {
getDisplayName: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.containerStyleTitle', {
defaultMessage: 'Container style',
}),
getHelp: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.containerStyleLabel', {
defaultMessage: 'Tweak the appearance of the element container',
}),
getAppearanceTitle: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.containerStyle.appearanceTitle', {
defaultMessage: 'Appearance',
}),
getBorderTitle: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.containerStyle.borderTitle', {
defaultMessage: 'Border',
}),
getPaddingLabel: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.containerStyle.paddingLabel', {
defaultMessage: 'Padding',
}),
getOpacityLabel: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.containerStyle.opacityLabel', {
defaultMessage: 'Opacity',
}),
getOverflowLabel: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.containerStyle.overflowLabel', {
defaultMessage: 'Overflow',
}),
getOverflowHiddenOption: () =>
i18n.translate(
'xpack.canvas.expressionTypes.argTypes.containerStyle.overflowHiddenDropDown',
{
defaultMessage: 'Hidden',
}
),
getOverflowVisibleOption: () =>
i18n.translate(
'xpack.canvas.expressionTypes.argTypes.containerStyle.overflowVisibleDropDown',
{
defaultMessage: 'Visible',
}
),
getThicknessLabel: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.containerStyle.thicknessLabel', {
defaultMessage: 'Thickness',
}),
getStyleLabel: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.containerStyle.styleLabel', {
defaultMessage: 'Style',
}),
getRadiusLabel: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.containerStyle.radiusLabel', {
defaultMessage: 'Radius',
}),
getColorLabel: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.containerStyle.colorLabel', {
defaultMessage: 'Color',
}),
},
Font: {
getDisplayName: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.fontTitle', {
defaultMessage: 'Text settings',
}),
getHelp: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.fontHelpLabel', {
defaultMessage: 'Set the font, size and color',
}),
},
SeriesStyle: {
getDisplayName: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyleTitle', {
defaultMessage: 'Series style',
}),
getHelp: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyleLabel', {
defaultMessage: 'Set the style for a selected named series',
}),
getColorLabel: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.colorLabel', {
defaultMessage: 'Color',
}),
getStyleLabel: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.styleLabel', {
defaultMessage: 'Style',
}),
getRemoveAriaLabel: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.removeAriaLabel', {
defaultMessage: 'Remove Series Color',
}),
getNoSeriesTooltip: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.noSeriesTooltip', {
defaultMessage: 'Data has no series to style, add a color dimension',
}),
getSeriesIdentifierLabel: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.seriesIdentifierLabel', {
defaultMessage: 'Series Identifier',
}),
getSelectSeriesOption: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.selectSeriesDropDown', {
defaultMessage: 'Select Series',
}),
getLineLabel: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.lineLabel', {
defaultMessage: 'Line',
}),
getBarLabel: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.barLabel', {
defaultMessage: 'Bar',
}),
getPointLabel: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.pointLabel', {
defaultMessage: 'Point',
}),
getNoneOption: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.noneDropDown', {
defaultMessage: 'None',
}),
},
};
export const DataSourceStrings = {
ESDocs: {
getDisplayName: () =>
i18n.translate('xpack.canvas.expressionTypes.datasources.esdocsTitle', {
defaultMessage: 'Elasticsearch raw documents',
}),
getHelp: () =>
i18n.translate('xpack.canvas.expressionTypes.datasources.esdocsLabel', {
defaultMessage: 'Pull back raw documents from elasticsearch',
}),
getWarningTitle: () =>
i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.warningTitle', {
defaultMessage: 'Be careful',
}),
getWarning: () =>
i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.warningDescription', {
defaultMessage: `
The Elasticsearch Docs datasource is used to pull documents directly from Elasticsearch
without the use of aggregations. It is best used with low volume datasets and in
situations where you need to view raw documents or plot exact, non-aggregated values on a
chart.`,
}),
getIndexTitle: () =>
i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.indexTitle', {
defaultMessage: 'Index',
}),
getIndexLabel: () =>
i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.indexLabel', {
defaultMessage: 'Enter an index name or select an index pattern',
}),
getQueryTitle: () =>
i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.queryTitle', {
defaultMessage: 'Query',
}),
getQueryLabel: () =>
i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.queryLabel', {
defaultMessage: '{lucene} query string syntax',
values: {
lucene: LUCENE,
},
}),
getSortFieldTitle: () =>
i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.sortFieldTitle', {
defaultMessage: 'Sort Field',
}),
getSortFieldLabel: () =>
i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.sortFieldLabel', {
defaultMessage: 'Document sort field',
}),
getSortOrderTitle: () =>
i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.sortOrderTitle', {
defaultMessage: 'Sort Order',
}),
getSortOrderLabel: () =>
i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.sortOrderLabel', {
defaultMessage: 'Document sort order',
}),
getFieldsTitle: () =>
i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.fieldsTitle', {
defaultMessage: 'Fields',
}),
getFieldsLabel: () =>
i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.fieldsLabel', {
defaultMessage: 'The fields to extract. Kibana scripted fields are not currently available',
}),
getFieldsWarningLabel: () =>
i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.fieldsWarningLabel', {
defaultMessage: 'This datasource performs best with 10 or fewer fields',
}),
getAscendingOption: () =>
i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.ascendingDropDown', {
defaultMessage: 'Ascending',
}),
getDescendingOption: () =>
i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.descendingDropDown', {
defaultMessage: 'Descending',
}),
},
};

1
x-pack/legacy/plugins/canvas/i18n/index.ts
View file

@ -10,6 +10,7 @@ export * from './angular';
export * from './components';
export * from './constants';
export * from './errors';
export * from './expression_types';
export * from './shortcuts';
export * from './units';

7
x-pack/legacy/plugins/canvas/public/expression_types/arg_types/color.js
View file

@ -9,6 +9,9 @@ import PropTypes from 'prop-types';
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { templateFromReactComponent } from '../../lib/template_from_react_component';
import { ColorPickerPopover } from '../../components/color_picker_popover';
import { ArgTypesStrings } from '../../../i18n';
const { Color: strings } = ArgTypesStrings;
const ColorArgInput = ({ onValueChange, argValue, workpad }) => (
<EuiFlexGroup gutterSize="s">
@ -28,8 +31,8 @@ ColorArgInput.propTypes = {
export const color = () => ({
name: 'color',
displayName: 'Color',
help: 'Color picker',
displayName: strings.getDisplayName(),
help: strings.getHelp(),
simpleTemplate: templateFromReactComponent(ColorArgInput),
default: '#000000',
});

12
x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/appearance_form.tsx
View file

@ -7,7 +7,9 @@
import React, { FunctionComponent, ChangeEvent } from 'react';
import PropTypes from 'prop-types';
import { EuiFieldNumber, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiSelect } from '@elastic/eui';
import { ArgTypesStrings } from '../../../../i18n';
const { ContainerStyle: strings } = ArgTypesStrings;
type Overflow = 'hidden' | 'visible';
export interface Arguments {
@ -23,8 +25,8 @@ interface Props extends Arguments {
}
const overflows: Array<{ value: Overflow; text: string }> = [
{ value: 'hidden', text: 'Hidden' },
{ value: 'visible', text: 'Visible' },
{ value: 'hidden', text: strings.getOverflowHiddenOption() },
{ value: 'visible', text: strings.getOverflowVisibleOption() },
];
const opacities = [
@ -59,12 +61,12 @@ export const AppearanceForm: FunctionComponent<Props> = ({
return (
<EuiFlexGroup gutterSize="s" justify-content="spaceBetween">
<EuiFlexItem grow={2}>
<EuiFormRow label="Padding" display="rowCompressed">
<EuiFormRow label={strings.getPaddingLabel()} display="rowCompressed">
<EuiFieldNumber compressed value={Number(padding)} onChange={namedChange('padding')} />
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem grow={3}>
<EuiFormRow label="Opacity" display="rowCompressed">
<EuiFormRow label={strings.getOpacityLabel()} display="rowCompressed">
<EuiSelect
compressed
value={opacity}
@ -74,7 +76,7 @@ export const AppearanceForm: FunctionComponent<Props> = ({
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem grow={3}>
<EuiFormRow label="Overflow" display="rowCompressed">
<EuiFormRow label={strings.getOverflowLabel()} display="rowCompressed">
<EuiSelect
compressed
value={overflow}

11
x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/border_form.tsx
View file

@ -15,6 +15,7 @@ import {
} from '@elastic/eui';
import { ColorPickerPopover } from '../../../components/color_picker_popover';
import { BorderStyle, isBorderStyle } from '../../../../types';
import { ArgTypesStrings } from '../../../../i18n';
export { BorderStyle } from '../../../../types';
@ -27,6 +28,8 @@ export interface Arguments {
export type ArgumentTypes = Arguments;
export type Argument = keyof Arguments;
const { ContainerStyle: strings } = ArgTypesStrings;
interface Props {
onChange: <T extends Argument>(arg: T, val: ArgumentTypes[T]) => void;
value: string;
@ -72,7 +75,7 @@ export const BorderForm: FunctionComponent<Props> = ({
return (
<EuiFlexGroup gutterSize="s">
<EuiFlexItem grow={2}>
<EuiFormRow label="Thickness" display="rowCompressed">
<EuiFormRow label={strings.getThicknessLabel()} display="rowCompressed">
<EuiFieldNumber
compressed
value={Number(borderWidthVal)}
@ -82,7 +85,7 @@ export const BorderForm: FunctionComponent<Props> = ({
</EuiFlexItem>
<EuiFlexItem grow={3}>
<EuiFormRow label="Style" display="rowCompressed">
<EuiFormRow label={strings.getStyleLabel()} display="rowCompressed">
<EuiSuperSelect
compressed
valueOfSelected={borderStyleVal || 'none'}
@ -96,7 +99,7 @@ export const BorderForm: FunctionComponent<Props> = ({
</EuiFlexItem>
<EuiFlexItem grow={2}>
<EuiFormRow label="Radius" display="rowCompressed">
<EuiFormRow label={strings.getRadiusLabel()} display="rowCompressed">
<EuiFieldNumber
compressed
value={Number(radiusVal)}
@ -106,7 +109,7 @@ export const BorderForm: FunctionComponent<Props> = ({
</EuiFlexItem>
<EuiFlexItem grow={1}>
<EuiFormRow display="rowCompressed" label="Color" style={{ fontSize: 0 }}>
<EuiFormRow display="rowCompressed" label={strings.getColorLabel()} style={{ fontSize: 0 }}>
<ColorPickerPopover
value={borderColor}
onChange={borderColorChange}

7
x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/extended_template.tsx
View file

@ -12,6 +12,7 @@ import { AppearanceForm } from './appearance_form';
import { CanvasWorkpad } from '../.../../../../../types';
import { Arguments as AppearanceArguments } from './appearance_form';
import { Arguments as BorderArguments } from './border_form';
import { ArgTypesStrings } from '../../../../i18n';
export { BorderStyle } from './border_form';
@ -19,6 +20,8 @@ export interface Arguments extends BorderArguments, AppearanceArguments {}
export type ArgumentTypes = Partial<BorderArguments & AppearanceArguments>;
export type Argument = keyof ArgumentTypes;
const { ContainerStyle: strings } = ArgTypesStrings;
interface Props {
getArgValue: <T extends Argument>(arg: T) => Arguments[T];
setArgValue: <T extends Argument>(arg: T, val: ArgumentTypes[T]) => void;
@ -32,7 +35,7 @@ export const ExtendedTemplate: FunctionComponent<Props> = ({
}) => (
<div>
<EuiTitle size="xxxs" textTransform="uppercase">
<h6>Appearance</h6>
<h6>{strings.getAppearanceTitle()}</h6>
</EuiTitle>
<EuiSpacer size="xs" />
<EuiSpacer size="xs" />
@ -44,7 +47,7 @@ export const ExtendedTemplate: FunctionComponent<Props> = ({
/>
<EuiSpacer size="m" />
<EuiTitle size="xxxs" textTransform="uppercase">
<h6>Border</h6>
<h6>{strings.getBorderTitle()}</h6>
</EuiTitle>
<EuiSpacer size="xs" />
<EuiSpacer size="xs" />

6
x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/index.ts
View file

@ -11,8 +11,10 @@ import { get } from 'lodash';
import { templateFromReactComponent } from '../../../lib/template_from_react_component';
import { Arguments as SimpleArguments, SimpleTemplate } from './simple_template';
import { Arguments as ExtendedArguments, ExtendedTemplate } from './extended_template';
import { ArgTypesStrings } from '../../../../i18n';
const { set } = immutable;
const { ContainerStyle: strings } = ArgTypesStrings;
interface Arguments extends SimpleArguments, ExtendedArguments {}
type ArgumentTypes = Partial<Arguments>;
@ -43,8 +45,8 @@ const wrap = (Component: ComponentType<any>) =>
export const containerStyle = () => ({
name: 'containerStyle',
displayName: 'Container style',
help: 'Tweak the appearance of the element container',
displayName: strings.getDisplayName(),
help: strings.getHelp(),
default: '{containerStyle}',
simpleTemplate: templateFromReactComponent(wrap(SimpleTemplate)),
template: templateFromReactComponent(wrap(ExtendedTemplate)),

7
x-pack/legacy/plugins/canvas/public/expression_types/arg_types/font.js
View file

@ -10,6 +10,9 @@ import { get, mapValues, set } from 'lodash';
import { openSans } from '../../../common/lib/fonts';
import { templateFromReactComponent } from '../../lib/template_from_react_component';
import { TextStylePicker } from '../../components/text_style_picker';
import { ArgTypesStrings } from '../../../i18n';
const { Font: strings } = ArgTypesStrings;
export const FontArgInput = props => {
const { onValueChange, argValue, workpad } = props;
@ -53,8 +56,8 @@ FontArgInput.displayName = 'FontArgInput';
export const font = () => ({
name: 'font',
displayName: 'Text settings',
help: 'Set the font, size and color',
displayName: strings.getDisplayName(),
help: strings.getHelp(),
template: templateFromReactComponent(FontArgInput),
default: `{font size=14 family="${openSans.value}" color="#000000" align=left}`,
});

15
x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/simple_template.examples.storyshot generated
View file

@ -19,7 +19,8 @@ exports[`Storyshots arguments/SeriesStyle simple 1`] = `
<div
className="euiText euiText--small"
>
Color 
Color
 
</div>
</div>
<div
@ -70,7 +71,8 @@ exports[`Storyshots arguments/SeriesStyle/components simple: defaults 1`] = `
<div
className="euiText euiText--small"
>
Color 
Color
 
</div>
</div>
<div
@ -121,7 +123,8 @@ exports[`Storyshots arguments/SeriesStyle/components simple: no labels 1`] = `
<div
className="euiText euiText--small"
>
Color 
Color
 
</div>
</div>
<div
@ -172,7 +175,8 @@ exports[`Storyshots arguments/SeriesStyle/components simple: no series 1`] = `
<div
className="euiText euiText--small"
>
Color 
Color
 
</div>
</div>
<div
@ -246,7 +250,8 @@ exports[`Storyshots arguments/SeriesStyle/components simple: with series 1`] = `
<div
className="euiText euiText--small"
>
Color 
Color
 
</div>
</div>
<div

14
x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/extended_template.tsx
View file

@ -10,8 +10,10 @@ import { EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiSelect, EuiSpacer } from '@el
import immutable from 'object-path-immutable';
import { get } from 'lodash';
import { ExpressionAST } from '../../../../types';
import { ArgTypesStrings } from '../../../../i18n';
const { set, del } = immutable;
const { SeriesStyle: strings } = ArgTypesStrings;
export interface Arguments {
label: string;
@ -59,7 +61,7 @@ export const ExtendedTemplate: FunctionComponent<Props> = props => {
// TODO: add fill and stack options
// TODO: add label name auto-complete
const values = [
{ value: 0, text: 'None' },
{ value: 0, text: strings.getNoneOption() },
{ value: 1, text: '1' },
{ value: 2, text: '2' },
{ value: 3, text: '3' },
@ -67,14 +69,14 @@ export const ExtendedTemplate: FunctionComponent<Props> = props => {
{ value: 5, text: '5' },
];
const labelOptions = [{ value: '', text: 'Select Series' }];
const labelOptions = [{ value: '', text: strings.getSelectSeriesOption() }];
labels.sort().forEach(val => labelOptions.push({ value: val, text: val }));
return (
<div>
{name !== 'defaultStyle' && (
<Fragment>
<EuiFormRow label="Series Identifier" display="rowCompressed">
<EuiFormRow label={strings.getSeriesIdentifierLabel()} display="rowCompressed">
<EuiSelect
compressed
value={selectedSeries}
@ -91,7 +93,7 @@ export const ExtendedTemplate: FunctionComponent<Props> = props => {
<EuiFlexGroup gutterSize="s">
{fields.includes('lines') && (
<EuiFlexItem>
<EuiFormRow label="Line" display="rowCompressed">
<EuiFormRow label={strings.getLineLabel()} display="rowCompressed">
<EuiSelect
value={get(chainArgs, 'lines.0', 0)}
options={values}
@ -103,7 +105,7 @@ export const ExtendedTemplate: FunctionComponent<Props> = props => {
)}
{fields.includes('bars') && (
<EuiFlexItem>
<EuiFormRow label="Bar" display="rowCompressed">
<EuiFormRow label={strings.getBarLabel()} display="rowCompressed">
<EuiSelect
value={get(chainArgs, 'bars.0', 0)}
options={values}
@ -115,7 +117,7 @@ export const ExtendedTemplate: FunctionComponent<Props> = props => {
)}
{fields.includes('points') && (
<EuiFlexItem>
<EuiFormRow label="Point" display="rowCompressed">
<EuiFormRow label={strings.getPointLabel()} display="rowCompressed">
<EuiSelect
value={get(chainArgs, 'points.0', 0)}
options={values}

9
x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/index.ts
View file

@ -11,6 +11,9 @@ import { templateFromReactComponent } from '../../../lib/template_from_react_com
import { SimpleTemplate } from './simple_template';
import { ExtendedTemplate, Props as ExtendedTemplateProps } from './extended_template';
import { ExpressionAST } from '../../../../types';
import { ArgTypesStrings } from '../../../../i18n';
const { SeriesStyle: strings } = ArgTypesStrings;
interface Props {
argValue: ExpressionAST;
@ -23,7 +26,7 @@ const formatLabel = (label: string, props: Props) => {
if (typeof label !== 'string') {
props.renderError();
}
return `Style: ${label}`;
return `${strings.getStyleLabel()}: ${label}`;
};
const EnhancedExtendedTemplate = compose<ExtendedTemplateProps, Props>(
@ -51,8 +54,8 @@ EnhancedExtendedTemplate.propTypes = {
export const seriesStyle = () => ({
name: 'seriesStyle',
displayName: 'Series style',
help: 'Set the style for a selected named series',
displayName: strings.getDisplayName(),
help: strings.getHelp(),
template: templateFromReactComponent(EnhancedExtendedTemplate),
simpleTemplate: templateFromReactComponent(SimpleTemplate),
default: '{seriesStyle}',

15
x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/simple_template.tsx
View file

@ -12,8 +12,10 @@ import { get } from 'lodash';
import { ColorPickerPopover } from '../../../components/color_picker_popover';
import { TooltipIcon, IconType } from '../../../components/tooltip_icon';
import { ExpressionAST, CanvasWorkpad } from '../../../../types';
import { ArgTypesStrings } from '../../../../i18n';
const { set, del } = immutable;
const { SeriesStyle: strings } = ArgTypesStrings;
interface Arguments {
color: string;
@ -48,11 +50,14 @@ export const SimpleTemplate: FunctionComponent<Props> = props => {
{!color || color.length === 0 ? (
<Fragment>
<EuiFlexItem grow={false}>
<EuiText size="s">Color&nbsp;</EuiText>
<EuiText size="s">{strings.getColorLabel()}&nbsp;</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiText size="s">
<EuiLink aria-label="Color: Auto" onClick={() => handleChange('color', '#000000')}>
<EuiLink
aria-label={`${strings.getColorLabel()}: Auto`}
onClick={() => handleChange('color', '#000000')}
>
Auto <EuiIcon type="bolt" />
</EuiLink>
</EuiText>
@ -62,7 +67,7 @@ export const SimpleTemplate: FunctionComponent<Props> = props => {
<Fragment>
<EuiFlexItem grow={false}>
<label htmlFor="series-style">
<EuiText size="s">Color&nbsp;</EuiText>
<EuiText size="s">{strings.getColorLabel()}&nbsp;</EuiText>
</label>
</EuiFlexItem>
<EuiFlexItem style={{ fontSize: 0 }}>
@ -78,7 +83,7 @@ export const SimpleTemplate: FunctionComponent<Props> = props => {
iconType="cross"
color="danger"
onClick={() => handleChange('color', '')}
aria-label="Remove Series Color"
aria-label={strings.getRemoveAriaLabel()}
/>
</EuiFlexItem>
</Fragment>
@ -88,7 +93,7 @@ export const SimpleTemplate: FunctionComponent<Props> = props => {
<TooltipIcon
position="left"
icon={IconType.warning}
content="Data has no series to style, add a color dimension"
content={strings.getNoSeriesTooltip()}
/>
</EuiFlexItem>
)}

41
x-pack/legacy/plugins/canvas/public/expression_types/datasources/esdocs.js
View file

@ -12,6 +12,9 @@ import { ESFieldsSelect } from '../../components/es_fields_select';
import { ESFieldSelect } from '../../components/es_field_select';
import { ESIndexSelect } from '../../components/es_index_select';
import { templateFromReactComponent } from '../../lib/template_from_react_component';
import { DataSourceStrings } from '../../../i18n';
const { ESDocs: strings } = DataSourceStrings;
const EsdocsDatasource = ({ args, updateArgs, defaultIndex }) => {
const setArg = (name, value) => {
@ -64,36 +67,38 @@ const EsdocsDatasource = ({ args, updateArgs, defaultIndex }) => {
setArg('index', defaultIndex);
}
const sortOptions = [{ value: 'asc', text: 'Ascending' }, { value: 'desc', text: 'Descending' }];
const sortOptions = [
{ value: 'asc', text: strings.getAscendingOption() },
{ value: 'desc', text: strings.getDescendingOption() },
];
return (
<div>
<EuiCallOut size="s" title="Be careful" color="warning">
<p>
The Elasticsearch Docs datasource is used to pull documents directly from Elasticsearch
without the use of aggregations. It is best used with low volume datasets and in
situations where you need to view raw documents or plot exact, non-aggregated values on a
chart.
</p>
<EuiCallOut size="s" title={strings.getWarningTitle()} color="warning">
<p>{strings.getWarning()}</p>
</EuiCallOut>
<EuiSpacer size="m" />
<EuiFormRow label="Index" helpText="Enter an index name or select an index pattern">
<EuiFormRow label={strings.getIndexTitle()} helpText={strings.getIndexLabel()}>
<ESIndexSelect value={index} onChange={index => setArg('index', index)} />
</EuiFormRow>
<EuiFormRow label="Query" helpText="Lucene query string syntax" compressed>
<EuiFormRow label={strings.getQueryTitle()} helpText={strings.getQueryLabel()} compressed>
<EuiFieldText value={getQuery()} onChange={e => setArg(getArgName(), e.target.value)} />
</EuiFormRow>
<EuiFormRow label="Sort Field" helpText="Document sort field">
<EuiFormRow label={strings.getSortFieldTitle()} helpText={strings.getSortFieldLabel()}>
<ESFieldSelect
index={index}
value={sortField}
onChange={field => setArg('sort', [field, sortOrder].join(', '))}
/>
</EuiFormRow>
<EuiFormRow label="Sort Order" helpText="Document sort order" compressed>
<EuiFormRow
label={strings.getSortOrderTitle()}
helpText={strings.getSortOrderLabel()}
compressed
>
<EuiSelect
value={sortOrder.toLowerCase()}
onChange={e => setArg('sort', [sortField, e.target.value].join(', '))}
@ -101,12 +106,8 @@ const EsdocsDatasource = ({ args, updateArgs, defaultIndex }) => {
/>
</EuiFormRow>
<EuiFormRow
label="Fields"
helpText={
fields.length <= 10
? 'The fields to extract. Kibana scripted fields are not currently available'
: 'This datasource performs best with 10 or fewer fields'
}
label={strings.getFieldsTitle()}
helpText={fields.length <= 10 ? strings.getFieldsLabel() : strings.getFieldsWarningLabel()}
>
<ESFieldsSelect
index={index}
@ -126,8 +127,8 @@ EsdocsDatasource.propTypes = {
export const esdocs = () => ({
name: 'esdocs',
displayName: 'Elasticsearch raw documents',
help: 'Pull back raw documents from elasticsearch',
displayName: strings.getDisplayName(),
help: strings.getHelp(),
image: 'logoElasticsearch',
template: templateFromReactComponent(EsdocsDatasource),
});