Skip to content

Commit

Permalink
[Uptime] Fix uptime amsterdam UI issues (#103683)
Browse files Browse the repository at this point in the history
* Uptime - update monitor type format in StatusBar and update UI for define connectors switch

* update define_connectors

* Resolve type error.

* Add tests for `renderMonitorType`.

* remove unnecessary async specifier

* update i18n

* remove unused imports

* update i18n

Co-authored-by: Justin Kambic <justin.kambic@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
  • Loading branch information
3 people authored Jul 1, 2021
1 parent 9e60da5 commit b7dc2c1
Show file tree
Hide file tree
Showing 11 changed files with 231 additions and 83 deletions.
3 changes: 1 addition & 2 deletions x-pack/plugins/translations/translations/ja-JP.json
Original file line number Diff line number Diff line change
Expand Up @@ -23592,7 +23592,6 @@
"xpack.uptime.monitorDetails.title.pingType.icmp": "ICMP ping",
"xpack.uptime.monitorDetails.title.pingType.tcp": "TCP ping",
"xpack.uptime.monitorList.anomalyColumn.label": "レスポンス異常スコア",
"xpack.uptime.monitorList.defineConnector.description": "アラートを有効にするには、デフォルトのアラートアクションコネクターを定義してください。",
"xpack.uptime.monitorList.downLineSeries.downLabel": "ダウン",
"xpack.uptime.monitorList.drawer.missingLocation": "一部の Heartbeat インスタンスには位置情報が定義されていません。Heartbeat 構成への{link}。",
"xpack.uptime.monitorList.drawer.mostRecentRun": "直近のテスト実行",
Expand Down Expand Up @@ -24216,4 +24215,4 @@
"xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "フィールドを選択してください。",
"xpack.watcher.watcherDescription": "アラートの作成、管理、監視によりデータへの変更を検知します。"
}
}
}
3 changes: 1 addition & 2 deletions x-pack/plugins/translations/translations/zh-CN.json
Original file line number Diff line number Diff line change
Expand Up @@ -23960,7 +23960,6 @@
"xpack.uptime.monitorDetails.title.pingType.icmp": "ICMP ping",
"xpack.uptime.monitorDetails.title.pingType.tcp": "TCP ping",
"xpack.uptime.monitorList.anomalyColumn.label": "响应异常分数",
"xpack.uptime.monitorList.defineConnector.description": "要开始启用告警,请在以下位置定义默认告警操作连接器",
"xpack.uptime.monitorList.downLineSeries.downLabel": "关闭检查",
"xpack.uptime.monitorList.drawer.missingLocation": "某些 Heartbeat 实例未定义位置。{link}到您的 Heartbeat 配置。",
"xpack.uptime.monitorList.drawer.mostRecentRun": "最新测试运行",
Expand Down Expand Up @@ -24594,4 +24593,4 @@
"xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "此字段必填。",
"xpack.watcher.watcherDescription": "通过创建、管理和监测警报来检测数据中的更改。"
}
}
}
15 changes: 4 additions & 11 deletions x-pack/plugins/uptime/public/components/monitor/monitor_title.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -89,17 +89,9 @@ export const MonitorPageTitle: React.FC = () => {

return (
<>
<EuiFlexGroup wrap={false} data-test-subj="monitorTitle">
<EuiFlexItem grow={false}>
<EuiTitle>
<h1 className="eui-textNoWrap">{nameOrId}</h1>
</EuiTitle>
<EuiSpacer size="xs" />
</EuiFlexItem>
<EuiFlexItem grow={false} style={{ justifyContent: 'center' }}>
<EnableMonitorAlert monitorId={monitorId} selectedMonitor={selectedMonitor!} />
</EuiFlexItem>
</EuiFlexGroup>
<EuiTitle>
<h1 className="eui-textNoWrap">{nameOrId}</h1>
</EuiTitle>
<EuiSpacer size="s" />
<EuiFlexGroup wrap={false} gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
Expand All @@ -126,6 +118,7 @@ export const MonitorPageTitle: React.FC = () => {
</EuiFlexItem>
)}
</EuiFlexGroup>
<EnableMonitorAlert monitorId={monitorId} selectedMonitor={selectedMonitor!} />
</>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import { renderMonitorType } from './status_bar';

describe('StatusBar component', () => {
describe('renderMonitorType', () => {
it('handles http type', () => {
expect(renderMonitorType('http')).toBe('HTTP');
});

it('handles tcp type', () => {
expect(renderMonitorType('tcp')).toBe('TCP');
});

it('handles icmp type', () => {
expect(renderMonitorType('icmp')).toBe('ICMP');
});

it('handles browser type', () => {
expect(renderMonitorType('browser')).toBe('Browser');
});

it('returns empty string for `undefined`', () => {
expect(renderMonitorType(undefined)).toBe('');
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
EuiDescriptionListDescription,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import { MonitorSSLCertificate } from './ssl_certificate';
import * as labels from '../translations';
import { StatusByLocations } from './status_by_location';
Expand All @@ -40,6 +41,29 @@ export const MonListDescription = styled(EuiDescriptionListDescription)`
}
`;

export const renderMonitorType = (type: string | undefined) => {
switch (type) {
case 'http':
return i18n.translate('xpack.uptime.monitorDetails.statusBar.pingType.http', {
defaultMessage: 'HTTP',
});
case 'tcp':
return i18n.translate('xpack.uptime.monitorDetails.statusBar.pingType.tcp', {
defaultMessage: 'TCP',
});
case 'icmp':
return i18n.translate('xpack.uptime.monitorDetails.statusBar.pingType.icmp', {
defaultMessage: 'ICMP',
});
case 'browser':
return i18n.translate('xpack.uptime.monitorDetails.statusBar.pingType.browser', {
defaultMessage: 'Browser',
});
default:
return '';
}
};

export const MonitorStatusBar: React.FC = () => {
const { monitorId, monitorStatus, monitorLocations = {} } = useStatusBar();

Expand Down Expand Up @@ -77,7 +101,7 @@ export const MonitorStatusBar: React.FC = () => {
<>
<MonListTitle aria-label={labels.typeAriaLabel}>{labels.typeLabel}</MonListTitle>
<MonListDescription data-test-subj="monitor-page-type">
{monitorStatus.monitor.type}
{renderMonitorType(monitorStatus?.monitor?.type)}
</MonListDescription>
</>
)}
Expand Down

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,44 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import React from 'react';
import { DefineAlertConnectors } from './define_connectors';
import { screen } from '@testing-library/react';
import { fireEvent } from '@testing-library/dom';
import { ENABLE_STATUS_ALERT } from './translations';
import { render } from '../../../../lib/helper/rtl_helpers';

describe('EnableAlertComponent', () => {
it('does not showHelpText or render popover when showHelpText and renderPopOver are false', () => {
render(<DefineAlertConnectors />);
expect(screen.getByTestId('uptimeDisplayDefineConnector')).toBeInTheDocument();
expect(screen.queryByText(ENABLE_STATUS_ALERT)).not.toBeInTheDocument();
expect(screen.queryByText(/Define a default connector/)).not.toBeInTheDocument();

fireEvent.click(screen.getByTestId('uptimeDisplayDefineConnector'));

expect(screen.queryByTestId('uptimeSettingsDefineConnector')).not.toBeInTheDocument();
});

it('shows label when showLabel is true', () => {
render(<DefineAlertConnectors showLabel />);
expect(screen.getByText(ENABLE_STATUS_ALERT)).toBeInTheDocument();
});

it('shows helpText when showHelpText is true', () => {
render(<DefineAlertConnectors showHelpText />);
expect(screen.getByText(/Define a default connector/)).toBeInTheDocument();
});

it('renders popover on click when showPopover is true', () => {
render(<DefineAlertConnectors showPopover />);

fireEvent.click(screen.getByTestId('uptimeDisplayDefineConnector'));

expect(screen.getByTestId('uptimeSettingsDefineConnector')).toBeInTheDocument();
});
});
Loading

0 comments on commit b7dc2c1

Please sign in to comment.