From 0764bd1b7d36f97577d3c55eab5623b28f3e304d Mon Sep 17 00:00:00 2001
From: Joseph Crail <joseph.crail@elastic.co>
Date: Tue, 21 Feb 2023 16:46:00 -0800
Subject: [PATCH] [Profiling] Restore show information window (#151538)

## Summary

This PR returns the show information window to the flamegraph view.

We also added a minor UI improvement to keep the flamegraph view
visually synced up with the differential flamegraph view.

Fixes https://github.com/elastic/prodfiler/issues/3009

### Screenshots

The "Show information window" toggle is visible and disabled.

![image](https://user-images.githubusercontent.com/6038/219519101-5e8a9797-faa4-4ffe-ab72-1281df7759dc.png)

The "Show information window" toggle is visible and enabled.

![image](https://user-images.githubusercontent.com/6038/219519115-8b9b5539-82f5-4eb9-b667-4b283e6f39d8.png)
---
 .../components/flame_graphs_view/index.tsx    | 295 ++++++++++--------
 1 file changed, 167 insertions(+), 128 deletions(-)

diff --git a/x-pack/plugins/profiling/public/components/flame_graphs_view/index.tsx b/x-pack/plugins/profiling/public/components/flame_graphs_view/index.tsx
index 3f418227fdc3f..7d249c533f3af 100644
--- a/x-pack/plugins/profiling/public/components/flame_graphs_view/index.tsx
+++ b/x-pack/plugins/profiling/public/components/flame_graphs_view/index.tsx
@@ -27,10 +27,45 @@ import { AsyncComponent } from '../async_component';
 import { useProfilingDependencies } from '../contexts/profiling_dependencies/use_profiling_dependencies';
 import { FlameGraph } from '../flamegraph';
 import { PrimaryAndComparisonSearchBar } from '../primary_and_comparison_search_bar';
+import { PrimaryProfilingSearchBar } from '../profiling_app_page_template/primary_profiling_search_bar';
 import { ProfilingAppPageTemplate } from '../profiling_app_page_template';
 import { RedirectTo } from '../redirect_to';
 import { FlameGraphNormalizationOptions, NormalizationMenu } from './normalization_menu';
 
+export function FlameGraphInformationWindowSwitch({
+  showInformationWindow,
+  onChange,
+}: {
+  showInformationWindow: boolean;
+  onChange: () => void;
+}) {
+  return (
+    <EuiSwitch
+      checked={showInformationWindow}
+      onChange={onChange}
+      label={i18n.translate('xpack.profiling.flameGraph.showInformationWindow', {
+        defaultMessage: 'Show information window',
+      })}
+    />
+  );
+}
+
+export function FlameGraphSearchPanel({
+  children,
+  searchBar,
+}: {
+  children: React.ReactNode;
+  searchBar: JSX.Element;
+}) {
+  return (
+    <EuiPanel hasShadow={false} color="subdued">
+      {searchBar}
+      <EuiHorizontalRule />
+      <EuiFlexGroup direction="row">{children}</EuiFlexGroup>
+    </EuiPanel>
+  );
+}
+
 export function FlameGraphsView({ children }: { children: React.ReactElement }) {
   const {
     path,
@@ -132,136 +167,140 @@ export function FlameGraphsView({ children }: { children: React.ReactElement })
     return <RedirectTo pathname="/flamegraphs/flamegraph" />;
   }
 
+  const searchBar = isDifferentialView ? (
+    <PrimaryAndComparisonSearchBar />
+  ) : (
+    <PrimaryProfilingSearchBar />
+  );
+
+  const differentialComparisonMode = (
+    <EuiFlexItem grow={false}>
+      <EuiFlexGroup direction="row" gutterSize="m" alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiTitle size="xxs">
+            <h3>
+              {i18n.translate(
+                'xpack.profiling.flameGraphsView.differentialFlameGraphComparisonModeTitle',
+                { defaultMessage: 'Format' }
+              )}
+            </h3>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonGroup
+            legend={i18n.translate(
+              'xpack.profiling.flameGraphsView.differentialFlameGraphComparisonModeLegend',
+              {
+                defaultMessage:
+                  'This switch allows you to switch between an absolute and relative comparison between both graphs',
+              }
+            )}
+            type="single"
+            buttonSize="s"
+            idSelected={comparisonMode}
+            onChange={(nextComparisonMode) => {
+              if (!('comparisonRangeFrom' in query)) {
+                return;
+              }
+
+              profilingRouter.push(routePath, {
+                path,
+                query: {
+                  ...query,
+                  ...(nextComparisonMode === FlameGraphComparisonMode.Absolute
+                    ? {
+                        comparisonMode: FlameGraphComparisonMode.Absolute,
+                        normalizationMode: FlameGraphNormalizationMode.Time,
+                      }
+                    : { comparisonMode: FlameGraphComparisonMode.Relative }),
+                },
+              });
+            }}
+            options={[
+              {
+                id: FlameGraphComparisonMode.Absolute,
+                label: i18n.translate(
+                  'xpack.profiling.flameGraphsView.differentialFlameGraphComparisonModeAbsoluteButtonLabel',
+                  {
+                    defaultMessage: 'Abs',
+                  }
+                ),
+              },
+              {
+                id: FlameGraphComparisonMode.Relative,
+                label: i18n.translate(
+                  'xpack.profiling.flameGraphsView.differentialFlameGraphComparisonModeRelativeButtonLabel',
+                  {
+                    defaultMessage: 'Rel',
+                  }
+                ),
+              },
+            ]}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlexItem>
+  );
+
+  const differentialComparisonNormalization = (
+    <EuiFlexItem grow={false}>
+      <EuiFlexGroup direction="row" gutterSize="m" alignItems="center">
+        <EuiFlexItem grow={false}>
+          <NormalizationMenu
+            onChange={(options) => {
+              profilingRouter.push(routePath, {
+                path: routePath,
+                query: {
+                  ...query,
+                  ...pick(options, 'baseline', 'comparison'),
+                  normalizationMode: options.mode,
+                },
+              });
+            }}
+            totalSeconds={
+              (new Date(timeRange.end).getTime() - new Date(timeRange.start).getTime()) / 1000
+            }
+            comparisonTotalSeconds={
+              (new Date(comparisonTimeRange.end!).getTime() -
+                new Date(comparisonTimeRange.start!).getTime()) /
+              1000
+            }
+            options={
+              (normalizationMode === FlameGraphNormalizationMode.Time
+                ? { mode: FlameGraphNormalizationMode.Time }
+                : {
+                    mode: FlameGraphNormalizationMode.Scale,
+                    baseline,
+                    comparison,
+                  }) as FlameGraphNormalizationOptions
+            }
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlexItem>
+  );
+
+  const informationWindowSwitch = (
+    <EuiFlexItem grow style={{ alignItems: 'flex-end' }}>
+      <FlameGraphInformationWindowSwitch
+        showInformationWindow={showInformationWindow}
+        onChange={() => setShowInformationWindow((prev) => !prev)}
+      />
+    </EuiFlexItem>
+  );
+
   return (
-    <ProfilingAppPageTemplate tabs={tabs} hideSearchBar={isDifferentialView}>
+    <ProfilingAppPageTemplate tabs={tabs} hideSearchBar={true}>
       <EuiFlexGroup direction="column">
-        {isDifferentialView ? (
-          <EuiFlexItem grow={false}>
-            <EuiPanel hasShadow={false} color="subdued">
-              <PrimaryAndComparisonSearchBar />
-              <EuiHorizontalRule />
-              <EuiFlexGroup direction="row">
-                <EuiFlexItem grow={false}>
-                  <EuiFlexGroup direction="row" gutterSize="m" alignItems="center">
-                    <EuiFlexItem grow={false}>
-                      <EuiTitle size="xxs">
-                        <h3>
-                          {i18n.translate(
-                            'xpack.profiling.flameGraphsView.differentialFlameGraphComparisonModeTitle',
-                            { defaultMessage: 'Format' }
-                          )}
-                        </h3>
-                      </EuiTitle>
-                    </EuiFlexItem>
-                    <EuiFlexItem grow={false}>
-                      <EuiButtonGroup
-                        legend={i18n.translate(
-                          'xpack.profiling.flameGraphsView.differentialFlameGraphComparisonModeLegend',
-                          {
-                            defaultMessage:
-                              'This switch allows you to switch between an absolute and relative comparison between both graphs',
-                          }
-                        )}
-                        type="single"
-                        buttonSize="s"
-                        idSelected={comparisonMode}
-                        onChange={(nextComparisonMode) => {
-                          if (!('comparisonRangeFrom' in query)) {
-                            return;
-                          }
-
-                          profilingRouter.push(routePath, {
-                            path,
-                            query: {
-                              ...query,
-                              ...(nextComparisonMode === FlameGraphComparisonMode.Absolute
-                                ? {
-                                    comparisonMode: FlameGraphComparisonMode.Absolute,
-                                    normalizationMode: FlameGraphNormalizationMode.Time,
-                                  }
-                                : { comparisonMode: FlameGraphComparisonMode.Relative }),
-                            },
-                          });
-                        }}
-                        options={[
-                          {
-                            id: FlameGraphComparisonMode.Absolute,
-                            label: i18n.translate(
-                              'xpack.profiling.flameGraphsView.differentialFlameGraphComparisonModeAbsoluteButtonLabel',
-                              {
-                                defaultMessage: 'Abs',
-                              }
-                            ),
-                          },
-                          {
-                            id: FlameGraphComparisonMode.Relative,
-                            label: i18n.translate(
-                              'xpack.profiling.flameGraphsView.differentialFlameGraphComparisonModeRelativeButtonLabel',
-                              {
-                                defaultMessage: 'Rel',
-                              }
-                            ),
-                          },
-                        ]}
-                      />
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
-                </EuiFlexItem>
-                {comparisonMode === FlameGraphComparisonMode.Absolute ? (
-                  <EuiFlexItem grow={false}>
-                    <EuiFlexGroup direction="row" gutterSize="m" alignItems="center">
-                      <EuiFlexItem grow={false}>
-                        <NormalizationMenu
-                          onChange={(options) => {
-                            profilingRouter.push(routePath, {
-                              path: routePath,
-                              // @ts-expect-error Code gets too complicated to satisfy TS constraints
-                              query: {
-                                ...query,
-                                ...pick(options, 'baseline', 'comparison'),
-                                normalizationMode: options.mode,
-                              },
-                            });
-                          }}
-                          totalSeconds={
-                            (new Date(timeRange.end).getTime() -
-                              new Date(timeRange.start).getTime()) /
-                            1000
-                          }
-                          comparisonTotalSeconds={
-                            (new Date(comparisonTimeRange.end!).getTime() -
-                              new Date(comparisonTimeRange.start!).getTime()) /
-                            1000
-                          }
-                          options={
-                            (normalizationMode === FlameGraphNormalizationMode.Time
-                              ? { mode: FlameGraphNormalizationMode.Time }
-                              : {
-                                  mode: FlameGraphNormalizationMode.Scale,
-                                  baseline,
-                                  comparison,
-                                }) as FlameGraphNormalizationOptions
-                          }
-                        />
-                      </EuiFlexItem>
-                    </EuiFlexGroup>
-                  </EuiFlexItem>
-                ) : undefined}
-                <EuiFlexItem grow style={{ alignItems: 'flex-end' }}>
-                  <EuiSwitch
-                    checked={showInformationWindow}
-                    onChange={() => {
-                      setShowInformationWindow((prev) => !prev);
-                    }}
-                    label={i18n.translate('xpack.profiling.flameGraph.showInformationWindow', {
-                      defaultMessage: 'Show information window',
-                    })}
-                  />
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiPanel>
-          </EuiFlexItem>
-        ) : null}
+        <EuiFlexItem grow={false}>
+          <FlameGraphSearchPanel searchBar={searchBar}>
+            {isDifferentialView && differentialComparisonMode}
+            {isDifferentialView &&
+              comparisonMode === FlameGraphComparisonMode.Absolute &&
+              differentialComparisonNormalization}
+            {informationWindowSwitch}
+          </FlameGraphSearchPanel>
+        </EuiFlexItem>
         <EuiFlexItem>
           <AsyncComponent {...state} style={{ height: '100%' }} size="xl">
             <FlameGraph