Conform Search Profiler application organization to other ES UI plugins

x-pack/plugins/searchprofiler/README.md

@@ -5,4 +5,30 @@
 The search profiler consumes the [Profile API](https://www.elastic.co/guide/en/elasticsearch/reference/current/search-profile.html)
 by sending a `search` API with `profile: true` enabled in the request body. The response contains
 detailed information on how Elasticsearch executed the search request. People use this information
-to understand why a search request might be slow.
+to understand why a search request might be slow.
+
+## How to test
+
+### Query profile
+
+Execute the default query to generate results in the Query profile tab.
+
+```json
+{
+  "query":{
+    "match_all" : {}
+  }
+}
+```
+
+### Aggregation profile
+
+Execute an aggregation query to generate results in the Aggregation profile tab.
+
+```json
+{
+  "aggs": {
+    "avg_grade": { "avg": { "field": "grade" } }
+  }
+}
+```

x-pack/plugins/searchprofiler/public/application/containers/main/main.tsx → x-pack/plugins/searchprofiler/public/application/app.tsx

@@ -16,24 +16,22 @@ import {
   EuiFlexItem,
   EuiSpacer,
 } from '@elastic/eui';
-import { ProfileQueryEditor } from '../';
 
 import {
   SearchProfilerTabs,
   ProfileTree,
   HighlightDetailsFlyout,
   LicenseWarningNotice,
-} from '../../components';
+  ProfileLoadingPlaceholder,
+  EmptyTreePlaceHolder,
+  ProfileQueryEditor,
+} from './components';
 
-import { useAppContext } from '../../contexts/app_context';
+import { useAppContext, useProfilerActionContext, useProfilerReadContext } from './contexts';
+import { hasAggregations, hasSearch } from './utils';
+import { Targets } from './types';
 
-import { EmptyTreePlaceHolder, ProfileLoadingPlaceholder } from './components';
-import { Targets } from '../../types';
-import { useProfilerActionContext, useProfilerReadContext } from '../../contexts/profiler_context';
-
-import { hasAggregations, hasSearch } from '../../utils';
-
-export const Main = () => {
+export const App = () => {
   const { getLicenseStatus, notifications } = useAppContext();
 
   const {

x-pack/plugins/searchprofiler/public/application/containers/main/components/empty_tree_placeholder.test.tsx → x-pack/plugins/searchprofiler/public/application/components/empty_tree_placeholder/empty_tree_placeholder.test.tsx

@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { registerTestBed } from '../../../../../../../test_utils';
+import { registerTestBed } from '../../../../../../test_utils';
 import { EmptyTreePlaceHolder } from '.';
 
 describe('EmptyTreePlaceholder', () => {

x-pack/plugins/searchprofiler/public/application/containers/main/index.ts → x-pack/plugins/searchprofiler/public/application/components/empty_tree_placeholder/index.ts

@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { Main } from './main';
+export { EmptyTreePlaceHolder } from './empty_tree_placeholder';

x-pack/plugins/searchprofiler/public/application/components/index.ts

@@ -8,3 +8,6 @@ export { SearchProfilerTabs } from './searchprofiler_tabs';
 export { LicenseWarningNotice } from './license_warning_notice';
 export { ProfileTree, OnHighlightChangeArgs } from './profile_tree';
 export { HighlightDetailsFlyout } from './highlight_details_flyout';
+export { ProfileLoadingPlaceholder } from './profile_loading_placeholder';
+export { EmptyTreePlaceHolder } from './empty_tree_placeholder';
+export { ProfileQueryEditor } from './profile_query_editor';

x-pack/plugins/searchprofiler/public/application/containers/main/components/index.ts → x-pack/plugins/searchprofiler/public/application/components/profile_loading_placeholder/index.ts

@@ -4,5 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { EmptyTreePlaceHolder } from './empty_tree_placeholder';
 export { ProfileLoadingPlaceholder } from './profile_loading_placeholder';

x-pack/plugins/searchprofiler/public/application/containers/main/components/profile_loading_placeholder.test.tsx → x-pack/plugins/searchprofiler/public/application/components/profile_loading_placeholder/profile_loading_placeholder.test.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { registerTestBed } from '../../../../../../../test_utils';
+import { registerTestBed } from '../../../../../../test_utils';
 import { ProfileLoadingPlaceholder } from '.';
 
 describe('Profile Loading Placeholder', () => {

x-pack/plugins/searchprofiler/public/application/containers/index.ts → x-pack/plugins/searchprofiler/public/application/contexts/index.ts

@@ -4,5 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { Main } from './main';
-export { ProfileQueryEditor } from './profile_query_editor';
+export { useAppContext } from './app_context';
+export { useProfilerActionContext, useProfilerReadContext } from './profiler_context';

x-pack/plugins/searchprofiler/public/application/index.tsx

@@ -3,21 +3,41 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+
 import React from 'react';
-import { Main } from './containers';
+import { render, unmountComponentAtNode } from 'react-dom';
+import { HttpStart as Http, ToastsSetup } from 'kibana/public';
+
+import { LicenseStatus } from '../../common';
+import { App } from './app';
 import { AppContextProvider } from './contexts/app_context';
 import { ProfileContextProvider } from './contexts/profiler_context';
 
-import { AppDependencies } from './boot';
+interface AppDependencies {
+  el: HTMLElement;
+  http: Http;
+  I18nContext: any;
+  notifications: ToastsSetup;
+  initialLicenseStatus: LicenseStatus;
+}
 
-export function App({ I18nContext, initialLicenseStatus, notifications, http }: AppDependencies) {
-  return (
+export const renderApp = ({
+  el,
+  http,
+  I18nContext,
+  notifications,
+  initialLicenseStatus,
+}: AppDependencies) => {
+  render(
     <I18nContext>
       <AppContextProvider args={{ initialLicenseStatus, notifications, http }}>
         <ProfileContextProvider>
-          <Main />
+          <App />
         </ProfileContextProvider>
       </AppContextProvider>
-    </I18nContext>
+    </I18nContext>,
+    el
   );
-}
+
+  return () => unmountComponentAtNode(el);
+};

x-pack/plugins/searchprofiler/public/plugin.ts

@@ -48,12 +48,12 @@ export class SearchProfilerUIPlugin implements Plugin<void, void, AppPublicPlugi
       mount: async (params) => {
         const [coreStart] = await getStartServices();
         const { notifications, i18n: i18nDep } = coreStart;
-        const { boot } = await import('./application/boot');
+        const { renderApp } = await import('./application');
 
         const license = await licensing.license$.pipe(first()).toPromise();
         const initialLicenseStatus = checkLicenseStatus(license);
 
-        return boot({
+        return renderApp({
           http,
           initialLicenseStatus,
           el: params.element,