mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
[Lens] Improve Ignore global filters UI (#154441)
## Summary Fixes #154316 This PR revisits partially the Layer Settings UI in order to support the `Data` and `Appereance` split in the UI and enhance the `ignore global filters` UI to make it clearer for the user the state of this setting. <img width="353" alt="Screenshot 2023-04-05 at 11 57 55" src="https://user-images.githubusercontent.com/924948/230057975-37f92e6f-c70c-4509-a351-6eb932889d0c.png"> when the setting is disabled (to use global filters) then nothing is shown: <img width="336" alt="Screenshot 2023-04-05 at 11 59 18" src="https://user-images.githubusercontent.com/924948/230058311-6f8f6dab-7a2f-42f1-b899-de371ed9f0b0.png"> On Annotations layer that is the only available setting: <img width="374" alt="Screenshot 2023-04-05 at 11 58 03" src="https://user-images.githubusercontent.com/924948/230058004-016e99b0-0786-46fa-aaed-a0c42ebc18b6.png"> The new refactoring can now handle multiple settings for each panel section as shown in the Partition charts settings panel: <img width="375" alt="Screenshot 2023-04-05 at 12 20 35" src="https://user-images.githubusercontent.com/924948/230058207-fe2c7d64-e25b-43a3-a612-b63aa46e35c6.png"> ### Checklist Delete any items that are not applicable to this PR. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### Risk Matrix Delete this section if it is not applicable to this PR. Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release. When forming the risk matrix, consider some of the following examples and how they may potentially impact the change: | Risk | Probability | Severity | Mitigation/Notes | |---------------------------|-------------|----------|-------------------------| | Multiple Spaces—unexpected behavior in non-default Kibana Space. | Low | High | Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces. | | Multiple nodes—Elasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks. | High | Low | Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure. | | Code should gracefully handle cases when feature X or plugin Y are disabled. | Medium | High | Unit tests will verify that any feature flag or plugin combination still results in our service operational. | | [See more potential risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) | ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
This commit is contained in:
Marco Liberati
GitHub
parent
9d096c5623
commit
779e553f81
21 changed files with 489 additions and 356 deletions
|
|
@ -37,7 +37,6 @@ import type {
|
|||
IndexPatternField,
|
||||
IndexPattern,
|
||||
IndexPatternRef,
|
||||
DatasourceLayerSettingsProps,
|
||||
DataSourceInfo,
|
||||
UserMessage,
|
||||
FrameDatasourceAPI,
|
||||
|
|
@ -429,10 +428,7 @@ export function getFormBasedDatasource({
|
|||
toExpression: (state, layerId, indexPatterns, dateRange, searchSessionId) =>
|
||||
toExpression(state, layerId, indexPatterns, uiSettings, dateRange, searchSessionId),
|
||||
|
||||
renderLayerSettings(
|
||||
domElement: Element,
|
||||
props: DatasourceLayerSettingsProps<FormBasedPrivateState>
|
||||
) {
|
||||
renderLayerSettings(domElement, props) {
|
||||
render(
|
||||
<KibanaThemeProvider theme$={core.theme.theme$}>
|
||||
<I18nProvider>
|
||||
|
|
|
|||
|
|
@ -109,101 +109,86 @@ export function LayerSettingsPanel({
|
|||
setState,
|
||||
layerId,
|
||||
}: DatasourceLayerSettingsProps<FormBasedPrivateState>) {
|
||||
const { euiTheme } = useEuiTheme();
|
||||
const isSamplingValueDisabled = !isSamplingValueEnabled(state.layers[layerId]);
|
||||
const currentValue = isSamplingValueDisabled
|
||||
? samplingValues[samplingValues.length - 1]
|
||||
: state.layers[layerId].sampling;
|
||||
return (
|
||||
<div id={layerId}>
|
||||
<EuiText
|
||||
size="s"
|
||||
css={css`
|
||||
margin-bottom: ${euiTheme.size.base};
|
||||
`}
|
||||
>
|
||||
<h4>
|
||||
{i18n.translate('xpack.lens.indexPattern.layerSettings.headingData', {
|
||||
defaultMessage: 'Data',
|
||||
})}
|
||||
</h4>
|
||||
</EuiText>
|
||||
<EuiFormRow
|
||||
display="rowCompressed"
|
||||
data-test-subj="lns-indexPattern-random-sampling-row"
|
||||
fullWidth
|
||||
helpText={
|
||||
<>
|
||||
<EuiSpacer size="s" />
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="xpack.lens.indexPattern.randomSampling.help"
|
||||
defaultMessage="Lower sampling percentages increases the performance, but lowers the accuracy. Lower sampling percentages are best for large datasets. {link}"
|
||||
values={{
|
||||
link: (
|
||||
<EuiLink
|
||||
href="https://www.elastic.co/guide/en/elasticsearch/reference/master/search-aggregations-random-sampler-aggregation.html"
|
||||
target="_blank"
|
||||
external
|
||||
>
|
||||
<FormattedMessage
|
||||
id="xpack.lens.indexPattern.randomSampling.learnMore"
|
||||
defaultMessage="View documentation"
|
||||
/>
|
||||
</EuiLink>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</>
|
||||
}
|
||||
label={
|
||||
<>
|
||||
{i18n.translate('xpack.lens.indexPattern.randomSampling.label', {
|
||||
defaultMessage: 'Sampling',
|
||||
})}{' '}
|
||||
<EuiToolTip
|
||||
content={i18n.translate('xpack.lens.indexPattern.randomSampling.experimentalLabel', {
|
||||
<EuiFormRow
|
||||
display="rowCompressed"
|
||||
data-test-subj="lns-indexPattern-random-sampling-row"
|
||||
fullWidth
|
||||
helpText={
|
||||
<>
|
||||
<EuiSpacer size="s" />
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="xpack.lens.indexPattern.randomSampling.help"
|
||||
defaultMessage="Lower sampling percentages increases the performance, but lowers the accuracy. Lower sampling percentages are best for large datasets. {link}"
|
||||
values={{
|
||||
link: (
|
||||
<EuiLink
|
||||
href="https://www.elastic.co/guide/en/elasticsearch/reference/master/search-aggregations-random-sampler-aggregation.html"
|
||||
target="_blank"
|
||||
external
|
||||
>
|
||||
<FormattedMessage
|
||||
id="xpack.lens.indexPattern.randomSampling.learnMore"
|
||||
defaultMessage="View documentation"
|
||||
/>
|
||||
</EuiLink>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</>
|
||||
}
|
||||
label={
|
||||
<>
|
||||
{i18n.translate('xpack.lens.indexPattern.randomSampling.label', {
|
||||
defaultMessage: 'Sampling',
|
||||
})}{' '}
|
||||
<EuiToolTip
|
||||
content={i18n.translate('xpack.lens.indexPattern.randomSampling.experimentalLabel', {
|
||||
defaultMessage: 'Technical preview',
|
||||
})}
|
||||
>
|
||||
<EuiBetaBadge
|
||||
css={css`
|
||||
vertical-align: middle;
|
||||
`}
|
||||
iconType="beaker"
|
||||
label={i18n.translate('xpack.lens.indexPattern.randomSampling.experimentalLabel', {
|
||||
defaultMessage: 'Technical preview',
|
||||
})}
|
||||
>
|
||||
<EuiBetaBadge
|
||||
css={css`
|
||||
vertical-align: middle;
|
||||
`}
|
||||
iconType="beaker"
|
||||
label={i18n.translate('xpack.lens.indexPattern.randomSampling.experimentalLabel', {
|
||||
defaultMessage: 'Technical preview',
|
||||
})}
|
||||
size="s"
|
||||
/>
|
||||
</EuiToolTip>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<SamplingSlider
|
||||
disabled={isSamplingValueDisabled}
|
||||
disabledReason={i18n.translate('xpack.lens.indexPattern.randomSampling.disabledMessage', {
|
||||
defaultMessage:
|
||||
'In order to select a reduced sampling percentage, you must remove any maximum or minimum functions applied on this layer.',
|
||||
})}
|
||||
values={samplingValues}
|
||||
currentValue={currentValue}
|
||||
data-test-subj="lns-indexPattern-random-sampling-slider"
|
||||
onChange={(newSamplingValue) => {
|
||||
setState({
|
||||
...state,
|
||||
layers: {
|
||||
...state.layers,
|
||||
[layerId]: {
|
||||
...state.layers[layerId],
|
||||
sampling: newSamplingValue,
|
||||
},
|
||||
size="s"
|
||||
/>
|
||||
</EuiToolTip>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<SamplingSlider
|
||||
disabled={isSamplingValueDisabled}
|
||||
disabledReason={i18n.translate('xpack.lens.indexPattern.randomSampling.disabledMessage', {
|
||||
defaultMessage:
|
||||
'In order to select a reduced sampling percentage, you must remove any maximum or minimum functions applied on this layer.',
|
||||
})}
|
||||
values={samplingValues}
|
||||
currentValue={currentValue}
|
||||
data-test-subj="lns-indexPattern-random-sampling-slider"
|
||||
onChange={(newSamplingValue) => {
|
||||
setState({
|
||||
...state,
|
||||
layers: {
|
||||
...state.layers,
|
||||
[layerId]: {
|
||||
...state.layers[layerId],
|
||||
sampling: newSamplingValue,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</EuiFormRow>
|
||||
</div>
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</EuiFormRow>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,10 +8,12 @@
|
|||
import React from 'react';
|
||||
import { I18nProvider } from '@kbn/i18n-react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { useEuiTheme } from '@elastic/eui';
|
||||
import { DatasourceLayerPanelProps } from '../../types';
|
||||
import { FormBasedPrivateState } from './types';
|
||||
import { ChangeIndexPattern } from '../../shared_components/dataview_picker/dataview_picker';
|
||||
import { getSamplingValue } from './utils';
|
||||
import { RandomSamplingIcon } from './sampling_icon';
|
||||
|
||||
export interface FormBasedLayerPanelProps extends DatasourceLayerPanelProps<FormBasedPrivateState> {
|
||||
state: FormBasedPrivateState;
|
||||
|
|
@ -25,6 +27,7 @@ export function LayerPanel({
|
|||
dataViews,
|
||||
}: FormBasedLayerPanelProps) {
|
||||
const layer = state.layers[layerId];
|
||||
const { euiTheme } = useEuiTheme();
|
||||
|
||||
const indexPattern = dataViews.indexPatterns[layer.indexPatternId];
|
||||
const notFoundTitleLabel = i18n.translate('xpack.lens.layerPanel.missingDataView', {
|
||||
|
|
@ -38,6 +41,26 @@ export function LayerPanel({
|
|||
};
|
||||
});
|
||||
|
||||
const samplingValue = getSamplingValue(layer);
|
||||
const extraIconLabelProps =
|
||||
samplingValue !== 1
|
||||
? {
|
||||
icon: {
|
||||
component: (
|
||||
<RandomSamplingIcon color={euiTheme.colors.disabledText} fill="currentColor" />
|
||||
),
|
||||
value: `${samplingValue * 100}%`,
|
||||
tooltipValue: i18n.translate('xpack.lens.indexPattern.randomSamplingInfo', {
|
||||
defaultMessage: '{value}% sampling',
|
||||
values: {
|
||||
value: samplingValue * 100,
|
||||
},
|
||||
}),
|
||||
'data-test-subj': 'lnsChangeIndexPatternSamplingInfo',
|
||||
},
|
||||
}
|
||||
: {};
|
||||
|
||||
return (
|
||||
<I18nProvider>
|
||||
<ChangeIndexPattern
|
||||
|
|
@ -48,7 +71,7 @@ export function LayerPanel({
|
|||
'data-test-subj': 'lns_layerIndexPatternLabel',
|
||||
size: 's',
|
||||
fontWeight: 'normal',
|
||||
samplingValue: getSamplingValue(layer),
|
||||
...extraIconLabelProps,
|
||||
}}
|
||||
indexPatternId={layer.indexPatternId}
|
||||
indexPatternRefs={indexPatternRefs}
|
||||
|
|
|
|||
|
|
@ -318,6 +318,16 @@ export function LayerPanel(
|
|||
const [datasource] = Object.values(framePublicAPI.datasourceLayers);
|
||||
const isTextBasedLanguage = Boolean(datasource?.isTextBasedLanguage());
|
||||
|
||||
const visualizationLayerSettings = useMemo(
|
||||
() =>
|
||||
activeVisualization.hasLayerSettings?.({
|
||||
layerId,
|
||||
state: visualizationState,
|
||||
frame: props.framePublicAPI,
|
||||
}) || { data: false, appearance: false },
|
||||
[activeVisualization, layerId, props.framePublicAPI, visualizationState]
|
||||
);
|
||||
|
||||
const compatibleActions = useMemo<LayerAction[]>(
|
||||
() =>
|
||||
[
|
||||
|
|
@ -341,11 +351,7 @@ export function LayerPanel(
|
|||
isOnlyLayer,
|
||||
isTextBasedLanguage,
|
||||
hasLayerSettings: Boolean(
|
||||
(activeVisualization.hasLayerSettings?.({
|
||||
layerId,
|
||||
state: visualizationState,
|
||||
frame: props.framePublicAPI,
|
||||
}) &&
|
||||
(Object.values(visualizationLayerSettings).some(Boolean) &&
|
||||
activeVisualization.renderLayerSettings) ||
|
||||
layerDatasource?.renderLayerSettings
|
||||
),
|
||||
|
|
@ -364,8 +370,8 @@ export function LayerPanel(
|
|||
layerIndex,
|
||||
onCloneLayer,
|
||||
onRemoveLayer,
|
||||
props.framePublicAPI,
|
||||
updateVisualization,
|
||||
visualizationLayerSettings,
|
||||
visualizationState,
|
||||
]
|
||||
);
|
||||
|
|
@ -682,15 +688,56 @@ export function LayerPanel(
|
|||
>
|
||||
<div id={layerId}>
|
||||
<div className="lnsIndexPatternDimensionEditor--padded">
|
||||
{layerDatasource?.renderLayerSettings || visualizationLayerSettings.data ? (
|
||||
<EuiText
|
||||
size="s"
|
||||
css={css`
|
||||
margin-bottom: ${euiThemeVars.euiSize};
|
||||
`}
|
||||
>
|
||||
<h4>
|
||||
{i18n.translate('xpack.lens.editorFrame.layerSettings.headingData', {
|
||||
defaultMessage: 'Data',
|
||||
})}
|
||||
</h4>
|
||||
</EuiText>
|
||||
) : null}
|
||||
{layerDatasource?.renderLayerSettings && (
|
||||
<>
|
||||
<NativeRenderer
|
||||
render={layerDatasource.renderLayerSettings}
|
||||
nativeProps={layerDatasourceConfigProps}
|
||||
/>
|
||||
<EuiSpacer size="m" />
|
||||
</>
|
||||
)}
|
||||
{layerDatasource?.renderLayerSettings && visualizationLayerSettings.data ? (
|
||||
<EuiSpacer size="m" />
|
||||
) : null}
|
||||
{activeVisualization?.renderLayerSettings && visualizationLayerSettings.data ? (
|
||||
<NativeRenderer
|
||||
render={activeVisualization?.renderLayerSettings}
|
||||
nativeProps={{
|
||||
...layerVisualizationConfigProps,
|
||||
setState: props.updateVisualization,
|
||||
panelRef: settingsPanelRef,
|
||||
section: 'data',
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
{visualizationLayerSettings.appearance ? (
|
||||
<EuiText
|
||||
size="s"
|
||||
css={css`
|
||||
margin-bottom: ${euiThemeVars.euiSize};
|
||||
`}
|
||||
>
|
||||
<h4>
|
||||
{i18n.translate('xpack.lens.editorFrame.layerSettings.headingAppearance', {
|
||||
defaultMessage: 'Appearance',
|
||||
})}
|
||||
</h4>
|
||||
</EuiText>
|
||||
) : null}
|
||||
{activeVisualization?.renderLayerSettings && (
|
||||
<NativeRenderer
|
||||
render={activeVisualization?.renderLayerSettings}
|
||||
|
|
@ -698,6 +745,7 @@ export function LayerPanel(
|
|||
...layerVisualizationConfigProps,
|
||||
setState: props.updateVisualization,
|
||||
panelRef: settingsPanelRef,
|
||||
section: 'appearance',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -7,109 +7,10 @@
|
|||
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiPopover,
|
||||
EuiPopoverTitle,
|
||||
EuiSelectableProps,
|
||||
EuiTextColor,
|
||||
EuiToolTip,
|
||||
useEuiTheme,
|
||||
} from '@elastic/eui';
|
||||
import { EuiPopover, EuiPopoverTitle, EuiSelectableProps } from '@elastic/eui';
|
||||
import { DataViewsList } from '@kbn/unified-search-plugin/public';
|
||||
import { css } from '@emotion/react';
|
||||
import { type IndexPatternRef } from '../../types';
|
||||
import { type ToolbarButtonProps, ToolbarButton } from './toolbar_button';
|
||||
import { RandomSamplingIcon } from './sampling_icon';
|
||||
|
||||
export type ChangeIndexPatternTriggerProps = ToolbarButtonProps & {
|
||||
label: string;
|
||||
title?: string;
|
||||
isDisabled?: boolean;
|
||||
samplingValue?: number;
|
||||
};
|
||||
|
||||
function TriggerButton({
|
||||
label,
|
||||
title,
|
||||
togglePopover,
|
||||
isMissingCurrent,
|
||||
samplingValue,
|
||||
...rest
|
||||
}: ChangeIndexPatternTriggerProps &
|
||||
ToolbarButtonProps & {
|
||||
togglePopover: () => void;
|
||||
isMissingCurrent?: boolean;
|
||||
}) {
|
||||
const { euiTheme } = useEuiTheme();
|
||||
// be careful to only add color with a value, otherwise it will fallbacks to "primary"
|
||||
const colorProp = isMissingCurrent
|
||||
? {
|
||||
color: 'danger' as const,
|
||||
}
|
||||
: {};
|
||||
const content =
|
||||
samplingValue != null && samplingValue !== 1 ? (
|
||||
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
|
||||
<EuiFlexItem
|
||||
className="eui-textTruncate"
|
||||
css={css`
|
||||
display: block;
|
||||
min-width: 0;
|
||||
`}
|
||||
>
|
||||
{label}
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
grow={false}
|
||||
data-test-subj="lnsChangeIndexPatternSamplingInfo"
|
||||
css={css`
|
||||
display: block;
|
||||
*:hover &,
|
||||
*:focus & {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<EuiToolTip
|
||||
content={i18n.translate('xpack.lens.indexPattern.randomSamplingInfo', {
|
||||
defaultMessage: '{value}% sampling',
|
||||
values: {
|
||||
value: samplingValue * 100,
|
||||
},
|
||||
})}
|
||||
position="top"
|
||||
>
|
||||
<EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false}>
|
||||
<EuiFlexItem grow={false}>
|
||||
<RandomSamplingIcon color={euiTheme.colors.disabledText} fill="currentColor" />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiTextColor color={euiTheme.colors.disabledText}>
|
||||
{samplingValue * 100}%
|
||||
</EuiTextColor>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiToolTip>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
) : (
|
||||
label
|
||||
);
|
||||
return (
|
||||
<ToolbarButton
|
||||
title={title}
|
||||
onClick={() => togglePopover()}
|
||||
fullWidth
|
||||
{...colorProp}
|
||||
{...rest}
|
||||
textProps={{ style: { width: '100%' } }}
|
||||
>
|
||||
{content}
|
||||
</ToolbarButton>
|
||||
);
|
||||
}
|
||||
import { type ChangeIndexPatternTriggerProps, TriggerButton } from './trigger';
|
||||
|
||||
export function ChangeIndexPattern({
|
||||
indexPatternRefs,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,101 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
|
||||
import { useEuiTheme, EuiFlexGroup, EuiFlexItem, EuiToolTip, EuiTextColor } from '@elastic/eui';
|
||||
import { css } from '@emotion/react';
|
||||
import React from 'react';
|
||||
import { ToolbarButton, ToolbarButtonProps } from './toolbar_button';
|
||||
|
||||
interface TriggerLabelProps {
|
||||
label: string;
|
||||
icon?: {
|
||||
component: React.ReactElement;
|
||||
value?: string;
|
||||
tooltipValue?: string;
|
||||
'data-test-subj': string;
|
||||
};
|
||||
}
|
||||
|
||||
export type ChangeIndexPatternTriggerProps = ToolbarButtonProps &
|
||||
TriggerLabelProps & {
|
||||
label: string;
|
||||
title?: string;
|
||||
isDisabled?: boolean;
|
||||
};
|
||||
|
||||
function TriggerLabel({ label, icon }: TriggerLabelProps) {
|
||||
const { euiTheme } = useEuiTheme();
|
||||
if (!icon) {
|
||||
return <>{label}</>;
|
||||
}
|
||||
return (
|
||||
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
|
||||
<EuiFlexItem
|
||||
className="eui-textTruncate"
|
||||
css={css`
|
||||
display: block;
|
||||
min-width: 0;
|
||||
`}
|
||||
>
|
||||
{label}
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
grow={false}
|
||||
data-test-subj={icon['data-test-subj']}
|
||||
css={css`
|
||||
display: block;
|
||||
*:hover &,
|
||||
*:focus & {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<EuiToolTip content={icon.tooltipValue} position="top">
|
||||
<EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false}>
|
||||
<EuiFlexItem grow={false}>{icon.component}</EuiFlexItem>
|
||||
{icon.value ? (
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiTextColor color={euiTheme.colors.disabledText}>{icon.value}</EuiTextColor>
|
||||
</EuiFlexItem>
|
||||
) : null}
|
||||
</EuiFlexGroup>
|
||||
</EuiToolTip>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
);
|
||||
}
|
||||
|
||||
export function TriggerButton({
|
||||
label,
|
||||
title,
|
||||
togglePopover,
|
||||
isMissingCurrent,
|
||||
icon,
|
||||
...rest
|
||||
}: ChangeIndexPatternTriggerProps & {
|
||||
togglePopover: () => void;
|
||||
isMissingCurrent?: boolean;
|
||||
}) {
|
||||
// be careful to only add color with a value, otherwise it will fallbacks to "primary"
|
||||
const colorProp = isMissingCurrent
|
||||
? {
|
||||
color: 'danger' as const,
|
||||
}
|
||||
: {};
|
||||
return (
|
||||
<ToolbarButton
|
||||
title={title}
|
||||
onClick={() => togglePopover()}
|
||||
fullWidth
|
||||
{...colorProp}
|
||||
{...rest}
|
||||
textProps={{ style: { width: '100%' } }}
|
||||
>
|
||||
<TriggerLabel label={label} icon={icon} />
|
||||
</ToolbarButton>
|
||||
);
|
||||
}
|
||||
|
|
@ -1189,11 +1189,11 @@ export interface Visualization<T = unknown, P = T> {
|
|||
/**
|
||||
* Allows the visualization to announce whether or not it has any settings to show
|
||||
*/
|
||||
hasLayerSettings?: (props: VisualizationConfigProps<T>) => boolean;
|
||||
hasLayerSettings?: (props: VisualizationConfigProps<T>) => Record<'data' | 'appearance', boolean>;
|
||||
|
||||
renderLayerSettings?: (
|
||||
domElement: Element,
|
||||
props: VisualizationLayerSettingsProps<T>
|
||||
props: VisualizationLayerSettingsProps<T> & { section: 'data' | 'appearance' }
|
||||
) => ((cleanupElement: Element) => void) | void;
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -25,12 +25,15 @@ describe('layer settings', () => {
|
|||
});
|
||||
|
||||
const layerId = 'layer-id';
|
||||
const props: VisualizationLayerSettingsProps<PieVisualizationState> = {
|
||||
const props: VisualizationLayerSettingsProps<PieVisualizationState> & {
|
||||
section: 'data' | 'appearance';
|
||||
} = {
|
||||
setState: jest.fn(),
|
||||
layerId,
|
||||
state: getState(false),
|
||||
frame: {} as FramePublicAPI,
|
||||
panelRef: {} as React.MutableRefObject<HTMLDivElement | null>,
|
||||
section: 'data',
|
||||
};
|
||||
|
||||
it('toggles multiple metrics', () => {
|
||||
|
|
@ -90,5 +93,9 @@ describe('layer settings', () => {
|
|||
).isEmptyRender()
|
||||
).toBeTruthy();
|
||||
});
|
||||
|
||||
test('should not render anything for the appearance section', () => {
|
||||
expect(shallow(<LayerSettings {...props} section="appearance" />).isEmptyRender());
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -12,7 +12,12 @@ import { PieChartTypes } from '../../../common/constants';
|
|||
import { PieVisualizationState } from '../..';
|
||||
import { VisualizationLayerSettingsProps } from '../../types';
|
||||
|
||||
export function LayerSettings(props: VisualizationLayerSettingsProps<PieVisualizationState>) {
|
||||
export function LayerSettings(
|
||||
props: VisualizationLayerSettingsProps<PieVisualizationState> & { section: 'data' | 'appearance' }
|
||||
) {
|
||||
if (props.section === 'appearance') {
|
||||
return null;
|
||||
}
|
||||
if (props.state.shape === PieChartTypes.MOSAIC) {
|
||||
return null;
|
||||
}
|
||||
|
|
@ -24,29 +29,33 @@ export function LayerSettings(props: VisualizationLayerSettingsProps<PieVisualiz
|
|||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<EuiFormRow>
|
||||
<EuiSwitch
|
||||
label={i18n.translate('xpack.lens.pieChart.multipleMetrics', {
|
||||
defaultMessage: 'Multiple metrics',
|
||||
})}
|
||||
compressed={true}
|
||||
checked={Boolean(currentLayer.allowMultipleMetrics)}
|
||||
onChange={() => {
|
||||
props.setState({
|
||||
...props.state,
|
||||
layers: props.state.layers.map((layer) =>
|
||||
layer.layerId !== props.layerId
|
||||
? layer
|
||||
: {
|
||||
...layer,
|
||||
allowMultipleMetrics: !layer.allowMultipleMetrics,
|
||||
}
|
||||
),
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</EuiFormRow>
|
||||
</>
|
||||
<EuiFormRow
|
||||
display="columnCompressedSwitch"
|
||||
label={i18n.translate('xpack.lens.pieChart.multipleMetrics', {
|
||||
defaultMessage: 'Multiple metrics',
|
||||
})}
|
||||
>
|
||||
<EuiSwitch
|
||||
label={i18n.translate('xpack.lens.pieChart.multipleMetrics', {
|
||||
defaultMessage: 'Multiple metrics',
|
||||
})}
|
||||
compressed
|
||||
showLabel={false}
|
||||
checked={Boolean(currentLayer.allowMultipleMetrics)}
|
||||
onChange={() => {
|
||||
props.setState({
|
||||
...props.state,
|
||||
layers: props.state.layers.map((layer) =>
|
||||
layer.layerId !== props.layerId
|
||||
? layer
|
||||
: {
|
||||
...layer,
|
||||
allowMultipleMetrics: !layer.allowMultipleMetrics,
|
||||
}
|
||||
),
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</EuiFormRow>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -617,10 +617,10 @@ describe('pie_visualization', () => {
|
|||
});
|
||||
});
|
||||
|
||||
it.each(Object.values(PieChartTypes).filter((type) => type !== 'mosaic'))(
|
||||
it.each(Object.values(PieChartTypes).filter((type) => type !== PieChartTypes.MOSAIC))(
|
||||
'%s adds fake dimension',
|
||||
(type) => {
|
||||
const state = { ...getExampleState(), type };
|
||||
const state = { ...getExampleState(), shape: type };
|
||||
state.layers[0].metrics.push('1', '2');
|
||||
state.layers[0].allowMultipleMetrics = true;
|
||||
expect(
|
||||
|
|
@ -645,4 +645,21 @@ describe('pie_visualization', () => {
|
|||
}
|
||||
);
|
||||
});
|
||||
|
||||
describe('layer settings', () => {
|
||||
describe('hasLayerSettings', () => {
|
||||
it('should have data settings for all partition chart types but mosaic', () => {
|
||||
for (const type of Object.values(PieChartTypes)) {
|
||||
const state = { ...getExampleState(), shape: type };
|
||||
expect(
|
||||
pieVisualization.hasLayerSettings?.({
|
||||
state,
|
||||
frame: mockFrame(),
|
||||
layerId: state.layers[0].layerId,
|
||||
})
|
||||
).toEqual({ data: type !== PieChartTypes.MOSAIC, appearance: false });
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -504,7 +504,7 @@ export const getPieVisualization = ({
|
|||
},
|
||||
|
||||
hasLayerSettings(props) {
|
||||
return props.state.shape !== 'mosaic';
|
||||
return { data: props.state.shape !== PieChartTypes.MOSAIC, appearance: false };
|
||||
},
|
||||
|
||||
renderLayerSettings(domElement, props) {
|
||||
|
|
|
|||
|
|
@ -5,13 +5,10 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import type { LayerActionFromVisualization } from '../../../types';
|
||||
import type { XYState, XYAnnotationLayerConfig } from '../types';
|
||||
|
||||
export const IGNORE_GLOBAL_FILTERS_ACTION_ID = 'ignoreGlobalFilters';
|
||||
export const KEEP_GLOBAL_FILTERS_ACTION_ID = 'keepGlobalFilters';
|
||||
|
||||
// Leaving the stub for annotation groups
|
||||
export const createAnnotationActions = ({
|
||||
state,
|
||||
layer,
|
||||
|
|
@ -21,33 +18,5 @@ export const createAnnotationActions = ({
|
|||
layer: XYAnnotationLayerConfig;
|
||||
layerIndex: number;
|
||||
}): LayerActionFromVisualization[] => {
|
||||
const label = !layer.ignoreGlobalFilters
|
||||
? i18n.translate('xpack.lens.xyChart.annotations.ignoreGlobalFiltersLabel', {
|
||||
defaultMessage: 'Ignore global filters',
|
||||
})
|
||||
: i18n.translate('xpack.lens.xyChart.annotations.keepGlobalFiltersLabel', {
|
||||
defaultMessage: 'Keep global filters',
|
||||
});
|
||||
return [
|
||||
{
|
||||
id: !layer.ignoreGlobalFilters
|
||||
? IGNORE_GLOBAL_FILTERS_ACTION_ID
|
||||
: KEEP_GLOBAL_FILTERS_ACTION_ID,
|
||||
displayName: label,
|
||||
description: !layer.ignoreGlobalFilters
|
||||
? i18n.translate('xpack.lens.xyChart.annotations.ignoreGlobalFiltersDescription', {
|
||||
defaultMessage:
|
||||
'All the dimensions configured in this layer ignore filters defined at kibana level.',
|
||||
})
|
||||
: i18n.translate('xpack.lens.xyChart.annotations.keepGlobalFiltersDescription', {
|
||||
defaultMessage:
|
||||
'All the dimensions configured in this layer respect filters defined at kibana level.',
|
||||
}),
|
||||
icon: !layer.ignoreGlobalFilters ? 'filterIgnore' : 'filter',
|
||||
isCompatible: true,
|
||||
'data-test-subj': !layer.ignoreGlobalFilters
|
||||
? 'lnsXY_annotationLayer_ignoreFilters'
|
||||
: 'lnsXY_annotationLayer_keepFilters',
|
||||
},
|
||||
];
|
||||
return [];
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,53 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
|
||||
import { EuiFormRow, EuiSwitch } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import React from 'react';
|
||||
import type { VisualizationLayerSettingsProps } from '../../types';
|
||||
import type { XYState } from './types';
|
||||
import { isAnnotationsLayer } from './visualization_helpers';
|
||||
|
||||
export function LayerSettings({
|
||||
state,
|
||||
setState,
|
||||
section,
|
||||
layerId,
|
||||
}: VisualizationLayerSettingsProps<XYState> & { section: 'data' | 'appearance' }) {
|
||||
if (section === 'appearance') {
|
||||
return null;
|
||||
}
|
||||
const layer = state.layers.find((l) => l.layerId === layerId);
|
||||
if (!layer || !isAnnotationsLayer(layer)) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<EuiFormRow
|
||||
display="columnCompressedSwitch"
|
||||
label={i18n.translate('xpack.lens.xyChart.ignoreGlobalFilters', {
|
||||
defaultMessage: 'Use global filters',
|
||||
})}
|
||||
>
|
||||
<EuiSwitch
|
||||
label={i18n.translate('xpack.lens.xyChart.ignoreGlobalFilters', {
|
||||
defaultMessage: 'Use global filters',
|
||||
})}
|
||||
showLabel={false}
|
||||
checked={!layer.ignoreGlobalFilters}
|
||||
data-test-subj="lnsXY-layerSettings-ignoreGlobalFilters"
|
||||
onChange={() => {
|
||||
const layerIndex = state.layers.findIndex((l) => l === layer);
|
||||
const newLayer = { ...layer, ignoreGlobalFilters: !layer.ignoreGlobalFilters };
|
||||
const newLayers = [...state.layers];
|
||||
newLayers[layerIndex] = newLayer;
|
||||
setState({ ...state, layers: newLayers });
|
||||
}}
|
||||
compressed
|
||||
/>
|
||||
</EuiFormRow>
|
||||
);
|
||||
}
|
||||
|
|
@ -37,7 +37,6 @@ import { DataViewsState } from '../../state_management';
|
|||
import { createMockedIndexPattern } from '../../datasources/form_based/mocks';
|
||||
import { createMockDataViewsState } from '../../data_views_service/mocks';
|
||||
import { unifiedSearchPluginMock } from '@kbn/unified-search-plugin/public/mocks';
|
||||
import { KEEP_GLOBAL_FILTERS_ACTION_ID } from './annotations/actions';
|
||||
import { layerTypes, Visualization } from '../..';
|
||||
|
||||
const DATE_HISTORGRAM_COLUMN_ID = 'date_histogram_column';
|
||||
|
|
@ -3022,7 +3021,7 @@ describe('xy_visualization', () => {
|
|||
);
|
||||
});
|
||||
|
||||
it('should return one action for an annotation layer', () => {
|
||||
it('should return no action for an annotation layer', () => {
|
||||
const baseState = exampleState();
|
||||
expect(
|
||||
xyVisualization.getSupportedActionsForLayer?.('annotation', {
|
||||
|
|
@ -3038,53 +3037,64 @@ describe('xy_visualization', () => {
|
|||
},
|
||||
],
|
||||
})
|
||||
).toEqual([
|
||||
expect.objectContaining({
|
||||
displayName: 'Keep global filters',
|
||||
description:
|
||||
'All the dimensions configured in this layer respect filters defined at kibana level.',
|
||||
icon: 'filter',
|
||||
isCompatible: true,
|
||||
'data-test-subj': 'lnsXY_annotationLayer_keepFilters',
|
||||
}),
|
||||
]);
|
||||
).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle an annotation action', () => {
|
||||
const baseState = exampleState();
|
||||
const state = {
|
||||
...baseState,
|
||||
layers: [
|
||||
...baseState.layers,
|
||||
{
|
||||
layerId: 'annotation',
|
||||
layerType: layerTypes.ANNOTATIONS,
|
||||
annotations: [exampleAnnotation2],
|
||||
ignoreGlobalFilters: true,
|
||||
indexPatternId: 'myIndexPattern',
|
||||
},
|
||||
],
|
||||
};
|
||||
describe('layer settings', () => {
|
||||
describe('hasLayerSettings', () => {
|
||||
it('should expose no settings for a data or reference lines layer', () => {
|
||||
const baseState = exampleState();
|
||||
expect(
|
||||
xyVisualization.hasLayerSettings?.({
|
||||
state: baseState,
|
||||
frame: createMockFramePublicAPI(),
|
||||
layerId: 'first',
|
||||
})
|
||||
).toEqual({ data: false, appearance: false });
|
||||
|
||||
const newState = xyVisualization.onLayerAction!(
|
||||
'annotation',
|
||||
KEEP_GLOBAL_FILTERS_ACTION_ID,
|
||||
state
|
||||
);
|
||||
|
||||
expect(newState).toEqual(
|
||||
expect.objectContaining({
|
||||
layers: expect.arrayContaining([
|
||||
{
|
||||
layerId: 'annotation',
|
||||
layerType: layerTypes.ANNOTATIONS,
|
||||
annotations: [exampleAnnotation2],
|
||||
ignoreGlobalFilters: false,
|
||||
indexPatternId: 'myIndexPattern',
|
||||
expect(
|
||||
xyVisualization.hasLayerSettings?.({
|
||||
state: {
|
||||
...baseState,
|
||||
layers: [
|
||||
...baseState.layers,
|
||||
{
|
||||
layerId: 'referenceLine',
|
||||
layerType: layerTypes.REFERENCELINE,
|
||||
accessors: [],
|
||||
yConfig: [{ axisMode: 'left', forAccessor: 'a' }],
|
||||
},
|
||||
],
|
||||
},
|
||||
]),
|
||||
})
|
||||
);
|
||||
frame: createMockFramePublicAPI(),
|
||||
layerId: 'referenceLine',
|
||||
})
|
||||
).toEqual({ data: false, appearance: false });
|
||||
});
|
||||
|
||||
it('should expose data settings for an annotation layer', () => {
|
||||
const baseState = exampleState();
|
||||
expect(
|
||||
xyVisualization.hasLayerSettings?.({
|
||||
state: {
|
||||
...baseState,
|
||||
layers: [
|
||||
...baseState.layers,
|
||||
{
|
||||
layerId: 'annotation',
|
||||
layerType: layerTypes.ANNOTATIONS,
|
||||
annotations: [exampleAnnotation2],
|
||||
ignoreGlobalFilters: true,
|
||||
indexPatternId: 'myIndexPattern',
|
||||
},
|
||||
],
|
||||
},
|
||||
frame: createMockFramePublicAPI(),
|
||||
layerId: 'annotation',
|
||||
})
|
||||
).toEqual({ data: true, appearance: false });
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -49,7 +49,6 @@ import {
|
|||
type XYDataLayerConfig,
|
||||
type SeriesType,
|
||||
type PersistedState,
|
||||
type XYAnnotationLayerConfig,
|
||||
visualizationTypes,
|
||||
} from './types';
|
||||
import {
|
||||
|
|
@ -103,12 +102,8 @@ import { AnnotationsPanel } from './xy_config_panel/annotations_config_panel';
|
|||
import { DimensionTrigger } from '../../shared_components/dimension_trigger';
|
||||
import { defaultAnnotationLabel } from './annotations/helpers';
|
||||
import { onDropForVisualization } from '../../editor_frame_service/editor_frame/config_panel/buttons/drop_targets_utils';
|
||||
import {
|
||||
createAnnotationActions,
|
||||
IGNORE_GLOBAL_FILTERS_ACTION_ID,
|
||||
KEEP_GLOBAL_FILTERS_ACTION_ID,
|
||||
} from './annotations/actions';
|
||||
import { IgnoredGlobalFiltersEntries } from './info_badges';
|
||||
import { LayerSettings } from './layer_settings';
|
||||
|
||||
const XY_ID = 'lnsXY';
|
||||
export const getXyVisualization = ({
|
||||
|
|
@ -263,31 +258,27 @@ export const getXyVisualization = ({
|
|||
];
|
||||
},
|
||||
|
||||
getSupportedActionsForLayer(layerId, state) {
|
||||
const layerIndex = state.layers.findIndex((l) => l.layerId === layerId);
|
||||
const layer = state.layers[layerIndex];
|
||||
const actions = [];
|
||||
if (isAnnotationsLayer(layer)) {
|
||||
actions.push(...createAnnotationActions({ state, layerIndex, layer }));
|
||||
}
|
||||
return actions;
|
||||
getSupportedActionsForLayer() {
|
||||
return [];
|
||||
},
|
||||
|
||||
hasLayerSettings({ state, layerId: currentLayerId }) {
|
||||
const layer = state.layers?.find(({ layerId }) => layerId === currentLayerId);
|
||||
return { data: Boolean(layer && isAnnotationsLayer(layer)), appearance: false };
|
||||
},
|
||||
|
||||
renderLayerSettings(domElement, props) {
|
||||
render(
|
||||
<KibanaThemeProvider theme$={kibanaTheme.theme$}>
|
||||
<I18nProvider>
|
||||
<LayerSettings {...props} />
|
||||
</I18nProvider>
|
||||
</KibanaThemeProvider>,
|
||||
domElement
|
||||
);
|
||||
},
|
||||
|
||||
onLayerAction(layerId, actionId, state) {
|
||||
if ([IGNORE_GLOBAL_FILTERS_ACTION_ID, KEEP_GLOBAL_FILTERS_ACTION_ID].includes(actionId)) {
|
||||
return {
|
||||
...state,
|
||||
layers: state.layers.map((layer) =>
|
||||
layer.layerId === layerId
|
||||
? {
|
||||
...layer,
|
||||
ignoreGlobalFilters: !(layer as XYAnnotationLayerConfig).ignoreGlobalFilters,
|
||||
}
|
||||
: layer
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
return state;
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -7,9 +7,17 @@
|
|||
|
||||
import React, { useState } from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { EuiIcon, EuiPopover, EuiSelectable, EuiText, EuiPopoverTitle } from '@elastic/eui';
|
||||
import {
|
||||
EuiIcon,
|
||||
EuiPopover,
|
||||
EuiSelectable,
|
||||
EuiText,
|
||||
EuiPopoverTitle,
|
||||
useEuiTheme,
|
||||
} from '@elastic/eui';
|
||||
import { ToolbarButton } from '@kbn/kibana-react-plugin/public';
|
||||
import { IconChartBarReferenceLine, IconChartBarAnnotations } from '@kbn/chart-icons';
|
||||
import { css } from '@emotion/react';
|
||||
import type {
|
||||
VisualizationLayerHeaderContentProps,
|
||||
VisualizationLayerWidgetProps,
|
||||
|
|
@ -71,6 +79,7 @@ function AnnotationLayerHeaderContent({
|
|||
layerId,
|
||||
onChangeIndexPattern,
|
||||
}: VisualizationLayerHeaderContentProps<State>) {
|
||||
const { euiTheme } = useEuiTheme();
|
||||
const notFoundTitleLabel = i18n.translate('xpack.lens.layerPanel.missingDataView', {
|
||||
defaultMessage: 'Data view not found',
|
||||
});
|
||||
|
|
@ -78,6 +87,25 @@ function AnnotationLayerHeaderContent({
|
|||
const layer = state.layers[layerIndex] as XYAnnotationLayerConfig;
|
||||
const currentIndexPattern = frame.dataViews.indexPatterns[layer.indexPatternId];
|
||||
|
||||
const extraIconLabelProps = !layer.ignoreGlobalFilters
|
||||
? {}
|
||||
: {
|
||||
icon: {
|
||||
component: (
|
||||
<EuiIcon
|
||||
type={'filterIgnore'}
|
||||
color={euiTheme.colors.disabledText}
|
||||
css={css`
|
||||
margin-top: 15px;
|
||||
`}
|
||||
/>
|
||||
),
|
||||
tooltipValue: i18n.translate('xpack.lens.layerPanel.ignoreGlobalFilters', {
|
||||
defaultMessage: 'Ignore global filters',
|
||||
}),
|
||||
'data-test-subj': 'lnsChangeIndexPatternIgnoringFilters',
|
||||
},
|
||||
};
|
||||
return (
|
||||
<ChangeIndexPattern
|
||||
data-test-subj="indexPattern-switcher"
|
||||
|
|
@ -87,6 +115,7 @@ function AnnotationLayerHeaderContent({
|
|||
'data-test-subj': 'lns_layerIndexPatternLabel',
|
||||
size: 's',
|
||||
fontWeight: 'normal',
|
||||
...extraIconLabelProps,
|
||||
}}
|
||||
indexPatternId={layer.indexPatternId}
|
||||
indexPatternRefs={frame.dataViews.indexPatternRefs}
|
||||
|
|
|
|||
|
|
@ -20022,10 +20022,6 @@
|
|||
"xpack.lens.xyChart.annotationDate.placementType": "Type de placement",
|
||||
"xpack.lens.xyChart.annotationDate.to": "À",
|
||||
"xpack.lens.xyChart.annotationError.timeFieldEmpty": "Le champ temporel est manquant",
|
||||
"xpack.lens.xyChart.annotations.ignoreGlobalFiltersDescription": "Toutes les dimensions configurées dans ce calque ignorent les filtres définis au niveau de Kibana.",
|
||||
"xpack.lens.xyChart.annotations.ignoreGlobalFiltersLabel": "Ignorer les filtres globaux",
|
||||
"xpack.lens.xyChart.annotations.keepGlobalFiltersDescription": "Toutes les dimensions configurées dans ce calque respectent les filtres définis au niveau de Kibana.",
|
||||
"xpack.lens.xyChart.annotations.keepGlobalFiltersLabel": "Conserver les filtres globaux",
|
||||
"xpack.lens.xyChart.appearance": "Apparence",
|
||||
"xpack.lens.xyChart.applyAsRange": "Appliquer en tant que plage",
|
||||
"xpack.lens.xyChart.axisOrientation.angled": "En angle",
|
||||
|
|
|
|||
|
|
@ -20022,10 +20022,6 @@
|
|||
"xpack.lens.xyChart.annotationDate.placementType": "配置タイプ",
|
||||
"xpack.lens.xyChart.annotationDate.to": "終了：",
|
||||
"xpack.lens.xyChart.annotationError.timeFieldEmpty": "時刻フィールドがありません",
|
||||
"xpack.lens.xyChart.annotations.ignoreGlobalFiltersDescription": "このレイヤーで構成されたすべてのディメンションは、Kibanaレベルで定義されたフィルターを無視します。",
|
||||
"xpack.lens.xyChart.annotations.ignoreGlobalFiltersLabel": "グローバルフィルターを無視",
|
||||
"xpack.lens.xyChart.annotations.keepGlobalFiltersDescription": "このレイヤーで構成されたすべてのディメンションは、Kibanaレベルで定義されたフィルターを適用します。",
|
||||
"xpack.lens.xyChart.annotations.keepGlobalFiltersLabel": "グローバルフィルターを保持",
|
||||
"xpack.lens.xyChart.appearance": "見た目",
|
||||
"xpack.lens.xyChart.applyAsRange": "範囲として適用",
|
||||
"xpack.lens.xyChart.axisOrientation.angled": "傾斜",
|
||||
|
|
|
|||
|
|
@ -20023,10 +20023,6 @@
|
|||
"xpack.lens.xyChart.annotationDate.placementType": "位置类型",
|
||||
"xpack.lens.xyChart.annotationDate.to": "至",
|
||||
"xpack.lens.xyChart.annotationError.timeFieldEmpty": "缺少时间字段",
|
||||
"xpack.lens.xyChart.annotations.ignoreGlobalFiltersDescription": "在此图层中配置的所有维度将忽略在 Kibana 级别定义的筛选。",
|
||||
"xpack.lens.xyChart.annotations.ignoreGlobalFiltersLabel": "忽略全局筛选",
|
||||
"xpack.lens.xyChart.annotations.keepGlobalFiltersDescription": "在此图层中配置的所有维度将采用在 Kibana 级别定义的筛选。",
|
||||
"xpack.lens.xyChart.annotations.keepGlobalFiltersLabel": "保留全局筛选",
|
||||
"xpack.lens.xyChart.appearance": "外观",
|
||||
"xpack.lens.xyChart.applyAsRange": "应用为范围",
|
||||
"xpack.lens.xyChart.axisOrientation.angled": "带角度",
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
|
|||
expect(await testSubjects.getVisibleText('lnsChangeIndexPatternSamplingInfo')).to.be('1%');
|
||||
});
|
||||
|
||||
it('should add an annotation layer and settings shoud not be available', async () => {
|
||||
it('should add an annotation layer and settings shoud be available with ignore filters', async () => {
|
||||
// configure a date histogram
|
||||
await PageObjects.lens.configureDimension({
|
||||
dimension: 'lnsXY_xDimensionPanel > lns-empty-dimension',
|
||||
|
|
@ -65,10 +65,16 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
|
|||
});
|
||||
// add annotation layer
|
||||
await PageObjects.lens.createLayer('annotations');
|
||||
|
||||
expect(await testSubjects.exists('lnsChangeIndexPatternIgnoringFilters')).to.be(true);
|
||||
|
||||
await PageObjects.lens.openLayerContextMenu(1);
|
||||
await testSubjects.existOrFail('lnsXY_annotationLayer_keepFilters');
|
||||
// layer settings not available
|
||||
await testSubjects.missingOrFail('lnsLayerSettings');
|
||||
await testSubjects.click('lnsLayerSettings');
|
||||
// annotations settings have only ignore filters
|
||||
await testSubjects.click('lnsXY-layerSettings-ignoreGlobalFilters');
|
||||
// now close the panel and check the dataView picker has no icon
|
||||
await testSubjects.click('lns-indexPattern-dimensionContainerBack');
|
||||
expect(await testSubjects.exists('lnsChangeIndexPatternIgnoringFilters')).to.be(false);
|
||||
});
|
||||
|
||||
it('should add a new visualization layer and disable the sampling if max operation is chosen', async () => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue