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

[Canvas] Use compressed forms in sidebar (#49419) (#50800)

Browse source 
* compressed sidebar design

* add back metric help, style no datasource msg

* re-style remove button

* re-style element status section

* remove unused component import

* update storyshots

* clean up unused i18n values

* address feedback

* address i81n feedback

* update storyshot

* convert string to i18n

* style grouped sidebar messages

* update storyshots
This commit is contained in:
Ryan Keairns 2019-11-15 14:28:51 -05:00 • committed by GitHub
parent 62e57599b1
commit 7e96126522
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
53 changed files with 630 additions and 485 deletions
Download patch file Download diff file Expand all files Collapse all files

10
x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/__examples__/__snapshots__/extended_template.examples.storyshot generated
View file

@ -11,7 +11,7 @@ exports[`Storyshots arguments/AxisConfig extended 1`] = `
}
>
<div
className="euiFormRow euiFormRow--compressed"
className="euiFormRow euiFormRow--compressed euiFormRow--horizontal"
>
<div
className="euiFormRow__labelWrapper"
@ -91,7 +91,7 @@ exports[`Storyshots arguments/AxisConfig/components extended 1`] = `
}
>
<div
className="euiFormRow euiFormRow--compressed"
className="euiFormRow euiFormRow--compressed euiFormRow--horizontal"
>
<div
className="euiFormRow__labelWrapper"
@ -171,12 +171,14 @@ exports[`Storyshots arguments/AxisConfig/components extended disabled 1`] = `
}
>
<div
className="euiText euiText--medium"
className="euiText euiText--extraSmall"
>
<div
className="euiTextColor euiTextColor--subdued"
>
The axis is disabled
<p>
Switch on to view axis settings
</p>
</div>
</div>
</div>

8
x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/extended_template.tsx
View file

@ -71,7 +71,11 @@ export class ExtendedTemplate extends PureComponent<Props> {
const isDisabled = typeof this.props.argValue === 'boolean' && this.props.argValue === false;
if (isDisabled) {
return <EuiText color="subdued">The axis is disabled</EuiText>;
return (
<EuiText color="subdued" size="xs">
<p>{strings.getDisabledText()}</p>
</EuiText>
);
}
const positions = {
@ -85,7 +89,7 @@ export class ExtendedTemplate extends PureComponent<Props> {
return (
<Fragment>
<EuiFormRow label={strings.getPositionLabel()} display="rowCompressed">
<EuiFormRow label={strings.getPositionLabel()} display="columnCompressed">
<EuiSelect
compressed
value={position}

2
x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/datacolumn/index.js
View file

@ -91,7 +91,7 @@ class DatacolumnArgInput extends Component {
});
return (
<EuiFlexGroup gutterSize="s" id={argId}>
<EuiFlexGroup gutterSize="s" id={argId} direction="row">
<EuiFlexItem grow={false}>
<SimpleMathFunction
id={argId}

6
x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/filter_group.js
View file

@ -59,15 +59,15 @@ const FilterGroupInput = ({ onValueChange, argValue, argId, filterGroups }) => {
onChange={ev => setInputValue(ev.target.value)}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexItem grow={false} className="canvasSidebar__panel-noMinWidth">
<EuiButton type="submit" size="s" onClick={handleAddGroup}>
Set
{strings.getButtonSet()}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="s" />
<EuiButtonEmpty color="danger" size="xs" onClick={() => setAddMode(!addMode)} flush="left">
Cancel
{strings.getButtonCancel()}
</EuiButtonEmpty>
</form>
);

1
x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/image_upload/index.js
View file

@ -130,6 +130,7 @@ class ImageUpload extends React.Component {
idSelected={urlType}
onChange={this.changeUrlType}
isFullWidth
className="canvasSidebar__buttonGroup"
/>
</EuiFormRow>
);

2
x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/string.js
View file

@ -26,7 +26,7 @@ const StringArgInput = ({ updateValue, value, confirm, commit, argId }) => (
/>
</EuiFlexItem>
{confirm && (
<EuiFlexItem grow={false}>
<EuiFlexItem grow={false} className="canvasSidebar__panel-noMinWidth">
<EuiButton size="s" onClick={() => commit(value)}>
{confirm}
</EuiButton>

10
x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/toggle.js
View file

@ -19,8 +19,14 @@ const ToggleArgInput = ({ onValueChange, argValue, argId, renderError }) => {
return null;
}
return (
<EuiFormRow display="rowCompressed">
<EuiSwitch compressed id={argId} checked={argValue} onChange={handleChange} />
<EuiFormRow display="columnCompressedSwitch">
<EuiSwitch
compressed
id={argId}
checked={argValue}
onChange={handleChange}
className="canvasArg__switch"
/>
</EuiFormRow>
);
};

20
x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/demodata.js
View file

@ -5,28 +5,15 @@
*/
import React from 'react';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiText } from '@elastic/eui';
import { templateFromReactComponent } from '../../../public/lib/template_from_react_component';
import { ComponentStrings, CANVAS, DataSourceStrings } from '../../../i18n';
import { DataSourceStrings } from '../../../i18n';
const { DemoData: strings } = DataSourceStrings;
const DemodataDatasource = () => (
<EuiText>
<h3>{strings.getHeading()}</h3>
<p>
<FormattedMessage
id="xpack.canvas.uis.dataSources.demoDataDescription"
defaultMessage="This data source is connected to every {canvas} element by default. Its purpose is to give you some playground data to get started. The demo set contains 4 strings, 3 numbers and a date. Feel free to experiment and, when you're ready, click {clickText} above to connect to your own data."
values={{
canvas: CANVAS,
clickText: (
<strong>{ComponentStrings.DatasourceDatasourceComponent.getChangeButtonLabel()}</strong>
),
}}
/>
</p>
<EuiText size="s">
<p>{strings.getDescription()}</p>
</EuiText>
);
@ -34,7 +21,6 @@ export const demodata = () => ({
name: 'demodata',
displayName: strings.getDisplayName(),
help: strings.getHelp(),
// Replace this with a better icon when we have time.
image: 'logoElasticStack',
template: templateFromReactComponent(DemodataDatasource),
});

17
x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/essql.js
View file

@ -6,10 +6,10 @@
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { EuiFormRow, EuiTextArea } from '@elastic/eui';
import { EuiFormRow, EuiTextArea, EuiLink, EuiText } from '@elastic/eui';
import { getSimpleArg, setSimpleArg } from '../../../public/lib/arg_helpers';
import { templateFromReactComponent } from '../../../public/lib/template_from_react_component';
import { DataSourceStrings } from '../../../i18n';
import { DataSourceStrings, SQL_URL } from '../../../i18n';
const { Essql: strings } = DataSourceStrings;
@ -59,13 +59,24 @@ class EssqlDatasource extends PureComponent {
const { isInvalid } = this.props;
return (
<EuiFormRow isInvalid={isInvalid} label={strings.getLabel()}>
<EuiFormRow
isInvalid={isInvalid}
label={strings.getLabel()}
labelAppend={
<EuiText size="xs">
<EuiLink href={SQL_URL} target="_blank">
{strings.getLabelAppend()}
</EuiLink>
</EuiText>
}
>
<EuiTextArea
placeholder={this.defaultQuery}
isInvalid={isInvalid}
className="canvasTextArea__code"
value={this.getQuery()}
onChange={this.onChange}
rows={15}
/>
</EuiFormRow>
);

4
x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/index.js
View file

@ -4,8 +4,8 @@
* you may not use this file except in compliance with the Elastic License.
*/
import { timelion } from './timelion';
import { demodata } from './demodata';
import { essql } from './essql';
import { timelion } from './timelion';
export const datasourceSpecs = [timelion, demodata, essql];
export const datasourceSpecs = [demodata, essql, timelion];

68
x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/timelion.js
View file

@ -12,13 +12,13 @@ import {
EuiCallOut,
EuiSpacer,
EuiCode,
EuiText,
EuiTextArea,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { getSimpleArg, setSimpleArg } from '../../../public/lib/arg_helpers';
import { templateFromReactComponent } from '../../../public/lib/template_from_react_component';
import { DataSourceStrings, TIMELION, CANVAS } from '../../../i18n';
import { TooltipIcon } from '../../../public/components/tooltip_icon';
const { Timelion: strings } = DataSourceStrings;
@ -57,43 +57,12 @@ const TimelionDatasource = ({ args, updateArgs, defaultIndex }) => {
return (
<div>
<EuiText size="xs">
<h3>{TIMELION}</h3>
<p>{strings.getAbout()}</p>
</EuiText>
<EuiSpacer />
<EuiFormRow label={strings.getQueryLabel()} helpText={strings.getQueryHelp()}>
<EuiTextArea
className="canvasTextArea__code"
value={getQuery()}
onChange={e => setArg(argName, e.target.value)}
/>
</EuiFormRow>
{
// TODO: Time timelion interval picker should be a drop down
}
<EuiFormRow
label={strings.getIntervalLabel()}
helpText={strings.getIntervalHelp()}
display="rowCompressed"
>
<EuiFieldText
compressed
value={getInterval()}
onChange={e => setArg('interval', e.target.value)}
/>
</EuiFormRow>
<EuiSpacer size="m" />
<EuiCallOut color="warning" title={strings.getTipsHeading()} size="s">
<EuiCallOut title={strings.getTipsHeading()} size="s" iconType="iInCircle">
<ul>
<li>
<FormattedMessage
id="xpack.canvas.uis.dataSources.timelion.tips.time"
defaultMessage="{timelion} requires a time range, you should add a time filter element to your page somewhere, or use the code editor to pass in a time filter."
defaultMessage="{timelion} requires a time range. Add a time filter element to your page or use the expression editor to pass one in."
values={{
timelion: TIMELION,
}}
@ -102,7 +71,7 @@ const TimelionDatasource = ({ args, updateArgs, defaultIndex }) => {
<li>
<FormattedMessage
id="xpack.canvas.uis.dataSources.timelion.tips.functions"
defaultMessage="Some {timelion} functions, such as {functionExample}, don't translate to a {canvas} data table. Anything todo with data manipulation should work grand."
defaultMessage="Some {timelion} functions, such as {functionExample}, do not translate to a {canvas} data table. However, anything todo with data manipulation should work as expected."
values={{
timelion: TIMELION,
canvas: CANVAS,
@ -112,6 +81,35 @@ const TimelionDatasource = ({ args, updateArgs, defaultIndex }) => {
</li>
</ul>
</EuiCallOut>
<EuiSpacer size="m" />
<EuiFormRow
label={strings.getQueryLabel()}
helpText={strings.getQueryHelp()}
labelAppend={<TooltipIcon content={strings.getAbout()} />}
>
<EuiTextArea
className="canvasTextArea__code"
value={getQuery()}
onChange={e => setArg(argName, e.target.value)}
rows={15}
/>
</EuiFormRow>
{
// TODO: Time timelion interval picker should be a drop down
}
<EuiFormRow
label={strings.getIntervalLabel()}
helpText={strings.getIntervalHelp()}
display="columnCompressed"
>
<EuiFieldText
compressed
value={getInterval()}
onChange={e => setArg('interval', e.target.value)}
/>
</EuiFormRow>
</div>
);
};

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

@ -16,6 +16,13 @@ export const metric = () => ({
modelArgs: [['_', { label: strings.getNumberDisplayName() }]],
requiresContext: false,
args: [
{
name: 'metricFormat',
displayName: strings.getMetricFormatDisplayName(),
help: strings.getMetricFormatHelp(),
argType: 'numberFormat',
default: `"${AdvancedSettings.get('format:number:defaultPattern')}"`,
},
{
name: '_',
displayName: strings.getLabelDisplayName(),
@ -23,13 +30,6 @@ export const metric = () => ({
argType: 'string',
default: '""',
},
{
name: 'labelFont',
displayName: strings.getLabelFontDisplayName(),
help: strings.getLabelFontHelp(),
argType: 'font',
default: `{font size=18 family="${openSans.value}" color="#000000" align=center}`,
},
{
name: 'metricFont',
displayName: strings.getMetricFontDisplayName(),
@ -38,11 +38,11 @@ export const metric = () => ({
default: `{font size=48 family="${openSans.value}" color="#000000" align=center lHeight=48}`,
},
{
name: 'metricFormat',
displayName: strings.getMetricFormatDisplayName(),
help: strings.getMetricFormatHelp(),
argType: 'numberFormat',
default: `"${AdvancedSettings.get('format:number:defaultPattern')}"`,
name: 'labelFont',
displayName: strings.getLabelFontDisplayName(),
help: strings.getLabelFontHelp(),
argType: 'font',
default: `{font size=18 family="${openSans.value}" color="#000000" align=center}`,
},
],
});

48
x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/views/pie.js
View file

@ -23,6 +23,16 @@ export const pie = () => ({
name: 'palette',
argType: 'palette',
},
{
name: 'legend',
displayName: strings.getLegendDisplayName(),
help: strings.getLegendHelp(),
argType: 'select',
default: 'ne',
options: {
choices: legendOptions,
},
},
{
name: 'hole',
displayName: strings.getHoleDisplayName(),
@ -34,13 +44,6 @@ export const pie = () => ({
max: 100,
},
},
{
name: 'labels',
displayName: strings.getLabelsDisplayName(),
help: strings.getLabelsHelp(),
argType: 'toggle',
default: true,
},
{
name: 'labelRadius',
displayName: strings.getLabelRadiusDisplayName(),
@ -52,16 +55,6 @@ export const pie = () => ({
max: 100,
},
},
{
name: 'legend',
displayName: strings.getLegendDisplayName(),
help: strings.getLegendHelp(),
argType: 'select',
default: 'ne',
options: {
choices: legendOptions,
},
},
{
name: 'radius',
displayName: strings.getRadiusDisplayName(),
@ -69,6 +62,20 @@ export const pie = () => ({
argType: 'percentage',
default: 1,
},
{
name: 'tilt',
displayName: strings.getTiltDisplayName(),
help: strings.getTiltHelp(),
argType: 'percentage',
default: 1,
},
{
name: 'labels',
displayName: strings.getLabelsDisplayName(),
help: strings.getLabelsHelp(),
argType: 'toggle',
default: true,
},
{
name: 'seriesStyle',
argType: 'seriesStyle',
@ -78,13 +85,6 @@ export const pie = () => ({
name: 'font',
argType: 'font',
},
{
name: 'tilt',
displayName: strings.getTiltDisplayName(),
help: strings.getTiltHelp(),
argType: 'percentage',
default: 1,
},
],
resolve({ context }) {
if (getState(context) !== 'ready') {

12
x-pack/legacy/plugins/canvas/i18n/components.ts
View file

@ -228,11 +228,11 @@ export const ComponentStrings = {
DatasourceDatasourceComponent: {
getChangeButtonLabel: () =>
i18n.translate('xpack.canvas.datasourceDatasourceComponent.changeButtonLabel', {
defaultMessage: 'Change your data source',
defaultMessage: 'Change element data source',
}),
getPreviewButtonLabel: () =>
i18n.translate('xpack.canvas.datasourceDatasourceComponent.previewButtonLabel', {
defaultMessage: 'Preview',
defaultMessage: 'Preview data',
}),
getSaveButtonLabel: () =>
i18n.translate('xpack.canvas.datasourceDatasourceComponent.saveButtonLabel', {
@ -294,7 +294,7 @@ export const ComponentStrings = {
}),
getTitle: () =>
i18n.translate('xpack.canvas.elementConfig.title', {
defaultMessage: 'Elements',
defaultMessage: 'Element status',
description:
'"Elements" refers to the individual text, images, or visualizations that you can add to a Canvas workpad',
}),
@ -581,7 +581,7 @@ export const ComponentStrings = {
}),
getBackgroundColorLabel: () =>
i18n.translate('xpack.canvas.pageConfig.backgroundColorLabel', {
defaultMessage: 'Background Color',
defaultMessage: 'Background',
}),
getNoTransitionDropDownOptionLabel: () =>
i18n.translate('xpack.canvas.pageConfig.transitions.noneDropDownOptionLabel', {
@ -592,7 +592,7 @@ export const ComponentStrings = {
}),
getTitle: () =>
i18n.translate('xpack.canvas.pageConfig.title', {
defaultMessage: 'Page',
defaultMessage: 'Page styles',
}),
getTransitionLabel: () =>
i18n.translate('xpack.canvas.pageConfig.transitionLabel', {
@ -1002,7 +1002,7 @@ export const ComponentStrings = {
}),
getTitle: () =>
i18n.translate('xpack.canvas.workpadConfig.title', {
defaultMessage: 'Workpad',
defaultMessage: 'Workpad settings',
}),
getUSLetterButtonLabel: () =>
i18n.translate('xpack.canvas.workpadConfig.USLetterButtonLabel', {

3
x-pack/legacy/plugins/canvas/i18n/constants.ts
View file

@ -15,6 +15,7 @@ export const CSV = 'CSV';
export const DATEMATH = '`datemath`';
export const DATATABLE = '`datatable`';
export const ELASTICSEARCH = 'Elasticsearch';
export const ELASTICSEARCH_SHORT = 'ES';
export const FONT_FAMILY = '`font-family`';
export const FONT_WEIGHT = '`font-weight`';
export const HEX = 'HEX';
@ -32,6 +33,8 @@ export const PDF = 'PDF';
export const POST = 'POST';
export const RGB = 'RGB';
export const SQL = 'SQL';
export const SQL_URL =
'https://www.elastic.co/guide/en/elasticsearch/reference/current/sql-spec.html';
export const SVG = 'SVG';
export const TIMELION = 'Timelion';
export const TINYMATH = '`TinyMath`';

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

@ -5,7 +5,7 @@
*/
import { i18n } from '@kbn/i18n';
import { LUCENE } from './constants';
import { LUCENE, ELASTICSEARCH } from './constants';
export const ArgTypesStrings = {
Color: {
@ -101,13 +101,17 @@ export const ArgTypesStrings = {
i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.colorLabel', {
defaultMessage: 'Color',
}),
getColorValueDefault: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.colorValueDefault', {
defaultMessage: 'Auto',
}),
getStyleLabel: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.styleLabel', {
defaultMessage: 'Style',
}),
getRemoveAriaLabel: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.removeAriaLabel', {
defaultMessage: 'Remove Series Color',
defaultMessage: 'Remove series color',
}),
getNoSeriesTooltip: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.noSeriesTooltip', {
@ -115,11 +119,11 @@ export const ArgTypesStrings = {
}),
getSeriesIdentifierLabel: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.seriesIdentifierLabel', {
defaultMessage: 'Series Identifier',
defaultMessage: 'Series id',
}),
getSelectSeriesOption: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.selectSeriesDropDown', {
defaultMessage: 'Select Series',
defaultMessage: 'Select series',
}),
getLineLabel: () =>
i18n.translate('xpack.canvas.expressionTypes.argTypes.seriesStyle.lineLabel', {
@ -152,15 +156,18 @@ export const ExpressionDataSourceStrings = {
}),
getWarningTitle: () =>
i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.warningTitle', {
defaultMessage: 'Be careful',
defaultMessage: 'Query with caution',
}),
getWarning: () =>
i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.warningDescription', {
defaultMessage: `
The Elasticsearch Docs datasource is used to pull documents directly from Elasticsearch
This datasource pulls 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.`,
values: {
elasticsearch: ELASTICSEARCH,
},
}),
getIndexTitle: () =>
i18n.translate('xpack.canvas.expressionTypes.datasources.esdocs.indexTitle', {

83
x-pack/legacy/plugins/canvas/i18n/ui.ts
View file

@ -12,9 +12,9 @@ import {
CANVAS,
CSS,
ELASTICSEARCH,
ELASTICSEARCH_SHORT,
HEX,
HTML,
KIBANA,
LUCENE,
MARKDOWN,
MOMENTJS,
@ -35,6 +35,10 @@ export const ArgumentStrings = {
i18n.translate('xpack.canvas.uis.arguments.axisConfigLabel', {
defaultMessage: 'Visualization axis configuration',
}),
getDisabledText: () =>
i18n.translate('xpack.canvas.uis.arguments.axisConfigDisabledText', {
defaultMessage: 'Switch on to view axis settings',
}),
getPositionBottom: () =>
i18n.translate('xpack.canvas.uis.arguments.axisConfig.position.options.bottomDropDown', {
defaultMessage: 'bottom',
@ -124,6 +128,14 @@ export const ArgumentStrings = {
i18n.translate('xpack.canvas.uis.arguments.filterGroup.createNewGroupLinkText', {
defaultMessage: 'Create new group',
}),
getButtonSet: () =>
i18n.translate('xpack.canvas.uis.arguments.filterGroup.setValue', {
defaultMessage: 'Set',
}),
getButtonCancel: () =>
i18n.translate('xpack.canvas.uis.arguments.filterGroup.cancelValue', {
defaultMessage: 'Cancel',
}),
getDisplayName: () =>
i18n.translate('xpack.canvas.uis.arguments.filterGroupTitle', {
defaultMessage: 'Filter Group',
@ -260,7 +272,7 @@ export const ArgumentStrings = {
}),
getHelp: () =>
i18n.translate('xpack.canvas.uis.arguments.shapeLabel', {
defaultMessage: 'Shape picker',
defaultMessage: 'Change the shape of the current element',
}),
},
String: {
@ -303,12 +315,20 @@ export const DataSourceStrings = {
}),
getHeading: () =>
i18n.translate('xpack.canvas.uis.dataSources.demoData.headingTitle', {
defaultMessage: 'You are using demo data',
defaultMessage: 'This element is using demo data',
}),
getHelp: () =>
i18n.translate('xpack.canvas.uis.dataSources.demoDataLabel', {
defaultMessage: 'Mock data set with usernames, prices, projects, countries, and phases',
}),
getDescription: () =>
i18n.translate('xpack.canvas.uis.dataSources.demoDataDescription', {
defaultMessage:
'By default, every {canvas} element is connected to the demo data source. Change the data source, above, to connect your own data.',
values: {
canvas: CANVAS,
},
}),
},
Essql: {
getDisplayName: () =>
@ -329,9 +349,13 @@ export const DataSourceStrings = {
}),
getLabel: () =>
i18n.translate('xpack.canvas.uis.dataSources.essql.queryTitle', {
defaultMessage: '{elasticsearch} {sql} query',
defaultMessage: 'Query',
}),
getLabelAppend: () =>
i18n.translate('xpack.canvas.uis.dataSources.essql.queryTitleAppend', {
defaultMessage: 'Learn {elasticsearchShort} {sql} syntax',
values: {
elasticsearch: ELASTICSEARCH,
elasticsearchShort: ELASTICSEARCH_SHORT,
sql: SQL,
},
}),
@ -340,10 +364,9 @@ export const DataSourceStrings = {
getAbout: () =>
i18n.translate('xpack.canvas.uis.dataSources.timelion.aboutDetail', {
defaultMessage:
'{canvas} integrates with {kibanaTimelion} application to allow you to use {timelion} queries to pull back timeseries data in a tabular format that can be used with {canvas} elements.',
'Use {timelion} queries to pull back timeseries data that can be used with {canvas} elements.',
values: {
timelion: TIMELION,
kibanaTimelion: `${KIBANA}'s ${TIMELION}`,
canvas: CANVAS,
},
}),
@ -357,9 +380,8 @@ export const DataSourceStrings = {
getIntervalHelp: () =>
i18n.translate('xpack.canvas.uis.dataSources.timelion.intervalLabel', {
defaultMessage:
'Accepts {elasticsearch} date math: {weeksExample}, {daysExample}, {secondsExample}, or {auto}',
'Use date math like {weeksExample}, {daysExample}, {secondsExample}, or {auto}',
values: {
elasticsearch: ELASTICSEARCH,
secondsExample: '10s',
daysExample: '5d',
weeksExample: '1w',
@ -383,7 +405,11 @@ export const DataSourceStrings = {
}),
getTipsHeading: () =>
i18n.translate('xpack.canvas.uis.dataSources.timelion.tipsTitle', {
defaultMessage: 'Some tips',
defaultMessage: 'Tips for using {timelion} in {canvas}',
values: {
timelion: TIMELION,
canvas: CANVAS,
},
}),
},
};
@ -530,7 +556,7 @@ export const ViewStrings = {
}),
getValueDisplayName: () =>
i18n.translate('xpack.canvas.uis.views.dropdownControl.args.valueColumnTitle', {
defaultMessage: 'Values column',
defaultMessage: 'Value column',
}),
getValueHelp: () =>
i18n.translate('xpack.canvas.uis.views.dropdownControl.args.valueColumnLabel', {
@ -610,7 +636,7 @@ export const ViewStrings = {
}),
getNumberDisplayName: () =>
i18n.translate('xpack.canvas.uis.views.numberArgTitle', {
defaultMessage: 'Number',
defaultMessage: 'Value',
}),
getLabelDisplayName: () =>
i18n.translate('xpack.canvas.uis.views.metric.args.labelArgTitle', {
@ -618,7 +644,7 @@ export const ViewStrings = {
}),
getLabelFontDisplayName: () =>
i18n.translate('xpack.canvas.uis.views.metric.args.labelFontTitle', {
defaultMessage: 'Label text settings',
defaultMessage: 'Label text',
}),
getLabelFontHelp: () =>
i18n.translate('xpack.canvas.uis.views.metric.args.labelFontLabel', {
@ -626,11 +652,11 @@ export const ViewStrings = {
}),
getLabelHelp: () =>
i18n.translate('xpack.canvas.uis.views.metric.args.labelArgLabel', {
defaultMessage: 'Describes the metric',
defaultMessage: 'Enter a text label for the metric value',
}),
getMetricFontDisplayName: () =>
i18n.translate('xpack.canvas.uis.views.metric.args.metricFontTitle', {
defaultMessage: 'Metric text settings',
defaultMessage: 'Metric text',
}),
getMetricFontHelp: () =>
i18n.translate('xpack.canvas.uis.views.metric.args.metricFontLabel', {
@ -638,11 +664,11 @@ export const ViewStrings = {
}),
getMetricFormatDisplayName: () =>
i18n.translate('xpack.canvas.uis.views.metric.args.metricFormatTitle', {
defaultMessage: 'Metric Format',
defaultMessage: 'Format',
}),
getMetricFormatHelp: () =>
i18n.translate('xpack.canvas.uis.views.metric.args.metricFormatLabel', {
defaultMessage: 'Fonts, alignment and color',
defaultMessage: 'Select a format for the metric value',
}),
},
Pie: {
@ -676,7 +702,7 @@ export const ViewStrings = {
}),
getLegendDisplayName: () =>
i18n.translate('xpack.canvas.uis.views.pie.args.legendTitle', {
defaultMessage: 'Legend position',
defaultMessage: 'Legend',
}),
getLegendHelp: () =>
i18n.translate('xpack.canvas.uis.views.pie.args.legendLabel', {
@ -714,7 +740,7 @@ export const ViewStrings = {
}),
getLegendDisplayName: () =>
i18n.translate('xpack.canvas.uis.views.plot.args.legendTitle', {
defaultMessage: 'Legend position',
defaultMessage: 'Legend',
}),
getLegendHelp: () =>
i18n.translate('xpack.canvas.uis.views.plot.args.legendLabel', {
@ -744,7 +770,7 @@ export const ViewStrings = {
}),
getBarColorHelp: () =>
i18n.translate('xpack.canvas.uis.views.progress.args.barColorLabel', {
defaultMessage: 'Accepts HEX, RGB or HTML Color names',
defaultMessage: 'Accepts HEX, RGB or HTML color names',
}),
getBarWeightDisplayName: () =>
i18n.translate('xpack.canvas.uis.views.progress.args.barWeightTitle', {
@ -930,7 +956,7 @@ export const ViewStrings = {
}),
getBorderHelp: () =>
i18n.translate('xpack.canvas.uis.views.shape.args.borderLabel', {
defaultMessage: 'Accepts HEX, RGB or HTML Color names',
defaultMessage: 'Accepts HEX, RGB or HTML color names',
}),
getBorderWidthDisplayName: () =>
i18n.translate('xpack.canvas.uis.views.shape.args.borderWidthTitle', {
@ -950,22 +976,19 @@ export const ViewStrings = {
}),
getFillHelp: () =>
i18n.translate('xpack.canvas.uis.views.shape.args.fillLabel', {
defaultMessage: 'Accepts HEX, RGB or HTML Color names',
defaultMessage: 'Accepts HEX, RGB or HTML color names',
}),
getMaintainAspectDisplayName: () =>
i18n.translate('xpack.canvas.uis.views.shape.args.maintainAspectTitle', {
defaultMessage: 'Maintain aspect ratio',
defaultMessage: 'Fixed ratio',
}),
getMaintainAspectHelp: () =>
i18n.translate('xpack.canvas.uis.views.shape.args.maintainAspectLabel', {
defaultMessage: `Select '{true}' to maintain aspect ratio`,
values: {
true: BOOLEAN_TRUE,
},
defaultMessage: `Enable to maintain aspect ratio`,
}),
getShapeDisplayName: () =>
i18n.translate('xpack.canvas.uis.views.shape.args.shapeTitle', {
defaultMessage: 'Select a shape',
defaultMessage: 'Select shape',
}),
},
Table: {
@ -988,7 +1011,7 @@ export const ViewStrings = {
}),
getPerPageDisplayName: () =>
i18n.translate('xpack.canvas.uis.views.table.args.perPageTitle', {
defaultMessage: 'Rows per page',
defaultMessage: 'Rows',
}),
getPerPageHelp: () =>
i18n.translate('xpack.canvas.uis.views.table.args.perPageLabel', {
@ -1022,7 +1045,7 @@ export const ViewStrings = {
}),
getFilterGroupDisplayName: () =>
i18n.translate('xpack.canvas.uis.views.timefilter.args.filterGroupTitle', {
defaultMessage: 'Filter group name',
defaultMessage: 'Filter group',
}),
getFilterGroupHelp: () =>
i18n.translate('xpack.canvas.uis.views.timefilter.args.filterGroupLabel', {

4
x-pack/legacy/plugins/canvas/public/components/arg_add_popover/arg_add_popover.scss
View file

@ -1,3 +1,7 @@
.canvasArg__addArg {
margin-right: -$euiSizeS;
}
.canvasArg__addPopover {
width: 250px;
}

1
x-pack/legacy/plugins/canvas/public/components/arg_add_popover/arg_add_popover.tsx
View file

@ -33,6 +33,7 @@ export const ArgAddPopover = ({ options }: Props) => {
iconType="plusInCircle"
aria-label={strings.getAddAriaLabel()}
onClick={handleClick}
className="canvasArg__addArg"
/>
);

56
x-pack/legacy/plugins/canvas/public/components/arg_form/arg_form.scss
View file

@ -8,6 +8,14 @@
.canvasSidebar__panel {
.canvasArg--expandable:last-child {
.canvasArg__accordion {
margin-bottom: (-$euiSizeS);
}
.canvasArg__accordion:after {
content: none;
}
.canvasArg__accordion.euiAccordion-isOpen:after {
display: none;
}
@ -15,12 +23,12 @@
}
.canvasArg {
margin-top: $euiSize;
margin-top: $euiSizeS;
}
.canvasArg--remove {
visibility: hidden;
}
.canvasArg__remove {
min-width: $euiSize;
padding: $euiSizeXS 0;
}
.canvasArg__content {
@ -29,47 +37,18 @@
.canvasArg__form {
position: relative;
}
.canvasArg__form,
.canvasArg__accordion {
&:hover {
.canvasArg__remove {
opacity: 1;
visibility: visible;
}
}
}
.canvasArg__tooltip {
margin-left: -$euiSizeXL;
}
.canvasArg__remove {
position: absolute;
right: -$euiSizeL;
top: $euiSizeS - 2px;
border-radius: $euiBorderRadius;
border: $euiBorderThin;
background: $euiColorEmptyShade;
opacity: 0;
visibility: hidden;
transition: opacity $euiAnimSpeedNormal $euiAnimSlightResistance;
transition-delay: $euiAnimSpeedSlow;
}
.canvasArg__accordion {
padding: $euiSizeS $euiSize;
margin: 0 (-$euiSize);
padding: $euiSizeS $euiSizeM;
margin: 0 (-$euiSizeM);
background: $euiColorLightestShade;
position: relative;
// different spacing means leff shift
.canvasArg__remove {
right: -$euiSizeM;
}
// don't let remove button position here if this is nested in an accordion
.canvasArg__form {
position: static;
@ -97,3 +76,8 @@
bottom: 0;
}
}
// this is a workaround since an EuiFormRow label cannot be passed in toggle.js
.canvasArg__switch {
padding-top: calc(#{$euiSizeS} * .75);
}

14
x-pack/legacy/plugins/canvas/public/components/arg_form/arg_label.js
View file

@ -6,7 +6,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { EuiFormRow, EuiAccordion, EuiText, EuiToolTip } from '@elastic/eui';
import { EuiFormRow, EuiAccordion, EuiText, EuiToolTip, EuiIcon } from '@elastic/eui';
// This is what is being generated by render() from the Arg class. It is called in FunctionForm
export const ArgLabel = props => {
@ -32,7 +32,17 @@ export const ArgLabel = props => {
</EuiAccordion>
) : (
simpleArg && (
<EuiFormRow display="rowCompressed" label={label} helpText={help} id={argId}>
<EuiFormRow
display="columnCompressed"
label={
<EuiToolTip content={help}>
<span>
{label} <EuiIcon type="iInCircle" color="subdued" />
</span>
</EuiToolTip>
}
id={argId}
>
{simpleArg}
</EuiFormRow>
)

19
x-pack/legacy/plugins/canvas/public/components/arg_form/arg_simple_form.tsx
View file

@ -6,7 +6,7 @@
import React, { ReactNode, MouseEventHandler } from 'react';
import PropTypes from 'prop-types';
import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
import { TooltipIcon, IconType } from '../tooltip_icon';
import { ComponentStrings } from '../../../i18n';
@ -41,13 +41,16 @@ export const ArgSimpleForm: React.FunctionComponent<Props> = ({
)}
{!required && (
<EuiButtonIcon
color="danger"
onClick={onRemove}
iconType="trash"
aria-label={strings.getRemoveAriaLabel()}
className="canvasArg__remove"
/>
<EuiToolTip position="top" content={strings.getRemoveAriaLabel()}>
<EuiButtonIcon
color="subdued"
onClick={onRemove}
iconType="cross"
iconSize="s"
aria-label={strings.getRemoveAriaLabel()}
className="canvasArg__remove"
/>
</EuiToolTip>
)}
</EuiFlexGroup>
);

25
x-pack/legacy/plugins/canvas/public/components/datasource/datasource.scss
View file

@ -6,6 +6,31 @@
padding: 0 $euiSizeS;
}
.canvasDataSource__section {
padding: $euiSizeM;
}
.canvasDataSource__triggerButton {
@include euiTitle('xs');
line-height: $euiSizeXXL;
}
.canvasDataSource__triggerButtonIcon {
margin-right: $euiSizeS;
}
.canvasDataSource__list {
padding: $euiSizeM;
}
.canvasDataSource__card .euiCard__content {
padding-top: 0 !important; // sass-lint:disable-line no-important
}
.canvasDataSource__card + .canvasDataSource__card {
margin-top: $euiSizeS;
}
.canvasDataSource__card--isCurrent {
border-color: $euiColorSecondary;
}

69
x-pack/legacy/plugins/canvas/public/components/datasource/datasource_component.js
View file

@ -7,20 +7,23 @@
import React, { Fragment, PureComponent } from 'react';
import PropTypes from 'prop-types';
import {
EuiPanel,
EuiFlexGroup,
EuiFlexItem,
EuiButton,
EuiButtonEmpty,
EuiSpacer,
EuiIcon,
EuiCallOut,
EuiButtonEmpty,
EuiHorizontalRule,
} from '@elastic/eui';
import { isEqual } from 'lodash';
import { ComponentStrings } from '../../../i18n';
import { ComponentStrings, DataSourceStrings } from '../../../i18n';
import { getDefaultIndex } from '../../lib/es_service';
import { DatasourceSelector } from './datasource_selector';
import { DatasourcePreview } from './datasource_preview';
const { DatasourceDatasourceComponent: strings } = ComponentStrings;
const { DemoData: demoDataStrings } = DataSourceStrings;
export class DatasourceComponent extends PureComponent {
static propTypes = {
@ -113,7 +116,13 @@ export class DatasourceComponent extends PureComponent {
const { defaultIndex } = this.state;
if (selecting) {
return <DatasourceSelector datasources={datasources} onSelect={this.setSelectedDatasource} />;
return (
<DatasourceSelector
datasources={datasources}
onSelect={this.setSelectedDatasource}
current={stateDatasource.name}
/>
);
}
const datasourcePreview = previewing ? (
@ -124,47 +133,51 @@ export class DatasourceComponent extends PureComponent {
/>
) : null;
const datasourceRender = stateDatasource.render({
args: stateArgs,
updateArgs,
datasourceDef,
isInvalid,
setInvalid,
defaultIndex,
});
return (
<Fragment>
<EuiPanel>
<div className="canvasDataSource__section">
<EuiButtonEmpty
iconSide="right"
flush="left"
iconType="sortRight"
iconType="arrowRight"
onClick={() => setSelecting(!selecting)}
className="canvasDataSource__triggerButton"
flush="left"
size="s"
>
{strings.getChangeButtonLabel()}
<EuiIcon type="database" className="canvasDataSource__triggerButtonIcon" />
{stateDatasource.displayName}
</EuiButtonEmpty>
<EuiSpacer size="s" />
{stateDatasource.render({
args: stateArgs,
updateArgs,
datasourceDef,
isInvalid,
setInvalid,
defaultIndex,
})}
<EuiSpacer size="m" />
{stateDatasource.name === 'demodata' ? (
<EuiCallOut title={demoDataStrings.getHeading()} iconType="iInCircle">
{datasourceRender}
</EuiCallOut>
) : (
datasourceRender
)}
<EuiHorizontalRule margin="m" />
<EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiButton size="s" onClick={() => setPreviewing(true)} icon="check">
<EuiButtonEmpty size="s" onClick={() => setPreviewing(true)}>
{strings.getPreviewButtonLabel()}
</EuiButton>
</EuiButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
disabled={isInvalid}
size="s"
color="secondary"
fill
onClick={this.save}
icon="check"
>
<EuiButton disabled={isInvalid} size="s" onClick={this.save} fill color="secondary">
{strings.getSaveButtonLabel()}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
</div>
{datasourcePreview}
</Fragment>

8
x-pack/legacy/plugins/canvas/public/components/datasource/datasource_preview/datasource_preview.js
View file

@ -16,6 +16,7 @@ import {
EuiPanel,
EuiText,
EuiEmptyPrompt,
EuiSpacer,
} from '@elastic/eui';
import { Datatable } from '../../datatable';
import { Error } from '../../error';
@ -31,21 +32,22 @@ export const DatasourcePreview = ({ done, datatable }) => (
<EuiModalHeaderTitle>{strings.getModalTitle()}</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody className="canvasDatasourcePreview">
<EuiText size="s" color="subdued">
<EuiText size="s">
<p>
<FormattedMessage
id="xpack.canvas.datasourceDatasourcePreview.modalDescription"
defaultMessage="Click {saveLabel} in the sidebar to use this data."
defaultMessage="The following data will be available to the selected element upon clicking {saveLabel} in the sidebar."
values={{
saveLabel: <strong>{datasourceStrings.getSaveButtonLabel()}</strong>,
}}
/>
</p>
</EuiText>
<EuiSpacer />
{datatable.type === 'error' ? (
<Error payload={datatable} />
) : (
<EuiPanel className="canvasDatasourcePreview__panel">
<EuiPanel className="canvasDatasourcePreview__panel" paddingSize="none">
{datatable.rows.length > 0 ? (
<Datatable datatable={datatable} showHeader paginate />
) : (

13
x-pack/legacy/plugins/canvas/public/components/datasource/datasource_selector.js
View file

@ -8,17 +8,21 @@ import React from 'react';
import PropTypes from 'prop-types';
import { EuiCard, EuiIcon } from '@elastic/eui';
export const DatasourceSelector = ({ onSelect, datasources }) => (
<div>
export const DatasourceSelector = ({ onSelect, datasources, current }) => (
<div className="canvasDataSource__list">
{datasources.map(d => (
<EuiCard
key={d.name}
title={d.displayName}
icon={<EuiIcon type={d.image} size="xxl" />}
onClick={() => onSelect(d.name)}
titleElement="h5"
icon={<EuiIcon type={d.image} size="l" />}
description={d.help}
layout="horizontal"
className="canvasDataSource__card"
selectable={{
isSelected: d.name === current ? true : false,
onClick: () => onSelect(d.name),
}}
/>
))}
</div>
@ -27,4 +31,5 @@ export const DatasourceSelector = ({ onSelect, datasources }) => (
DatasourceSelector.propTypes = {
onSelect: PropTypes.func.isRequired,
datasources: PropTypes.array.isRequired,
current: PropTypes.string.isRequired,
};

11
x-pack/legacy/plugins/canvas/public/components/datasource/no_datasource.js
View file

@ -6,18 +6,17 @@
import React from 'react';
import PropTypes from 'prop-types';
import { EuiPanel, EuiText } from '@elastic/eui';
import { EuiCallOut } from '@elastic/eui';
import { ComponentStrings } from '../../../i18n';
const { DatasourceNoDatasource: strings } = ComponentStrings;
export const NoDatasource = () => (
<EuiPanel>
<EuiText>
<h4>{strings.getPanelTitle()}</h4>
<div className="canvasDataSource__section">
<EuiCallOut title={strings.getPanelTitle()} iconType="iInCircle">
<p>{strings.getPanelDescription()}</p>
</EuiText>
</EuiPanel>
</EuiCallOut>
</div>
);
NoDatasource.propTypes = {

9
x-pack/legacy/plugins/canvas/public/components/datatable/datatable.scss
View file

@ -4,6 +4,7 @@
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: $euiFontSizeS;
.canvasDataTable__tableWrapper {
@include euiScrollBar;
@ -12,7 +13,8 @@
overflow: auto;
// removes white square in the scrollbar corner
&::-webkit-scrollbar-corner { // sass-lint:disable-line no-vendor-prefixes
// sass-lint:disable no-vendor-prefixes
&::-webkit-scrollbar-corner {
background: transparent;
}
}
@ -21,6 +23,8 @@
width: 100%;
display: flex;
justify-content: space-around;
padding: $euiSizeS;
border-top: $euiBorderThin;
}
.canvasDataTable__table {
@ -30,7 +34,8 @@
.canvasDataTable__th,
.canvasDataTable__td {
text-align: left;
padding: $euiSizeS;
padding: $euiSizeS $euiSizeXS;
border-bottom: $euiBorderThin;
}
.canvasDataTable__th {

51
x-pack/legacy/plugins/canvas/public/components/element_config/element_config.js
View file

@ -4,9 +4,9 @@
* you may not use this file except in compliance with the Elastic License.
*/
import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiStat, EuiTitle } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiStat, EuiAccordion, EuiText, EuiSpacer } from '@elastic/eui';
import PropTypes from 'prop-types';
import React, { Fragment } from 'react';
import React from 'react';
import { ComponentStrings } from '../../../i18n';
const { ElementConfig: strings } = ComponentStrings;
@ -20,26 +20,51 @@ export const ElementConfig = ({ elementStats }) => {
const progress = total > 0 ? Math.round(((ready + error) / total) * 100) : 100;
return (
<Fragment>
<EuiTitle size="xs">
<h4>{strings.getTitle()}</h4>
</EuiTitle>
<EuiSpacer size="m" />
<EuiFlexGroup>
<EuiAccordion
id="canvas-element-stats"
buttonContent={
<EuiText size="s" color="subdued">
{strings.getTitle()}
</EuiText>
}
initialIsOpen={false}
>
<EuiSpacer size="s" />
<EuiFlexGroup gutterSize="none">
<EuiFlexItem>
<EuiStat title={total} description={strings.getTotalLabel()} titleSize="s" />
<EuiStat
title={total}
description={strings.getTotalLabel()}
titleSize="xs"
textAlign="center"
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiStat title={ready} description={strings.getLoadedLabel()} titleSize="s" />
<EuiStat
title={ready}
description={strings.getLoadedLabel()}
titleSize="xs"
textAlign="center"
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiStat title={error} description={strings.getFailedLabel()} titleSize="s" />
<EuiStat
title={error}
description={strings.getFailedLabel()}
titleSize="xs"
textAlign="center"
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiStat title={progress + '%'} description={strings.getProgressLabel()} titleSize="s" />
<EuiStat
title={progress + '%'}
description={strings.getProgressLabel()}
titleSize="xs"
textAlign="center"
/>
</EuiFlexItem>
</EuiFlexGroup>
</Fragment>
</EuiAccordion>
);
};

1
x-pack/legacy/plugins/canvas/public/components/es_field_select/es_field_select.js
View file

@ -28,6 +28,7 @@ export const ESFieldSelect = ({ value, fields = [], onChange, onFocus, onBlur })
onBlur={onBlur}
singleSelection={{ asPlainText: true }}
isClearable={false}
compressed
/>
);
};

1
x-pack/legacy/plugins/canvas/public/components/es_fields_select/es_fields_select.js
View file

@ -25,6 +25,7 @@ export const ESFieldsSelect = ({ selected, fields, onChange, onFocus, onBlur })
className="canvasFieldsSelect"
onFocus={onFocus}
onBlur={onBlur}
compressed
/>
);
};

1
x-pack/legacy/plugins/canvas/public/components/es_index_select/es_index_select.js
View file

@ -32,6 +32,7 @@ export const ESIndexSelect = ({ value, loading, indices, onChange, onFocus, onBl
singleSelection={{ asPlainText: true }}
isClearable={false}
onCreateOption={input => onChange(input || defaultIndex)}
compressed
/>
);
};

26
x-pack/legacy/plugins/canvas/public/components/page_config/page_config.js
View file

@ -6,7 +6,15 @@
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { EuiCard, EuiFormRow, EuiTitle, EuiSpacer, EuiSelect } from '@elastic/eui';
import {
EuiCard,
EuiFormRow,
EuiTitle,
EuiSpacer,
EuiSelect,
EuiToolTip,
EuiIcon,
} from '@elastic/eui';
import { WorkpadColorPicker } from '../workpad_color_picker';
import { ComponentStrings } from '../../../i18n';
@ -22,14 +30,20 @@ export const PageConfig = ({
}) => {
return (
<Fragment>
<EuiTitle size="xs">
<EuiTitle size="xxxs" className="canvasSidebar__panelTitleHeading">
<h4>{strings.getTitle()}</h4>
</EuiTitle>
<EuiSpacer size="m" />
<EuiSpacer size="s" />
<EuiFormRow
display="rowCompressed"
label={strings.getBackgroundColorLabel()}
helpText={strings.getBackgroundColorDescription()}
display="columnCompressed"
label={
<EuiToolTip content={strings.getBackgroundColorDescription()}>
<span>
{strings.getBackgroundColorLabel()}{' '}
<EuiIcon type="questionInCircle" color="subdued" />
</span>
</EuiToolTip>
}
>
<WorkpadColorPicker onChange={setBackground} value={background} />
</EuiFormRow>

106
x-pack/legacy/plugins/canvas/public/components/shape_picker_popover/__examples__/__snapshots__/shape_picker_popover.examples.storyshot generated
View file

@ -13,20 +13,24 @@ exports[`Storyshots components/Shapes/ShapePickerPopover default 1`] = `
<div
className="euiPopover__anchor"
>
<button
className="euiLink euiLink--primary"
onClick={[Function]}
style={
Object {
"fontSize": 0,
}
}
type="button"
<div
className="euiPanel euiPanel--paddingSmall"
>
<div
className="canvasShapePreview"
/>
</button>
<button
className="euiLink euiLink--primary"
onClick={[Function]}
style={
Object {
"fontSize": 0,
}
}
type="button"
>
<div
className="canvasShapePreview"
/>
</button>
</div>
</div>
</div>
`;
@ -44,27 +48,31 @@ exports[`Storyshots components/Shapes/ShapePickerPopover interactive 1`] = `
<div
className="euiPopover__anchor"
>
<button
className="euiLink euiLink--primary"
onClick={[Function]}
style={
Object {
"fontSize": 0,
}
}
type="button"
<div
className="euiPanel euiPanel--paddingSmall"
>
<div
className="canvasShapePreview"
dangerouslySetInnerHTML={
<button
className="euiLink euiLink--primary"
onClick={[Function]}
style={
Object {
"__html": "<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2.5 -2.5 105 105\\" fill=\\"none\\" stroke=\\"black\\">
<rect x=\\"0\\" y=\\"0\\" width=\\"100\\" height=\\"100\\"></rect>
</svg>",
"fontSize": 0,
}
}
/>
</button>
type="button"
>
<div
className="canvasShapePreview"
dangerouslySetInnerHTML={
Object {
"__html": "<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2.5 -2.5 105 105\\" fill=\\"none\\" stroke=\\"black\\">
<rect x=\\"0\\" y=\\"0\\" width=\\"100\\" height=\\"100\\"></rect>
</svg>",
}
}
/>
</button>
</div>
</div>
</div>
`;
@ -82,27 +90,31 @@ exports[`Storyshots components/Shapes/ShapePickerPopover shape selected 1`] = `
<div
className="euiPopover__anchor"
>
<button
className="euiLink euiLink--primary"
onClick={[Function]}
style={
Object {
"fontSize": 0,
}
}
type="button"
<div
className="euiPanel euiPanel--paddingSmall"
>
<div
className="canvasShapePreview"
dangerouslySetInnerHTML={
<button
className="euiLink euiLink--primary"
onClick={[Function]}
style={
Object {
"__html": "<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2.5 -2.5 105 105\\" fill=\\"none\\" stroke=\\"black\\">
<rect x=\\"0\\" y=\\"0\\" width=\\"100\\" height=\\"100\\"></rect>
</svg>",
"fontSize": 0,
}
}
/>
</button>
type="button"
>
<div
className="canvasShapePreview"
dangerouslySetInnerHTML={
Object {
"__html": "<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"-2.5 -2.5 105 105\\" fill=\\"none\\" stroke=\\"black\\">
<rect x=\\"0\\" y=\\"0\\" width=\\"100\\" height=\\"100\\"></rect>
</svg>",
}
}
/>
</button>
</div>
</div>
</div>
`;

10
x-pack/legacy/plugins/canvas/public/components/shape_picker_popover/shape_picker_popover.tsx
View file

@ -6,7 +6,7 @@
import React, { MouseEvent } from 'react';
import PropTypes from 'prop-types';
import { EuiLink } from '@elastic/eui';
import { EuiLink, EuiPanel } from '@elastic/eui';
import { Popover } from '../popover';
import { ShapePicker } from '../shape_picker';
import { ShapePreview } from '../shape_preview';
@ -21,9 +21,11 @@ interface Props {
export const ShapePickerPopover = ({ shapes, onChange, value }: Props) => {
const button = (handleClick: (ev: MouseEvent) => void) => (
<EuiLink style={{ fontSize: 0 }} onClick={handleClick}>
<ShapePreview shape={value ? shapes[value] : undefined} />
</EuiLink>
<EuiPanel paddingSize="s" hasShadow={false}>
<EuiLink style={{ fontSize: 0 }} onClick={handleClick}>
<ShapePreview shape={value ? shapes[value] : undefined} />
</EuiLink>
</EuiPanel>
);
return (

18
x-pack/legacy/plugins/canvas/public/components/sidebar/__examples__/__snapshots__/group_settings.examples.storyshot generated
View file

@ -2,13 +2,17 @@
exports[`Storyshots components/Sidebar/GroupSettings default 1`] = `
<div
className="euiText euiText--small"
className="canvasSidebar__panel canvasSidebar__panel--isEmpty"
>
<p>
Ungroup (U) to edit individual element settings.
</p>
<p>
Save this group as a new element to re-use it throughout your workpad.
</p>
<div
className="euiText euiText--small"
>
<p>
Ungroup (U) to edit individual element settings.
</p>
<p>
Save this group as a new element to re-use it throughout your workpad.
</p>
</div>
</div>
`;

18
x-pack/legacy/plugins/canvas/public/components/sidebar/__examples__/__snapshots__/multi_element_settings.examples.storyshot generated
View file

@ -2,13 +2,17 @@
exports[`Storyshots components/Sidebar/MultiElementSettings default 1`] = `
<div
className="euiText euiText--small"
className="canvasSidebar__panel canvasSidebar__panel--isEmpty"
>
<p>
Multiple elements are currently selected.
</p>
<p>
Deselect these elements to edit their individual settings, press (G) to group them, or save this selection as a new element to re-use it throughout your workpad.
</p>
<div
className="euiText euiText--small"
>
<p>
Multiple elements are currently selected.
</p>
<p>
Deselect these elements to edit their individual settings, press (G) to group them, or save this selection as a new element to re-use it throughout your workpad.
</p>
</div>
</div>
`;

4
x-pack/legacy/plugins/canvas/public/components/sidebar/element_settings/element_settings.tsx
View file

@ -6,7 +6,7 @@
import React, { FunctionComponent } from 'react';
import PropTypes from 'prop-types';
import { EuiSpacer, EuiTabbedContent } from '@elastic/eui';
import { EuiTabbedContent } from '@elastic/eui';
// @ts-ignore unconverted component
import { Datasource } from '../../datasource';
// @ts-ignore unconverted component
@ -30,7 +30,6 @@ export const ElementSettings: FunctionComponent<Props> = ({ element }) => {
name: strings.getDisplayTabLabel(),
content: (
<div className="canvasSidebar__pop">
<EuiSpacer size="s" />
<div className="canvasSidebar--args">
<FunctionFormList element={element} />
</div>
@ -42,7 +41,6 @@ export const ElementSettings: FunctionComponent<Props> = ({ element }) => {
name: strings.getDataTabLabel(),
content: (
<div className="canvasSidebar__pop">
<EuiSpacer size="s" />
<Datasource />
</div>
),

4
x-pack/legacy/plugins/canvas/public/components/sidebar/global_config.tsx
View file

@ -20,10 +20,10 @@ export const GlobalConfig: FunctionComponent = () => (
<WorkpadConfig />
</SidebarSection>
<SidebarSection>
<PageConfig />
<ElementConfig />
</SidebarSection>
<SidebarSection>
<ElementConfig />
<PageConfig />
</SidebarSection>
</Fragment>
);

10
x-pack/legacy/plugins/canvas/public/components/sidebar/group_settings.tsx
View file

@ -11,8 +11,10 @@ import { ComponentStrings } from '../../../i18n';
const { GroupSettings: strings } = ComponentStrings;
export const GroupSettings: FunctionComponent = () => (
<EuiText size="s">
<p>{strings.getUngroupDescription()}</p>
<p>{strings.getSaveGroupDescription()}</p>
</EuiText>
<div className="canvasSidebar__panel canvasSidebar__panel--isEmpty">
<EuiText size="s">
<p>{strings.getUngroupDescription()}</p>
<p>{strings.getSaveGroupDescription()}</p>
</EuiText>
</div>
);

10
x-pack/legacy/plugins/canvas/public/components/sidebar/multi_element_settings.tsx
View file

@ -11,8 +11,10 @@ import { ComponentStrings } from '../../../i18n';
const { MultiElementSettings: strings } = ComponentStrings;
export const MultiElementSettings: FunctionComponent = () => (
<EuiText size="s">
<p>{strings.getMultipleElementsDescription()}</p>
<p>{strings.getMultipleElementsActionsDescription()}</p>
</EuiText>
<div className="canvasSidebar__panel canvasSidebar__panel--isEmpty">
<EuiText size="s">
<p>{strings.getMultipleElementsDescription()}</p>
<p>{strings.getMultipleElementsActionsDescription()}</p>
</EuiText>
</div>
);

10
x-pack/legacy/plugins/canvas/public/components/sidebar/sidebar.scss
View file

@ -2,7 +2,6 @@
@include euiScrollBar;
width: 100%;
padding: $euiSizeM;
max-height: 100vh;
overflow-y: auto;
overflow-x: hidden;
@ -25,6 +24,15 @@
margin-bottom: $euiSizeS;
}
.canvasSidebar__panel {
border-bottom: $euiBorderThin;
padding: $euiSizeS $euiSizeM;
&--isEmpty {
border-bottom: none;
}
}
.canvasSidebar__panel-noMinWidth .euiButton {
min-width: 0;
}

4
x-pack/legacy/plugins/canvas/public/components/sidebar/sidebar_section.js
View file

@ -7,10 +7,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import { EuiPanel } from '@elastic/eui';
export const SidebarSection = ({ children }) => (
<EuiPanel className="canvasSidebar__panel">{children}</EuiPanel>
<div className="canvasSidebar__panel">{children}</div>
);
SidebarSection.propTypes = {

2
x-pack/legacy/plugins/canvas/public/components/sidebar/sidebar_section_title.js
View file

@ -10,7 +10,7 @@ import { EuiTitle, EuiFlexItem, EuiFlexGroup, EuiToolTip } from '@elastic/eui';
export const SidebarSectionTitle = ({ title, tip, children }) => {
const formattedTitle = (
<EuiTitle size="xxs">
<EuiTitle size="xxxs" className="canvasSidebar__panelTitleHeading">
<h4>{title}</h4>
</EuiTitle>
);

6
x-pack/legacy/plugins/canvas/public/components/sidebar_header/sidebar_header.scss
View file

@ -1,3 +1,7 @@
.canvasLayout__sidebarHeader {
padding: ($euiSizeXS * .5) 0;
padding: calc(#{$euiSizeM} + 2px) $euiSizeS;
}
.canvasLayout__sidebarHeaderWorkpad {
padding: calc(#{$euiSizeS} * .75) 0;
}

27
x-pack/legacy/plugins/canvas/public/components/text_style_picker/text_style_picker.js
View file

@ -105,22 +105,30 @@ export const TextStylePicker = ({
return (
<div className="canvasTextStylePicker">
<EuiFlexGroup gutterSize="s">
<EuiFlexItem>
<FontPicker value={family} onSelect={value => doChange('family', value)} />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiSelect
compressed
value={size}
onChange={e => doChange('size', Number(e.target.value))}
options={fontSizes.map(size => ({ text: String(size), value: size }))}
prepend="Size"
/>
</EuiFlexItem>
<EuiFlexItem>
<FontPicker value={family} onSelect={value => doChange('family', value)} />
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="m" />
<EuiSpacer size="s" />
<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="flexEnd">
<EuiFlexItem grow={false} style={{ fontSize: 0 }}>
<ColorPickerPopover
value={color}
onChange={value => doChange('color', value)}
colors={colors}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonGroup
options={styleButtons}
@ -129,6 +137,7 @@ export const TextStylePicker = ({
onChange={onStyleChange}
type="multi"
isIconOnly
className="canvasSidebar__buttonGroup"
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
@ -138,13 +147,7 @@ export const TextStylePicker = ({
isIconOnly
idSelected={align}
onChange={onAlignmentChange}
/>
</EuiFlexItem>
<EuiFlexItem grow={false} style={{ fontSize: 0 }}>
<ColorPickerPopover
value={color}
onChange={value => doChange('color', value)}
colors={colors}
className="canvasSidebar__buttonGroup"
/>
</EuiFlexItem>
</EuiFlexGroup>

71
x-pack/legacy/plugins/canvas/public/components/workpad_config/workpad_config.js
View file

@ -67,9 +67,11 @@ export class WorkpadConfig extends PureComponent {
return (
<div>
<EuiTitle size="xs">
<h4>{strings.getTitle()}</h4>
</EuiTitle>
<div className="canvasLayout__sidebarHeaderWorkpad">
<EuiTitle size="xs">
<h4>{strings.getTitle()}</h4>
</EuiTitle>
</div>
<EuiSpacer size="m" />
@ -129,37 +131,38 @@ export class WorkpadConfig extends PureComponent {
</div>
<EuiSpacer size="m" />
<EuiAccordion
id="accordion-global-css"
className="canvasArg__accordion"
buttonContent={
<EuiToolTip
content={strings.getGlobalCSSTooltip()}
position="left"
className="canvasArg__tooltip"
>
<EuiText size="s" color="subdued">
{strings.getGlobalCSSLabel()}
</EuiText>
</EuiToolTip>
}
>
<div className="canvasArg__content">
<EuiTextArea
aria-label={strings.getGlobalCSSTooltip()}
value={css}
compressed
onChange={e => this.setState({ css: e.target.value })}
rows={10}
/>
<EuiSpacer size="s" />
<EuiButton size="s" onClick={() => setWorkpadCSS(css || DEFAULT_WORKPAD_CSS)}>
{strings.getApplyStylesheetButtonLabel()}
</EuiButton>
<EuiSpacer size="xs" />
</div>
</EuiAccordion>
<div className="canvasArg--expandable">
<EuiAccordion
id="accordion-global-css"
className="canvasArg__accordion"
buttonContent={
<EuiToolTip
content={strings.getGlobalCSSTooltip()}
position="left"
className="canvasArg__tooltip"
>
<EuiText size="s" color="subdued">
{strings.getGlobalCSSLabel()}
</EuiText>
</EuiToolTip>
}
>
<div className="canvasArg__content">
<EuiTextArea
aria-label={strings.getGlobalCSSTooltip()}
value={css}
compressed
onChange={e => this.setState({ css: e.target.value })}
rows={10}
/>
<EuiSpacer size="s" />
<EuiButton size="s" onClick={() => setWorkpadCSS(css || DEFAULT_WORKPAD_CSS)}>
{strings.getApplyStylesheetButtonLabel()}
</EuiButton>
<EuiSpacer size="xs" />
</div>
</EuiAccordion>
</div>
</div>
);
}

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

@ -12,7 +12,7 @@ exports[`Storyshots arguments/SeriesStyle extended 1`] = `
>
<div>
<div
className="euiFormRow euiFormRow--compressed"
className="euiFormRow euiFormRow--compressed euiFormRow--horizontal"
>
<div
className="euiFormRow__labelWrapper"
@ -21,7 +21,7 @@ exports[`Storyshots arguments/SeriesStyle extended 1`] = `
className="euiFormLabel euiFormRow__label"
htmlFor="generated-id"
>
Series Identifier
Series id
</label>
</div>
<div
@ -45,7 +45,7 @@ exports[`Storyshots arguments/SeriesStyle extended 1`] = `
<option
value=""
>
Select Series
Select series
</option>
<option
value="label1"

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

@ -11,23 +11,22 @@ exports[`Storyshots arguments/SeriesStyle simple 1`] = `
}
>
<div
className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive canvasArgSeries__colorPicker"
className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive canvasArgSeries__colorPicker"
>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
className="euiText euiText--small"
className="euiText euiText--extraSmall"
>
Color
 
</div>
</div>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
className="euiText euiText--small"
className="euiText euiText--extraSmall"
>
<button
aria-label="Color: Auto"
@ -35,16 +34,7 @@ exports[`Storyshots arguments/SeriesStyle simple 1`] = `
onClick={[Function]}
type="button"
>
Auto
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
Auto
</button>
</div>
</div>
@ -63,23 +53,22 @@ exports[`Storyshots arguments/SeriesStyle/components simple: defaults 1`] = `
}
>
<div
className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive canvasArgSeries__colorPicker"
className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive canvasArgSeries__colorPicker"
>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
className="euiText euiText--small"
className="euiText euiText--extraSmall"
>
Color
 
</div>
</div>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
className="euiText euiText--small"
className="euiText euiText--extraSmall"
>
<button
aria-label="Color: Auto"
@ -87,16 +76,7 @@ exports[`Storyshots arguments/SeriesStyle/components simple: defaults 1`] = `
onClick={[Function]}
type="button"
>
Auto
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
Auto
</button>
</div>
</div>
@ -115,23 +95,22 @@ exports[`Storyshots arguments/SeriesStyle/components simple: no labels 1`] = `
}
>
<div
className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive canvasArgSeries__colorPicker"
className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive canvasArgSeries__colorPicker"
>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
className="euiText euiText--small"
className="euiText euiText--extraSmall"
>
Color
 
</div>
</div>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
className="euiText euiText--small"
className="euiText euiText--extraSmall"
>
<button
aria-label="Color: Auto"
@ -139,16 +118,7 @@ exports[`Storyshots arguments/SeriesStyle/components simple: no labels 1`] = `
onClick={[Function]}
type="button"
>
Auto
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
Auto
</button>
</div>
</div>
@ -167,23 +137,22 @@ exports[`Storyshots arguments/SeriesStyle/components simple: no series 1`] = `
}
>
<div
className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive canvasArgSeries__colorPicker"
className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive canvasArgSeries__colorPicker"
>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
className="euiText euiText--small"
className="euiText euiText--extraSmall"
>
Color
 
</div>
</div>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
className="euiText euiText--small"
className="euiText euiText--extraSmall"
>
<button
aria-label="Color: Auto"
@ -191,16 +160,7 @@ exports[`Storyshots arguments/SeriesStyle/components simple: no series 1`] = `
onClick={[Function]}
type="button"
>
Auto
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
Auto
</button>
</div>
</div>
@ -242,23 +202,22 @@ exports[`Storyshots arguments/SeriesStyle/components simple: with series 1`] = `
}
>
<div
className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive canvasArgSeries__colorPicker"
className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive canvasArgSeries__colorPicker"
>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
className="euiText euiText--small"
className="euiText euiText--extraSmall"
>
Color
 
</div>
</div>
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
className="euiText euiText--small"
className="euiText euiText--extraSmall"
>
<button
aria-label="Color: Auto"
@ -266,16 +225,7 @@ exports[`Storyshots arguments/SeriesStyle/components simple: with series 1`] = `
onClick={[Function]}
type="button"
>
Auto
<svg
className="euiIcon euiIcon--medium euiIcon-isLoading"
focusable="false"
height={16}
style={null}
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
/>
Auto
</button>
</div>
</div>

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

@ -76,7 +76,7 @@ export const ExtendedTemplate: FunctionComponent<Props> = props => {
<div>
{name !== 'defaultStyle' && (
<Fragment>
<EuiFormRow label={strings.getSeriesIdentifierLabel()} display="rowCompressed">
<EuiFormRow label={strings.getSeriesIdentifierLabel()} display="columnCompressed">
<EuiSelect
compressed
value={selectedSeries}

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

@ -6,7 +6,7 @@
import React, { Fragment, FunctionComponent } from 'react';
import PropTypes from 'prop-types';
import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiButtonIcon, EuiText } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiButtonIcon, EuiText } from '@elastic/eui';
import immutable from 'object-path-immutable';
import { get } from 'lodash';
import { ColorPickerPopover } from '../../../components/color_picker_popover';
@ -46,19 +46,19 @@ export const SimpleTemplate: FunctionComponent<Props> = props => {
};
return (
<EuiFlexGroup gutterSize="none" alignItems="center" className="canvasArgSeries__colorPicker">
<EuiFlexGroup gutterSize="s" alignItems="center" className="canvasArgSeries__colorPicker">
{!color || color.length === 0 ? (
<Fragment>
<EuiFlexItem grow={false}>
<EuiText size="s">{strings.getColorLabel()}&nbsp;</EuiText>
<EuiText size="xs">{strings.getColorLabel()}</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiText size="s">
<EuiText size="xs">
<EuiLink
aria-label={`${strings.getColorLabel()}: Auto`}
aria-label={`${strings.getColorLabel()}: ${strings.getColorValueDefault()}`}
onClick={() => handleChange('color', '#000000')}
>
Auto <EuiIcon type="bolt" />
{strings.getColorValueDefault()}
</EuiLink>
</EuiText>
</EuiFlexItem>
@ -67,7 +67,7 @@ export const SimpleTemplate: FunctionComponent<Props> = props => {
<Fragment>
<EuiFlexItem grow={false}>
<label htmlFor="series-style">
<EuiText size="s">{strings.getColorLabel()}&nbsp;</EuiText>
<EuiText size="xs">{strings.getColorLabel()}</EuiText>
</label>
</EuiFlexItem>
<EuiFlexItem style={{ fontSize: 0 }}>

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

@ -6,7 +6,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { EuiFormRow, EuiSelect, EuiFieldText, EuiCallOut, EuiSpacer } from '@elastic/eui';
import { EuiFormRow, EuiSelect, EuiTextArea, EuiCallOut, EuiSpacer } from '@elastic/eui';
import { getSimpleArg, setSimpleArg } from '../../lib/arg_helpers';
import { ESFieldsSelect } from '../../components/es_fields_select';
import { ESFieldSelect } from '../../components/es_field_select';
@ -74,45 +74,66 @@ const EsdocsDatasource = ({ args, updateArgs, defaultIndex }) => {
return (
<div>
<EuiCallOut size="s" title={strings.getWarningTitle()} color="warning">
<EuiCallOut size="s" title={strings.getWarningTitle()} iconType="alert" color="warning">
<p>{strings.getWarning()}</p>
</EuiCallOut>
<EuiSpacer size="m" />
<EuiFormRow label={strings.getIndexTitle()} helpText={strings.getIndexLabel()}>
<EuiFormRow
label={strings.getIndexTitle()}
helpText={strings.getIndexLabel()}
display="rowCompressed"
>
<ESIndexSelect value={index} onChange={index => setArg('index', index)} />
</EuiFormRow>
<EuiFormRow label={strings.getQueryTitle()} helpText={strings.getQueryLabel()} compressed>
<EuiFieldText value={getQuery()} onChange={e => setArg(getArgName(), e.target.value)} />
<EuiFormRow
label={strings.getQueryTitle()}
helpText={strings.getQueryLabel()}
display="rowCompressed"
>
<EuiTextArea
value={getQuery()}
onChange={e => setArg(getArgName(), e.target.value)}
compressed
/>
</EuiFormRow>
<EuiFormRow label={strings.getSortFieldTitle()} helpText={strings.getSortFieldLabel()}>
<EuiFormRow
label={strings.getFieldsTitle()}
helpText={fields.length <= 10 ? strings.getFieldsLabel() : strings.getFieldsWarningLabel()}
display="rowCompressed"
>
<ESFieldsSelect
index={index}
onChange={fields => setArg('fields', fields.join(', '))}
selected={fields}
/>
</EuiFormRow>
<EuiFormRow
label={strings.getSortFieldTitle()}
helpText={strings.getSortFieldLabel()}
display="columnCompressed"
>
<ESFieldSelect
index={index}
value={sortField}
onChange={field => setArg('sort', [field, sortOrder].join(', '))}
/>
</EuiFormRow>
<EuiFormRow
label={strings.getSortOrderTitle()}
helpText={strings.getSortOrderLabel()}
compressed
display="columnCompressed"
>
<EuiSelect
value={sortOrder.toLowerCase()}
onChange={e => setArg('sort', [sortField, e.target.value].join(', '))}
options={sortOptions}
/>
</EuiFormRow>
<EuiFormRow
label={strings.getFieldsTitle()}
helpText={fields.length <= 10 ? strings.getFieldsLabel() : strings.getFieldsWarningLabel()}
>
<ESFieldsSelect
index={index}
onChange={fields => setArg('fields', fields.join(', '))}
selected={fields}
compressed
/>
</EuiFormRow>
</div>

2
x-pack/legacy/plugins/canvas/public/style/main.scss
View file

@ -31,7 +31,7 @@ $canvasElementCardWidth: 210px;
.canvasTextArea__code {
@include euiScrollBar;
font-size: $euiFontSize;
font-size: $euiFontSizeS;
font-family: $euiCodeFontFamily;
width: 100%;
max-width: 100%;