[APM] Refactor Service tab navigation

elastic · Jun 2, 2021 · 72d877d · 72d877d
1 parent 07ce564
commit 72d877d
Show file tree

Hide file tree

Showing 34 changed files with 605 additions and 699 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.tsx
@@ -16,7 +16,6 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { Location } from 'history';
 import { first } from 'lodash';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
@@ -58,7 +57,6 @@ const TransactionLinkName = euiStyled.div`
 interface Props {
   errorGroup: APIReturnType<'GET /api/apm/services/{serviceName}/errors/{groupId}'>;
   urlParams: IUrlParams;
-  location: Location;
 }
 
 // TODO: Move query-string-based tabs into a re-usable component?
@@ -70,7 +68,7 @@ function getCurrentTab(
   return selectedTab ? selectedTab : first(tabs) || {};
 }
 
-export function DetailView({ errorGroup, urlParams, location }: Props) {
+export function DetailView({ errorGroup, urlParams }: Props) {
   const history = useHistory();
   const { transaction, error, occurrencesCount } = errorGroup;
 

diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx
@@ -16,7 +16,6 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { Fragment } from 'react';
-import { RouteComponentProps } from 'react-router-dom';
 import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
 import { useTrackPageview } from '../../../../../observability/public';
 import { NOT_AVAILABLE_LABEL } from '../../../../common/i18n';
@@ -65,43 +64,42 @@ function ErrorGroupHeader({
   isUnhandled?: boolean;
 }) {
   return (
-    <>
-      <SearchBar />
-      <EuiFlexGroup alignItems="center">
+    <EuiFlexGroup alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiTitle>
+          <h2>
+            {i18n.translate('xpack.apm.errorGroupDetails.errorGroupTitle', {
+              defaultMessage: 'Error group {errorGroupId}',
+              values: {
+                errorGroupId: getShortGroupId(groupId),
+              },
+            })}
+          </h2>
+        </EuiTitle>
+      </EuiFlexItem>
+
+      {isUnhandled && (
         <EuiFlexItem grow={false}>
-          <EuiTitle>
-            <h2>
-              {i18n.translate('xpack.apm.errorGroupDetails.errorGroupTitle', {
-                defaultMessage: 'Error group {errorGroupId}',
-                values: {
-                  errorGroupId: getShortGroupId(groupId),
-                },
-              })}
-            </h2>
-          </EuiTitle>
+          <EuiBadge color="warning">
+            {i18n.translate('xpack.apm.errorGroupDetails.unhandledLabel', {
+              defaultMessage: 'Unhandled',
+            })}
+          </EuiBadge>
         </EuiFlexItem>
-
-        {isUnhandled && (
-          <EuiFlexItem grow={false}>
-            <EuiBadge color="warning">
-              {i18n.translate('xpack.apm.errorGroupDetails.unhandledLabel', {
-                defaultMessage: 'Unhandled',
-              })}
-            </EuiBadge>
-          </EuiFlexItem>
-        )}
-      </EuiFlexGroup>
-    </>
+      )}
+    </EuiFlexGroup>
   );
 }
 
-type ErrorGroupDetailsProps = RouteComponentProps<{
+interface ErrorGroupDetailsProps {
   groupId: string;
   serviceName: string;
-}>;
+}
 
-export function ErrorGroupDetails({ location, match }: ErrorGroupDetailsProps) {
-  const { serviceName, groupId } = match.params;
+export function ErrorGroupDetails({
+  serviceName,
+  groupId,
+}: ErrorGroupDetailsProps) {
   const { urlParams } = useUrlParams();
   const { environment, kuery, start, end } = urlParams;
   const { data: errorGroupData } = useFetcher(
@@ -198,11 +196,7 @@ export function ErrorGroupDetails({ location, match }: ErrorGroupDetailsProps) {
       </EuiPanel>
       <EuiSpacer size="s" />
       {showDetails && (
-        <DetailView
-          errorGroup={errorGroupData}
-          urlParams={urlParams}
-          location={location}
-        />
+        <DetailView errorGroup={errorGroupData} urlParams={urlParams} />
       )}
     </>
   );