[Uptime] Monitor SSL Certificate Color version for warning (#54040)
* update monitor list columns * update columns * update snaps * enhance ui * update SSL Cert to badge warning * fix i18n errors * removed unnecessary margin * update snaps * update ssl * update snaps * added test for warning state * added test for warning state * update test name * update test name Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Shahzad
GitHub
parent
70cedb08f9
commit
6f3ff99968
|
|
@ -1,21 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`MonitorStatusBar component renders 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="euiSpacer euiSpacer--s"
|
||||
/>,
|
||||
<div
|
||||
aria-label="SSL certificate expires"
|
||||
class="euiText euiText--small euiText--constrainedWidth"
|
||||
>
|
||||
<div
|
||||
class="euiTextColor euiTextColor--subdued"
|
||||
>
|
||||
SSL certificate expires in 2 months
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`MonitorStatusBar component renders null if invalid date 1`] = `null`;
|
||||
|
|
@ -1,38 +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 moment from 'moment';
|
||||
import { renderWithIntl } from 'test_utils/enzyme_helpers';
|
||||
import { PingTls } from '../../../../common/graphql/types';
|
||||
import { MonitorSSLCertificate } from '../monitor_status_details/monitor_status_bar';
|
||||
|
||||
describe('MonitorStatusBar component', () => {
|
||||
let monitorTls: PingTls;
|
||||
|
||||
beforeEach(() => {
|
||||
const dateInTwoMonths = moment()
|
||||
.add(2, 'month')
|
||||
.toString();
|
||||
|
||||
monitorTls = {
|
||||
certificate_not_valid_after: dateInTwoMonths,
|
||||
};
|
||||
});
|
||||
|
||||
it('renders', () => {
|
||||
const component = renderWithIntl(<MonitorSSLCertificate tls={monitorTls} />);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders null if invalid date', () => {
|
||||
monitorTls = {
|
||||
certificate_not_valid_after: 'i am so invalid date',
|
||||
};
|
||||
const component = renderWithIntl(<MonitorSSLCertificate tls={monitorTls} />);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`MonitorStatusBar component renders 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="euiSpacer euiSpacer--s"
|
||||
/>,
|
||||
<div
|
||||
aria-label="SSL certificate expires in 2 months"
|
||||
class="euiText euiText--small euiText--constrainedWidth"
|
||||
>
|
||||
SSL certificate expires
|
||||
<span
|
||||
class="euiBadge euiBadge--iconLeft euiBadge--default"
|
||||
>
|
||||
<span
|
||||
class="euiBadge__content"
|
||||
>
|
||||
<span
|
||||
class="euiBadge__text"
|
||||
>
|
||||
in 2 months
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`MonitorStatusBar component renders null if invalid date 1`] = `null`;
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
/*
|
||||
* 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 moment from 'moment';
|
||||
import { mountWithIntl } from 'test_utils/enzyme_helpers';
|
||||
import { EuiBadge } from '@elastic/eui';
|
||||
import { renderWithIntl } from 'test_utils/enzyme_helpers';
|
||||
import { PingTls } from '../../../../../common/graphql/types';
|
||||
import { MonitorSSLCertificate } from '../monitor_status_bar';
|
||||
|
||||
describe('MonitorStatusBar component', () => {
|
||||
let monitorTls: PingTls;
|
||||
|
||||
beforeEach(() => {
|
||||
const dateInTwoMonths = moment()
|
||||
.add(2, 'month')
|
||||
.toString();
|
||||
|
||||
monitorTls = {
|
||||
certificate_not_valid_after: dateInTwoMonths,
|
||||
};
|
||||
});
|
||||
|
||||
it('renders', () => {
|
||||
const component = renderWithIntl(<MonitorSSLCertificate tls={monitorTls} />);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders null if invalid date', () => {
|
||||
monitorTls = {
|
||||
certificate_not_valid_after: 'i am so invalid date',
|
||||
};
|
||||
const component = renderWithIntl(<MonitorSSLCertificate tls={monitorTls} />);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders expiration date with a warning state if ssl expiry date is less than 30 days', () => {
|
||||
const dateIn15Days = moment()
|
||||
.add(15, 'day')
|
||||
.toString();
|
||||
monitorTls = {
|
||||
certificate_not_valid_after: dateIn15Days,
|
||||
};
|
||||
const component = mountWithIntl(<MonitorSSLCertificate tls={monitorTls} />);
|
||||
|
||||
const badgeComponent = component.find(EuiBadge);
|
||||
expect(badgeComponent.props().color).toBe('warning');
|
||||
|
||||
const badgeComponentText = component.find('.euiBadge__text');
|
||||
expect(badgeComponentText.text()).toBe(moment(dateIn15Days).fromNow());
|
||||
|
||||
expect(badgeComponent.find('span.euiBadge--warning')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('does not render the expiration date with a warning state if expiry date is greater than a month', () => {
|
||||
const dateIn40Days = moment()
|
||||
.add(40, 'day')
|
||||
.toString();
|
||||
monitorTls = {
|
||||
certificate_not_valid_after: dateIn40Days,
|
||||
};
|
||||
const component = mountWithIntl(<MonitorSSLCertificate tls={monitorTls} />);
|
||||
|
||||
const badgeComponent = component.find(EuiBadge);
|
||||
expect(badgeComponent.props().color).toBe('default');
|
||||
|
||||
const badgeComponentText = component.find('.euiBadge__text');
|
||||
expect(badgeComponentText.text()).toBe(moment(dateIn40Days).fromNow());
|
||||
|
||||
expect(badgeComponent.find('span.euiBadge--warning')).toHaveLength(0);
|
||||
});
|
||||
});
|
||||
|
|
@ -5,9 +5,8 @@
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { get } from 'lodash';
|
||||
import moment from 'moment';
|
||||
import { EuiSpacer, EuiText } from '@elastic/eui';
|
||||
import { EuiSpacer, EuiText, EuiBadge } from '@elastic/eui';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
||||
|
|
@ -21,30 +20,37 @@ interface Props {
|
|||
}
|
||||
|
||||
export const MonitorSSLCertificate = ({ tls }: Props) => {
|
||||
const certificateValidity: string | undefined = get(
|
||||
tls,
|
||||
'certificate_not_valid_after',
|
||||
undefined
|
||||
);
|
||||
const certValidityDate = new Date(tls?.certificate_not_valid_after ?? '');
|
||||
|
||||
const validExpiryDate = certificateValidity && !isNaN(new Date(certificateValidity).valueOf());
|
||||
const isValidDate = !isNaN(certValidityDate.valueOf());
|
||||
|
||||
return validExpiryDate && certificateValidity ? (
|
||||
const dateIn30Days = moment().add('30', 'days');
|
||||
|
||||
const isExpiringInMonth = isValidDate && dateIn30Days > moment(certValidityDate);
|
||||
|
||||
return isValidDate ? (
|
||||
<>
|
||||
<EuiSpacer size="s" />
|
||||
<EuiText
|
||||
color="subdued"
|
||||
grow={false}
|
||||
size="s"
|
||||
aria-label={i18n.translate('xpack.uptime.monitorStatusBar.sslCertificateExpiry.ariaLabel', {
|
||||
defaultMessage: 'SSL certificate expires',
|
||||
})}
|
||||
aria-label={i18n.translate(
|
||||
'xpack.uptime.monitorStatusBar.sslCertificateExpiry.label.ariaLabel',
|
||||
{
|
||||
defaultMessage: 'SSL certificate expires {validityDate}',
|
||||
values: { validityDate: moment(certValidityDate).fromNow() },
|
||||
}
|
||||
)}
|
||||
>
|
||||
<FormattedMessage
|
||||
id="xpack.uptime.monitorStatusBar.sslCertificateExpiry.content"
|
||||
defaultMessage="SSL certificate expires {certificateValidity}"
|
||||
id="xpack.uptime.monitorStatusBar.sslCertificateExpiry.badgeContent"
|
||||
defaultMessage="SSL certificate expires {emphasizedText}"
|
||||
values={{
|
||||
certificateValidity: moment(new Date(certificateValidity).valueOf()).fromNow(),
|
||||
emphasizedText: (
|
||||
<EuiBadge color={isExpiringInMonth ? 'warning' : 'default'}>
|
||||
{moment(certValidityDate).fromNow()}
|
||||
</EuiBadge>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</EuiText>
|
||||
|
|
|
|||
|
|
@ -11823,8 +11823,6 @@
|
|||
"xpack.uptime.kueryBar.searchPlaceholder": "モニター ID、名前、プロトコルタイプなどを検索…",
|
||||
"xpack.uptime.monitorList.noItemForSelectedFiltersMessage": "選択されたフィルター条件でモニターが見つかりませんでした",
|
||||
"xpack.uptime.monitorList.table.description": "列にステータス、名前、URL、IP、ダウンタイム履歴、統合が入力されたモニターステータス表です。この表は現在 {length} 項目を表示しています。",
|
||||
"xpack.uptime.monitorStatusBar.sslCertificateExpiry.ariaLabel": "SSL 証明書の有効期限:",
|
||||
"xpack.uptime.monitorStatusBar.sslCertificateExpiry.content": "SSL 証明書の有効期限: {certificateValidity}",
|
||||
"xpack.uptime.notFountPage.homeLinkText": "ホームへ戻る",
|
||||
"xpack.uptime.overviewPageLink.disabled.ariaLabel": "無効になったページ付けボタンです。モニターリストがこれ以上ナビゲーションできないことを示しています。",
|
||||
"xpack.uptime.overviewPageLink.next.ariaLabel": "次の結果ページ",
|
||||
|
|
|
|||
|
|
@ -11912,8 +11912,6 @@
|
|||
"xpack.uptime.kueryBar.searchPlaceholder": "搜索监测 ID、名称和协议类型......",
|
||||
"xpack.uptime.monitorList.noItemForSelectedFiltersMessage": "未找到匹配选定筛选条件的监测",
|
||||
"xpack.uptime.monitorList.table.description": "具有“状态”、“名称”、“URL”、“IP”、“中断历史记录”和“集成”列的“监测状态”表。该表当前显示 {length} 个项目。",
|
||||
"xpack.uptime.monitorStatusBar.sslCertificateExpiry.ariaLabel": "SSL 证书过期",
|
||||
"xpack.uptime.monitorStatusBar.sslCertificateExpiry.content": "SSL 证书于 {certificateValidity} 过期",
|
||||
"xpack.uptime.notFountPage.homeLinkText": "返回主页",
|
||||
"xpack.uptime.overviewPageLink.disabled.ariaLabel": "禁用的分页按钮表示在监测列表中无法进行进一步导航。",
|
||||
"xpack.uptime.overviewPageLink.next.ariaLabel": "下页结果",
|
||||
|
|
|
|||
Loading…
Reference in a new issue