PR feedback

elastic · Sep 29, 2020 · 9bdd3b9 · 9bdd3b9
1 parent b1c9969
commit 9bdd3b9
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 15 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/CoreVitalItem.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/CoreVitalItem.tsx
@@ -15,11 +15,11 @@ import { i18n } from '@kbn/i18n';
 import { PaletteLegends } from './PaletteLegends';
 import { ColorPaletteFlexItem } from './ColorPaletteFlexItem';
 import {
-  AN_AVERAGE_LABEL,
-  A_GOOD_LABEL,
+  CV_AVERAGE_LABEL,
+  CV_GOOD_LABEL,
   LESS_LABEL,
   MORE_LABEL,
-  A_POOR_LABEL,
+  CV_POOR_LABEL,
 } from './translations';
 
 export interface Thresholds {
@@ -51,7 +51,7 @@ export function getCoreVitalTooltipMessage(
     values: {
       percentage,
       title: title?.toLowerCase(),
-      exp: good ? A_GOOD_LABEL : bad ? A_POOR_LABEL : AN_AVERAGE_LABEL,
+      exp: good ? CV_GOOD_LABEL : bad ? CV_POOR_LABEL : CV_AVERAGE_LABEL,
       moreOrLess: bad || average ? MORE_LABEL : LESS_LABEL,
       value: good || average ? thresholds.good : thresholds.bad,
       averageMessage: average

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/PaletteLegends.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/PaletteLegends.tsx
@@ -14,14 +14,15 @@ import {
   EuiToolTip,
 } from '@elastic/eui';
 import styled from 'styled-components';
+import { FormattedMessage } from '@kbn/i18n/react';
 import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
 import { getCoreVitalTooltipMessage, Thresholds } from './CoreVitalItem';
 import { useUiSetting$ } from '../../../../../../../../src/plugins/kibana_react/public';
 import {
-  NEEDS_IMPROVEMENT_LABEL,
-  GOOD_LABEL,
-  POOR_LABEL,
+  LEGEND_NEEDS_IMPROVEMENT_LABEL,
+  LEGEND_GOOD_LABEL,
+  LEGEND_POOR_LABEL,
 } from './translations';
 
 const PaletteLegend = styled(EuiHealth)`
@@ -58,10 +59,14 @@ export function PaletteLegends({
   const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
 
   const palette = euiPaletteForStatus(3);
-  const labels = [GOOD_LABEL, NEEDS_IMPROVEMENT_LABEL, POOR_LABEL];
+  const labels = [
+    LEGEND_GOOD_LABEL,
+    LEGEND_NEEDS_IMPROVEMENT_LABEL,
+    LEGEND_POOR_LABEL,
+  ];
 
   return (
-    <EuiFlexGroup responsive={false} gutterSize={'s'}>
+    <EuiFlexGroup responsive={false} gutterSize="s">
       {palette.map((color, ind) => (
         <EuiFlexItem
           key={ind}
@@ -86,6 +91,14 @@ export function PaletteLegends({
               <PaletteLegend color={color}>
                 <EuiText size="xs">
                   {labels[ind]} ({ranks?.[ind]}%)
+                  <FormattedMessage
+                    id="xpack.apm.rum.coreVitals.paletteLegend.rankPercentage"
+                    defaultMessage="{labelsInd} ({ranksInd}%)"
+                    values={{
+                      labelsInd: labels[ind],
+                      ranksInd: ranks?.[ind],
+                    }}
+                  />
                 </EuiText>
               </PaletteLegend>
             </StyledSpan>

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/translations.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/CoreVitals/translations.ts
@@ -47,36 +47,36 @@ export const SUM_LONG_TASKS = i18n.translate(
   }
 );
 
-export const A_POOR_LABEL = i18n.translate('xpack.apm.rum.coreVitals.poor', {
+export const CV_POOR_LABEL = i18n.translate('xpack.apm.rum.coreVitals.poor', {
   defaultMessage: 'a poor',
 });
 
-export const A_GOOD_LABEL = i18n.translate('xpack.apm.rum.coreVitals.good', {
+export const CV_GOOD_LABEL = i18n.translate('xpack.apm.rum.coreVitals.good', {
   defaultMessage: 'a good',
 });
 
-export const AN_AVERAGE_LABEL = i18n.translate(
+export const CV_AVERAGE_LABEL = i18n.translate(
   'xpack.apm.rum.coreVitals.average',
   {
     defaultMessage: 'an average',
   }
 );
 
-export const POOR_LABEL = i18n.translate(
+export const LEGEND_POOR_LABEL = i18n.translate(
   'xpack.apm.rum.coreVitals.legends.poor',
   {
     defaultMessage: 'Poor',
   }
 );
 
-export const GOOD_LABEL = i18n.translate(
+export const LEGEND_GOOD_LABEL = i18n.translate(
   'xpack.apm.rum.coreVitals.legends.good',
   {
     defaultMessage: 'Good',
   }
 );
 
-export const NEEDS_IMPROVEMENT_LABEL = i18n.translate(
+export const LEGEND_NEEDS_IMPROVEMENT_LABEL = i18n.translate(
   'xpack.apm.rum.coreVitals.legends.needsImprovement',
   {
     defaultMessage: 'Needs improvement',