[8.12] [Profiling] Adding breadcrumbs (elastic#173031) (elastic#173040)

# Backport This will backport the following commits from `main` to `8.12`: - [[Profiling] Adding breadcrumbs (elastic#173031)](elastic#173031)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Cauê Marcondes <[email protected]>
kibanamachine · Dec 11, 2023 · fc6fc4d · fc6fc4d
1 parent 1661328
commit fc6fc4d
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 103 deletions.
diff --git a/x-pack/plugins/profiling/public/routing/index.tsx b/x-pack/plugins/profiling/public/routing/index.tsx
@@ -37,18 +37,6 @@ import { StorageExplorerView } from '../views/storage_explorer';
 import { RouteBreadcrumb } from './route_breadcrumb';
 
 const routes = {
-  '/settings': {
-    element: (
-      <RouteBreadcrumb
-        title={i18n.translate('xpack.profiling.breadcrumb.settings', {
-          defaultMessage: 'Settings',
-        })}
-        href="/settings"
-      >
-        <Settings />
-      </RouteBreadcrumb>
-    ),
-  },
   '/': {
     element: (
       <RouteBreadcrumb
@@ -61,8 +49,29 @@ const routes = {
       </RouteBreadcrumb>
     ),
     children: {
+      '/settings': {
+        element: (
+          <RouteBreadcrumb
+            title={i18n.translate('xpack.profiling.breadcrumb.settings', {
+              defaultMessage: 'Settings',
+            })}
+            href="/settings"
+          >
+            <Settings />
+          </RouteBreadcrumb>
+        ),
+      },
       '/add-data-instructions': {
-        element: <AddDataView />,
+        element: (
+          <RouteBreadcrumb
+            title={i18n.translate('xpack.profiling.breadcrumb.addDataView', {
+              defaultMessage: 'Add profiling data',
+            })}
+            href="/add-data-instructions"
+          >
+            <AddDataView />
+          </RouteBreadcrumb>
+        ),
         params: t.type({
           query: t.type({
             selectedTab: t.union([

diff --git a/x-pack/plugins/profiling/public/views/stack_traces_view/get_stack_traces_tabs.ts b/x-pack/plugins/profiling/public/views/stack_traces_view/get_stack_traces_tabs.ts
@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import { EuiPageHeaderContentProps } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { TypeOf } from '@kbn/typed-react-router-config';
 import { TopNType } from '@kbn/profiling-utils';
@@ -18,7 +17,7 @@ export function getStackTracesTabs({
   profilingRouter,
 }: TypeOf<ProfilingRoutes, '/stacktraces/{topNType}'> & {
   profilingRouter: StatefulProfilingRouter;
-}): Required<EuiPageHeaderContentProps>['tabs'] {
+}) {
   return [
     {
       label: i18n.translate('xpack.profiling.stackTracesView.threadsTabLabel', {

diff --git a/x-pack/plugins/profiling/public/views/stack_traces_view/index.tsx b/x-pack/plugins/profiling/public/views/stack_traces_view/index.tsx
@@ -21,6 +21,7 @@ import { ProfilingAppPageTemplate } from '../../components/profiling_app_page_te
 import { StackedBarChart } from '../../components/stacked_bar_chart';
 import { getStackTracesTabs } from './get_stack_traces_tabs';
 import { getTracesViewRouteParams } from './utils';
+import { RouteBreadcrumb } from '../../routing/route_breadcrumb';
 
 export function StackTracesView() {
   const routePath = useProfilingRoutePath();
@@ -41,6 +42,7 @@ export function StackTracesView() {
     query,
     profilingRouter,
   });
+  const selectedTab = tabs.find((tab) => tab.isSelected);
 
   const {
     services: { fetchTopN },
@@ -89,102 +91,104 @@ export function StackTracesView() {
   }
 
   return (
-    <ProfilingAppPageTemplate tabs={tabs}>
-      <EuiFlexGroup direction="column">
-        <EuiFlexItem grow>
-          <EuiPanel>
-            <EuiFlexGroup direction="column" gutterSize="m">
-              <EuiFlexItem>
-                <EuiButtonGroup
-                  idSelected={displayAs}
-                  type="single"
-                  onChange={(nextValue) => {
-                    profilingRouter.push(routePath, {
-                      path,
-                      query: {
-                        ...query,
-                        displayAs: nextValue,
-                      },
-                    });
-                  }}
-                  options={[
-                    {
-                      id: StackTracesDisplayOption.StackTraces,
-                      iconType: 'visLine',
-                      label: i18n.translate(
-                        'xpack.profiling.stackTracesView.stackTracesCountButton',
-                        {
-                          defaultMessage: 'Stack traces',
-                        }
-                      ),
-                    },
-                    {
-                      id: StackTracesDisplayOption.Percentage,
-                      iconType: 'percent',
-                      label: i18n.translate('xpack.profiling.stackTracesView.percentagesButton', {
-                        defaultMessage: 'Percentages',
-                      }),
-                    },
-                  ]}
-                  legend={i18n.translate('xpack.profiling.stackTracesView.displayOptionLegend', {
-                    defaultMessage: 'Display option',
-                  })}
-                />
-              </EuiFlexItem>
-              <EuiFlexItem style={{ alignContent: 'center' }}>
-                <AsyncComponent size="xl" {...state} style={{ height: 400 }}>
-                  <StackedBarChart
-                    height={400}
-                    charts={data?.charts ?? []}
-                    asPercentages={displayAs === StackTracesDisplayOption.Percentage}
-                    onBrushEnd={(nextRange) => {
+    <RouteBreadcrumb title={selectedTab?.label || ''} href={selectedTab?.href || ''}>
+      <ProfilingAppPageTemplate tabs={tabs}>
+        <EuiFlexGroup direction="column">
+          <EuiFlexItem grow>
+            <EuiPanel>
+              <EuiFlexGroup direction="column" gutterSize="m">
+                <EuiFlexItem>
+                  <EuiButtonGroup
+                    idSelected={displayAs}
+                    type="single"
+                    onChange={(nextValue) => {
                       profilingRouter.push(routePath, {
                         path,
                         query: {
                           ...query,
-                          rangeFrom: nextRange.rangeFrom,
-                          rangeTo: nextRange.rangeTo,
+                          displayAs: nextValue,
                         },
                       });
                     }}
-                    showFrames={topNType === TopNType.Traces}
-                    onClick={topNType === TopNType.Threads ? onStackedBarClick : undefined}
+                    options={[
+                      {
+                        id: StackTracesDisplayOption.StackTraces,
+                        iconType: 'visLine',
+                        label: i18n.translate(
+                          'xpack.profiling.stackTracesView.stackTracesCountButton',
+                          {
+                            defaultMessage: 'Stack traces',
+                          }
+                        ),
+                      },
+                      {
+                        id: StackTracesDisplayOption.Percentage,
+                        iconType: 'percent',
+                        label: i18n.translate('xpack.profiling.stackTracesView.percentagesButton', {
+                          defaultMessage: 'Percentages',
+                        }),
+                      },
+                    ]}
+                    legend={i18n.translate('xpack.profiling.stackTracesView.displayOptionLegend', {
+                      defaultMessage: 'Display option',
+                    })}
                   />
-                </AsyncComponent>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiPanel>
-        </EuiFlexItem>
-        <EuiFlexItem grow>
-          <AsyncComponent size="m" mono {...state} style={{ minHeight: 200 }}>
-            <ChartGrid
-              charts={data?.charts ?? []}
-              limit={limit}
-              showFrames={topNType === TopNType.Traces}
-            />
-          </AsyncComponent>
-        </EuiFlexItem>
-        {(data?.charts.length ?? 0) > limit && (
-          <EuiFlexItem>
-            <EuiButton
-              data-test-subj="profilingStackTracesViewShowMoreButton"
-              onClick={() => {
-                profilingRouter.push(routePath, {
-                  path,
-                  query: {
-                    ...query,
-                    limit: limit + 10,
-                  },
-                });
-              }}
-            >
-              {i18n.translate('xpack.profiling.stackTracesView.showMoreButton', {
-                defaultMessage: 'Show more',
-              })}
-            </EuiButton>
+                </EuiFlexItem>
+                <EuiFlexItem style={{ alignContent: 'center' }}>
+                  <AsyncComponent size="xl" {...state} style={{ height: 400 }}>
+                    <StackedBarChart
+                      height={400}
+                      charts={data?.charts ?? []}
+                      asPercentages={displayAs === StackTracesDisplayOption.Percentage}
+                      onBrushEnd={(nextRange) => {
+                        profilingRouter.push(routePath, {
+                          path,
+                          query: {
+                            ...query,
+                            rangeFrom: nextRange.rangeFrom,
+                            rangeTo: nextRange.rangeTo,
+                          },
+                        });
+                      }}
+                      showFrames={topNType === TopNType.Traces}
+                      onClick={topNType === TopNType.Threads ? onStackedBarClick : undefined}
+                    />
+                  </AsyncComponent>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiPanel>
+          </EuiFlexItem>
+          <EuiFlexItem grow>
+            <AsyncComponent size="m" mono {...state} style={{ minHeight: 200 }}>
+              <ChartGrid
+                charts={data?.charts ?? []}
+                limit={limit}
+                showFrames={topNType === TopNType.Traces}
+              />
+            </AsyncComponent>
           </EuiFlexItem>
-        )}
-      </EuiFlexGroup>
-    </ProfilingAppPageTemplate>
+          {(data?.charts.length ?? 0) > limit && (
+            <EuiFlexItem>
+              <EuiButton
+                data-test-subj="profilingStackTracesViewShowMoreButton"
+                onClick={() => {
+                  profilingRouter.push(routePath, {
+                    path,
+                    query: {
+                      ...query,
+                      limit: limit + 10,
+                    },
+                  });
+                }}
+              >
+                {i18n.translate('xpack.profiling.stackTracesView.showMoreButton', {
+                  defaultMessage: 'Show more',
+                })}
+              </EuiButton>
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+      </ProfilingAppPageTemplate>
+    </RouteBreadcrumb>
   );
 }