[Profiling] link functions to flamegraph (#160548)

https://github.com/elastic/kibana/assets/55978943/e213e261-0d26-44e0-8786-407f29d6fa55
elastic · Jun 28, 2023 · faab91c · faab91c
1 parent 384cf78
commit faab91c
Show file tree

Hide file tree

Showing 14 changed files with 405 additions and 249 deletions.
diff --git a/x-pack/plugins/profiling/public/components/flamegraph/index.tsx b/x-pack/plugins/profiling/public/components/flamegraph/index.tsx
@@ -13,6 +13,7 @@ import {
   PartialTheme,
   Settings,
   Tooltip,
+  FlameSpec,
 } from '@elastic/charts';
 import { EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui';
 import { Maybe } from '@kbn/observability-plugin/common/typings';
@@ -27,13 +28,15 @@ import { ComparisonMode } from '../normalization_menu';
 
 interface Props {
   id: string;
-  comparisonMode: ComparisonMode;
+  comparisonMode?: ComparisonMode;
   primaryFlamegraph?: ElasticFlameGraph;
   comparisonFlamegraph?: ElasticFlameGraph;
   baseline?: number;
   comparison?: number;
   showInformationWindow: boolean;
   toggleShowInformationWindow: () => void;
+  searchText?: string;
+  onChangeSearchText?: FlameSpec['onSearchTextChange'];
 }
 
 export function FlameGraph({
@@ -45,6 +48,8 @@ export function FlameGraph({
   comparison,
   showInformationWindow,
   toggleShowInformationWindow,
+  searchText,
+  onChangeSearchText,
 }: Props) {
   const theme = useEuiTheme();
 
@@ -165,6 +170,8 @@ export function FlameGraph({
                     valueFormatter={(value) => `${value}`}
                     animation={{ duration: 100 }}
                     controlProviderCallback={{}}
+                    search={searchText ? { text: searchText } : undefined}
+                    onSearchTextChange={onChangeSearchText}
                   />
                 </Chart>
               </EuiFlexItem>

diff --git a/x-pack/plugins/profiling/public/components/stack_frame_summary.tsx b/x-pack/plugins/profiling/public/components/stack_frame_summary.tsx
diff --git a/x-pack/plugins/profiling/public/components/stack_frame_summary/index.tsx b/x-pack/plugins/profiling/public/components/stack_frame_summary/index.tsx
@@ -0,0 +1,51 @@
+/*
+ * 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, EuiLink, EuiText } from '@elastic/eui';
+import React from 'react';
+import { getCalleeFunction, getCalleeSource, StackFrameMetadata } from '../../../common/profiling';
+
+interface Props {
+  frame: StackFrameMetadata;
+  onFrameClick?: (functionName: string) => void;
+}
+
+function CalleeFunctionText({ calleeFunctionName }: { calleeFunctionName: string }) {
+  return (
+    <EuiText size="s" style={{ fontWeight: 'bold', overflowWrap: 'anywhere' }}>
+      {calleeFunctionName}
+    </EuiText>
+  );
+}
+
+export function StackFrameSummary({ frame, onFrameClick }: Props) {
+  const calleeFunctionName = getCalleeFunction(frame);
+
+  function handleOnClick() {
+    if (onFrameClick) {
+      onFrameClick(calleeFunctionName);
+    }
+  }
+
+  return (
+    <EuiFlexGroup direction="column" gutterSize="xs">
+      <EuiFlexItem>
+        <div>
+          {onFrameClick ? (
+            <EuiLink onClick={handleOnClick}>
+              <CalleeFunctionText calleeFunctionName={calleeFunctionName} />
+            </EuiLink>
+          ) : (
+            <CalleeFunctionText calleeFunctionName={calleeFunctionName} />
+          )}
+        </div>
+      </EuiFlexItem>
+      <EuiFlexItem style={{ overflowWrap: 'anywhere' }}>
+        <EuiText size="s">{getCalleeSource(frame) || '‎'}</EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
diff --git a/x-pack/plugins/profiling/public/components/stacked_bar_chart/index.tsx b/x-pack/plugins/profiling/public/components/stacked_bar_chart/index.tsx
@@ -17,7 +17,6 @@ import {
   Tooltip,
   XYChartElementEvent,
   TooltipContainer,
-  CustomTooltip,
 } from '@elastic/charts';
 import { EuiPanel } from '@elastic/eui';
 import { keyBy } from 'lodash';
@@ -57,7 +56,7 @@ export function StackedBarChart({
 
   const { chartsBaseTheme, chartsTheme } = useProfilingChartsTheme();
 
-  const CustomTooltipWithSubChart: CustomTooltip = () => {
+  function CustomTooltipWithSubChart() {
     if (!highlightedSample) {
       return null;
     }
@@ -90,7 +89,7 @@ export function StackedBarChart({
         </EuiPanel>
       </TooltipContainer>
     );
-  };
+  }
 
   return (
     <Chart size={{ height }}>

diff --git a/x-pack/plugins/profiling/public/components/topn_functions/index.tsx b/x-pack/plugins/profiling/public/components/topn_functions/index.tsx
@@ -146,6 +146,7 @@ interface Props {
   isDifferentialView: boolean;
   baselineScaleFactor?: number;
   comparisonScaleFactor?: number;
+  onFrameClick?: (functionName: string) => void;
 }
 
 function scaleValue({ value, scaleFactor = 1 }: { value: number; scaleFactor?: number }) {
@@ -162,6 +163,7 @@ export function TopNFunctionsTable({
   isDifferentialView,
   baselineScaleFactor,
   comparisonScaleFactor,
+  onFrameClick,
 }: Props) {
   const [selectedRow, setSelectedRow] = useState<Row | undefined>();
   const isEstimatedA = (topNFunctions?.SamplingRate ?? 1.0) !== 1.0;
@@ -260,7 +262,9 @@ export function TopNFunctionsTable({
       name: i18n.translate('xpack.profiling.functionsView.functionColumnLabel', {
         defaultMessage: 'Function',
       }),
-      render: (_, { frame }) => <StackFrameSummary frame={frame} />,
+      render: (_, { frame }) => {
+        return <StackFrameSummary frame={frame} onFrameClick={onFrameClick} />;
+      },
       width: '50%',
     },
     {

diff --git a/x-pack/plugins/profiling/public/routing/index.tsx b/x-pack/plugins/profiling/public/routing/index.tsx
@@ -13,7 +13,9 @@ import { TopNFunctionSortField, topNFunctionSortFieldRt } from '../../common/fun
 import { StackTracesDisplayOption, TopNType } from '../../common/stack_traces';
 import { ComparisonMode, NormalizationMode } from '../components/normalization_menu';
 import { RedirectTo } from '../components/redirect_to';
-import { FlameGraphsView } from '../views/flame_graphs_view';
+import { FlameGraphsView } from '../views/flamegraphs';
+import { DifferentialFlameGraphsView } from '../views/flamegraphs/differential_flamegraphs';
+import { FlameGraphView } from '../views/flamegraphs/flamegraph';
 import { FunctionsView } from '../views/functions';
 import { DifferentialTopNFunctionsView } from '../views/functions/differential_topn';
 import { TopNFunctionsView } from '../views/functions/topn';
@@ -109,9 +111,14 @@ const routes = {
                     })}
                     href="/flamegraphs/flamegraph"
                   >
-                    <Outlet />
+                    <FlameGraphView />
                   </RouteBreadcrumb>
                 ),
+                params: t.type({
+                  query: t.partial({
+                    searchText: t.string,
+                  }),
+                }),
               },
               '/flamegraphs/differential': {
                 element: (
@@ -121,7 +128,7 @@ const routes = {
                     })}
                     href="/flamegraphs/differential"
                   >
-                    <Outlet />
+                    <DifferentialFlameGraphsView />
                   </RouteBreadcrumb>
                 ),
                 params: t.type({
@@ -134,19 +141,23 @@ const routes = {
                         t.literal(ComparisonMode.Absolute),
                         t.literal(ComparisonMode.Relative),
                       ]),
-                    }),
-                    t.partial({
                       normalizationMode: t.union([
                         t.literal(NormalizationMode.Scale),
                         t.literal(NormalizationMode.Time),
                       ]),
+                    }),
+                    t.partial({
                       baseline: toNumberRt,
                       comparison: toNumberRt,
+                      searchText: t.string,
                     }),
                   ]),
                 }),
                 defaults: {
                   query: {
+                    comparisonRangeFrom: 'now-15m',
+                    comparisonRangeTo: 'now',
+                    comparisonKuery: '',
                     comparisonMode: ComparisonMode.Absolute,
                     normalizationMode: NormalizationMode.Time,
                   },

diff --git a/x-pack/plugins/profiling/public/utils/get_flamegraph_model/index.ts b/x-pack/plugins/profiling/public/utils/get_flamegraph_model/index.ts
@@ -31,7 +31,7 @@ export function getFlamegraphModel({
   colorSuccess,
   colorDanger,
   colorNeutral,
-  comparisonMode,
+  comparisonMode = ComparisonMode.Absolute,
   comparison,
   baseline,
 }: {
@@ -40,7 +40,7 @@ export function getFlamegraphModel({
   colorSuccess: string;
   colorDanger: string;
   colorNeutral: string;
-  comparisonMode: ComparisonMode;
+  comparisonMode?: ComparisonMode;
   baseline?: number;
   comparison?: number;
 }): {