[Profiling] renaming CPU incl and CPU excl (#154560)

<img width="410" alt="Screenshot 2023-04-06 at 9 28 13 AM"
src="https://user-images.githubusercontent.com/55978943/230401728-fcdcb1ec-164e-4375-acae-12d3a4e2caaf.png">
<img width="610" alt="Screenshot 2023-04-06 at 9 28 23 AM"
src="https://user-images.githubusercontent.com/55978943/230401731-84a45fd2-bce2-4de8-8a3a-7f7fffa7f404.png">
<img width="295" alt="Screenshot 2023-04-06 at 9 38 57 AM"
src="https://user-images.githubusercontent.com/55978943/230401732-edb11b8d-c8fb-4401-a021-4a80a17830a4.png">

x-pack/plugins/profiling/public/components/flamegraph/flamegraph_tooltip.tsx

@@ -22,6 +22,7 @@ import { calculateImpactEstimates } from '../../utils/calculate_impact_estimates
 import { asCost } from '../../utils/formatters/as_cost';
 import { asPercentage } from '../../utils/formatters/as_percentage';
 import { asWeight } from '../../utils/formatters/as_weight';
+import { CPULabelWithHint } from '../shared/cpu_label_with_hint';
 import { TooltipRow } from './tooltip_row';
 
 interface Props {
@@ -86,19 +87,29 @@ export function FlameGraphTooltip({
           {isRoot === false && (
             <>
               <TooltipRow
-                label={i18n.translate('xpack.profiling.flameGraphTooltip.inclusiveCpuLabel', {
-                  defaultMessage: `CPU incl. subfunctions`,
-                })}
+                label={
+                  <CPULabelWithHint
+                    type="total"
+                    labelSize="xs"
+                    iconSize="s"
+                    labelStyle={{ fontWeight: 'bold' }}
+                  />
+                }
                 value={impactEstimates.percentage}
                 comparison={comparisonImpactEstimates?.percentage}
                 formatValue={asPercentage}
                 showDifference
                 formatDifferenceAsPercentage
               />
               <TooltipRow
-                label={i18n.translate('xpack.profiling.flameGraphTooltip.exclusiveCpuLabel', {
-                  defaultMessage: `CPU`,
-                })}
+                label={
+                  <CPULabelWithHint
+                    type="self"
+                    labelSize="xs"
+                    iconSize="s"
+                    labelStyle={{ fontWeight: 'bold' }}
+                  />
+                }
                 value={impactEstimates.percentageNoChildren}
                 comparison={comparisonImpactEstimates?.percentageNoChildren}
                 showDifference

x-pack/plugins/profiling/public/components/flamegraph/tooltip_row.tsx

@@ -19,7 +19,7 @@ export function TooltipRow({
   formatValue,
 }: {
   value: number;
-  label: string;
+  label: string | React.ReactElement;
   comparison?: number;
   formatDifferenceAsPercentage: boolean;
   showDifference: boolean;
@@ -58,7 +58,7 @@ export function TooltipRow({
       <EuiFlexGroup direction="row" gutterSize="xs">
         <EuiFlexItem grow={false}>
           <EuiText size="xs">
-            <strong>{label}:</strong>
+            <strong style={{ display: 'flex' }}>{label}:</strong>
           </EuiText>
         </EuiFlexItem>
         <EuiFlexItem>

x-pack/plugins/profiling/public/components/frame_information_window/get_impact_rows.ts → x-pack/plugins/profiling/public/components/frame_information_window/get_impact_rows.tsx

@@ -6,12 +6,14 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import React from 'react';
 import { calculateImpactEstimates } from '../../utils/calculate_impact_estimates';
 import { asCost } from '../../utils/formatters/as_cost';
 import { asDuration } from '../../utils/formatters/as_duration';
 import { asNumber } from '../../utils/formatters/as_number';
 import { asPercentage } from '../../utils/formatters/as_percentage';
 import { asWeight } from '../../utils/formatters/as_weight';
+import { CPULabelWithHint } from '../shared/cpu_label_with_hint';
 
 export function getImpactRows({
   countInclusive,
@@ -48,17 +50,11 @@ export function getImpactRows({
 
   const impactRows = [
     {
-      label: i18n.translate(
-        'xpack.profiling.flameGraphInformationWindow.percentageCpuTimeInclusiveLabel',
-        { defaultMessage: '% of CPU time' }
-      ),
+      label: <CPULabelWithHint type="total" labelSize="s" iconSize="s" />,
       value: asPercentage(percentage),
     },
     {
-      label: i18n.translate(
-        'xpack.profiling.flameGraphInformationWindow.percentageCpuTimeExclusiveLabel',
-        { defaultMessage: '% of CPU time (excl. children)' }
-      ),
+      label: <CPULabelWithHint type="self" labelSize="s" iconSize="s" />,
       value: asPercentage(percentageNoChildren),
     },
     {

x-pack/plugins/profiling/public/components/frame_information_window/key_value_list.tsx

@@ -9,7 +9,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule } from '@elastic/eui';
 import React from 'react';
 
 interface Props {
-  rows: Array<{ label: string; value: React.ReactNode }>;
+  rows: Array<{ label: string | React.ReactNode; value: React.ReactNode }>;
 }
 
 export function KeyValueList({ rows }: Props) {
@@ -19,7 +19,9 @@ export function KeyValueList({ rows }: Props) {
         <>
           <EuiFlexItem>
             <EuiFlexGroup direction="row">
-              <EuiFlexItem grow>{row.label}:</EuiFlexItem>
+              <EuiFlexItem grow style={{ display: 'flex', flexDirection: 'row' }}>
+                {row.label}:
+              </EuiFlexItem>
               <EuiFlexItem grow={false} style={{ alignSelf: 'flex-end', overflowWrap: 'anywhere' }}>
                 {row.value}
               </EuiFlexItem>

x-pack/plugins/profiling/public/components/shared/cpu_label_with_hint/index.tsx

@@ -0,0 +1,66 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React from 'react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiIconProps,
+  EuiText,
+  EuiTextProps,
+  EuiToolTip,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+type CPUType = 'self' | 'total';
+
+interface Props {
+  type: CPUType;
+  labelSize?: EuiTextProps['size'];
+  labelStyle?: EuiTextProps['style'];
+  iconSize?: EuiIconProps['size'];
+}
+
+const CPULabelHintMap: Record<CPUType, { label: string; hint: string }> = {
+  self: {
+    label: i18n.translate('xpack.profiling.cpu.self.label', {
+      defaultMessage: 'Self CPU',
+    }),
+    hint: i18n.translate('xpack.profiling.cpu.self.hint', {
+      defaultMessage:
+        'Indicates how much CPU time was spent by the code in the function body, excluding the work done by functions that were called by it',
+    }),
+  },
+  total: {
+    label: i18n.translate('xpack.profiling.cpu.total.label', {
+      defaultMessage: 'Total CPU',
+    }),
+    hint: i18n.translate('xpack.profiling.cpu.total.hint', {
+      defaultMessage:
+        'Indicates how much CPU time was spent by the function and any functions called by it',
+    }),
+  },
+};
+
+export function CPULabelWithHint({ iconSize, labelSize, labelStyle, type }: Props) {
+  const { label, hint } = CPULabelHintMap[type];
+
+  return (
+    <EuiFlexGroup gutterSize="xs" style={{ flexGrow: 0 }}>
+      <EuiFlexItem grow={false}>
+        <EuiText size={labelSize} style={labelStyle}>
+          {label}
+        </EuiText>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiToolTip content={hint}>
+          <EuiIcon type="questionInCircle" size={iconSize} />
+        </EuiToolTip>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}

x-pack/plugins/profiling/public/components/topn_functions/index.tsx

@@ -26,6 +26,7 @@ import { calculateImpactEstimates } from '../../utils/calculate_impact_estimates
 import { asCost } from '../../utils/formatters/as_cost';
 import { asWeight } from '../../utils/formatters/as_weight';
 import { FrameInformationTooltip } from '../frame_information_window/frame_information_tooltip';
+import { CPULabelWithHint } from '../shared/cpu_label_with_hint';
 import { StackFrameSummary } from '../stack_frame_summary';
 import { GetLabel } from './get_label';
 
@@ -250,18 +251,12 @@ export function TopNFunctionsTable({
     {
       field: TopNFunctionSortField.ExclusiveCPU,
       name: (
-        <EuiFlexGroup direction="column" gutterSize="xs">
-          <EuiFlexItem>
-            {i18n.translate('xpack.profiling.functionsView.cpuColumnLabel1Exclusive', {
-              defaultMessage: 'CPU excl.',
-            })}
-          </EuiFlexItem>
-          <EuiFlexItem>
-            {i18n.translate('xpack.profiling.functionsView.cpuColumnLabel2Exclusive', {
-              defaultMessage: 'subfunctions',
-            })}
-          </EuiFlexItem>
-        </EuiFlexGroup>
+        <CPULabelWithHint
+          type="self"
+          labelSize="xs"
+          labelStyle={{ fontWeight: 600 }}
+          iconSize="s"
+        />
       ),
       render: (_, { exclusiveCPU, diff }) => {
         return <CPUStat cpu={exclusiveCPU} diffCPU={diff?.exclusiveCPU} />;
@@ -271,18 +266,12 @@ export function TopNFunctionsTable({
     {
       field: TopNFunctionSortField.InclusiveCPU,
       name: (
-        <EuiFlexGroup direction="column" gutterSize="xs">
-          <EuiFlexItem>
-            {i18n.translate('xpack.profiling.functionsView.cpuColumnLabel1Inclusive', {
-              defaultMessage: 'CPU incl.',
-            })}
-          </EuiFlexItem>
-          <EuiFlexItem>
-            {i18n.translate('xpack.profiling.functionsView.cpuColumnLabel2Inclusive', {
-              defaultMessage: 'subfunctions',
-            })}
-          </EuiFlexItem>
-        </EuiFlexGroup>
+        <CPULabelWithHint
+          type="total"
+          labelSize="xs"
+          labelStyle={{ fontWeight: 600 }}
+          iconSize="s"
+        />
       ),
       render: (_, { inclusiveCPU, diff }) => {
         return <CPUStat cpu={inclusiveCPU} diffCPU={diff?.inclusiveCPU} />;

x-pack/plugins/translations/translations/fr-FR.json

@@ -26359,8 +26359,6 @@
     "xpack.profiling.flameGraphInformationWindow.executableLabel": "Exécutable",
     "xpack.profiling.flameGraphInformationWindow.frameTypeLabel": "Type de cadre",
     "xpack.profiling.flameGraphInformationWindow.functionLabel": "Fonction",
-    "xpack.profiling.flameGraphInformationWindow.percentageCpuTimeExclusiveLabel": "% de temps processeur (enfants excl.)",
-    "xpack.profiling.flameGraphInformationWindow.percentageCpuTimeInclusiveLabel": "% de temps processeur",
     "xpack.profiling.flameGraphInformationWindow.samplesExclusiveLabel": "Échantillons (enfants excl.)",
     "xpack.profiling.flameGraphInformationWindow.samplesInclusiveLabel": "Échantillons",
     "xpack.profiling.flameGraphInformationWindow.sourceFileLabel": "Fichier source",
@@ -26378,13 +26376,7 @@
     "xpack.profiling.flameGraphsView.differentialFlameGraphComparisonModeTitle": "Format",
     "xpack.profiling.flameGraphsView.differentialFlameGraphTabLabel": "Flame-graph différentiel",
     "xpack.profiling.flameGraphsView.flameGraphTabLabel": "Flame-graph",
-    "xpack.profiling.flameGraphTooltip.exclusiveCpuLabel": "CPU",
-    "xpack.profiling.flameGraphTooltip.inclusiveCpuLabel": "CPU incl. sous-fonctions",
     "xpack.profiling.flameGraphTooltip.samplesLabel": "Échantillons",
-    "xpack.profiling.functionsView.cpuColumnLabel1Exclusive": "CPU excl.",
-    "xpack.profiling.functionsView.cpuColumnLabel1Inclusive": "CPU incl.",
-    "xpack.profiling.functionsView.cpuColumnLabel2Exclusive": "sous-fonctions",
-    "xpack.profiling.functionsView.cpuColumnLabel2Inclusive": "sous-fonctions",
     "xpack.profiling.functionsView.diffColumnLabel": "Diff",
     "xpack.profiling.functionsView.differentialFunctionsTabLabel": "Fonctions TopN différentielles",
     "xpack.profiling.functionsView.functionColumnLabel": "Fonction",

x-pack/plugins/translations/translations/ja-JP.json

@@ -26340,8 +26340,6 @@
     "xpack.profiling.flameGraphInformationWindow.executableLabel": "実行ファイル",
     "xpack.profiling.flameGraphInformationWindow.frameTypeLabel": "フレームタイプ",
     "xpack.profiling.flameGraphInformationWindow.functionLabel": "関数",
-    "xpack.profiling.flameGraphInformationWindow.percentageCpuTimeExclusiveLabel": "CPU時間の割合（子を除く）",
-    "xpack.profiling.flameGraphInformationWindow.percentageCpuTimeInclusiveLabel": "CPU時間の割合",
     "xpack.profiling.flameGraphInformationWindow.samplesExclusiveLabel": "サンプル（子を除く）",
     "xpack.profiling.flameGraphInformationWindow.samplesInclusiveLabel": "サンプル",
     "xpack.profiling.flameGraphInformationWindow.sourceFileLabel": "ソースファイル",
@@ -26359,13 +26357,7 @@
     "xpack.profiling.flameGraphsView.differentialFlameGraphComparisonModeTitle": "フォーマット",
     "xpack.profiling.flameGraphsView.differentialFlameGraphTabLabel": "差分flamegraph",
     "xpack.profiling.flameGraphsView.flameGraphTabLabel": "Flamegraph",
-    "xpack.profiling.flameGraphTooltip.exclusiveCpuLabel": "CPU",
-    "xpack.profiling.flameGraphTooltip.inclusiveCpuLabel": "CPU（サブ関数を含む）",
     "xpack.profiling.flameGraphTooltip.samplesLabel": "サンプル",
-    "xpack.profiling.functionsView.cpuColumnLabel1Exclusive": "CPU（",
-    "xpack.profiling.functionsView.cpuColumnLabel1Inclusive": "CPU（",
-    "xpack.profiling.functionsView.cpuColumnLabel2Exclusive": "サブ関数を含む）",
-    "xpack.profiling.functionsView.cpuColumnLabel2Inclusive": "サブ関数を含む）",
     "xpack.profiling.functionsView.diffColumnLabel": "差分",
     "xpack.profiling.functionsView.differentialFunctionsTabLabel": "差分上位N関数",
     "xpack.profiling.functionsView.functionColumnLabel": "関数",

x-pack/plugins/translations/translations/zh-CN.json

@@ -26356,8 +26356,6 @@
     "xpack.profiling.flameGraphInformationWindow.executableLabel": "可执行",
     "xpack.profiling.flameGraphInformationWindow.frameTypeLabel": "帧类型",
     "xpack.profiling.flameGraphInformationWindow.functionLabel": "函数",
-    "xpack.profiling.flameGraphInformationWindow.percentageCpuTimeExclusiveLabel": "CPU 时间百分比（不包括子项）",
-    "xpack.profiling.flameGraphInformationWindow.percentageCpuTimeInclusiveLabel": "CPU 时间百分比",
     "xpack.profiling.flameGraphInformationWindow.samplesExclusiveLabel": "样例（不包括子项）",
     "xpack.profiling.flameGraphInformationWindow.samplesInclusiveLabel": "样例",
     "xpack.profiling.flameGraphInformationWindow.sourceFileLabel": "源文件",
@@ -26375,13 +26373,7 @@
     "xpack.profiling.flameGraphsView.differentialFlameGraphComparisonModeTitle": "格式",
     "xpack.profiling.flameGraphsView.differentialFlameGraphTabLabel": "差异火焰图",
     "xpack.profiling.flameGraphsView.flameGraphTabLabel": "火焰图",
-    "xpack.profiling.flameGraphTooltip.exclusiveCpuLabel": "CPU",
-    "xpack.profiling.flameGraphTooltip.inclusiveCpuLabel": "CPU 非独占时间（子函数）",
     "xpack.profiling.flameGraphTooltip.samplesLabel": "样例",
-    "xpack.profiling.functionsView.cpuColumnLabel1Exclusive": "CPU 独占时间",
-    "xpack.profiling.functionsView.cpuColumnLabel1Inclusive": "CPU 非独占时间",
-    "xpack.profiling.functionsView.cpuColumnLabel2Exclusive": "子函数",
-    "xpack.profiling.functionsView.cpuColumnLabel2Inclusive": "子函数",
     "xpack.profiling.functionsView.diffColumnLabel": "差异",
     "xpack.profiling.functionsView.differentialFunctionsTabLabel": "差异 TopN 函数",
     "xpack.profiling.functionsView.functionColumnLabel": "函数",