diff --git a/x-pack/plugins/infra/public/components/beta_badge_header_section.tsx b/x-pack/plugins/infra/public/components/beta_badge_header_section.tsx new file mode 100644 index 00000000000000..3512afe18acfe4 --- /dev/null +++ b/x-pack/plugins/infra/public/components/beta_badge_header_section.tsx @@ -0,0 +1,35 @@ +/* + * 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 { EuiBetaBadge, EuiHeaderSection } from '@elastic/eui'; +import React from 'react'; +import styled from 'styled-components'; + +interface BetaBadgeHeaderSectionProps { + tooltipContent?: React.ReactNode; +} + +export const BetaBadgeHeaderSection: React.SFC = ({ + tooltipContent = 'Please help us improve by reporting issues or bugs in the Kibana repo.', +}) => ( + + + +); + +export const InfrastructureBetaBadgeHeaderSection = () => ( + +); + +export const LogsBetaBadgeHeaderSection = () => ( + +); + +const VerticallyCenteredHeaderSection = styled(EuiHeaderSection)` + padding-left: ${props => props.theme.eui.euiSizeS}; + padding-right: ${props => props.theme.eui.euiSizeS}; + align-items: center; +`; diff --git a/x-pack/plugins/infra/public/components/header.tsx b/x-pack/plugins/infra/public/components/header.tsx index e1136434b7536a..38c71741ab4b96 100644 --- a/x-pack/plugins/infra/public/components/header.tsx +++ b/x-pack/plugins/infra/public/components/header.tsx @@ -15,6 +15,7 @@ import styled from 'styled-components'; interface HeaderProps { breadcrumbs?: EuiBreadcrumbDefinition[]; + appendSections?: React.ReactNode; } export class Header extends React.PureComponent { @@ -26,13 +27,14 @@ export class Header extends React.PureComponent { ]; public render() { - const { breadcrumbs = [] } = this.props; + const { breadcrumbs = [], appendSections = null } = this.props; return ( + {appendSections} ); } diff --git a/x-pack/plugins/infra/public/pages/home/index.tsx b/x-pack/plugins/infra/public/pages/home/index.tsx index 14c57040b738ac..9032b30d42266a 100644 --- a/x-pack/plugins/infra/public/pages/home/index.tsx +++ b/x-pack/plugins/infra/public/pages/home/index.tsx @@ -13,6 +13,7 @@ import { EmptyPage } from '../../components/empty_page'; import { Header } from '../../components/header'; import { ColumnarPage } from '../../components/page'; +import { InfrastructureBetaBadgeHeaderSection } from '../../components/beta_badge_header_section'; import { WithWaffleFilterUrlState } from '../../containers/waffle/with_waffle_filters'; import { WithWaffleOptionsUrlState } from '../../containers/waffle/with_waffle_options'; import { WithWaffleTimeUrlState } from '../../containers/waffle/with_waffle_time'; @@ -30,7 +31,7 @@ export class HomePage extends React.PureComponent { -
+
} /> diff --git a/x-pack/plugins/infra/public/pages/logs/logs.tsx b/x-pack/plugins/infra/public/pages/logs/logs.tsx index 1b001d74047858..7b24cbaa52609d 100644 --- a/x-pack/plugins/infra/public/pages/logs/logs.tsx +++ b/x-pack/plugins/infra/public/pages/logs/logs.tsx @@ -13,6 +13,7 @@ import { EmptyPage } from '../../components/empty_page'; import { Header } from '../../components/header'; import { ColumnarPage } from '../../components/page'; +import { LogsBetaBadgeHeaderSection } from '../../components/beta_badge_header_section'; import { WithLogFilterUrlState } from '../../containers/logs/with_log_filter'; import { WithLogMinimapUrlState } from '../../containers/logs/with_log_minimap'; import { WithLogPositionUrlState } from '../../containers/logs/with_log_position'; @@ -32,7 +33,10 @@ export class LogsPage extends React.Component { -
+
} + breadcrumbs={[{ text: 'Logs' }]} + /> diff --git a/x-pack/plugins/infra/public/pages/metrics/index.tsx b/x-pack/plugins/infra/public/pages/metrics/index.tsx index d6fef00e11c465..df4451c7d90ff3 100644 --- a/x-pack/plugins/infra/public/pages/metrics/index.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/index.tsx @@ -20,6 +20,7 @@ import { import styled, { withTheme } from 'styled-components'; import { InfraNodeType, InfraTimerangeInput } from '../../../common/graphql/types'; import { AutoSizer } from '../../components/auto_sizer'; +import { InfrastructureBetaBadgeHeaderSection } from '../../components/beta_badge_header_section'; import { Header } from '../../components/header'; import { Metrics } from '../../components/metrics'; import { MetricsTimeControls } from '../../components/metrics/time_controls'; @@ -71,7 +72,10 @@ class MetricDetailPage extends React.PureComponent { return ( -
+
} + breadcrumbs={breadcrumbs} + /> diff --git a/x-pack/plugins/infra/types/eui.d.ts b/x-pack/plugins/infra/types/eui.d.ts index 2f196a95d2d827..8b6c2c07cecd2f 100644 --- a/x-pack/plugins/infra/types/eui.d.ts +++ b/x-pack/plugins/infra/types/eui.d.ts @@ -164,4 +164,13 @@ declare module '@elastic/eui' { }; export const EuiDatePickerRange: React.SFC; + + export type EuiBetaBadgeProps = CommonProps & { + iconType?: IconType; + label: React.ReactNode; + title?: string; + tooltipContent?: React.ReactNode; + tooltipPosition?: EuiToolTipPosition; + }; + export const EuiBetaBadge: React.SFC; }