Skip to content

Commit

Permalink
[Uptime] Monitor SSL Certificate Color version for warning (#54040) (#…
Browse files Browse the repository at this point in the history
…54637)

* 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 <[email protected]>

Co-authored-by: Elastic Machine <[email protected]>
  • Loading branch information
shahzad31 and elasticmachine authored Jan 13, 2020
1 parent 39c1f9f commit 9aa8e5e
Show file tree
Hide file tree
Showing 7 changed files with 128 additions and 79 deletions.

This file was deleted.

This file was deleted.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
@@ -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);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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>
Expand Down
2 changes: 0 additions & 2 deletions x-pack/plugins/translations/translations/ja-JP.json
Original file line number Diff line number Diff line change
Expand Up @@ -11831,8 +11831,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": "次の結果ページ",
Expand Down
2 changes: 0 additions & 2 deletions x-pack/plugins/translations/translations/zh-CN.json
Original file line number Diff line number Diff line change
Expand Up @@ -11859,8 +11859,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": "下页结果",
Expand Down

0 comments on commit 9aa8e5e

Please sign in to comment.