-
- {/* TODO: translations */}
+
{i18n.translate('xpack.searchProfiler.emptyProfileTreeTitle', {
defaultMessage: 'No queries to profile',
})}
+ }
+ body={
-
+ }
+ />
);
};
diff --git a/x-pack/plugins/searchprofiler/public/application/components/profile_loading_placeholder/profile_loading_placeholder.tsx b/x-pack/plugins/searchprofiler/public/application/components/profile_loading_placeholder/profile_loading_placeholder.tsx
index 54c6c79d446f..e5bcfefc2f72 100644
--- a/x-pack/plugins/searchprofiler/public/application/components/profile_loading_placeholder/profile_loading_placeholder.tsx
+++ b/x-pack/plugins/searchprofiler/public/application/components/profile_loading_placeholder/profile_loading_placeholder.tsx
@@ -6,18 +6,19 @@
*/
import React from 'react';
-import { EuiText } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
+import { EuiEmptyPrompt } from '@elastic/eui';
+
export const ProfileLoadingPlaceholder = () => {
return (
- {i18n.translate('xpack.searchProfiler.emptyProfileTreeDescription', { defaultMessage: 'Enter a query, click Profile, and see the results here.', })}
-
-
+
{i18n.translate('xpack.searchProfiler.profilingLoaderText', {
defaultMessage: 'Loading query profiles...',
})}
-
-
+ }
+ />
);
};
From d26b3736ce4b25063647e7c50675c51ede5a41c3 Mon Sep 17 00:00:00 2001
From: Gloria Hornero * `'block'`: this is the default, renders the group as a block of items.
* `'accordion'`: wraps the items in an `EuiAccordion`.
* `'panelOpener'`: renders as an item with a `link` (required) + an icon button to open a panel on the right of the side nav.
* `'item'`: renders the group as an item in the side nav. This is useful when you want to declare descendant links of a node that will be displayed in the breadcrumb as such but you don't want to render any of the `children` in the side nav. | +| `appendHorizontalRule` | `boolean` | Optional flag to indicate if a horizontal rule should be rendered after the node.
Note: this property is currently only available for group nodes in the navigation **panel** opening on the right of the side nav. | +| `isCollapsible` | `boolean` | Optional flag to indicate if the accordion is collapsible (when `renderAs` is set to `'accordion'`.| + + ##### `RecentlyAccessedDefinition` @@ -218,6 +250,94 @@ The `GroupDefinition` interface represents a group of items in the side navigati | `recentlyAccessed$` | `Observable
Note: this property is currently only used in the navigation **panel** opening on the right of the side nav.| +| `withBadge` | `boolean` | Optional flag to indicate if a badge should be rendered next to the text.
Note: this property is currently only used in the navigation **panel** opening on the right of the side nav.| +| `badgeOptions` | `{ text?: string; }` | If `withBadge` is true, this object can be used to customize the badge. | + +###Â Panels + +As seen in the API above, the `renderAs` property can be used to render a group as a panel opener. This is useful when you want to display a group of links in the side navigation and display its content in a panel on the right of the side navigation. +The content of the panel can be auto-generaged (based on the group's children) or manually provided. + +#### Auto-generated panels + +When the panel content is auto-generated, the group's children will be rendered in the panel. Those `children` can be items or other groups (that render as `'block' (default) or `'accordion'`). +The panel will be opened when the user clicks on the group's icon button. The panel will be closed when the user clicks on the group's icon again or when the user clicks outside of the panel. + +#### Manually provided panels + +When the panel content is manually provided, the group's `children` are used for the navigation tree definition (and the breadcrumbs) but the actual UI content rendered inside the panel is provided through JSX. + +```tsx +// 1. Define the PanelContentProvider +// ----------------------------------- +const panelContentProvider: PanelContentProvider = (id: string) => { + // The full ID of the node icon button that was clicked is provided (e.g. "root.group1.itemA") + // You can use this ID to determine which panel content to render + + if (id === 'foo1') { + // Return the JSX to render in the panel for this node. + return { + content: ({ + /** Handler to close the panel */ + closePanel, + /** ChromeNavigationNode - The node that has been clicked in the main nav */ + selectedNode, + /** ChromeProjectNavigationNode[][] - Active nodes that match the current URL location */ + activeNodes, + }) => { + return ( +
+ This is a custom component to render in the panel.
+ closePanel()}>Close panel
+
+ );
+ },
+ };
+ }
+
+ if (id === 'foo2') {
+ // If need be you can only customize the "Title" of the panel and leave the content
+ // to be auto-generated.
+ return {
+ title: Custom title
,
+ };
+ }
+
+ // All other nodes content ids that haven't match will be auto-generated
+};
+
+// 2. Pass it to the