2019-09-27 18:55:11 +02:00
|
|
|
/*
|
|
|
|
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
|
|
|
* or more contributor license agreements. Licensed under the Elastic License;
|
|
|
|
* you may not use this file except in compliance with the Elastic License.
|
|
|
|
*/
|
|
|
|
|
2019-10-25 18:09:41 +02:00
|
|
|
import { i18n } from '@kbn/i18n';
|
2019-09-27 18:55:11 +02:00
|
|
|
import React, { useState } from 'react';
|
2020-11-24 16:04:33 +01:00
|
|
|
import { EuiPopover, EuiPopoverTitle, EuiSelectable, EuiSelectableProps } from '@elastic/eui';
|
2019-10-09 21:20:55 +02:00
|
|
|
import { IndexPatternRef } from './types';
|
2019-10-16 05:01:43 +02:00
|
|
|
import { trackUiEvent } from '../lens_ui_telemetry';
|
2020-09-16 10:30:19 +02:00
|
|
|
import { ToolbarButtonProps, ToolbarButton } from '../shared_components';
|
2019-09-27 18:55:11 +02:00
|
|
|
|
2020-07-14 02:06:58 +02:00
|
|
|
export type ChangeIndexPatternTriggerProps = ToolbarButtonProps & {
|
2019-09-27 18:55:11 +02:00
|
|
|
label: string;
|
2019-10-03 19:30:33 +02:00
|
|
|
title?: string;
|
2019-10-15 16:59:38 +02:00
|
|
|
};
|
2019-09-27 18:55:11 +02:00
|
|
|
|
|
|
|
export function ChangeIndexPattern({
|
2019-10-09 21:20:55 +02:00
|
|
|
indexPatternRefs,
|
|
|
|
indexPatternId,
|
2019-09-27 18:55:11 +02:00
|
|
|
onChangeIndexPattern,
|
|
|
|
trigger,
|
|
|
|
selectableProps,
|
|
|
|
}: {
|
|
|
|
trigger: ChangeIndexPatternTriggerProps;
|
2019-10-09 21:20:55 +02:00
|
|
|
indexPatternRefs: IndexPatternRef[];
|
2019-09-27 18:55:11 +02:00
|
|
|
onChangeIndexPattern: (newId: string) => void;
|
2019-10-09 21:20:55 +02:00
|
|
|
indexPatternId?: string;
|
2019-09-27 18:55:11 +02:00
|
|
|
selectableProps?: EuiSelectableProps;
|
|
|
|
}) {
|
|
|
|
const [isPopoverOpen, setPopoverIsOpen] = useState(false);
|
|
|
|
|
2020-05-22 09:08:58 +02:00
|
|
|
const createTrigger = function () {
|
2019-10-03 19:30:33 +02:00
|
|
|
const { label, title, ...rest } = trigger;
|
2019-09-27 18:55:11 +02:00
|
|
|
return (
|
2020-07-14 02:06:58 +02:00
|
|
|
<ToolbarButton
|
2019-10-03 19:30:33 +02:00
|
|
|
title={title}
|
2019-09-27 18:55:11 +02:00
|
|
|
onClick={() => setPopoverIsOpen(!isPopoverOpen)}
|
2020-07-14 02:06:58 +02:00
|
|
|
fullWidth
|
2019-09-27 18:55:11 +02:00
|
|
|
{...rest}
|
|
|
|
>
|
|
|
|
{label}
|
2020-07-14 02:06:58 +02:00
|
|
|
</ToolbarButton>
|
2019-09-27 18:55:11 +02:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<EuiPopover
|
2020-07-14 02:06:58 +02:00
|
|
|
style={{ width: '100%' }}
|
2019-09-27 18:55:11 +02:00
|
|
|
button={createTrigger()}
|
|
|
|
isOpen={isPopoverOpen}
|
|
|
|
closePopover={() => setPopoverIsOpen(false)}
|
|
|
|
display="block"
|
|
|
|
panelPaddingSize="s"
|
|
|
|
ownFocus
|
|
|
|
>
|
2020-08-06 18:52:21 +02:00
|
|
|
<div style={{ width: 320 }} data-test-subj="lnsChangeIndexPatternPopup">
|
2019-10-25 18:09:41 +02:00
|
|
|
<EuiPopoverTitle>
|
|
|
|
{i18n.translate('xpack.lens.indexPattern.changeIndexPatternTitle', {
|
|
|
|
defaultMessage: 'Change index pattern',
|
|
|
|
})}
|
|
|
|
</EuiPopoverTitle>
|
2020-11-24 16:04:33 +01:00
|
|
|
<EuiSelectable<{
|
|
|
|
key?: string;
|
|
|
|
label: string;
|
|
|
|
value?: string;
|
|
|
|
checked?: 'on' | 'off' | undefined;
|
|
|
|
}>
|
2019-09-27 18:55:11 +02:00
|
|
|
{...selectableProps}
|
|
|
|
searchable
|
|
|
|
singleSelection="always"
|
2019-10-09 21:20:55 +02:00
|
|
|
options={indexPatternRefs.map(({ title, id }) => ({
|
2019-12-16 15:05:45 +01:00
|
|
|
key: id,
|
2019-10-09 21:20:55 +02:00
|
|
|
label: title,
|
|
|
|
value: id,
|
|
|
|
checked: id === indexPatternId ? 'on' : undefined,
|
2019-09-27 18:55:11 +02:00
|
|
|
}))}
|
2020-05-22 09:08:58 +02:00
|
|
|
onChange={(choices) => {
|
2019-10-09 21:20:55 +02:00
|
|
|
const choice = (choices.find(({ checked }) => checked) as unknown) as {
|
|
|
|
value: string;
|
|
|
|
};
|
2019-10-16 05:01:43 +02:00
|
|
|
trackUiEvent('indexpattern_changed');
|
2019-10-09 21:20:55 +02:00
|
|
|
onChangeIndexPattern(choice.value);
|
2019-09-27 18:55:11 +02:00
|
|
|
setPopoverIsOpen(false);
|
|
|
|
}}
|
|
|
|
searchProps={{
|
|
|
|
compressed: true,
|
|
|
|
...(selectableProps ? selectableProps.searchProps : undefined),
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{(list, search) => (
|
|
|
|
<>
|
|
|
|
{search}
|
|
|
|
{list}
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</EuiSelectable>
|
|
|
|
</div>
|
|
|
|
</EuiPopover>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|