[embeddable refactor] decouple MapEmbeddable from Security Solution plugin#182737
Merged
nreese merged 12 commits intoelastic:mainfrom May 13, 2024
Merged
Conversation
Contributor
Author
|
/ci |
5 tasks
Contributor
Author
|
/ci |
1 task
angorayc
requested changes
May 8, 2024
Comment on lines
+179
to
+210
| const content = !storageValue ? null : ( | ||
| <Embeddable> | ||
| <InPortal node={portalNode}> | ||
| <MapToolTip /> | ||
| </InPortal> | ||
|
|
||
| <EmbeddableMap maintainRatio={!isIndexError}> | ||
| {isIndexError ? ( | ||
| <IndexPatternsMissingPrompt data-test-subj="missing-prompt" /> | ||
| ) : ( | ||
| <services.maps.Map | ||
| // eslint-disable-next-line react/display-name | ||
| getTooltipRenderer={() => (tooltipProps: RenderTooltipContentParams) => | ||
| <OutPortal node={portalNode} {...tooltipProps} />} | ||
| mapCenter={{ lon: -1.05469, lat: 15.96133, zoom: 1 }} | ||
| layerList={layerList} | ||
| filters={appliedFilters} | ||
| query={query} | ||
| onApiAvailable={(api: MapApi) => { | ||
| // Wire up to app refresh action | ||
| setQuery({ | ||
| id: 'embeddedMap', // Scope to page type if using map elsewhere | ||
| inspect: null, | ||
| loading: false, | ||
| refetch: () => api.reload(), | ||
| }); | ||
| }} | ||
| /> | ||
| )} | ||
| </EmbeddableMap> | ||
| </Embeddable> | ||
| ); |
Contributor
There was a problem hiding this comment.
Thanks for cleaning this up for Security Solution @nreese ,
I've tested locally and found there's some styling issue:
I have a suggested solution to fix this:
-
Please rename:
EmbeddableMap toEmbeddableMapRatioHolder -
Please add:
const EmbeddableMapWrapper = styled.div`
position: relative;
`;
const EmbeddableMap = styled.div`
height: 100%;
width: 100%;
position: absolute;
top: 0;
`;
- Please update the content:
Suggested change
| const content = !storageValue ? null : ( | |
| <Embeddable> | |
| <InPortal node={portalNode}> | |
| <MapToolTip /> | |
| </InPortal> | |
| <EmbeddableMap maintainRatio={!isIndexError}> | |
| {isIndexError ? ( | |
| <IndexPatternsMissingPrompt data-test-subj="missing-prompt" /> | |
| ) : ( | |
| <services.maps.Map | |
| // eslint-disable-next-line react/display-name | |
| getTooltipRenderer={() => (tooltipProps: RenderTooltipContentParams) => | |
| <OutPortal node={portalNode} {...tooltipProps} />} | |
| mapCenter={{ lon: -1.05469, lat: 15.96133, zoom: 1 }} | |
| layerList={layerList} | |
| filters={appliedFilters} | |
| query={query} | |
| onApiAvailable={(api: MapApi) => { | |
| // Wire up to app refresh action | |
| setQuery({ | |
| id: 'embeddedMap', // Scope to page type if using map elsewhere | |
| inspect: null, | |
| loading: false, | |
| refetch: () => api.reload(), | |
| }); | |
| }} | |
| /> | |
| )} | |
| </EmbeddableMap> | |
| </Embeddable> | |
| ); | |
| const content = !storageValue ? null : ( | |
| <Embeddable> | |
| <InPortal node={portalNode}> | |
| <MapToolTip /> | |
| </InPortal> | |
| <EmbeddableMapWrapper> | |
| <EmbeddableMapRatioHolder maintainRatio={!isIndexError} /> | |
| {isIndexError ? ( | |
| <IndexPatternsMissingPrompt data-test-subj="missing-prompt" /> | |
| ) : ( | |
| <EmbeddableMap> | |
| <services.maps.Map | |
| // eslint-disable-next-line react/display-name | |
| getTooltipRenderer={() => (tooltipProps: RenderTooltipContentParams) => | |
| <OutPortal node={portalNode} {...tooltipProps} />} | |
| mapCenter={{ lon: -1.05469, lat: 15.96133, zoom: 1 }} | |
| layerList={layerList} | |
| filters={appliedFilters} | |
| query={query} | |
| onApiAvailable={(api: MapApi) => { | |
| // Wire up to app refresh action | |
| setQuery({ | |
| id: 'embeddedMap', // Scope to page type if using map elsewhere | |
| inspect: null, | |
| loading: false, | |
| refetch: () => api.reload(), | |
| }); | |
| }} | |
| /> | |
| </EmbeddableMap> | |
| )} | |
| </EmbeddableMapWrapper> | |
| </Embeddable> | |
| ); | |
expected:
Contributor
|
Some other differences I found:
Screen.Recording.2024-05-08.at.12.02.56.movIn this PR: Screen.Recording.2024-05-08.at.12.03.16.mov |
Contributor
Author
|
@elasticmachine merge upstream |
Contributor
Author
Resolved with 590602b
Resolved with b559286
Data is getting refetched. To view this, open up browser debugging tools and open network tab. Set network throttling to "Slow 3G". Loading icons will appear for the layers as they reload 
|
Contributor
Author
|
@elasticmachine merge upstream |
nickpeihl
approved these changes
May 9, 2024
Contributor
nickpeihl
left a comment
There was a problem hiding this comment.
lgtm! great to simplify the usage with the Map component!
code review and tested Network Map in Security with sample data 🎩
💚 Build Succeeded
Metrics [docs]Module Count
Async chunks
Page load bundle
Unknown metric groupsESLint disabled line counts
References to deprecated APIs
Total ESLint disabled count
History
To update your PR or re-run it, just comment with: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Part of #182020
@elastic/kibana-presentation is refactoring the Embeddable framework. Part of this effort is decoupling plugins from the legacy Embeddable framework. The Maps plugin provides a react component from the plugins start contract that can be used instead of natively using MapEmbeddable.
This PR swaps out the native MapEmbeddable implementation with the react component exposed from the Maps plugin.