From 768d5b8b8c2465a2ee1d1f94c1b84ace168309b3 Mon Sep 17 00:00:00 2001 From: Miriam <31922082+MiriamAparicio@users.noreply.github.com> Date: Wed, 16 Nov 2022 11:56:53 +0100 Subject: [PATCH] [APM] Keep selected tab in url to avoid changing when refreshing (#145257) Closes https://github.com/elastic/kibana/issues/144961 https://user-images.githubusercontent.com/31922082/201953368-04f48fb9-73d2-46ea-a4d9-c20667038a80.mov --- .../app/infra_overview/infra_tabs/index.tsx | 34 +++++++++++++++---- .../infra_overview/infra_tabs/use_tabs.tsx | 25 ++++++++++---- .../routing/service_detail/index.tsx | 32 +++++++++++------ 3 files changed, 67 insertions(+), 24 deletions(-) diff --git a/x-pack/plugins/apm/public/components/app/infra_overview/infra_tabs/index.tsx b/x-pack/plugins/apm/public/components/app/infra_overview/infra_tabs/index.tsx index 09f6eaf56877b0..02c6008d9e6041 100644 --- a/x-pack/plugins/apm/public/components/app/infra_overview/infra_tabs/index.tsx +++ b/x-pack/plugins/apm/public/components/app/infra_overview/infra_tabs/index.tsx @@ -5,8 +5,9 @@ * 2.0. */ -import { EuiTabbedContent, EuiLoadingSpinner } from '@elastic/eui'; +import { EuiLoadingSpinner, EuiTabs, EuiTab } from '@elastic/eui'; import React from 'react'; +import { useHistory } from 'react-router-dom'; import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context'; import { useApmParams } from '../../../../hooks/use_apm_params'; import { useTimeRange } from '../../../../hooks/use_time_range'; @@ -14,6 +15,7 @@ import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher'; import { EmptyPrompt } from './empty_prompt'; import { FailurePrompt } from './failure_prompt'; import { useTabs } from './use_tabs'; +import { push } from '../../../shared/links/url_helpers'; const INITIAL_STATE = { containerIds: [], @@ -23,8 +25,9 @@ const INITIAL_STATE = { export function InfraTabs() { const { serviceName } = useApmServiceContext(); + const history = useHistory(); const { - query: { environment, kuery, rangeFrom, rangeTo }, + query: { environment, kuery, rangeFrom, rangeTo, detailTab }, } = useApmParams('/services/{serviceName}/infrastructure'); const { start, end } = useTimeRange({ rangeFrom, rangeTo }); @@ -89,13 +92,30 @@ export function InfraTabs() { ); } + const currentTab = tabs.find(({ id }) => id === detailTab) ?? tabs[0]; + return ( <> - + + {tabs.map(({ id, name }) => { + return ( + { + push(history, { + query: { + detailTab: id, + }, + }); + }} + isSelected={currentTab.id === id} + id={id} + > + {name} + + ); + })} + + {currentTab.content} ); } diff --git a/x-pack/plugins/apm/public/components/app/infra_overview/infra_tabs/use_tabs.tsx b/x-pack/plugins/apm/public/components/app/infra_overview/infra_tabs/use_tabs.tsx index 0d593d2b600096..e5244981f110b1 100644 --- a/x-pack/plugins/apm/public/components/app/infra_overview/infra_tabs/use_tabs.tsx +++ b/x-pack/plugins/apm/public/components/app/infra_overview/infra_tabs/use_tabs.tsx @@ -10,6 +10,7 @@ import { useKibana } from '@kbn/kibana-react-plugin/public'; import type { QueryDslQueryContainer } from '@elastic/elasticsearch/lib/api/types'; import React from 'react'; import { EuiSpacer } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; import { ApmPluginStartDeps } from '../../../../plugin'; type Tab = NonNullable[0] & { @@ -17,6 +18,12 @@ type Tab = NonNullable[0] & { hidden?: boolean; }; +export enum InfraTab { + containers = 'containers', + pods = 'pods', + hosts = 'hosts', +} + export function useTabs({ containerIds, podNames, @@ -102,20 +109,26 @@ export function useTabs({ const tabs: Tab[] = [ { - id: 'containers', - name: 'Containers', + id: InfraTab.containers, + name: i18n.translate('xpack.apm.views.infra.tabs.containers', { + defaultMessage: 'Containers', + }), content: containerMetricsTable, hidden: containerIds && containerIds.length <= 0, }, { - id: 'pods', - name: 'Pods', + id: InfraTab.pods, + name: i18n.translate('xpack.apm.views.infra.tabs.pods', { + defaultMessage: 'Pods', + }), content: podMetricsTable, hidden: podNames && podNames.length <= 0, }, { - id: 'hosts', - name: 'Hosts', + id: InfraTab.hosts, + name: i18n.translate('xpack.apm.views.infra.tabs.hosts', { + defaultMessage: 'Hosts', + }), content: hostMetricsTable, }, ]; diff --git a/x-pack/plugins/apm/public/components/routing/service_detail/index.tsx b/x-pack/plugins/apm/public/components/routing/service_detail/index.tsx index 96600d8b85b5c9..bfff8509b3ab31 100644 --- a/x-pack/plugins/apm/public/components/routing/service_detail/index.tsx +++ b/x-pack/plugins/apm/public/components/routing/service_detail/index.tsx @@ -21,6 +21,7 @@ import { AlertsOverview } from '../../app/alerts_overview'; import { ErrorGroupDetails } from '../../app/error_group_details'; import { ErrorGroupOverview } from '../../app/error_group_overview'; import { InfraOverview } from '../../app/infra_overview'; +import { InfraTab } from '../../app/infra_overview/infra_tabs/use_tabs'; import { Metrics } from '../../app/metrics'; import { MetricsDetails } from '../../app/metrics_details'; import { ServiceDependencies } from '../../app/service_dependencies'; @@ -320,18 +321,27 @@ export const serviceDetail = { showKueryBar: false, }, }), - '/services/{serviceName}/infrastructure': page({ - tab: 'infrastructure', - title: i18n.translate('xpack.apm.views.infra.title', { - defaultMessage: 'Infrastructure', + '/services/{serviceName}/infrastructure': { + ...page({ + tab: 'infrastructure', + title: i18n.translate('xpack.apm.views.infra.title', { + defaultMessage: 'Infrastructure', + }), + element: , + searchBarOptions: { + showKueryBar: false, + }, }), - element: , - searchBarOptions: { - showKueryBar: false, - showTimeComparison: false, - showTransactionTypeSelector: false, - }, - }), + params: t.partial({ + query: t.partial({ + detailTab: t.union([ + t.literal(InfraTab.containers), + t.literal(InfraTab.pods), + t.literal(InfraTab.hosts), + ]), + }), + }), + }, '/services/{serviceName}/alerts': page({ tab: 'alerts', title: i18n.translate('xpack.apm.views.alerts.title', {