[APM] Always show transaction breakdown

Closes #43527.
elastic · Sep 26, 2019 · 2a07d1b · 2a07d1b
1 parent 297eab0
commit 2a07d1b
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 89 deletions.
diff --git a/.../plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownHeader.tsx b/.../plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownHeader.tsx
@@ -17,9 +17,8 @@ import { i18n } from '@kbn/i18n';
 
 const TransactionBreakdownHeader: React.FC<{
   showChart: boolean;
-  hideShowChartButton: boolean;
   onToggleClick: () => void;
-}> = ({ showChart, onToggleClick, hideShowChartButton }) => {
+}> = ({ showChart, onToggleClick }) => {
   return (
     <EuiFlexGroup>
       <EuiFlexItem>
@@ -50,23 +49,21 @@ const TransactionBreakdownHeader: React.FC<{
           </h3>
         </EuiTitle>
       </EuiFlexItem>
-      {!hideShowChartButton ? (
-        <EuiFlexItem grow={false}>
-          <EuiButtonEmpty
-            size="xs"
-            iconType={showChart ? 'arrowDown' : 'arrowRight'}
-            onClick={() => onToggleClick()}
-          >
-            {showChart
-              ? i18n.translate('xpack.apm.transactionBreakdown.hideChart', {
-                  defaultMessage: 'Hide chart'
-                })
-              : i18n.translate('xpack.apm.transactionBreakdown.showChart', {
-                  defaultMessage: 'Show chart'
-                })}
-          </EuiButtonEmpty>
-        </EuiFlexItem>
-      ) : null}
+      <EuiFlexItem grow={false}>
+        <EuiButtonEmpty
+          size="xs"
+          iconType={showChart ? 'arrowDown' : 'arrowRight'}
+          onClick={() => onToggleClick()}
+        >
+          {showChart
+            ? i18n.translate('xpack.apm.transactionBreakdown.hideChart', {
+                defaultMessage: 'Hide chart'
+              })
+            : i18n.translate('xpack.apm.transactionBreakdown.showChart', {
+                defaultMessage: 'Show chart'
+              })}
+        </EuiButtonEmpty>
+      </EuiFlexItem>
     </EuiFlexGroup>
   );
 };

diff --git a/x-pack/legacy/plugins/apm/public/components/shared/TransactionBreakdown/index.tsx b/x-pack/legacy/plugins/apm/public/components/shared/TransactionBreakdown/index.tsx
@@ -4,51 +4,28 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React, { useState } from 'react';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiText,
-  EuiSpacer,
-  EuiPanel
-} from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import styled from 'styled-components';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
 import { useTransactionBreakdown } from '../../../hooks/useTransactionBreakdown';
 import { TransactionBreakdownHeader } from './TransactionBreakdownHeader';
 import { TransactionBreakdownKpiList } from './TransactionBreakdownKpiList';
 import { TransactionBreakdownGraph } from './TransactionBreakdownGraph';
 import { trackEvent } from '../../../../../infra/public/hooks/use_track_metric';
 
-const NoTransactionsTitle = styled.span`
-  font-weight: bold;
-`;
-
 const TransactionBreakdown: React.FC<{
   initialIsOpen?: boolean;
 }> = ({ initialIsOpen }) => {
   const [showChart, setShowChart] = useState(!!initialIsOpen);
 
-  const {
-    data,
-    status,
-    receivedDataDuringLifetime
-  } = useTransactionBreakdown();
+  const { data } = useTransactionBreakdown();
 
   const { kpis, timeseries } = data;
 
-  const hasHits = kpis.length > 0;
-
-  if (!receivedDataDuringLifetime) {
-    return null;
-  }
-
   return (
     <EuiPanel>
       <EuiFlexGroup direction="column" gutterSize="s">
         <EuiFlexItem grow={false}>
           <TransactionBreakdownHeader
             showChart={showChart}
-            hideShowChartButton={!hasHits}
             onToggleClick={() => {
               setShowChart(!showChart);
               if (showChart) {
@@ -59,42 +36,10 @@ const TransactionBreakdown: React.FC<{
             }}
           />
         </EuiFlexItem>
-        {hasHits ? (
-          <EuiFlexItem grow={false}>
-            <TransactionBreakdownKpiList kpis={kpis} />
-          </EuiFlexItem>
-        ) : (
-          status === 'success' && (
-            <>
-              <EuiFlexItem grow={false}>
-                <EuiFlexGroup justifyContent="center">
-                  <EuiFlexItem grow={false}>
-                    <EuiText>
-                      <NoTransactionsTitle>
-                        {i18n.translate(
-                          'xpack.apm.transactionBreakdown.noTransactionsTitle',
-                          {
-                            defaultMessage: 'No transactions were found.'
-                          }
-                        )}
-                      </NoTransactionsTitle>
-                      {' ' +
-                        i18n.translate(
-                          'xpack.apm.transactionBreakdown.noTransactionsTip',
-                          {
-                            defaultMessage:
-                              'Try another time range or reset the filter.'
-                          }
-                        )}
-                    </EuiText>
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              </EuiFlexItem>
-              <EuiSpacer size="m" />
-            </>
-          )
-        )}
-        {showChart && hasHits ? (
+        <EuiFlexItem grow={false}>
+          <TransactionBreakdownKpiList kpis={kpis} />
+        </EuiFlexItem>
+        {showChart ? (
           <EuiFlexItem grow={false}>
             <TransactionBreakdownGraph timeseries={timeseries} />
           </EuiFlexItem>

diff --git a/x-pack/legacy/plugins/apm/public/hooks/useTransactionBreakdown.ts b/x-pack/legacy/plugins/apm/public/hooks/useTransactionBreakdown.ts
@@ -4,7 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { useRef } from 'react';
 import { useFetcher } from './useFetcher';
 import { useUrlParams } from './useUrlParams';
 import { callApmApi } from '../services/rest/callApmApi';
@@ -38,16 +37,9 @@ export function useTransactionBreakdown() {
     }
   }, [serviceName, start, end, transactionType, transactionName, uiFilters]);
 
-  const receivedDataDuringLifetime = useRef(false);
-
-  if (data && data.kpis.length) {
-    receivedDataDuringLifetime.current = true;
-  }
-
   return {
     data,
     status,
-    error,
-    receivedDataDuringLifetime: receivedDataDuringLifetime.current
+    error
   };
 }