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

[Uptime] Improve overview and details page responsiveness (#65500)

Browse source
This commit is contained in:
Shahzad 2020-05-14 12:11:46 +02:00 • committed by GitHub
parent 6a3db2c776
commit 8e53ea5c3e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 350 additions and 270 deletions
Download patch file Download diff file Expand all files Collapse all files

4
x-pack/plugins/uptime/public/components/monitor/location_map/__tests__/__snapshots__/location_map.test.tsx.snap generated
View file

@ -4,6 +4,7 @@ exports[`LocationMap component doesnt shows warning if geo is provided 1`] = `
<EuiErrorBoundary>
<Styled(EuiFlexGroup)
gutterSize="none"
justifyContent="flexEnd"
wrap={true}
>
<Styled(EuiFlexItem)>
@ -79,6 +80,7 @@ exports[`LocationMap component renders correctly against snapshot 1`] = `
<EuiErrorBoundary>
<Styled(EuiFlexGroup)
gutterSize="none"
justifyContent="flexEnd"
wrap={true}
>
<Styled(EuiFlexItem)>
@ -165,6 +167,7 @@ exports[`LocationMap component renders named locations that have missing geo dat
<EuiErrorBoundary>
<Styled(EuiFlexGroup)
gutterSize="none"
justifyContent="flexEnd"
wrap={true}
>
<Styled(EuiFlexItem)>
@ -213,6 +216,7 @@ exports[`LocationMap component shows warning if geo information is missing 1`] =
<EuiErrorBoundary>
<Styled(EuiFlexGroup)
gutterSize="none"
justifyContent="flexEnd"
wrap={true}
>
<Styled(EuiFlexItem)>

8
x-pack/plugins/uptime/public/components/monitor/location_map/__tests__/__snapshots__/location_status_tags.test.tsx.snap generated
View file

@ -98,7 +98,7 @@ exports[`LocationStatusTags component renders when all locations are down 1`] =
margin-top: auto;
}
@media (max-width:830px) {
@media (max-width:1042px) {
.c1 {
display: inline-block;
margin-right: 16px;
@ -213,7 +213,7 @@ exports[`LocationStatusTags component renders when all locations are up 1`] = `
margin-top: auto;
}
@media (max-width:830px) {
@media (max-width:1042px) {
.c1 {
display: inline-block;
margin-right: 16px;
@ -329,7 +329,7 @@ Array [
margin-top: auto;
}
@media (max-width:830px) {
@media (max-width:1042px) {
.c1 {
display: inline-block;
margin-right: 16px;
@ -659,7 +659,7 @@ Array [
padding-left: 18px;
}
@media (max-width:830px) {
@media (max-width:1042px) {
}

6
x-pack/plugins/uptime/public/components/monitor/location_map/location_map.tsx
View file

@ -30,7 +30,9 @@ const MapPanel = styled.div`
const EuiFlexItemTags = styled(EuiFlexItem)`
padding-top: 5px;
@media (max-width: 850px) {
@media (max-width: 1042px) {
flex-basis: 80% !important;
flex-grow: 0 !important;
order: 1;
}
`;
@ -75,7 +77,7 @@ export const LocationMap = ({ monitorLocations }: LocationMapProps) => {
return (
<EuiErrorBoundary>
<FlexGroup wrap={true} gutterSize="none">
<FlexGroup wrap={true} gutterSize="none" justifyContent="flexEnd">
<EuiFlexItemTags>
<LocationStatusTags locations={monitorLocations?.locations || []} />
</EuiFlexItemTags>

2
x-pack/plugins/uptime/public/components/monitor/location_map/location_status_tags.tsx
View file

@ -25,7 +25,7 @@ const TextStyle = styled.div`
const BadgeItem = styled.div`
margin-bottom: 5px;
white-space: nowrap;
@media (max-width: 830px) {
@media (max-width: 1042px) {
display: inline-block;
margin-right: 16px;
}

5
x-pack/plugins/uptime/public/components/monitor/monitor_status_details/__test__/__snapshots__/ssl_certificate.test.tsx.snap generated
View file

@ -5,13 +5,13 @@ Array [
<div
class="euiText euiText--medium"
>
Certificate
Certificate:
</div>,
<div
class="euiSpacer euiSpacer--s"
/>,
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
@ -46,6 +46,7 @@ Array [
>
<div
class="euiText euiText--medium"
style="white-space:nowrap"
>
Certificate overview
</div>

6
x-pack/plugins/uptime/public/components/monitor/monitor_status_details/monitor_status_bar/ssl_certificate.tsx
View file

@ -34,11 +34,11 @@ export const MonitorSSLCertificate = ({ tls }: Props) => {
<>
<EuiText>
{i18n.translate('xpack.uptime.monitorStatusBar.sslCertificate.title', {
defaultMessage: 'Certificate',
defaultMessage: 'Certificate:',
})}
</EuiText>
<EuiSpacer size="s" />
<EuiFlexGroup>
<EuiFlexGroup wrap>
<EuiFlexItem grow={false}>
<EuiText
className="eui-displayInline"
@ -87,7 +87,7 @@ export const MonitorSSLCertificate = ({ tls }: Props) => {
</EuiFlexItem>
<EuiFlexItem>
<Link to={CERTIFICATES_ROUTE} className="eui-displayInline">
<EuiText>
<EuiText style={{ whiteSpace: 'nowrap' }}>
{i18n.translate('xpack.uptime.monitorStatusBar.sslCertificate.overview', {
defaultMessage: 'Certificate overview',
})}

9
x-pack/plugins/uptime/public/components/monitor/monitor_status_details/status_details.tsx
View file

@ -18,8 +18,13 @@ interface MonitorStatusDetailsProps {
}
const WrapFlexItem = styled(EuiFlexItem)`
@media (max-width: 1150px) {
width: 100%;
&&& {
@media (max-width: 768px) {
width: 100%;
}
@media (max-width: 1042px) {
flex-basis: 520px;
}
}
`;

9
x-pack/plugins/uptime/public/components/overview/filter_group/filter_group.tsx
View file

@ -6,6 +6,7 @@
import React, { useState } from 'react';
import { EuiFilterGroup } from '@elastic/eui';
import styled from 'styled-components';
import { FilterPopoverProps, FilterPopover } from './filter_popover';
import { OverviewFilters } from '../../../../common/runtime_types/overview_filters';
import { filterLabels } from './translations';
@ -16,6 +17,10 @@ interface PresentationalComponentProps {
overviewFilters: OverviewFilters;
}
const Container = styled(EuiFilterGroup)`
margin-bottom: 10px;
`;
export const FilterGroupComponent: React.FC<PresentationalComponentProps> = ({
overviewFilters,
loading,
@ -79,10 +84,10 @@ export const FilterGroupComponent: React.FC<PresentationalComponentProps> = ({
];
return (
<EuiFilterGroup>
<Container>
{filterPopoverProps.map(item => (
<FilterPopover key={item.id} {...item} />
))}
</EuiFilterGroup>
</Container>
);
};

2
x-pack/plugins/uptime/public/components/overview/kuery_bar/kuery_bar.tsx
View file

@ -19,7 +19,7 @@ import {
} from '../../../../../../../src/plugins/data/public';
const Container = styled.div`
margin-bottom: 10px;
margin-bottom: 4px;
`;
interface State {

493
x-pack/plugins/uptime/public/pages/__tests__/__snapshots__/page_header.test.tsx.snap generated
View file

@ -2,11 +2,30 @@
exports[`PageHeader shallow renders extra links: page_header_with_extra_links 1`] = `
Array [
<div
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
@media only screen and (max-width:1024px) and (min-width:868px) {
.c0.c0.c0 .euiSuperDatePicker__flexWrapper {
width: 500px;
}
}
@media only screen and (max-width:880px) {
.c0.c0.c0 {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.c0.c0.c0 .euiSuperDatePicker__flexWrapper {
width: calc(100% + 8px);
}
}
<div
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--wrap"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
class="euiFlexItem"
>
<h1
class="euiTitle euiTitle--medium"
@ -18,56 +37,95 @@ Array [
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
class="euiPopover euiPopover--anchorDownCenter"
>
<div
class="euiPopover__anchor"
>
<button
aria-label="Open alert context menu"
class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--iconRight"
data-test-subj="xpack.uptime.alertsPopover.toggleButton"
type="button"
>
<span
class="euiButtonEmpty__content"
>
<div
aria-hidden="true"
class="euiButtonEmpty__icon"
data-euiicon-type="arrowDown"
/>
<span
class="euiButtonEmpty__text"
>
Alerts
</span>
</span>
</button>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<a
href="/settings"
>
<button
class="euiButtonEmpty euiButtonEmpty--primary"
data-test-subj="settings-page-link"
type="button"
>
<span
class="euiButtonEmpty__content"
>
<div
aria-hidden="true"
class="euiButtonEmpty__icon"
data-euiicon-type="gear"
/>
<span
class="euiButtonEmpty__text"
>
Settings
</span>
</span>
</button>
</a>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero c0"
style="flex-basis:485px"
>
<div
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
>
<div
class="euiFlexItem"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
class="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
class="euiPopover euiPopover--anchorDownLeft"
id="QuickSelectPopover"
>
<div
class="euiPopover euiPopover--anchorDownCenter"
>
<div
class="euiPopover__anchor"
>
<button
aria-label="Open alert context menu"
class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--iconRight"
data-test-subj="xpack.uptime.alertsPopover.toggleButton"
type="button"
>
<span
class="euiButtonEmpty__content"
>
<div
aria-hidden="true"
class="euiButtonEmpty__icon"
data-euiicon-type="arrowDown"
/>
<span
class="euiButtonEmpty__text"
>
Alerts
</span>
</span>
</button>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<a
href="/settings"
class="euiPopover__anchor euiQuickSelectPopover__anchor"
>
<button
class="euiButtonEmpty euiButtonEmpty--primary"
data-test-subj="settings-page-link"
aria-label="Date quick select"
class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiFormControlLayout__prepend"
data-test-subj="superDatePickerToggleQuickMenuButton"
type="button"
>
<span
@ -76,122 +134,80 @@ Array [
<div
aria-hidden="true"
class="euiButtonEmpty__icon"
data-euiicon-type="gear"
data-euiicon-type="arrowDown"
/>
<span
class="euiButtonEmpty__text"
class="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
>
Settings
<div
data-euiicon-type="clock"
/>
</span>
</span>
</button>
</a>
</div>
</div>
<div
class="euiFormControlLayout__childrenWrapper"
>
<div
class="euiDatePickerRange euiDatePickerRange--inGroup"
>
<button
class="euiSuperDatePicker__prettyFormat"
data-test-subj="superDatePickerShowDatesButton"
>
Last 15 minutes
<span
class="euiSuperDatePicker__prettyFormatLink"
>
Show dates
</span>
</button>
</div>
</div>
</div>
</div>
<div
class="euiFlexItem"
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
<span
class="euiToolTipAnchor"
>
<div
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
<button
class="euiButton euiButton--primary euiSuperUpdateButton euiButton--fill"
data-test-subj="superDatePickerApplyTimeButton"
type="button"
>
<div
class="euiFlexItem"
<span
class="euiButton__content"
>
<div
class="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
>
<div
class="euiPopover euiPopover--anchorDownLeft"
id="QuickSelectPopover"
>
<div
class="euiPopover__anchor euiQuickSelectPopover__anchor"
>
<button
aria-label="Date quick select"
class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiFormControlLayout__prepend"
data-test-subj="superDatePickerToggleQuickMenuButton"
type="button"
>
<span
class="euiButtonEmpty__content"
>
<div
aria-hidden="true"
class="euiButtonEmpty__icon"
data-euiicon-type="arrowDown"
/>
<span
class="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
>
<div
data-euiicon-type="clock"
/>
</span>
</span>
</button>
</div>
</div>
<div
class="euiFormControlLayout__childrenWrapper"
>
<div
class="euiDatePickerRange euiDatePickerRange--inGroup"
>
<button
class="euiSuperDatePicker__prettyFormat"
data-test-subj="superDatePickerShowDatesButton"
>
Last 15 minutes
<span
class="euiSuperDatePicker__prettyFormatLink"
>
Show dates
</span>
</button>
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
aria-hidden="true"
class="euiButton__icon"
data-euiicon-type="refresh"
/>
<span
class="euiToolTipAnchor"
class="euiButton__text euiSuperUpdateButton__text"
>
<button
class="euiButton euiButton--primary euiSuperUpdateButton euiButton--fill"
data-test-subj="superDatePickerApplyTimeButton"
type="button"
>
<span
class="euiButton__content"
>
<div
aria-hidden="true"
class="euiButton__icon"
data-euiicon-type="refresh"
/>
<span
class="euiButton__text euiSuperUpdateButton__text"
>
Refresh
</span>
</span>
</button>
Refresh
</span>
</div>
</div>
</div>
</span>
</button>
</span>
</div>
</div>
</div>
</div>,
<div
@media only screen and (max-width:1024px) and (min-width:868px) {
}
@media only screen and (max-width:880px) {
}
<div
class="euiSpacer euiSpacer--s"
/>,
]
@ -199,11 +215,30 @@ Array [
exports[`PageHeader shallow renders with the date picker: page_header_with_date_picker 1`] = `
Array [
<div
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
@media only screen and (max-width:1024px) and (min-width:868px) {
.c0.c0.c0 .euiSuperDatePicker__flexWrapper {
width: 500px;
}
}
@media only screen and (max-width:880px) {
.c0.c0.c0 {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.c0.c0.c0 .euiSuperDatePicker__flexWrapper {
width: calc(100% + 8px);
}
}
<div
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--wrap"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
class="euiFlexItem"
>
<h1
class="euiTitle euiTitle--medium"
@ -213,116 +248,113 @@ Array [
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
/>
<div
class="euiFlexItem euiFlexItem--flexGrowZero c0"
style="flex-basis:485px"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
>
<div
class="euiFlexItem"
/>
<div
class="euiFlexItem"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
class="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
>
<div
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
class="euiPopover euiPopover--anchorDownLeft"
id="QuickSelectPopover"
>
<div
class="euiFlexItem"
class="euiPopover__anchor euiQuickSelectPopover__anchor"
>
<div
class="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
<button
aria-label="Date quick select"
class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiFormControlLayout__prepend"
data-test-subj="superDatePickerToggleQuickMenuButton"
type="button"
>
<div
class="euiPopover euiPopover--anchorDownLeft"
id="QuickSelectPopover"
<span
class="euiButtonEmpty__content"
>
<div
class="euiPopover__anchor euiQuickSelectPopover__anchor"
>
<button
aria-label="Date quick select"
class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiFormControlLayout__prepend"
data-test-subj="superDatePickerToggleQuickMenuButton"
type="button"
>
<span
class="euiButtonEmpty__content"
>
<div
aria-hidden="true"
class="euiButtonEmpty__icon"
data-euiicon-type="arrowDown"
/>
<span
class="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
>
<div
data-euiicon-type="clock"
/>
</span>
</span>
</button>
</div>
</div>
<div
class="euiFormControlLayout__childrenWrapper"
>
<div
class="euiDatePickerRange euiDatePickerRange--inGroup"
>
<button
class="euiSuperDatePicker__prettyFormat"
data-test-subj="superDatePickerShowDatesButton"
>
Last 15 minutes
<span
class="euiSuperDatePicker__prettyFormatLink"
>
Show dates
</span>
</button>
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<span
class="euiToolTipAnchor"
>
<button
class="euiButton euiButton--primary euiSuperUpdateButton euiButton--fill"
data-test-subj="superDatePickerApplyTimeButton"
type="button"
>
aria-hidden="true"
class="euiButtonEmpty__icon"
data-euiicon-type="arrowDown"
/>
<span
class="euiButton__content"
class="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
>
<div
aria-hidden="true"
class="euiButton__icon"
data-euiicon-type="refresh"
data-euiicon-type="clock"
/>
<span
class="euiButton__text euiSuperUpdateButton__text"
>
Refresh
</span>
</span>
</button>
</span>
</span>
</button>
</div>
</div>
<div
class="euiFormControlLayout__childrenWrapper"
>
<div
class="euiDatePickerRange euiDatePickerRange--inGroup"
>
<button
class="euiSuperDatePicker__prettyFormat"
data-test-subj="superDatePickerShowDatesButton"
>
Last 15 minutes
<span
class="euiSuperDatePicker__prettyFormatLink"
>
Show dates
</span>
</button>
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<span
class="euiToolTipAnchor"
>
<button
class="euiButton euiButton--primary euiSuperUpdateButton euiButton--fill"
data-test-subj="superDatePickerApplyTimeButton"
type="button"
>
<span
class="euiButton__content"
>
<div
aria-hidden="true"
class="euiButton__icon"
data-euiicon-type="refresh"
/>
<span
class="euiButton__text euiSuperUpdateButton__text"
>
Refresh
</span>
</span>
</button>
</span>
</div>
</div>
</div>
</div>,
<div
@media only screen and (max-width:1024px) and (min-width:868px) {
}
@media only screen and (max-width:880px) {
}
<div
class="euiSpacer euiSpacer--s"
/>,
]
@ -331,10 +363,10 @@ Array [
exports[`PageHeader shallow renders without the date picker: page_header_no_date_picker 1`] = `
Array [
<div
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--wrap"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
class="euiFlexItem"
>
<h1
class="euiTitle euiTitle--medium"
@ -344,18 +376,7 @@ Array [
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexItem"
/>
<div
class="euiFlexItem"
/>
</div>
</div>
/>
</div>,
<div
class="euiSpacer euiSpacer--s"

20
x-pack/plugins/uptime/public/pages/monitor.tsx
View file

@ -15,6 +15,24 @@ import { useMonitorId } from '../hooks';
import { MonitorCharts } from '../components/monitor';
import { MonitorStatusDetails, PingList } from '../components/monitor';
import { getDynamicSettings } from '../state/actions/dynamic_settings';
import { Ping } from '../../common/runtime_types/ping';
const isAutogeneratedId = (id: string) => {
const autoGeneratedId = /^auto-(icmp|http|tcp)-OX[A-F0-9]{16}-[a-f0-9]{16}/;
return autoGeneratedId.test(id);
};
// For monitors with no explicit ID, we display the URL instead of the
// auto-generated ID because it is difficult to derive meaning from a
// generated id like `auto-http-0X8D6082B94BBE3B8A`.
// We may deprecate this behavior in the next major release, because
// the heartbeat config will require an explicit ID.
const getPageTitle = (monId: string, selectedMonitor: Ping | null) => {
if (isAutogeneratedId(monId)) {
return selectedMonitor?.url?.full || monId;
}
return monId;
};
export const MonitorPage: React.FC = () => {
const dispatch = useDispatch();
@ -30,7 +48,7 @@ export const MonitorPage: React.FC = () => {
useTrackPageview({ app: 'uptime', path: 'monitor' });
useTrackPageview({ app: 'uptime', path: 'monitor', delay: 15000 });
const nameOrId = selectedMonitor?.monitor?.name || monitorId || '';
const nameOrId = selectedMonitor?.monitor?.name || getPageTitle(monitorId, selectedMonitor);
useBreadcrumbs([{ text: nameOrId }]);
return (
<>

7
x-pack/plugins/uptime/public/pages/overview.tsx
View file

@ -28,6 +28,9 @@ interface Props {
const EuiFlexItemStyled = styled(EuiFlexItem)`
&& {
min-width: 598px;
@media only screen and (max-width: 1128px) {
min-width: 500px;
}
@media only screen and (max-width: 630px) {
min-width: initial;
}
@ -66,8 +69,8 @@ export const OverviewPageComponent = React.memo(({ indexPattern, setEsKueryFilte
<>
<PageHeader headingText={heading} extraLinks={true} datePicker={true} />
<EmptyState>
<EuiFlexGroup gutterSize="xs" wrap responsive>
<EuiFlexItem grow={1} style={{ flexBasis: 500 }}>
<EuiFlexGroup gutterSize="xs" wrap responsive={false}>
<EuiFlexItem grow={1} style={{ flexBasis: 485 }}>
<KueryBar
aria-label={i18n.translate('xpack.uptime.filterBar.ariaLabel', {
defaultMessage: 'Input filter criteria for the overview page',

49
x-pack/plugins/uptime/public/pages/page_header.tsx
View file

@ -8,6 +8,7 @@ import React from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiSpacer, EuiButtonEmpty } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { UptimeDatePicker } from '../components/common/uptime_date_picker';
import { SETTINGS_ROUTE } from '../../common/constants';
import { ToggleAlertFlyoutButton } from '../components/overview/alerts/alerts_containers';
@ -20,16 +21,34 @@ interface PageHeaderProps {
const SETTINGS_LINK_TEXT = i18n.translate('xpack.uptime.page_header.settingsLink', {
defaultMessage: 'Settings',
});
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 = React.memo(
({ headingText, extraLinks = false, datePicker = true }: PageHeaderProps) => {
const datePickerComponent = datePicker ? (
<EuiFlexItem grow={false}>
<UptimeDatePicker />
</EuiFlexItem>
) : null;
const DatePickerComponent = () =>
datePicker ? (
<StyledPicker grow={false} style={{ flexBasis: 485 }}>
<UptimeDatePicker />
</StyledPicker>
) : null;
const extraLinkComponents = !extraLinks ? null : (
<EuiFlexGroup alignItems="flexEnd">
<EuiFlexGroup alignItems="flexEnd" responsive={false}>
<EuiFlexItem grow={false}>
<ToggleAlertFlyoutButton />
</EuiFlexItem>
@ -45,18 +64,20 @@ export const PageHeader = React.memo(
return (
<>
<EuiFlexGroup alignItems="center" justifyContent="spaceBetween" gutterSize="s" wrap={true}>
<EuiFlexItem grow={false}>
<EuiFlexGroup
alignItems="center"
justifyContent="spaceBetween"
gutterSize="s"
wrap
responsive={false}
>
<EuiFlexItem grow={true}>
<EuiTitle>
<h1>{headingText}</h1>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFlexGroup>
<EuiFlexItem>{extraLinkComponents}</EuiFlexItem>
<EuiFlexItem>{datePickerComponent}</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false}>{extraLinkComponents}</EuiFlexItem>
<DatePickerComponent />
</EuiFlexGroup>
<EuiSpacer size="s" />
</>