Skip to content
Merged
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
RULE_SWITCH,
SECOND_RULE,
SEVENTH_RULE,
RULE_AUTO_REFRESH_IDLE_MODAL,
} from '../screens/alerts_detection_rules';

import {
Expand All @@ -19,6 +20,11 @@ import {
} from '../tasks/alerts';
import {
activateRule,
checkAllRulesIdleModal,
checkAutoRefresh,
dismissAllRulesIdleModal,
resetAllRulesIdleModalTimeout,
setAllRulesAutoRefreshIntervalInSeconds,
sortByActivatedRules,
waitForLoadElasticPrebuiltDetectionRulesTableToBeLoaded,
waitForRuleToBeActivated,
Expand All @@ -35,6 +41,7 @@ describe('Alerts detection rules', () => {

after(() => {
esArchiverUnload('prebuilt_rules_loaded');
cy.clock().invoke('restore');
});

it('Sorts by activated rules', () => {
Expand Down Expand Up @@ -75,4 +82,39 @@ describe('Alerts detection rules', () => {
});
});
});

it('Displays idle modal if auto refresh is on', () => {
cy.clock(Date.now(), ['setTimeout']);

loginAndWaitForPageWithoutDateRange(DETECTIONS_URL);
waitForAlertsPanelToBeLoaded();
waitForAlertsIndexToBeCreated();
goToManageAlertsDetectionRules();
waitForLoadElasticPrebuiltDetectionRulesTableToBeLoaded();

// idle modal should not show if refresh interval is not set
checkAllRulesIdleModal('not.be.visible');

// idle modal should show if refresh interval is set
setAllRulesAutoRefreshIntervalInSeconds(30);

// mock 30 seconds passing to make sure refresh
// is conducted
checkAutoRefresh(30000, 'be.visible');

// mock 45 minutes passing to check that idle modal shows
// and refreshing is paused
checkAllRulesIdleModal('be.visible');
checkAutoRefresh(30000, 'not.be.visible');

// clicking on modal to continue, should resume refreshing
dismissAllRulesIdleModal();
checkAutoRefresh(30000, 'be.visible');

// if mouse movement detected, idle modal should not
// show after 45 min
cy.clock().invoke('restore');
resetAllRulesIdleModalTimeout();
cy.get(RULE_AUTO_REFRESH_IDLE_MODAL).should('not.exist');
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ export const CREATE_NEW_RULE_BTN = '[data-test-subj="create-new-rule"]';

export const COLLAPSED_ACTION_BTN = '[data-test-subj="euiCollapsedItemActionsButton"]';

export const CUSTOM_RULES_BTN = '[data-test-subj="show-custom-rules-filter-button"]';
export const CUSTOM_RULES_BTN = '[data-test-subj="showCustomRulesFilterButton"]';

export const DELETE_RULE_ACTION_BTN = '[data-test-subj="deleteRuleAction"]';

export const EDIT_RULE_ACTION_BTN = '[data-test-subj="editRuleAction"]';

export const DELETE_RULE_BULK_BTN = '[data-test-subj="deleteRuleBulk"]';

export const ELASTIC_RULES_BTN = '[data-test-subj="show-elastic-rules-filter-button"]';
export const ELASTIC_RULES_BTN = '[data-test-subj="showElasticRulesFilterButton"]';

export const EXPORT_ACTION_BTN = '[data-test-subj="exportRuleAction"]';

Expand All @@ -31,7 +31,7 @@ export const LOAD_PREBUILT_RULES_BTN = '[data-test-subj="load-prebuilt-rules"]';
export const LOADING_INITIAL_PREBUILT_RULES_TABLE =
'[data-test-subj="initialLoadingPanelAllRulesTable"]';

export const LOADING_SPINNER = '[data-test-subj="loading-spinner"]';
export const ASYNC_LOADING_PROGRESS = '[data-test-subj="loadingRulesInfoProgress"]';

export const NEXT_BTN = '[data-test-subj="pagination-button-next"]';

Expand Down Expand Up @@ -64,3 +64,18 @@ export const SHOWING_RULES_TEXT = '[data-test-subj="showingRules"]';
export const SORT_RULES_BTN = '[data-test-subj="tableHeaderSortButton"]';

export const THREE_HUNDRED_ROWS = '[data-test-subj="tablePagination-300-rows"]';

export const ALL_RULES_PANEL = '[data-test-subj="allRulesPanel"]';

export const RULE_AUTO_REFRESH_BUTTON =
'button[data-test-subj="superDatePickerToggleQuickMenuButton"]';

export const RULE_AUTO_REFRESH_INPUT =
'input[data-test-subj="superDatePickerRefreshIntervalInput"]';

export const RULE_AUTO_REFRESH_START_STOP_BUTTON =
'[data-test-subj="superDatePickerToggleRefreshButton"]';

export const RULE_AUTO_REFRESH_IDLE_MODAL = '[data-test-subj="allRulesIdleModal"]';

export const RULE_AUTO_REFRESH_IDLE_MODAL_CONTINUE = '[data-test-subj="allRulesIdleModal"] button';
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import {
DELETE_RULE_BULK_BTN,
LOAD_PREBUILT_RULES_BTN,
LOADING_INITIAL_PREBUILT_RULES_TABLE,
LOADING_SPINNER,
PAGINATION_POPOVER_BTN,
RELOAD_PREBUILT_RULES_BTN,
RULE_CHECKBOX,
Expand All @@ -26,6 +25,12 @@ import {
EXPORT_ACTION_BTN,
EDIT_RULE_ACTION_BTN,
NEXT_BTN,
RULE_AUTO_REFRESH_BUTTON,
RULE_AUTO_REFRESH_INPUT,
ALL_RULES_PANEL,
ASYNC_LOADING_PROGRESS,
RULE_AUTO_REFRESH_IDLE_MODAL,
RULE_AUTO_REFRESH_IDLE_MODAL_CONTINUE,
} from '../screens/alerts_detection_rules';
import { ALL_ACTIONS, DELETE_RULE } from '../screens/rule_details';

Expand Down Expand Up @@ -66,8 +71,8 @@ export const exportFirstRule = () => {

export const filterByCustomRules = () => {
cy.get(CUSTOM_RULES_BTN).click({ force: true });
cy.get(LOADING_SPINNER).should('exist');
cy.get(LOADING_SPINNER).should('not.exist');
cy.get(ASYNC_LOADING_PROGRESS).should('exist');
cy.get(ASYNC_LOADING_PROGRESS).should('not.exist');
};

export const goToCreateNewRule = () => {
Expand Down Expand Up @@ -119,6 +124,39 @@ export const waitForRuleToBeActivated = () => {
};

export const waitForRulesToBeLoaded = () => {
cy.get(LOADING_SPINNER).should('exist');
cy.get(LOADING_SPINNER).should('not.exist');
cy.get(ASYNC_LOADING_PROGRESS).should('exist');
cy.get(ASYNC_LOADING_PROGRESS).should('not.exist');
};

export const setAllRulesAutoRefreshIntervalInSeconds = (interval: number) => {
cy.get(RULE_AUTO_REFRESH_BUTTON).eq(1).should('exist').click({ force: true, multiple: true });
cy.get(RULE_AUTO_REFRESH_INPUT).type('{selectall}').type(`${interval}{enter}`);
cy.get(ALL_RULES_PANEL).first().click({ force: true, multiple: true });
};

// when using, ensure you've called cy.clock prior in test
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this comment still valid? Didn't see a cy.clock anywhere?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deleted in followup #83023

export const checkAutoRefresh = (ms: number, condition: string) => {
cy.get(ASYNC_LOADING_PROGRESS).should('not.be.visible');
cy.tick(ms);
cy.get(ASYNC_LOADING_PROGRESS).should(condition);
};

export const dismissAllRulesIdleModal = () => {
cy.get(RULE_AUTO_REFRESH_IDLE_MODAL_CONTINUE)
.eq(1)
.should('exist')
.click({ force: true, multiple: true });
cy.get(RULE_AUTO_REFRESH_IDLE_MODAL).should('not.be.visible');
};

export const checkAllRulesIdleModal = (condition: string) => {
cy.tick(2700000);
cy.get(RULE_AUTO_REFRESH_IDLE_MODAL).should(condition);
};

export const resetAllRulesIdleModalTimeout = () => {
cy.clock(Date.now(), ['setTimeout']);
cy.tick(2000000);
cy.window().trigger('mousemove', { force: true });
cy.tick(700000);
};

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
Expand Up @@ -45,6 +45,7 @@ export interface HeaderSectionProps extends HeaderProps {
title: string | React.ReactNode;
titleSize?: EuiTitleSize;
tooltip?: string;
growLeftSplit?: boolean;
}

const HeaderSectionComponent: React.FC<HeaderSectionProps> = ({
Expand All @@ -57,10 +58,11 @@ const HeaderSectionComponent: React.FC<HeaderSectionProps> = ({
title,
titleSize = 'm',
tooltip,
growLeftSplit = true,
}) => (
<Header data-test-subj="header-section" border={border} height={height}>
<EuiFlexGroup alignItems="center">
<EuiFlexItem>
<EuiFlexItem grow={growLeftSplit}>
<EuiFlexGroup alignItems="center" responsive={false}>
<EuiFlexItem>
<EuiTitle size={titleSize}>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
/*
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The files under components/last_updated were just moved from under timeline. Not new code.

* 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 { mount } from 'enzyme';
import { I18nProvider } from '@kbn/i18n/react';

import { LastUpdatedAt } from './';

describe('LastUpdatedAt', () => {
beforeEach(() => {
Date.now = jest.fn().mockReturnValue(1603995369774);
});

test('it renders correct relative time', () => {
const wrapper = mount(
<I18nProvider>
<LastUpdatedAt updatedAt={1603995240115} />
</I18nProvider>
);

expect(wrapper.text()).toEqual(' Updated 2 minutes ago');
});

test('it only renders icon if "compact" is true', () => {
const wrapper = mount(
<I18nProvider>
<LastUpdatedAt compact updatedAt={1603995240115} />
</I18nProvider>
);

expect(wrapper.text()).toEqual('');
expect(wrapper.find('[data-test-subj="last-updated-at-clock-icon"]').exists()).toBeTruthy();
});

test('it renders updating text if "showUpdating" is true', () => {
const wrapper = mount(
<I18nProvider>
<LastUpdatedAt updatedAt={1603995240115} showUpdating />
</I18nProvider>
);

expect(wrapper.text()).toEqual(' Updating...');
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
/*
* 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 { EuiIcon, EuiText, EuiToolTip } from '@elastic/eui';
import { FormattedRelative } from '@kbn/i18n/react';
import React, { useEffect, useMemo, useState } from 'react';

import * as i18n from './translations';

interface LastUpdatedAtProps {
compact?: boolean;
updatedAt: number;
showUpdating?: boolean;
}

export const Updated = React.memo<{ date: number; prefix: string; updatedAt: number }>(
({ date, prefix, updatedAt }) => (
<>
{prefix}
{
<FormattedRelative
data-test-subj="last-updated-at-date"
key={`formatedRelative-${date}`}
value={new Date(updatedAt)}
/>
}
</>
)
);

Updated.displayName = 'Updated';

const prefix = ` ${i18n.UPDATED} `;

export const LastUpdatedAt = React.memo<LastUpdatedAtProps>(
({ compact = false, updatedAt, showUpdating = false }) => {
const [date, setDate] = useState(Date.now());

function tick() {
setDate(Date.now());
}

useEffect(() => {
const timerID = setInterval(() => tick(), 10000);
return () => {
clearInterval(timerID);
};
}, []);

const updateText = useMemo(() => {
if (showUpdating) {
return <span> {i18n.UPDATING}</span>;
}

if (!compact) {
return <Updated date={date} prefix={prefix} updatedAt={updatedAt} />;
}

return null;
}, [compact, date, showUpdating, updatedAt]);

return (
<EuiToolTip
data-test-subj="timeline-stream-tool-tip"
content={
<>
<Updated date={date} prefix={prefix} updatedAt={updatedAt} />
</>
}
>
<EuiText size="s">
<EuiIcon data-test-subj="last-updated-at-clock-icon" type="clock" />
{updateText}
</EuiText>
</EuiToolTip>
);
}
);

LastUpdatedAt.displayName = 'LastUpdatedAt';
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
/*
* 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 { i18n } from '@kbn/i18n';

export const UPDATING = i18n.translate('xpack.securitySolution.lastUpdated.updating', {
defaultMessage: 'Updating...',
});

export const UPDATED = i18n.translate('xpack.securitySolution.lastUpdated.updated', {
defaultMessage: 'Updated',
});
Original file line number Diff line number Diff line change
Expand Up @@ -210,7 +210,7 @@ export const getColumns = ({
getEmptyTagValue()
) : (
<LocalizedDateTooltip fieldName={i18n.COLUMN_LAST_UPDATE} date={new Date(value)}>
<FormattedRelative value={value} />
<FormattedDate value={value} fieldName={'last rule update date'} />
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed this here because all the relative times (updated at, last run, last update, etc) felt overwhelming. @marrasherrier what do you think?

</LocalizedDateTooltip>
);
},
Expand Down
Loading