github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Unified observability] Tweak overview page header (#128894)

Browse source 
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Alejandro Fernández Gómez 2022-04-01 17:04:07 +02:00 • committed by GitHub
parent 68630e4f77
commit b2be5f0e9f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 41 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

58
x-pack/plugins/observability/public/pages/overview/old_overview_page.tsx
View file

@ -75,8 +75,7 @@ export function OverviewPage({ routeParams }: Props) {
const { cases, docLinks, http } = useKibana<ObservabilityAppServices>().services;
const { ObservabilityPageTemplate, config } = usePluginContext();
const { relativeStart, relativeEnd, absoluteStart, absoluteEnd, refreshInterval, refreshPaused } =
useDatePickerContext();
const { relativeStart, relativeEnd, absoluteStart, absoluteEnd } = useDatePickerContext();
const { data: newsFeed } = useFetcher(() => getNewsFeed({ http }), [http]);
@ -135,22 +134,12 @@ export function OverviewPage({ routeParams }: Props) {
pageHeader={
hasData
? {
pageTitle: overviewPageTitle,
rightSideItems: [
<EuiButton color="text" iconType="wrench" onClick={handleGuidedSetupClick}>
<FormattedMessage
id="xpack.observability.overview.guidedSetupButton"
defaultMessage="Guided setup"
/>
</EuiButton>,
<DatePicker
rangeFrom={relativeStart}
rangeTo={relativeEnd}
refreshInterval={refreshInterval}
refreshPaused={refreshPaused}
children: (
<PageHeader
handleGuidedSetupClick={handleGuidedSetupClick}
onTimeRangeRefresh={onTimeRangeRefresh}
/>,
],
/>
),
}
: undefined
}
@ -246,6 +235,41 @@ export function OverviewPage({ routeParams }: Props) {
);
}
interface PageHeaderProps {
handleGuidedSetupClick: () => void;
onTimeRangeRefresh: () => void;
}
function PageHeader({ handleGuidedSetupClick, onTimeRangeRefresh }: PageHeaderProps) {
const { relativeStart, relativeEnd, refreshInterval, refreshPaused } = useDatePickerContext();
return (
<EuiFlexGroup wrap gutterSize="s" justifyContent="flexEnd">
<EuiFlexItem grow={1}>
<EuiTitle>
<h1 className="eui-textNoWrap">{overviewPageTitle}</h1>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<DatePicker
rangeFrom={relativeStart}
rangeTo={relativeEnd}
refreshInterval={refreshInterval}
refreshPaused={refreshPaused}
onTimeRangeRefresh={onTimeRangeRefresh}
/>
</EuiFlexItem>
<EuiFlexItem grow={false} style={{ alignItems: 'flex-end' }}>
<EuiButton color="text" iconType="wrench" onClick={handleGuidedSetupClick}>
<FormattedMessage
id="xpack.observability.overview.guidedSetupButton"
defaultMessage="Guided setup"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
);
}
const overviewPageTitle = i18n.translate('xpack.observability.overview.pageTitle', {
defaultMessage: 'Overview',
});