[APM] Fix hidden search bar in error pages while loading (#84476) (#9…

…3139)
elastic · Mar 2, 2021 · f14a8f2 · f14a8f2
1 parent 9d75d08
commit f14a8f2
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 28 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx
@@ -60,6 +60,45 @@ function getShortGroupId(errorGroupId?: string) {
   return errorGroupId.slice(0, 5);
 }
 
+function ErrorGroupHeader({
+  groupId,
+  isUnhandled,
+}: {
+  groupId: string;
+  isUnhandled?: boolean;
+}) {
+  return (
+    <>
+      <ApmHeader>
+        <EuiFlexGroup alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiTitle>
+              <h1>
+                {i18n.translate('xpack.apm.errorGroupDetails.errorGroupTitle', {
+                  defaultMessage: 'Error group {errorGroupId}',
+                  values: {
+                    errorGroupId: getShortGroupId(groupId),
+                  },
+                })}
+              </h1>
+            </EuiTitle>
+          </EuiFlexItem>
+          {isUnhandled && (
+            <EuiFlexItem grow={false}>
+              <EuiBadge color="warning">
+                {i18n.translate('xpack.apm.errorGroupDetails.unhandledLabel', {
+                  defaultMessage: 'Unhandled',
+                })}
+              </EuiBadge>
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+      </ApmHeader>
+      <SearchBar />
+    </>
+  );
+}
+
 type ErrorGroupDetailsProps = RouteComponentProps<{
   groupId: string;
   serviceName: string;
@@ -102,7 +141,7 @@ export function ErrorGroupDetails({ location, match }: ErrorGroupDetailsProps) {
   useTrackPageview({ app: 'apm', path: 'error_group_details', delay: 15000 });
 
   if (!errorGroupData || !errorDistributionData) {
-    return null;
+    return <ErrorGroupHeader groupId={groupId} />;
   }
 
   // If there are 0 occurrences, show only distribution chart w. empty message
@@ -115,32 +154,7 @@ export function ErrorGroupDetails({ location, match }: ErrorGroupDetailsProps) {
 
   return (
     <>
-      <ApmHeader>
-        <EuiFlexGroup alignItems="center">
-          <EuiFlexItem grow={false}>
-            <EuiTitle>
-              <h1>
-                {i18n.translate('xpack.apm.errorGroupDetails.errorGroupTitle', {
-                  defaultMessage: 'Error group {errorGroupId}',
-                  values: {
-                    errorGroupId: getShortGroupId(groupId),
-                  },
-                })}
-              </h1>
-            </EuiTitle>
-          </EuiFlexItem>
-          {isUnhandled && (
-            <EuiFlexItem grow={false}>
-              <EuiBadge color="warning">
-                {i18n.translate('xpack.apm.errorGroupDetails.unhandledLabel', {
-                  defaultMessage: 'Unhandled',
-                })}
-              </EuiBadge>
-            </EuiFlexItem>
-          )}
-        </EuiFlexGroup>
-      </ApmHeader>
-      <SearchBar />
+      <ErrorGroupHeader groupId={groupId} isUnhandled={isUnhandled} />
       <EuiPage>
         <EuiPageBody>
           <EuiPanel>

diff --git a/x-pack/plugins/apm/public/components/app/error_group_overview/index.tsx b/x-pack/plugins/apm/public/components/app/error_group_overview/index.tsx
@@ -67,7 +67,7 @@ export function ErrorGroupOverview({ serviceName }: ErrorGroupOverviewProps) {
   useTrackPageview({ app: 'apm', path: 'error_group_overview', delay: 15000 });
 
   if (!errorDistributionData || !errorGroupListData) {
-    return null;
+    return <SearchBar />;
   }
 
   return (