mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
[Lens playground] Removes deprecated eui components (#161437)
## Summary Closes https://github.com/elastic/kibana/issues/161423 Removes the deprecated EUI components.
This commit is contained in:
Stratoula Kalafateli
GitHub
parent
3cfbf24190
commit
3b67450d41
2 changed files with 413 additions and 409 deletions
|
|
@ -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';
|
||||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -13,7 +13,10 @@ import {
|
|||
EuiSelect,
|
||||
EuiText,
|
||||
EuiSpacer,
|
||||
EuiPageTemplate_Deprecated as EuiPageTemplate,
|
||||
EuiPage,
|
||||
EuiPageBody,
|
||||
EuiPageHeader,
|
||||
EuiPageSection,
|
||||
EuiPanel,
|
||||
EuiCallOut,
|
||||
} from '@elastic/eui';
|
||||
|
|
@ -495,252 +498,262 @@ export const App = (props: {
|
|||
<KibanaContextProvider
|
||||
services={{ uiSettings: props.core.uiSettings, settings: props.core.settings }}
|
||||
>
|
||||
<EuiPageTemplate fullHeight template="empty">
|
||||
<EuiFlexGroup
|
||||
className="eui-fullHeight"
|
||||
gutterSize="none"
|
||||
direction="column"
|
||||
responsive={false}
|
||||
>
|
||||
<EuiFlexItem className="eui-fullHeight">
|
||||
<EuiFlexGroup className="eui-fullHeight" gutterSize="l">
|
||||
<EuiFlexItem grow={3}>
|
||||
<EuiPanel hasShadow={false}>
|
||||
<p>
|
||||
This app embeds a Lens visualization by specifying the configuration. Data
|
||||
fetching and rendering is completely managed by Lens itself.
|
||||
</p>
|
||||
<p>
|
||||
The editor on the right hand side make it possible to paste a Lens attributes
|
||||
configuration, and have it rendered. Presets are available to have a starting
|
||||
configuration, and new presets can be saved as well (not persisted).
|
||||
</p>
|
||||
<p>
|
||||
The Open with Lens button will take the current configuration and navigate to a
|
||||
prefilled editor.
|
||||
</p>
|
||||
<EuiSpacer />
|
||||
<EuiFlexGroup wrap>
|
||||
<EuiFlexItem grow={false}>
|
||||
<AttributesMenu
|
||||
currentSO={currentSO}
|
||||
currentAttributes={currentAttributes}
|
||||
saveValidSO={saveValidSO}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<OverridesMenu
|
||||
currentAttributes={currentAttributes}
|
||||
overrides={overrides}
|
||||
setOverrides={setOverrides}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<PanelMenu
|
||||
enableTriggers={enableTriggers}
|
||||
toggleTriggers={toggleTriggers}
|
||||
enableDefaultAction={enableDefaultAction}
|
||||
setEnableDefaultAction={setEnableDefaultAction}
|
||||
enableExtraAction={enableExtraAction}
|
||||
setEnableExtraAction={setEnableExtraAction}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButton
|
||||
aria-label="Save visualization into library or embed directly into any dashboard"
|
||||
data-test-subj="lns-example-save"
|
||||
isDisabled={isDisabled}
|
||||
onClick={() => {
|
||||
setIsSaveModalVisible(true);
|
||||
}}
|
||||
>
|
||||
Save Visualization
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
{props.defaultDataView?.isTimeBased() ? (
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButton
|
||||
aria-label="Change time range"
|
||||
data-test-subj="lns-example-change-time-range"
|
||||
isDisabled={isDisabled}
|
||||
onClick={() => {
|
||||
setTime(
|
||||
time.to === 'now'
|
||||
? {
|
||||
from: '2015-09-18T06:31:44.000Z',
|
||||
to: '2015-09-23T18:31:44.000Z',
|
||||
}
|
||||
: {
|
||||
from: 'now-5d',
|
||||
to: 'now',
|
||||
}
|
||||
);
|
||||
}}
|
||||
>
|
||||
{time.to === 'now' ? 'Change time range' : 'Reset time range'}
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
) : null}
|
||||
<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: currentAttributes,
|
||||
},
|
||||
{
|
||||
openInNewTab: true,
|
||||
}
|
||||
);
|
||||
}}
|
||||
>
|
||||
Open in Lens (new tab)
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<p>State: {isLoading ? 'Loading...' : 'Rendered'}</p>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem>
|
||||
<LensComponent
|
||||
id="myLens"
|
||||
style={{ height: 500 }}
|
||||
timeRange={time}
|
||||
attributes={currentAttributes}
|
||||
overrides={overrides}
|
||||
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
|
||||
}}
|
||||
disableTriggers={!enableTriggers}
|
||||
viewMode={ViewMode.VIEW}
|
||||
withDefaultActions={enableDefaultAction}
|
||||
extraActions={
|
||||
enableExtraAction
|
||||
? [
|
||||
<EuiPage>
|
||||
<EuiPageBody style={{ maxWidth: 1200, margin: '0 auto' }}>
|
||||
<EuiPageHeader
|
||||
paddingSize="s"
|
||||
bottomBorder={true}
|
||||
pageTitle="Lens embeddable playground"
|
||||
/>
|
||||
<EuiPageSection paddingSize="s">
|
||||
<EuiFlexGroup
|
||||
className="eui-fullHeight"
|
||||
gutterSize="none"
|
||||
direction="column"
|
||||
responsive={false}
|
||||
>
|
||||
<EuiFlexItem className="eui-fullHeight">
|
||||
<EuiFlexGroup className="eui-fullHeight" gutterSize="l">
|
||||
<EuiFlexItem grow={3}>
|
||||
<EuiPanel hasShadow={false}>
|
||||
<p>
|
||||
This app embeds a Lens visualization by specifying the configuration. Data
|
||||
fetching and rendering is completely managed by Lens itself.
|
||||
</p>
|
||||
<p>
|
||||
The editor on the right hand side make it possible to paste a Lens
|
||||
attributes configuration, and have it rendered. Presets are available to
|
||||
have a starting configuration, and new presets can be saved as well (not
|
||||
persisted).
|
||||
</p>
|
||||
<p>
|
||||
The Open with Lens button will take the current configuration and navigate
|
||||
to a prefilled editor.
|
||||
</p>
|
||||
<EuiSpacer />
|
||||
<EuiFlexGroup wrap>
|
||||
<EuiFlexItem grow={false}>
|
||||
<AttributesMenu
|
||||
currentSO={currentSO}
|
||||
currentAttributes={currentAttributes}
|
||||
saveValidSO={saveValidSO}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<OverridesMenu
|
||||
currentAttributes={currentAttributes}
|
||||
overrides={overrides}
|
||||
setOverrides={setOverrides}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<PanelMenu
|
||||
enableTriggers={enableTriggers}
|
||||
toggleTriggers={toggleTriggers}
|
||||
enableDefaultAction={enableDefaultAction}
|
||||
setEnableDefaultAction={setEnableDefaultAction}
|
||||
enableExtraAction={enableExtraAction}
|
||||
setEnableExtraAction={setEnableExtraAction}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButton
|
||||
aria-label="Save visualization into library or embed directly into any dashboard"
|
||||
data-test-subj="lns-example-save"
|
||||
isDisabled={isDisabled}
|
||||
onClick={() => {
|
||||
setIsSaveModalVisible(true);
|
||||
}}
|
||||
>
|
||||
Save Visualization
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
{props.defaultDataView?.isTimeBased() ? (
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButton
|
||||
aria-label="Change time range"
|
||||
data-test-subj="lns-example-change-time-range"
|
||||
isDisabled={isDisabled}
|
||||
onClick={() => {
|
||||
setTime(
|
||||
time.to === 'now'
|
||||
? {
|
||||
from: '2015-09-18T06:31:44.000Z',
|
||||
to: '2015-09-23T18:31:44.000Z',
|
||||
}
|
||||
: {
|
||||
from: 'now-5d',
|
||||
to: 'now',
|
||||
}
|
||||
);
|
||||
}}
|
||||
>
|
||||
{time.to === 'now' ? 'Change time range' : 'Reset time range'}
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
) : null}
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButton
|
||||
aria-label="Open lens in new tab"
|
||||
isDisabled={!props.plugins.lens.canUseEditor()}
|
||||
onClick={() => {
|
||||
props.plugins.lens.navigateToPrefilledEditor(
|
||||
{
|
||||
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',
|
||||
id: '',
|
||||
timeRange: time,
|
||||
attributes: currentAttributes,
|
||||
},
|
||||
]
|
||||
: undefined
|
||||
}
|
||||
{
|
||||
openInNewTab: true,
|
||||
}
|
||||
);
|
||||
}}
|
||||
>
|
||||
Open in Lens (new tab)
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<p>State: {isLoading ? 'Loading...' : 'Rendered'}</p>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem>
|
||||
<LensComponent
|
||||
id="myLens"
|
||||
style={{ height: 500 }}
|
||||
timeRange={time}
|
||||
attributes={currentAttributes}
|
||||
overrides={overrides}
|
||||
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
|
||||
}}
|
||||
disableTriggers={!enableTriggers}
|
||||
viewMode={ViewMode.VIEW}
|
||||
withDefaultActions={enableDefaultAction}
|
||||
extraActions={
|
||||
enableExtraAction
|
||||
? [
|
||||
{
|
||||
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',
|
||||
},
|
||||
]
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiPanel>
|
||||
{isSaveModalVisible && (
|
||||
<LensSaveModalComponent
|
||||
initialInput={currentAttributes as unknown as LensEmbeddableInput}
|
||||
onSave={() => {}}
|
||||
onClose={() => setIsSaveModalVisible(false)}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiPanel>
|
||||
{isSaveModalVisible && (
|
||||
<LensSaveModalComponent
|
||||
initialInput={currentAttributes as unknown as LensEmbeddableInput}
|
||||
onSave={() => {}}
|
||||
onClose={() => setIsSaveModalVisible(false)}
|
||||
/>
|
||||
)}
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={2}>
|
||||
<EuiPanel hasShadow={false}>
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem>
|
||||
<EuiText>
|
||||
<p>Paste or edit here your Lens document</p>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiSelect
|
||||
options={charts.map(({ id }, i) => ({ value: i, text: id }))}
|
||||
value={undefined}
|
||||
onChange={(e) => switchChartPreset(Number(e.target.value))}
|
||||
aria-label="Load from a preset"
|
||||
prepend={'Load preset'}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButton
|
||||
aria-label="Save the preset"
|
||||
data-test-subj="lns-example-save"
|
||||
isDisabled={isDisabled || hasParsingError}
|
||||
onClick={() => {
|
||||
const attributes = checkAndParseSO(currentSO.current);
|
||||
if (attributes) {
|
||||
const label = `custom-chart-${chartCounter}`;
|
||||
addChartConfiguration([
|
||||
...loadedCharts,
|
||||
{
|
||||
id: label,
|
||||
attributes,
|
||||
},
|
||||
]);
|
||||
chartCounter++;
|
||||
alert(`The preset has been saved as "${label}"`);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Save as preset
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
{hasParsingErrorDebounced && currentSO.current !== currentValid && (
|
||||
<EuiCallOut title="Error" color="danger" iconType="warning">
|
||||
<p>Check the spec</p>
|
||||
</EuiCallOut>
|
||||
)}
|
||||
</EuiFlexGroup>
|
||||
<EuiFlexGroup style={{ height: '75vh' }} direction="column">
|
||||
<EuiFlexItem>
|
||||
<CodeEditor
|
||||
languageId={HJsonLang}
|
||||
options={{
|
||||
fontSize: 14,
|
||||
wordWrap: 'on',
|
||||
}}
|
||||
value={currentSO.current}
|
||||
onChange={(newSO) => {
|
||||
const isValid = Boolean(checkAndParseSO(newSO));
|
||||
setErrorFlag(!isValid);
|
||||
currentSO.current = newSO;
|
||||
if (isValid) {
|
||||
// reset the debounced error
|
||||
setErrorDebounced(isValid);
|
||||
saveValidSO(newSO);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiPanel>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={2}>
|
||||
<EuiPanel hasShadow={false}>
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem>
|
||||
<EuiText>
|
||||
<p>Paste or edit here your Lens document</p>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiSelect
|
||||
options={charts.map(({ id }, i) => ({ value: i, text: id }))}
|
||||
value={undefined}
|
||||
onChange={(e) => switchChartPreset(Number(e.target.value))}
|
||||
aria-label="Load from a preset"
|
||||
prepend={'Load preset'}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButton
|
||||
aria-label="Save the preset"
|
||||
data-test-subj="lns-example-save"
|
||||
isDisabled={isDisabled || hasParsingError}
|
||||
onClick={() => {
|
||||
const attributes = checkAndParseSO(currentSO.current);
|
||||
if (attributes) {
|
||||
const label = `custom-chart-${chartCounter}`;
|
||||
addChartConfiguration([
|
||||
...loadedCharts,
|
||||
{
|
||||
id: label,
|
||||
attributes,
|
||||
},
|
||||
]);
|
||||
chartCounter++;
|
||||
alert(`The preset has been saved as "${label}"`);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Save as preset
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
{hasParsingErrorDebounced && currentSO.current !== currentValid && (
|
||||
<EuiCallOut title="Error" color="danger" iconType="warning">
|
||||
<p>Check the spec</p>
|
||||
</EuiCallOut>
|
||||
)}
|
||||
</EuiFlexGroup>
|
||||
<EuiFlexGroup style={{ height: '75vh' }} direction="column">
|
||||
<EuiFlexItem>
|
||||
<CodeEditor
|
||||
languageId={HJsonLang}
|
||||
options={{
|
||||
fontSize: 14,
|
||||
wordWrap: 'on',
|
||||
}}
|
||||
value={currentSO.current}
|
||||
onChange={(newSO) => {
|
||||
const isValid = Boolean(checkAndParseSO(newSO));
|
||||
setErrorFlag(!isValid);
|
||||
currentSO.current = newSO;
|
||||
if (isValid) {
|
||||
// reset the debounced error
|
||||
setErrorDebounced(isValid);
|
||||
saveValidSO(newSO);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiPanel>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiPageTemplate>
|
||||
</EuiPageSection>
|
||||
</EuiPageBody>
|
||||
</EuiPage>
|
||||
</KibanaContextProvider>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue