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

[Vis: Default editor] Fix spacing after EUI upgrade (#46568) (#46769)

Browse source 
* Fix margins in vis editor data tab

* Fix margins in vis editor options tab

* Add a custom class to a string param
This commit is contained in:
Daniil Suleiman 2019-09-27 15:26:29 +03:00 committed by GitHub
parent e20fdcb74c
commit 36a7978e36
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 146 additions and 144 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/switch.tsx
View file

@ -19,7 +19,7 @@
import React from 'react';
import { EuiSwitch, EuiToolTip } from '@elastic/eui';
import { EuiFormRow, EuiSwitch, EuiToolTip } from '@elastic/eui';
interface SwitchOptionProps<ParamName extends string> {
dataTestSubj?: string;
@ -27,7 +27,6 @@ interface SwitchOptionProps<ParamName extends string> {
tooltip?: string;
disabled?: boolean;
value?: boolean;
noStyle?: boolean;
paramName: ParamName;
setValue: (paramName: ParamName, value: boolean) => void;
}
@ -37,13 +36,12 @@ function SwitchOption<ParamName extends string>({
tooltip,
label,
disabled,
noStyle = false,
paramName,
value = false,
setValue,
}: SwitchOptionProps<ParamName>) {
return (
<div className={noStyle ? undefined : 'visEditorSidebar__switchOptionFormRow'}>
<EuiFormRow fullWidth={true}>
<EuiToolTip content={tooltip} delay="long" position="right">
<EuiSwitch
label={label}
@ -53,7 +51,7 @@ function SwitchOption<ParamName extends string>({
onChange={ev => setValue(paramName, ev.target.checked)}
/>
</EuiToolTip>
</div>
</EuiFormRow>
);
}

1
src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/ranges_panel.tsx
View file

@ -127,7 +127,6 @@ function RangesPanel({
value={stateParams.gauge.percentageMode}
setValue={setGaugeValue}
/>
<EuiSpacer size="s" />
<SelectOption
disabled={stateParams.gauge.colorsRange.length < 2}

26
src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/chart_options.tsx
View file

@ -19,7 +19,7 @@
import React, { useMemo, useCallback } from 'react';
import { i18n } from '@kbn/i18n';
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
import { VisOptionsProps } from 'ui/vis/editors/default';
import { BasicVislibParams, SeriesParam, ValueAxis } from '../../../types';
@ -88,6 +88,8 @@ function ChartOptions({
setValue={setValueAxis}
/>
<EuiSpacer size="m" />
<EuiFlexGroup gutterSize="s">
<EuiFlexItem>
<SelectOption
@ -116,15 +118,19 @@ function ChartOptions({
</EuiFlexGroup>
{chart.type === ChartTypes.AREA && (
<SelectOption
label={i18n.translate('kbnVislibVisTypes.controls.pointSeries.series.lineModeLabel', {
defaultMessage: 'Line mode',
})}
options={vis.type.editorConfig.collections.interpolationModes}
paramName="interpolate"
value={chart.interpolate}
setValue={setChart}
/>
<>
<EuiSpacer size="m" />
<SelectOption
label={i18n.translate('kbnVislibVisTypes.controls.pointSeries.series.lineModeLabel', {
defaultMessage: 'Line mode',
})}
options={vis.type.editorConfig.collections.interpolationModes}
paramName="interpolate"
value={chart.interpolate}
setValue={setChart}
/>
</>
)}
{chart.type === ChartTypes.LINE && (

6
src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/label_options.tsx
View file

@ -18,7 +18,7 @@
*/
import React, { useCallback } from 'react';
import { EuiTitle, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
@ -58,6 +58,7 @@ function LabelOptions({ stateParams, setValue, axis, axesName, index }: LabelOpt
return (
<>
<EuiSpacer size="m" />
<EuiTitle size="xxs">
<h3>
<FormattedMessage
@ -66,6 +67,7 @@ function LabelOptions({ stateParams, setValue, axis, axesName, index }: LabelOpt
/>
</h3>
</EuiTitle>
<EuiSpacer size="s" />
<SwitchOption
label={i18n.translate(
@ -93,6 +95,8 @@ function LabelOptions({ stateParams, setValue, axis, axesName, index }: LabelOpt
setValue={setAxisLabel}
/>
<EuiSpacer size="m" />
<EuiFlexGroup gutterSize="s">
<EuiFlexItem>
<SelectOption

8
src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/line_options.tsx
View file

@ -19,7 +19,7 @@
import React, { useCallback } from 'react';
import { i18n } from '@kbn/i18n';
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
import { Vis } from 'ui/vis';
import { SeriesParam } from '../../../types';
@ -42,6 +42,8 @@ function LineOptions({ chart, vis, setChart }: LineOptionsParams) {
return (
<>
<EuiSpacer size="m" />
<SwitchOption
label={i18n.translate('kbnVislibVisTypes.controls.pointSeries.series.showLineLabel', {
defaultMessage: 'Show line',
@ -51,6 +53,8 @@ function LineOptions({ chart, vis, setChart }: LineOptionsParams) {
setValue={setChart}
/>
<EuiSpacer size="m" />
<EuiFlexGroup gutterSize="s">
<EuiFlexItem>
<SelectOption
@ -79,6 +83,8 @@ function LineOptions({ chart, vis, setChart }: LineOptionsParams) {
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="m" />
<SwitchOption
label={i18n.translate('kbnVislibVisTypes.controls.pointSeries.series.showDotsLabel', {
defaultMessage: 'Show dots',

3
src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/value_axis_options.tsx
View file

@ -156,7 +156,6 @@ function ValueAxisOptions(props: ValueAxisOptionsParams) {
label={i18n.translate('kbnVislibVisTypes.controls.pointSeries.valueAxes.showLabel', {
defaultMessage: 'Show axis lines and labels',
})}
noStyle={true}
paramName="show"
value={axis.show}
setValue={setValueAxis}
@ -202,7 +201,7 @@ function ValueAxisOptions(props: ValueAxisOptionsParams) {
)}
>
<>
<EuiSpacer size="s" />
<EuiSpacer size="m" />
<CustomExtentsOptions
axis={axis}
setValueAxisScale={setValueAxisScale}

4
src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/grid_panel.tsx
View file

@ -17,7 +17,7 @@
* under the License.
*/
import React, { useMemo, useEffect, useCallback } from 'react';
import { EuiPanel, EuiTitle } from '@elastic/eui';
import { EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
@ -67,6 +67,8 @@ function GridPanel({ stateParams, setValue, hasHistogramAgg }: VisOptionsProps<B
</h2>
</EuiTitle>
<EuiSpacer size="m" />
<SwitchOption
disabled={hasHistogramAgg}
label={i18n.translate('kbnVislibVisTypes.controls.pointSeries.gridAxis.xAxisLinesLabel', {

2
src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/point_series.tsx
View file

@ -41,7 +41,7 @@ function PointSeriesOptions(props: VisOptionsProps<BasicVislibParams>) {
/>
</h2>
</EuiTitle>
<EuiSpacer size="s" />
<EuiSpacer size="m" />
<BasicOptions {...props} />

2
src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/threshold_panel.tsx
View file

@ -49,7 +49,7 @@ function ThresholdPanel({ stateParams, setValue, vis }: VisOptionsProps<BasicVis
/>
</h2>
</EuiTitle>
<EuiSpacer size="s" />
<EuiSpacer size="m" />
<SwitchOption
label={i18n.translate('kbnVislibVisTypes.editors.pointSeries.thresholdLine.showLabel', {

5
src/legacy/ui/public/vis/editors/default/_agg.scss
View file

@ -16,6 +16,9 @@
border: $euiBorderThick;
border-radius: $euiBorderRadius;
background-color: transparent;
margin: $euiSizeS 0;
padding: $euiSizeS;
}
.visEditorAgg__subAgg + .visEditorAggParam__string {
margin-top: $euiSize;
}

2
src/legacy/ui/public/vis/editors/default/_agg_params.scss
View file

@ -1,5 +1,5 @@
.visEditorAggParam--half {
margin-top: $euiSize;
margin: $euiSize 0;
display: inline-block;
width: calc(50% - #{$euiSizeS / 2});
}

10
src/legacy/ui/public/vis/editors/default/_sidebar.scss
View file

@ -205,11 +205,6 @@
}
}
.visEditorSidebar__aggParamFormRow {
margin-top: $euiSizeS;
margin-bottom: $euiSizeS;
}
.visEditorSidebar__aggGroupAccordionButtonContent {
font-size: $euiFontSizeS;
@ -217,8 +212,3 @@
color: $euiColorDarkShade;
}
}
.visEditorSidebar__switchOptionFormRow {
margin-top: $euiSizeS;
padding-bottom: $euiSizeS;
}

2
src/legacy/ui/public/vis/editors/default/controls/components/input_list.tsx
View file

@ -177,7 +177,7 @@ function InputList({ config, list, onChange, setValidity }: InputListProps) {
<>
{models.map((item, index) => (
<Fragment key={item.id}>
<EuiFlexGroup gutterSize="xs" alignItems="center">
<EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
{config.renderInputRow(item, index, onChangeValue)}
<EuiFlexItem grow={false}>
<EuiButtonIcon

1
src/legacy/ui/public/vis/editors/default/controls/components/mask_list.tsx
View file

@ -78,6 +78,7 @@ function MaskList({ showValidation, onBlur, ...rest }: MaskListProps) {
values: { mask: mask.value || '*' },
})}
compressed
fullWidth
isInvalid={showValidation ? mask.isInvalid : false}
placeholder="*"
onChange={ev => {

65
src/legacy/ui/public/vis/editors/default/controls/extended_bounds.tsx
View file

@ -75,44 +75,33 @@ function ExtendedBoundsParamEditor({
};
return (
<EuiFormRow
fullWidth={true}
isInvalid={showValidation ? !isValid : false}
error={error}
compressed
>
<>
{/*
We have to put it into React.Fragment to avoid errors:
EuiFormRow will try to put "compressed" as attribute into a EuiFlexGroup div
*/}
<EuiFlexGroup gutterSize="s">
<EuiFlexItem>
<EuiFieldNumber
value={isUndefined(value.min) ? '' : value.min}
onChange={ev => handleChange(ev, 'min')}
onBlur={setTouched}
fullWidth={true}
isInvalid={showValidation ? !isValid : false}
aria-label={minLabel}
prepend={minLabel}
compressed
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiFieldNumber
value={isUndefined(value.max) ? '' : value.max}
onChange={ev => handleChange(ev, 'max')}
onBlur={setTouched}
fullWidth={true}
isInvalid={showValidation ? !isValid : false}
aria-label={maxLabel}
prepend={maxLabel}
compressed
/>
</EuiFlexItem>
</EuiFlexGroup>
</>
<EuiFormRow fullWidth={true} isInvalid={showValidation ? !isValid : false} error={error}>
<EuiFlexGroup gutterSize="s" responsive={false}>
<EuiFlexItem>
<EuiFieldNumber
value={isUndefined(value.min) ? '' : value.min}
onChange={ev => handleChange(ev, 'min')}
onBlur={setTouched}
fullWidth={true}
isInvalid={showValidation ? !isValid : false}
aria-label={minLabel}
prepend={minLabel}
compressed
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiFieldNumber
value={isUndefined(value.max) ? '' : value.max}
onChange={ev => handleChange(ev, 'max')}
onBlur={setTouched}
fullWidth={true}
isInvalid={showValidation ? !isValid : false}
aria-label={maxLabel}
prepend={maxLabel}
compressed
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFormRow>
);
}

2
src/legacy/ui/public/vis/editors/default/controls/filter.tsx
View file

@ -129,7 +129,7 @@ function FilterRow({
/>
</EuiFormRow>
) : null}
<EuiSpacer />
<EuiSpacer size="m" />
</EuiForm>
);
}

1
src/legacy/ui/public/vis/editors/default/controls/ip_range_type.tsx
View file

@ -50,6 +50,7 @@ function IpRangeTypeParamEditor({ agg, value, setValue }: AggParamEditorProps<Ip
return (
<>
<EuiSpacer size="m" />
<EuiButtonGroup
isFullWidth={true}
onChange={onClick}

38
src/legacy/ui/public/vis/editors/default/controls/order_agg.tsx
View file

@ -18,6 +18,7 @@
*/
import React, { useEffect, useState } from 'react';
import { EuiSpacer } from '@elastic/eui';
import { AggParamType } from '../../../../agg_types/param_types/agg';
import { AggConfig } from '../../..';
import { AggParamEditorProps, DefaultEditorAggParams } from '..';
@ -57,23 +58,26 @@ function OrderAggParamEditor({
}
return (
<DefaultEditorAggParams
agg={value as AggConfig}
groupName="metrics"
className="visEditorAgg__subAgg"
formIsTouched={subAggParams.formIsTouched}
indexPattern={agg.getIndexPattern()}
metricAggs={metricAggs}
state={state}
onAggParamsChange={(...rest) => {
// to force update when sub-agg params are changed
setInnerState(!innerState);
subAggParams.onAggParamsChange(...rest);
}}
onAggTypeChange={subAggParams.onAggTypeChange}
setValidity={setValidity}
setTouched={setTouched}
/>
<>
<EuiSpacer size="m" />
<DefaultEditorAggParams
agg={value as AggConfig}
groupName="metrics"
className="visEditorAgg__subAgg"
formIsTouched={subAggParams.formIsTouched}
indexPattern={agg.getIndexPattern()}
metricAggs={metricAggs}
state={state}
onAggParamsChange={(...rest) => {
// to force update when sub-agg params are changed
setInnerState(!innerState);
subAggParams.onAggParamsChange(...rest);
}}
onAggTypeChange={subAggParams.onAggTypeChange}
setValidity={setValidity}
setTouched={setTouched}
/>
</>
);
}

35
src/legacy/ui/public/vis/editors/default/controls/radius_ratio_option.tsx
View file

@ -18,7 +18,7 @@
*/
import React, { useEffect } from 'react';
import { EuiFormRow, EuiIconTip, EuiRange } from '@elastic/eui';
import { EuiFormRow, EuiIconTip, EuiRange, EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { AggControlProps } from './agg_control_props';
@ -50,21 +50,24 @@ function RadiusRatioOptionControl({ editorStateParams, setValue }: AggControlPro
}, []);
return (
<EuiFormRow fullWidth={true} label={label} compressed>
<EuiRange
compressed
fullWidth={true}
min={1}
max={100}
value={editorStateParams.radiusRatio || DEFAULT_VALUE}
onChange={(e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) =>
setValue(editorStateParams, PARAM_NAME, parseFloat(e.currentTarget.value))
}
showRange
showValue
valueAppend="%"
/>
</EuiFormRow>
<>
<EuiFormRow fullWidth={true} label={label} compressed>
<EuiRange
compressed
fullWidth={true}
min={1}
max={100}
value={editorStateParams.radiusRatio || DEFAULT_VALUE}
onChange={(
e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>
) => setValue(editorStateParams, PARAM_NAME, parseFloat(e.currentTarget.value))}
showRange
showValue
valueAppend="%"
/>
</EuiFormRow>
<EuiSpacer size="m" />
</>
);
}

15
src/legacy/ui/public/vis/editors/default/controls/rows_or_columns.tsx
View file

@ -18,7 +18,7 @@
*/
import React from 'react';
import { EuiButtonGroup, EuiFormRow } from '@elastic/eui';
import { EuiButtonGroup, EuiFormRow, EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { AggControlProps } from './agg_control_props';
@ -46,12 +46,8 @@ function RowsOrColumnsControl({ aggParams, setValue }: AggControlProps<boolean>)
];
return (
<EuiFormRow compressed fullWidth={true} className="visEditorSidebar__aggParamFormRow">
<>
{/*
We have to put it into React.Fragment to avoid errors:
EuiFormRow will try to put "compressed" as attribute into a EuiButtonGroup div
*/}
<>
<EuiFormRow compressed fullWidth={true}>
<EuiButtonGroup
data-test-subj="visEditorSplitBy"
legend={i18n.translate('common.ui.vis.defaultEditor.controls.splitByLegend', {
@ -62,8 +58,9 @@ function RowsOrColumnsControl({ aggParams, setValue }: AggControlProps<boolean>)
idSelected={idSelected}
onChange={optionId => setValue(aggParams, PARAMS.NAME, optionId === PARAMS.ROWS)}
/>
</>
</EuiFormRow>
</EuiFormRow>
<EuiSpacer size="m" />
</>
);
}

1
src/legacy/ui/public/vis/editors/default/controls/string.tsx
View file

@ -39,6 +39,7 @@ function StringParamEditor({
return (
<EuiFormRow
className="visEditorAggParam__string"
label={aggParam.displayName || aggParam.name}
fullWidth={true}
compressed

38
src/legacy/ui/public/vis/editors/default/controls/sub_agg.tsx
View file

@ -18,6 +18,7 @@
*/
import React, { useEffect, useState } from 'react';
import { EuiSpacer } from '@elastic/eui';
import { AggParamType } from '../../../../agg_types/param_types/agg';
import { AggConfig } from '../../..';
import { AggParamEditorProps, DefaultEditorAggParams } from '..';
@ -51,23 +52,26 @@ function SubAggParamEditor({
}
return (
<DefaultEditorAggParams
agg={agg.params.customMetric}
groupName="metrics"
className="visEditorAgg__subAgg"
formIsTouched={subAggParams.formIsTouched}
indexPattern={agg.getIndexPattern()}
metricAggs={metricAggs}
state={state}
onAggParamsChange={(...rest) => {
// to force update when sub-agg params are changed
setInnerState(!innerState);
subAggParams.onAggParamsChange(...rest);
}}
onAggTypeChange={subAggParams.onAggTypeChange}
setValidity={setValidity}
setTouched={setTouched}
/>
<>
<EuiSpacer size="m" />
<DefaultEditorAggParams
agg={agg.params.customMetric}
groupName="metrics"
className="visEditorAgg__subAgg"
formIsTouched={subAggParams.formIsTouched}
indexPattern={agg.getIndexPattern()}
metricAggs={metricAggs}
state={state}
onAggParamsChange={(...rest) => {
// to force update when sub-agg params are changed
setInnerState(!innerState);
subAggParams.onAggParamsChange(...rest);
}}
onAggTypeChange={subAggParams.onAggTypeChange}
setValidity={setValidity}
setTouched={setTouched}
/>
</>
);
}

1
src/legacy/ui/public/vis/editors/default/controls/sub_metric.tsx
View file

@ -64,6 +64,7 @@ function SubMetricParamEditor({
return (
<>
<EuiSpacer size="m" />
<EuiFormLabel>{aggTitle}</EuiFormLabel>
<EuiSpacer size="s" />
<DefaultEditorAggParams

14
src/legacy/ui/public/vis/editors/default/controls/switch.tsx
View file

@ -19,7 +19,7 @@
import React from 'react';
import { EuiSwitch, EuiToolTip, EuiSpacer } from '@elastic/eui';
import { EuiFormRow, EuiSwitch, EuiToolTip } from '@elastic/eui';
import { AggParamEditorProps } from '..';
interface SwitchParamEditorProps extends AggParamEditorProps<boolean> {
@ -38,13 +38,8 @@ function SwitchParamEditor({
disabled,
}: SwitchParamEditorProps) {
return (
<div className="visEditorSidebar__aggParamFormRow">
<EuiToolTip
content={displayToolTip}
delay="long"
position="right"
anchorClassName="eui-displayBlock"
>
<EuiFormRow fullWidth={true}>
<EuiToolTip content={displayToolTip} delay="long" position="right">
<EuiSwitch
label={displayLabel}
checked={value}
@ -53,8 +48,7 @@ function SwitchParamEditor({
onChange={ev => setValue(ev.target.checked)}
/>
</EuiToolTip>
<EuiSpacer size="s" />
</div>
</EuiFormRow>
);
}