github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

Fix top controls responsive layout (#106107)

Browse source
This commit is contained in:
Kerry Gallagher 2021-07-20 12:01:42 +01:00 • committed by GitHub
parent 8b2ceaed44
commit 32206b9284
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 39 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

63
x-pack/plugins/infra/public/pages/logs/stream/page_toolbar.tsx
View file

@ -20,6 +20,7 @@ import { LogHighlightsState } from '../../../containers/logs/log_highlights/log_
import { LogPositionState } from '../../../containers/logs/log_position';
import { useLogSourceContext } from '../../../containers/logs/log_source';
import { LogViewConfiguration } from '../../../containers/logs/log_view_configuration';
import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
export const LogsToolbar = () => {
const { derivedIndexPattern } = useLogSourceContext();
@ -54,8 +55,8 @@ export const LogsToolbar = () => {
return (
<div>
<EuiFlexGroup alignItems="center" justifyContent="spaceBetween" gutterSize="l">
<EuiFlexItem>
<EuiFlexGroup alignItems="center" justifyContent="spaceBetween" gutterSize="l" wrap>
<QueryBarFlexItem>
<QueryStringInput
disableLanguageSwitcher={true}
iconType="search"
@ -74,29 +75,33 @@ export const LogsToolbar = () => {
})}
query={filterQueryDraft}
/>
</EuiFlexItem>
</QueryBarFlexItem>
<EuiFlexItem grow={false}>
<LogCustomizationMenu>
<LogTextWrapControls wrap={textWrap} setTextWrap={setTextWrap} />
<LogTextScaleControls
availableTextScales={availableTextScales}
textScale={textScale}
setTextScale={setTextScale}
/>
</LogCustomizationMenu>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<LogHighlightsMenu
onChange={setHighlightTerms}
isLoading={loadLogEntryHighlightsRequest.state === 'pending'}
activeHighlights={
highlightTerms.filter((highlightTerm) => highlightTerm.length > 0).length > 0
}
goToPreviousHighlight={goToPreviousHighlight}
goToNextHighlight={goToNextHighlight}
hasPreviousHighlight={hasPreviousHighlight}
hasNextHighlight={hasNextHighlight}
/>
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<LogCustomizationMenu>
<LogTextWrapControls wrap={textWrap} setTextWrap={setTextWrap} />
<LogTextScaleControls
availableTextScales={availableTextScales}
textScale={textScale}
setTextScale={setTextScale}
/>
</LogCustomizationMenu>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<LogHighlightsMenu
onChange={setHighlightTerms}
isLoading={loadLogEntryHighlightsRequest.state === 'pending'}
activeHighlights={
highlightTerms.filter((highlightTerm) => highlightTerm.length > 0).length > 0
}
goToPreviousHighlight={goToPreviousHighlight}
goToNextHighlight={goToNextHighlight}
hasPreviousHighlight={hasPreviousHighlight}
hasNextHighlight={hasNextHighlight}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<LogDatepicker
@ -112,3 +117,13 @@ export const LogsToolbar = () => {
</div>
);
};
const QueryBarFlexItem = euiStyled(EuiFlexItem)`
@media (min-width: 1200px) {
flex: 0 0 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 12px;
padding-right: 12px;
}
`;