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

[8.6] [APM] Mobile - Filters are not responsive (#145996) (#146071)

Browse source 
# Backport

This will backport the following commits from `main` to `8.6`:
- [[APM] Mobile - Filters are not responsive
(#145996)](https://github.com/elastic/kibana/pull/145996)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Cauê
Marcondes","email":"55978943+cauemarcondes@users.noreply.github.com"},"sourceCommit":{"committedDate":"2022-11-22T21:09:10Z","message":"[APM]
Mobile - Filters are not responsive (#145996)\n\ncloses
203395543-186369c2-460b-4fb3-82be-8ef87f5182e2.mov","sha":"ef391c2f93ae4a06c57d9eff0ab64fa5e49d260a","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:APM","release_note:skip","v8.6.0","v8.7.0"],"number":145996,"url":"https://github.com/elastic/kibana/pull/145996","mergeCommit":{"message":"[APM]
Mobile - Filters are not responsive (#145996)\n\ncloses
203395543-186369c2-460b-4fb3-82be-8ef87f5182e2.mov","sha":"ef391c2f93ae4a06c57d9eff0ab64fa5e49d260a"}},"sourceBranch":"main","suggestedTargetBranches":["8.6"],"targetPullRequestStates":[{"branch":"8.6","label":"v8.6.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.7.0","labelRegex":"^v8.7.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/145996","number":145996,"mergeCommit":{"message":"[APM]
Mobile - Filters are not responsive (#145996)\n\ncloses
203395543-186369c2-460b-4fb3-82be-8ef87f5182e2.mov","sha":"ef391c2f93ae4a06c57d9eff0ab64fa5e49d260a"}}]}]
BACKPORT-->

Co-authored-by: Cauê Marcondes <55978943+cauemarcondes@users.noreply.github.com>
This commit is contained in:
Kibana Machine 2022-11-22 17:34:50 -05:00 • committed by GitHub
parent e7c1a9b857
commit a453cfcc25
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

23
x-pack/plugins/apm/public/components/app/service_overview/service_overview_charts/filters/index.tsx
View file

@ -4,11 +4,17 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import { EuiFlexGroup, EuiFlexItem, EuiSelect } from '@elastic/eui';
import {
EuiFlexGroup,
EuiFlexGroupProps,
EuiFlexItem,
EuiSelect,
} from '@elastic/eui';
import React from 'react';
import { useHistory } from 'react-router-dom';
import { Environment } from '../../../../../../common/environment_rt';
import { useApmServiceContext } from '../../../../../context/apm_service/use_apm_service_context';
import { useBreakpoints } from '../../../../../hooks/use_breakpoints';
import { useFetcher } from '../../../../../hooks/use_fetcher';
import type { APIReturnType } from '../../../../../services/rest/create_call_apm_api';
import { push } from '../../../../shared/links/url_helpers';
@ -39,6 +45,7 @@ export function MobileFilters({
filters,
}: Props) {
const history = useHistory();
const { isSmall, isLarge } = useBreakpoints();
const { serviceName } = useApmServiceContext();
const { data = { mobileFilters: [] } } = useFetcher(
(callApmApi) => {
@ -68,16 +75,26 @@ export function MobileFilters({
});
}
const groupDirection: EuiFlexGroupProps['direction'] = isLarge
? 'column'
: 'row';
return (
<EuiFlexGroup justifyContent="flexEnd">
<EuiFlexGroup
justifyContent="flexEnd"
gutterSize="s"
responsive={false}
direction={groupDirection}
>
{data.mobileFilters.map((filter) => {
return (
<EuiFlexItem
grow={false}
key={filter.key}
style={{ minWidth: '225px' }}
style={isLarge ? {} : { width: '225px' }}
>
<EuiSelect
fullWidth={isSmall}
prepend={filter.label}
options={toSelectOptions(filter.options)}
value={filters[filter.key]}

7
x-pack/plugins/apm/public/components/shared/search_bar.tsx
View file

@ -13,6 +13,8 @@ import {
EuiSpacer,
} from '@elastic/eui';
import React from 'react';
import { isMobileAgentName } from '../../../common/agent_name';
import { useApmServiceContext } from '../../context/apm_service/use_apm_service_context';
import { useBreakpoints } from '../../hooks/use_breakpoints';
import { ApmDatePicker } from './date_picker/apm_date_picker';
import { KueryBar } from './kuery_bar';
@ -36,6 +38,9 @@ export function SearchBar({
kueryBarBoolFilter,
kueryBarPlaceholder,
}: Props) {
const { agentName } = useApmServiceContext();
const isMobileAgent = isMobileAgentName(agentName);
const { isSmall, isMedium, isLarge, isXl, isXXL, isXXXL } = useBreakpoints();
if (hidden) {
@ -92,7 +97,7 @@ export function SearchBar({
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="m" />
<EuiSpacer size={isMobileAgent ? 's' : 'm'} />
</>
);
}