-
Notifications
You must be signed in to change notification settings - Fork 8k
/
replace_panel_flyout.tsx
126 lines (108 loc) · 3.68 KB
/
replace_panel_flyout.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
/*
* 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 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { EuiFlyoutBody, EuiFlyoutHeader, EuiTitle } from '@elastic/eui';
import {
EmbeddableInput,
EmbeddableOutput,
IContainer,
IEmbeddable,
SavedObjectEmbeddableInput,
} from '@kbn/embeddable-plugin/public';
import { Toast } from '@kbn/core/public';
import { DashboardPanelState } from '../../common';
import { pluginServices } from '../services/plugin_services';
import { dashboardReplacePanelActionStrings } from './_dashboard_actions_strings';
import { DashboardContainer } from '../dashboard_container';
interface Props {
container: IContainer;
savedObjectsFinder: React.ComponentType<any>;
onClose: () => void;
panelToRemove: IEmbeddable<EmbeddableInput, EmbeddableOutput>;
}
export class ReplacePanelFlyout extends React.Component<Props> {
private lastToast: Toast = {
id: 'panelReplaceToast',
};
constructor(props: Props) {
super(props);
}
public showToast = (name: string) => {
const {
notifications: { toasts },
} = pluginServices.getServices();
// To avoid the clutter of having toast messages cover flyout
// close previous toast message before creating a new one
if (this.lastToast) {
toasts.remove(this.lastToast);
}
this.lastToast = toasts.addSuccess({
title: dashboardReplacePanelActionStrings.getSuccessMessage(name),
'data-test-subj': 'addObjectToContainerSuccess',
});
};
public onReplacePanel = async (savedObjectId: string, type: string, name: string) => {
const { panelToRemove, container } = this.props;
const { w, h, x, y } = (container.getInput().panels[panelToRemove.id] as DashboardPanelState)
.gridData;
const { id } = await container.addNewEmbeddable<SavedObjectEmbeddableInput>(type, {
savedObjectId,
});
const { [panelToRemove.id]: omit, ...panels } = container.getInput().panels;
container.updateInput({
panels: {
...panels,
[id]: {
...panels[id],
gridData: {
...(panels[id] as DashboardPanelState).gridData,
w,
h,
x,
y,
},
} as DashboardPanelState,
},
});
(container as DashboardContainer).setHighlightPanelId(id);
this.showToast(name);
this.props.onClose();
};
public render() {
const {
embeddable: { getEmbeddableFactories },
} = pluginServices.getServices();
const SavedObjectFinder = this.props.savedObjectsFinder;
const savedObjectsFinder = (
<SavedObjectFinder
noItemsMessage={dashboardReplacePanelActionStrings.getNoMatchingObjectsMessage()}
savedObjectMetaData={[...getEmbeddableFactories()]
.filter(
(embeddableFactory) =>
Boolean(embeddableFactory.savedObjectMetaData) && !embeddableFactory.isContainerType
)
.map(({ savedObjectMetaData }) => savedObjectMetaData as any)}
showFilter={true}
onChoose={this.onReplacePanel}
/>
);
const panelToReplace = 'Replace panel ' + this.props.panelToRemove.getTitle() + ' with:';
return (
<>
<EuiFlyoutHeader hasBorder>
<EuiTitle size="m">
<h2>
<span>{panelToReplace}</span>
</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>{savedObjectsFinder}</EuiFlyoutBody>
</>
);
}
}