[Profiling] Replacing TopN functions table for EuiGrid

x-pack/plugins/profiling/common/functions.ts

@@ -161,16 +161,20 @@ export enum TopNFunctionSortField {
   Rank = 'rank',
   Frame = 'frame',
   Samples = 'samples',
-  ExclusiveCPU = 'exclusiveCPU',
-  InclusiveCPU = 'inclusiveCPU',
+  SelfCPU = 'selfCPU',
+  TotalCPU = 'totalCPU',
   Diff = 'diff',
+  AnnualizedCo2 = 'annualizedCo2',
+  AnnualizedDollarCost = 'annualizedDollarCost',
 }
 
 export const topNFunctionSortFieldRt = t.union([
   t.literal(TopNFunctionSortField.Rank),
   t.literal(TopNFunctionSortField.Frame),
   t.literal(TopNFunctionSortField.Samples),
-  t.literal(TopNFunctionSortField.ExclusiveCPU),
-  t.literal(TopNFunctionSortField.InclusiveCPU),
+  t.literal(TopNFunctionSortField.SelfCPU),
+  t.literal(TopNFunctionSortField.TotalCPU),
   t.literal(TopNFunctionSortField.Diff),
+  t.literal(TopNFunctionSortField.AnnualizedCo2),
+  t.literal(TopNFunctionSortField.AnnualizedDollarCost),
 ]);

x-pack/plugins/profiling/public/components/contexts/profiling_dependencies/mock_profiling_dependencies_storybook.tsx

@@ -9,9 +9,18 @@ import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
 import { createKibanaReactContext } from '@kbn/kibana-react-plugin/public';
 import { MlLocatorDefinition } from '@kbn/ml-plugin/public';
 import { UrlService } from '@kbn/share-plugin/common/url_service';
+import { createMemoryHistory } from 'history';
+import { merge } from 'lodash';
 import React, { ReactNode } from 'react';
 import { Observable } from 'rxjs';
-import { ProfilingDependenciesContextProvider } from './profiling_dependencies_context';
+import { RouterProvider } from '@kbn/typed-react-router-config';
+import {
+  ProfilingDependencies,
+  ProfilingDependenciesContextProvider,
+} from './profiling_dependencies_context';
+import { profilingRouter } from '../../../routing';
+import { TimeRangeContextProvider } from '../time_range_context';
+import { getServices } from '../../../services';
 
 const urlService = new UrlService({
   navigate: async () => {},
@@ -73,20 +82,46 @@ const mockProfilingDependenciesContext = {
   plugins: mockPlugin,
 } as any;
 
-export function MockProfilingDependenciesStorybook({ children }: { children?: ReactNode }) {
+export function MockProfilingDependenciesStorybook({
+  children,
+  profilingContext,
+  routePath,
+  mockServices = {},
+}: {
+  children?: ReactNode;
+  profilingContext?: Partial<ProfilingDependencies['start']>;
+  mockServices?: Partial<ProfilingDependencies['services']>;
+  routePath?: string;
+}) {
+  const contextMock = merge({}, mockProfilingDependenciesContext, profilingContext);
+
   const KibanaReactContext = createKibanaReactContext(
     mockProfilingDependenciesContext.core as unknown as Partial<CoreStart>
   );
 
+  const history = createMemoryHistory({
+    initialEntries: [routePath || '/stacktraces'],
+  });
+
+  const services = getServices();
+
   return (
     <EuiThemeProvider darkMode={false}>
       <KibanaReactContext.Provider>
-        <ProfilingDependenciesContextProvider
-          // We should keep adding more stuff to the mock object as we need
-          value={{ start: mockProfilingDependenciesContext, setup: {} as any, services: {} as any }}
-        >
-          {children}
-        </ProfilingDependenciesContextProvider>
+        <RouterProvider router={profilingRouter as any} history={history}>
+          <TimeRangeContextProvider>
+            <ProfilingDependenciesContextProvider
+              // We should keep adding more stuff to the mock object as we need
+              value={{
+                start: contextMock,
+                setup: {} as any,
+                services: merge({}, services, mockServices),
+              }}
+            >
+              {children}
+            </ProfilingDependenciesContextProvider>
+          </TimeRangeContextProvider>
+        </RouterProvider>
       </KibanaReactContext.Provider>
     </EuiThemeProvider>
   );

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

@@ -0,0 +1,41 @@
+/*
+ * 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';
+
+interface Props {
+  label: string;
+  hint: string;
+  labelSize?: EuiTextProps['size'];
+  labelStyle?: EuiTextProps['style'];
+  iconSize?: EuiIconProps['size'];
+}
+
+export function LabelWithHint({ label, hint, iconSize, labelSize, labelStyle }: Props) {
+  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/profiling_app_page_template/index.tsx

@@ -94,7 +94,7 @@ export function ProfilingAppPageTemplate({
         },
       }}
     >
-      <EuiFlexGroup direction="column">
+      <EuiFlexGroup direction="column" style={{ maxWidth: '100%' }}>
         {!hideSearchBar && (
           <EuiFlexItem grow={false}>
             <PrimaryProfilingSearchBar />

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

@@ -0,0 +1,27 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import React from 'react';
+import { Label } from './label';
+
+export function CPUStat({ cpu, diffCPU }: { cpu: number; diffCPU?: number; isSampled?: boolean }) {
+  const cpuLabel = `${cpu.toFixed(2)}%`;
+
+  if (diffCPU === undefined || diffCPU === 0) {
+    return <>{cpuLabel}</>;
+  }
+
+  return (
+    <EuiFlexGroup direction="column" gutterSize="none">
+      <EuiFlexItem>{cpuLabel}</EuiFlexItem>
+      <EuiFlexItem>
+        <Label value={diffCPU} prepend="(" append=")" />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}

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

@@ -0,0 +1,118 @@
+/*
+ * 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 {
+  EuiDataGridCellValueElementProps,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiText,
+  useEuiBackgroundColor,
+  useEuiTheme,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { TopNFunctionSortField } from '../../../common/functions';
+import { asCost } from '../../utils/formatters/as_cost';
+import { asWeight } from '../../utils/formatters/as_weight';
+import { StackFrameSummary } from '../stack_frame_summary';
+import { CPUStat } from './cpu_stat';
+import { SampleStat } from './sample_stat';
+import { IFunctionRow } from './utils';
+
+interface Props {
+  functionRow: IFunctionRow;
+  columnId: string;
+  totalCount: number;
+  onFrameClick?: (functionName: string) => void;
+  setCellProps: EuiDataGridCellValueElementProps['setCellProps'];
+}
+
+export function FunctionRow({
+  functionRow,
+  columnId,
+  totalCount,
+  onFrameClick,
+  setCellProps,
+}: Props) {
+  const theme = useEuiTheme();
+  const successColor = useEuiBackgroundColor('success');
+  const dangerColor = useEuiBackgroundColor('danger');
+
+  if (columnId === TopNFunctionSortField.Diff) {
+    if (!functionRow.diff) {
+      return (
+        <EuiText size="xs" color={theme.euiTheme.colors.primaryText}>
+          {i18n.translate('xpack.profiling.functionsView.newLabel', {
+            defaultMessage: 'New',
+          })}
+        </EuiText>
+      );
+    }
+
+    if (functionRow.diff.rank === 0) {
+      return null;
+    }
+
+    const color = functionRow.diff.rank > 0 ? 'success' : 'danger';
+    setCellProps({ style: { backgroundColor: color === 'success' ? successColor : dangerColor } });
+
+    return (
+      <EuiFlexGroup direction="row" gutterSize="xs">
+        <EuiFlexItem grow={false}>
+          <EuiText size="s">{functionRow.diff.rank}</EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiIcon type={functionRow.diff.rank > 0 ? 'sortDown' : 'sortUp'} color={color} />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  }
+
+  if (columnId === TopNFunctionSortField.Rank) {
+    return <div>{functionRow.rank}</div>;
+  }
+
+  if (columnId === TopNFunctionSortField.Frame) {
+    return <StackFrameSummary frame={functionRow.frame} onFrameClick={onFrameClick} />;
+  }
+
+  if (columnId === TopNFunctionSortField.Samples) {
+    setCellProps({ css: { textAlign: 'right' } });
+    return (
+      <SampleStat
+        samples={functionRow.samples}
+        diffSamples={functionRow.diff?.samples}
+        totalSamples={totalCount}
+      />
+    );
+  }
+
+  if (columnId === TopNFunctionSortField.SelfCPU) {
+    return <CPUStat cpu={functionRow.selfCPUPerc} diffCPU={functionRow.diff?.selfCPUPerc} />;
+  }
+
+  if (columnId === TopNFunctionSortField.TotalCPU) {
+    return <CPUStat cpu={functionRow.totalCPUPerc} diffCPU={functionRow.diff?.totalCPUPerc} />;
+  }
+
+  if (
+    columnId === TopNFunctionSortField.AnnualizedCo2 &&
+    functionRow.impactEstimates?.annualizedCo2
+  ) {
+    return <div>{asWeight(functionRow.impactEstimates.annualizedCo2)}</div>;
+  }
+
+  if (
+    columnId === TopNFunctionSortField.AnnualizedDollarCost &&
+    functionRow.impactEstimates?.annualizedDollarCost
+  ) {
+    return <div>{asCost(functionRow.impactEstimates.annualizedDollarCost)}</div>;
+  }
+
+  return null;
+}