[Uptime]Refactor header and action menu (#83779)
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
parent
9d8dd6dc57
commit
2a8c609bf9
|
@ -20323,8 +20323,6 @@
|
|||
"xpack.uptime.breadcrumbs.overviewBreadcrumbText": "アップタイム",
|
||||
"xpack.uptime.certificates.heading": "TLS証明書({total})",
|
||||
"xpack.uptime.certificates.refresh": "更新",
|
||||
"xpack.uptime.certificates.returnToOverviewLinkLabel": "概要に戻る",
|
||||
"xpack.uptime.certificates.settingsLinkLabel": "設定",
|
||||
"xpack.uptime.certs.expired": "期限切れ",
|
||||
"xpack.uptime.certs.expires": "有効期限",
|
||||
"xpack.uptime.certs.expireSoon": "まもなく期限切れ",
|
||||
|
@ -20462,7 +20460,6 @@
|
|||
"xpack.uptime.monitorList.table.description": "列にステータス、名前、URL、IP、ダウンタイム履歴、統合が入力されたモニターステータス表です。この表は現在 {length} 項目を表示しています。",
|
||||
"xpack.uptime.monitorList.table.url.name": "Url",
|
||||
"xpack.uptime.monitorList.tlsColumnLabel": "TLS証明書",
|
||||
"xpack.uptime.monitorList.viewCertificateTitle": "証明書ステータス",
|
||||
"xpack.uptime.monitorStatusBar.durationTextAriaLabel": "ミリ秒単位の監視時間",
|
||||
"xpack.uptime.monitorStatusBar.healthStatusMessageAriaLabel": "監視ステータス",
|
||||
"xpack.uptime.monitorStatusBar.loadingMessage": "読み込み中…",
|
||||
|
@ -20528,7 +20525,6 @@
|
|||
"xpack.uptime.settings.error.couldNotSave": "設定を保存できませんでした!",
|
||||
"xpack.uptime.settings.invalid.error": "値は0よりも大きい値でなければなりません。",
|
||||
"xpack.uptime.settings.invalid.nanError": "値は整数でなければなりません。",
|
||||
"xpack.uptime.settings.returnToOverviewLinkLabel": "概要に戻る",
|
||||
"xpack.uptime.settings.saveSuccess": "設定が保存されました。",
|
||||
"xpack.uptime.settingsBreadcrumbText": "設定",
|
||||
"xpack.uptime.snapshot.donutChart.ariaLabel": "現在のステータスを表す円グラフ、{total}個中{down}個のモニターがダウンしています。",
|
||||
|
|
|
@ -20342,8 +20342,6 @@
|
|||
"xpack.uptime.breadcrumbs.overviewBreadcrumbText": "运行时间",
|
||||
"xpack.uptime.certificates.heading": "TLS 证书 ({total})",
|
||||
"xpack.uptime.certificates.refresh": "刷新",
|
||||
"xpack.uptime.certificates.returnToOverviewLinkLabel": "返回到概览",
|
||||
"xpack.uptime.certificates.settingsLinkLabel": "设置",
|
||||
"xpack.uptime.certs.expired": "已过期",
|
||||
"xpack.uptime.certs.expires": "过期",
|
||||
"xpack.uptime.certs.expireSoon": "即将过期",
|
||||
|
@ -20481,7 +20479,6 @@
|
|||
"xpack.uptime.monitorList.table.description": "具有“状态”、“名称”、“URL”、“IP”、“中断历史记录”和“集成”列的“监测状态”表。该表当前显示 {length} 个项目。",
|
||||
"xpack.uptime.monitorList.table.url.name": "URL",
|
||||
"xpack.uptime.monitorList.tlsColumnLabel": "TLS 证书",
|
||||
"xpack.uptime.monitorList.viewCertificateTitle": "证书状态",
|
||||
"xpack.uptime.monitorStatusBar.durationTextAriaLabel": "监测持续时间(毫秒)",
|
||||
"xpack.uptime.monitorStatusBar.healthStatusMessageAriaLabel": "检测状态",
|
||||
"xpack.uptime.monitorStatusBar.loadingMessage": "正在加载……",
|
||||
|
@ -20547,7 +20544,6 @@
|
|||
"xpack.uptime.settings.error.couldNotSave": "无法保存设置!",
|
||||
"xpack.uptime.settings.invalid.error": "值必须大于 0。",
|
||||
"xpack.uptime.settings.invalid.nanError": "值必须为整数。",
|
||||
"xpack.uptime.settings.returnToOverviewLinkLabel": "返回到概览",
|
||||
"xpack.uptime.settings.saveSuccess": "设置已保存!",
|
||||
"xpack.uptime.settingsBreadcrumbText": "设置",
|
||||
"xpack.uptime.snapshot.donutChart.ariaLabel": "显示当前状态的饼图。{total} 个监测中有 {down} 个已关闭。",
|
||||
|
|
|
@ -21,7 +21,7 @@ export function renderApp(
|
|||
core: CoreStart,
|
||||
plugins: ClientPluginsSetup,
|
||||
startPlugins: ClientPluginsStart,
|
||||
{ element, history }: AppMountParameters
|
||||
appMountParameters: AppMountParameters
|
||||
) {
|
||||
const {
|
||||
application: { capabilities },
|
||||
|
@ -47,7 +47,6 @@ export function renderApp(
|
|||
basePath: basePath.get(),
|
||||
darkMode: core.uiSettings.get(DEFAULT_DARK_MODE),
|
||||
commonlyUsedRanges: core.uiSettings.get(DEFAULT_TIMEPICKER_QUICK_RANGES),
|
||||
history,
|
||||
isApmAvailable: apm,
|
||||
isInfraAvailable: infrastructure,
|
||||
isLogsAvailable: logs,
|
||||
|
@ -68,12 +67,13 @@ export function renderApp(
|
|||
],
|
||||
}),
|
||||
setBadge,
|
||||
appMountParameters,
|
||||
setBreadcrumbs: core.chrome.setBreadcrumbs,
|
||||
};
|
||||
|
||||
ReactDOM.render(<UptimeApp {...props} />, element);
|
||||
ReactDOM.render(<UptimeApp {...props} />, appMountParameters.element);
|
||||
|
||||
return () => {
|
||||
ReactDOM.unmountComponentAtNode(element);
|
||||
ReactDOM.unmountComponentAtNode(appMountParameters.element);
|
||||
};
|
||||
}
|
||||
|
|
|
@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
|
|||
import React, { useEffect } from 'react';
|
||||
import { Provider as ReduxProvider } from 'react-redux';
|
||||
import { Router } from 'react-router-dom';
|
||||
import { I18nStart, ChromeBreadcrumb, CoreStart } from 'kibana/public';
|
||||
import { I18nStart, ChromeBreadcrumb, CoreStart, AppMountParameters } from 'kibana/public';
|
||||
import {
|
||||
KibanaContextProvider,
|
||||
RedirectAppLinks,
|
||||
|
@ -28,7 +28,7 @@ import { PageRouter } from '../routes';
|
|||
import { UptimeAlertsFlyoutWrapper } from '../components/overview/alerts';
|
||||
import { store } from '../state';
|
||||
import { kibanaService } from '../state/kibana_service';
|
||||
import { ScopedHistory } from '../../../../../src/core/public';
|
||||
import { ActionMenu } from '../components/common/header/action_menu';
|
||||
import { EuiThemeProvider } from '../../../observability/public';
|
||||
|
||||
export interface UptimeAppColors {
|
||||
|
@ -47,7 +47,6 @@ export interface UptimeAppProps {
|
|||
canSave: boolean;
|
||||
core: CoreStart;
|
||||
darkMode: boolean;
|
||||
history: ScopedHistory;
|
||||
i18n: I18nStart;
|
||||
isApmAvailable: boolean;
|
||||
isInfraAvailable: boolean;
|
||||
|
@ -58,6 +57,7 @@ export interface UptimeAppProps {
|
|||
renderGlobalHelpControls(): void;
|
||||
commonlyUsedRanges: CommonlyUsedRange[];
|
||||
setBreadcrumbs: (crumbs: ChromeBreadcrumb[]) => void;
|
||||
appMountParameters: AppMountParameters;
|
||||
}
|
||||
|
||||
const Application = (props: UptimeAppProps) => {
|
||||
|
@ -71,6 +71,7 @@ const Application = (props: UptimeAppProps) => {
|
|||
renderGlobalHelpControls,
|
||||
setBadge,
|
||||
startPlugins,
|
||||
appMountParameters,
|
||||
} = props;
|
||||
|
||||
useEffect(() => {
|
||||
|
@ -101,7 +102,7 @@ const Application = (props: UptimeAppProps) => {
|
|||
<KibanaContextProvider
|
||||
services={{ ...core, ...plugins, triggersActionsUi: startPlugins.triggersActionsUi }}
|
||||
>
|
||||
<Router history={props.history}>
|
||||
<Router history={appMountParameters.history}>
|
||||
<EuiThemeProvider darkMode={darkMode}>
|
||||
<UptimeRefreshContextProvider>
|
||||
<UptimeSettingsContextProvider {...props}>
|
||||
|
@ -112,6 +113,7 @@ const Application = (props: UptimeAppProps) => {
|
|||
<main>
|
||||
<UptimeAlertsFlyoutWrapper />
|
||||
<PageRouter />
|
||||
<ActionMenu appMountParameters={appMountParameters} />
|
||||
</main>
|
||||
</RedirectAppLinks>
|
||||
</EuiPage>
|
||||
|
|
|
@ -0,0 +1,51 @@
|
|||
/*
|
||||
* 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, { useContext } from 'react';
|
||||
import {
|
||||
EuiButton,
|
||||
EuiButtonEmpty,
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiHideFor,
|
||||
EuiShowFor,
|
||||
} from '@elastic/eui';
|
||||
import * as labels from '../../pages/translations';
|
||||
import { UptimeRefreshContext } from '../../contexts';
|
||||
|
||||
export const CertRefreshBtn = () => {
|
||||
const { refreshApp } = useContext(UptimeRefreshContext);
|
||||
|
||||
return (
|
||||
<EuiFlexItem style={{ alignItems: 'flex-end' }} grow={false}>
|
||||
<EuiFlexGroup responsive={false} gutterSize="s">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiHideFor sizes={['xs']}>
|
||||
<EuiButton
|
||||
fill
|
||||
iconType="refresh"
|
||||
onClick={() => {
|
||||
refreshApp();
|
||||
}}
|
||||
data-test-subj="superDatePickerApplyTimeButton"
|
||||
>
|
||||
{labels.REFRESH_CERT}
|
||||
</EuiButton>
|
||||
</EuiHideFor>
|
||||
<EuiShowFor sizes={['xs']}>
|
||||
<EuiButtonEmpty
|
||||
iconType="refresh"
|
||||
onClick={() => {
|
||||
refreshApp();
|
||||
}}
|
||||
data-test-subj="superDatePickerApplyTimeButton"
|
||||
/>
|
||||
</EuiShowFor>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
);
|
||||
};
|
|
@ -107,97 +107,86 @@ Array [
|
|||
}
|
||||
|
||||
<div
|
||||
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--wrap"
|
||||
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--wrap"
|
||||
>
|
||||
<div
|
||||
class="euiFlexItem"
|
||||
>
|
||||
<h1
|
||||
class="euiTitle euiTitle--medium eui-textNoWrap"
|
||||
<div
|
||||
class="euiTabs euiTabs--condensed"
|
||||
role="tablist"
|
||||
style="padding-left:16px"
|
||||
>
|
||||
TestingHeading
|
||||
</h1>
|
||||
<a
|
||||
aria-selected="false"
|
||||
class="euiTab"
|
||||
data-test-subj="uptimeSettingsToOverviewLink"
|
||||
href="/"
|
||||
rel="noreferrer"
|
||||
role="tab"
|
||||
>
|
||||
<span
|
||||
class="euiTab__content"
|
||||
>
|
||||
Overview
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
aria-selected="false"
|
||||
class="euiTab"
|
||||
data-test-subj="uptimeCertificatesLink"
|
||||
href="/certificates"
|
||||
rel="noreferrer"
|
||||
role="tab"
|
||||
>
|
||||
<span
|
||||
class="euiTab__content"
|
||||
>
|
||||
Certificates
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
aria-selected="false"
|
||||
class="euiTab"
|
||||
data-test-subj="settings-page-link"
|
||||
href="/settings"
|
||||
rel="noreferrer"
|
||||
role="tab"
|
||||
>
|
||||
<span
|
||||
class="euiTab__content"
|
||||
>
|
||||
Settings
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
>
|
||||
<div
|
||||
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow"
|
||||
class="euiPopover euiPopover--anchorDownCenter"
|
||||
>
|
||||
<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"
|
||||
data-test-subj="xpack.uptime.alertsPopover.toggleButton"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
|
||||
>
|
||||
<span
|
||||
class="euiButtonContent__icon"
|
||||
data-euiicon-type="arrowDown"
|
||||
/>
|
||||
<span
|
||||
class="euiButtonEmpty__text"
|
||||
>
|
||||
Alerts
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
>
|
||||
<a
|
||||
class="euiButtonEmpty euiButtonEmpty--primary"
|
||||
data-test-subj="settings-page-link"
|
||||
href="/settings"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<span
|
||||
class="euiButtonContent euiButtonEmpty__content"
|
||||
>
|
||||
<span
|
||||
class="euiButtonContent__icon"
|
||||
data-euiicon-type="gear"
|
||||
/>
|
||||
<span
|
||||
class="euiButtonEmpty__text"
|
||||
>
|
||||
Settings
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
class="euiPopover__anchor"
|
||||
>
|
||||
<button
|
||||
aria-label="Open alert context menu"
|
||||
class="euiButtonEmpty euiButtonEmpty--primary"
|
||||
data-test-subj="xpack.uptime.alertsPopover.toggleButton"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="euiButtonContent euiButtonEmpty__content"
|
||||
class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
|
||||
>
|
||||
<span
|
||||
class="euiButtonContent__icon"
|
||||
data-euiicon-type="plusInCircle"
|
||||
data-euiicon-type="arrowDown"
|
||||
/>
|
||||
<span
|
||||
class="euiButtonEmpty__text"
|
||||
>
|
||||
Add data
|
||||
Alerts
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
|
@ -308,7 +297,7 @@ Array [
|
|||
}
|
||||
|
||||
<div
|
||||
class="euiSpacer euiSpacer--s"
|
||||
class="euiSpacer euiSpacer--m"
|
||||
/>,
|
||||
]
|
||||
`;
|
||||
|
@ -420,16 +409,91 @@ Array [
|
|||
}
|
||||
|
||||
<div
|
||||
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--wrap"
|
||||
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--wrap"
|
||||
>
|
||||
<div
|
||||
class="euiFlexItem"
|
||||
>
|
||||
<h1
|
||||
class="euiTitle euiTitle--medium eui-textNoWrap"
|
||||
<div
|
||||
class="euiTabs euiTabs--condensed"
|
||||
role="tablist"
|
||||
style="padding-left:16px"
|
||||
>
|
||||
TestingHeading
|
||||
</h1>
|
||||
<a
|
||||
aria-selected="false"
|
||||
class="euiTab"
|
||||
data-test-subj="uptimeSettingsToOverviewLink"
|
||||
href="/"
|
||||
rel="noreferrer"
|
||||
role="tab"
|
||||
>
|
||||
<span
|
||||
class="euiTab__content"
|
||||
>
|
||||
Overview
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
aria-selected="false"
|
||||
class="euiTab"
|
||||
data-test-subj="uptimeCertificatesLink"
|
||||
href="/certificates"
|
||||
rel="noreferrer"
|
||||
role="tab"
|
||||
>
|
||||
<span
|
||||
class="euiTab__content"
|
||||
>
|
||||
Certificates
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
aria-selected="false"
|
||||
class="euiTab"
|
||||
data-test-subj="settings-page-link"
|
||||
href="/settings"
|
||||
rel="noreferrer"
|
||||
role="tab"
|
||||
>
|
||||
<span
|
||||
class="euiTab__content"
|
||||
>
|
||||
Settings
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<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"
|
||||
data-test-subj="xpack.uptime.alertsPopover.toggleButton"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
|
||||
>
|
||||
<span
|
||||
class="euiButtonContent__icon"
|
||||
data-euiicon-type="arrowDown"
|
||||
/>
|
||||
<span
|
||||
class="euiButtonEmpty__text"
|
||||
>
|
||||
Alerts
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero c0"
|
||||
|
@ -535,14 +599,22 @@ Array [
|
|||
}
|
||||
|
||||
<div
|
||||
class="euiSpacer euiSpacer--s"
|
||||
class="euiSpacer euiSpacer--m"
|
||||
/>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`PageHeader shallow renders without the date picker: page_header_no_date_picker 1`] = `
|
||||
Array [
|
||||
<div
|
||||
@media only screen and (max-width:1024px) and (min-width:868px) {
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width:880px) {
|
||||
|
||||
}
|
||||
|
||||
<div
|
||||
class="euiCallOut euiCallOut--primary"
|
||||
>
|
||||
<div
|
||||
|
@ -608,24 +680,228 @@ Array [
|
|||
</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"
|
||||
/>,
|
||||
<div
|
||||
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow 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--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--wrap"
|
||||
>
|
||||
<div
|
||||
class="euiFlexItem"
|
||||
>
|
||||
<h1
|
||||
class="euiTitle euiTitle--medium eui-textNoWrap"
|
||||
<div
|
||||
class="euiTabs euiTabs--condensed"
|
||||
role="tablist"
|
||||
style="padding-left:16px"
|
||||
>
|
||||
TestingHeading
|
||||
</h1>
|
||||
<a
|
||||
aria-selected="false"
|
||||
class="euiTab"
|
||||
data-test-subj="uptimeSettingsToOverviewLink"
|
||||
href="/"
|
||||
rel="noreferrer"
|
||||
role="tab"
|
||||
>
|
||||
<span
|
||||
class="euiTab__content"
|
||||
>
|
||||
Overview
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
aria-selected="false"
|
||||
class="euiTab"
|
||||
data-test-subj="uptimeCertificatesLink"
|
||||
href="/certificates"
|
||||
rel="noreferrer"
|
||||
role="tab"
|
||||
>
|
||||
<span
|
||||
class="euiTab__content"
|
||||
>
|
||||
Certificates
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
aria-selected="false"
|
||||
class="euiTab"
|
||||
data-test-subj="settings-page-link"
|
||||
href="/settings"
|
||||
rel="noreferrer"
|
||||
role="tab"
|
||||
>
|
||||
<span
|
||||
class="euiTab__content"
|
||||
>
|
||||
Settings
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<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"
|
||||
data-test-subj="xpack.uptime.alertsPopover.toggleButton"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
|
||||
>
|
||||
<span
|
||||
class="euiButtonContent__icon"
|
||||
data-euiicon-type="arrowDown"
|
||||
/>
|
||||
<span
|
||||
class="euiButtonEmpty__text"
|
||||
>
|
||||
Alerts
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</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="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 euiFormControlLayout__prepend"
|
||||
data-test-subj="superDatePickerToggleQuickMenuButton"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
|
||||
>
|
||||
<span
|
||||
class="euiButtonContent__icon"
|
||||
data-euiicon-type="arrowDown"
|
||||
/>
|
||||
<span
|
||||
class="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
|
||||
>
|
||||
<span
|
||||
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 euiButton--fill euiSuperUpdateButton"
|
||||
data-test-subj="superDatePickerApplyTimeButton"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="euiButtonContent euiButton__content"
|
||||
>
|
||||
<span
|
||||
class="euiButtonContent__icon"
|
||||
data-euiicon-type="refresh"
|
||||
/>
|
||||
<span
|
||||
class="euiButton__text euiSuperUpdateButton__text"
|
||||
>
|
||||
Refresh
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="euiSpacer euiSpacer--s"
|
||||
@media only screen and (max-width:1024px) and (min-width:868px) {
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width:880px) {
|
||||
|
||||
}
|
||||
|
||||
<div
|
||||
class="euiSpacer euiSpacer--m"
|
||||
/>,
|
||||
]
|
||||
`;
|
|
@ -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(
|
||||
<MountWithReduxProvider>
|
||||
<PageHeader headingText={'TestingHeading'} datePicker={true} />
|
||||
<PageHeader />
|
||||
</MountWithReduxProvider>
|
||||
);
|
||||
expect(component).toMatchSnapshot('page_header_with_date_picker');
|
||||
|
@ -21,7 +21,7 @@ describe('PageHeader', () => {
|
|||
it('shallow renders without the date picker', () => {
|
||||
const component = renderWithRouter(
|
||||
<MountWithReduxProvider>
|
||||
<PageHeader headingText={'TestingHeading'} datePicker={false} />
|
||||
<PageHeader />
|
||||
</MountWithReduxProvider>
|
||||
);
|
||||
expect(component).toMatchSnapshot('page_header_no_date_picker');
|
||||
|
@ -30,7 +30,7 @@ describe('PageHeader', () => {
|
|||
it('shallow renders extra links', () => {
|
||||
const component = renderWithRouter(
|
||||
<MountWithReduxProvider>
|
||||
<PageHeader headingText={'TestingHeading'} extraLinks={true} datePicker={true} />
|
||||
<PageHeader />
|
||||
</MountWithReduxProvider>
|
||||
);
|
||||
expect(component).toMatchSnapshot('page_header_with_extra_links');
|
|
@ -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 (
|
||||
<HeaderMenuPortal setHeaderActionMenu={appMountParameters.setHeaderActionMenu}>
|
||||
<EuiFlexGroup alignItems="flexEnd" responsive={false} style={{ paddingRight: 20 }}>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButtonEmpty
|
||||
href={kibana.services?.application?.getUrlForApp('/home#/tutorial/uptimeMonitors')}
|
||||
color="primary"
|
||||
iconType="indexOpen"
|
||||
>
|
||||
{ADD_DATA_LABEL}
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</HeaderMenuPortal>
|
||||
);
|
||||
};
|
|
@ -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 ? (
|
||||
<CertRefreshBtn />
|
||||
) : (
|
||||
<StyledPicker grow={false} style={{ flexBasis: 485 }}>
|
||||
<UptimeDatePicker />
|
||||
</StyledPicker>
|
||||
);
|
||||
|
||||
const isMonRoute = useRouteMatch(MONITOR_ROUTE);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SyntheticsCallout />
|
||||
<EuiFlexGroup alignItems="center" justifyContent="spaceBetween" wrap responsive={false}>
|
||||
<EuiFlexItem>
|
||||
<PageTabs />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<ToggleAlertFlyoutButton />
|
||||
</EuiFlexItem>
|
||||
{!isSettingsRoute && <DatePickerComponent />}
|
||||
</EuiFlexGroup>
|
||||
{isMonRoute && <EuiHorizontalRule margin="m" />}
|
||||
{!isMonRoute && <EuiSpacer size="m" />}
|
||||
</>
|
||||
);
|
||||
};
|
|
@ -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<string | null>(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) => (
|
||||
<EuiTab
|
||||
onClick={() => setSelectedTabId(id)}
|
||||
isSelected={id === selectedTabId}
|
||||
key={index}
|
||||
data-test-subj={dataTestSubj}
|
||||
href={history.createHref({ pathname: id })}
|
||||
>
|
||||
{name}
|
||||
</EuiTab>
|
||||
));
|
||||
};
|
||||
|
||||
return (
|
||||
<EuiTabs display="condensed" style={{ paddingLeft: 16 }}>
|
||||
{renderTabs()}
|
||||
</EuiTabs>
|
||||
);
|
||||
};
|
|
@ -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`] = `
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
class="c1"
|
||||
data-test-subj="uptimeCertificatesLink"
|
||||
href="/certificates"
|
||||
>
|
||||
Certificates status
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="euiSpacer euiSpacer--m"
|
||||
|
@ -1108,7 +1095,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
|
|||
>
|
||||
<div>
|
||||
<div
|
||||
class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow c2"
|
||||
class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow c1"
|
||||
>
|
||||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
|
@ -1134,7 +1121,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
|
|||
class="euiToolTipAnchor"
|
||||
>
|
||||
<div
|
||||
class="euiText euiText--extraSmall c3 eui-textNoWrap"
|
||||
class="euiText euiText--extraSmall c2 eui-textNoWrap"
|
||||
>
|
||||
<div
|
||||
class="euiTextColor euiTextColor--subdued"
|
||||
|
@ -1347,7 +1334,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
|
|||
>
|
||||
<div>
|
||||
<div
|
||||
class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow c2"
|
||||
class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow c1"
|
||||
>
|
||||
<div
|
||||
class="euiFlexItem euiFlexItem--flexGrowZero"
|
||||
|
@ -1373,7 +1360,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
|
|||
class="euiToolTipAnchor"
|
||||
>
|
||||
<div
|
||||
class="euiText euiText--extraSmall c3 eui-textNoWrap"
|
||||
class="euiText euiText--extraSmall c2 eui-textNoWrap"
|
||||
>
|
||||
<div
|
||||
class="euiTextColor euiTextColor--subdued"
|
||||
|
@ -1622,7 +1609,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
|
|||
>
|
||||
<button
|
||||
aria-label="A disabled pagination button indicating that there cannot be any further navigation in the monitors list."
|
||||
class="euiButtonIcon euiButtonIcon--text c4"
|
||||
class="euiButtonIcon euiButtonIcon--text c3"
|
||||
data-test-subj="xpack.uptime.monitorList.prevButton"
|
||||
disabled=""
|
||||
type="button"
|
||||
|
@ -1639,7 +1626,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
|
|||
>
|
||||
<button
|
||||
aria-label="A disabled pagination button indicating that there cannot be any further navigation in the monitors list."
|
||||
class="euiButtonIcon euiButtonIcon--text c4"
|
||||
class="euiButtonIcon euiButtonIcon--text c3"
|
||||
data-test-subj="xpack.uptime.monitorList.nextButton"
|
||||
disabled=""
|
||||
type="button"
|
||||
|
|
|
@ -14,6 +14,7 @@ import {
|
|||
} from '../../../../../lib';
|
||||
import { EuiPopover, EuiText } from '@elastic/eui';
|
||||
import { DYNAMIC_SETTINGS_DEFAULTS } from '../../../../../../common/constants';
|
||||
import { ReactRouterEuiLink } from '../../../../common/react_router_helpers';
|
||||
|
||||
describe('EnableAlertComponent', () => {
|
||||
let defaultConnectors: string[] = [];
|
||||
|
@ -66,6 +67,32 @@ describe('EnableAlertComponent', () => {
|
|||
expect(wrapper.find(EuiText).text()).toBe(
|
||||
'To start enabling alerts, please define a default alert action connector in Settings'
|
||||
);
|
||||
expect(wrapper.find(ReactRouterEuiLink)).toMatchInlineSnapshot(`
|
||||
<ReactRouterEuiLink
|
||||
data-test-subj="uptimeSettingsLink"
|
||||
to="/settings?focusConnectorField=true"
|
||||
>
|
||||
<ReactRouterHelperForEui
|
||||
to="/settings?focusConnectorField=true"
|
||||
>
|
||||
<EuiLink
|
||||
data-test-subj="uptimeSettingsLink"
|
||||
href="/settings?focusConnectorField=true"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<a
|
||||
className="euiLink euiLink--primary"
|
||||
data-test-subj="uptimeSettingsLink"
|
||||
href="/settings?focusConnectorField=true"
|
||||
onClick={[Function]}
|
||||
rel="noreferrer"
|
||||
>
|
||||
Settings
|
||||
</a>
|
||||
</EuiLink>
|
||||
</ReactRouterHelperForEui>
|
||||
</ReactRouterEuiLink>
|
||||
`);
|
||||
});
|
||||
|
||||
it('does not displays define connectors when there is connector', () => {
|
||||
|
|
|
@ -7,11 +7,15 @@
|
|||
import React, { useState } from 'react';
|
||||
import { EuiPopover, EuiSwitch, EuiText } from '@elastic/eui';
|
||||
import { useRouteMatch } from 'react-router-dom';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import { ReactRouterEuiLink } from '../../../common/react_router_helpers';
|
||||
import { MONITOR_ROUTE, SETTINGS_ROUTE } from '../../../../../common/constants';
|
||||
import { ENABLE_STATUS_ALERT } from './translations';
|
||||
import { SETTINGS_LINK_TEXT } from '../../../../pages/page_header';
|
||||
|
||||
const SETTINGS_LINK_TEXT = i18n.translate('xpack.uptime.page_header.settingsLink', {
|
||||
defaultMessage: 'Settings',
|
||||
});
|
||||
|
||||
export const DefineAlertConnectors = () => {
|
||||
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
|
||||
|
|
|
@ -7,16 +7,8 @@
|
|||
import React from 'react';
|
||||
import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import styled from 'styled-components';
|
||||
import { StatusFilter } from './status_filter';
|
||||
import { CERTIFICATES_ROUTE } from '../../../../common/constants';
|
||||
|
||||
const LinkStyle = styled(Link)`
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 16px;
|
||||
`;
|
||||
|
||||
const FlexGroupContainer = styled(EuiFlexGroup)`
|
||||
position: relative;
|
||||
|
@ -38,12 +30,6 @@ export const MonitorListHeader: React.FC = () => {
|
|||
<EuiFlexItem grow={false}>
|
||||
<StatusFilter />
|
||||
</EuiFlexItem>
|
||||
<LinkStyle to={CERTIFICATES_ROUTE} data-test-subj="uptimeCertificatesLink">
|
||||
<FormattedMessage
|
||||
id="xpack.uptime.monitorList.viewCertificateTitle"
|
||||
defaultMessage="Certificates status"
|
||||
/>
|
||||
</LinkStyle>
|
||||
</FlexGroupContainer>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -5,31 +5,15 @@
|
|||
*/
|
||||
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import {
|
||||
EuiButton,
|
||||
EuiButtonEmpty,
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiPanel,
|
||||
EuiSpacer,
|
||||
EuiHideFor,
|
||||
EuiShowFor,
|
||||
} from '@elastic/eui';
|
||||
import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import { useTrackPageview } from '../../../observability/public';
|
||||
import { PageHeader } from './page_header';
|
||||
import { useBreadcrumbs } from '../hooks/use_breadcrumbs';
|
||||
import { OVERVIEW_ROUTE, SETTINGS_ROUTE } from '../../common/constants';
|
||||
import { getDynamicSettings } from '../state/actions/dynamic_settings';
|
||||
import { UptimeRefreshContext } from '../contexts';
|
||||
import * as labels from './translations';
|
||||
import { certificatesSelector, getCertificatesAction } from '../state/certificates/certificates';
|
||||
import { CertificateList, CertificateSearch, CertSort } from '../components/certificates';
|
||||
import { ToggleAlertFlyoutButton } from '../components/overview/alerts/alerts_containers';
|
||||
import { CLIENT_ALERT_TYPES } from '../../common/constants/alerts';
|
||||
import { ReactRouterEuiButtonEmpty } from '../components/common/react_router_helpers';
|
||||
|
||||
const DEFAULT_PAGE_SIZE = 10;
|
||||
const LOCAL_STORAGE_KEY = 'xpack.uptime.certList.pageSize';
|
||||
|
@ -56,7 +40,7 @@ export const CertificatesPage: React.FC = () => {
|
|||
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const { lastRefresh, refreshApp } = useContext(UptimeRefreshContext);
|
||||
const { lastRefresh } = useContext(UptimeRefreshContext);
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(getDynamicSettings());
|
||||
|
@ -74,90 +58,33 @@ export const CertificatesPage: React.FC = () => {
|
|||
}, [dispatch, page, search, sort.direction, sort.field, lastRefresh]);
|
||||
|
||||
const { data: certificates } = useSelector(certificatesSelector);
|
||||
const history = useHistory();
|
||||
|
||||
return (
|
||||
<>
|
||||
<EuiFlexGroup responsive={false} gutterSize="s">
|
||||
<EuiFlexItem grow={false} style={{ marginRight: 'auto', alignSelf: 'center' }}>
|
||||
<ReactRouterEuiButtonEmpty
|
||||
color="primary"
|
||||
data-test-subj="uptimeCertificatesToOverviewLink"
|
||||
to={OVERVIEW_ROUTE}
|
||||
iconType="arrowLeft"
|
||||
size="s"
|
||||
aria-label={labels.RETURN_TO_OVERVIEW}
|
||||
>
|
||||
{labels.RETURN_TO_OVERVIEW}
|
||||
</ReactRouterEuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<ToggleAlertFlyoutButton alertOptions={[CLIENT_ALERT_TYPES.TLS]} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false} style={{ alignSelf: 'center' }}>
|
||||
<EuiButtonEmpty
|
||||
aria-label={labels.SETTINGS_ON_CERT}
|
||||
color="primary"
|
||||
data-test-subj="uptimeCertificatesToOverviewLink"
|
||||
iconType="gear"
|
||||
href={history.createHref({ pathname: SETTINGS_ROUTE })}
|
||||
size="s"
|
||||
>
|
||||
<EuiHideFor sizes={['xs']}> {labels.SETTINGS_ON_CERT}</EuiHideFor>
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiHideFor sizes={['xs']}>
|
||||
<EuiButton
|
||||
fill
|
||||
iconType="refresh"
|
||||
onClick={() => {
|
||||
refreshApp();
|
||||
}}
|
||||
data-test-subj="superDatePickerApplyTimeButton"
|
||||
>
|
||||
{labels.REFRESH_CERT}
|
||||
</EuiButton>
|
||||
</EuiHideFor>
|
||||
<EuiShowFor sizes={['xs']}>
|
||||
<EuiButtonEmpty
|
||||
iconType="refresh"
|
||||
onClick={() => {
|
||||
refreshApp();
|
||||
}}
|
||||
data-test-subj="superDatePickerApplyTimeButton"
|
||||
/>
|
||||
</EuiShowFor>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiPanel>
|
||||
<EuiTitle>
|
||||
<h1 className="eui-textNoWrap">
|
||||
<FormattedMessage
|
||||
id="xpack.uptime.certificates.heading"
|
||||
defaultMessage="TLS Certificates ({total})"
|
||||
values={{
|
||||
total: <span data-test-subj="uptimeCertTotal">{certificates?.total ?? 0}</span>,
|
||||
}}
|
||||
/>
|
||||
</h1>
|
||||
</EuiTitle>
|
||||
|
||||
<EuiSpacer size="m" />
|
||||
<EuiPanel>
|
||||
<PageHeader
|
||||
headingText={
|
||||
<FormattedMessage
|
||||
id="xpack.uptime.certificates.heading"
|
||||
defaultMessage="TLS Certificates ({total})"
|
||||
values={{
|
||||
total: <span data-test-subj="uptimeCertTotal">{certificates?.total ?? 0}</span>,
|
||||
}}
|
||||
/>
|
||||
}
|
||||
datePicker={false}
|
||||
/>
|
||||
<EuiSpacer size="m" />
|
||||
<CertificateSearch setSearch={setSearch} />
|
||||
<EuiSpacer size="m" />
|
||||
<CertificateList
|
||||
page={page}
|
||||
onChange={(pageVal, sortVal) => {
|
||||
setPage(pageVal);
|
||||
setSort(sortVal);
|
||||
localStorage.setItem(LOCAL_STORAGE_KEY, pageVal.size.toString());
|
||||
}}
|
||||
sort={sort}
|
||||
/>
|
||||
</EuiPanel>
|
||||
</>
|
||||
<CertificateSearch setSearch={setSearch} />
|
||||
<EuiSpacer size="m" />
|
||||
<CertificateList
|
||||
page={page}
|
||||
onChange={(pageVal, sortVal) => {
|
||||
setPage(pageVal);
|
||||
setSort(sortVal);
|
||||
localStorage.setItem(LOCAL_STORAGE_KEY, pageVal.size.toString());
|
||||
}}
|
||||
sort={sort}
|
||||
/>
|
||||
</EuiPanel>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -4,11 +4,10 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
|
||||
import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
|
||||
import React, { useEffect } from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { monitorStatusSelector } from '../state/selectors';
|
||||
import { PageHeader } from './page_header';
|
||||
import { useBreadcrumbs } from '../hooks/use_breadcrumbs';
|
||||
import { useTrackPageview } from '../../../observability/public';
|
||||
import { useMonitorId } from '../hooks';
|
||||
|
@ -61,22 +60,23 @@ export const MonitorPage: React.FC = () => {
|
|||
|
||||
const nameOrId = selectedMonitor?.monitor?.name || getPageTitle(monitorId, selectedMonitor);
|
||||
useBreadcrumbs([{ text: nameOrId }]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
headingText={
|
||||
<EuiFlexGroup wrap={false}>
|
||||
<EuiFlexItem grow={false}>{nameOrId}</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EnableMonitorAlert
|
||||
monitorId={monitorId}
|
||||
monitorName={selectedMonitor?.monitor?.name || selectedMonitor?.url?.full}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
}
|
||||
datePicker={true}
|
||||
/>
|
||||
<EuiFlexGroup wrap={false}>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiTitle>
|
||||
<h1 className="eui-textNoWrap">{nameOrId}</h1>
|
||||
</EuiTitle>
|
||||
<EuiSpacer size="xs" />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false} style={{ justifyContent: 'center' }}>
|
||||
<EnableMonitorAlert
|
||||
monitorId={monitorId}
|
||||
monitorName={selectedMonitor?.monitor?.name || selectedMonitor?.url?.full}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiSpacer size="s" />
|
||||
<MonitorStatusDetails monitorId={monitorId} />
|
||||
<EuiSpacer size="s" />
|
||||
|
|
|
@ -10,7 +10,6 @@ import styled from 'styled-components';
|
|||
import { i18n } from '@kbn/i18n';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { useGetUrlParams } from '../hooks';
|
||||
import { PageHeader } from './page_header';
|
||||
import { IIndexPattern } from '../../../../../src/plugins/data/public';
|
||||
import { useUpdateKueryString } from '../hooks';
|
||||
import { useBreadcrumbs } from '../hooks/use_breadcrumbs';
|
||||
|
@ -62,16 +61,10 @@ export const OverviewPageComponent = React.memo(
|
|||
dispatch(getMonitorAlertsAction.get());
|
||||
}, [dispatch]);
|
||||
|
||||
const heading = 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.`,
|
||||
});
|
||||
|
||||
useBreadcrumbs([]); // No extra breadcrumbs on overview
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader headingText={heading} extraLinks={true} datePicker={true} />
|
||||
<EmptyState>
|
||||
<EuiFlexGroup gutterSize="xs" wrap responsive={false}>
|
||||
<EuiFlexItem grow={1} style={{ flexBasis: 485 }}>
|
||||
|
@ -87,7 +80,7 @@ export const OverviewPageComponent = React.memo(
|
|||
</EuiFlexItemStyled>
|
||||
{error && !loading && <ParsingErrorCallout error={error} />}
|
||||
</EuiFlexGroup>
|
||||
<EuiSpacer size="s" />
|
||||
<EuiSpacer size="xs" />
|
||||
<StatusPanel />
|
||||
<EuiSpacer size="s" />
|
||||
<MonitorList filters={esFilters} />
|
||||
|
|
|
@ -1,107 +0,0 @@
|
|||
/*
|
||||
* 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, EuiSpacer, EuiTitle } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
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';
|
||||
import { useKibana } from '../../../../../src/plugins/kibana_react/public';
|
||||
import { ReactRouterEuiButtonEmpty } from '../components/common/react_router_helpers';
|
||||
import { SyntheticsCallout } from '../components/overview/synthetics_callout';
|
||||
|
||||
interface PageHeaderProps {
|
||||
headingText: string | JSX.Element;
|
||||
extraLinks?: boolean;
|
||||
datePicker?: boolean;
|
||||
}
|
||||
|
||||
export const SETTINGS_LINK_TEXT = i18n.translate('xpack.uptime.page_header.settingsLink', {
|
||||
defaultMessage: 'Settings',
|
||||
});
|
||||
|
||||
const ADD_DATA_LABEL = i18n.translate('xpack.uptime.addDataButtonLabel', {
|
||||
defaultMessage: 'Add data',
|
||||
});
|
||||
|
||||
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 ? (
|
||||
<StyledPicker grow={false} style={{ flexBasis: 485 }}>
|
||||
<UptimeDatePicker />
|
||||
</StyledPicker>
|
||||
) : null;
|
||||
|
||||
const kibana = useKibana();
|
||||
|
||||
const extraLinkComponents = !extraLinks ? null : (
|
||||
<EuiFlexGroup alignItems="flexEnd" responsive={false}>
|
||||
<EuiFlexItem grow={false}>
|
||||
<ToggleAlertFlyoutButton />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<ReactRouterEuiButtonEmpty
|
||||
data-test-subj="settings-page-link"
|
||||
iconType="gear"
|
||||
to={SETTINGS_ROUTE}
|
||||
>
|
||||
{SETTINGS_LINK_TEXT}
|
||||
</ReactRouterEuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButtonEmpty
|
||||
href={kibana.services?.application?.getUrlForApp('/home#/tutorial/uptimeMonitors')}
|
||||
color="primary"
|
||||
iconType="plusInCircle"
|
||||
>
|
||||
{ADD_DATA_LABEL}
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SyntheticsCallout />
|
||||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
justifyContent="spaceBetween"
|
||||
gutterSize="s"
|
||||
wrap
|
||||
responsive={false}
|
||||
>
|
||||
<EuiFlexItem grow={true}>
|
||||
<EuiTitle>
|
||||
<h1 className="eui-textNoWrap">{headingText}</h1>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
{extraLinks && <EuiFlexItem grow={false}>{extraLinkComponents}</EuiFlexItem>}
|
||||
<DatePickerComponent />
|
||||
</EuiFlexGroup>
|
||||
<EuiSpacer size="s" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
);
|
|
@ -21,7 +21,6 @@ import { selectDynamicSettings } from '../state/selectors';
|
|||
import { getDynamicSettings, setDynamicSettings } from '../state/actions/dynamic_settings';
|
||||
import { DynamicSettings } from '../../common/runtime_types';
|
||||
import { useBreadcrumbs } from '../hooks/use_breadcrumbs';
|
||||
import { OVERVIEW_ROUTE } from '../../common/constants';
|
||||
import { useKibana } from '../../../../../src/plugins/kibana_react/public';
|
||||
import { IndicesForm } from '../components/settings/indices_form';
|
||||
import {
|
||||
|
@ -33,7 +32,6 @@ import {
|
|||
VALUE_MUST_BE_GREATER_THAN_ZERO,
|
||||
VALUE_MUST_BE_AN_INTEGER,
|
||||
} from '../../common/translations';
|
||||
import { ReactRouterEuiButtonEmpty } from '../components/common/react_router_helpers';
|
||||
import { AlertDefaultsForm } from '../components/settings/alert_defaults_form';
|
||||
|
||||
interface SettingsPageFieldErrors {
|
||||
|
@ -147,17 +145,8 @@ export const SettingsPage: React.FC = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<ReactRouterEuiButtonEmpty
|
||||
color="primary"
|
||||
data-test-subj="uptimeSettingsToOverviewLink"
|
||||
iconType="arrowLeft"
|
||||
to={OVERVIEW_ROUTE}
|
||||
size="s"
|
||||
>
|
||||
{Translations.settings.returnToOverviewLinkLabel}
|
||||
</ReactRouterEuiButtonEmpty>
|
||||
<EuiSpacer size="s" />
|
||||
<EuiPanel>
|
||||
<EuiPanel style={{ maxWidth: 1000, margin: 'auto' }}>
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem grow={false}>{cannotEditNotice}</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
|
|
|
@ -6,17 +6,6 @@
|
|||
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
||||
export const SETTINGS_ON_CERT = i18n.translate('xpack.uptime.certificates.settingsLinkLabel', {
|
||||
defaultMessage: 'Settings',
|
||||
});
|
||||
|
||||
export const RETURN_TO_OVERVIEW = i18n.translate(
|
||||
'xpack.uptime.certificates.returnToOverviewLinkLabel',
|
||||
{
|
||||
defaultMessage: 'Return to overview',
|
||||
}
|
||||
);
|
||||
|
||||
export const REFRESH_CERT = i18n.translate('xpack.uptime.certificates.refresh', {
|
||||
defaultMessage: 'Refresh',
|
||||
});
|
||||
|
@ -32,9 +21,6 @@ export const settings = {
|
|||
defaultMessage:
|
||||
"Your user currently has 'Read' permissions for the Uptime app. Enable a permissions-level of 'All' to edit these settings.",
|
||||
}),
|
||||
returnToOverviewLinkLabel: i18n.translate('xpack.uptime.settings.returnToOverviewLinkLabel', {
|
||||
defaultMessage: 'Return to overview',
|
||||
}),
|
||||
mustBeNumber: i18n.translate('xpack.uptime.settings.blankNumberField.error', {
|
||||
defaultMessage: 'Must be a number.',
|
||||
}),
|
||||
|
|
|
@ -16,6 +16,7 @@ import {
|
|||
import { MonitorPage, NotFoundPage, SettingsPage } from './pages';
|
||||
import { CertificatesPage } from './pages/certificates';
|
||||
import { UptimePage, useUptimeTelemetry } from './hooks';
|
||||
import { PageHeader } from './components/common/header/page_header';
|
||||
|
||||
interface RouteProps {
|
||||
path: string;
|
||||
|
@ -72,16 +73,19 @@ const RouteInit: React.FC<Pick<RouteProps, 'path' | 'title' | 'telemetryId'>> =
|
|||
|
||||
export const PageRouter: FC = () => {
|
||||
return (
|
||||
<Switch>
|
||||
{Routes.map(({ title, path, component: RouteComponent, dataTestSubj, telemetryId }) => (
|
||||
<Route path={path} key={telemetryId}>
|
||||
<div data-test-subj={dataTestSubj}>
|
||||
<RouteInit title={title} path={path} telemetryId={telemetryId} />
|
||||
<RouteComponent />
|
||||
</div>
|
||||
</Route>
|
||||
))}
|
||||
<Route component={NotFoundPage} />
|
||||
</Switch>
|
||||
<>
|
||||
<PageHeader />
|
||||
<Switch>
|
||||
{Routes.map(({ title, path, component: RouteComponent, dataTestSubj, telemetryId }) => (
|
||||
<Route path={path} key={telemetryId} exact={true}>
|
||||
<div data-test-subj={dataTestSubj}>
|
||||
<RouteInit title={title} path={path} telemetryId={telemetryId} />
|
||||
<RouteComponent />
|
||||
</div>
|
||||
</Route>
|
||||
))}
|
||||
<Route component={NotFoundPage} />
|
||||
</Switch>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -8,6 +8,7 @@ import { FtrProviderContext } from '../../ftr_provider_context';
|
|||
|
||||
export function UptimeOverviewProvider({ getService }: FtrProviderContext) {
|
||||
const testSubjects = getService('testSubjects');
|
||||
const retry = getService('retry');
|
||||
|
||||
return {
|
||||
async expandMonitorDetail(id: string): Promise<void> {
|
||||
|
@ -24,15 +25,20 @@ export function UptimeOverviewProvider({ getService }: FtrProviderContext) {
|
|||
* Otherwise, open the popover, then click the nested button.
|
||||
*/
|
||||
async navigateToNestedPopover(): Promise<void> {
|
||||
if (testSubjects.exists('xpack.uptime.openAlertContextPanel')) {
|
||||
if (await testSubjects.exists('xpack.uptime.openAlertContextPanel')) {
|
||||
return testSubjects.click('xpack.uptime.openAlertContextPanel');
|
||||
}
|
||||
await testSubjects.click('xpack.uptime.alertsPopover.toggleButton');
|
||||
return testSubjects.click('xpack.uptime.openAlertContextPanel');
|
||||
},
|
||||
|
||||
async displaysDefineConnector() {
|
||||
return await testSubjects.existOrFail('uptimeSettingsDefineConnector');
|
||||
async clickDefineSettings() {
|
||||
return retry.tryForTime(60 * 1000, async () => {
|
||||
if (await testSubjects.exists('errorToastMessage', { timeout: 0 })) {
|
||||
await testSubjects.click('toastCloseButton');
|
||||
}
|
||||
await testSubjects.click('uptimeSettingsLink');
|
||||
});
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
|
@ -25,6 +25,12 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
|
|||
const DEFAULT_DATE_START = 'Sep 10, 2019 @ 12:40:08.078';
|
||||
const DEFAULT_DATE_END = 'Sep 11, 2019 @ 19:40:08.078';
|
||||
|
||||
const hideErrorToast = async () => {
|
||||
if (await testSubjects.exists('errorToastMessage', { timeout: 0 })) {
|
||||
await testSubjects.click('toastCloseButton');
|
||||
}
|
||||
};
|
||||
|
||||
before(async () => {
|
||||
// delete the saved object
|
||||
await deleteUptimeSettingsObject(server);
|
||||
|
@ -39,12 +45,13 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
|
|||
});
|
||||
|
||||
it('displays to define default connector', async () => {
|
||||
await hideErrorToast();
|
||||
await testSubjects.click('uptimeDisplayDefineConnector');
|
||||
await testSubjects.existOrFail('uptimeSettingsDefineConnector');
|
||||
});
|
||||
|
||||
it('go to settings to define connector', async () => {
|
||||
await testSubjects.click('uptimeSettingsLink');
|
||||
await uptimeService.overview.clickDefineSettings();
|
||||
await uptimeService.common.waitUntilDataIsLoaded();
|
||||
await testSubjects.existOrFail('comboBoxInput');
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue