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', {