[Alerting] Alert Details and Alert List design improvements (#64839)
* added labels * cleaned up flex elements in alert details view * replace eye icon with mute switch * removed Actions columns from Connectors list * fix keypadmenuitems layout in action selection section * fixed error * more cleanup * added back Actions column for Connectors List but with new name * fix some tests * fix another test * removed unneeded lodash from test file * fix test in details.ts * removed unused translations * removed Alerts (Actions) column from Connectors table" * removed translation * removed EuiBadge from connectors list * updated test in connectors.ts * fix function tests * fix more function tests Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Patrick Mueller <pmuellr@gmail.com>
This commit is contained in:
parent
aad9dafb3d
commit
cf64454574
|
@ -15720,7 +15720,6 @@
|
|||
"xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.deleteActionName": "削除",
|
||||
"xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actionTypeTitle": "タイプ",
|
||||
"xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.nameTitle": "名前",
|
||||
"xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.referencedByCountTitle": "アクション",
|
||||
"xpack.triggersActionsUI.sections.actionsConnectorsList.filters.actionTypeIdName": "タイプ",
|
||||
"xpack.triggersActionsUI.sections.actionsConnectorsList.multipleTitle": "コネクター",
|
||||
"xpack.triggersActionsUI.sections.actionsConnectorsList.noPermissionToCreateTitle": "コネクターを作成するパーミッションがありません。",
|
||||
|
@ -15775,10 +15774,6 @@
|
|||
"xpack.triggersActionsUI.sections.alertAdd.thresholdPreviewChart.noDataTitle": "このクエリに一致するデータはありません",
|
||||
"xpack.triggersActionsUI.sections.alertAdd.unableToLoadVisualizationMessage": "ビジュアライゼーションを読み込めません",
|
||||
"xpack.triggersActionsUI.sections.alertDetails.alertInstances.disabledAlert": "このアラートは無効になっていて再表示できません。[↑ を有効にする]を切り替えてアクティブにします。",
|
||||
"xpack.triggersActionsUI.sections.alertDetails.alertInstances.mutedAlert": "ミュート",
|
||||
"xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.actions.mute": "ミュート",
|
||||
"xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.actions.unmute": "ミュート解除",
|
||||
"xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.columns.actions": "アクション",
|
||||
"xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.columns.duration": "期間",
|
||||
"xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.columns.instance": "インスタンス",
|
||||
"xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.columns.start": "開始",
|
||||
|
@ -15786,7 +15781,6 @@
|
|||
"xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.status.active": "アクティブ",
|
||||
"xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.status.inactive": "非アクティブ",
|
||||
"xpack.triggersActionsUI.sections.alertDetails.betaBadgeTooltipContent": "{pluginName} はベータ段階で、変更される可能性があります。デザインとコードはオフィシャル GA 機能よりも完成度が低く、現状のまま保証なしで提供されています。ベータ機能にはオフィシャル GA 機能の SLA が適用されません。",
|
||||
"xpack.triggersActionsUI.sections.alertDetails.collapsedItemActons.enableTitle": "有効にする",
|
||||
"xpack.triggersActionsUI.sections.alertDetails.collapsedItemActons.muteTitle": "ミュート",
|
||||
"xpack.triggersActionsUI.sections.alertDetails.unableToLoadAlertMessage": "アラートを読み込めません: {message}",
|
||||
"xpack.triggersActionsUI.sections.alertDetails.unableToLoadAlertStateMessage": "アラートステートを読み込めません: {message}",
|
||||
|
|
|
@ -15728,7 +15728,6 @@
|
|||
"xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actions.deleteActionName": "删除",
|
||||
"xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.actionTypeTitle": "类型",
|
||||
"xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.nameTitle": "名称",
|
||||
"xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.referencedByCountTitle": "操作",
|
||||
"xpack.triggersActionsUI.sections.actionsConnectorsList.filters.actionTypeIdName": "类型",
|
||||
"xpack.triggersActionsUI.sections.actionsConnectorsList.multipleTitle": "连接器",
|
||||
"xpack.triggersActionsUI.sections.actionsConnectorsList.noPermissionToCreateTitle": "无权创建连接器",
|
||||
|
@ -15783,10 +15782,6 @@
|
|||
"xpack.triggersActionsUI.sections.alertAdd.thresholdPreviewChart.noDataTitle": "没有数据匹配此查询",
|
||||
"xpack.triggersActionsUI.sections.alertAdd.unableToLoadVisualizationMessage": "无法加载可视化",
|
||||
"xpack.triggersActionsUI.sections.alertDetails.alertInstances.disabledAlert": "此告警已禁用,无法显示。切换启用 ↑ 以激活。",
|
||||
"xpack.triggersActionsUI.sections.alertDetails.alertInstances.mutedAlert": "已静音",
|
||||
"xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.actions.mute": "静音",
|
||||
"xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.actions.unmute": "取消静音",
|
||||
"xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.columns.actions": "操作",
|
||||
"xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.columns.duration": "持续时间",
|
||||
"xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.columns.instance": "实例",
|
||||
"xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.columns.start": "启动",
|
||||
|
@ -15794,7 +15789,6 @@
|
|||
"xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.status.active": "活动",
|
||||
"xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.status.inactive": "非活动",
|
||||
"xpack.triggersActionsUI.sections.alertDetails.betaBadgeTooltipContent": "{pluginName} 为公测版,可能会进行更改。设计和代码相对于正式发行版功能还不够成熟,将按原样提供,且不提供任何保证。公测版功能不受正式发行版功能支持 SLA 的约束。",
|
||||
"xpack.triggersActionsUI.sections.alertDetails.collapsedItemActons.enableTitle": "启用",
|
||||
"xpack.triggersActionsUI.sections.alertDetails.collapsedItemActons.muteTitle": "静音",
|
||||
"xpack.triggersActionsUI.sections.alertDetails.unableToLoadAlertMessage": "无法加载告警:{message}",
|
||||
"xpack.triggersActionsUI.sections.alertDetails.unableToLoadAlertStateMessage": "无法加载告警状态:{message}",
|
||||
|
|
|
@ -556,14 +556,14 @@ export const ActionForm = ({
|
|||
);
|
||||
|
||||
return (
|
||||
<Fragment key={`keypad-${item.id}`}>
|
||||
<EuiFlexItem grow={false} key={`keypad-${item.id}`}>
|
||||
{checkEnabledResult.isEnabled && keyPadItem}
|
||||
{checkEnabledResult.isEnabled === false && (
|
||||
<EuiToolTip position="top" content={checkEnabledResult.message}>
|
||||
{keyPadItem}
|
||||
</EuiToolTip>
|
||||
)}
|
||||
</Fragment>
|
||||
</EuiFlexItem>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
@ -656,7 +656,7 @@ export const ActionForm = ({
|
|||
)}
|
||||
</EuiFlexGroup>
|
||||
<EuiSpacer />
|
||||
<EuiFlexGroup justifyContent="spaceBetween" gutterSize="s" wrap>
|
||||
<EuiFlexGroup gutterSize="m" wrap>
|
||||
{isLoadingActionTypes ? (
|
||||
<SectionLoading>
|
||||
<FormattedMessage
|
||||
|
|
|
@ -6,7 +6,6 @@
|
|||
|
||||
import React, { Fragment, useState, useEffect } from 'react';
|
||||
import {
|
||||
EuiBadge,
|
||||
EuiInMemoryTable,
|
||||
EuiSpacer,
|
||||
EuiButton,
|
||||
|
@ -185,23 +184,6 @@ export const ActionsConnectorsList: React.FunctionComponent = () => {
|
|||
sortable: false,
|
||||
truncateText: true,
|
||||
},
|
||||
{
|
||||
field: 'referencedByCount',
|
||||
'data-test-subj': 'connectorsTableCell-referencedByCount',
|
||||
name: i18n.translate(
|
||||
'xpack.triggersActionsUI.sections.actionsConnectorsList.connectorsListTable.columns.referencedByCountTitle',
|
||||
{ defaultMessage: 'Actions' }
|
||||
),
|
||||
sortable: false,
|
||||
truncateText: true,
|
||||
render: (value: number, item: ActionConnectorTableItem) => {
|
||||
return (
|
||||
<EuiBadge color="hollow" key={item.id}>
|
||||
{value}
|
||||
</EuiBadge>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'isPreconfigured',
|
||||
name: '',
|
||||
|
|
|
@ -16,7 +16,6 @@ import {
|
|||
EuiBetaBadge,
|
||||
EuiButtonEmpty,
|
||||
} from '@elastic/eui';
|
||||
import { times, random } from 'lodash';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { ViewInApp } from './view_in_app';
|
||||
import { PLUGIN } from '../../../constants/plugin';
|
||||
|
@ -175,7 +174,6 @@ describe('alert_details', () => {
|
|||
});
|
||||
|
||||
it('renders a counter for multiple alert action', () => {
|
||||
const actionCount = random(1, 10);
|
||||
const alert = mockAlert({
|
||||
actions: [
|
||||
{
|
||||
|
@ -184,12 +182,12 @@ describe('alert_details', () => {
|
|||
params: {},
|
||||
actionTypeId: '.server-log',
|
||||
},
|
||||
...times(actionCount, () => ({
|
||||
{
|
||||
group: 'default',
|
||||
id: uuid.v4(),
|
||||
params: {},
|
||||
actionTypeId: '.email',
|
||||
})),
|
||||
},
|
||||
],
|
||||
});
|
||||
const alertType = {
|
||||
|
@ -238,7 +236,7 @@ describe('alert_details', () => {
|
|||
expect(
|
||||
details.containsMatchingElement(
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiBadge color="hollow">{`+${actionCount}`}</EuiBadge>
|
||||
<EuiBadge color="hollow">{actionTypes[1].name}</EuiBadge>
|
||||
</EuiFlexItem>
|
||||
)
|
||||
).toBeTruthy();
|
||||
|
@ -288,8 +286,8 @@ describe('alert_details', () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe('enable button', () => {
|
||||
it('should render an enable button when alert is enabled', () => {
|
||||
describe('disable button', () => {
|
||||
it('should render a disable button when alert is enabled', () => {
|
||||
const alert = mockAlert({
|
||||
enabled: true,
|
||||
});
|
||||
|
@ -306,16 +304,16 @@ describe('enable button', () => {
|
|||
<AlertDetails alert={alert} alertType={alertType} actionTypes={[]} {...mockAlertApis} />
|
||||
)
|
||||
.find(EuiSwitch)
|
||||
.find('[name="enable"]')
|
||||
.find('[name="disable"]')
|
||||
.first();
|
||||
|
||||
expect(enableButton.props()).toMatchObject({
|
||||
checked: true,
|
||||
checked: false,
|
||||
disabled: false,
|
||||
});
|
||||
});
|
||||
|
||||
it('should render an enable button when alert is disabled', () => {
|
||||
it('should render a disable button when alert is disabled', () => {
|
||||
const alert = mockAlert({
|
||||
enabled: false,
|
||||
});
|
||||
|
@ -332,11 +330,11 @@ describe('enable button', () => {
|
|||
<AlertDetails alert={alert} alertType={alertType} actionTypes={[]} {...mockAlertApis} />
|
||||
)
|
||||
.find(EuiSwitch)
|
||||
.find('[name="enable"]')
|
||||
.find('[name="disable"]')
|
||||
.first();
|
||||
|
||||
expect(enableButton.props()).toMatchObject({
|
||||
checked: false,
|
||||
checked: true,
|
||||
disabled: false,
|
||||
});
|
||||
});
|
||||
|
@ -365,7 +363,7 @@ describe('enable button', () => {
|
|||
/>
|
||||
)
|
||||
.find(EuiSwitch)
|
||||
.find('[name="enable"]')
|
||||
.find('[name="disable"]')
|
||||
.first();
|
||||
|
||||
enableButton.simulate('click');
|
||||
|
@ -400,7 +398,7 @@ describe('enable button', () => {
|
|||
/>
|
||||
)
|
||||
.find(EuiSwitch)
|
||||
.find('[name="enable"]')
|
||||
.find('[name="disable"]')
|
||||
.first();
|
||||
|
||||
enableButton.simulate('click');
|
||||
|
|
|
@ -13,6 +13,7 @@ import {
|
|||
EuiPageContentHeader,
|
||||
EuiPageContentHeaderSection,
|
||||
EuiTitle,
|
||||
EuiText,
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiBadge,
|
||||
|
@ -73,8 +74,9 @@ export const AlertDetails: React.FunctionComponent<AlertDetailsProps> = ({
|
|||
const canSave = hasSaveAlertsCapability(capabilities);
|
||||
|
||||
const actionTypesByTypeId = indexBy(actionTypes, 'id');
|
||||
const [firstAction, ...otherActions] = alert.actions;
|
||||
|
||||
const alertActions = alert.actions;
|
||||
const uniqueActions = Array.from(new Set(alertActions.map((item: any) => item.actionTypeId)));
|
||||
const [isEnabled, setIsEnabled] = useState<boolean>(alert.enabled);
|
||||
const [isMuted, setIsMuted] = useState<boolean>(alert.muteAll);
|
||||
const [editFlyoutVisible, setEditFlyoutVisibility] = useState<boolean>(false);
|
||||
|
@ -156,33 +158,50 @@ export const AlertDetails: React.FunctionComponent<AlertDetailsProps> = ({
|
|||
<EuiPageContentBody>
|
||||
<EuiFlexGroup wrap responsive={false} gutterSize="m">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiFlexGroup wrap responsive={false} gutterSize="xs">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiBadge data-test-subj="alertTypeLabel">{alertType.name}</EuiBadge>
|
||||
</EuiFlexItem>
|
||||
{firstAction && (
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiBadge color="hollow" data-test-subj="actionTypeLabel">
|
||||
{actionTypesByTypeId[firstAction.actionTypeId].name ??
|
||||
firstAction.actionTypeId}
|
||||
</EuiBadge>
|
||||
</EuiFlexItem>
|
||||
)}
|
||||
{otherActions.length ? (
|
||||
<EuiFlexItem grow={false} data-test-subj="actionCountLabel">
|
||||
<EuiBadge color="hollow">+{otherActions.length}</EuiBadge>
|
||||
</EuiFlexItem>
|
||||
) : null}
|
||||
</EuiFlexGroup>
|
||||
<EuiText size="s">
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.alertTypeTitle"
|
||||
defaultMessage="Type"
|
||||
/>
|
||||
</p>
|
||||
</EuiText>
|
||||
<EuiSpacer size="xs" />
|
||||
<EuiBadge data-test-subj="alertTypeLabel">{alertType.name}</EuiBadge>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={true}>
|
||||
<EuiFlexGroup wrap responsive={false} gutterSize="m">
|
||||
<EuiFlexItem grow={1}>
|
||||
{uniqueActions && uniqueActions.length ? (
|
||||
<Fragment>
|
||||
<EuiText size="s">
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.actionsTex"
|
||||
defaultMessage="Actions"
|
||||
/>
|
||||
</p>
|
||||
</EuiText>
|
||||
<EuiSpacer size="xs" />
|
||||
<EuiFlexGroup wrap gutterSize="s">
|
||||
{uniqueActions.map((action, index) => (
|
||||
<EuiFlexItem key={index} grow={false}>
|
||||
<EuiBadge color="hollow" data-test-subj="actionTypeLabel">
|
||||
{actionTypesByTypeId[action].name ?? action}
|
||||
</EuiBadge>
|
||||
</EuiFlexItem>
|
||||
))}
|
||||
</EuiFlexGroup>
|
||||
</Fragment>
|
||||
) : null}
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiSpacer />
|
||||
<EuiFlexGroup justifyContent="flexEnd" wrap responsive={false} gutterSize="m">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiSwitch
|
||||
name="enable"
|
||||
name="disable"
|
||||
disabled={!canSave}
|
||||
checked={isEnabled}
|
||||
data-test-subj="enableSwitch"
|
||||
checked={!isEnabled}
|
||||
data-test-subj="disableSwitch"
|
||||
onChange={async () => {
|
||||
if (isEnabled) {
|
||||
setIsEnabled(false);
|
||||
|
@ -195,8 +214,8 @@ export const AlertDetails: React.FunctionComponent<AlertDetailsProps> = ({
|
|||
}}
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="xpack.triggersActionsUI.sections.alertDetails.collapsedItemActons.enableTitle"
|
||||
defaultMessage="Enable"
|
||||
id="xpack.triggersActionsUI.sections.alertDetails.collapsedItemActons.disableTitle"
|
||||
defaultMessage="Disable"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
@ -229,19 +248,21 @@ export const AlertDetails: React.FunctionComponent<AlertDetailsProps> = ({
|
|||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiFlexGroup>
|
||||
<EuiSpacer size="m" />
|
||||
<EuiFlexItem>
|
||||
{alert.enabled ? (
|
||||
<AlertInstancesRouteWithApi requestRefresh={requestRefresh} alert={alert} />
|
||||
) : (
|
||||
<EuiCallOut title="Disabled Alert" color="warning" iconType="help">
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="xpack.triggersActionsUI.sections.alertDetails.alertInstances.disabledAlert"
|
||||
defaultMessage="This alert is disabled and cannot be displayed. Toggle Enable ↑ to activate it."
|
||||
/>
|
||||
</p>
|
||||
</EuiCallOut>
|
||||
<Fragment>
|
||||
<EuiSpacer />
|
||||
<EuiCallOut title="Disabled Alert" color="warning" iconType="help">
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="xpack.triggersActionsUI.sections.alertDetails.alertInstances.disabledAlert"
|
||||
defaultMessage="This alert is disabled and cannot be displayed. Toggle Disable ↑ to activate it."
|
||||
/>
|
||||
</p>
|
||||
</EuiCallOut>
|
||||
</Fragment>
|
||||
)}
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
|
|
|
@ -7,11 +7,10 @@
|
|||
import React, { Fragment, useState } from 'react';
|
||||
import moment, { Duration } from 'moment';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { EuiBasicTable, EuiButtonToggle, EuiBadge, EuiHealth } from '@elastic/eui';
|
||||
import { EuiBasicTable, EuiHealth, EuiSpacer, EuiSwitch } from '@elastic/eui';
|
||||
// @ts-ignore
|
||||
import { RIGHT_ALIGNMENT, CENTER_ALIGNMENT } from '@elastic/eui/lib/services';
|
||||
import { padLeft, difference, chunk } from 'lodash';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import { Alert, AlertTaskState, RawAlertInstance, Pagination } from '../../../../types';
|
||||
import {
|
||||
ComponentOpts as AlertApis,
|
||||
|
@ -80,40 +79,19 @@ export const alertInstancesTableColumns = (
|
|||
field: '',
|
||||
align: RIGHT_ALIGNMENT,
|
||||
name: i18n.translate(
|
||||
'xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.columns.actions',
|
||||
{ defaultMessage: 'Actions' }
|
||||
'xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.columns.mute',
|
||||
{ defaultMessage: 'Mute' }
|
||||
),
|
||||
render: (alertInstance: AlertInstanceListItem) => {
|
||||
return (
|
||||
<Fragment>
|
||||
{alertInstance.isMuted ? (
|
||||
<EuiBadge data-test-subj={`mutedAlertInstanceLabel_${alertInstance.instance}`}>
|
||||
<FormattedMessage
|
||||
id="xpack.triggersActionsUI.sections.alertDetails.alertInstances.mutedAlert"
|
||||
defaultMessage="Muted"
|
||||
/>
|
||||
</EuiBadge>
|
||||
) : (
|
||||
<Fragment />
|
||||
)}
|
||||
<EuiButtonToggle
|
||||
label={
|
||||
alertInstance.isMuted
|
||||
? i18n.translate(
|
||||
'xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.actions.unmute',
|
||||
{ defaultMessage: 'Unmute' }
|
||||
)
|
||||
: i18n.translate(
|
||||
'xpack.triggersActionsUI.sections.alertDetails.alertInstancesList.actions.mute',
|
||||
{ defaultMessage: 'Mute' }
|
||||
)
|
||||
}
|
||||
<EuiSwitch
|
||||
label="mute"
|
||||
showLabel={false}
|
||||
compressed={true}
|
||||
checked={alertInstance.isMuted}
|
||||
data-test-subj={`muteAlertInstanceButton_${alertInstance.instance}`}
|
||||
iconType={alertInstance.isMuted ? 'eyeClosed' : 'eye'}
|
||||
onChange={() => onMuteAction(alertInstance)}
|
||||
isSelected={alertInstance.isMuted}
|
||||
isEmpty
|
||||
isIconOnly
|
||||
/>
|
||||
</Fragment>
|
||||
);
|
||||
|
@ -161,6 +139,7 @@ export function AlertInstances({
|
|||
|
||||
return (
|
||||
<Fragment>
|
||||
<EuiSpacer size="xl" />
|
||||
<input
|
||||
type="hidden"
|
||||
data-test-subj="alertInstancesDurationEpoch"
|
||||
|
|
|
@ -9,6 +9,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
|
|||
import React, { useEffect, useState, Fragment } from 'react';
|
||||
import {
|
||||
EuiBasicTable,
|
||||
EuiBadge,
|
||||
EuiButton,
|
||||
EuiFieldText,
|
||||
EuiFlexGroup,
|
||||
|
@ -192,6 +193,22 @@ export const AlertsList: React.FunctionComponent = () => {
|
|||
sortable: false,
|
||||
'data-test-subj': 'alertsTableCell-tagsText',
|
||||
},
|
||||
{
|
||||
field: 'actionsText',
|
||||
name: i18n.translate(
|
||||
'xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.actionsText',
|
||||
{ defaultMessage: 'Actions' }
|
||||
),
|
||||
render: (count: number, item: AlertTableItem) => {
|
||||
return (
|
||||
<EuiBadge color="hollow" key={item.id}>
|
||||
{count}
|
||||
</EuiBadge>
|
||||
);
|
||||
},
|
||||
sortable: false,
|
||||
'data-test-subj': 'alertsTableCell-actionsText',
|
||||
},
|
||||
{
|
||||
field: 'alertType',
|
||||
name: i18n.translate(
|
||||
|
@ -437,6 +454,7 @@ function filterAlertsById(alerts: Alert[], ids: string[]): Alert[] {
|
|||
function convertAlertsToTableItems(alerts: Alert[], alertTypesIndex: AlertTypeIndex) {
|
||||
return alerts.map(alert => ({
|
||||
...alert,
|
||||
actionsText: alert.actions.length,
|
||||
tagsText: alert.tags.join(', '),
|
||||
alertType: alertTypesIndex[alert.alertTypeId]?.name ?? alert.alertTypeId,
|
||||
}));
|
||||
|
|
|
@ -56,7 +56,6 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
|
|||
{
|
||||
name: connectorName,
|
||||
actionType: 'Slack',
|
||||
referencedByCount: '0',
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
@ -100,7 +99,6 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
|
|||
{
|
||||
name: updatedConnectorName,
|
||||
actionType: 'Slack',
|
||||
referencedByCount: '0',
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
|
|
@ -75,29 +75,28 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
|
|||
const alertType = await pageObjects.alertDetailsUI.getAlertType();
|
||||
expect(alertType).to.be(`Always Firing`);
|
||||
|
||||
const { actionType, actionCount } = await pageObjects.alertDetailsUI.getActionsLabels();
|
||||
const { actionType } = await pageObjects.alertDetailsUI.getActionsLabels();
|
||||
expect(actionType).to.be(`Slack`);
|
||||
expect(actionCount).to.be(`+1`);
|
||||
});
|
||||
|
||||
it('should disable the alert', async () => {
|
||||
const enableSwitch = await testSubjects.find('enableSwitch');
|
||||
const disableSwitch = await testSubjects.find('disableSwitch');
|
||||
|
||||
const isChecked = await enableSwitch.getAttribute('aria-checked');
|
||||
expect(isChecked).to.eql('true');
|
||||
const isChecked = await disableSwitch.getAttribute('aria-checked');
|
||||
expect(isChecked).to.eql('false');
|
||||
|
||||
await enableSwitch.click();
|
||||
await disableSwitch.click();
|
||||
|
||||
const enabledSwitchAfterDisabling = await testSubjects.find('enableSwitch');
|
||||
const isCheckedAfterDisabling = await enabledSwitchAfterDisabling.getAttribute(
|
||||
const disableSwitchAfterDisabling = await testSubjects.find('disableSwitch');
|
||||
const isCheckedAfterDisabling = await disableSwitchAfterDisabling.getAttribute(
|
||||
'aria-checked'
|
||||
);
|
||||
expect(isCheckedAfterDisabling).to.eql('false');
|
||||
expect(isCheckedAfterDisabling).to.eql('true');
|
||||
});
|
||||
|
||||
it('shouldnt allow you to mute a disabled alert', async () => {
|
||||
const disabledEnableSwitch = await testSubjects.find('enableSwitch');
|
||||
expect(await disabledEnableSwitch.getAttribute('aria-checked')).to.eql('false');
|
||||
const disabledDisableSwitch = await testSubjects.find('disableSwitch');
|
||||
expect(await disabledDisableSwitch.getAttribute('aria-checked')).to.eql('true');
|
||||
|
||||
const muteSwitch = await testSubjects.find('muteSwitch');
|
||||
expect(await muteSwitch.getAttribute('aria-checked')).to.eql('false');
|
||||
|
@ -112,18 +111,18 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
|
|||
});
|
||||
|
||||
it('should reenable a disabled the alert', async () => {
|
||||
const enableSwitch = await testSubjects.find('enableSwitch');
|
||||
const disableSwitch = await testSubjects.find('disableSwitch');
|
||||
|
||||
const isChecked = await enableSwitch.getAttribute('aria-checked');
|
||||
expect(isChecked).to.eql('false');
|
||||
const isChecked = await disableSwitch.getAttribute('aria-checked');
|
||||
expect(isChecked).to.eql('true');
|
||||
|
||||
await enableSwitch.click();
|
||||
await disableSwitch.click();
|
||||
|
||||
const enabledSwitchAfterReenabling = await testSubjects.find('enableSwitch');
|
||||
const isCheckedAfterDisabling = await enabledSwitchAfterReenabling.getAttribute(
|
||||
const disableSwitchAfterReenabling = await testSubjects.find('disableSwitch');
|
||||
const isCheckedAfterDisabling = await disableSwitchAfterReenabling.getAttribute(
|
||||
'aria-checked'
|
||||
);
|
||||
expect(isCheckedAfterDisabling).to.eql('true');
|
||||
expect(isCheckedAfterDisabling).to.eql('false');
|
||||
});
|
||||
|
||||
it('should mute the alert', async () => {
|
||||
|
|
|
@ -23,7 +23,6 @@ export function AlertDetailsPageProvider({ getService }: FtrProviderContext) {
|
|||
async getActionsLabels() {
|
||||
return {
|
||||
actionType: await testSubjects.getVisibleText('actionTypeLabel'),
|
||||
actionCount: await testSubjects.getVisibleText('actionCountLabel'),
|
||||
};
|
||||
},
|
||||
async getAlertInstancesList() {
|
||||
|
@ -71,12 +70,10 @@ export function AlertDetailsPageProvider({ getService }: FtrProviderContext) {
|
|||
const muteAlertInstanceButton = await testSubjects.find(
|
||||
`muteAlertInstanceButton_${instance}`
|
||||
);
|
||||
log.debug(`checked:${await muteAlertInstanceButton.getAttribute('checked')}`);
|
||||
expect(await muteAlertInstanceButton.getAttribute('checked')).to.eql(
|
||||
isMuted ? 'true' : null
|
||||
log.debug(`checked:${await muteAlertInstanceButton.getAttribute('aria-checked')}`);
|
||||
expect(await muteAlertInstanceButton.getAttribute('aria-checked')).to.eql(
|
||||
isMuted ? 'true' : 'false'
|
||||
);
|
||||
|
||||
expect(await testSubjects.exists(`mutedAlertInstanceLabel_${instance}`)).to.eql(isMuted);
|
||||
});
|
||||
},
|
||||
async ensureAlertInstanceExistance(instance: string, shouldExist: boolean) {
|
||||
|
|
|
@ -69,10 +69,6 @@ export function TriggersActionsPageProvider({ getService }: FtrProviderContext)
|
|||
.findTestSubject('connectorsTableCell-actionType')
|
||||
.find('.euiTableCellContent')
|
||||
.text(),
|
||||
referencedByCount: $(row)
|
||||
.findTestSubject('connectorsTableCell-referencedByCount')
|
||||
.find('.euiTableCellContent')
|
||||
.text(),
|
||||
};
|
||||
});
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue