-
-
-
-
-
-
-
-
@@ -308,7 +297,7 @@ Array [
}
,
]
`;
@@ -420,16 +409,91 @@ Array [
}
+
+
- TestingHeading
-
+
+
+
+
,
]
`;
exports[`PageHeader shallow renders without the date picker: page_header_no_date_picker 1`] = `
Array [
-
,
-
,
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
,
-
,
]
`;
diff --git a/x-pack/plugins/uptime/public/pages/__tests__/page_header.test.tsx b/x-pack/plugins/uptime/public/components/common/header/__tests__/page_header.test.tsx
similarity index 82%
rename from x-pack/plugins/uptime/public/pages/__tests__/page_header.test.tsx
rename to x-pack/plugins/uptime/public/components/common/header/__tests__/page_header.test.tsx
index 63d4c24f965d9..0b72cc64f8102 100644
--- a/x-pack/plugins/uptime/public/pages/__tests__/page_header.test.tsx
+++ b/x-pack/plugins/uptime/public/components/common/header/__tests__/page_header.test.tsx
@@ -6,13 +6,13 @@
import React from 'react';
import { PageHeader } from '../page_header';
-import { renderWithRouter, MountWithReduxProvider } from '../../lib';
+import { renderWithRouter, MountWithReduxProvider } from '../../../../lib';
describe('PageHeader', () => {
it('shallow renders with the date picker', () => {
const component = renderWithRouter(
-
+
);
expect(component).toMatchSnapshot('page_header_with_date_picker');
@@ -21,7 +21,7 @@ describe('PageHeader', () => {
it('shallow renders without the date picker', () => {
const component = renderWithRouter(
-
+
);
expect(component).toMatchSnapshot('page_header_no_date_picker');
@@ -30,7 +30,7 @@ describe('PageHeader', () => {
it('shallow renders extra links', () => {
const component = renderWithRouter(
-
+
);
expect(component).toMatchSnapshot('page_header_with_extra_links');
diff --git a/x-pack/plugins/uptime/public/components/common/header/action_menu.tsx b/x-pack/plugins/uptime/public/components/common/header/action_menu.tsx
new file mode 100644
index 0000000000000..b59470f66f796
--- /dev/null
+++ b/x-pack/plugins/uptime/public/components/common/header/action_menu.tsx
@@ -0,0 +1,36 @@
+/*
+ * 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 { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
+import { HeaderMenuPortal } from '../../../../../observability/public';
+import { AppMountParameters } from '../../../../../../../src/core/public';
+
+const ADD_DATA_LABEL = i18n.translate('xpack.uptime.addDataButtonLabel', {
+ defaultMessage: 'Add data',
+});
+
+export const ActionMenu = ({ appMountParameters }: { appMountParameters: AppMountParameters }) => {
+ const kibana = useKibana();
+
+ return (
+
+
+
+
+ {ADD_DATA_LABEL}
+
+
+
+
+ );
+};
diff --git a/x-pack/plugins/uptime/public/components/common/header/page_header.tsx b/x-pack/plugins/uptime/public/components/common/header/page_header.tsx
new file mode 100644
index 0000000000000..63bcb6663619d
--- /dev/null
+++ b/x-pack/plugins/uptime/public/components/common/header/page_header.tsx
@@ -0,0 +1,65 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiSpacer } from '@elastic/eui';
+import styled from 'styled-components';
+import { useRouteMatch } from 'react-router-dom';
+import { UptimeDatePicker } from '../uptime_date_picker';
+import { SyntheticsCallout } from '../../overview/synthetics_callout';
+import { PageTabs } from './page_tabs';
+import { CERTIFICATES_ROUTE, MONITOR_ROUTE, SETTINGS_ROUTE } from '../../../../common/constants';
+import { CertRefreshBtn } from '../../certificates/cert_refresh_btn';
+import { ToggleAlertFlyoutButton } from '../../overview/alerts/alerts_containers';
+
+const StyledPicker = styled(EuiFlexItem)`
+ &&& {
+ @media only screen and (max-width: 1024px) and (min-width: 868px) {
+ .euiSuperDatePicker__flexWrapper {
+ width: 500px;
+ }
+ }
+ @media only screen and (max-width: 880px) {
+ flex-grow: 1;
+ .euiSuperDatePicker__flexWrapper {
+ width: calc(100% + 8px);
+ }
+ }
+ }
+`;
+
+export const PageHeader = () => {
+ const isCertRoute = useRouteMatch(CERTIFICATES_ROUTE);
+ const isSettingsRoute = useRouteMatch(SETTINGS_ROUTE);
+
+ const DatePickerComponent = () =>
+ isCertRoute ? (
+
+ ) : (
+
+
+
+ );
+
+ const isMonRoute = useRouteMatch(MONITOR_ROUTE);
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+ {!isSettingsRoute && }
+
+ {isMonRoute &&
}
+ {!isMonRoute &&
}
+
+ );
+};
diff --git a/x-pack/plugins/uptime/public/components/common/header/page_tabs.tsx b/x-pack/plugins/uptime/public/components/common/header/page_tabs.tsx
new file mode 100644
index 0000000000000..68df15c52c65e
--- /dev/null
+++ b/x-pack/plugins/uptime/public/components/common/header/page_tabs.tsx
@@ -0,0 +1,80 @@
+/*
+ * 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, { useEffect, useState } from 'react';
+
+import { EuiTabs, EuiTab } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { useHistory, useRouteMatch } from 'react-router-dom';
+import { CERTIFICATES_ROUTE, OVERVIEW_ROUTE, SETTINGS_ROUTE } from '../../../../common/constants';
+
+const tabs = [
+ {
+ id: OVERVIEW_ROUTE,
+ name: i18n.translate('xpack.uptime.overviewPage.headerText', {
+ defaultMessage: 'Overview',
+ description: `The text that will be displayed in the app's heading when the Overview page loads.`,
+ }),
+ dataTestSubj: 'uptimeSettingsToOverviewLink',
+ },
+ {
+ id: CERTIFICATES_ROUTE,
+ name: 'Certificates',
+ dataTestSubj: 'uptimeCertificatesLink',
+ },
+ {
+ id: SETTINGS_ROUTE,
+ dataTestSubj: 'settings-page-link',
+ name: i18n.translate('xpack.uptime.page_header.settingsLink', {
+ defaultMessage: 'Settings',
+ }),
+ },
+];
+
+export const PageTabs = () => {
+ const [selectedTabId, setSelectedTabId] = useState
(null);
+
+ const history = useHistory();
+
+ const isOverView = useRouteMatch(OVERVIEW_ROUTE);
+ const isSettings = useRouteMatch(SETTINGS_ROUTE);
+ const isCerts = useRouteMatch(CERTIFICATES_ROUTE);
+
+ useEffect(() => {
+ if (isOverView?.isExact) {
+ setSelectedTabId(OVERVIEW_ROUTE);
+ }
+ if (isCerts) {
+ setSelectedTabId(CERTIFICATES_ROUTE);
+ }
+ if (isSettings) {
+ setSelectedTabId(SETTINGS_ROUTE);
+ }
+ if (!isOverView?.isExact && !isCerts && !isSettings) {
+ setSelectedTabId(null);
+ }
+ }, [isCerts, isSettings, isOverView]);
+
+ const renderTabs = () => {
+ return tabs.map(({ dataTestSubj, name, id }, index) => (
+ setSelectedTabId(id)}
+ isSelected={id === selectedTabId}
+ key={index}
+ data-test-subj={dataTestSubj}
+ href={history.createHref({ pathname: id })}
+ >
+ {name}
+
+ ));
+ };
+
+ return (
+
+ {renderTabs()}
+
+ );
+};
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap
index 39f860f76f2bd..bd1aecc9ede48 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/__tests__/__snapshots__/monitor_list.test.tsx.snap
@@ -826,26 +826,20 @@ exports[`MonitorList component renders loading state 1`] = `
`;
exports[`MonitorList component renders the monitor list 1`] = `
-.c3 {
+.c2 {
padding-right: 4px;
}
-.c4 {
+.c3 {
padding-top: 12px;
}
-.c1 {
- position: absolute;
- right: 16px;
- top: 16px;
-}
-
.c0 {
position: relative;
}
@media (max-width:574px) {
- .c2 {
+ .c1 {
min-width: 230px;
}
}
@@ -936,13 +930,6 @@ exports[`MonitorList component renders the monitor list 1`] = `