Address additional review feedback

elastic · Jul 2, 2019 · c808e71 · c808e71
1 parent d72a3c6
commit c808e71
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 29 deletions.
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
@@ -48,12 +48,12 @@ const TransactionBreakdown: React.FC<{
     receivedDataDuringLifetime
   } = useTransactionBreakdown();
 
-  const total = data ? data.total : undefined;
+  const kpis = data ? data.kpis : undefined;
   const timeseriesPerSubtype = data ? data.timeseries_per_subtype : undefined;
 
   const legends = useMemo(
     () => {
-      const names = total ? total.map(kpi => kpi.name).sort() : [];
+      const names = kpis ? kpis.map(kpi => kpi.name).sort() : [];
 
       return names.map((name, index) => {
         return {
@@ -62,34 +62,34 @@ const TransactionBreakdown: React.FC<{
         };
       });
     },
-    [total]
+    [kpis]
   );
 
-  const kpis = useMemo(
+  const sortedAndColoredKpis = useMemo(
     () => {
-      if (!total) {
+      if (!kpis) {
         return null;
       }
 
       return legends.map(legend => {
         const { color } = legend;
 
-        const breakdown = total.find(
+        const breakdown = kpis.find(
           b => b.name === legend.name
-        ) as typeof total[0];
+        ) as typeof kpis[0];
 
         return {
           ...breakdown,
           color
         };
       });
     },
-    [total, legends]
+    [kpis, legends]
   );
 
   const loading = status === FETCH_STATUS.LOADING || status === undefined;
 
-  const hasHits = data && data.total.length > 0;
+  const hasHits = data && data.kpis.length > 0;
   const timeseries = useMemo(
     () => {
       if (!timeseriesPerSubtype) {
@@ -120,9 +120,11 @@ const TransactionBreakdown: React.FC<{
             }}
           />
         </EuiFlexItem>
-        {hasHits && kpis ? (
+        {hasHits && sortedAndColoredKpis ? (
           <EuiFlexItem>
-            {kpis && <TransactionBreakdownKpiList kpis={kpis} />}
+            {sortedAndColoredKpis && (
+              <TransactionBreakdownKpiList kpis={sortedAndColoredKpis} />
+            )}
           </EuiFlexItem>
         ) : (
           !loading && (

diff --git a/...gins/apm/public/components/shared/charts/TransactionCharts/TransactionLineChart/index.tsx b/...gins/apm/public/components/shared/charts/TransactionCharts/TransactionLineChart/index.tsx
@@ -39,9 +39,10 @@ const TransactionLineChart: React.FC<Props> = (props: Props) => {
     series,
     tickFormatY,
     formatTooltipValue,
-    stacked,
-    yMax,
-    height
+    stacked = false,
+    yMax = 'max',
+    height,
+    truncateLegends
   } = props;
 
   const flattenedCoordinates = flatten(series.map(serie => serie.data));
@@ -103,14 +104,9 @@ const TransactionLineChart: React.FC<Props> = (props: Props) => {
       stacked={stacked}
       yMax={yMax}
       height={height}
+      truncateLegends={truncateLegends}
     />
   );
 };
 
-TransactionLineChart.defaultProps = {
-  stacked: false,
-  truncateLegends: false,
-  yMax: 'max'
-};
-
 export { TransactionLineChart };
diff --git a/x-pack/legacy/plugins/apm/public/hooks/useTransactionBreakdown.ts b/x-pack/legacy/plugins/apm/public/hooks/useTransactionBreakdown.ts
@@ -36,7 +36,7 @@ export function useTransactionBreakdown() {
 
   const receivedDataDuringLifetime = useRef(false);
 
-  if (data && data.total.length) {
+  if (data && data.kpis.length) {
     receivedDataDuringLifetime.current = true;
   }
 

diff --git a/x-pack/legacy/plugins/apm/server/lib/transactions/breakdown/index.test.ts b/x-pack/legacy/plugins/apm/server/lib/transactions/breakdown/index.test.ts
@@ -27,7 +27,7 @@ describe('getTransactionBreakdown', () => {
       }
     });
 
-    expect(response.total.length).toBe(0);
+    expect(response.kpis.length).toBe(0);
 
     expect(Object.keys(response.timeseries_per_subtype).length).toBe(0);
   });
@@ -49,21 +49,21 @@ describe('getTransactionBreakdown', () => {
       }
     });
 
-    expect(response.total.length).toBe(4);
+    expect(response.kpis.length).toBe(4);
 
-    expect(response.total.map(breakdown => breakdown.name)).toEqual([
+    expect(response.kpis.map(kpi => kpi.name)).toEqual([
       'app',
       'http',
       'postgresql',
       'dispatcher-servlet'
     ]);
 
-    expect(response.total[0]).toEqual({
+    expect(response.kpis[0]).toEqual({
       name: 'app',
       percentage: 0.5408550899466306
     });
 
-    expect(response.total[2]).toEqual({
+    expect(response.kpis[2]).toEqual({
       name: 'postgresql',
       percentage: 0.047366859295002
     });

diff --git a/x-pack/legacy/plugins/apm/server/lib/transactions/breakdown/index.ts b/x-pack/legacy/plugins/apm/server/lib/transactions/breakdown/index.ts
@@ -154,13 +154,13 @@ export async function getTransactionBreakdown({
     return breakdowns;
   };
 
-  const total = sortByOrder(
+  const kpis = sortByOrder(
     formatBucket(resp.aggregations),
     'percentage',
     'desc'
   ).slice(0, MAX_KPIS);
 
-  const kpiNames = total.map(kpi => kpi.name);
+  const kpiNames = kpis.map(kpi => kpi.name);
 
   const timeseriesPerSubtype = resp.aggregations.by_date.buckets.reduce(
     (prev, bucket) => {
@@ -187,7 +187,7 @@ export async function getTransactionBreakdown({
   );
 
   return {
-    total,
+    kpis,
     timeseries_per_subtype: timeseriesPerSubtype
   };
 }