Conform Search Profiler application organization to other ES UI plugi…

…ns (#82085) (#82365) * Add testing steps to README. * Update Search Profiler application organization to conform to organization of other ES UI plugins. * Organize styles to live alongside the components they decorate.
elastic · Nov 2, 2020 · ebbd2db · ebbd2db
1 parent b7f11be
commit ebbd2db
Show file tree

Hide file tree

Showing 58 changed files with 267 additions and 225 deletions.
diff --git a/x-pack/plugins/searchprofiler/README.md b/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" } }
+  }
+}
+```
diff --git a/.../searchprofiler/public/styles/_index.scss → ...archprofiler/public/application/_app.scss b/.../searchprofiler/public/styles/_index.scss → ...archprofiler/public/application/_app.scss
@@ -1,20 +1,3 @@
-@import '@elastic/eui/src/global_styling/variables/header';
-
-@import 'mixins';
-
-@import 'components/highlight_details_flyout';
-@import 'components/profile_tree';
-@import 'components/percentage_badge';
-
-@import 'containers/main';
-@import 'containers/profile_query_editor';
-
-.prfDevTool__licenseWarning {
-  &__container {
-    max-width: 1000px;
-  }
-}
-
 .prfDevTool__page {
   flex: 1 1 auto;
 
@@ -54,14 +37,30 @@ $headerHeightOffset: $euiHeaderHeightCompensation * 3;
   flex-shrink: 1;
 }
 
-.prfDevTool__detail {
-  font-size: $euiFontSizeS;
-  padding-left: $euiSizeL - 3px; // Alignment is weird
-  margin-bottom: $euiSizeS;
-  display: flex;
-  justify-content: space-between;
+  .prfDevTool__main {
+    height: 100%;
+    order: 2;
+    margin-left: $euiSize;
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+
+    // Make only the tab content scroll
+    .search-profiler-tabs {
+      flex-shrink: 0;
+    }
+  }
+
+@include euiPanel('.prfDevTool__main');
 
-  .euiLink {
-    flex-shrink: 0;
+@include euiBreakpoint('xs', 's') {
+  .prfDevTool__container {
+    flex-direction: column;
+  }
+
+  .prfDevTool__main {
+    flex: 0 0 auto;
+    margin: $euiSize 0;
   }
 }
+
diff --git a/x-pack/plugins/searchprofiler/public/application/_index.scss b/x-pack/plugins/searchprofiler/public/application/_index.scss
@@ -0,0 +1,4 @@
+@import '@elastic/eui/src/global_styling/variables/header';
+
+@import 'app';
+@import 'components/index';
diff --git a/...blic/application/containers/main/main.tsx → ...searchprofiler/public/application/app.tsx b/...blic/application/containers/main/main.tsx → ...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 './lib';
+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 {
@@ -79,14 +77,12 @@ export const Main = () => {
 
     if (activeTab) {
       return (
-        <div className="prfDevTool__main__profiletree">
-          <ProfileTree
-            onDataInitError={handleProfileTreeError}
-            onHighlight={onHighlight}
-            target={activeTab}
-            data={currentResponse}
-          />
-        </div>
+        <ProfileTree
+          onDataInitError={handleProfileTreeError}
+          onHighlight={onHighlight}
+          target={activeTab}
+          data={currentResponse}
+        />
       );
     }
 

diff --git a/x-pack/plugins/searchprofiler/public/application/boot.tsx b/x-pack/plugins/searchprofiler/public/application/boot.tsx
diff --git a/x-pack/plugins/searchprofiler/public/application/components/_index.scss b/x-pack/plugins/searchprofiler/public/application/components/_index.scss
@@ -0,0 +1,26 @@
+$badgeSize: $euiSize * 5.5;
+
+@import 'highlight_details_flyout/highlight_details_flyout';
+@import 'license_warning_notice/license_warning_notice';
+@import 'percentage_badge/percentage_badge';
+@import 'profile_query_editor/profile_query_editor';
+@import 'profile_tree/index';
+
+.prfDevTool__main__emptyTreePlaceholder {
+  h1 {
+    font-size: $euiSizeL;
+    color: $euiColorMediumShade;
+  }
+  p {
+    font-size: $euiSize;
+    color: $euiColorMediumShade;
+  }
+  h1,
+  p {
+    cursor: default;
+    user-select: none;
+  }
+  // Slight offset from the top.
+  margin: 5% 0 auto;
+  text-align: center;
+}
diff --git a/...omponents/empty_tree_placeholder.test.tsx → ...aceholder/empty_tree_placeholder.test.tsx b/...omponents/empty_tree_placeholder.test.tsx → ...aceholder/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', () => {

diff --git a/...ain/components/empty_tree_placeholder.tsx → ...ee_placeholder/empty_tree_placeholder.tsx b/...ain/components/empty_tree_placeholder.tsx → ...ee_placeholder/empty_tree_placeholder.tsx
diff --git a/x-pack/plugins/searchprofiler/public/application/components/empty_tree_placeholder/index.ts b/x-pack/plugins/searchprofiler/public/application/components/empty_tree_placeholder/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { EmptyTreePlaceHolder } from './empty_tree_placeholder';
diff --git a/...components/_highlight_details_flyout.scss → ...ils_flyout/_highlight_details_flyout.scss b/...components/_highlight_details_flyout.scss → ...ils_flyout/_highlight_details_flyout.scss
diff --git a/...filer/public/application/components/highlight_details_flyout/highlight_details_flyout.tsx b/...filer/public/application/components/highlight_details_flyout/highlight_details_flyout.tsx
@@ -15,7 +15,7 @@ import {
   EuiCodeBlock,
 } from '@elastic/eui';
 
-import { msToPretty } from '../../utils';
+import { msToPretty } from '../../lib';
 import { HighlightDetailsTable } from './highlight_details_table';
 import { Operation } from '../../types';
 

diff --git a/...ofiler/public/application/components/highlight_details_flyout/highlight_details_table.tsx b/...ofiler/public/application/components/highlight_details_flyout/highlight_details_table.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import { EuiBasicTable, EuiToolTip, EuiBadge } from '@elastic/eui';
 
 import { BreakdownItem } from '../../types';
-import { nsToPretty } from '../../utils';
+import { nsToPretty } from '../../lib';
 import { PercentageBadge } from '../percentage_badge';
 
 interface Props {

diff --git a/x-pack/plugins/searchprofiler/public/application/components/index.ts b/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';
diff --git a/...rofiler/public/application/components/license_warning_notice/_license_warning_notice.scss b/...rofiler/public/application/components/license_warning_notice/_license_warning_notice.scss
@@ -0,0 +1,5 @@
+.prfDevTool__licenseWarning {
+  &__container {
+    max-width: 1000px;
+  }
+}
diff --git a/x-pack/plugins/searchprofiler/public/application/components/license_warning_notice/index.ts b/x-pack/plugins/searchprofiler/public/application/components/license_warning_notice/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { LicenseWarningNotice } from './license_warning_notice';
diff --git a/...components/license_warning_notice.test.ts → ...ing_notice/license_warning_notice.test.ts b/...components/license_warning_notice.test.ts → ...ing_notice/license_warning_notice.test.ts
@@ -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 { LicenseWarningNotice } from './license_warning_notice';
 

diff --git a/...ion/components/license_warning_notice.tsx → ...warning_notice/license_warning_notice.tsx b/...ion/components/license_warning_notice.tsx → ...warning_notice/license_warning_notice.tsx
diff --git a/...searchprofiler/public/styles/_mixins.scss → ...s/percentage_badge/_percentage_badge.scss b/...searchprofiler/public/styles/_mixins.scss → ...s/percentage_badge/_percentage_badge.scss
@@ -34,3 +34,18 @@
     }
   }
 }
+
+.prfDevTool__percentBadge {
+  &__progress--percent {
+    @include prfDevToolProgress;
+    width: $badgeSize;
+  }
+
+  &__progress--time {
+    @include prfDevToolProgress(#FFAFAF);
+    background-color: #F5F5F5; // Must be light at all times
+    // Width of 3 badges, with the last child not having padding on the left
+    width: ($badgeSize * 3) - ($euiSizeXS * .75);
+    // Force text to always be dark on top of white -> pink color
+  }
+}
diff --git a/...ofiler/public/application/editor/index.ts → ...tion/components/percentage_badge/index.ts b/...ofiler/public/application/editor/index.ts → ...tion/components/percentage_badge/index.ts
@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { Editor, Props, EditorInstance } from './editor';
+export { PercentageBadge } from './percentage_badge';
diff --git a/...plication/components/percentage_badge.tsx → ...nts/percentage_badge/percentage_badge.tsx b/...plication/components/percentage_badge.tsx → ...nts/percentage_badge/percentage_badge.tsx
diff --git a/...ation/containers/main/components/index.ts → ...ents/profile_loading_placeholder/index.ts b/...ation/containers/main/components/index.ts → ...ents/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';
diff --git a/...ents/profile_loading_placeholder.test.tsx → ...lder/profile_loading_placeholder.test.tsx b/...ents/profile_loading_placeholder.test.tsx → ...lder/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', () => {

diff --git a/...omponents/profile_loading_placeholder.tsx → ...aceholder/profile_loading_placeholder.tsx b/...omponents/profile_loading_placeholder.tsx → ...aceholder/profile_loading_placeholder.tsx
diff --git a/...les/containers/_profile_query_editor.scss → ...e_query_editor/_profile_query_editor.scss b/...les/containers/_profile_query_editor.scss → ...e_query_editor/_profile_query_editor.scss
diff --git a/...public/application/editor/editor.test.tsx → ...ofile_query_editor/editor/editor.test.tsx b/...public/application/editor/editor.test.tsx → ...ofile_query_editor/editor/editor.test.tsx
@@ -6,15 +6,15 @@
 import 'brace';
 import 'brace/mode/json';
 
-import { registerTestBed } from '../../../../../test_utils';
-import { Editor, Props } from '.';
+import { registerTestBed } from '../../../../../../../test_utils';
+import { Editor, Props } from './editor';
 
 describe('Editor Component', () => {
   it('renders', async () => {
     const props: Props = {
       initialValue: '',
       licenseEnabled: true,
-      onEditorReady: (e) => {},
+      onEditorReady: (e: any) => {},
     };
     // Ignore the warning about Worker not existing for now...
     const init = registerTestBed(Editor);

diff --git a/...iler/public/application/editor/editor.tsx → ...ts/profile_query_editor/editor/editor.tsx b/...iler/public/application/editor/editor.tsx → ...ts/profile_query_editor/editor/editor.tsx
@@ -9,8 +9,8 @@ import { i18n } from '@kbn/i18n';
 import { EuiScreenReaderOnly } from '@elastic/eui';
 import { Editor as AceEditor } from 'brace';
 
+import { ace } from '../../../../shared_imports';
 import { initializeEditor } from './init_editor';
-import { ace } from '../../../../../../src/plugins/es_ui_shared/public';
 
 const { useUIAceKeyboardMode } = ace;
 

diff --git a/...blic/application/containers/main/index.ts → ...ents/profile_query_editor/editor/index.ts b/...blic/application/containers/main/index.ts → ...ents/profile_query_editor/editor/index.ts
@@ -4,4 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { Main } from './main';
+export { Editor, EditorInstance } from './editor';
diff --git a/.../public/application/editor/init_editor.ts → ...rofile_query_editor/editor/init_editor.ts b/.../public/application/editor/init_editor.ts → ...rofile_query_editor/editor/init_editor.ts
diff --git a/...er/public/application/containers/index.ts → .../components/profile_query_editor/index.ts b/...er/public/application/containers/index.ts → .../components/profile_query_editor/index.ts
@@ -4,5 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { Main } from './main';
 export { ProfileQueryEditor } from './profile_query_editor';
diff --git a/...ation/containers/profile_query_editor.tsx → ...ile_query_editor/profile_query_editor.tsx b/...ation/containers/profile_query_editor.tsx → ...ile_query_editor/profile_query_editor.tsx
@@ -16,10 +16,11 @@ import {
   EuiSpacer,
   EuiFlexItem,
 } from '@elastic/eui';
-import { Editor, EditorInstance } from '../editor';
-import { useRequestProfile } from '../hooks';
-import { useAppContext } from '../contexts/app_context';
-import { useProfilerActionContext } from '../contexts/profiler_context';
+
+import { useRequestProfile } from '../../hooks';
+import { useAppContext } from '../../contexts/app_context';
+import { useProfilerActionContext } from '../../contexts/profiler_context';
+import { Editor, EditorInstance } from './editor';
 
 const DEFAULT_INDEX_VALUE = '_all';
 

diff --git a/x-pack/plugins/searchprofiler/public/application/components/profile_tree/_index.scss b/x-pack/plugins/searchprofiler/public/application/components/profile_tree/_index.scss
@@ -0,0 +1,2 @@
+@import 'shard_details/shard_details';
+@import 'profile_tree';
diff --git a/...blic/styles/components/_profile_tree.scss → ...omponents/profile_tree/_profile_tree.scss b/...blic/styles/components/_profile_tree.scss → ...omponents/profile_tree/_profile_tree.scss
@@ -1,5 +1,8 @@
-
-$badgeSize: $euiSize * 5.5;
+.prfDevTool__main__profiletree {
+  height: 100%;
+  overflow-y: auto;
+  flex-grow: 1;
+}
 
 // Profile details treeview
 

diff --git a/x-pack/plugins/searchprofiler/public/application/components/profile_tree/index_details.tsx b/x-pack/plugins/searchprofiler/public/application/components/profile_tree/index_details.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiText, EuiToolTip, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
-import { msToPretty } from '../../utils';
+import { msToPretty } from '../../lib';
 import { Index } from '../../types';
 
 export interface Props {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@import 'shard_details/shard_details';
		@import 'profile_tree';