Skip to content

Commit e6baade

Browse files
rStelmachkibanamachineachyutjhunjhunwala
authored and
qn895
committed
[One Discover] Fix DocViewer Flyout visibility in Saved Search Embeddables (elastic#229108)
closes: elastic#224183 ## Summary 📚 Ensures the `Expand` action inside Saved Search embeddables correctly opens the DocViewer flyout in two views: 1. **Host Details Flyout -> Logs Tab** 2. **Log Categories Page -> View in Context Modal** ## Solution ✅ Added a scoped Global style in both components that overrides `z-index` so the flyout will appear. Also added a short comment above that would indicate why the `<Global>` is there. ## Demo 🎥 https://github.com/user-attachments/assets/ab770141-15b4-4157-92fd-d96f6a49794b ## How to test 🔬 #### Host Details Flyout -> Logs Tab - Navigate to the Host List Page - Expand one of the hosts (opens Host Details Page in a flyout inside a portal) - Click on the Logs Tab - Click the Expand icon on any log entry #### Log Categories Page -> View in Context Modal - Navigate to the Log Categories page - Expand one of the category accordions - Click the 3-dot menu on the far right - Select "View in Context" (opens Saved Search Embeddable in a modal) - Click the Expand icon on any log entry --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Achyut Jhunjhunwala <[email protected]>
1 parent c5898f5 commit e6baade

File tree

2 files changed

+86
-66
lines changed

2 files changed

+86
-66
lines changed

‎x-pack/solutions/observability/plugins/infra/public/components/asset_details/tabs/logs/logs.tsx‎

Lines changed: 51 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { OpenInLogsExplorerButton } from '@kbn/logs-shared-plugin/public';
2020
import moment from 'moment';
2121
import { LazySavedSearchComponent } from '@kbn/saved-search-component';
2222
import useAsync from 'react-use/lib/useAsync';
23+
import { Global, css } from '@emotion/react';
2324
import { useKibanaContextForPlugin } from '../../../../hooks/use_kibana';
2425
import { useAssetDetailsRenderPropsContext } from '../../hooks/use_asset_details_render_props';
2526
import { useDataViewsContext } from '../../hooks/use_data_views';
@@ -119,47 +120,56 @@ export const Logs = () => {
119120
]);
120121

121122
return (
122-
<EuiFlexGroup direction="column" ref={ref}>
123-
<EuiFlexItem grow={false}>
124-
<EuiFlexGroup gutterSize="m" alignItems="center" responsive={false}>
125-
<EuiFlexItem>
126-
<EuiFieldSearch
127-
data-test-subj="infraAssetDetailsLogsTabFieldSearch"
128-
fullWidth
129-
placeholder={i18n.translate('xpack.infra.nodeDetails.logs.textFieldPlaceholder', {
130-
defaultMessage: 'Search for log entries...',
131-
})}
132-
value={textQuery}
133-
isClearable
134-
onChange={onQueryChange}
123+
<>
124+
{/* z-index override so DocViewer flyout is being visible */}
125+
<Global
126+
styles={css`
127+
.DiscoverFlyout {
128+
z-index: 6000 !important;
129+
}
130+
`}
131+
/>
132+
<EuiFlexGroup direction="column" ref={ref}>
133+
<EuiFlexItem grow={false}>
134+
<EuiFlexGroup gutterSize="m" alignItems="center" responsive={false}>
135+
<EuiFlexItem>
136+
<EuiFieldSearch
137+
data-test-subj="infraAssetDetailsLogsTabFieldSearch"
138+
fullWidth
139+
placeholder={i18n.translate('xpack.infra.nodeDetails.logs.textFieldPlaceholder', {
140+
defaultMessage: 'Search for log entries...',
141+
})}
142+
value={textQuery}
143+
isClearable
144+
onChange={onQueryChange}
145+
/>
146+
</EuiFlexItem>
147+
<EuiFlexItem grow={false}>
148+
<OpenInLogsExplorerButton
149+
href={logsUrl}
150+
testSubject={'infraAssetDetailsLogsTabOpenInLogsButton'}
151+
size="xs"
152+
flush="both"
153+
/>
154+
</EuiFlexItem>
155+
</EuiFlexGroup>
156+
</EuiFlexItem>
157+
<EuiFlexItem>
158+
{logSources.value ? (
159+
<LazySavedSearchComponent
160+
dependencies={{ embeddable, searchSource, dataViews }}
161+
index={logSources.value}
162+
timeRange={dateRange}
163+
query={filter}
164+
height="68vh"
165+
displayOptions={{
166+
solutionNavIdOverride: 'oblt',
167+
enableFilters: false,
168+
}}
135169
/>
136-
</EuiFlexItem>
137-
<EuiFlexItem grow={false}>
138-
<OpenInLogsExplorerButton
139-
href={logsUrl}
140-
testSubject={'infraAssetDetailsLogsTabOpenInLogsButton'}
141-
size="xs"
142-
flush="both"
143-
/>
144-
</EuiFlexItem>
145-
</EuiFlexGroup>
146-
</EuiFlexItem>
147-
<EuiFlexItem>
148-
{logSources.value ? (
149-
<LazySavedSearchComponent
150-
dependencies={{ embeddable, searchSource, dataViews }}
151-
index={logSources.value}
152-
timeRange={dateRange}
153-
query={filter}
154-
height="68vh"
155-
displayOptions={{
156-
solutionNavIdOverride: 'oblt',
157-
enableDocumentViewer: false,
158-
enableFilters: false,
159-
}}
160-
/>
161-
) : null}
162-
</EuiFlexItem>
163-
</EuiFlexGroup>
170+
) : null}
171+
</EuiFlexItem>
172+
</EuiFlexGroup>
173+
</>
164174
);
165175
};

‎x-pack/solutions/observability/plugins/infra/public/pages/logs/stream/page_view_log_in_context.tsx‎

Lines changed: 35 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { getLogsLocatorFromUrlService } from '@kbn/logs-shared-plugin/common';
2323
import useAsync from 'react-use/lib/useAsync';
2424
import { LazySavedSearchComponent } from '@kbn/saved-search-component';
2525
import { i18n } from '@kbn/i18n';
26+
import { Global, css } from '@emotion/react';
2627
import { useKibanaContextForPlugin } from '../../../hooks/use_kibana';
2728
import { useDatePickerContext } from '../../../components/asset_details/hooks/use_date_picker';
2829
import { useViewLogInProviderContext } from '../../../containers/logs/view_log_in_context';
@@ -79,31 +80,40 @@ export const PageViewLogInContext: React.FC = () => {
7980
});
8081

8182
return (
82-
<EuiModal onClose={closeModal} maxWidth={false}>
83-
<LogInContextWrapper width={vw - MODAL_MARGIN * 2} height={vh - MODAL_MARGIN * 2}>
84-
<EuiFlexGroup direction="column" responsive={false} wrap={false} css={{ height: '100%' }}>
85-
<EuiFlexItem grow={false}>
86-
<LogEntryContext context={contextEntry.context} discoverLink={discoverLink} />
87-
</EuiFlexItem>
88-
<EuiFlexItem grow={1}>
89-
{logSources.value ? (
90-
<LazySavedSearchComponent
91-
dependencies={{ embeddable, searchSource, dataViews }}
92-
index={logSources.value}
93-
timeRange={dateRange}
94-
query={contextQuery}
95-
height={'100%'}
96-
displayOptions={{
97-
solutionNavIdOverride: 'oblt',
98-
enableDocumentViewer: false,
99-
enableFilters: false,
100-
}}
101-
/>
102-
) : null}
103-
</EuiFlexItem>
104-
</EuiFlexGroup>
105-
</LogInContextWrapper>
106-
</EuiModal>
83+
<>
84+
{/* z-index override so DocViewer flyout is being visible */}
85+
<Global
86+
styles={css`
87+
.DiscoverFlyout {
88+
z-index: 6000 !important;
89+
}
90+
`}
91+
/>
92+
<EuiModal onClose={closeModal} maxWidth={false}>
93+
<LogInContextWrapper width={vw - MODAL_MARGIN * 2} height={vh - MODAL_MARGIN * 2}>
94+
<EuiFlexGroup direction="column" responsive={false} wrap={false} css={{ height: '100%' }}>
95+
<EuiFlexItem grow={false}>
96+
<LogEntryContext context={contextEntry.context} discoverLink={discoverLink} />
97+
</EuiFlexItem>
98+
<EuiFlexItem grow={1}>
99+
{logSources.value ? (
100+
<LazySavedSearchComponent
101+
dependencies={{ embeddable, searchSource, dataViews }}
102+
index={logSources.value}
103+
timeRange={dateRange}
104+
query={contextQuery}
105+
height={'100%'}
106+
displayOptions={{
107+
solutionNavIdOverride: 'oblt',
108+
enableFilters: false,
109+
}}
110+
/>
111+
) : null}
112+
</EuiFlexItem>
113+
</EuiFlexGroup>
114+
</LogInContextWrapper>
115+
</EuiModal>
116+
</>
107117
);
108118
};
109119

0 commit comments

Comments
 (0)