[Logs UI][Metrics UI] Move actions to the kibana header (#84648)
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
parent
74bb155abc
commit
f31e7c8591
|
@ -5,7 +5,7 @@
|
|||
*/
|
||||
|
||||
import { ApolloClient } from 'apollo-client';
|
||||
import { CoreStart } from 'kibana/public';
|
||||
import { AppMountParameters, CoreStart } from 'kibana/public';
|
||||
import React, { useMemo } from 'react';
|
||||
import { useUiSetting$ } from '../../../../../src/plugins/kibana_react/public';
|
||||
import { EuiThemeProvider } from '../../../observability/public';
|
||||
|
@ -13,20 +13,24 @@ import { TriggersAndActionsUIPublicPluginStart } from '../../../triggers_actions
|
|||
import { createKibanaContextForPlugin } from '../hooks/use_kibana';
|
||||
import { InfraClientStartDeps } from '../types';
|
||||
import { ApolloClientContext } from '../utils/apollo_context';
|
||||
import { HeaderActionMenuProvider } from '../utils/header_action_menu_provider';
|
||||
import { NavigationWarningPromptProvider } from '../utils/navigation_warning_prompt';
|
||||
import { TriggersActionsProvider } from '../utils/triggers_actions_context';
|
||||
|
||||
export const CommonInfraProviders: React.FC<{
|
||||
apolloClient: ApolloClient<{}>;
|
||||
triggersActionsUI: TriggersAndActionsUIPublicPluginStart;
|
||||
}> = ({ apolloClient, children, triggersActionsUI }) => {
|
||||
setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
|
||||
}> = ({ apolloClient, children, triggersActionsUI, setHeaderActionMenu }) => {
|
||||
const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
|
||||
|
||||
return (
|
||||
<TriggersActionsProvider triggersActionsUI={triggersActionsUI}>
|
||||
<ApolloClientContext.Provider value={apolloClient}>
|
||||
<EuiThemeProvider darkMode={darkMode}>
|
||||
<NavigationWarningPromptProvider>{children}</NavigationWarningPromptProvider>
|
||||
<HeaderActionMenuProvider setHeaderActionMenu={setHeaderActionMenu}>
|
||||
<NavigationWarningPromptProvider>{children}</NavigationWarningPromptProvider>
|
||||
</HeaderActionMenuProvider>
|
||||
</EuiThemeProvider>
|
||||
</ApolloClientContext.Provider>
|
||||
</TriggersActionsProvider>
|
||||
|
|
|
@ -23,14 +23,20 @@ import { prepareMountElement } from './common_styles';
|
|||
export const renderApp = (
|
||||
core: CoreStart,
|
||||
plugins: InfraClientStartDeps,
|
||||
{ element, history }: AppMountParameters
|
||||
{ element, history, setHeaderActionMenu }: AppMountParameters
|
||||
) => {
|
||||
const apolloClient = createApolloClient(core.http.fetch);
|
||||
|
||||
prepareMountElement(element);
|
||||
|
||||
ReactDOM.render(
|
||||
<LogsApp apolloClient={apolloClient} core={core} history={history} plugins={plugins} />,
|
||||
<LogsApp
|
||||
apolloClient={apolloClient}
|
||||
core={core}
|
||||
history={history}
|
||||
plugins={plugins}
|
||||
setHeaderActionMenu={setHeaderActionMenu}
|
||||
/>,
|
||||
element
|
||||
);
|
||||
|
||||
|
@ -44,7 +50,8 @@ const LogsApp: React.FC<{
|
|||
core: CoreStart;
|
||||
history: History<unknown>;
|
||||
plugins: InfraClientStartDeps;
|
||||
}> = ({ apolloClient, core, history, plugins }) => {
|
||||
setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
|
||||
}> = ({ apolloClient, core, history, plugins, setHeaderActionMenu }) => {
|
||||
const uiCapabilities = core.application.capabilities;
|
||||
|
||||
return (
|
||||
|
@ -52,6 +59,7 @@ const LogsApp: React.FC<{
|
|||
<CommonInfraProviders
|
||||
apolloClient={apolloClient}
|
||||
triggersActionsUI={plugins.triggersActionsUi}
|
||||
setHeaderActionMenu={setHeaderActionMenu}
|
||||
>
|
||||
<Router history={history}>
|
||||
<Switch>
|
||||
|
|
|
@ -25,14 +25,20 @@ import { prepareMountElement } from './common_styles';
|
|||
export const renderApp = (
|
||||
core: CoreStart,
|
||||
plugins: InfraClientStartDeps,
|
||||
{ element, history }: AppMountParameters
|
||||
{ element, history, setHeaderActionMenu }: AppMountParameters
|
||||
) => {
|
||||
const apolloClient = createApolloClient(core.http.fetch);
|
||||
|
||||
prepareMountElement(element);
|
||||
|
||||
ReactDOM.render(
|
||||
<MetricsApp apolloClient={apolloClient} core={core} history={history} plugins={plugins} />,
|
||||
<MetricsApp
|
||||
apolloClient={apolloClient}
|
||||
core={core}
|
||||
history={history}
|
||||
plugins={plugins}
|
||||
setHeaderActionMenu={setHeaderActionMenu}
|
||||
/>,
|
||||
element
|
||||
);
|
||||
|
||||
|
@ -46,7 +52,8 @@ const MetricsApp: React.FC<{
|
|||
core: CoreStart;
|
||||
history: History<unknown>;
|
||||
plugins: InfraClientStartDeps;
|
||||
}> = ({ apolloClient, core, history, plugins }) => {
|
||||
setHeaderActionMenu: AppMountParameters['setHeaderActionMenu'];
|
||||
}> = ({ apolloClient, core, history, plugins, setHeaderActionMenu }) => {
|
||||
const uiCapabilities = core.application.capabilities;
|
||||
|
||||
return (
|
||||
|
@ -54,6 +61,7 @@ const MetricsApp: React.FC<{
|
|||
<CommonInfraProviders
|
||||
apolloClient={apolloClient}
|
||||
triggersActionsUI={plugins.triggersActionsUi}
|
||||
setHeaderActionMenu={setHeaderActionMenu}
|
||||
>
|
||||
<Router history={history}>
|
||||
<Switch>
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import React from 'react';
|
||||
import React, { useContext } from 'react';
|
||||
import { Route, Switch } from 'react-router-dom';
|
||||
import useMount from 'react-use/lib/useMount';
|
||||
|
||||
|
@ -24,9 +24,12 @@ import { LogEntryCategoriesPage } from './log_entry_categories';
|
|||
import { LogEntryRatePage } from './log_entry_rate';
|
||||
import { LogsSettingsPage } from './settings';
|
||||
import { StreamPage } from './stream';
|
||||
import { HeaderMenuPortal } from '../../../../observability/public';
|
||||
import { HeaderActionMenuContext } from '../../utils/header_action_menu_provider';
|
||||
|
||||
export const LogsPageContent: React.FunctionComponent = () => {
|
||||
const uiCapabilities = useKibana().services.application?.capabilities;
|
||||
const { setHeaderActionMenu } = useContext(HeaderActionMenuContext);
|
||||
|
||||
const { initialize } = useLogSourceContext();
|
||||
|
||||
|
@ -66,6 +69,28 @@ export const LogsPageContent: React.FunctionComponent = () => {
|
|||
|
||||
<HelpCenterContent feedbackLink={feedbackLinkUrl} appName={pageTitle} />
|
||||
|
||||
{setHeaderActionMenu && (
|
||||
<HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu}>
|
||||
<EuiFlexGroup gutterSize={'none'} alignItems={'center'} responsive={false}>
|
||||
<EuiFlexItem grow={false}>
|
||||
<AlertDropdown />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButtonEmpty
|
||||
href={kibana.services?.application?.getUrlForApp(
|
||||
'/home#/tutorial_directory/logging'
|
||||
)}
|
||||
size="s"
|
||||
color="primary"
|
||||
iconType="plusInCircle"
|
||||
>
|
||||
{ADD_DATA_LABEL}
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</HeaderMenuPortal>
|
||||
)}
|
||||
|
||||
<Header
|
||||
breadcrumbs={[
|
||||
{
|
||||
|
@ -79,19 +104,6 @@ export const LogsPageContent: React.FunctionComponent = () => {
|
|||
<EuiFlexItem>
|
||||
<RoutedTabs tabs={[streamTab, anomaliesTab, logCategoriesTab, settingsTab]} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<AlertDropdown />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButtonEmpty
|
||||
href={kibana.services?.application?.getUrlForApp('/home#/tutorial_directory/logging')}
|
||||
size="s"
|
||||
color="primary"
|
||||
iconType="plusInCircle"
|
||||
>
|
||||
{ADD_DATA_LABEL}
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</AppNavigation>
|
||||
<Switch>
|
||||
|
|
|
@ -40,6 +40,8 @@ import { SourceConfigurationFields } from '../../graphql/types';
|
|||
import { AlertPrefillProvider } from '../../alerting/use_alert_prefill';
|
||||
import { InfraMLCapabilitiesProvider } from '../../containers/ml/infra_ml_capabilities';
|
||||
import { AnomalyDetectionFlyout } from './inventory_view/components/ml/anomaly_detection/anomoly_detection_flyout';
|
||||
import { HeaderMenuPortal } from '../../../../observability/public';
|
||||
import { HeaderActionMenuContext } from '../../utils/header_action_menu_provider';
|
||||
|
||||
const ADD_DATA_LABEL = i18n.translate('xpack.infra.metricsHeaderAddDataButtonLabel', {
|
||||
defaultMessage: 'Add data',
|
||||
|
@ -47,6 +49,7 @@ const ADD_DATA_LABEL = i18n.translate('xpack.infra.metricsHeaderAddDataButtonLab
|
|||
|
||||
export const InfrastructurePage = ({ match }: RouteComponentProps) => {
|
||||
const uiCapabilities = useKibana().services.application?.capabilities;
|
||||
const { setHeaderActionMenu } = useContext(HeaderActionMenuContext);
|
||||
|
||||
const kibana = useKibana();
|
||||
|
||||
|
@ -72,6 +75,32 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
|
|||
})}
|
||||
/>
|
||||
|
||||
{setHeaderActionMenu && (
|
||||
<HeaderMenuPortal setHeaderActionMenu={setHeaderActionMenu}>
|
||||
<EuiFlexGroup alignItems="center" gutterSize="none" responsive={false}>
|
||||
<EuiFlexItem grow={false}>
|
||||
<Route path={'/inventory'} component={AnomalyDetectionFlyout} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<Route path={'/explorer'} component={MetricsAlertDropdown} />
|
||||
<Route path={'/inventory'} component={InventoryAlertDropdown} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButtonEmpty
|
||||
href={kibana.services?.application?.getUrlForApp(
|
||||
'/home#/tutorial_directory/metrics'
|
||||
)}
|
||||
size="s"
|
||||
color="primary"
|
||||
iconType="plusInCircle"
|
||||
>
|
||||
{ADD_DATA_LABEL}
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</HeaderMenuPortal>
|
||||
)}
|
||||
|
||||
<Header
|
||||
breadcrumbs={[
|
||||
{
|
||||
|
@ -121,30 +150,6 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
|
|||
]}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
grow={false}
|
||||
style={{ flexDirection: 'row', alignItems: 'center' }}
|
||||
>
|
||||
<EuiFlexItem grow={false}>
|
||||
<Route path={'/inventory'} component={AnomalyDetectionFlyout} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<Route path={'/explorer'} component={MetricsAlertDropdown} />
|
||||
<Route path={'/inventory'} component={InventoryAlertDropdown} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButtonEmpty
|
||||
href={kibana.services?.application?.getUrlForApp(
|
||||
'/home#/tutorial_directory/metrics'
|
||||
)}
|
||||
size="s"
|
||||
color="primary"
|
||||
iconType="plusInCircle"
|
||||
>
|
||||
{ADD_DATA_LABEL}
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</AppNavigation>
|
||||
|
||||
|
|
|
@ -0,0 +1,25 @@
|
|||
/*
|
||||
* 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 React from 'react';
|
||||
import { AppMountParameters } from 'kibana/public';
|
||||
|
||||
interface ContextProps {
|
||||
setHeaderActionMenu?: AppMountParameters['setHeaderActionMenu'];
|
||||
}
|
||||
|
||||
export const HeaderActionMenuContext = React.createContext<ContextProps>({});
|
||||
|
||||
export const HeaderActionMenuProvider: React.FC<Required<ContextProps>> = ({
|
||||
setHeaderActionMenu,
|
||||
children,
|
||||
}) => {
|
||||
return (
|
||||
<HeaderActionMenuContext.Provider value={{ setHeaderActionMenu }}>
|
||||
{children}
|
||||
</HeaderActionMenuContext.Provider>
|
||||
);
|
||||
};
|
Loading…
Reference in a new issue