[APM] Remove additional "No data" message and re-ordering charts (#75399

) (#76364) * removing extra message * adding x-axis values when no data is available * reordering charts * fixing internationalization * fixing transaction RUM agent order * addressing PR comment * removing kpis list and show it in the chart legend instead * fixing API test * moving asPercent to the common directory * fixing api test * fixing unit test * removing unused prop * fixing unit test Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
elastic · Sep 1, 2020 · 787929f · 787929f
1 parent c086536
commit 787929f
Show file tree

Hide file tree

Showing 26 changed files with 469 additions and 639 deletions.
diff --git a/...ls/formatters/__test__/formatters.test.ts → ...ugins/apm/common/utils/formatters.test.ts b/...ls/formatters/__test__/formatters.test.ts → ...ugins/apm/common/utils/formatters.test.ts
@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { asPercent } from '../formatters';
+import { asPercent } from './formatters';
 
 describe('formatters', () => {
   describe('asPercent', () => {

diff --git a/x-pack/plugins/apm/common/utils/formatters.ts b/x-pack/plugins/apm/common/utils/formatters.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import numeral from '@elastic/numeral';
+
+export function asPercent(
+  numerator: number,
+  denominator: number | undefined,
+  fallbackResult = ''
+) {
+  if (!denominator || isNaN(numerator)) {
+    return fallbackResult;
+  }
+
+  const decimal = numerator / denominator;
+
+  // 33.2 => 33%
+  // 3.32 => 3.3%
+  // 0 => 0%
+  if (Math.abs(decimal) >= 0.1 || decimal === 0) {
+    return numeral(decimal).format('0%');
+  }
+
+  return numeral(decimal).format('0.0%');
+}
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/ServiceStatsList.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/ServiceStatsList.tsx
@@ -8,8 +8,9 @@ import { i18n } from '@kbn/i18n';
 import { isNumber } from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
+import { asPercent } from '../../../../../common/utils/formatters';
 import { ServiceNodeStats } from '../../../../../common/service_map';
-import { asDuration, asPercent, tpmUnit } from '../../../../utils/formatters';
+import { asDuration, tpmUnit } from '../../../../utils/formatters';
 
 export const ItemRow = styled('tr')`
   line-height: 2;

diff --git a/x-pack/plugins/apm/public/components/app/ServiceNodeOverview/index.tsx b/x-pack/plugins/apm/public/components/app/ServiceNodeOverview/index.tsx
@@ -13,18 +13,15 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import styled from 'styled-components';
+import { asPercent } from '../../../../common/utils/formatters';
 import { UNIDENTIFIED_SERVICE_NODES_LABEL } from '../../../../common/i18n';
 import { SERVICE_NODE_NAME_MISSING } from '../../../../common/service_nodes';
 import { Projection } from '../../../../common/projections';
 import { LocalUIFilters } from '../../shared/LocalUIFilters';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { ManagedTable, ITableColumn } from '../../shared/ManagedTable';
 import { useFetcher } from '../../../hooks/useFetcher';
-import {
-  asDynamicBytes,
-  asInteger,
-  asPercent,
-} from '../../../utils/formatters';
+import { asDynamicBytes, asInteger } from '../../../utils/formatters';
 import { ServiceNodeMetricOverviewLink } from '../../shared/Links/apm/ServiceNodeMetricOverviewLink';
 import { truncate, px, unit } from '../../../style/variables';
 

diff --git a/...ns/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/PercentOfParent.tsx b/...ns/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/PercentOfParent.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiToolTip } from '@elastic/eui';
-import { asPercent } from '../../../../utils/formatters';
+import { asPercent } from '../../../../../common/utils/formatters';
 
 interface PercentOfParentProps {
   duration: number;

diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/index.tsx
@@ -5,32 +5,29 @@
  */
 
 import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
   EuiPanel,
   EuiSpacer,
   EuiTitle,
-  EuiHorizontalRule,
-  EuiFlexGroup,
-  EuiFlexItem,
 } from '@elastic/eui';
 import React, { useMemo } from 'react';
-import { EuiFlexGrid } from '@elastic/eui';
+import { useTrackPageview } from '../../../../../observability/public';
+import { Projection } from '../../../../common/projections';
+import { ChartsSyncContextProvider } from '../../../context/ChartsSyncContext';
+import { FETCH_STATUS } from '../../../hooks/useFetcher';
+import { useLocation } from '../../../hooks/useLocation';
 import { useTransactionCharts } from '../../../hooks/useTransactionCharts';
 import { useTransactionDistribution } from '../../../hooks/useTransactionDistribution';
+import { useUrlParams } from '../../../hooks/useUrlParams';
 import { useWaterfall } from '../../../hooks/useWaterfall';
-import { TransactionCharts } from '../../shared/charts/TransactionCharts';
 import { ApmHeader } from '../../shared/ApmHeader';
+import { TransactionCharts } from '../../shared/charts/TransactionCharts';
+import { HeightRetainer } from '../../shared/HeightRetainer';
+import { LocalUIFilters } from '../../shared/LocalUIFilters';
 import { TransactionDistribution } from './Distribution';
 import { WaterfallWithSummmary } from './WaterfallWithSummmary';
-import { useLocation } from '../../../hooks/useLocation';
-import { useUrlParams } from '../../../hooks/useUrlParams';
-import { FETCH_STATUS } from '../../../hooks/useFetcher';
-import { TransactionBreakdown } from '../../shared/TransactionBreakdown';
-import { ChartsSyncContextProvider } from '../../../context/ChartsSyncContext';
-import { useTrackPageview } from '../../../../../observability/public';
-import { Projection } from '../../../../common/projections';
-import { LocalUIFilters } from '../../shared/LocalUIFilters';
-import { HeightRetainer } from '../../shared/HeightRetainer';
-import { ErroneousTransactionsRateChart } from '../../shared/charts/ErroneousTransactionsRateChart';
 
 export function TransactionDetails() {
   const location = useLocation();
@@ -86,21 +83,9 @@ export function TransactionDetails() {
         </EuiFlexItem>
         <EuiFlexItem grow={7}>
           <ChartsSyncContextProvider>
-            <EuiFlexGrid columns={2} gutterSize="s">
-              <EuiFlexItem>
-                <TransactionBreakdown />
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <ErroneousTransactionsRateChart />
-              </EuiFlexItem>
-            </EuiFlexGrid>
-
-            <EuiSpacer size="s" />
-
             <TransactionCharts
               charts={transactionChartsData}
               urlParams={urlParams}
-              location={location}
             />
           </ChartsSyncContextProvider>
 

diff --git a/x-pack/plugins/apm/public/components/app/TransactionOverview/index.tsx b/x-pack/plugins/apm/public/components/app/TransactionOverview/index.tsx
@@ -7,7 +7,6 @@
 import {
   EuiCallOut,
   EuiCode,
-  EuiFlexGrid,
   EuiFlexGroup,
   EuiFlexItem,
   EuiHorizontalRule,
@@ -29,13 +28,11 @@ import { useServiceTransactionTypes } from '../../../hooks/useServiceTransaction
 import { useTransactionCharts } from '../../../hooks/useTransactionCharts';
 import { useTransactionList } from '../../../hooks/useTransactionList';
 import { useUrlParams } from '../../../hooks/useUrlParams';
-import { ErroneousTransactionsRateChart } from '../../shared/charts/ErroneousTransactionsRateChart';
 import { TransactionCharts } from '../../shared/charts/TransactionCharts';
 import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink';
 import { fromQuery, toQuery } from '../../shared/Links/url_helpers';
 import { LocalUIFilters } from '../../shared/LocalUIFilters';
 import { TransactionTypeFilter } from '../../shared/LocalUIFilters/TransactionTypeFilter';
-import { TransactionBreakdown } from '../../shared/TransactionBreakdown';
 import { TransactionList } from './List';
 import { useRedirect } from './useRedirect';
 
@@ -125,20 +122,8 @@ export function TransactionOverview() {
         </EuiFlexItem>
         <EuiFlexItem grow={7}>
           <ChartsSyncContextProvider>
-            <EuiFlexGrid columns={2} gutterSize="s">
-              <EuiFlexItem>
-                <TransactionBreakdown />
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <ErroneousTransactionsRateChart />
-              </EuiFlexItem>
-            </EuiFlexGrid>
-
-            <EuiSpacer size="s" />
-
             <TransactionCharts
               charts={transactionCharts}
-              location={location}
               urlParams={urlParams}
             />
           </ChartsSyncContextProvider>

diff --git a/...ins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownGraph/index.tsx b/...ins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownGraph/index.tsx
@@ -4,19 +4,21 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useMemo } from 'react';
 import { throttle } from 'lodash';
+import React, { useMemo } from 'react';
+import { asPercent } from '../../../../../common/utils/formatters';
+import { useUiTracker } from '../../../../../../observability/public';
 import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
-import { Coordinate, TimeSeries } from '../../../../../typings/timeseries';
 import { Maybe } from '../../../../../typings/common';
-import { TransactionLineChart } from '../../charts/TransactionCharts/TransactionLineChart';
-import { asPercent } from '../../../../utils/formatters';
-import { unit } from '../../../../style/variables';
+import { Coordinate, TimeSeries } from '../../../../../typings/timeseries';
+import { useUrlParams } from '../../../../hooks/useUrlParams';
 import { isValidCoordinateValue } from '../../../../utils/isValidCoordinateValue';
-import { useUiTracker } from '../../../../../../observability/public';
+import { getEmptySeries } from '../../charts/CustomPlot/getEmptySeries';
+import { TransactionLineChart } from '../../charts/TransactionCharts/TransactionLineChart';
 
 interface Props {
   timeseries: TimeSeries[];
+  noHits: boolean;
 }
 
 const tickFormatY = (y: Maybe<number>) => {
@@ -29,24 +31,33 @@ const formatTooltipValue = (coordinate: Coordinate) => {
     : NOT_AVAILABLE_LABEL;
 };
 
-function TransactionBreakdownGraph(props: Props) {
-  const { timeseries } = props;
+function TransactionBreakdownGraph({ timeseries, noHits }: Props) {
+  const { urlParams } = useUrlParams();
+  const { rangeFrom, rangeTo } = urlParams;
   const trackApmEvent = useUiTracker({ app: 'apm' });
   const handleHover = useMemo(
     () =>
       throttle(() => trackApmEvent({ metric: 'hover_breakdown_chart' }), 60000),
     [trackApmEvent]
   );
 
+  const emptySeries =
+    rangeFrom && rangeTo
+      ? getEmptySeries(
+          new Date(rangeFrom).getTime(),
+          new Date(rangeTo).getTime()
+        )
+      : [];
+
   return (
     <TransactionLineChart
-      series={timeseries}
+      series={noHits ? emptySeries : timeseries}
       tickFormatY={tickFormatY}
       formatTooltipValue={formatTooltipValue}
       yMax={1}
-      height={unit * 12}
       stacked={true}
       onHover={handleHover}
+      visibleLegendCount={10}
     />
   );
 }

diff --git a/...plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownKpiList.tsx b/...plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownKpiList.tsx
diff --git a/x-pack/plugins/apm/public/components/shared/TransactionBreakdown/index.tsx b/x-pack/plugins/apm/public/components/shared/TransactionBreakdown/index.tsx
@@ -3,28 +3,18 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPanel,
-  EuiText,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { isEmpty } from 'lodash';
 import React from 'react';
 import { FETCH_STATUS } from '../../../hooks/useFetcher';
 import { useTransactionBreakdown } from '../../../hooks/useTransactionBreakdown';
 import { TransactionBreakdownGraph } from './TransactionBreakdownGraph';
-import { TransactionBreakdownKpiList } from './TransactionBreakdownKpiList';
-
-const emptyMessage = i18n.translate('xpack.apm.transactionBreakdown.noData', {
-  defaultMessage: 'No data within this time range.',
-});
 
 function TransactionBreakdown() {
   const { data, status } = useTransactionBreakdown();
-  const { kpis, timeseries } = data;
-  const noHits = data.kpis.length === 0 && status === FETCH_STATUS.SUCCESS;
+  const { timeseries } = data;
+  const noHits = isEmpty(timeseries) && status === FETCH_STATUS.SUCCESS;
 
   return (
     <EuiPanel>
@@ -39,14 +29,7 @@ function TransactionBreakdown() {
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          {noHits ? (
-            <EuiText>{emptyMessage}</EuiText>
-          ) : (
-            <TransactionBreakdownKpiList kpis={kpis} />
-          )}
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <TransactionBreakdownGraph timeseries={timeseries} />
+          <TransactionBreakdownGraph timeseries={timeseries} noHits={noHits} />
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiPanel>