[Canvas] Translate More Expression Arguments (#47028)
* Translate other canvas arguments * Update Snapshot * Fix incorrect i18n key
This commit is contained in:
parent
6e6fc37276
commit
9187941d05
|
@ -389,6 +389,20 @@ export const DataSourceStrings = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export const ModelStrings = {
|
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: {
|
PointSeries: {
|
||||||
getColorDisplayName: () =>
|
getColorDisplayName: () =>
|
||||||
i18n.translate('xpack.canvas.uis.models.pointSeries.args.colorTitle', {
|
i18n.translate('xpack.canvas.uis.models.pointSeries.args.colorTitle', {
|
||||||
|
@ -594,6 +608,10 @@ export const ViewStrings = {
|
||||||
i18n.translate('xpack.canvas.uis.views.metricTitle', {
|
i18n.translate('xpack.canvas.uis.views.metricTitle', {
|
||||||
defaultMessage: 'Metric',
|
defaultMessage: 'Metric',
|
||||||
}),
|
}),
|
||||||
|
getNumberDisplayName: () =>
|
||||||
|
i18n.translate('xpack.canvas.uis.views.numberArgTitle', {
|
||||||
|
defaultMessage: 'Number',
|
||||||
|
}),
|
||||||
getLabelDisplayName: () =>
|
getLabelDisplayName: () =>
|
||||||
i18n.translate('xpack.canvas.uis.views.metric.args.labelArgTitle', {
|
i18n.translate('xpack.canvas.uis.views.metric.args.labelArgTitle', {
|
||||||
defaultMessage: 'Label',
|
defaultMessage: 'Label',
|
||||||
|
|
|
@ -6,15 +6,18 @@
|
||||||
|
|
||||||
import { get } from 'lodash';
|
import { get } from 'lodash';
|
||||||
import { getState, getValue } from '../../../public/lib/resolved_arg';
|
import { getState, getValue } from '../../../public/lib/resolved_arg';
|
||||||
|
import { ModelStrings } from '../../strings';
|
||||||
|
|
||||||
|
const { Math: strings } = ModelStrings;
|
||||||
|
|
||||||
export const math = () => ({
|
export const math = () => ({
|
||||||
name: 'math',
|
name: 'math',
|
||||||
displayName: 'Measure',
|
displayName: strings.getDisplayName(),
|
||||||
args: [
|
args: [
|
||||||
{
|
{
|
||||||
name: '_',
|
name: '_',
|
||||||
displayName: 'Value',
|
displayName: strings.getValueDisplayName(),
|
||||||
help: 'Function and column to use in extracting a value from the datasource',
|
help: strings.getValueHelp(),
|
||||||
argType: 'datacolumn',
|
argType: 'datacolumn',
|
||||||
options: {
|
options: {
|
||||||
onlyMath: false,
|
onlyMath: false,
|
||||||
|
|
|
@ -13,7 +13,7 @@ const { Metric: strings } = ViewStrings;
|
||||||
export const metric = () => ({
|
export const metric = () => ({
|
||||||
name: 'metric',
|
name: 'metric',
|
||||||
displayName: strings.getDisplayName(),
|
displayName: strings.getDisplayName(),
|
||||||
modelArgs: [['_', { label: 'Number' }]],
|
modelArgs: [['_', { label: strings.getNumberDisplayName() }]],
|
||||||
requiresContext: false,
|
requiresContext: false,
|
||||||
args: [
|
args: [
|
||||||
{
|
{
|
||||||
|
|
221
x-pack/legacy/plugins/canvas/i18n/expression_types.ts
Normal file
221
x-pack/legacy/plugins/canvas/i18n/expression_types.ts
Normal 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',
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
};
|
|
@ -10,6 +10,7 @@ export * from './angular';
|
||||||
export * from './components';
|
export * from './components';
|
||||||
export * from './constants';
|
export * from './constants';
|
||||||
export * from './errors';
|
export * from './errors';
|
||||||
|
export * from './expression_types';
|
||||||
export * from './shortcuts';
|
export * from './shortcuts';
|
||||||
export * from './units';
|
export * from './units';
|
||||||
|
|
||||||
|
|
|
@ -9,6 +9,9 @@ import PropTypes from 'prop-types';
|
||||||
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
|
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
|
||||||
import { templateFromReactComponent } from '../../lib/template_from_react_component';
|
import { templateFromReactComponent } from '../../lib/template_from_react_component';
|
||||||
import { ColorPickerPopover } from '../../components/color_picker_popover';
|
import { ColorPickerPopover } from '../../components/color_picker_popover';
|
||||||
|
import { ArgTypesStrings } from '../../../i18n';
|
||||||
|
|
||||||
|
const { Color: strings } = ArgTypesStrings;
|
||||||
|
|
||||||
const ColorArgInput = ({ onValueChange, argValue, workpad }) => (
|
const ColorArgInput = ({ onValueChange, argValue, workpad }) => (
|
||||||
<EuiFlexGroup gutterSize="s">
|
<EuiFlexGroup gutterSize="s">
|
||||||
|
@ -28,8 +31,8 @@ ColorArgInput.propTypes = {
|
||||||
|
|
||||||
export const color = () => ({
|
export const color = () => ({
|
||||||
name: 'color',
|
name: 'color',
|
||||||
displayName: 'Color',
|
displayName: strings.getDisplayName(),
|
||||||
help: 'Color picker',
|
help: strings.getHelp(),
|
||||||
simpleTemplate: templateFromReactComponent(ColorArgInput),
|
simpleTemplate: templateFromReactComponent(ColorArgInput),
|
||||||
default: '#000000',
|
default: '#000000',
|
||||||
});
|
});
|
||||||
|
|
|
@ -7,7 +7,9 @@
|
||||||
import React, { FunctionComponent, ChangeEvent } from 'react';
|
import React, { FunctionComponent, ChangeEvent } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { EuiFieldNumber, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiSelect } from '@elastic/eui';
|
import { EuiFieldNumber, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiSelect } from '@elastic/eui';
|
||||||
|
import { ArgTypesStrings } from '../../../../i18n';
|
||||||
|
|
||||||
|
const { ContainerStyle: strings } = ArgTypesStrings;
|
||||||
type Overflow = 'hidden' | 'visible';
|
type Overflow = 'hidden' | 'visible';
|
||||||
|
|
||||||
export interface Arguments {
|
export interface Arguments {
|
||||||
|
@ -23,8 +25,8 @@ interface Props extends Arguments {
|
||||||
}
|
}
|
||||||
|
|
||||||
const overflows: Array<{ value: Overflow; text: string }> = [
|
const overflows: Array<{ value: Overflow; text: string }> = [
|
||||||
{ value: 'hidden', text: 'Hidden' },
|
{ value: 'hidden', text: strings.getOverflowHiddenOption() },
|
||||||
{ value: 'visible', text: 'Visible' },
|
{ value: 'visible', text: strings.getOverflowVisibleOption() },
|
||||||
];
|
];
|
||||||
|
|
||||||
const opacities = [
|
const opacities = [
|
||||||
|
@ -59,12 +61,12 @@ export const AppearanceForm: FunctionComponent<Props> = ({
|
||||||
return (
|
return (
|
||||||
<EuiFlexGroup gutterSize="s" justify-content="spaceBetween">
|
<EuiFlexGroup gutterSize="s" justify-content="spaceBetween">
|
||||||
<EuiFlexItem grow={2}>
|
<EuiFlexItem grow={2}>
|
||||||
<EuiFormRow label="Padding" display="rowCompressed">
|
<EuiFormRow label={strings.getPaddingLabel()} display="rowCompressed">
|
||||||
<EuiFieldNumber compressed value={Number(padding)} onChange={namedChange('padding')} />
|
<EuiFieldNumber compressed value={Number(padding)} onChange={namedChange('padding')} />
|
||||||
</EuiFormRow>
|
</EuiFormRow>
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
<EuiFlexItem grow={3}>
|
<EuiFlexItem grow={3}>
|
||||||
<EuiFormRow label="Opacity" display="rowCompressed">
|
<EuiFormRow label={strings.getOpacityLabel()} display="rowCompressed">
|
||||||
<EuiSelect
|
<EuiSelect
|
||||||
compressed
|
compressed
|
||||||
value={opacity}
|
value={opacity}
|
||||||
|
@ -74,7 +76,7 @@ export const AppearanceForm: FunctionComponent<Props> = ({
|
||||||
</EuiFormRow>
|
</EuiFormRow>
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
<EuiFlexItem grow={3}>
|
<EuiFlexItem grow={3}>
|
||||||
<EuiFormRow label="Overflow" display="rowCompressed">
|
<EuiFormRow label={strings.getOverflowLabel()} display="rowCompressed">
|
||||||
<EuiSelect
|
<EuiSelect
|
||||||
compressed
|
compressed
|
||||||
value={overflow}
|
value={overflow}
|
||||||
|
|
|
@ -15,6 +15,7 @@ import {
|
||||||
} from '@elastic/eui';
|
} from '@elastic/eui';
|
||||||
import { ColorPickerPopover } from '../../../components/color_picker_popover';
|
import { ColorPickerPopover } from '../../../components/color_picker_popover';
|
||||||
import { BorderStyle, isBorderStyle } from '../../../../types';
|
import { BorderStyle, isBorderStyle } from '../../../../types';
|
||||||
|
import { ArgTypesStrings } from '../../../../i18n';
|
||||||
|
|
||||||
export { BorderStyle } from '../../../../types';
|
export { BorderStyle } from '../../../../types';
|
||||||
|
|
||||||
|
@ -27,6 +28,8 @@ export interface Arguments {
|
||||||
export type ArgumentTypes = Arguments;
|
export type ArgumentTypes = Arguments;
|
||||||
export type Argument = keyof Arguments;
|
export type Argument = keyof Arguments;
|
||||||
|
|
||||||
|
const { ContainerStyle: strings } = ArgTypesStrings;
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
onChange: <T extends Argument>(arg: T, val: ArgumentTypes[T]) => void;
|
onChange: <T extends Argument>(arg: T, val: ArgumentTypes[T]) => void;
|
||||||
value: string;
|
value: string;
|
||||||
|
@ -72,7 +75,7 @@ export const BorderForm: FunctionComponent<Props> = ({
|
||||||
return (
|
return (
|
||||||
<EuiFlexGroup gutterSize="s">
|
<EuiFlexGroup gutterSize="s">
|
||||||
<EuiFlexItem grow={2}>
|
<EuiFlexItem grow={2}>
|
||||||
<EuiFormRow label="Thickness" display="rowCompressed">
|
<EuiFormRow label={strings.getThicknessLabel()} display="rowCompressed">
|
||||||
<EuiFieldNumber
|
<EuiFieldNumber
|
||||||
compressed
|
compressed
|
||||||
value={Number(borderWidthVal)}
|
value={Number(borderWidthVal)}
|
||||||
|
@ -82,7 +85,7 @@ export const BorderForm: FunctionComponent<Props> = ({
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
|
|
||||||
<EuiFlexItem grow={3}>
|
<EuiFlexItem grow={3}>
|
||||||
<EuiFormRow label="Style" display="rowCompressed">
|
<EuiFormRow label={strings.getStyleLabel()} display="rowCompressed">
|
||||||
<EuiSuperSelect
|
<EuiSuperSelect
|
||||||
compressed
|
compressed
|
||||||
valueOfSelected={borderStyleVal || 'none'}
|
valueOfSelected={borderStyleVal || 'none'}
|
||||||
|
@ -96,7 +99,7 @@ export const BorderForm: FunctionComponent<Props> = ({
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
|
|
||||||
<EuiFlexItem grow={2}>
|
<EuiFlexItem grow={2}>
|
||||||
<EuiFormRow label="Radius" display="rowCompressed">
|
<EuiFormRow label={strings.getRadiusLabel()} display="rowCompressed">
|
||||||
<EuiFieldNumber
|
<EuiFieldNumber
|
||||||
compressed
|
compressed
|
||||||
value={Number(radiusVal)}
|
value={Number(radiusVal)}
|
||||||
|
@ -106,7 +109,7 @@ export const BorderForm: FunctionComponent<Props> = ({
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
|
|
||||||
<EuiFlexItem grow={1}>
|
<EuiFlexItem grow={1}>
|
||||||
<EuiFormRow display="rowCompressed" label="Color" style={{ fontSize: 0 }}>
|
<EuiFormRow display="rowCompressed" label={strings.getColorLabel()} style={{ fontSize: 0 }}>
|
||||||
<ColorPickerPopover
|
<ColorPickerPopover
|
||||||
value={borderColor}
|
value={borderColor}
|
||||||
onChange={borderColorChange}
|
onChange={borderColorChange}
|
||||||
|
|
|
@ -12,6 +12,7 @@ import { AppearanceForm } from './appearance_form';
|
||||||
import { CanvasWorkpad } from '../.../../../../../types';
|
import { CanvasWorkpad } from '../.../../../../../types';
|
||||||
import { Arguments as AppearanceArguments } from './appearance_form';
|
import { Arguments as AppearanceArguments } from './appearance_form';
|
||||||
import { Arguments as BorderArguments } from './border_form';
|
import { Arguments as BorderArguments } from './border_form';
|
||||||
|
import { ArgTypesStrings } from '../../../../i18n';
|
||||||
|
|
||||||
export { BorderStyle } from './border_form';
|
export { BorderStyle } from './border_form';
|
||||||
|
|
||||||
|
@ -19,6 +20,8 @@ export interface Arguments extends BorderArguments, AppearanceArguments {}
|
||||||
export type ArgumentTypes = Partial<BorderArguments & AppearanceArguments>;
|
export type ArgumentTypes = Partial<BorderArguments & AppearanceArguments>;
|
||||||
export type Argument = keyof ArgumentTypes;
|
export type Argument = keyof ArgumentTypes;
|
||||||
|
|
||||||
|
const { ContainerStyle: strings } = ArgTypesStrings;
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
getArgValue: <T extends Argument>(arg: T) => Arguments[T];
|
getArgValue: <T extends Argument>(arg: T) => Arguments[T];
|
||||||
setArgValue: <T extends Argument>(arg: T, val: ArgumentTypes[T]) => void;
|
setArgValue: <T extends Argument>(arg: T, val: ArgumentTypes[T]) => void;
|
||||||
|
@ -32,7 +35,7 @@ export const ExtendedTemplate: FunctionComponent<Props> = ({
|
||||||
}) => (
|
}) => (
|
||||||
<div>
|
<div>
|
||||||
<EuiTitle size="xxxs" textTransform="uppercase">
|
<EuiTitle size="xxxs" textTransform="uppercase">
|
||||||
<h6>Appearance</h6>
|
<h6>{strings.getAppearanceTitle()}</h6>
|
||||||
</EuiTitle>
|
</EuiTitle>
|
||||||
<EuiSpacer size="xs" />
|
<EuiSpacer size="xs" />
|
||||||
<EuiSpacer size="xs" />
|
<EuiSpacer size="xs" />
|
||||||
|
@ -44,7 +47,7 @@ export const ExtendedTemplate: FunctionComponent<Props> = ({
|
||||||
/>
|
/>
|
||||||
<EuiSpacer size="m" />
|
<EuiSpacer size="m" />
|
||||||
<EuiTitle size="xxxs" textTransform="uppercase">
|
<EuiTitle size="xxxs" textTransform="uppercase">
|
||||||
<h6>Border</h6>
|
<h6>{strings.getBorderTitle()}</h6>
|
||||||
</EuiTitle>
|
</EuiTitle>
|
||||||
<EuiSpacer size="xs" />
|
<EuiSpacer size="xs" />
|
||||||
<EuiSpacer size="xs" />
|
<EuiSpacer size="xs" />
|
||||||
|
|
|
@ -11,8 +11,10 @@ import { get } from 'lodash';
|
||||||
import { templateFromReactComponent } from '../../../lib/template_from_react_component';
|
import { templateFromReactComponent } from '../../../lib/template_from_react_component';
|
||||||
import { Arguments as SimpleArguments, SimpleTemplate } from './simple_template';
|
import { Arguments as SimpleArguments, SimpleTemplate } from './simple_template';
|
||||||
import { Arguments as ExtendedArguments, ExtendedTemplate } from './extended_template';
|
import { Arguments as ExtendedArguments, ExtendedTemplate } from './extended_template';
|
||||||
|
import { ArgTypesStrings } from '../../../../i18n';
|
||||||
|
|
||||||
const { set } = immutable;
|
const { set } = immutable;
|
||||||
|
const { ContainerStyle: strings } = ArgTypesStrings;
|
||||||
|
|
||||||
interface Arguments extends SimpleArguments, ExtendedArguments {}
|
interface Arguments extends SimpleArguments, ExtendedArguments {}
|
||||||
type ArgumentTypes = Partial<Arguments>;
|
type ArgumentTypes = Partial<Arguments>;
|
||||||
|
@ -43,8 +45,8 @@ const wrap = (Component: ComponentType<any>) =>
|
||||||
|
|
||||||
export const containerStyle = () => ({
|
export const containerStyle = () => ({
|
||||||
name: 'containerStyle',
|
name: 'containerStyle',
|
||||||
displayName: 'Container style',
|
displayName: strings.getDisplayName(),
|
||||||
help: 'Tweak the appearance of the element container',
|
help: strings.getHelp(),
|
||||||
default: '{containerStyle}',
|
default: '{containerStyle}',
|
||||||
simpleTemplate: templateFromReactComponent(wrap(SimpleTemplate)),
|
simpleTemplate: templateFromReactComponent(wrap(SimpleTemplate)),
|
||||||
template: templateFromReactComponent(wrap(ExtendedTemplate)),
|
template: templateFromReactComponent(wrap(ExtendedTemplate)),
|
||||||
|
|
|
@ -10,6 +10,9 @@ import { get, mapValues, set } from 'lodash';
|
||||||
import { openSans } from '../../../common/lib/fonts';
|
import { openSans } from '../../../common/lib/fonts';
|
||||||
import { templateFromReactComponent } from '../../lib/template_from_react_component';
|
import { templateFromReactComponent } from '../../lib/template_from_react_component';
|
||||||
import { TextStylePicker } from '../../components/text_style_picker';
|
import { TextStylePicker } from '../../components/text_style_picker';
|
||||||
|
import { ArgTypesStrings } from '../../../i18n';
|
||||||
|
|
||||||
|
const { Font: strings } = ArgTypesStrings;
|
||||||
|
|
||||||
export const FontArgInput = props => {
|
export const FontArgInput = props => {
|
||||||
const { onValueChange, argValue, workpad } = props;
|
const { onValueChange, argValue, workpad } = props;
|
||||||
|
@ -53,8 +56,8 @@ FontArgInput.displayName = 'FontArgInput';
|
||||||
|
|
||||||
export const font = () => ({
|
export const font = () => ({
|
||||||
name: 'font',
|
name: 'font',
|
||||||
displayName: 'Text settings',
|
displayName: strings.getDisplayName(),
|
||||||
help: 'Set the font, size and color',
|
help: strings.getHelp(),
|
||||||
template: templateFromReactComponent(FontArgInput),
|
template: templateFromReactComponent(FontArgInput),
|
||||||
default: `{font size=14 family="${openSans.value}" color="#000000" align=left}`,
|
default: `{font size=14 family="${openSans.value}" color="#000000" align=left}`,
|
||||||
});
|
});
|
||||||
|
|
|
@ -19,7 +19,8 @@ exports[`Storyshots arguments/SeriesStyle simple 1`] = `
|
||||||
<div
|
<div
|
||||||
className="euiText euiText--small"
|
className="euiText euiText--small"
|
||||||
>
|
>
|
||||||
Color
|
Color
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
@ -70,7 +71,8 @@ exports[`Storyshots arguments/SeriesStyle/components simple: defaults 1`] = `
|
||||||
<div
|
<div
|
||||||
className="euiText euiText--small"
|
className="euiText euiText--small"
|
||||||
>
|
>
|
||||||
Color
|
Color
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
@ -121,7 +123,8 @@ exports[`Storyshots arguments/SeriesStyle/components simple: no labels 1`] = `
|
||||||
<div
|
<div
|
||||||
className="euiText euiText--small"
|
className="euiText euiText--small"
|
||||||
>
|
>
|
||||||
Color
|
Color
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
@ -172,7 +175,8 @@ exports[`Storyshots arguments/SeriesStyle/components simple: no series 1`] = `
|
||||||
<div
|
<div
|
||||||
className="euiText euiText--small"
|
className="euiText euiText--small"
|
||||||
>
|
>
|
||||||
Color
|
Color
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
@ -246,7 +250,8 @@ exports[`Storyshots arguments/SeriesStyle/components simple: with series 1`] = `
|
||||||
<div
|
<div
|
||||||
className="euiText euiText--small"
|
className="euiText euiText--small"
|
||||||
>
|
>
|
||||||
Color
|
Color
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -10,8 +10,10 @@ import { EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiSelect, EuiSpacer } from '@el
|
||||||
import immutable from 'object-path-immutable';
|
import immutable from 'object-path-immutable';
|
||||||
import { get } from 'lodash';
|
import { get } from 'lodash';
|
||||||
import { ExpressionAST } from '../../../../types';
|
import { ExpressionAST } from '../../../../types';
|
||||||
|
import { ArgTypesStrings } from '../../../../i18n';
|
||||||
|
|
||||||
const { set, del } = immutable;
|
const { set, del } = immutable;
|
||||||
|
const { SeriesStyle: strings } = ArgTypesStrings;
|
||||||
|
|
||||||
export interface Arguments {
|
export interface Arguments {
|
||||||
label: string;
|
label: string;
|
||||||
|
@ -59,7 +61,7 @@ export const ExtendedTemplate: FunctionComponent<Props> = props => {
|
||||||
// TODO: add fill and stack options
|
// TODO: add fill and stack options
|
||||||
// TODO: add label name auto-complete
|
// TODO: add label name auto-complete
|
||||||
const values = [
|
const values = [
|
||||||
{ value: 0, text: 'None' },
|
{ value: 0, text: strings.getNoneOption() },
|
||||||
{ value: 1, text: '1' },
|
{ value: 1, text: '1' },
|
||||||
{ value: 2, text: '2' },
|
{ value: 2, text: '2' },
|
||||||
{ value: 3, text: '3' },
|
{ value: 3, text: '3' },
|
||||||
|
@ -67,14 +69,14 @@ export const ExtendedTemplate: FunctionComponent<Props> = props => {
|
||||||
{ value: 5, text: '5' },
|
{ 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 }));
|
labels.sort().forEach(val => labelOptions.push({ value: val, text: val }));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{name !== 'defaultStyle' && (
|
{name !== 'defaultStyle' && (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<EuiFormRow label="Series Identifier" display="rowCompressed">
|
<EuiFormRow label={strings.getSeriesIdentifierLabel()} display="rowCompressed">
|
||||||
<EuiSelect
|
<EuiSelect
|
||||||
compressed
|
compressed
|
||||||
value={selectedSeries}
|
value={selectedSeries}
|
||||||
|
@ -91,7 +93,7 @@ export const ExtendedTemplate: FunctionComponent<Props> = props => {
|
||||||
<EuiFlexGroup gutterSize="s">
|
<EuiFlexGroup gutterSize="s">
|
||||||
{fields.includes('lines') && (
|
{fields.includes('lines') && (
|
||||||
<EuiFlexItem>
|
<EuiFlexItem>
|
||||||
<EuiFormRow label="Line" display="rowCompressed">
|
<EuiFormRow label={strings.getLineLabel()} display="rowCompressed">
|
||||||
<EuiSelect
|
<EuiSelect
|
||||||
value={get(chainArgs, 'lines.0', 0)}
|
value={get(chainArgs, 'lines.0', 0)}
|
||||||
options={values}
|
options={values}
|
||||||
|
@ -103,7 +105,7 @@ export const ExtendedTemplate: FunctionComponent<Props> = props => {
|
||||||
)}
|
)}
|
||||||
{fields.includes('bars') && (
|
{fields.includes('bars') && (
|
||||||
<EuiFlexItem>
|
<EuiFlexItem>
|
||||||
<EuiFormRow label="Bar" display="rowCompressed">
|
<EuiFormRow label={strings.getBarLabel()} display="rowCompressed">
|
||||||
<EuiSelect
|
<EuiSelect
|
||||||
value={get(chainArgs, 'bars.0', 0)}
|
value={get(chainArgs, 'bars.0', 0)}
|
||||||
options={values}
|
options={values}
|
||||||
|
@ -115,7 +117,7 @@ export const ExtendedTemplate: FunctionComponent<Props> = props => {
|
||||||
)}
|
)}
|
||||||
{fields.includes('points') && (
|
{fields.includes('points') && (
|
||||||
<EuiFlexItem>
|
<EuiFlexItem>
|
||||||
<EuiFormRow label="Point" display="rowCompressed">
|
<EuiFormRow label={strings.getPointLabel()} display="rowCompressed">
|
||||||
<EuiSelect
|
<EuiSelect
|
||||||
value={get(chainArgs, 'points.0', 0)}
|
value={get(chainArgs, 'points.0', 0)}
|
||||||
options={values}
|
options={values}
|
||||||
|
|
|
@ -11,6 +11,9 @@ import { templateFromReactComponent } from '../../../lib/template_from_react_com
|
||||||
import { SimpleTemplate } from './simple_template';
|
import { SimpleTemplate } from './simple_template';
|
||||||
import { ExtendedTemplate, Props as ExtendedTemplateProps } from './extended_template';
|
import { ExtendedTemplate, Props as ExtendedTemplateProps } from './extended_template';
|
||||||
import { ExpressionAST } from '../../../../types';
|
import { ExpressionAST } from '../../../../types';
|
||||||
|
import { ArgTypesStrings } from '../../../../i18n';
|
||||||
|
|
||||||
|
const { SeriesStyle: strings } = ArgTypesStrings;
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
argValue: ExpressionAST;
|
argValue: ExpressionAST;
|
||||||
|
@ -23,7 +26,7 @@ const formatLabel = (label: string, props: Props) => {
|
||||||
if (typeof label !== 'string') {
|
if (typeof label !== 'string') {
|
||||||
props.renderError();
|
props.renderError();
|
||||||
}
|
}
|
||||||
return `Style: ${label}`;
|
return `${strings.getStyleLabel()}: ${label}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
const EnhancedExtendedTemplate = compose<ExtendedTemplateProps, Props>(
|
const EnhancedExtendedTemplate = compose<ExtendedTemplateProps, Props>(
|
||||||
|
@ -51,8 +54,8 @@ EnhancedExtendedTemplate.propTypes = {
|
||||||
|
|
||||||
export const seriesStyle = () => ({
|
export const seriesStyle = () => ({
|
||||||
name: 'seriesStyle',
|
name: 'seriesStyle',
|
||||||
displayName: 'Series style',
|
displayName: strings.getDisplayName(),
|
||||||
help: 'Set the style for a selected named series',
|
help: strings.getHelp(),
|
||||||
template: templateFromReactComponent(EnhancedExtendedTemplate),
|
template: templateFromReactComponent(EnhancedExtendedTemplate),
|
||||||
simpleTemplate: templateFromReactComponent(SimpleTemplate),
|
simpleTemplate: templateFromReactComponent(SimpleTemplate),
|
||||||
default: '{seriesStyle}',
|
default: '{seriesStyle}',
|
||||||
|
|
|
@ -12,8 +12,10 @@ import { get } from 'lodash';
|
||||||
import { ColorPickerPopover } from '../../../components/color_picker_popover';
|
import { ColorPickerPopover } from '../../../components/color_picker_popover';
|
||||||
import { TooltipIcon, IconType } from '../../../components/tooltip_icon';
|
import { TooltipIcon, IconType } from '../../../components/tooltip_icon';
|
||||||
import { ExpressionAST, CanvasWorkpad } from '../../../../types';
|
import { ExpressionAST, CanvasWorkpad } from '../../../../types';
|
||||||
|
import { ArgTypesStrings } from '../../../../i18n';
|
||||||
|
|
||||||
const { set, del } = immutable;
|
const { set, del } = immutable;
|
||||||
|
const { SeriesStyle: strings } = ArgTypesStrings;
|
||||||
|
|
||||||
interface Arguments {
|
interface Arguments {
|
||||||
color: string;
|
color: string;
|
||||||
|
@ -48,11 +50,14 @@ export const SimpleTemplate: FunctionComponent<Props> = props => {
|
||||||
{!color || color.length === 0 ? (
|
{!color || color.length === 0 ? (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<EuiFlexItem grow={false}>
|
<EuiFlexItem grow={false}>
|
||||||
<EuiText size="s">Color </EuiText>
|
<EuiText size="s">{strings.getColorLabel()} </EuiText>
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
<EuiFlexItem grow={false}>
|
<EuiFlexItem grow={false}>
|
||||||
<EuiText size="s">
|
<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" />
|
Auto <EuiIcon type="bolt" />
|
||||||
</EuiLink>
|
</EuiLink>
|
||||||
</EuiText>
|
</EuiText>
|
||||||
|
@ -62,7 +67,7 @@ export const SimpleTemplate: FunctionComponent<Props> = props => {
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<EuiFlexItem grow={false}>
|
<EuiFlexItem grow={false}>
|
||||||
<label htmlFor="series-style">
|
<label htmlFor="series-style">
|
||||||
<EuiText size="s">Color </EuiText>
|
<EuiText size="s">{strings.getColorLabel()} </EuiText>
|
||||||
</label>
|
</label>
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
<EuiFlexItem style={{ fontSize: 0 }}>
|
<EuiFlexItem style={{ fontSize: 0 }}>
|
||||||
|
@ -78,7 +83,7 @@ export const SimpleTemplate: FunctionComponent<Props> = props => {
|
||||||
iconType="cross"
|
iconType="cross"
|
||||||
color="danger"
|
color="danger"
|
||||||
onClick={() => handleChange('color', '')}
|
onClick={() => handleChange('color', '')}
|
||||||
aria-label="Remove Series Color"
|
aria-label={strings.getRemoveAriaLabel()}
|
||||||
/>
|
/>
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
</Fragment>
|
</Fragment>
|
||||||
|
@ -88,7 +93,7 @@ export const SimpleTemplate: FunctionComponent<Props> = props => {
|
||||||
<TooltipIcon
|
<TooltipIcon
|
||||||
position="left"
|
position="left"
|
||||||
icon={IconType.warning}
|
icon={IconType.warning}
|
||||||
content="Data has no series to style, add a color dimension"
|
content={strings.getNoSeriesTooltip()}
|
||||||
/>
|
/>
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -12,6 +12,9 @@ import { ESFieldsSelect } from '../../components/es_fields_select';
|
||||||
import { ESFieldSelect } from '../../components/es_field_select';
|
import { ESFieldSelect } from '../../components/es_field_select';
|
||||||
import { ESIndexSelect } from '../../components/es_index_select';
|
import { ESIndexSelect } from '../../components/es_index_select';
|
||||||
import { templateFromReactComponent } from '../../lib/template_from_react_component';
|
import { templateFromReactComponent } from '../../lib/template_from_react_component';
|
||||||
|
import { DataSourceStrings } from '../../../i18n';
|
||||||
|
|
||||||
|
const { ESDocs: strings } = DataSourceStrings;
|
||||||
|
|
||||||
const EsdocsDatasource = ({ args, updateArgs, defaultIndex }) => {
|
const EsdocsDatasource = ({ args, updateArgs, defaultIndex }) => {
|
||||||
const setArg = (name, value) => {
|
const setArg = (name, value) => {
|
||||||
|
@ -64,36 +67,38 @@ const EsdocsDatasource = ({ args, updateArgs, defaultIndex }) => {
|
||||||
setArg('index', 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 (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<EuiCallOut size="s" title="Be careful" color="warning">
|
<EuiCallOut size="s" title={strings.getWarningTitle()} color="warning">
|
||||||
<p>
|
<p>{strings.getWarning()}</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>
|
</EuiCallOut>
|
||||||
|
|
||||||
<EuiSpacer size="m" />
|
<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)} />
|
<ESIndexSelect value={index} onChange={index => setArg('index', index)} />
|
||||||
</EuiFormRow>
|
</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)} />
|
<EuiFieldText value={getQuery()} onChange={e => setArg(getArgName(), e.target.value)} />
|
||||||
</EuiFormRow>
|
</EuiFormRow>
|
||||||
<EuiFormRow label="Sort Field" helpText="Document sort field">
|
<EuiFormRow label={strings.getSortFieldTitle()} helpText={strings.getSortFieldLabel()}>
|
||||||
<ESFieldSelect
|
<ESFieldSelect
|
||||||
index={index}
|
index={index}
|
||||||
value={sortField}
|
value={sortField}
|
||||||
onChange={field => setArg('sort', [field, sortOrder].join(', '))}
|
onChange={field => setArg('sort', [field, sortOrder].join(', '))}
|
||||||
/>
|
/>
|
||||||
</EuiFormRow>
|
</EuiFormRow>
|
||||||
<EuiFormRow label="Sort Order" helpText="Document sort order" compressed>
|
<EuiFormRow
|
||||||
|
label={strings.getSortOrderTitle()}
|
||||||
|
helpText={strings.getSortOrderLabel()}
|
||||||
|
compressed
|
||||||
|
>
|
||||||
<EuiSelect
|
<EuiSelect
|
||||||
value={sortOrder.toLowerCase()}
|
value={sortOrder.toLowerCase()}
|
||||||
onChange={e => setArg('sort', [sortField, e.target.value].join(', '))}
|
onChange={e => setArg('sort', [sortField, e.target.value].join(', '))}
|
||||||
|
@ -101,12 +106,8 @@ const EsdocsDatasource = ({ args, updateArgs, defaultIndex }) => {
|
||||||
/>
|
/>
|
||||||
</EuiFormRow>
|
</EuiFormRow>
|
||||||
<EuiFormRow
|
<EuiFormRow
|
||||||
label="Fields"
|
label={strings.getFieldsTitle()}
|
||||||
helpText={
|
helpText={fields.length <= 10 ? strings.getFieldsLabel() : strings.getFieldsWarningLabel()}
|
||||||
fields.length <= 10
|
|
||||||
? 'The fields to extract. Kibana scripted fields are not currently available'
|
|
||||||
: 'This datasource performs best with 10 or fewer fields'
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<ESFieldsSelect
|
<ESFieldsSelect
|
||||||
index={index}
|
index={index}
|
||||||
|
@ -126,8 +127,8 @@ EsdocsDatasource.propTypes = {
|
||||||
|
|
||||||
export const esdocs = () => ({
|
export const esdocs = () => ({
|
||||||
name: 'esdocs',
|
name: 'esdocs',
|
||||||
displayName: 'Elasticsearch raw documents',
|
displayName: strings.getDisplayName(),
|
||||||
help: 'Pull back raw documents from elasticsearch',
|
help: strings.getHelp(),
|
||||||
image: 'logoElasticsearch',
|
image: 'logoElasticsearch',
|
||||||
template: templateFromReactComponent(EsdocsDatasource),
|
template: templateFromReactComponent(EsdocsDatasource),
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue