diff --git a/x-pack/plugins/searchprofiler/README.md b/x-pack/plugins/searchprofiler/README.md index 6e25163470488..5b06fc537ee6c 100644 --- 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. \ No newline at end of file +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" } } + } +} +``` \ No newline at end of file diff --git a/x-pack/plugins/searchprofiler/public/styles/_index.scss b/x-pack/plugins/searchprofiler/public/application/_app.scss similarity index 52% rename from x-pack/plugins/searchprofiler/public/styles/_index.scss rename to x-pack/plugins/searchprofiler/public/application/_app.scss index 0631966157d12..dc48db9a8e751 100644 --- a/x-pack/plugins/searchprofiler/public/styles/_index.scss +++ b/x-pack/plugins/searchprofiler/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 new file mode 100644 index 0000000000000..65ab5cc0e13f3 --- /dev/null +++ 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/x-pack/plugins/searchprofiler/public/application/containers/main/main.tsx b/x-pack/plugins/searchprofiler/public/application/app.tsx similarity index 83% rename from x-pack/plugins/searchprofiler/public/application/containers/main/main.tsx rename to x-pack/plugins/searchprofiler/public/application/app.tsx index 480f265a80079..3d696891ec499 100644 --- a/x-pack/plugins/searchprofiler/public/application/containers/main/main.tsx +++ b/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 './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 ( -
- -
+ ); } diff --git a/x-pack/plugins/searchprofiler/public/application/boot.tsx b/x-pack/plugins/searchprofiler/public/application/boot.tsx deleted file mode 100644 index d6e865f0eb886..0000000000000 --- a/x-pack/plugins/searchprofiler/public/application/boot.tsx +++ /dev/null @@ -1,27 +0,0 @@ -/* - * 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. - */ -import { render, unmountComponentAtNode } from 'react-dom'; -import { HttpStart as Http, ToastsSetup } from 'kibana/public'; -import React from 'react'; - -import { LicenseStatus } from '../../common'; -import { App } from '.'; - -export interface Dependencies { - el: HTMLElement; - http: Http; - I18nContext: any; - notifications: ToastsSetup; - initialLicenseStatus: LicenseStatus; -} - -export type AppDependencies = Omit; - -export function boot(deps: Dependencies): () => void { - const { el, ...rest } = deps; - render(, deps.el); - return () => unmountComponentAtNode(deps.el); -} diff --git a/x-pack/plugins/searchprofiler/public/application/components/_index.scss b/x-pack/plugins/searchprofiler/public/application/components/_index.scss new file mode 100644 index 0000000000000..f2fdb44e7175d --- /dev/null +++ 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/x-pack/plugins/searchprofiler/public/application/containers/main/components/empty_tree_placeholder.test.tsx b/x-pack/plugins/searchprofiler/public/application/components/empty_tree_placeholder/empty_tree_placeholder.test.tsx similarity index 86% rename from x-pack/plugins/searchprofiler/public/application/containers/main/components/empty_tree_placeholder.test.tsx rename to x-pack/plugins/searchprofiler/public/application/components/empty_tree_placeholder/empty_tree_placeholder.test.tsx index 811f83041006b..e945c6a28a46b 100644 --- a/x-pack/plugins/searchprofiler/public/application/containers/main/components/empty_tree_placeholder.test.tsx +++ b/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', () => { diff --git a/x-pack/plugins/searchprofiler/public/application/containers/main/components/empty_tree_placeholder.tsx b/x-pack/plugins/searchprofiler/public/application/components/empty_tree_placeholder/empty_tree_placeholder.tsx similarity index 100% rename from x-pack/plugins/searchprofiler/public/application/containers/main/components/empty_tree_placeholder.tsx rename to x-pack/plugins/searchprofiler/public/application/components/empty_tree_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 new file mode 100644 index 0000000000000..e293a7f7a7914 --- /dev/null +++ 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/x-pack/plugins/searchprofiler/public/styles/components/_highlight_details_flyout.scss b/x-pack/plugins/searchprofiler/public/application/components/highlight_details_flyout/_highlight_details_flyout.scss similarity index 100% rename from x-pack/plugins/searchprofiler/public/styles/components/_highlight_details_flyout.scss rename to x-pack/plugins/searchprofiler/public/application/components/highlight_details_flyout/_highlight_details_flyout.scss diff --git a/x-pack/plugins/searchprofiler/public/application/components/highlight_details_flyout/highlight_details_flyout.tsx b/x-pack/plugins/searchprofiler/public/application/components/highlight_details_flyout/highlight_details_flyout.tsx index 40c17df95456a..c7f74eef847ea 100644 --- a/x-pack/plugins/searchprofiler/public/application/components/highlight_details_flyout/highlight_details_flyout.tsx +++ b/x-pack/plugins/searchprofiler/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/x-pack/plugins/searchprofiler/public/application/components/highlight_details_flyout/highlight_details_table.tsx b/x-pack/plugins/searchprofiler/public/application/components/highlight_details_flyout/highlight_details_table.tsx index f41088b7c9b78..0a78cce79d173 100644 --- a/x-pack/plugins/searchprofiler/public/application/components/highlight_details_flyout/highlight_details_table.tsx +++ b/x-pack/plugins/searchprofiler/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 index db1fea0033db5..d9b99141b9da9 100644 --- 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/x-pack/plugins/searchprofiler/public/application/components/license_warning_notice/_license_warning_notice.scss b/x-pack/plugins/searchprofiler/public/application/components/license_warning_notice/_license_warning_notice.scss new file mode 100644 index 0000000000000..c5ec4e3ca0d88 --- /dev/null +++ b/x-pack/plugins/searchprofiler/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 new file mode 100644 index 0000000000000..9a1710b3993d0 --- /dev/null +++ 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/x-pack/plugins/searchprofiler/public/application/components/license_warning_notice.test.ts b/x-pack/plugins/searchprofiler/public/application/components/license_warning_notice/license_warning_notice.test.ts similarity index 87% rename from x-pack/plugins/searchprofiler/public/application/components/license_warning_notice.test.ts rename to x-pack/plugins/searchprofiler/public/application/components/license_warning_notice/license_warning_notice.test.ts index 79a2d6c1426f7..93465d112681f 100644 --- a/x-pack/plugins/searchprofiler/public/application/components/license_warning_notice.test.ts +++ b/x-pack/plugins/searchprofiler/public/application/components/license_warning_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/x-pack/plugins/searchprofiler/public/application/components/license_warning_notice.tsx b/x-pack/plugins/searchprofiler/public/application/components/license_warning_notice/license_warning_notice.tsx similarity index 100% rename from x-pack/plugins/searchprofiler/public/application/components/license_warning_notice.tsx rename to x-pack/plugins/searchprofiler/public/application/components/license_warning_notice/license_warning_notice.tsx diff --git a/x-pack/plugins/searchprofiler/public/styles/_mixins.scss b/x-pack/plugins/searchprofiler/public/application/components/percentage_badge/_percentage_badge.scss similarity index 63% rename from x-pack/plugins/searchprofiler/public/styles/_mixins.scss rename to x-pack/plugins/searchprofiler/public/application/components/percentage_badge/_percentage_badge.scss index 3ca8dce7d6a21..8c9f5d8ff6253 100644 --- a/x-pack/plugins/searchprofiler/public/styles/_mixins.scss +++ b/x-pack/plugins/searchprofiler/public/application/components/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/x-pack/plugins/searchprofiler/public/application/editor/index.ts b/x-pack/plugins/searchprofiler/public/application/components/percentage_badge/index.ts similarity index 80% rename from x-pack/plugins/searchprofiler/public/application/editor/index.ts rename to x-pack/plugins/searchprofiler/public/application/components/percentage_badge/index.ts index f17f37923ae83..ba0474ec2b307 100644 --- a/x-pack/plugins/searchprofiler/public/application/editor/index.ts +++ b/x-pack/plugins/searchprofiler/public/application/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/x-pack/plugins/searchprofiler/public/application/components/percentage_badge.tsx b/x-pack/plugins/searchprofiler/public/application/components/percentage_badge/percentage_badge.tsx similarity index 100% rename from x-pack/plugins/searchprofiler/public/application/components/percentage_badge.tsx rename to x-pack/plugins/searchprofiler/public/application/components/percentage_badge/percentage_badge.tsx diff --git a/x-pack/plugins/searchprofiler/public/application/containers/main/components/index.ts b/x-pack/plugins/searchprofiler/public/application/components/profile_loading_placeholder/index.ts similarity index 83% rename from x-pack/plugins/searchprofiler/public/application/containers/main/components/index.ts rename to x-pack/plugins/searchprofiler/public/application/components/profile_loading_placeholder/index.ts index e8b7450ed9645..54b40f117e85f 100644 --- a/x-pack/plugins/searchprofiler/public/application/containers/main/components/index.ts +++ b/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'; diff --git a/x-pack/plugins/searchprofiler/public/application/containers/main/components/profile_loading_placeholder.test.tsx b/x-pack/plugins/searchprofiler/public/application/components/profile_loading_placeholder/profile_loading_placeholder.test.tsx similarity index 87% rename from x-pack/plugins/searchprofiler/public/application/containers/main/components/profile_loading_placeholder.test.tsx rename to x-pack/plugins/searchprofiler/public/application/components/profile_loading_placeholder/profile_loading_placeholder.test.tsx index 1428840a9464f..d540bfe0ed98b 100644 --- a/x-pack/plugins/searchprofiler/public/application/containers/main/components/profile_loading_placeholder.test.tsx +++ b/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', () => { diff --git a/x-pack/plugins/searchprofiler/public/application/containers/main/components/profile_loading_placeholder.tsx b/x-pack/plugins/searchprofiler/public/application/components/profile_loading_placeholder/profile_loading_placeholder.tsx similarity index 100% rename from x-pack/plugins/searchprofiler/public/application/containers/main/components/profile_loading_placeholder.tsx rename to x-pack/plugins/searchprofiler/public/application/components/profile_loading_placeholder/profile_loading_placeholder.tsx diff --git a/x-pack/plugins/searchprofiler/public/styles/containers/_profile_query_editor.scss b/x-pack/plugins/searchprofiler/public/application/components/profile_query_editor/_profile_query_editor.scss similarity index 100% rename from x-pack/plugins/searchprofiler/public/styles/containers/_profile_query_editor.scss rename to x-pack/plugins/searchprofiler/public/application/components/profile_query_editor/_profile_query_editor.scss diff --git a/x-pack/plugins/searchprofiler/public/application/editor/editor.test.tsx b/x-pack/plugins/searchprofiler/public/application/components/profile_query_editor/editor/editor.test.tsx similarity index 79% rename from x-pack/plugins/searchprofiler/public/application/editor/editor.test.tsx rename to x-pack/plugins/searchprofiler/public/application/components/profile_query_editor/editor/editor.test.tsx index 9d38329583ed6..e0d24c11ca5ed 100644 --- a/x-pack/plugins/searchprofiler/public/application/editor/editor.test.tsx +++ b/x-pack/plugins/searchprofiler/public/application/components/profile_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/x-pack/plugins/searchprofiler/public/application/editor/editor.tsx b/x-pack/plugins/searchprofiler/public/application/components/profile_query_editor/editor/editor.tsx similarity index 96% rename from x-pack/plugins/searchprofiler/public/application/editor/editor.tsx rename to x-pack/plugins/searchprofiler/public/application/components/profile_query_editor/editor/editor.tsx index 7e7d74155b2d9..49bdf2ed60f04 100644 --- a/x-pack/plugins/searchprofiler/public/application/editor/editor.tsx +++ b/x-pack/plugins/searchprofiler/public/application/components/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/x-pack/plugins/searchprofiler/public/application/containers/main/index.ts b/x-pack/plugins/searchprofiler/public/application/components/profile_query_editor/editor/index.ts similarity index 82% rename from x-pack/plugins/searchprofiler/public/application/containers/main/index.ts rename to x-pack/plugins/searchprofiler/public/application/components/profile_query_editor/editor/index.ts index 509a15c0c71a5..4f11dc53f2377 100644 --- a/x-pack/plugins/searchprofiler/public/application/containers/main/index.ts +++ b/x-pack/plugins/searchprofiler/public/application/components/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/x-pack/plugins/searchprofiler/public/application/editor/init_editor.ts b/x-pack/plugins/searchprofiler/public/application/components/profile_query_editor/editor/init_editor.ts similarity index 100% rename from x-pack/plugins/searchprofiler/public/application/editor/init_editor.ts rename to x-pack/plugins/searchprofiler/public/application/components/profile_query_editor/editor/init_editor.ts diff --git a/x-pack/plugins/searchprofiler/public/application/containers/index.ts b/x-pack/plugins/searchprofiler/public/application/components/profile_query_editor/index.ts similarity index 90% rename from x-pack/plugins/searchprofiler/public/application/containers/index.ts rename to x-pack/plugins/searchprofiler/public/application/components/profile_query_editor/index.ts index 1830a34e93d30..f3332c5ff0862 100644 --- a/x-pack/plugins/searchprofiler/public/application/containers/index.ts +++ b/x-pack/plugins/searchprofiler/public/application/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/x-pack/plugins/searchprofiler/public/application/containers/profile_query_editor.tsx b/x-pack/plugins/searchprofiler/public/application/components/profile_query_editor/profile_query_editor.tsx similarity index 94% rename from x-pack/plugins/searchprofiler/public/application/containers/profile_query_editor.tsx rename to x-pack/plugins/searchprofiler/public/application/components/profile_query_editor/profile_query_editor.tsx index 878189bf13cdd..ffadc9a42b113 100644 --- a/x-pack/plugins/searchprofiler/public/application/containers/profile_query_editor.tsx +++ b/x-pack/plugins/searchprofiler/public/application/components/profile_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 new file mode 100644 index 0000000000000..16259f0b21a29 --- /dev/null +++ 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/x-pack/plugins/searchprofiler/public/styles/components/_profile_tree.scss b/x-pack/plugins/searchprofiler/public/application/components/profile_tree/_profile_tree.scss similarity index 94% rename from x-pack/plugins/searchprofiler/public/styles/components/_profile_tree.scss rename to x-pack/plugins/searchprofiler/public/application/components/profile_tree/_profile_tree.scss index c7dc4a305acb2..6d941f054d7ea 100644 --- a/x-pack/plugins/searchprofiler/public/styles/components/_profile_tree.scss +++ b/x-pack/plugins/searchprofiler/public/application/components/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 index 20ea7c636ee74..1625c1f8a7574 100644 --- 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 { diff --git a/x-pack/plugins/searchprofiler/public/application/components/profile_tree/profile_tree.tsx b/x-pack/plugins/searchprofiler/public/application/components/profile_tree/profile_tree.tsx index 7849f1c2a9d4c..bb200e785ad12 100644 --- a/x-pack/plugins/searchprofiler/public/application/components/profile_tree/profile_tree.tsx +++ b/x-pack/plugins/searchprofiler/public/application/components/profile_tree/profile_tree.tsx @@ -21,49 +21,48 @@ export interface Props { } export const ProfileTree = memo(({ data, target, onHighlight, onDataInitError }: Props) => { - if (!data || data.length === 0) { - return null; - } + let content = null; - let sortedIndices: Index[]; - try { - sortedIndices = initDataFor(target)(data); - } catch (e) { - onDataInitError(e); - return null; + if (data && data.length) { + try { + const sortedIndices: Index[] = initDataFor(target)(data); + content = ( + + + {sortedIndices.map((index) => ( + + + + + + + + {index.shards.map((shard, idx) => ( + + + {idx < index.shards.length - 1 ? : undefined} + + ))} + + + + ))} + + + ); + } catch (e) { + onDataInitError(e); + } } - return ( - - - {sortedIndices.map((index) => ( - - - - - - - - {index.shards.map((shard, idx) => ( - - - {idx < index.shards.length - 1 ? : undefined} - - ))} - - - - ))} - - - ); + return
{content}
; }); diff --git a/x-pack/plugins/searchprofiler/public/application/components/profile_tree/shard_details/_shard_details.scss b/x-pack/plugins/searchprofiler/public/application/components/profile_tree/shard_details/_shard_details.scss new file mode 100644 index 0000000000000..b793282821ece --- /dev/null +++ b/x-pack/plugins/searchprofiler/public/application/components/profile_tree/shard_details/_shard_details.scss @@ -0,0 +1,11 @@ +.prfDevTool__detail { + font-size: $euiFontSizeS; + padding-left: $euiSizeL - 3px; // Alignment is weird + margin-bottom: $euiSizeS; + display: flex; + justify-content: space-between; + + .euiLink { + flex-shrink: 0; + } +} diff --git a/x-pack/plugins/searchprofiler/public/application/components/profile_tree/shard_details/shard_details.tsx b/x-pack/plugins/searchprofiler/public/application/components/profile_tree/shard_details/shard_details.tsx index 34ed208863ad3..ba36f7bf6e282 100644 --- a/x-pack/plugins/searchprofiler/public/application/components/profile_tree/shard_details/shard_details.tsx +++ b/x-pack/plugins/searchprofiler/public/application/components/profile_tree/shard_details/shard_details.tsx @@ -8,7 +8,7 @@ import React, { useState } from 'react'; import { EuiFlexGroup, EuiFlexItem, EuiText, EuiLink, EuiIcon } from '@elastic/eui'; import { Index, Operation, Shard } from '../../../types'; -import { msToPretty } from '../../../utils'; +import { msToPretty } from '../../../lib'; import { ShardDetailTree } from './shard_details_tree'; import { PercentageBadge } from '../../percentage_badge'; diff --git a/x-pack/plugins/searchprofiler/public/application/components/profile_tree/shard_details/shard_details_tree_node.tsx b/x-pack/plugins/searchprofiler/public/application/components/profile_tree/shard_details/shard_details_tree_node.tsx index d89046090a961..8209cda09d738 100644 --- a/x-pack/plugins/searchprofiler/public/application/components/profile_tree/shard_details/shard_details_tree_node.tsx +++ b/x-pack/plugins/searchprofiler/public/application/components/profile_tree/shard_details/shard_details_tree_node.tsx @@ -10,7 +10,7 @@ import { i18n } from '@kbn/i18n'; import { hasVisibleChild } from '../utils'; import { useHighlightTreeNode } from '../use_highlight_tree_node'; -import { msToPretty } from '../../../utils'; +import { msToPretty } from '../../../lib'; import { PercentageBadge } from '../../percentage_badge'; diff --git a/x-pack/plugins/searchprofiler/public/application/components/searchprofiler_tabs/index.ts b/x-pack/plugins/searchprofiler/public/application/components/searchprofiler_tabs/index.ts new file mode 100644 index 0000000000000..3b609caa1739a --- /dev/null +++ b/x-pack/plugins/searchprofiler/public/application/components/searchprofiler_tabs/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 { SearchProfilerTabs } from './searchprofiler_tabs'; diff --git a/x-pack/plugins/searchprofiler/public/application/components/searchprofiler_tabs.test.ts b/x-pack/plugins/searchprofiler/public/application/components/searchprofiler_tabs/searchprofiler_tabs.test.ts similarity index 90% rename from x-pack/plugins/searchprofiler/public/application/components/searchprofiler_tabs.test.ts rename to x-pack/plugins/searchprofiler/public/application/components/searchprofiler_tabs/searchprofiler_tabs.test.ts index 28eb56ae051c7..575dbd68f0c97 100644 --- a/x-pack/plugins/searchprofiler/public/application/components/searchprofiler_tabs.test.ts +++ b/x-pack/plugins/searchprofiler/public/application/components/searchprofiler_tabs/searchprofiler_tabs.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 { SearchProfilerTabs, Props } from './searchprofiler_tabs'; diff --git a/x-pack/plugins/searchprofiler/public/application/components/searchprofiler_tabs.tsx b/x-pack/plugins/searchprofiler/public/application/components/searchprofiler_tabs/searchprofiler_tabs.tsx similarity index 97% rename from x-pack/plugins/searchprofiler/public/application/components/searchprofiler_tabs.tsx rename to x-pack/plugins/searchprofiler/public/application/components/searchprofiler_tabs/searchprofiler_tabs.tsx index 7e6dad7df5528..8aa545f4d85ec 100644 --- a/x-pack/plugins/searchprofiler/public/application/components/searchprofiler_tabs.tsx +++ b/x-pack/plugins/searchprofiler/public/application/components/searchprofiler_tabs/searchprofiler_tabs.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { EuiTabs, EuiTab } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { Targets } from '../types'; +import { Targets } from '../../types'; export interface Props { activeTab: Targets | null; diff --git a/x-pack/plugins/searchprofiler/public/application/contexts/index.ts b/x-pack/plugins/searchprofiler/public/application/contexts/index.ts new file mode 100644 index 0000000000000..75e4d5fc94025 --- /dev/null +++ b/x-pack/plugins/searchprofiler/public/application/contexts/index.ts @@ -0,0 +1,8 @@ +/* + * 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 { useAppContext } from './app_context'; +export { useProfilerActionContext, useProfilerReadContext } from './profiler_context'; diff --git a/x-pack/plugins/searchprofiler/public/application/hooks/use_request_profile.ts b/x-pack/plugins/searchprofiler/public/application/hooks/use_request_profile.ts index 435db4a98c552..8e4f00c35645f 100644 --- a/x-pack/plugins/searchprofiler/public/application/hooks/use_request_profile.ts +++ b/x-pack/plugins/searchprofiler/public/application/hooks/use_request_profile.ts @@ -6,7 +6,7 @@ import { i18n } from '@kbn/i18n'; import { useAppContext } from '../contexts/app_context'; -import { checkForParseErrors } from '../utils'; +import { checkForParseErrors } from '../lib'; import { ShardSerialized } from '../types'; interface Args { diff --git a/x-pack/plugins/searchprofiler/public/application/index.tsx b/x-pack/plugins/searchprofiler/public/application/index.tsx index fd8ab61eb9b08..faa64273d2abe 100644 --- a/x-pack/plugins/searchprofiler/public/application/index.tsx +++ b/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( -
+ - + , + el ); -} + + return () => unmountComponentAtNode(el); +}; diff --git a/x-pack/plugins/searchprofiler/public/application/utils/check_for_json_errors.test.ts b/x-pack/plugins/searchprofiler/public/application/lib/check_for_json_errors.test.ts similarity index 100% rename from x-pack/plugins/searchprofiler/public/application/utils/check_for_json_errors.test.ts rename to x-pack/plugins/searchprofiler/public/application/lib/check_for_json_errors.test.ts diff --git a/x-pack/plugins/searchprofiler/public/application/utils/check_for_json_errors.ts b/x-pack/plugins/searchprofiler/public/application/lib/check_for_json_errors.ts similarity index 100% rename from x-pack/plugins/searchprofiler/public/application/utils/check_for_json_errors.ts rename to x-pack/plugins/searchprofiler/public/application/lib/check_for_json_errors.ts diff --git a/x-pack/plugins/searchprofiler/public/application/utils/has_aggregations.ts b/x-pack/plugins/searchprofiler/public/application/lib/has_aggregations.ts similarity index 100% rename from x-pack/plugins/searchprofiler/public/application/utils/has_aggregations.ts rename to x-pack/plugins/searchprofiler/public/application/lib/has_aggregations.ts diff --git a/x-pack/plugins/searchprofiler/public/application/utils/has_searches.ts b/x-pack/plugins/searchprofiler/public/application/lib/has_searches.ts similarity index 100% rename from x-pack/plugins/searchprofiler/public/application/utils/has_searches.ts rename to x-pack/plugins/searchprofiler/public/application/lib/has_searches.ts diff --git a/x-pack/plugins/searchprofiler/public/application/utils/index.ts b/x-pack/plugins/searchprofiler/public/application/lib/index.ts similarity index 100% rename from x-pack/plugins/searchprofiler/public/application/utils/index.ts rename to x-pack/plugins/searchprofiler/public/application/lib/index.ts diff --git a/x-pack/plugins/searchprofiler/public/application/utils/ms_to_pretty.ts b/x-pack/plugins/searchprofiler/public/application/lib/ms_to_pretty.ts similarity index 100% rename from x-pack/plugins/searchprofiler/public/application/utils/ms_to_pretty.ts rename to x-pack/plugins/searchprofiler/public/application/lib/ms_to_pretty.ts diff --git a/x-pack/plugins/searchprofiler/public/application/utils/ns_to_pretty.test.ts b/x-pack/plugins/searchprofiler/public/application/lib/ns_to_pretty.test.ts similarity index 100% rename from x-pack/plugins/searchprofiler/public/application/utils/ns_to_pretty.test.ts rename to x-pack/plugins/searchprofiler/public/application/lib/ns_to_pretty.test.ts diff --git a/x-pack/plugins/searchprofiler/public/application/utils/ns_to_pretty.ts b/x-pack/plugins/searchprofiler/public/application/lib/ns_to_pretty.ts similarity index 100% rename from x-pack/plugins/searchprofiler/public/application/utils/ns_to_pretty.ts rename to x-pack/plugins/searchprofiler/public/application/lib/ns_to_pretty.ts diff --git a/x-pack/plugins/searchprofiler/public/application/store/reducer.ts b/x-pack/plugins/searchprofiler/public/application/store/reducer.ts index 8b2f14b3ed45a..506268df62bdb 100644 --- a/x-pack/plugins/searchprofiler/public/application/store/reducer.ts +++ b/x-pack/plugins/searchprofiler/public/application/store/reducer.ts @@ -9,7 +9,7 @@ import { State } from './store'; import { OnHighlightChangeArgs } from '../components/profile_tree'; import { ShardSerialized, Targets } from '../types'; -import { hasSearch, hasAggregations } from '../utils'; +import { hasSearch, hasAggregations } from '../lib'; export type Action = | { type: 'setProfiling'; value: boolean } diff --git a/x-pack/plugins/searchprofiler/public/index.scss b/x-pack/plugins/searchprofiler/public/index.scss index 370ec54a85539..9bd47b6473372 100644 --- a/x-pack/plugins/searchprofiler/public/index.scss +++ b/x-pack/plugins/searchprofiler/public/index.scss @@ -1 +1 @@ -@import 'styles/index' +@import './application/index'; diff --git a/x-pack/plugins/searchprofiler/public/index.ts b/x-pack/plugins/searchprofiler/public/index.ts index 21df81a22dec8..7974308f18db2 100644 --- a/x-pack/plugins/searchprofiler/public/index.ts +++ b/x-pack/plugins/searchprofiler/public/index.ts @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import './styles/_index.scss'; +import './index.scss'; import { SearchProfilerUIPlugin } from './plugin'; export function plugin() { diff --git a/x-pack/plugins/searchprofiler/public/plugin.ts b/x-pack/plugins/searchprofiler/public/plugin.ts index 14c8efa8a56a8..839fe6142e601 100644 --- a/x-pack/plugins/searchprofiler/public/plugin.ts +++ b/x-pack/plugins/searchprofiler/public/plugin.ts @@ -48,12 +48,12 @@ export class SearchProfilerUIPlugin implements Plugin { 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, diff --git a/x-pack/plugins/searchprofiler/public/shared_imports.ts b/x-pack/plugins/searchprofiler/public/shared_imports.ts new file mode 100644 index 0000000000000..b8661a82e906b --- /dev/null +++ b/x-pack/plugins/searchprofiler/public/shared_imports.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 { ace } from '../../../../src/plugins/es_ui_shared/public'; diff --git a/x-pack/plugins/searchprofiler/public/styles/components/_percentage_badge.scss b/x-pack/plugins/searchprofiler/public/styles/components/_percentage_badge.scss deleted file mode 100644 index 204ca3da17574..0000000000000 --- a/x-pack/plugins/searchprofiler/public/styles/components/_percentage_badge.scss +++ /dev/null @@ -1,14 +0,0 @@ -.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/x-pack/plugins/searchprofiler/public/styles/containers/_main.scss b/x-pack/plugins/searchprofiler/public/styles/containers/_main.scss deleted file mode 100644 index 6e2ef4a129397..0000000000000 --- a/x-pack/plugins/searchprofiler/public/styles/containers/_main.scss +++ /dev/null @@ -1,61 +0,0 @@ -@include euiBreakpoint('xs', 's') { - .prfDevTool__shardDetailsWrapper { - flex-direction: column; - align-items: flex-start; - } -} - -.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; - } - - &__profiletree { - height: 100%; - overflow-y: auto; - flex-grow: 1; - } - - &__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; - } -} - -@include euiPanel('.prfDevTool__main'); - -@include euiBreakpoint('xs', 's') { - .prfDevTool__container { - flex-direction: column; - } - - .prfDevTool__main { - flex: 0 0 auto; - } - - .prfDevTool__main { - margin: $euiSize 0; - } -}