[Profiling] Organizing UI code structure (#159010)

This PR organizes the UI code by grouping components of the same type
together.

Changes:
- `public/components/*views` -> `public/views/`
- `public/components/shared/*` -> `public/components/`
- Update imports.

All pages we have defined inside the `routes` should be placed in the
`Views` directory. And the views will reuse components created inside
`components` directory.

x-pack/plugins/profiling/public/components/check_setup.tsx

@@ -21,9 +21,9 @@ import { AsyncStatus, useAsync } from '../hooks/use_async';
 import { useAutoAbortedHttpClient } from '../hooks/use_auto_aborted_http_client';
 import { useLicenseContext } from './contexts/license/use_license_context';
 import { useProfilingDependencies } from './contexts/profiling_dependencies/use_profiling_dependencies';
-import { NoDataPage } from './no_data_page';
+import { NoDataView } from '../views/no_data_view';
 import { ProfilingAppPageTemplate } from './profiling_app_page_template';
-import { LicensePrompt } from './shared/license_prompt';
+import { LicensePrompt } from './license_prompt';
 
 export function CheckSetup({ children }: { children: React.ReactElement }) {
   const {
@@ -88,7 +88,7 @@ export function CheckSetup({ children }: { children: React.ReactElement }) {
 
   if (displayNoDataScreen) {
     return (
-      <NoDataPage
+      <NoDataView
         subTitle={i18n.translate('xpack.profiling.noDataPage.introduction', {
           defaultMessage: `You're almost there! Follow the instructions below to add data.`,
         })}

x-pack/plugins/profiling/public/components/contexts/license/license_context.tsx

@@ -9,7 +9,7 @@ import { ILicense } from '@kbn/licensing-plugin/public';
 import React from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import { ProfilingAppPageTemplate } from '../../profiling_app_page_template';
-import { LicensePrompt } from '../../shared/license_prompt';
+import { LicensePrompt } from '../../license_prompt';
 import { useProfilingDependencies } from '../profiling_dependencies/use_profiling_dependencies';
 
 export const LicenseContext = React.createContext<ILicense | undefined>(undefined);

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

@@ -22,7 +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 { CPULabelWithHint } from '../cpu_label_with_hint';
 import { TooltipRow } from './tooltip_row';
 
 interface Props {

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

@@ -11,7 +11,7 @@ import { Maybe } from '@kbn/observability-plugin/common/typings';
 import React, { useEffect, useMemo, useState } from 'react';
 import { ElasticFlameGraph, FlameGraphComparisonMode } from '../../../common/flamegraph';
 import { getFlamegraphModel } from '../../utils/get_flamegraph_model';
-import { FlameGraphLegend } from '../flame_graphs_view/flame_graph_legend';
+import { FlameGraphLegend } from './flame_graph_legend';
 import { FrameInformationWindow } from '../frame_information_window';
 import { FrameInformationTooltip } from '../frame_information_window/frame_information_tooltip';
 import { FlameGraphTooltip } from './flamegraph_tooltip';

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

@@ -13,7 +13,7 @@ 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';
+import { CPULabelWithHint } from '../cpu_label_with_hint';
 
 export function getImpactRows({
   countInclusive,

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

@@ -8,7 +8,7 @@ import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import url from 'url';
-import { useProfilingDependencies } from '../../contexts/profiling_dependencies/use_profiling_dependencies';
+import { useProfilingDependencies } from '../contexts/profiling_dependencies/use_profiling_dependencies';
 
 const KIBANA_LICENSE_MANAGEMENT_URL = '/app/management/stack/license_management';
 

x-pack/plugins/profiling/public/components/subchart.tsx

@@ -40,7 +40,7 @@ import { useProfilingRouter } from '../hooks/use_profiling_router';
 import { asNumber } from '../utils/formatters/as_number';
 import { asPercentage } from '../utils/formatters/as_percentage';
 import { StackFrameSummary } from './stack_frame_summary';
-import { getTracesViewRouteParams } from './stack_traces_view/utils';
+import { getTracesViewRouteParams } from '../views/stack_traces_view/utils';
 
 export interface SubChartProps {
   index: number;

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

@@ -26,7 +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 { CPULabelWithHint } from '../cpu_label_with_hint';
 import { StackFrameSummary } from '../stack_frame_summary';
 import { GetLabel } from './get_label';
 

x-pack/plugins/profiling/public/routing/index.tsx

@@ -9,15 +9,15 @@ import { toNumberRt } from '@kbn/io-ts-utils';
 import { createRouter, Outlet } from '@kbn/typed-react-router-config';
 import * as t from 'io-ts';
 import React from 'react';
+import { FlameGraphComparisonMode, FlameGraphNormalizationMode } from '../../common/flamegraph';
 import { TopNFunctionSortField, topNFunctionSortFieldRt } from '../../common/functions';
 import { StackTracesDisplayOption, TopNType } from '../../common/stack_traces';
-import { FlameGraphComparisonMode, FlameGraphNormalizationMode } from '../../common/flamegraph';
-import { FlameGraphsView } from '../components/flame_graphs_view';
-import { FunctionsView } from '../components/functions_view';
 import { RedirectTo } from '../components/redirect_to';
-import { RouteBreadcrumb } from '../components/route_breadcrumb';
-import { StackTracesView } from '../components/stack_traces_view';
-import { NoDataPage } from '../components/no_data_page';
+import { FlameGraphsView } from '../views/flame_graphs_view';
+import { FunctionsView } from '../views/functions_view';
+import { NoDataView } from '../views/no_data_view';
+import { StackTracesView } from '../views/stack_traces_view';
+import { RouteBreadcrumb } from './route_breadcrumb';
 
 const routes = {
   '/': {
@@ -34,7 +34,7 @@ const routes = {
     children: {
       '/add-data-instructions': {
         element: (
-          <NoDataPage
+          <NoDataView
             subTitle={i18n.translate('xpack.profiling.addDataTitle', {
               defaultMessage: 'Select an option below to deploy the host-agent.',
             })}

x-pack/plugins/profiling/public/components/route_breadcrumb.tsx → x-pack/plugins/profiling/public/routing/route_breadcrumb.tsx

@@ -5,8 +5,8 @@
  * 2.0.
  */
 import React from 'react';
-import { useProfilingDependencies } from './contexts/profiling_dependencies/use_profiling_dependencies';
-import { useRouteBreadcrumb } from './contexts/route_breadcrumbs_context/use_route_breadcrumb';
+import { useProfilingDependencies } from '../components/contexts/profiling_dependencies/use_profiling_dependencies';
+import { useRouteBreadcrumb } from '../components/contexts/route_breadcrumbs_context/use_route_breadcrumb';
 
 export const RouteBreadcrumb = ({
   title,

x-pack/plugins/profiling/public/components/flame_graphs_view/flame_graph_search_panel.tsx → x-pack/plugins/profiling/public/views/flame_graphs_view/flame_graph_search_panel.tsx

@@ -10,8 +10,8 @@ import { FlameGraphComparisonMode, FlameGraphNormalizationMode } from '../../../
 import { useProfilingParams } from '../../hooks/use_profiling_params';
 import { useProfilingRouter } from '../../hooks/use_profiling_router';
 import { useProfilingRoutePath } from '../../hooks/use_profiling_route_path';
-import { PrimaryAndComparisonSearchBar } from '../primary_and_comparison_search_bar';
-import { PrimaryProfilingSearchBar } from '../profiling_app_page_template/primary_profiling_search_bar';
+import { PrimaryAndComparisonSearchBar } from '../../components/primary_and_comparison_search_bar';
+import { PrimaryProfilingSearchBar } from '../../components/profiling_app_page_template/primary_profiling_search_bar';
 import { DifferentialComparisonMode } from './differential_comparison_mode';
 import { FlameGraphNormalizationOptions, NormalizationMenu } from './normalization_menu';
 

x-pack/plugins/profiling/public/components/flame_graphs_view/index.tsx → x-pack/plugins/profiling/public/views/flame_graphs_view/index.tsx

@@ -14,11 +14,11 @@ import { useProfilingRouter } from '../../hooks/use_profiling_router';
 import { useProfilingRoutePath } from '../../hooks/use_profiling_route_path';
 import { useTimeRange } from '../../hooks/use_time_range';
 import { useTimeRangeAsync } from '../../hooks/use_time_range_async';
-import { AsyncComponent } from '../async_component';
-import { useProfilingDependencies } from '../contexts/profiling_dependencies/use_profiling_dependencies';
-import { FlameGraph } from '../flamegraph';
-import { ProfilingAppPageTemplate } from '../profiling_app_page_template';
-import { RedirectTo } from '../redirect_to';
+import { AsyncComponent } from '../../components/async_component';
+import { useProfilingDependencies } from '../../components/contexts/profiling_dependencies/use_profiling_dependencies';
+import { FlameGraph } from '../../components/flamegraph';
+import { ProfilingAppPageTemplate } from '../../components/profiling_app_page_template';
+import { RedirectTo } from '../../components/redirect_to';
 import { FlameGraphSearchPanel } from './flame_graph_search_panel';
 import { FlameGraphNormalizationOptions } from './normalization_menu';
 

x-pack/plugins/profiling/public/components/functions_view/index.tsx → x-pack/plugins/profiling/public/views/functions_view/index.tsx

@@ -14,12 +14,12 @@ import { useProfilingRoutePath } from '../../hooks/use_profiling_route_path';
 import { useTimeRange } from '../../hooks/use_time_range';
 import { useTimeRangeAsync } from '../../hooks/use_time_range_async';
 import { ProfilingRoutes } from '../../routing';
-import { AsyncComponent } from '../async_component';
-import { useProfilingDependencies } from '../contexts/profiling_dependencies/use_profiling_dependencies';
-import { PrimaryAndComparisonSearchBar } from '../primary_and_comparison_search_bar';
-import { ProfilingAppPageTemplate } from '../profiling_app_page_template';
-import { RedirectTo } from '../redirect_to';
-import { TopNFunctionsTable } from '../topn_functions';
+import { AsyncComponent } from '../../components/async_component';
+import { useProfilingDependencies } from '../../components/contexts/profiling_dependencies/use_profiling_dependencies';
+import { PrimaryAndComparisonSearchBar } from '../../components/primary_and_comparison_search_bar';
+import { ProfilingAppPageTemplate } from '../../components/profiling_app_page_template';
+import { RedirectTo } from '../../components/redirect_to';
+import { TopNFunctionsTable } from '../../components/topn_functions';
 
 export function FunctionsView({ children }: { children: React.ReactElement }) {
   const {

x-pack/plugins/profiling/public/components/no_data_page.tsx → x-pack/plugins/profiling/public/views/no_data_view/index.tsx

@@ -24,11 +24,11 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import React, { useState } from 'react';
-import { AsyncStatus, useAsync } from '../hooks/use_async';
-import { useProfilingDependencies } from './contexts/profiling_dependencies/use_profiling_dependencies';
-import { ProfilingAppPageTemplate } from './profiling_app_page_template';
+import { AsyncStatus, useAsync } from '../../hooks/use_async';
+import { useProfilingDependencies } from '../../components/contexts/profiling_dependencies/use_profiling_dependencies';
+import { ProfilingAppPageTemplate } from '../../components/profiling_app_page_template';
 
-export function NoDataPage({ subTitle }: { subTitle: string }) {
+export function NoDataView({ subTitle }: { subTitle: string }) {
   const {
     services: { setupDataCollectionInstructions },
     start: { core },

x-pack/plugins/profiling/public/components/stack_traces_view/index.tsx → x-pack/plugins/profiling/public/views/stack_traces_view/index.tsx

@@ -14,11 +14,11 @@ import { useProfilingRouter } from '../../hooks/use_profiling_router';
 import { useProfilingRoutePath } from '../../hooks/use_profiling_route_path';
 import { useTimeRange } from '../../hooks/use_time_range';
 import { useTimeRangeAsync } from '../../hooks/use_time_range_async';
-import { AsyncComponent } from '../async_component';
-import { ChartGrid } from '../chart_grid';
-import { useProfilingDependencies } from '../contexts/profiling_dependencies/use_profiling_dependencies';
-import { ProfilingAppPageTemplate } from '../profiling_app_page_template';
-import { StackedBarChart } from '../stacked_bar_chart';
+import { AsyncComponent } from '../../components/async_component';
+import { ChartGrid } from '../../components/chart_grid';
+import { useProfilingDependencies } from '../../components/contexts/profiling_dependencies/use_profiling_dependencies';
+import { ProfilingAppPageTemplate } from '../../components/profiling_app_page_template';
+import { StackedBarChart } from '../../components/stacked_bar_chart';
 import { getStackTracesTabs } from './get_stack_traces_tabs';
 import { getTracesViewRouteParams } from './utils';