In accordance with #25008, this adds a "Beta" badge with a corresponding tooltip to the header.
This commit is contained in:
parent
78b9441c0a
commit
ccc6b25a36
|
@ -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<BetaBadgeHeaderSectionProps> = ({
|
||||
tooltipContent = 'Please help us improve by reporting issues or bugs in the Kibana repo.',
|
||||
}) => (
|
||||
<VerticallyCenteredHeaderSection side="right">
|
||||
<EuiBetaBadge label="Beta" tooltipContent={tooltipContent} />
|
||||
</VerticallyCenteredHeaderSection>
|
||||
);
|
||||
|
||||
export const InfrastructureBetaBadgeHeaderSection = () => (
|
||||
<BetaBadgeHeaderSection tooltipContent="The Infrastructure UI is still in beta. Please help us improve by reporting issues or bugs in the Kibana repo." />
|
||||
);
|
||||
|
||||
export const LogsBetaBadgeHeaderSection = () => (
|
||||
<BetaBadgeHeaderSection tooltipContent="The Logs UI is still in beta. Please help us improve by reporting issues or bugs in the Kibana repo." />
|
||||
);
|
||||
|
||||
const VerticallyCenteredHeaderSection = styled(EuiHeaderSection)`
|
||||
padding-left: ${props => props.theme.eui.euiSizeS};
|
||||
padding-right: ${props => props.theme.eui.euiSizeS};
|
||||
align-items: center;
|
||||
`;
|
|
@ -15,6 +15,7 @@ import styled from 'styled-components';
|
|||
|
||||
interface HeaderProps {
|
||||
breadcrumbs?: EuiBreadcrumbDefinition[];
|
||||
appendSections?: React.ReactNode;
|
||||
}
|
||||
|
||||
export class Header extends React.PureComponent<HeaderProps> {
|
||||
|
@ -26,13 +27,14 @@ export class Header extends React.PureComponent<HeaderProps> {
|
|||
];
|
||||
|
||||
public render() {
|
||||
const { breadcrumbs = [] } = this.props;
|
||||
const { breadcrumbs = [], appendSections = null } = this.props;
|
||||
|
||||
return (
|
||||
<HeaderWrapper>
|
||||
<EuiHeaderSection>
|
||||
<EuiHeaderBreadcrumbs breadcrumbs={[...this.staticBreadcrumbs, ...breadcrumbs]} />
|
||||
</EuiHeaderSection>
|
||||
{appendSections}
|
||||
</HeaderWrapper>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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 {
|
|||
<WithWaffleTimeUrlState />
|
||||
<WithWaffleFilterUrlState />
|
||||
<WithWaffleOptionsUrlState />
|
||||
<Header />
|
||||
<Header appendSections={<InfrastructureBetaBadgeHeaderSection />} />
|
||||
<HomeToolbar />
|
||||
<HomePageContent />
|
||||
</>
|
||||
|
|
|
@ -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 {
|
|||
<WithLogPositionUrlState />
|
||||
<WithLogMinimapUrlState />
|
||||
<WithLogTextviewUrlState />
|
||||
<Header breadcrumbs={[{ text: 'Logs' }]} />
|
||||
<Header
|
||||
appendSections={<LogsBetaBadgeHeaderSection />}
|
||||
breadcrumbs={[{ text: 'Logs' }]}
|
||||
/>
|
||||
<LogsToolbar />
|
||||
<LogsPageContent />
|
||||
</>
|
||||
|
|
|
@ -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<Props> {
|
|||
|
||||
return (
|
||||
<ColumnarPage>
|
||||
<Header breadcrumbs={breadcrumbs} />
|
||||
<Header
|
||||
appendSections={<InfrastructureBetaBadgeHeaderSection />}
|
||||
breadcrumbs={breadcrumbs}
|
||||
/>
|
||||
<WithMetricsTimeUrlState />
|
||||
<DetailPageContent>
|
||||
<WithOptions>
|
||||
|
|
9
x-pack/plugins/infra/types/eui.d.ts
vendored
9
x-pack/plugins/infra/types/eui.d.ts
vendored
|
@ -164,4 +164,13 @@ declare module '@elastic/eui' {
|
|||
};
|
||||
|
||||
export const EuiDatePickerRange: React.SFC<EuiDatePickerRangeProps>;
|
||||
|
||||
export type EuiBetaBadgeProps = CommonProps & {
|
||||
iconType?: IconType;
|
||||
label: React.ReactNode;
|
||||
title?: string;
|
||||
tooltipContent?: React.ReactNode;
|
||||
tooltipPosition?: EuiToolTipPosition;
|
||||
};
|
||||
export const EuiBetaBadge: React.SFC<EuiBetaBadgeProps>;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue