Skip to content

Commit

Permalink
Removes deprecated eui components
Browse files Browse the repository at this point in the history
  • Loading branch information
@stratoula
stratoula committed Jul 7, 2023
1 parent 94e850d commit 2d42523
Show file tree
Hide file tree
Showing 2 changed files with 413 additions and 409 deletions.
327 changes: 159 additions & 168 deletions x-pack/examples/embedded_lens_example/public/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,9 @@ import {
EuiFlexItem,
EuiPage,
EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiPageSection,
EuiPageHeader,
EuiPageHeaderSection,
EuiTitle,
EuiSpacer,
} from '@elastic/eui';

import type { DataView } from '@kbn/data-views-plugin/public';
Expand Down Expand Up @@ -137,172 +135,165 @@ export const App = (props: {

return (
<EuiPage>
<EuiPageBody style={{ maxWidth: 1200, margin: '0 auto' }}>
<EuiPageHeader>
<EuiPageHeaderSection>
<EuiTitle size="l">
<h1>Embedded Lens vis</h1>
</EuiTitle>
</EuiPageHeaderSection>
</EuiPageHeader>
<EuiPageContent>
<EuiPageContentBody style={{ maxWidth: 800, margin: '0 auto' }}>
<p>
This app embeds a Lens visualization by specifying the configuration. Data fetching
and rendering is completely managed by Lens itself.
</p>
<p>
The Change color button will update the configuration by picking a new random color of
the series which causes Lens to re-render. The Edit button will take the current
configuration and navigate to a prefilled editor.
</p>

<EuiFlexGroup wrap>
<EuiFlexItem grow={false}>
<EuiButton
data-test-subj="lns-example-change-color"
isLoading={isLoading}
onClick={() => {
// eslint-disable-next-line no-bitwise
const newColor = '#' + ((Math.random() * 0xffffff) << 0).toString(16);
setColor(newColor);
}}
>
Change color
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
aria-label="Open lens in new tab"
isDisabled={!props.plugins.lens.canUseEditor()}
onClick={() => {
props.plugins.lens.navigateToPrefilledEditor(
{
id: '',
timeRange: time,
attributes,
},
{
openInNewTab: true,
}
);
// eslint-disable-next-line no-bitwise
const newColor = '#' + ((Math.random() * 0xffffff) << 0).toString(16);
setColor(newColor);
}}
>
Edit in Lens (new tab)
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
aria-label="Open lens in same tab"
data-test-subj="lns-example-open-editor"
isDisabled={!props.plugins.lens.canUseEditor()}
onClick={() => {
props.plugins.lens.navigateToPrefilledEditor(
{
id: '',
timeRange: time,
attributes,
},
{
openInNewTab: false,
}
);
}}
>
Edit in Lens (same tab)
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
aria-label="Save visualization into library or embed directly into any dashboard"
data-test-subj="lns-example-save"
isDisabled={!attributes}
onClick={() => {
setIsSaveModalVisible(true);
}}
>
Save Visualization
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
aria-label="Change time range"
data-test-subj="lns-example-change-time-range"
isDisabled={!attributes}
onClick={() => {
setTime({
from: '2015-09-18T06:31:44.000Z',
to: '2015-09-23T18:31:44.000Z',
});
}}
>
Change time range
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
aria-label="Refresh"
data-test-subj="lns-example-refresh"
isDisabled={!attributes}
onClick={() => {
setSearchSession(props.plugins.data.search.session.start());
}}
>
Refresh
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
<LensComponent
id=""
withDefaultActions
style={{ height: 500 }}
timeRange={time}
attributes={attributes}
searchSessionId={searchSession}
onLoad={(val) => {
setIsLoading(val);
}}
onBrushEnd={({ range }) => {
setTime({
from: new Date(range[0]).toISOString(),
to: new Date(range[1]).toISOString(),
});
}}
onFilter={(_data) => {
// call back event for on filter event
}}
onTableRowClick={(_data) => {
// call back event for on table row click event
}}
viewMode={ViewMode.VIEW}
extraActions={[
{
id: 'testAction',
type: 'link',
getIconType: () => 'save',
async isCompatible(context: ActionExecutionContext<object>): Promise<boolean> {
return true;
},
execute: async (context: ActionExecutionContext<object>) => {
alert('I am an extra action');
return;
},
getDisplayName: () => 'Extra action',
<EuiPageBody style={{ maxWidth: 800, margin: '0 auto' }}>
<EuiPageHeader paddingSize="s" bottomBorder={true} pageTitle="Embedded Lens vis" />
<EuiPageSection paddingSize="s">
<p>
This app embeds a Lens visualization by specifying the configuration. Data fetching and
rendering is completely managed by Lens itself.
</p>
<p>
The Change color button will update the configuration by picking a new random color of
the series which causes Lens to re-render. The Edit button will take the current
configuration and navigate to a prefilled editor.
</p>
<EuiSpacer />
<EuiFlexGroup wrap gutterSize="s">
<EuiFlexItem grow={false}>
<EuiButton
data-test-subj="lns-example-change-color"
isLoading={isLoading}
onClick={() => {
// eslint-disable-next-line no-bitwise
const newColor = '#' + ((Math.random() * 0xffffff) << 0).toString(16);
setColor(newColor);
}}
>
Change color
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
aria-label="Open lens in new tab"
isDisabled={!props.plugins.lens.canUseEditor()}
onClick={() => {
props.plugins.lens.navigateToPrefilledEditor(
{
id: '',
timeRange: time,
attributes,
},
{
openInNewTab: true,
}
);
// eslint-disable-next-line no-bitwise
const newColor = '#' + ((Math.random() * 0xffffff) << 0).toString(16);
setColor(newColor);
}}
>
Edit in Lens (new tab)
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
aria-label="Open lens in same tab"
data-test-subj="lns-example-open-editor"
isDisabled={!props.plugins.lens.canUseEditor()}
onClick={() => {
props.plugins.lens.navigateToPrefilledEditor(
{
id: '',
timeRange: time,
attributes,
},
{
openInNewTab: false,
}
);
}}
>
Edit in Lens (same tab)
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
aria-label="Save visualization into library or embed directly into any dashboard"
data-test-subj="lns-example-save"
isDisabled={!attributes}
onClick={() => {
setIsSaveModalVisible(true);
}}
>
Save Visualization
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
aria-label="Change time range"
data-test-subj="lns-example-change-time-range"
isDisabled={!attributes}
onClick={() => {
setTime({
from: '2015-09-18T06:31:44.000Z',
to: '2015-09-23T18:31:44.000Z',
});
}}
>
Change time range
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
aria-label="Refresh"
data-test-subj="lns-example-refresh"
isDisabled={!attributes}
onClick={() => {
setSearchSession(props.plugins.data.search.session.start());
}}
>
Refresh
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer />
<LensComponent
id=""
withDefaultActions
style={{ height: 500 }}
timeRange={time}
attributes={attributes}
searchSessionId={searchSession}
onLoad={(val) => {
setIsLoading(val);
}}
onBrushEnd={({ range }) => {
setTime({
from: new Date(range[0]).toISOString(),
to: new Date(range[1]).toISOString(),
});
}}
onFilter={(_data) => {
// call back event for on filter event
}}
onTableRowClick={(_data) => {
// call back event for on table row click event
}}
viewMode={ViewMode.VIEW}
extraActions={[
{
id: 'testAction',
type: 'link',
getIconType: () => 'save',
async isCompatible(context: ActionExecutionContext<object>): Promise<boolean> {
return true;
},
execute: async (context: ActionExecutionContext<object>) => {
alert('I am an extra action');
return;
},
]}
getDisplayName: () => 'Extra action',
},
]}
/>
{isSaveModalVisible && (
<LensSaveModalComponent
initialInput={attributes as unknown as LensEmbeddableInput}
onSave={() => {}}
onClose={() => setIsSaveModalVisible(false)}
/>
{isSaveModalVisible && (
<LensSaveModalComponent
initialInput={attributes as unknown as LensEmbeddableInput}
onSave={() => {}}
onClose={() => setIsSaveModalVisible(false)}
/>
)}
</EuiPageContentBody>
</EuiPageContent>
)}
</EuiPageSection>
</EuiPageBody>
</EuiPage>
);
Expand Down
Loading

0 comments on commit 2d42523

Please sign in to comment.